Cordova 2.2 Android App Creation in Mountain Lion with Eclipse


I upgraded an Android app from Cordova 2.0 to 2.2. There were no plugins involved. These are the steps I followed. This article assumes you already have Eclipse (a software developement kit used to create Android apps; available for Windows and Mac) and its associated files installed.

If you are new to developing apps for an app store, I recommend reading the following:

Developing for the Amazon app store:
https://developer.amazon.com/help/faq.html
http://www.amazonappstoredev.com/

Developing for Google Play:
http://developer.andr oid.com/distribute/googleplay/publish/preparing.html 
Continue reading

Introduction to GitHub


Setup used: Mac OS X Mountain Lion 10.8, Xcode 4.5.1. The version of PhoneGap is not an issue in this article.

Xcode allows us to add source control to a project, such as online by using GitHub.com, or just publishing it locally. With source control on github.com, we could go backward and forward in time to various stages of code changes, and even create a new branch to test or create a different version of the project. That collection of a project’s files is called a repository. GitHub.com allows us to create public repositories (free) or private (paid monthly).

There are several helpful tutorials on how to start a GitHub repository (git repo) when starting a new Xcode 4 project, but I wanted to learn how to create a git repo from an existing Xcode 4 project where the repository option had not been checked when starting up.

Xcode already allows us to make a Snapshot of a project’s state and get back to it, but a GitHub repository has extra advantages of being able to share your code with others as well as store it offsite. I wanted to write about a how-to article on a recent project I worked on and make it available to everyone for download. It was a great time to try out GitHub.com. My final modest effort is seen here: https://github.com/iPhoneDevLog/fonts-bookmarks-notes  Continue reading

PhoneGap 2.1.0 in Mac OS X Mountain Lion 10.8: from Download to iOS App Store


These instructions follow the Getting Started with iOS guide at http://docs.phonegap.com/en/2.1.0/guide_getting-started_ios_index.md.html#Getting%20Started%20with%20iOS. (Earlier versions of this PG pointed to the wrong file.) PhoneGap uses “PhoneGap” and “Apache Cordova” terminology on its web site. I’m going to use “PG” often in this article for shorthand.

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

Cordova 2.0 Android App Creation in Mountain Lion with Eclipse: from Install to Google Play


I kept meticulous notes as I downloaded Eclipse and all the other software I needed to create an Android app for Google Play as though my readers were absolute newbies on the Mac (I’ve been there and I haven’t forgotten) using PhoneGap 2.0.0.

I highly recommend you read this informative FAQ page before you start your app if you are going to submit to the Amazon app store: https://developer.amazon.com/help/faq.html  and this page if you want your app to work on the Kindle Fire devices: http://www.amazonappstoredev.com/2012/09/the-kindle-fire-hd-7-emulator.html

My article below follows these basic steps, but provides much more material to finalize the app: http://docs.phonegap.com/en/2.0.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android

(After I finished the app, I discovered strange error. An Aussie colleague told me to open up the bin/create file in the Downloads folder and do a search for “Darwin.” “Darwin11” should be changed to “Darwin12.” It looks like it would be better off to download PG 2.1.0 instead.) Continue reading

Prepopulated Database using PhoneGap Storage API, Cordova 2.0.0


I slightly adapted the PhoneGap Cordova Storage API to show content on the screen (PG’s version only shows content in the console). Here is that code below. Just copy and paste it into a text file, name it PGStorageAPI.html, and click to display in web browser. You’ll need cordova-2.0.0.js in the same folder.

Please note that this database is created in the HTML on this page. It is not a separate database that can be lost in an upgrade or low-memory situation. Also, it is not a data-entry database where the user enters data. Just like you cannot lose an HTML page in your app, so you can’t lose the pre-populated data on this page. As you can see, this pre-populated database is ideal for highly repetitive page layouts, such as this one where the same layout information is repeated over and over. Entering the information once in the database frees one from hand-coding the HTML for each entry. Image Gallery, anyone?

(When I copied this file into a text file and renamed the ending .html, and included cordova-2.0.0.js, the page was blank. A bit of searching around found several double-quotes turned into question marks, and a mixture of curly and straight quotes and double-quotes. Once I go those fixed, the script worked fine. I guess it was the change from typing it in my Mac, pasting it in here, then copying/pasting from here into a Windows text editor. What a mess. ) Continue reading

Installing Weinre remote debugger on the Mac OSX Lion


Weinre, which is short for Web Inspector Remote (pronounced “winery,” “wine-ray,” “whiner,” or “weiner,” depending on your native accent or sense of humor), allows us to debug our mobile app code remotely, that is, in a desktop browser window outside the mobile device. Why would we do this? Because checking our HTML/CSS/Javascript during development in a browser doesn’t necessarily mean it’ll run flawlessly in the target mobile device. The environments are different. Also, 9 times out of 10, the device has poorly integrated debugging of its own.

How steep is the learning curve for this tool? Well, if you are habiitually using Google Chromes’s Javascript Console (in Google Chrome, click on the wrench icon > Tools > Javascript Console), then you’ll quickly grasp this tool (which is WebKit’s Web Inspector), since they are the same tools, with the addition of one extra tab in Weinre for Remote.

