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.
- Create a GitHub Account
- Fork Hello PhoneGap Repo
- Build Hello PhoneGap on PhoneGap Build
- Updated Code
- Rebuild the app
Create a GitHub Account
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.
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.
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
You will see that PhoneGap build will fetch the contents of your repo and will display a few details
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.
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
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
Once the build is complete, you will see download for each environment
Now, you can download the installer for your device and check out the new changes.
Thanks for reading! Do comment.