PhoneGap Quick Start3 min read

PhoneGap 3 Quick Start

PhoneGap Quick Start

PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about.

This blog post is a quick start tutorial on how to develop, build & deploy a native app using HTML5, CSS3, Javascript and PhoneGap. I am not going to explain what PhoneGap can/can’t do or rules for Native app development (may be I’ll write one later).

Contents

Create a GitHub Account

So, we are going to write our code in HTML CSS & Javascript, submit it to Phonegap build and get the mobile installer. Lets get started

The minimal prerequisite to develop a PhoneGap application is a GitHub account. Below is a quick starter. In case you do have a GitHub account, you can skip this section.

  • Step 1 : Navigate to GitHub.com and create an account
  • Step 2 : You may need to verify your email as well.
  • Step 3 : Just for fun, lets create a new repository. Click here, fill out the name & description. Select public as the type of repo (private will cost you money), then click Create Repository. Bam!! Thats your first repository!
  • Step 4 : We need the GitHub app/setup for us to manage the repositories from our machine. Navigate to Downloads, & download the setup.
  • Step 5 : Once the setup is completed, you can launch GitHub application & login with your details
  • Step 6 : Now, you can see a list of projects that are there in your repository.

Fork Hello PhoneGap repo

Now, Lets try and build from an existing base. Navigate to HelloPhoneGap (my GitHub repo that has a PhoneGap boilerplate) & click on Fork. (This button will be under your logout link on the top right hand corner). This will fork/copy HelloPhoneGap to your repository.

Screen Shot 2014-02-23 at 11.01.02 PM

Now, when you navigate to https://github.com/<<your username>>, You can see the forked repo on the list of repositories. Click on HelloPhoneGap. Now, lets deploy the sample project & generated the native mobile installers.

Build Hello PhoneGap on PhoneGap Build

Lets Head to PhoneGap Build. If you already have a Adobe account or a GitHub account, you can login. Else you can create one and then login.

Once you are logged in, you will be navigate to this page. You will see a button named New App. In case you have no prior builds, you will see a tabbed interface with 2 tabs Open Source & Private.

Screen Shot 2014-02-23 at 10.28.39 PM

Click Open Source, now here, we need to provide the Github URL from which, the app would be built. Lets Head back to GitHub. click on our repository URL. This will take us to the repository home page.

On the bottom right hand side, you will see something like this

Screen Shot 2014-02-23 at 10.27.21 PMClick inside the clone URL box and copy the contents. Now head back to PhoneGap Build page and paste the link inside the “Paste .git repo” box

You will see that PhoneGap build will fetch the contents of your repo and will display a few details

Screen Shot 2014-02-23 at 10.30.46 PM Now, our project is ready to be build and deployed. Click on “Ready to Build” button and your app should be update like this

Screen Shot 2014-02-23 at 10.32.35 PM

Bam!! Boom!! Badddaaammm!! Thats it! Your HelloPhoneGap is deployed!! You can click on the Android or Windows icons to download the installers.

PS : You need to have the Apple developer License to build a PhoneGap app for iOS. More details here.

PS : I am assuming you know how to install a third party app on your phone.

Update Code

Lets make some changes to the app, then rebuild, redeploy via PhoneGap build.

Inside your repository, navigate to https://github.com/<<your username>>/helloPhoneGap/blob/master/www/css/index.css (or you can navigate via clicking on the www folder > css folder > index.css file) and then click on Edit.

PS : This way of updating code is only for the tutorial. DO NOT edit any code directly on your repo, mainly if there are more than 1 developers working on it. You are supposed to clone the project to your local, make changes, test the code in your browser & the commit it back via the GitHub tool or the Git command line tools.

Now we will add a very subtle change. Add the following code at the end of the css file

And the click on commit changes. Now your changes are updated.

Rebuild the app

Lets run back to PhoneGap build. Now, on your Apps page, you will see a button named Update Code. When you click on it, you will see something like this

Screen Shot 2014-02-23 at 10.43.13 PM

Click on the Pull Request button. Now, PhoneGap build will fetch the latest code from the repo & initiate the Build. You can scroll down the page and you will see the build in progress

Screen Shot 2014-02-23 at 10.45.44 PM

Once the build is complete, you will see download for each environment

Screen Shot 2014-02-23 at 10.47.13 PM

Now, you can download the installer for your device and check out the new changes.

Thats it! Now you can convert all you fantastic app ideas into native apps using HTML CSS, Javascript & PhoneGap Build!

Next Steps


Thanks for reading! Do comment.
@arvindr21