Setting Up PhoneGap on Windows and OSX Using the Command-Line

Setting Up PhoneGap on Windows and OSX Using the Command-Line

PhoneGap has quickly become a popular platform for building mobile applications, mainly because of the simplicity involved in creating cross-platform applications using only HTML, CSS and JavaScript. The idea is simple – you build your application in HTML5, and then add that code to your PhoneGap application, and it compiles to Android, IOS and Windows for you. PhoneGap even gives you plugins that allow you to access your device Camera, Compass, Contacts, GPS and much more. This means that you can access functionality formerly only available to the native device language using JavaScript.

In this article we are going to look at how to install PhoneGap, using the command-line interface, on Windows and MAC OS X. One caveat here is if you want to build IOS applications, you have to have your PhoneGap installation on a Mac running OS X and Xcode. For Windows Mobile, you must build your PhoneGap application in a Windows environment. Android (built in Java, essentially) can be built anywhere. Most developers I know either have a Mac with Windows installed as a Bootcamp or a Mac running Windows in a virtual machine like VMware or VirtualBox. Creating all three platforms is then as simple as copying the HTML from OS X to Windows, or vice versa.

We will be dealing with the latest stable build of PhoneGap at the moment, which is 3.1.0. I used Windows 8.0 and OS X Mavericks for this tutorial.

Install Node on Windows

To setup PhoneGap on Windows, we need to install node.js on our machine. If you do not have Node yet, head over to http://nodejs.org/ and hit the install button. This will download the Node installer. Run the installer and follow this process:


Click ‘Next’ to get started


Accept the license terms and click ‘Next’


Change the install location if you want to, and click ‘Next’


Select which features you would like installed. Default is ‘all’, which is good.


Click ‘install’ to start running the installer


Wait for the installer to complete


Success!

Install Node on OS X

To setup PhoneGap on OS X, we again need to install node.js on our machine. If you do not have Node yet, head over to http://nodejs.org/ and hit the install button. This will download the Node installer.

Double click on package you have downloaded, and follow this process:


Click ‘Continue’ to get started


Read the license terms (if you must) and click ‘Continue’


To agree to the license terms, click ‘Agree’


Choose which hard drive to install node on. Usually the default is your current drive Click ‘Install’.


Once the installer is done, click close.

To check if node is installed, you need to open your terminal. Click on the spotlight icon on the top right of your status bar (it’s a magnifying glass) and type ‘terminal’ in the search box that appears. Select ‘Terminal’ listed next to ‘Applications’.

When the terminal has opened, type: ‘node -v’. You should get a version number without any errors popping up (mine shows version v0.10.22). If you have errors, head on back to the Node website and check out the support documentation. If you have no errors showing up at this point, you’re done!

Install PhoneGap

Next, we need to install the PhoneGap command-line utility. We do this using Node, on the Windows Command Line or Mac Terminal that we previously opened.

In Windows 7, click on start, and type “cmd” in the search box. This will open your terminal window.

  • In Windows 8, click the “windows” button on your keyboard and type “cmd”.
  • In OS X use spotlight (as detailed above) if your terminal is not still open.

The Commands for Windows and OS X PhoneGap Installation are Identical

Inside the command line terminal, type:

$ npm install -g PhoneGap

‘npm’ Is the Node Package Manager, and is the reason we needed to install Node.

If you get permission errors on OS X, you may need to run the command as the root user, as follows:

$ sudo npm install -g PhoneGap

This will ask you to confirm your password before installing PhoneGap.

Create the PhoneGap App

Now that PhoneGap is installed on your system, you can create the PhoneGap app.

Using the command-line utility, navigate to the directory that you want your application to reside in (if you want to test your application in a standard browser, this will need to be on a webserver like XAMP). Once in the directory of your choice, you need to run the command to tell PhoneGap to create the application. The syntax looks like this:

$ PhoneGap create myProject com.example.myProject MyProject

PhoneGap create– tells PhoneGap to create a new project and expect more arguments.

  • myProject– is the name of the directory that the application will be created in.
  • com.example.myProject– the reverse-domain style identifier for your project. If you are unsure what to use, use this example.
  • MyProject – the display name of your application when it is deployed to the device.

