{"componentChunkName":"component---src-templates-tag-js","path":"/tags/mobile/","result":{"data":{"site":{"siteMetadata":{"title":"LoginRadius Blog"}},"allMarkdownRemark":{"totalCount":1,"edges":[{"node":{"fields":{"slug":"/engineering/getting-started-phonegap/"},"html":"

PhoneGap now also known as Apache Cordova, is a powerful tool for mobile development which allows you to develop in HTML/JS markup and quickly generate out various mobile compatible apps. This prevents your developers from having to learn and understand multiple platform specific languages and instead use the PhoneGap framework which is based in HTML to create the app and then generate it into any one of the following platforms:

\n
    \n
  1. iOS
    2. \n
  2. Android
    3. \n
  3. Windows Phone
    4. \n
  4. Windows
    5. \n
  5. Firefox OS
    6. \n
  6. Amazon Fire OS
    7. \n
  7. Blackberry
    8. \n
\n

With time saved on learning development languages for the above platforms your team can focus on the features of your app.

\n

Setting up your Environment

\n
    \n
  1. Download and install node.js, This will be used to install the Cordova/PhoneGap framework.
    2. \n
  2. Download and install a Git Client, This is used by the Cordova/PhoneGap framework when creating projects.
    3. \n
  3. Open command prompt and verify that both of the above systems have been installed by running npm and git.
    4. \n
  4. Install the Cordova/PhoneGap system by running the following command in your command prompt (Note: this may take a few minutes)
    5. \n
\n
C:\\>npm install -g cordova
\n

Verify your installation of Cordova/PhoneGap by running cordova in command prompt. This should display a list of the available Cordova commands.

\n

Setting up your Project

\n
    \n
  1. Create a directory which will contain your PhoneGap/Cordova project code.
    2. \n
  2. Open the created directory in command line and create a project with the command cordova create < sitename >
    3. \n
\n
C:\\>rootdir\\cordova create FirstSite
\n
    \n
  1. \n

    This will create a project in the root folder with the specified site-name. This project will contain:

    \n
      \n
    1. \"hooks\" directory- Contains special scripts that can be used to customize Cordova commands.
      2. \n
    2. \"platforms\" directory- This contains the app specific projects that you will include below.
      3. \n
    3. \"plugins\" directory- Contains add-on code for interfacing with native features. You can create your own custom interface or use one of pre-compiled plugins.
      4. \n
    4. \"www\" directory- Contains the PhoneGap/Cordova structure and some standard js and css files.
      5. \n
    5. config.xml file- This file contains meta data for controlling common features of your apps like the app title, description and author.
      6. \n
    \n
    2. \n
  2. \n

    Add platforms to the project with the cordova platform add command. Note: adding platforms requires that the relevant dependencies are installed in your system for example adding android requires that you have installed the Android SDK. Available platforms for a windows environment are:

    \n\n

    And for Mac:

    \n\n
    C:\\>rootdir\\cordova platform add android
    \n
    3. \n
  3. \n

     You can now get a list of the added platforms by running the following command:

    \n
    C:\\>rootdir\\cordova platform ls
    \n
    4. \n
  4. \n

    You can remove a specific platform from the list with the following command:

    \n
    C:\\>rootdir\\cordova platform remove android
    \n
    5. \n
  5. Once you have added in the desired platforms build the platform specific apps by running the following command:
    6. \n
\n

Note: Building platforms requires that the relevant dependencies are installed in your system for example building android requires that you have installed the Android SDK

\n
C:\\>rootdir\\cordova build
\n
    \n
  1. You can use these built projects found in the \"platforms\" directory in platform specific IDEs or emulate the projects directly with the following command:
    2. \n
\n
C:\\>rootdir\\cordova emulate android
\n

At this point you have a basic PhoneGap project configured and your desired platforms added and you can get started with adding or building out additional features and content in the \"www\" directory and run the command in step 7 above to create the platform specific projects. You can find detailed instructions on setting up additional features and implementing PhoneGap on the PhoneGap site.

\n","frontmatter":{"date":"March 31, 2015","updated_date":null,"title":"Getting Started with Phonegap","tags":["Engineering","PhoneGap","Mobile"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/d8c820456aa3a57aa0a36aab4d27f8fc/40725/dev-sprites2.png","srcSet":"/static/d8c820456aa3a57aa0a36aab4d27f8fc/69585/dev-sprites2.png 200w,\n/static/d8c820456aa3a57aa0a36aab4d27f8fc/497c6/dev-sprites2.png 400w,\n/static/d8c820456aa3a57aa0a36aab4d27f8fc/40725/dev-sprites2.png 580w","sizes":"(max-width: 580px) 100vw, 580px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}}]}},"pageContext":{"tag":"Mobile"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}