Mobile Design for the Apple Smart Watch – A Todo App

Apple gave Developers the chance to and guidelines to have their app ready for the Apple Watch. This show how Apple wants their Smart Watch App to look like. In this case Todoist developed almost a complete version of their todo app witch follower the apple guidelines:

[blockquote author=”Apple” link=”” style=”” target=”_blank”]The apps themselves should not be very complicated or feature-heavy. Instead, they should focus on conveying the most, and most relevant information possible given the limited screen real estate, and for a to-do app, it makes sense that those limits would result in a lot of nested lists.[/blockquote]

I think this is a good advice and will consider this for my own smart watch apps either for iOS or Android.

Save git password and authentication in terminal

I was very annoyed with as I had to type in my username and password every time I pushed or pulled something to the repository. But then on stackoverflow I found the solution for mac:

[code]git config –global credential.helper osxkeychain[/code]

this allows you to use the normal OS X keychain to store the git credentials. In the link you find also windows and linux solutions.

Git clone and push to new repostory

For my mobile application I wanted to start from the ibm sample bluemix application ‘bluelist’ but then store my source code in my own repository at github. For this to do I as follows :  

  1. I create a new repo at github. 
  2. I clone the repo from the ibm repo to my local machine. 
  3. git remote rename origin upstream 
  4. git remote add origin
  5. git push -u origin master

To pull in patches from upstream, I simply run git pull upstream master && git push origin master.


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.