Recently, I took a Cross-Platform Mobile Application Development class and worked with PhoneGap for the past five weeks. PhoneGap was developed by Nitobi Systems, but was acquired by Apache so it’s actually Apache Cordova now, but you can still download it as PhoneGap and use the PhoneGap commands in your terminal. I will refer to it as PhoneGap throughout the rest of this article.
So PhoneGap allows developers to create mobile applications without having to write the mobile application in its native language. Cool, right? The application can be developed in HTML5, CSS3, and JavaScript and PhoneGap does all the under the hood stuff to make your application run on the platform you desire. I used PhoneGap to create Android applications and used the PhoneGap application on Play Store to run my PhoneGap application on my physical device.
Before you get started, you will need to install the PhoneGap CLI and node.js for your JavaScript to run in your application. The documentation is very easy to follow and you can find it here:
Documentation for PhoneGap CLI is located here -> http://docs.phonegap.com/getting-started/1-install-phonegap/cli/ (*make sure you click the CLI tab and not the Desktop App tab above the documentation)
Once you have done that, we are ready to get started! Woo!
To create your PhoneGap application, navigate to the directory you want to save your application. For me, I am navigating to my phoneGapApps folder I created to store my projects.
C:\Users\elyse> cd "C:\Users\elyse\OneDrive\phoneGapApps"
We are now ready to create our first application! The photo below shows the command to create an new PhoneGap project.
C:\Users\elyse\OneDrive\phoneGapApps>phonegap create myFirstApp
*You should see "Creating a new cordova project."
To use the phonegap commands, you want to change directory to the www folder in your application. Of course, your file directory may be different than mine. SO, if you go into File Explorer, click on your project, and click into the “www” folder, right click the text box above that says what folder you are in, and copy address as text.
Now we can go into our terminal and cd (change directory) to this directory. Don’t forget to add quotation marks around your file location.
C:\Users\elyse> cd "C:\Users\elyse\OneDrive\phoneGapApps\AirportInfo\www"
I used the Brackets.io editor because it has live preview for Chrome. If you are in Chrome browser, press CTRL + SHIFT + I and it will open the Chrome Developer Tools. There is a little symbol at the top of the developer tools that looks like a little phone and tablet, click that and BOOM you have Device Mode. Okay? Okay. Now above your device in your browser, you can see you can select different devices with different screen resolutions and add/edit the screens you want to test on. To the right of the tool bar, you will see a little rotation button so you can change the view of the screen to test on that as well. WOW. Pretty cool, right?
Okay, but I want to know how to test from terminal. Yes, testing from the terminal is pretty sweet. So, in order to do this without getting an error, we need to remove the browser platform installed and update it with the new browser. You have to do this on EVERY project. While we can combine these commands together using &&, it has failed me before, so I prefer to do them one at a time. In your terminal, while in the “www” folder of your app in command line (which you still should be) type this:
C:\Users\elyse\OneDrive\phoneGapApps\AirportInfo\www> phonegap platform rm browser
[PRO TIP: Whenever you see a $ sign in examples on stackoverflow or other sites, it just means you are typing a command like it shows on MacOS when you are in the terminal. I use Windows and this would have been a GREAT thing to have learned about a year into coding. I probably typed so many commands that would’ve worked, had I known that I didn’t need to type the $ sign! BAM, saved you a ton of time and tears.]
Now, we add in the most current browser platform:
phonegap platform add browser
Now we are all set to run our application from our terminal. The command to run the PhoneGap application is:
phonegap run browser
This is one way to get it to run in the browser. You can also use the Live Preview mode in Brackets.io. The third way to try it is to type:
phonegap serve –-browser
You will see some IP addresses of it connecting to the server.
Then switch to your browser window and type localhost:3000 in the URL box. Your application should open and you can CTRL + SHIFT + I to get it to device mode.
So there you have it! You can now create a PhoneGap application from command line, add and remove the browser platform, use Chrome Device Mode in your browser, and test your app in your browser three different ways.
In future posts, I will show you what to remove from your project, how to edit your project using Brackets.io, how to create a barebones template, and how to test on a physical device.
You can download the Brackets editor here -> http://brackets.io/
I hope you enjoyed this post, let me know your thoughts or if this helped you in any way. I love feedback!
Top comments (0)