File Structure

Once the project is created, you will notice the following directories in your project root:

  • merges – Contains shared code between the platforms. This is maintained by PhoneGap and you should never touch it.
  • platforms – PhoneGap builds your IOS, Android, Windows and other platforms native code here. Don’t touch.
  • plugins – PhoneGap installs your plugins here. These are PhoneGap specific plugins and should not be touched.
  • www – This is where you do your work. Contains js, css, img and a few other directories specific to PhoneGap. The usage here is out of the scope of this tutorial, but in general, everything starts with the index.html file in this directory.

Build the App

Next, we need to enter the application directory.

$ cd myProject

If we are running OS X and have Xcode installed, we can build an iOS application at this point. Simply run the following in your terminal:

$ PhoneGap build ios

And the response you will see in your terminal is:

[PhoneGap] detecting iOS SDK environment...[PhoneGap] using the local environment [PhoneGap] compiling iOS...[PhoneGap] successfully compiled iOS app

When this is done, you will notice an ‘ios’ directory in the platforms directory of your application. This directory contains your iOS-specific code that Xcode requires to build your application.’

Similarly, to build an Android application alongside the IOS application, run:

$ PhoneGap build android

This will build an ‘android’ directory in the ‘platforms’ directory.
Android applications can be built on Windows as well as OS X.

On your Windows machine, you can build a Windows Mobile application by running:

$ PhoneGap build Windows

It is important to note that you will only ever work in your ‘www’ directory. When PhoneGap compiles your application, it takes all of your code you have created or edited, and adds it to your IOS, Android, or Windows platforms, so you write once, run everywhere (at least for mobile).

Installing Features

The whole point of using PhoneGap, rather than just a mobile web view, is that PhoneGap gives you access to the mobile device hardware like the camera, GPS, etc. In order to use these features, we need to install PhoneGap plugins. These are done on the command line, and again, OS X and Windows commands are identical.

Device API

This allows you to obtain device information, like platform, IMEI, and more.

$ cordova plugin add org.apache.cordova.device

Network Connection and Battery

$ cordova plugin add org.apache.cordova.network-information$ cordova plugin add org.apache.cordova.battery-status

Accelerometer, Compass, and Geolocation

$ cordova plugin add org.apache.cordova.device-motion$ cordova plugin add org.apache.cordova.device-orientation$ cordova plugin add org.apache.cordova.geolocation

Camera, Media Playback and Capture

$ cordova plugin add org.apache.cordova.camera$ cordova plugin add org.apache.cordova.media-capture$ cordova plugin add org.apache.cordova.media

Access Files on Device or Network (File API)

$ cordova plugin add org.apache.cordova.file$ cordova plugin add org.apache.cordova.file-transfer

Notification via Dialog box or Vibration

$ cordova plugin add org.apache.cordova.dialogs$ cordova plugin add org.apache.cordova.vibration

Contacts

$ cordova plugin add org.apache.cordova.contacts

Globalization

$ cordova plugin add org.apache.cordova.globalization

Splashscreen

$ cordova plugin add org.apache.cordova.splashscreen

Open New Browser Windows (InAppBrowser)

$ cordova plugin add org.apache.cordova.inappbrowser

Debug Console

$ cordova plugin add org.apache.cordova.console

Deploy to Device

To deploy to your device, you need to do the following:

Android

Make sure your device is in developer mode, and has USB debugging turned on. Connect your device to your machine and, in the command-line, type:

$ PhoneGap run android

If your Android SDK is correctly installed on your machine, you will see, after a few minutes, that your application will open on your device.

If you want to test your application on an emulator, do the same as above, but with no device connected to your computer.

iOS

