PhoneGap Quick Start

Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

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

Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page
  • http://blog.joelberghoff.com J B

    Every time I try to install the apk I’ve created using PhoneGap Build I get an “App not installed” message with no further information. Any idea how to get around this? [Unknown sources is checked, btw]. Thanks for an otherwise great tutorial!

    • http://blog.joelberghoff.com J B

      Very strange. I tried it on another android device I have and I got a more detailed message about an app with the same name but different signature already installed. I removed that app and my installation worked.

      These same steps did not work on my original device, however. I did, however, simply restart that device and it worked. I wonder if I will go through this every time I copy the apk to the device though.

      Thanks.

  • Mark Morgan

    Great Job, Thanks for the clear explanation, really useful.

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Thanks Mark. Glad it helped.

  • http://www.tesirestudios.com/ Nagesh

    Thanks for the article! And sorry, I edited your config.xml without reading the full article.

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Thanks Nagesh! No problem :)

  • Satyajeet Parida

    Hi Arvind,
    after searching a lot of websites finally I found ur blog,
    ur post is really very helpful,
    how can I contact you ?

  • Jose Faro

    Hi i have one question. What if I deploy an app. and a month later I want to update some changes. How can I propagate those changes on devices that already have my app??

    pd1: Im new on hybrid apps
    pd2: your post are helping me a lot ty.

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      @josefaro:disqus Thanks! Glad I could be of help.

      First off, Hybrid apps are no different from native app, except that they are built using Web Technologies and they are rendered inside a Webview. This means that you will follow the same development life cycle that you would generally follow with Native app development.

      A typical hybrid app lifecycle
      ————————————
      Step 1 : Build the App
      Step 2 : Issues Phone Build, generate installers – v 1.0
      Step 3 : Create accounts with various App stores like Android/iOS and publish the app
      <<>
      Step 4 : Develop enhancements
      Step 5 : Issues Phone Build, generate installers – v 2.0
      Step 6 : Back to app store, update and publish v 2.0

      For example an Android app:
      ————————————-
      How to publish an app : http://developer.android.com/tools/publishing/publishing_overview.html
      How to publish updated version : http://stackoverflow.com/a/5700594/1015046
      how generally Android users update their apps, once a new version is released : https://support.google.com/googleplay/answer/113412?hl=en-IN

      Thanks.

  • Patrick

    Hi Arvind,
    Found your blog really helpful.
    You are doing a great job.
    Kudos.

    • Arvind Ravulavaru

      Thanks Patrick!