Currently, Weinre, developed by Patrick Mueller, only works in Webkit-based browsers like Google and Safari, as used in iPhone and Android devices. Here are the steps to download and install the software tool, and get it running on an iPod touch device running an app which uses Cordova PhoneGap. These steps are extremely thorough, designed for newbies to coding. (You’re welcome.)

(Sept. 21, 2012 update: If you use a Mac, you may want to try the iWebInspector, which is more feature-rich and designed to replace Weinre on the Mac.) Continue reading

Android App Process with Cordova-PhoneGap and Eclipse – from Download to Google Play


The following steps parallel this page for PhoneGap 1.8.x for the most part: http://wiki.phonegap.com/w/page/30862722/phonegap-android-eclipse-quickstart 

These steps assume you’ve already downloaded and installed Eclipse Classic, Android SDK, and the ADT Plugin, as mentioned in the above web page (which includes links if you haven’t downloaded them).

Set up the Eclipse workspace

Eclipse is the software development kit (SDK) you’ll use to assemble your project, then prepare it for app submission to Google Play or any other Android app store. The final file used in devices ends in “.apk” and this is the software that creates that file. Continue reading

Installing ChildBrowser with Cordova/PhoneGap 1.7.0 (iOS, Mac OSX Lion)


In order to install the latest Cordova PhoneGap 1.7.0 version on my Mac Mini, I needed to upgrade to OSX Lion, then upgrade to Xcode 4.3.2 (both via the Mac App Store). After their installation, I downloaded PhoneGap 1.7.0 from the button at http://www.phonegap.com. Once it downloaded, I double-clicked on the Cordova-1.7.0.dmg file found in my new Downloads/phonegap-phonegap-475bfd2/lib/ios folder.

This is how I recreated my old PhoneGap 1.0.0 project to implement PhoneGap 1.7.0 and ChildBrowser.

NOTE: The ChildBrowser plugin was upgraded when PhoneGap went to Cordova. These notes will not work with Cordova versions of PhoneGap.  Continue reading

Saving localStorage to a more secure folder location


If you are worried whether your localStorage will persist after an iOS version upgrade or be backed up to iCloud, one coder, Kerri Shotts, has graciously given us a Javascript script that saves the localStorage data to a secure folder within iOS. Her code periodically saves localStorage data at set intervals. (This code has been updated. See bottom of article.) Continue reading

Explanation of PhoneGap using layman’s language


PhoneGap allows you to build your mobile app with the same skills a web designer possesses. The process goes something like this. You’ll first create your app with HTML, CSS, and Javascript using your favorite tools, but designing for the small screen. You’ll test your work in a browser as you normally would. This is the code you’ll use across devices. If you don’t possess website-creation skills, then you’ll need to start with the basics of HTML and CSS before learning to use PhoneGap. If you don’t know any Javascript, the learning curve may get steeper because you may have a hard time debugging your code or adding extra features. Continue reading

Sobering news for developers who use local storage or SQLite


If you use HTML5 Local  Storage or SQLite in your iPhone apps, you’ll want to read the urgent forum thread on the Apple Developer Forums here: https://devforums.apple.com/thread/123107?start=0&tstart=0 (signin required).

Due to Apple NDA rules, I can’t divulge more, only that you may want to find another way to persist information if the current beta becomes final.

See another article on my site that now addresses this problem.

Installing ChildBrowser into Xcode 4 with PhoneGap 1.0 (Mac OS X, Snow Leopard)


You’ll need the ChildBrowser plugin with PhoneGap in order to return to the app after clicking on an external link. A Done button will appear under the web page, allowing you to exit the web page and return to the app. Very convenient. I’ve had to search and experiment for two weeks before I could piece all the correct steps together. If you landed here early, you can do it all within an hour!

UPDATE 6/5/2012: For PhoneGap-Cordova 1.7.0, use these steps to install ChildBrowser:
https://iphonedevlog.wordpress.com/2012/06/05/installing-childbrowser-with-cordovaphonegap-1-7-0/

UPDATE 3/21/2012: For PhoneGap-Cordova 1.5, use these steps to install ChildBrowser: http://blog.digitalbackcountry.com/2012/03/installing-the-childbrowser-plugin-for-ios-with-phonegapcordova-1-5/

UP

Continue reading

Installing PhoneGap 1.0 into Xcode 4 (Mac OS X, Snow Leopard)


PhoneGap allows you to avoid learning Objective-C when making iPhone apps. With PhoneGap, you insert your HTML, CSS, and Javascript in the www/ folder and PhoneGap will make sure it shows up on the screen. (Disclaimer: I know very little Javascript. Much of what are downloaded from the web, then are modified by trial and error to suit my project. I have been a web developer for nearly 20 years.) I am going to assume you don’t know Javascript, and are only barely familiar with Xcode, the software necessary to compile iPhone apps for the App Store.

The Windows PC is my main computer, so I’ll assume you are barely familiar with the Mac interface (maybe you’re moving from the PC to the Mac just for building apps, like me). So I think you’ll find these steps easy to follow. At this time, there are no screen shots (sorry). I assume you already have Xcode 4 installed. I’m not going to go into provisional profiles here; I’m going to assume you will take care of that on your own.

Continue reading