Setup iOS Development Environment
THIS DOCUMENTATION IS OUTDATED AND IS CURRENTLY BEING UPDATED.
Requirements
- Apple OSX development environment.
- Download XCode 4.6.
- Download PhoneGap 2.50.
- Download & run uMobile 1.1RC1 quickstart.
- Download & install node.
- Node is used to automate the build process for our JavaScript, HTML and CSS assets.
- Node is installed locally and is leveraged for convenience.
- Node v0.8.12 is recommended for this documentation.
Getting Started with iOS
The PhoneGap website has an excellent iOS start up guide. It is recommended but not mandatory that you walk through their startup guide before continuing to familiarize yourself with the overall process.
Creating the Project
Extract PhoneGap
- Navigate to the folder where you downloaded PhoneGap 2.50. Find the phonegap-2.5.0.zip file and extract its contents.
- Expand this folder and navigate to phonegap-2.5.0 > lib > ios directory.
- The ios directory is where we will be working to create a new project.
Open Terminal
- Open a new Terminal window.
- In the Terminal window, navigate to the ios > bin directory from the extracted PhoneGap code base.
Create a Project from the Terminal
There are 3 ordered, required parameters for creating a project from the command line. For more detailed information on these parameters visit the PhoneGap iOS start up guide.
- Project Location: This is the directory where the Xcode project and files for the application will be located.
- Package Name: This is the reverse domain name App ID that is created via the Apple Provisioning Portal. Note: The package name is specific to your institution.
- Project Name: This is the name of the actual project.
To create a project
In the Terminal window with ios > bin as your current directory, enter the 3 required parameters with the create command.
./create ~/Documents/umobile-phonegap-ios org.jasig.umobile.phonegap.ios uMobile
- A complete and ready to launch project will be created under the directory specified.
- Navigate to the www directory. Open the directory and delete all of the folder contents. Do not delete the www directory itself. The www directory is the folder that houses our custom HTML, CSS and JavaScript implementation. In this step, we are simply removing stubbed files provided by the PhoneGap code base.
Adding the uMobile Source
- In a Terminal window, navigate to your project location. For this tutorial, our project is housed under the Documents > umobile-phonegap-ios directory.
From this directory, checkout the uMobile source code.
git clone git@github.com:Jasig/umobile-app-phonegap umobile-ui
- Your project directory should look similar to the below graphic:
Configure the uMobile Source
Install Dependencies
- In a Terminal window, navigate to your project location. For this tutorial, our project is housed under the Documents > umobile-phonegap-ios directory.
- In the same Terminal window, navigate to the umobile-ui directory.
Execute the following command to load all the ui dependencies. Note: Node must be installed.
sudo npm install
Configure Authentication
- uMobile currently supports three different authentication strategies: CAS, Local & Mock.
- Each strategy has a cooresponding configuration file under the umobile-ui/config/js directory (i.e., cas.js, local.js and mock.js).
- Choose one of the three authentication strategies. For this documentation, we will use local.js.
- Open local.js.
- Set config.uMobileServerUrl to http://localhost:8080.
- Set config.loginFn to localLogin.
- Set config.uMobileServerUrl to http://localhost:8080.
Configure Build Process
Run the build process for the uMobile source code. The build process configures the uMobile source code with the necessary dependencies needed to run in a given environment. Currently, the uMobile project supports Android, iOS and Web platforms. Once the build completes a www directory will be added to the umobile-ui directory. The www directory houses the production ready code base to be used with the PhoneGap wrapper. Please see the documentation on the uMobile HTML5 build for more information on configuring the build script.
grunt prod --environment=ios --auth=local
- ...
Creating the Project
- Navigate to umobile-ui/config/js.
- uMobile currently supports three different authentication strategies: CAS, Local & Mock.
- Each strategy has a cooresponding configuration file under the umobile-ui/config/js directory (i.e., cas.js, local.js and mock.js).
- Choose one of the three authentication strategies. For this documentation, we will use cas.js.
- Open cas.js.
- Set config.uMobileServerUrl to http://localhost:8080.
- Set config.loginFn to casLogin.
- Note: There are bugs with the current login functionality. Only view the portal using the guest layout. This is being addressed.
- Set config.uMobileServerUrl to http://localhost:8080.
Run the build process for the uMobile source code. The build process configures the uMobile source code with the necessary dependencies needed to run in a given environment. Currently, the uMobile project supports Android, iOS and Web platforms. Once the build completes a www directory will be added to the umobile-ui directory. The www directory houses the production ready code base to be used with the PhoneGap wrapper. Please see the documentation on the uMobile HTML5 build for more information on configuring the build script.
- Drag the production-ready www directory from your finder window to the XCode uMobile project. When done for the first time, XCode will ask you to create a workspace before including the www directory. For the purpose of this project, we created a umobile workspace.
- Choose options for adding the www directory to the project.
- Configure cordova.plist.
- In XCode, under the Project Navigator, navigate to uMobile > Supporting Files > Cordova.plist.
- Under the Root Key:
- Set OpenAllWhitelistURLsInWebView to Yes.
- Under the ExternalHosts Key:
- Add the hostname, any authentication servers and any other servers hosting uMobile resources.
- If you're working with the uMobile quickstart, you can just add localhost.
- Under the Plugin Key:
- Plugin: SesssionTracking
- Type: String
- Value: SessionTracking
- Add SessionTracking Plugin files into the Plugins folder:
- Download MainViewController.m
- Navigate to uMobile > Classes > MainViewController.m.
- Replace MainViewController with the downloaded version.
- Set the scheme at the top of the project to iPhone 6.1 Simulator and run the project!
Debugging
uMobile logs helpful events and errors. You can access the log by viewing the console output.