Workflow

This page pulls together key articles that are scattered throughout iphonedevlog. They are here to help me navigate to common resources quickly when I make or update my apps.

Please note that I use these links on a regular basis to make my apps; since I don’t code apps every day, I need to refer to these pages with every new app or update to keep on track. As a result, I am constantly updating these pages to keep up with software updates. 

New Setup

Setting Up Your Mac and Windows Development Environment for Cordova Android projects
https://iphonedevlog.wordpress.com/2014/10/30/setting-up-your-developmemt-environment-for-cordovaphonegap-android-projects/

New App

News: Cordova, iPhone 6, and iOS 8

Shazron of Adobe System’s Inc. gives us the latest news about Cordova and Apple’s release of iOS 8. Here’s what we need to change to get our apps ready for iOS 8:

http://shazronatadobe.wordpress.com/2014/09/18/cordova-ios-and-ios-8/

More news:
http://sdtimes.com/guest-view-hybrid-app-developers-love-new-ios-8/
http://www.sitepoint.com/getting-app-ready-ios-8/

Nov. 25, 2014 Need to upgrade iOS apps with Cordova older than 3.4.1 before Feb. 2015: http://cordova.apache.org/announcements/2014/11/25/ios-64bit.html

Using Cordova CLI on Mac OS X to build iOS apps – updated 3/2018

This article gets you up to speed on how to integrate your HTML/CSS/JS app with 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:

Download Node.js
Add PATH statements to .profile

In this article, I am referencing Mac OS X Yosemite 10.10.5 and Xcode 6.3.1 on a Mac Mini. Cordova CLI 5.4.1 was installed. I am referencing “cordova” in the command-line interface, not “phonegap.” This project will not use the PhoneGap Build service. Any updates to these programs may affect the following instructions.

Download Apple’s latest OS  and Xcode if you haven’t already:
http://www.apple.com/osx/apps/app-store.html 

Notes About Using PhoneGap Build

This is not a tutorial, but a list of things a Cordova PhoneGap developer needs to know if he or she wants to start using PhoneGap Build (PGB). PGB will take your www/ assets and create the files needed for iOS, Android, and Windows devices. It doesn’t use native files, such as those ending in .h, .m, .java, etc.; the build may fail if these are included. What follows are the notes I took as I considered whether to use the service. Read this as a FAQ page for preparing an app for PGB. Curious as to whether PhoneGap Build is for you? Read on…

Main site: https://build.phonegap.com/ 

App testing with the PhoneGap Developer App — see your changes instantly without re-building!

With this software, you can develop your app on the desktop, then see the changes instantly on your mobile device. There’s no need to re-sign, re-compile, or reinstall your app to test your code. You’ll have access to the device APIs that aren’t available in web browsers. Let’s give it a spin!

For more info:
http://phonegap.com/blog/2014/04/23/phonegap-developer-app/ 

Using the Desktop Safari Web Inspector to Debug Your Installed iOS App

 

You can install your app on your iOS device and monitor its usage on your desktop monitor, including console feedback. Here’s how.

Using PhoneGap 3.3 CLI on Mac OS X Mavericks to Build iOS Projects

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:

Download Node.js
Add PATH statements to .profile
Install Cordova CLI
Install Homebrew

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.

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/. 

Implementing inAppBrowser into a Cordova PhoneGap Project

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.

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.

Downloading Apache-Cordova PhoneGap 2.6.0rc1 on Mountain Lion 10.8: for Apple App Store

Requirements

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.

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. 

PhoneGap 2.3.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.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 

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.

Replace Your Button’s Raster Icons for Font Icons

When we use raster icons on our buttons, such as a 16 x 16 PNG graphic of an Export icon, the size may be right for a small handheld device. But when the same page is viewed in a larger device that scales up the images, the icon will look less than its best. Of course, we can use larger icons to begin with and let them scale up or down, but there is a better way.

Our best bet is to use font icons. That is, fonts that are not letters, but come in the shape of familiar icons. Fonts resize to any size and still retain their sharpness. Their storage size is lighter than raster icons. If we use a font in place of a small icon, it will remain crisp no matter the resolution or size of the device. Who knows what larger resolutions and pixel densities are coming up in the future?

Here is how to add font icons to a button.

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 

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

Getting the iOS App to a Tester (Xcode 4.3.2, Mac OSX Lion)

What steps do you follow to get your app out to a tester’s physical iOS device? This article assumes you will have the physical device in hand to plug into your development Mac computer. 

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.)

How to link to your eBook in the iBooks bookstore

In my apps, I include a list of my apps that link to their pages. But I couldn’t figure out how to link to my eBook in iBooks. A kind soul said to use this format: http://itunes.apple.com/us/book/isbn9781465813718

Just replace the ISBN number for your own.

Reference: http://www.kindleexpert.com/how-to-link-directly-to-your-ebook-in-the-ibookstore/

Wish you could add an eBook to the iBookstore? Go to Smashwords for all the information. Download their free manual and follow it precisely for best results.