{"id":21853,"date":"2018-06-11T12:15:43","date_gmt":"2018-06-11T09:15:43","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=21853"},"modified":"2018-06-11T12:15:03","modified_gmt":"2018-06-11T09:15:03","slug":"cross-platform-development-part-two","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/web-development\/cross-platform-development-part-two\/","title":{"rendered":"From Zero to App: The Cross-Platform Development Approach Simplified: Part Two"},"content":{"rendered":"

There\u2019s a lot of demand for mobile application developers these days, but learning all the available platforms and toolsets can be a costly, time-consuming challenge<\/a>.<\/p>\n

The most popular solution to this problem is cross-platform application development<\/strong>.<\/p>\n

The goal of cross-platform development is to create software that seamlessly runs on multiple platforms using one set of tools and programming languages. The benefits of this approach include lower costs, rapid prototyping, and skill reuse.<\/p>\n

In part one<\/a>, we implemented a web-based, cross-platform app that allows users to access the device\u2019s camera to take and display photos. In part two, we\u2019ll cover the steps to transform it into a native Android and iOS app<\/a> using PhoneGap Build.<\/p>\n

\"cross<\/a><\/p>\n

What Is PhoneGap Build?<\/h2>\n

Traditional methods of compiling web apps into native ones, such as the Cordova CLI<\/a>, force you to maintain native software development kits (SDKs) for each platform you target. This can be challenging, as it means keeping multiple machines (PC and Mac) up to date with the latest software versions and tooling.<\/p>\n

Adobe\u2019s PhoneGap Build cloud tool simplifies the process of transforming your web assets (HTML, CSS, JavaScript) into native mobile apps. There are no SDKs to maintain; everything is managed in the cloud for you. Additionally, PhoneGap Build provides tools for quick deployment cycles, collaboration, and sharing apps with end users.<\/p>\n

To get started, sign up for a free account here<\/a>. Note that you\u2019ll need to create an Adobe account if you don\u2019t already have one.<\/p>\n

The mobile app we\u2019ll be creating is located here<\/a>. For the rest of this article, all code referenced can be found in the \u201capp \u2013 part two\u201d folder.<\/p>\n

Config.xml: Initial Configuration<\/h2>\n

Before we use PhoneGap Build to create the native versions of our app, we need to create \u201cconfig.xml,\u201d the configuration file that specifies app metadata and the native features that will be used. You can find this file in the root of the \u201capp \u2013 part two\u201d folder.<\/p>\n

Let\u2019s begin with the main app metadata:<\/p>\n

<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\r\n  <widget xmlns   = \"http:\/\/www.w3.org\/ns\/widgets\"\r\n    xmlns:gap   = \"http:\/\/phonegap.com\/ns\/1.0\"\r\n    id          = \"com.simpleprogrammer.crossplatapp\" \r\n    version     = \"1.0.0\">\r\n<\/widget><\/pre>\n
The config.xml file follows the W3C widget specification<\/a>, which provides the standardization of packaged web apps. There are two attributes in the widget declaration to note: id<\/strong> and version<\/strong>.<\/p>\n
The id attribute is the unique identifier for your application. Typically, you\u2019ll see this written in reverse domain name notation; this format combines company domain plus project name. In my example here, \u201ccom.simpleprogrammer\u201d (\u201csimpleprogrammer.com\u201d) is the company domain and \u201ccrossplatapp\u201d is the name of our mobile app created in this article series.<\/p>\n
The version attribute represents the current version number of the application and works exactly the same as with other software projects. Each time you release a new update of the app, you increment the version number here:<\/p>\n
<name>Simple Programmer Cross-platform Camera app<\/name>\r\n\r\n<description>\r\n  This sample app is used in conjunction with the SP cross-platform development article by Matt Netkow.\r\n<\/description>\r\n\r\n<author href=\"http:\/\/www.example.com\" email=\"noreply@example.com\">\r\n  Your Author Name\r\n<\/author>\r\n\r\n<!-- Build preferences for each platform. Too many to list here, see online PhoneGap docs for more. -->\r\n<preference name='phonegap-version' value='cli-8.0.0' \/> <!-- Version of PhoneGap to use --><\/pre>\n
The next three elements, including name, description, and author, are PhoneGap Build-specific. They are not used or seen in your app at all, but rather displayed within the PhoneGap Build site on the particular app page. If you share your app with other developers or companies, the description and author information can be useful.<\/p>\n
The last element, a preference tag named \u201cphonegap-version,\u201d designates the PhoneGap version to use when building the app.<\/p>\n
<!-- https:\/\/www.npmjs.com\/package\/cordova-plugin-camera -->\r\n<plugin name=\"cordova-plugin-camera\" source=\"npm\" spec=\"4.0.2\" \/><\/pre>\n
As you\u2019ll recall from part one, we added the camera plugin<\/a> into the app in order to use the mobile device\u2019s camera to take photos. Using a plugin tag here informs PhoneGap Build to install the native portion of the code.<\/p>\n
Config.xml: Adding Icons and Splash Screens<\/h2>\n
In the last section of the config file, we see a couple of \u201c\u201d tags, one for iOS and one for Android. Within these tags, we define various rules and configurations specific to the designated platform.<\/p>\n
While there are many options to choose from<\/a>, we\u2019re going to focus only on icons and splash screens (full screen images displayed during app launch). These are specific to mobile applications, so we won\u2019t see them in use when developing locally in the browser. Image dimensions for icons<\/a> and splash screens<\/a> vary wildly, too.<\/p>\n
<!-- The platforms to build -->\r\n<platform name=\"ios\">\r\n  <!-- Icons for iOS 8.0+, iPhone 6 \/ 6+ -->\r\n  <icon src=\"www\/icons\/ios\/icon-60@3x.png\" width=\"180\" height=\"180\" \/>\r\n  <!-- iOS 7.0+ -->\r\n  <!-- iPhone \/ iPod Touch  -->\r\n  <icon src=\"www\/icons\/ios\/icon-60.png\" width=\"60\" height=\"60\" \/>\r\n  <icon src=\"www\/icons\/ios\/icon-60@2x.png\" width=\"120\" height=\"120\" \/>\r\n  <!-- iPad -->\r\n  <icon src=\"www\/icons\/ios\/icon-76.png\" width=\"76\" height=\"76\" \/>\r\n  <icon src=\"www\/icons\/ios\/icon-76@2x.png\" width=\"152\" height=\"152\" \/>\r\n  <!-- Spotlight Icon -->\r\n  <icon src=\"www\/icons\/ios\/icon-40.png\" width=\"40\" height=\"40\" \/>\r\n  <icon src=\"www\/icons\/ios\/icon-40@2x.png\" width=\"80\" height=\"80\" \/>\r\n  <!-- iOS 6.1 -->\r\n  <!-- iPhone \/ iPod Touch -->\r\n  <icon src=\"www\/icons\/ios\/icon.png\" width=\"57\" height=\"57\" \/>\r\n  <icon src=\"www\/icons\/ios\/icon@2x.png\" width=\"114\" height=\"114\" \/>\r\n  <!-- iPad -->\r\n  <icon src=\"www\/icons\/ios\/icon-72.png\" width=\"72\" height=\"72\" \/>\r\n  <icon src=\"www\/icons\/ios\/icon-72@2x.png\" width=\"144\" height=\"144\" \/>\r\n  <!-- iPhone Spotlight and Settings Icon -->\r\n  <icon src=\"www\/icons\/ios\/icon-small.png\" width=\"29\" height=\"29\" \/>\r\n  <icon src=\"www\/icons\/ios\/icon-small@2x.png\" width=\"58\" height=\"58\" \/>\r\n  <!-- iPad Spotlight and Settings Icon -->\r\n  <icon src=\"www\/icons\/ios\/icon-50.png\" width=\"50\" height=\"50\" \/>\r\n  <icon src=\"www\/icons\/ios\/icon-50@2x.png\" width=\"100\" height=\"100\" \/>\r\n  <!-- iPad Pro -->\r\n  <icon src=\"www\/icons\/ios\/icon-83.5@2x.png\" width=\"167\" height=\"167\" \/>\r\n\r\n  <!-- iPhone and iPod touch -->\r\n  <splash src=\"www\/splash\/ios\/Default~iphone.png\" platform=\"ios\" width=\"320\" height=\"480\" \/>\r\n  <splash src=\"www\/splash\/ios\/Default@2x~iphone.png\" platform=\"ios\" width=\"640\" height=\"960\" \/>\r\n\r\n  <!-- iPhone 5 \/ iPod Touch (5th Generation) -->\r\n  <splash src=\"www\/splash\/ios\/Default-568h@2x~iphone.png\" platform=\"ios\" width=\"640\" height=\"1136\" \/>\r\n\r\n  <!-- iPhone 6 -->\r\n  <splash src=\"www\/splash\/ios\/Default-667h.png\" platform=\"ios\" width=\"750\" height=\"1334\" \/>\r\n  <splash src=\"www\/splash\/ios\/Default-736h.png\" platform=\"ios\" width=\"1242\" height=\"2208\" \/>\r\n  <splash src=\"www\/splash\/ios\/Default-Landscape-736h.png\" platform=\"ios\" width=\"2208\" height=\"1242\" \/>\r\n\r\n  <!-- iPad -->\r\n  <splash src=\"www\/splash\/ios\/Default-Portrait~ipad.png\" platform=\"ios\" width=\"768\" height=\"1024\" \/>\r\n  <splash src=\"www\/splash\/ios\/Default-Landscape~ipad.png\" platform=\"ios\" width=\"1024\" height=\"768\" \/>\r\n\r\n  <!-- Retina iPad -->\r\n  <splash src=\"www\/splash\/ios\/Default-Portrait@2x~ipad.png\" platform=\"ios\" width=\"1536\" height=\"2048\" \/>\r\n  <splash src=\"www\/splash\/ios\/Default-Landscape@2x~ipad.png\" platform=\"ios\" width=\"2048\" height=\"1536\" \/>\r\n<\/platform>\r\n\r\n<!-- Android -->\r\n<platform name=\"android\">\r\n  <!--\r\n    ldpi    : 36x36 px\r\n    mdpi    : 48x48 px\r\n    hdpi    : 72x72 px\r\n    xhdpi   : 96x96 px\r\n    xxhdpi  : 144x144 px\r\n    xxxhdpi : 192x192 px\r\n  -->\r\n  <icon src=\"www\/icons\/android\/ldpi.png\" density=\"ldpi\" \/>\r\n  <icon src=\"www\/icons\/android\/mdpi.png\" density=\"mdpi\" \/>\r\n  <icon src=\"www\/icons\/android\/hdpi.png\" density=\"hdpi\" \/>\r\n  <icon src=\"www\/icons\/android\/xhdpi.png\" density=\"xhdpi\" \/>\r\n  <icon src=\"www\/icons\/android\/xxhdpi.png\" density=\"xxhdpi\" \/>\r\n  <icon src=\"www\/icons\/android\/xxxhdpi.png\" density=\"xxhdpi\" \/>\r\n\r\n  <!-- Android -->\r\n  <splash src=\"www\/splash\/android\/drawable-port-ldpi-screen.png\" platform=\"android\" density=\"ldpi\" \/>\r\n  <splash src=\"www\/splash\/android\/drawable-port-mdpi-screen.png\" platform=\"android\" density=\"mdpi\" \/>\r\n  <splash src=\"www\/splash\/android\/drawable-port-hdpi-screen.png\" platform=\"android\" density=\"hdpi\" \/>\r\n  <splash src=\"www\/splash\/android\/drawable-port-xhdpi-screen.png\" platform=\"android\" density=\"xhdpi\" \/>\r\n  <splash src=\"www\/splash\/android\/drawable-port-xxhdpi-screen.png\" platform=\"android\" density=\"port-xxhdpi\" \/>\r\n  <splash src=\"www\/splash\/android\/drawable-land-xxhdpi-screen.png\" platform=\"android\" density=\"land-xxhdpi\" \/>\r\n<\/platform><\/pre>\n
You can create these images by hand, using tools such as Adobe Photoshop<\/a> or Paint.net<\/a>. This can be tedious, however, so I highly recommend the Ionic framework\u2019s resources tool<\/a>. Simply create one large icon and one large splash screen, then the tool takes care of generating all images for you. Here are the iOS icons, for example:\"cross<\/a><\/p>\n
Device Deployment Prerequisites<\/h2>\n
Interacting with the app on the web couldn\u2019t be easier. Simply open up \u201cindex.html\u201d in a web browser and it\u2019s immediately usable.<\/p>\n
Unfortunately, deploying and testing it as a native app requires a lot more steps and each platform has its own idiosyncrasies. The most challenging is Apple\u2019s iOS platform.<\/p>\n
iOS<\/h3>\n
Apple makes iOS development rather painful for beginners. Regardless of the development approach (cross-platform or native), there are multiple steps required to deploy an app onto a device.<\/p>\n
The silver lining? If you have a Windows PC or a Linux machine, you\u2019re in luck, because 99 percent of iOS app creation can be done without a Mac!<\/strong> The only task that requires a Mac is submission of the app binary to Apple for publication on the App Store.<\/p>\n
Before you are able to deploy an app to your device, you\u2019ll need to enroll in the Apple Developer Program<\/a>. As of 2018, it costs $99 per year. There are ways to test locally without paying<\/a>, but if you\u2019re serious about developing an app, the cost is worth it.<\/p>\n
Additionally, if you have a Mac, update to the latest version of MacOS and Xcode. Regardless of the operating system, download iTunes too; it is required to retrieve the device id of your mobile device.<\/p>\n
Android<\/h3>\n
Android is significantly easier to set up than iOS, a great option for Windows, Linux, and Mac users. Only an Android device is required. You don\u2019t need a Google Play account for local device testing.<\/p>\n
Upload the App to PhoneGap Build<\/h2>\n
With your free PhoneGap Build account already created, sign in and click the \u201c+ New App\u201d button. There are two options to select from: pulling the code from GitHub or uploading a ZIP file. For simplicity\u2019s sake, let\u2019s upload a ZIP file.<\/p>\n
\"cross<\/a><\/p>\n
If you haven\u2019t done so previously, download the code repository from GitHub<\/a>. On the file system, navigate to the \u201csp-cross-platform-app\u201d folder. Zip up the folder using your zip tool of choice.<\/p>\n
Next, click the \u201cUpload a .zip file\u201d button and select \u201csp-cross-platform-app.zip.\u201d After it has uploaded, click the \u201cReady to build\u201d button. Next, click the \u201cSimple Programmer Cross-\u2026\u201d title link.<\/p>\n
\"cross<\/a><\/p>\n
PhoneGap Build will begin creating the app for Android and iOS.<\/p>\n
\"cross<\/a><\/p>\n
The Android version should build successfully, as evidenced by the blue \u201capk\u201d button that becomes visible. The iOS build will fail, because you\u2019ll need to follow the steps below before you\u2019re able to build the app successfully.<\/p>\n
There are two quick, easy ways to install the app. Sign into PhoneGap Build on your mobile device, then either tap the blue \u201capk\u201d button or use a QR code scanning app to scan the QR code.<\/p>\n
Install the Android App<\/h2>\n
By default, the installation will be blocked because the app hasn\u2019t been signed with a developer certificate. Tap the \u201cSettings\u201d button that appears. Next, tap \u201cAllow installation from unknown sources.\u201d Navigate back to the app using the physical back button. Now, instead of seeing a \u201cSettings\u201d button, an \u201cInstall\u201d button should appear. Tap it to install the app.<\/p>\n
That\u2019s all it takes to load the Android version of our app onto a device! To create a developer certificate for uploading onto the Google Play store, follow these instructions<\/a> from the official Android developer site or from my Pluralsight course<\/a>.<\/p>\n
iOS Configuration<\/h2>\n
Unfortunately, getting the iOS version of the app onto a device isn\u2019t as easy as Android. As we see here, we need a p12 certificate file and a provisioning file.<\/p>\n
\"cross<\/a><\/p>\n
It\u2019s not clear from this user interface, but there are multiple steps required to create those files.<\/p>\n
Create an App ID<\/h3>\n
To begin configuring the app to build for iOS, sign into your Apple account at https:\/\/developer.apple.com<\/a>. The first step involves registering an App Id. It represents a globally unique identifier (GUID) for your app. Every app requires a different App Id.<\/p>\n
Navigate to the \u201cCertificates, Identifiers, & Profiles\u201d section, then the \u201cApp IDs\u201d option, then click the plus (+) button. Enter the name of the app, such as \u201cSimple Programmer Camera App.\u201d Next, under the \u201cApp ID Suffix\u201d section, choose \u201cWildcard App ID,\u201d then enter com.simpleprogrammer.*<\/strong> for the Bundle ID field. This option permits you to use a single App Id for multiple apps\u2014perfect for prototypes or how-to articles.<\/p>\n
\"cross<\/a><\/p>\n
Ignore the App Services section and continue clicking through until the app has been registered.<\/p>\n
Register an iOS Device<\/h3>\n
In order to use an iOS device for app development, you must add it to your Apple Developer account. Connect your iOS device to your computer, then open iTunes. Navigate to the device summary screen. Click the Serial Number once to reveal the unique device identifier (UDID) value:<\/p>\n
\"cross<\/a><\/p>\n
Then right-click and copy the UDID value:<\/p>\n
\"cross<\/a><\/p>\n
Back over in the Apple Developer site, on the \u201cCertificates, Identifiers, & Profiles\u201d screen, navigate to \u201cDevices -> All.\u201d Click the plus (+) button to add a new device. For the name field, enter something you\u2019ll remember, such as \u201cMatt\u2019s iPad mini.\u201d For the UDID field, paste in the GUID value we just copied from iTunes. Click the \u201cContinue\u201d button to finish registering the device.<\/p>\n
Certificate Creation: Windows and Linux<\/h3>\n
During the app build process, PhoneGap Build will sign the app with a certificate file, which tells Apple and users that you are a verified developer.<\/p>\n
Fortunately, we can use OpenSSL to generate the p12 certificate on Windows or Linux. By doing so, you\u2019re able to write, debug, and test your app on an iOS device, all using PhoneGap Build and Windows\/Linux only.<\/p>\n
Start by downloading OpenSSL for Windows\/Linux from openssl.org<\/a>. Afterward, open up a command terminal as Admin<\/strong> and navigate to the OpenSSL bin folder. On my Windows system, it can be found in C:\\Program Files\\OpenSSL-Win32\\bin. The first command to run will create a 2,048 bit private key:<\/p>\n
openssl genrsa -out output\/privateKey.key 2048<\/p>\n
The next command will generate a certificate signing request (CSR) using that newly created private key:<\/p>\n
openssl req -new -key output\/privateKey.key -out output\/CertificateSigningRequest.certSigningRequest -subj \u201c\/emailAddress=your.email@email.com, CN=Matt Netkow \u2013 Dev, C=US\u201d<\/p>\n
Use everything as-is in this command, except the last few details: \u201cemail address\u201d should be your own, of course, and \u201cCN\u201d (common name) should be your name along with a designation of whether the certificate is for development or distribution. The \u201cc\u201d portion means country\u2014\u201cUS\u201d for the United States in this example, or another two-character country code.<\/p>\n
Back over on the Apple Developer account, we take the newly generated CSR and convert it to a certificate. On the \u201cCertificates, Identifiers, & Profiles\u201d page, navigate to \u201cCertificates -> All.\u201d Click the plus (+) button to get started. You\u2019ll be prompted to upload the CSR that we just created. After uploading the CSR, download the newly created certificate (a CER file) and copy it to the OpenSSL output folder.<\/p>\n
With the downloaded certificate in place, we now need to convert it into a PEM file:<\/p>\n
openssl x509 -in output\/ios_development.cer -inform DER -out output\/app_pem_file.pem -outform PEM<\/p>\n
For the last step, we convert the PEM file to the p12 certificate file that PhoneGap Build needs:<\/p>\n
openssl pkcs12 -export -inkey output\/privateKey.key -in output\/app_pem_file.pem -out output\/dev_p12.p12<\/p>\n
Before the p12 file is created, you\u2019re prompted to password protect it. With a p12 certificate in hand, skip to the \u201cCreate a Provisioning Profile\u201d section below.<\/p>\n
Certificate Creation: Mac<\/h3>\n
In order to generate a certificate, you must first create a CSR from your Mac computer.<\/p>\n
Generate a CSR<\/strong><\/p>\n
Begin by opening the Keychain Access program. Within the Keychain Access dropdown menu, select \u201cCertificate Assistant -> Request a Certificate from a Certificate Authority.\u201d There are a few details to fill in:<\/p>\n