This is a little more complicated. Firstly, you need an Apple Developer account if you want to deploy to your device for testing (you can test the device on the Xcode emulator without a certificate, but Apple will not accept your application into the App Store without it being tested on at least one real device). Once this is done and you have setup a provisioning certificate for your device (see http://developer.apple.com/), you need to compile your IOS application. In your Terminal, type:

$ PhoneGap build ios

Your response in the Terminal should be:

[PhoneGap] detecting iOS SDK environment...[PhoneGap] using the local environment[PhoneGap] compiling iOS...[PhoneGap] successfully compiled iOS app

Now that your IOS application is compiled, you need to launch Xcode. Use Spotlight as before, and once Xcode is open, select ‘File’, then ‘Open…’ and from the file browser, navigate to your PhoneGap project. Open the ‘platforms/ios’ directory, and search for the file called ‘{yourprojectname}.xcodeproj’ and double click on it. This will open your project in Xcode.

Look at the top left of your Xcode window. You should see a ‘Play’ button (arrow pointing right), and a ‘Stop’ button (a square), and next to that, the name of your application. Next to that will be the name of an emulator – mine says iPhone Retina (4-Inch 64 Bit). If you have your iPhone, iPod or iPad plugged in, you can click on that and select your device. Then press the play button. This will build your project again in Xcode, and try to deploy it to your device. If your device is not plugged in, it will deploy it to the emulator you have selected, as seen below:

Note that every time you edit your PhoneGap project, you need to run the ‘PhoneGap build’ command before trying to run the application in Xcode. The reason is that the ‘PhoneGap build’ command copies your code from your ‘www’ directory to the ‘platform/ios/’ directory, and only then can Xcode see that your project has changed, and apply the changes.

Conclusion

Now that you have your PhoneGap application running, it’s time to start with the fun stuff – building something. Remember, you are only limited by your imagination and your knowledge of HTML, CSS and JavaScript. For more information on how to use PhoneGap, you can read the official documentation here.

devx-admin

devx-admin

Share the Post:
Clean Energy Adoption

Inside Michigan’s Clean Energy Revolution

Democratic state legislators in Michigan continue to discuss and debate clean energy legislation in the hopes of establishing a comprehensive clean energy strategy for the

Chips Act Revolution

European Chips Act: What is it?

In response to the intensifying worldwide technology competition, Europe has unveiled the long-awaited European Chips Act. This daring legislative proposal aims to fortify Europe’s semiconductor

Revolutionized Low-Code

You Should Use Low-Code Platforms for Apps

As the demand for rapid software development increases, low-code platforms have emerged as a popular choice among developers for their ability to build applications with

Global Layoffs

Tech Layoffs Are Getting Worse Globally

Since the start of 2023, the global technology sector has experienced a significant rise in layoffs, with over 236,000 workers being let go by 1,019

Clean Energy Adoption

Inside Michigan’s Clean Energy Revolution

Democratic state legislators in Michigan continue to discuss and debate clean energy legislation in the hopes of establishing a comprehensive clean energy strategy for the state. A Senate committee meeting

Chips Act Revolution

European Chips Act: What is it?

In response to the intensifying worldwide technology competition, Europe has unveiled the long-awaited European Chips Act. This daring legislative proposal aims to fortify Europe’s semiconductor supply chain and enhance its

Revolutionized Low-Code

You Should Use Low-Code Platforms for Apps

As the demand for rapid software development increases, low-code platforms have emerged as a popular choice among developers for their ability to build applications with minimal coding. These platforms not

Cybersecurity Strategy

Five Powerful Strategies to Bolster Your Cybersecurity

In today’s increasingly digital landscape, businesses of all sizes must prioritize cyber security measures to defend against potential dangers. Cyber security professionals suggest five simple technological strategies to help companies

Global Layoffs

Tech Layoffs Are Getting Worse Globally

Since the start of 2023, the global technology sector has experienced a significant rise in layoffs, with over 236,000 workers being let go by 1,019 tech firms, as per data

Huawei Electric Dazzle

Huawei Dazzles with Electric Vehicles and Wireless Earbuds

During a prominent unveiling event, Huawei, the Chinese telecommunications powerhouse, kept quiet about its enigmatic new 5G phone and alleged cutting-edge chip development. Instead, Huawei astounded the audience by presenting

Cybersecurity Banking Revolution

Digital Banking Needs Cybersecurity

The banking, financial, and insurance (BFSI) sectors are pioneers in digital transformation, using web applications and application programming interfaces (APIs) to provide seamless services to customers around the world. Rising

FinTech Leadership

Terry Clune’s Fintech Empire

Over the past 30 years, Terry Clune has built a remarkable business empire, with CluneTech at the helm. The CEO and Founder has successfully created eight fintech firms, attracting renowned

The Role Of AI Within A Web Design Agency?

In the digital age, the role of Artificial Intelligence (AI) in web design is rapidly evolving, transitioning from a futuristic concept to practical tools used in design, coding, content writing

Generative AI Revolution

Is Generative AI the Next Internet?

The increasing demand for Generative AI models has led to a surge in its adoption across diverse sectors, with healthcare, automotive, and financial services being among the top beneficiaries. These

Microsoft Laptop

The New Surface Laptop Studio 2 Is Nuts

The Surface Laptop Studio 2 is a dynamic and robust all-in-one laptop designed for creators and professionals alike. It features a 14.4″ touchscreen and a cutting-edge design that is over

5G Innovations

GPU-Accelerated 5G in Japan

NTT DOCOMO, a global telecommunications giant, is set to break new ground in the industry as it prepares to launch a GPU-accelerated 5G network in Japan. This innovative approach will

AI Ethics

AI Journalism: Balancing Integrity and Innovation

An op-ed, produced using Microsoft’s Bing Chat AI software, recently appeared in the St. Louis Post-Dispatch, discussing the potential concerns surrounding the employment of artificial intelligence (AI) in journalism. These

Savings Extravaganza

Big Deal Days Extravaganza

The highly awaited Big Deal Days event for October 2023 is nearly here, scheduled for the 10th and 11th. Similar to the previous year, this autumn sale has already created

Cisco Splunk Deal

Cisco Splunk Deal Sparks Tech Acquisition Frenzy

Cisco’s recent massive purchase of Splunk, an AI-powered cybersecurity firm, for $28 billion signals a potential boost in tech deals after a year of subdued mergers and acquisitions in the

Iran Drone Expansion

Iran’s Jet-Propelled Drone Reshapes Power Balance

Iran has recently unveiled a jet-propelled variant of its Shahed series drone, marking a significant advancement in the nation’s drone technology. The new drone is poised to reshape the regional

Solar Geoengineering

Did the Overshoot Commission Shoot Down Geoengineering?

The Overshoot Commission has recently released a comprehensive report that discusses the controversial topic of Solar Geoengineering, also known as Solar Radiation Modification (SRM). The Commission’s primary objective is to

Remote Learning

Revolutionizing Remote Learning for Success

School districts are preparing to reveal a substantial technological upgrade designed to significantly improve remote learning experiences for both educators and students amid the ongoing pandemic. This major investment, which

Revolutionary SABERS Transforming

SABERS Batteries Transforming Industries

Scientists John Connell and Yi Lin from NASA’s Solid-state Architecture Batteries for Enhanced Rechargeability and Safety (SABERS) project are working on experimental solid-state battery packs that could dramatically change the

Build a Website

How Much Does It Cost to Build a Website?

Are you wondering how much it costs to build a website? The approximated cost is based on several factors, including which add-ons and platforms you choose. For example, a self-hosted

Battery Investments

Battery Startups Attract Billion-Dollar Investments

In recent times, battery startups have experienced a significant boost in investments, with three businesses obtaining over $1 billion in funding within the last month. French company Verkor amassed $2.1

Copilot Revolution

Microsoft Copilot: A Suit of AI Features

Microsoft’s latest offering, Microsoft Copilot, aims to revolutionize the way we interact with technology. By integrating various AI capabilities, this all-in-one tool provides users with an improved experience that not

AI Girlfriend Craze

AI Girlfriend Craze Threatens Relationships

The surge in virtual AI girlfriends’ popularity is playing a role in the escalating issue of loneliness among young males, and this could have serious repercussions for America’s future. A

AIOps Innovations

Senser is Changing AIOps

Senser, an AIOps platform based in Tel Aviv, has introduced its groundbreaking AI-powered observability solution to support developers and operations teams in promptly pinpointing the root causes of service disruptions