Axiom Extranet
A place for Axiom knowledge to hangout

Creating a Basic Cordova

Jared Robbins Digital July 19, 2018

Creating a basic Cordova-based app

You will need to create an App ID and a Provisioning Profile for the application in order for it to work on the specified devices.

Log in to the Apple Developer Account

https://developer.apple.com/

apodev@apothecom.com / APO55dev

Under Identifiers > App IDs

Click on the plus [+] in the upper right corner to create a new App ID

App ID Description: Something easy to identify the app ID, must be unique

App ID Suffix: Use an explicit app ID; ie. com.apogroup.moca

App Services: We haven’t had a need to use any of the other services, but feel free to enable those you wish to use.

Click Continue and follow the prompts until completion

You’ve now created an App ID (that reverese ID will be used later in cordova)

If you need to add a new device, whether for a client or in-house, under Devices, select All or iPad. Click on the plus [+] in the upper right corner to add a new device. You’ll need to add a description name and the UDID from the device. Note: the account only allows 100 total devices, and you only have the option to delete items once a year; so be aware of what devices are taking up slots.

Now you have an App ID and your devices added, now you can create a provisioning profile. The profile allows the device to be used for testing or short term use purposes.

You’ll want to create an AD-Hoc Distribution Profile for the purposes that we typically use. e.g temporary apps or for kiosk use, etc.

Click the plus button [+] , and create an Ad Hoc Distribution Profile. Select the App ID from the drop down. Select the HHNA Distribution Certificate. Then select the devices that you want the app to work on. You can select all, but there are a lot of extra devices in there. Then give it a profile name, something that correlates to it e.g AdHoc_Ironwood_Moca

Then download it to the Mac mini that has the signing keys installed, if you double-click it. It will appear within the Organizer of xCode.

Now that you’re all set up, now is time to create the Cordova app.

In terminal – navigate to the directory in which you want to store the app

You’ll want to enter the following command

cordova create name_of_folder com.nameofid.app Name_of_project

name_of_folder will be the newly created folder

com.nameofid.app is the reverse domain appID you created earlier in the provisioning profile. This is important they match.

Name_of_project this is what the xCode project file will be called

Next, navigate into the folder you just created

cd name_of_folder

Next, create an iOS project

cordova platform add ios

Navigate to the name_of_folder > platforms > ios > www

Be sure to retain the following files:

  • cordova_plugins.js
  • cordova.js
  • [Folder] cordova-js-src

Add in the remaining HTML, JS, CSS for your project, be sure that your root file is index.html

Now you will want to build your app, you can do this from the command line, but I feel its best to do it from in xCode.

Open the xCode project file name_of_folder > platforms > ios > name_of_project > name_of_project.xcodeproj

Highlight the application Resource in the right hand column

You will then see navigation across the middle column

Under General – you have the option to set some parameters. Most default options are fine, but here are a few that may need to be adjusted

Bundle identifier: the reverse domain string created in the provisioning profile, change this if created incorrecty in the cordova set up

Version: if you want to increment your release versions

Build: increase as you have various builds

Team: the team certificate you’re using

Deployment Target: This can be lowered to allow for older versions of iOS to be used.

Main Interface: the only time, I’ve ever changed this is for iPad Pro items, if that is the case you want to set it to the MainViewController.xib

Device Orientation: check off the orientations you want the app to work, for example if you want it to only display in landscape, make sure Portrait and Upside Down are unchecked

The label of the app will be the project name, if you want to change this, select the Info Tab and next to Bundle Name, change ${PRODUCT_NAME} to the preferred name.

The icons and startup images are located here: name_of_folder > platforms > ios > name_of_project > Images.xcassets

Once all of your settings are in place and files are in the appropriate path, you’re now ready to build the app.

In the xCode project, in the top of the window, makes sure the name of the app has the target set to Generic iOS Device

Go to Product > Clean; after completed Product > Build; after completed

Product > Archive

This will open up the archive [Organizer] window.

Highlight the Archive you just created and from the right-hand menu, click Export

Choose the Save for Ad Hoc Deployment option

Select the HHNA Dev Team to provision the app.

Choose Export one app for all compatible devices

Save [Export] it to disk.

You will now have a compiled .ipa file with the provisioning profile embedded.

You can drag this onto any provisioned iPad through iTunes or use Diawi.

To use Diawi:

Go to diawi.com and follow the directions on-screen. Be sure to password protect the link and I usually set the alerts to get email alerts when it is installed. I also uncheck the options to search for the app.

This will create a bit.ly type link to send to the devices to install.

Here is some additional information on cordova and the CLI

https://cordova.apache.org/docs/en/latest/guide/cli/

To update the Ironwood MoCA app – IW IT prefers to send out a new .ipa file or new instance of apps. I differ on that idea, but for this initial instance, it is sufficient as it will be helpful to differentiate between the origianl app and the updated verison with the RSM view.

To create a new instance application

Follow the same steps outlined previously, bu tbe sure you’re within the Ironwood Developer Account.

    • Create a new App ID, com.ironwoodpharmaceuticals.mocarsm [current updated version App ID]
    • Create a new Distribution Provisioning Profile – be sure to name it uniquely and include the updated App ID
    • Generate the profile, download to the machine and launch the xCode project.
    • Place the updated codebase within name_of_folder > platforms > ios > www
    • Open the same xCode project and change the following settings (assuming the project is setup with the local version (ApotheCom certificate/profile)
      • Bundle Identifier: use newly created bundle identifier
      • Build/ version number – Increment as needed
      • Team: Ironwood Pharmaceuticals, Inc.
      • Clean, Build and Archive
      • Send .ipa file via Dropbox or another secure link to Tim McDaniel
  • Archive
    • Export – Save for Enterprise

 

To update the existing application

  • Place the updated codebase within name_of_folder > platforms > ios > www
  • Open the xCode project
  • Ensure the Bundle Identifier matches the current release ID
  • Version number incrementation is key here, as it is read by the Mobile Device Management [MDM] MobileIron, if current release is 1.0.0, be sure the next release is at least one step higher e.g. 1.0.1
  • Confirm Team Identity
  • Clean, Build and Archive
  • Send .ipa file via Dropbox or another secure link to Tim McDaniel
    • This .ipa file will replace the file on the Ironwood MDM and will apper as an update to the users.

About: Jared Robbins