Populate your PhoneGap App with Data from an External Server DB


With this article, we’ll pull data from a server and show it in the app. We’ll create a database table on a server, load it with data, then set up the scripts to make it all work. You’ll need a MySQL server and the ability to upload and change files on it.

My development environment:

Mac OS X 10.9.1 on latest Mac Mini
Cordova CLI 3.4.0
For Android 4.3, 4.4 v19
Testing in device: Android-19, Nexus 7 with 4.3
No Jquery or other JS or CSS packages used

This post assumes you already have your Cordova PhoneGap environment already set up. Look elsewhere on this site for setting up for iOS or Android.

Continue reading

Adding Cordova APIs to Android via CLI: Camera and File APIs – shoot picture and upload to server folder with PHP


In this article, we are continuing our exploration of the Cordova APIs. On this page, we’ll explore the Camera and File APIs to get a photo onto the server. Here, we’ll learn how to upload the image to a server directory after shooting it.

This article requires that you have a server with PHP installed, are able to upload a file to it, and the server accepts uploads. My simple server has a CPanel interface that allowed me to do all of the above. (Don’t worry; I’m going to give you the steps for all of this.)

Continue reading

Cordova-supported WebSQL Database, with user-added data


In this article, we are examining another facet of the database storage, which is built into Cordova. In this article, we’ll create an empty database and allow the user to add records to the database and store them in the device. A button will delete the database. Two outputs are given, one in a text field and one in a table layout. With the text-only layout in the textfield, you can press and hold in the textfield and copy the contents to export it.

Continue reading

Adding Cordova APIs to Android via CLI: Prepopulated Database Storage


In this article, we are in part 5 of exploring the Cordova APIs, which started in https://iphonedevlog.wordpress.com/2014/01/31/adding-cordova-apis-to-android-via-cli-accelerometer-and-camera/ Refer to that article to set up your Cordova PhoneGap project files. You’ll want to follow the “Set Up the Android Project” section through step 9 inclusive.

Continue reading

Adding Cordova APIs to Android via CLI: File API


In this article, we are in part 4 of exploring the Cordova APIs, which started in https://iphonedevlog.wordpress.com/2014/01/31/adding-cordova-apis-to-android-via-cli-accelerometer-and-camera/ Refer to that article to set up your Cordova PhoneGap project files. You’ll want to follow the “Set Up the Android Project” section through step 9 inclusive. On this page, we’ll explore the File API from the perspective of getting our feet wet.

Continue reading

Adding Cordova APIs to Android via CLI: Geolocation, Globalization, Notification


In this article, we are in part 3 of exploring the Cordova APIs, which started in https://iphonedevlog.wordpress.com/2014/01/31/adding-cordova-apis-to-android-via-cli-accelerometer-and-camera/ Refer to that article to set up your Cordova PhoneGap project files. You’ll need to follow the “Set Up the Android Project” section through step 9 inclusive. On this page, we’ll explore the Geolocation, Globalization, Notification APIs from the perspective of getting our feet wet. Continue reading

Adding Cordova APIs to Android via CLI: Compass, Connection, Device


In this article, we are in part 2 of exploring the Cordova APIs, which started in https://iphonedevlog.wordpress.com/2014/01/31/adding-cordova-apis-to-android-via-cli-accelerometer-and-camera/ Refer to that article to set up your Cordova PhoneGap project files. You’ll need to follow the “Set Up the Android Project” section through step 9 inclusive. On this page, we’ll explore the Compass, Connection, and Device APIs. Continue reading

Adding Cordova APIs to Android via CLI: Accelerometer and Camera


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.

Continue reading

Easily Add Search Functions to Your App


I have been adding a Search function to my Cordova PhoneGap apps for a few years now. It is so easy that I want to share it with you who have wondered how to do the same. I use a product that works in Windows, and it creates a search database of all words in the HTML pages using Javascript. I’m using Zoom Search Engine 6.0 Professional Edition, available from http://www.wrensoft.com/zoom/Continue reading

Using PhoneGap 3.0 CLI on Mac OS X to Build iOS and Android Projects


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:

iOS: https://iphonedevlog.wordpress.com/2014/06/24/using-cordova-3-5-cli-on-mac-os-x-mavericks-to-build-ios-apps/

Android: https://iphonedevlog.wordpress.com/2014/06/20/using-cordova-3-5-cli-on-mac-os-x-mavericks-to-build-android-apps/

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

Continue reading

Cordova 2.9.0: “[ERROR] Error initializing Cordova: Class not found”


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:
[ ]
gap:["Device","getDeviceInfo","Device1830682625"]
Cancel, OK

If I click on OK another alert appears, saying:

The page at file://localhost/ says:
[ ]
gap:["Device","getDeviceInfo","Device889844386"]
Cancel, OK

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

Adding Picture Zooming to Your PhoneGap App with iScroll4


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

Installing a 9-Patch Splash Screen for Android using draw9patch and PhoneGap


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

Fixing Android Lint Warnings Found when Building a PhoneGap Project


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

Cordova PhoneGap 2.7.0 in Windows with Eclipse: Install to Release (updated 6/25/13)


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 ADT
Install the Android SDK
Android SDK Manager
Set up your PATH environment variables

The steps following will take up where these left off.
Continue reading

What programming language should you learn if you want to make apps?


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.

Converting to Universal App with Zurb’s Foundation using Responsive Web Design Techniques


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

Building a PhoneGap Android App in Windows: Cordova 2.3.0 with Eclipse 4.2.1


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

Book review: PhoneGap Mobile Application Development Cookbook, by Matt Gifford


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