Assumptions: Phone Gap has been installed, development environment is ready. First basic Phonegap project has been created. Basics of CLI are clear.
So assuming the basic project has been created lets see how to manage, compile and run it.
Serving the Application on Browser
PhoneGap has a really useful command that you will be using the most while developing the application. It basically creates a local Node.js web server with the live reload functionality that serves the application’s content similar to a regular web page. The application works the same way as it does on the mobile device but in this case we are running it in the testing environment.
It was intended to be used with the PhoneGap Developer app but as it is a regular web server and web browser, you can open it on a specific port. I would recommend that you use the Google Chrome web browser as it has great development tools for debugging the pages.
Running a local web server with the content of the application is simple by running the following command:
phonegap serve
The app will run by default on port 3000. It will auto-reload the current page if it detects changes in any of the JavaScript, CSS, or HTML files. To run it inside the web browser, just open the http://localhost:3000 page.
There are a few options that can be used with the command; however, only one is worth mentioning: assigning a different port number. For example, if we want to run on 4000, we will run the following command:
phonegap serve -p 4000
The command will run until it is interrupted by the keyboard shortcut Ctrl + Z.
Note: Though it is quite useful, it is worth knowing that it is not meant to be used for testing everything in a computer’s web browser. The features that require a native API are not reachable, so this mode is useful for building and testing the user interface. Below we’ll have a look at actually making the app run on native devices and the steps involved.
Preparing a Phonegap application
Before building an application, all the required source code and assets need to be copied to a specific platform in order to have the latest source code.
To be able to prepare the web assets from the www/ directory, we need to run the following command:
phonegap prepare
You are going to use this frequently, but there are times when you want to prepare a specific platform. You can optionally list them as shown in the following command, where we will prepare the assets only from the android platform:
phonegap prepare android
Once this process has been done, the project is ready to be compiled in a binary application by running the compile command or manually building it in the IDE.
Compiling a PhoneGap Application
After finishing the process of preparing the web assets in specific directories for every platform, we will want to compile the actual code. The project is ready for us to compile a binary application that can be run on the devices.
Here is the simple command to compile your app.
phonegap compile android
As both of the commands are related, we might want to run both of them one after another and so it is better to run both of them in a single line, as shown in the following command:
phonegap prepare android && phonegap compile android
As the previous command is quite common, we have unified it in a single command that prepares the web assets and then compiles it in a binary application. The simplest method is to run the following command:
phonegap build
But beware, this is not the most appropriate way as it builds a binary for every platform and you would ideally want to build and test for a single platform first.
So for that we have:
phonegap build android
I would recommend that you run it with a single platform of developing the application. When the features are done and the application moves to the intensive testing phase, you should build all the platforms at the same time
Another time when you need to run the build command is when you make a release version of the binary application that is ready for deployment to the application store. You can prepare a release version by running the command with the -release option. This command prepares the unsigned release APK file as follows:
phonegap build android —release
Default settings will create an APK file in the debug mode, whereas adding the release option flag will create the APK file in the release mode.
Let’s finally look at running the application now on the device.
Running a PhoneGap Application on device
Building an application and manually installing it on the device can be timeconsuming, so there is another command that does all the work for you. The run command is an all-in-one command that prepares all the web assets for the selected platforms. It compiles the assets in an installable application. After compilation, you can install it in the actual device or an emulator. To run the default application, run the following command:
phonegap run android
Well, it can work without specifying the platform, but that is not really practical as you will not be emulating it on all the device types together not to mention that this command is pretty resource intensive as it is.
Here are some options to be used with the run command:
-emulator: This command is used if you want to build and run the application in the emulator in your computer and since emulator is memory- and processor-intensive, it might affect your computer’s performance and it is recommended that you do not use emulators with a high-screen resolution as the performance might be affected a lot. Run the following command:
phonegap run android —emulator
-nobuild: The nobuild option is useful if you have already built the application before and just want to run it in the device. Building the application is the most time-consuming part so if there were no changes in the code, then you can run the application faster. It is also great for testing on multiple devices sequentially. After you are done testing with one platform, you can run it on another one. An example for running nobuild on an Android is as follows:
phonegap run android —nobuild
Using PhoneGap Build Service
We’ve talked about building the app locally, but you can also use the PhoneGap build service to build your apps.
This is available here, available by Adobe. This is a pretty helpful service with some advantages like:
- if you use local PhoneGap, Windows applications can be built only on the Windows computer, iOS applications can be built on Mac OS computers only, and Android can be built on any operating system. While using PhoneGap Build, you can build for all three platforms, no matter which OS you are using.
- They do the work for you in the cloud and your app will always be built with the most up-to-date SDK for the platform you are targeting.
- Add team members and create roles within your PhoneGap Build projects. Speed up collaboration.
And Yes, they do have a free plan, although somewhat limited to get you started.
Well, that’s it folks for our second tutorial in the PhoneGap Series. Our first tutorial on how to create your first Phonegap app is also there by the way.
If you are looking for an Cross platform App development company in India or a PhoneGap, Cordova app Development Company in India, do contact us on our website.
We also provide Magento Store setup and Installation services from India and can create Magento Powered mobile apps.