In this beginner’s article, we’ll see what’s involved in adding the Cordova APIs to an PhoneGap Android project. It was written to help get your feet wet in case you’ve never tried it. An API (application programming interface) will allow us to use the features of the smartphone, such as accelerometer, camera, com
pass, and other features. In the case of Cordova’s PhoneGap, this APIs come in the form of plugins. They need to be added to the project on an as-needed basis.
This article gets you up to speed on how to integrate your HTML/CSS/JS app with PhoneGap/Cordova into an iOS app using a Mac and prepare it for App Store submission. This article assumes you’ve already followed the steps on https://iphonedevlog.wordpress.com/2013/08/16/using-phonegap-3-0-cli-on-mac-osx-10-to-build-ios-and-android-projects/ to:
Add PATH statements to .profile
Install Cordova CLI
In this article, I am referencing Mac OS X Mavericks 10.8.5 and Xcode 5.0.2 on a Mac Mini. PhoneGap CLI 3.3.0 was downloaded. I am referencing “cordova” in the command-line interface, not “phonegap.” This project will not use the PhoneGap Build service. Continue reading
You can add a versioning control system to track and manage your project’s assets with Git locally — you don’t need to upload it to git.com. Here’s how.
Download Git from http://git-scm.com. It will detect your OS and provide the correct download for it. For my Mac, it was version 188.8.131.52.
The Mac version downloaded a dmg file to my Downloads folder. Double-click to open it, then double-click on the pkg file. (If your preferences prevent you from opening a file from an unidentified developer, then hold down Control, right-click on the pkg icon, and select open.) The Installer should appear; click to continue through the few steps, including providing your admin password. You’ll find a drive icon for the Git dmg package; right-click and select to Eject. (I believe “dmg” is short for “disc image.”) Continue reading
At the time this was written PhoneGap Build does not support PG 3.0. These instructions assume Cordova PhoneGap is being used, not Build.
I highly recommend following the latest version of PhoneGap or Cordova. For instance, try these pages:
In this article, you will use CLI to build iOS and Android projects:
- Install Cordova
- Create a project with all necessary www folders and files
- Add iOS and Android platform version folders and files
- Build an Android debug apk for installation on a device for previewing
- Build an Android project and view on a browser for previewing
- Add the InAppBrowser and Splashscreen plugins
- Update icons and splash screens for each platform
- Update the config.xml, AndroidManifest.xml, and index.html files
- Customize content for a particular platform
- Finalize a product apk for Google Play upload, including keys and certificates
When I preview a page of my Android app with cordova.js (2.9.0) in Google Chrome, the page appears with an alert message saying,
The page at file://localhost/ says:
If I click on OK another alert appears, saying:
The page at file://localhost/ says:
When I click on OK, the alert stops with no issues. These alerts pop up only on pages where cordova.js (2.9.0) are called, such as when the page contains external links and invokes the InAppBrowser. No other pages are affected.
I get these alerts on the Mac and PC. I’ve never received these alerts before 2.9.0. Continue reading
I thought that by simply adding “user-scalable=yes” to the meta tag it would enable my pictures to be pinch/zoom scalable. But such was not the case. Something more was needed, and iScroll4 supplied the missing functionality. What’s extra nice is that doesn’t need Jquery. Here are the simple steps I took to enable my pictures to have pinch/zoom. This was tested on a Nexus 7. Continue reading
Cordova includes a Splashscreen API so you can add a splash screen to your app, which consists of a still graphic image displaying before your app starts.
If you create your Android splash screen as a 9-patch image, then the image will resize proportionally when displayed in either portrait or landscape mode. Continue reading
If you want to link to an external site and make it easy for the user to return to your PhoneGap app, try the well-named inAppBrowser (IAB for short). Here are the simple steps to implement it into an already-working PhoneGap project for iOS and Android. Continue reading
One of the checks you should make before creating your apk file for testing or uploading to an Android-based app store is the Run Lint command in Eclipse. This is found when you right-click on your project name in the Project Explorer, and select Android Tools > Run Lint…
The Lint Warnings view will show various performance, correctness, security, and other Android-environment-specific problems that may give rise to your app not loading or working in your device. (You would not use Lint to check for the validity of your HTML; you would use Validate for that.) Continue reading
I already have the major software installed on my Windows machine from my last Eclipse build, detailed in https://iphonedevlog.wordpress.com/2012/11/20/building-a-phonegap-android-app-on-windows-cordova-2-2-0-with-eclipse/. If this is your first time with Eclipse and PhoneGap, follow the link above and pay careful attention to the following setup sections:
Install Eclipse Juno IDE
Install Java JDK
Install the Android SDK
Android SDK Manager
Set up your PATH environment variables
The steps following will take up where these left off.
Newcomers ask this question a lot. I’ve posted my response to this under the link, “Which programming language should I learn to make apps?” I hope it helps to narrow down your choice of languages to start learning. I posted it here so I can point to it when I encounter the question in forum posts.
Before you can install the app you create with PhoneGap on your device, you need to sign up as a Developer with Apple and go through the business documentation, Certificate Signing, and Developer Certificate process, all of which are detailed on Apple’s web site (https://developer.apple.com/programs/ios/), under Prepare for App Submission. Nevertheless, you can skip all those steps and still see your work in the the iOS Simulator included with Xcode — you just won’t be able to view the app in your device or App Store. Xcode is a free download you can download now, but the Developer status comes at $99 a year. Continue reading
This article records the steps I followed to convert my mobile phone app into a Universal app good for mobile and tablet screen sizes.
Normally, on the mobile device, the user follows this navigation paradigm: screen showing article categories, tap through to show article headings (titles) for that category, then tap on the article heading to show article. For the mobile version, I want to retain this path. For the tablet version, though, I want to show the article headings at left and article detail pages at right, side by side. For both mobile and tablet, I can show the article categories on the home page as large graphical buttons. A text footer with copyright information will stretch across the bottom; this footer will not be fixed.
How do I create both navigation types without duplicating pages for both? By using responsive web design (RWD) techniques, in which the layout changes with the screen width, repositioning the content at certain “breakpoints” of screen widths. Normally, when you narrow the browser window for sites that did not implement RWD techniques, the browser will cut off the site at the right end. As a positive example of RWD, go to the Microsoft web site and narrow your browser, and you’ll see the content adapt to fit. So I want one set of files to work across several screen widths, specifically various sizes of mobile screens and tablets. Continue reading
I already have the major software installed on my Windows machine from my last Eclipse build, detailed in https://iphonedevlog.wordpress.com/2012/11/20/building-a-phonegap-android-app-on-windows-cordova-2-2-0-with-eclipse/. If this is your first time with Eclipse and PhoneGap, follow the link above and pay careful attention to the following setup sections: Continue reading
These instructions follow the Getting Started with iOS guide at http://docs.phonegap.com/en/2.3.0/guide_getting-started_ios_index.md.html#Getting%20Started%20with%20iOS.
Before you can install the app on your device, you need to sign up as a Developer with Apple and go through the business documentation, Certificate Signing, and Developer Certificate process, all of which are detailed on Apple’s web site (https://developer.apple.com/programs/ios/), under Prepare for App Submission. Nevertheless, you can skip all those steps and still see your work in the the iOS Simulator included with Xcode. Xcode is a free download you can download now, but the Developer status comes at $99 a year. If you are new to creating apps for the App Store, you’ll want to peruse the App Store Review Guidelines to make sure your app falls within acceptable limits: https://developer.apple.com/appstore/resources/approval/guidelines.html Continue reading
October 2012. Published by Packt Publishing Ltd. ISBN 978-1-84951-858-1.
Packt asked me to review the book, which I did in PDF format.
About the author: “A regular presenter at national and international conferences, Matt Gifford also contributes articles and tutorials in leading international industry magazines, as well as publishing on his blog (www.mattgifford.co.uk).”
This book functions as a cookbook, so it creates spare apps that do exactly what they set out to do and little else. As a result, there is no disc of complicated code included. The benefit of this approach is that you don’t get lost in the programming of a more fully functioning app. The cookbook format, however, means that you will get only little more explanation of the code than what you’ll see on PhoneGap’s site. So this is not a book for those already comfortable using the code on PG’s site. Continue reading
This feature, built into Cordova 2.3.0, will take the place of ChildBrowser for me. Here are the steps to take to preview it yourself.
1. Download the zip file from https://github.com/apache/cordova-ios Continue reading
From what I see in the installation docs and my experience, it looks like the installation of 2.2.0 is the same as 2.1.0. However, expect exciting changes when Cordova 2.3.0 is released.
Install Eclipse Juno IDE
Eclipse is an IDE (integrated development environment) for creating a variety of applications. Download Eclipse Classic 4.2.1, Windows 32-bit, from: http://www.eclipse.org/downloads/. 222MB download. It went into my Downloads folder. I unzipped it and put it in my C:/Program Files/eclipse folder. I right-dragged the eclipse.exe file to my desktop and designated it a Shortcut.
On startup, it asked me to set up a workspace:
C:\Documents and Settings\shusting\workspace
I opted for that location to be the default. After it started up, I exited. Continue reading