Developing a hybrid Mobile Application on Bluemix

In this post I will document how to develop an mobile application on the IBM Bluemix Plattform in under 1 hour.

  1. First you have to set up your mobile development environment especially install npm, cordova, ionic, bower and git (on OSX I suggest using hombrew). [code]npm install -g cordova
    npm install -g ionic
    sudo npm install ios-sim -g
    npm install -g bower[/code]
  2. To understand how hyrids apps with Cordova work you should read up on it (Cordova Getting Started Guide for Android / Cordova Getting Started Guide for IOS).
  3. Clone the app with git to your drive:  [code]git clone[/code]
  4. Create a boilerplate application on IBM Bluemix
  5. Configure the Application for use with Bluemix (www/bluelist.json).
    [code]{ “applicationId”: “INSERT_APPLICATION_ID_HERE”, “applicationSecret”: “INSERT_APPLICATION_SECRET_HERE”, “applicationRoute”: “INSERT_APPLICATION_ROUTE_HERE” }[/code]
  6. Modern mobile web applications are now built using dependency managers. The hybrid application sample uses bower for the client side components. This includes the pulling down of the latest levels of the Mobile Cloud SDKs
    1. From the sample app directory, run [code]bower install[/code]
    2. To check the development runtime, make sure all existing copies of chrome have been shutdown.
    3. Load chrome with web security turned off, this enables the mobile testing to avoid any Cross Origin.
      1. On Mac: [code]open -a Google\ Chrome –args –disable-web-security[/code]
      2. On Windows: [code]start chrome.exe –disable-web-security[/code]
    4. From the app directory, run ionic serve
    5. The hybrid component should now be visible in chrome browser. The ionic tools support live reload, so if you edit the code you can see if refresh in the browser.
    6. The sample app can be accessed using this local url: http://localhost:8100/#/tab/list
  7. You need to make sure you have the latest xcode and android development tools installed on your development environment.
    1. From the sample app directory run the following command to build the sample for iOS: [code]ionic build ios[/code]
    2. To run it in the emulator you can run emulate command.
    3. [code]ionc emulate ios[/code]
    4. You should now see the bluelist-cordova app now running inside the IOS Simulator.

If you want to test with Android make sure you add the android platform to the project.
[code]cordova platform add android[/code]
Do not add the Bluemix Cordova plugin to this project. Dependencies will conflict. If you’d like to use the Cordova Bluemix plugins check out the Dev Works articles for mobile data here and push notifications here.