This is a basic app demonstrating the use of a REST API with Phonegap using plain old vanilla Javascript(no libraries or frameworks).
The hello-world template is the default when you create a new application using the phonegap-cli.
phonegap create my-app
Create an app using this template specifically:
phonegap create my-app --template hello-world
To see a list of other available PhoneGap templates:
phonegap template list
Hooks folder would contain special scripts which you do not require right now.
This folder contains the platform specific builds for Android and iOS. This folder and its contents are auto generated by Phonegap when you run the commands addition of platforms.
phonegap platform add android
Executing the above line in Terminal(for Mac) and in command line for Windows will add the Android platform and Android specific files to our project.
phonegap platform add ios
Executing the above line in Terminal(for Mac) and in command line for Windows will add the iOS platform and iOS specific files to our project.
A phonegap project may utilize multiple plugins to achieve the required functionalities. A Phonegap project runs on the web enginer of the device and does not have access to the native APIs of the device OS (eg: Camera). Plugins essentially allow a phonegap project to interact with the native APIs of the device and transform the experience from being a mobile website to a complete mobile app. This folder will contain all of the plugins that come by default with the Hello World template as well as all the other plugins that anyone will ever add to any Phonegap project. There are many plugins which a lot of developers have designed to solve various use cases (Eg: Barcode Scanner, File downloader, File opener etc.). As plugins is a topic in itself, i'll leave it for another day.
This folder contains all the resources, like icons and splash screen images. 'res' here stands for resources.
The icons and splash screens are set in config.xml file. This will be discussed in the explanation of the config.xml file below.
This is the folder where all of our code goes. As phonegap projects are almost always coded in HTML, CSS and JavaScript, it becomes more similar to web project but the Phonegap framework packages it as an app for us. Within the www folder, we have various sub folders. We'll be looking only at folders names css, js and a file named index.html.
The css folder here contains all of our css files.
The js folder contains all the JavaScript files.
index.html file is entry point to our app.
This file contains all the configuration of the project. It contains the Widget ID which is known as package name in Android and App ID in iOS. This file contains various platform specific configurations also, like icon and splash screen. It also has details of all the plugins that have been used in the project. All the tags in this file are self explanatory. You are encouraged to run through this file(and all others too) to get a better idea of the project
In the index.js file under www/js, we will add the API call under onDeviceReady function. The onDeviceReady function is where the command will come after the device has been initialized with all the dependencies.
In this example, we use something called as XMLHttpRequests. These are asynchronous requests, which means that the request is made to the server and then the command continues executing the next line of code without waiting for the response of the server. When the server responds, it triggers an onreadystatechange function, where we write code to receive the response from the server and handle the response accordingly. Go through the code and most of it can be understood pretty easily. Just remember to skip the other functions and concentrate only on what is within onDeviceReady function.
This project already comes with the platform files and hence you only need to run the command:
phonegap run android command
in the command line to execute the app, considering your phone is connected and you have Android SDK properly installed.
To run this project on iOS, first run this command:
phonegap platform add ios
then run this command:
phonegap build ios
Now, navigate to the iOS folder under platforms folder and find the XCode project there. Open the Xcode project and run the project from XCode on an iOS device. As XCode is only available on MacOS and OSX, you need to have a Mac or a machine running MacOS or OSX. Note that you may also need relevant certificates and permissions to run it on an iPhone.