Now that you’ve completed the Installation of PhoneGap, let’s understand the process of creating, running and building process of an app developed by PhoneGap.

Create An App

There are two ways to create an app:

  • GUI
  • CLI

Create An App With GUI:

You need to open the PhoneGap Desktop App.

  1. Click on ‘+’ symbol and then choose ‘Create new PhoneGap project‘.phonegap-windows-create-project
  2. Fill the following details:
    1. Local Path
    2. Name
    3. ID (Optional)phonegap-windows-fill-details
  3. The app has been created. You need to click on the green button to run the app.
    The server address at the bottom indicates that your app is running and it is the active project among all.
    Only one project can be active at a time.phonegap-windows-run-project

Create An App With CLI:

Open the command prompt if you’re using Windows or Terminal app if you’re using Mac OS X

  1. Create a folder named ‘sample‘ in the current location by the following command.
     $ phonegap create sample

    It will create the project with the default name as Hello World and default id as ‘com.phonegap.helloworld’.
    If you want to create a project with the custom name and custom id, type the following command.

    $ phonegap create myApp --id "org.myapp.sample" --name "appSample"

  2. Make sure you’re getting the following output.
    Creating a new cordova project.

  3. Now when your project has been created in the current location, type cd command to enter into the project directory.
    $ cd Sample/
  4. You need to type dir command in the Command prompt (Windows) and ls command in the Terminal app (Mac Os X).
    Command Prompt (Windows)

    $ dir

    Terminal App (Mac OS X)

    $ ls

    You will see the following files and directories.

     config.xml            hooks          platforms          plugins          www
  5. As index.html stored in www, we’ll change our directory from sample to www.
    $ cd www/

Run An App

Again there are 2 ways to run your app:

  • GUI
  • CLI

Run An App With GUI:

Important Points

  • The desktop app of PhoneGap initiates a local web server which hosts the project.
  • This local server returns a server address (A private IP Address).
  • By entering this server address in PhoneGap’s Mobile app or in any browser installed on the desktop, you can run the app.
  • If you’re running the project on the mobile app, make sure your Desktop and Mobile are connected to the same network.
  1. Run the project by clicking on the green button in the desktop app.
  2. Grab your device, open PhoneGap’s mobile app, enter the server address written on the bottom of the Desktop App and tap ‘Connect’phonegap-mobile-enter-server-address
  3. You will see a connection occurred message followed by the success message
  4. When the app connects, it will load and preview of the app will be displayed.phonegap-mobile-default-app

Run An App With CLI:

  1. Open the command prompt and change into the project’s directory.
    $ cd sample/
  2. Type ‘$ phonegap serve‘ in the command prompt or terminal app to run the project. This will return a server address.
    $ phonegap serve
  3. Now that you’ve server address, you just have to follow the 2nd, 3rd and 4th step mentioned in the above section ‘Running Your App With GUI‘.

Making Updates: 

  1. The preview you saw in the above step was the default look of an app. Now let’s make some changes.
  2. Open the index.html (located in the project folder: ~/sample/www/index.html) file in any text editor. I am going to use Sublime Text.
  3. I am going to make following changes to the code:
    • Change the title from ‘Hello World‘ to ‘Welcome To FormGet
    • Change the logo from ‘PhoneGap’s‘ to ‘FormGet
    • Change the heading from ‘PhoneGap‘ to ‘FormGet
    • Change the paragraph text from ‘Device is ready‘ to ‘Welcome to FormGet
  4. Save the changes and run the app by clicking on the green button of the desktop application.
  5. Now, open the mobile app and see the changes.phonegap-mobile-formget-app
  6. You can make more changes as you like to the HTML, CSS and JavaScipt Code.

Build An App

Building/Compiling an app is an important phase of development. Now that we have created an app, we have to compile and generate an executable file for different platforms. Following are the ways which you can use to build an app.

  • Build An App Using PhoneGap Build
    • By uploading a zip file
    • Using GIT
  • Build An App Using CLI

Build An App Using PhoneGap Build:

PhoneGap Build is a cloud service used to build apps online. All you have to do is to upload the project to PhoneGap Build and it will create an executable file of apps for different platforms. It will generate:

  • APK for Android
  • IPA for IOS
  • XAP for Windows

You need to follow the following process:

  1. Open ‘PhoneGap Build‘ and sign up.phonegap-build-signup
  2. Log into the PhoneGap Build Account.
  3. Now you have 2 ways to upload a project:
  • By Using GIT

    You can keep your app open source or private. PhoneGap Build has different plans for private apps.
    You need to upload your project on GitHub and copy the link of that repository and paste it here.phonegap-build-git
    Now click on ‘Pull from .git repository‘. Your project will be uploaded.

  • By Uploading A ZIP File

    Click on the ‘private’ tab.
    Click on ‘Upload a .zip file’ to upload the project.phonegap-build-upload-zip

4.  After uploading the project (Either by GIT or ZIP File), Click on ‘Ready to build‘. You will get the following screen.phonegap-build-after-create-screen
5.  Now click on ‘PG Build App’.

phonegap-build-after-build-screen
6.  Click on the drop down menu ‘No Key Selected‘ next to android’s icon and select ‘add a key‘.(Optional)phonegap-build-nokey
7. Finally, you can download the app for the desired platform.

Build An App Using CLI:

  1. Open the node.js command prompt on windows or terminal app on Mac OS X.
  2. Create a new project with the following command.
    $phonegap create sample com.phonegap.sample

    where, ‘sample‘ is an application name and ‘com.phonegap.sample‘ is an application ID.

  3. Make sure you’re getting the following output.
    Creating a new cordova project.

  4. Now when your project has been created in the current location, type cd command to enter into the project directory.
    $ cd sample/
  5. Now log into the PhoneGap Build with the credentials you got after registration.
    $ cd phonegap remote login -u sampleuser@gmail.com -p ********

    where, -u is for the username and -p is for the password.

  6. Make sure you’re getting the following output.
    [phonegap]logged in as sampleuser@gmail.com

  7. Now let’s build your project for android platform.
    $ phonegap remote build android
  8. Make sure you’re getting the following output.
    [phonegap] compressing the app...
    [phonegap] uploading the app...
    [phonegap] building the app...
    [phonegap] Android build complete

  9. Similarly, you can build your project for ios and windows platforms with the following commands.
    IOS Platform

    $ phonegap remote build ios

    Windows Platform

    $ phonegap remote build wp8

Conclusion:

Now you’re ready to create, run and build your own apps. You can do this process with GUI and CLI as you like. Create more useful apps and enjoy 🙂