IOS Development using Monaca¶

• Table of contents
• IOS Development using Monaca
• iOS Development Set-Up
  • Monaca IDE
• Building Standalone App with PhoneGap Build
  • What is PhoneGap Build?
  • iOS Development Certificate using Windows
    • Convert an Apple developer certificate to a P12 file
    • Register devices
    • Create Apple Development Provisioning Profile
    • Submit to Build
  • Adding certificates
  • Running a Build
• Accessing and Storing Accelerator
  • Accessing Accelerator Data
    • Pseudo Code to read Accelerometor

Applications can be built on the Cordova framework. Cordova is a mobile application development framework. It extends the features of HTML and JavaScript to work with the device. The resulting applications are hybrid, meaning that they are neither truly native mobile application (because all layout rendering is done via Web views instead of the platform's native UI framework) nor purely Web-based (because they are not just Web apps, but are packaged as apps for distribution and have access to native device APIs).

iOS Development Set-Up¶

In order for a cross platform iOS app to be created it needs to have and environment which supports HTML, JavaScript development which ideally has a visualizer ( Monaca IDE ). In order to seamlessly connect to SVN from Monaca you need to download Visual Studio Community . When building on a Windows Operating systems a service is required to build the files to a stand-alone application ( *PhoneGap Build * ). In order to test the development with the web server you need to create a local instance of the web server (see other wiki). Follow these steps to set up local development

Monaca IDE¶

Monaca is an online IDE which allows hybrid mobile app development process with PhoneGap/Cordova.
In order to seamlessly port the working code to SVN you need to use the free extension from Monaca for Visual Studio 2015 Community. Follow these steps to set up development.

1. Download SVN to your local computer (see main wifi for instructions)
2. Create a free Monaca Account here: https://monaca.io/
3. Download Visual Studio 2015 Community for free here: https://www.dreamspark.com/. It was not tested on previous versions of visual studio but it may work. You will need to create a Microsoft Account.
4. Download the Monaca plugin for Visual Studio here: https://monaca.io/visualstudio.html
5. Download the SVN Plugin for SVN on Visual Studio here: https://www.visualsvn.com/visualsvn/
6. Zip the iOS Development folder located here: source:“working\Software\iOS\Monaca\iOSDevelopment\iOSDevelopment”
7. Start a New Project on Monaca

   

1. Select Develop with Monaca.io.

   

1. Select Import Project.

   

1. Name the new project "iOSDevelopment". Upload the folder you zipped
2. Change the name of source:“working\Software\iOS\Monaca\iOSDevelopment” to anything (you will be replacing it).
3. Create a new Project in Visual Studio by clicking on the Monaca Ribbon> Create or Import Project. Name project “iOSDevelopment”. Save it here: source:working\Software\iOS\Monaca. Log in to your Monaca and selection iOSDevelopment project.
4. Check the files system to ensure that the config.xml files does not have any changes (it would have a red exclamation point) If so revert the changes. All the folder in this project is not added to the ignore list for the commit for SVN so only the file in www folder and config.xml will have the svn gree checkmarks.
5. Save the Visual Studio Project again to updated the changes to the config.
6. Check in Monaca that your changes have been made to look like your local copy.
7. Delete the renamed iOS development folder.

Building Standalone App with PhoneGap Build¶

What is PhoneGap Build?¶

PhoneGap Build allows for cross platform builds. They will do the work in the cloud and will be built with the most up-to-date SDK for target platform. With out additional certificates Android and Windows Apps can be created.

• Log on PhoneGap Build using the free trial of build (allows for one private app)

iOS Development Certificate using Windows¶

In order to development in iOS a development certificate is required which costs $99 per year for one developer for one test device. The account which was used was Junichi's (email account: kanaij@rpi.edu and pswd: recieve upon request)

• First you need to download the Win64 OpenSSL v1.0.2d Light here - http://slproweb.com/products/Win32OpenSSL.html
• In order to create a iOS development certificate without an mac you need to create a .csr file.
• Within the bin folder of OpenSSL run the following cmd prompt. You will be prompted to input a password. Keep it in the range of 4-1023 characters and remember this password you will be using it to sign other certificates. OpenSSL command line app does not display any characters when you are entering your password. Just type it then press enter and you will see that it is working.
  openssl genrsa -des3 -out ios.key 2048

• Then run the following replacing email, company name and country code
  openssl req -new -key ios.key -out ios.csr -subj "/emailAddress=MY-EMAIL-ADDRESS, CN=COMPANY-NAME, C=COUNTRY-CODE"
  I chose"/emailAddress=kanaij@rpi.edu, CN=AGS, C=USA"
• Log on to https://developer.apple.com/membercenter/
• Click on Certificates Identifiers & Profiles and then the + to request a cert, selecting iOS development option.
• Use the .csr file which was just created to continue creating the certificate.
• Download the .cer file and place in the bin folder of OpenSSL

Convert an Apple developer certificate to a P12 file¶

• To develop apps via PhoneGap Build, you must use a P12 certificate file. You generate this certificate based on the .cer Apple iPhone developer certificate file you receive from Apple.
• It is possible to create several certificates
• Convert the developer certificate file you receive from Apple into a PEM certificate file. To do this, run the following command-line statement from the OpenSSL bin directory:
  openssl x509 -in ios.cer -inform DER -out ios.pem -outform PEM
• You can now generate a valid P12 file, based on the key and the PEM version of the iPhone developer certificate:
  openssl pkcs12 -export -inkey ios.key -in ios.pem -out ios.p12
• It will prompt you for your ios.key password, enter what you entered to create the key file
• It will prompt you to create an Export Password which is a pass phrase source to encrypt any outputted private keys.

Register devices¶

• Visit Apple Developer Portal.
• Go to Device section. Under Manage tab, provide Device Name and Device ID (40 hex characters)
  You will need to get your UDID by plugging your phone into itunes
  In the right pane, locate the information about your iPhone, including its name, capacity, software version, serial number, and phone number.
  Reveal the Identifier by clicking on Serial Number.
  Copy the Identifier to your clipboard by choosing Edit → Copy

Create Apple Development Provisioning Profile¶

• Visit Apple Developer Portal.
• Go to Provisioning section. Create new profile under Development tab.
• Fill the form with Profile Name, Certificates (as per .cer above), App ID and your development device.

the details here should match YOUR team's info

Name: <username>
App ID Prefix: <Team ID>
Explicit App ID; Bundle ID : com.<appname>.<team>

Submit to Build¶

• Go to your Account > Edit Setting > Signing Keys' tab

Adding certificates¶

• Upload the Development Provision cert and .p12 file with the same password you were using.

Running a Build¶

1. Login to PhoneGap Build (with free Adobe account)
2. Add iOS certificates (see iOS development wiki for details)
3. Downloaded the Project from Monaca File>Export Project
4. Unzipped the folder
5. Deleted .monaca , platforms folder and in www folder delete components folder
6. moved config.xml to www folder
7. added <script src="cordova.js"></script> to every html file
8. deleted from every html file these two lines

        <script src="components/loader.js"></script>
       <link rel="stylesheet" href="components/loader.css">

9. added all plugin the app required to config.xml. You need to check if the version is correct when you are pulling from either “pgb” (PhoneGap Build) or “npm”.

<plugin name="org.apache.cordova.vibration" spec="0.3.0" source="pgb" />

10. zipped it up the file
11. uploaded to PhoneGap Build
12. use the QR code scanner to download to iPhone

Accessing and Storing Accelerator¶

Accessing Accelerator Data¶

The PhoneGap API accesses the accelerometor data on the phone. The object navigator.accelerometer is how the data is captured. The function accelerometer.getCurrentAcceleration get the current acceleration. iOS doesn't recognize the concept of getting the current acceleration at any given point. You must watch the acceleration and capture the data at given time intervals. The getCurrentAcceleration function yields the last value reported from a watchAccelerometer call.

Pseudo Code to read Accelerometor¶

if the accelerometer watch is off
  update the accelerometer to 0,0,0
  clear the watch
else
  set the frequency to the values of ms
  update the acceleration data
     alert if failed