Sample Worklight Application Mobile Inspection (SWAMI)
As mentioned previously I wanted to learn about a majority of the features contained within IBM Worklight v6.2, so I set about making a sample application.
As defined in the original architecture diagram:
I set about creating the 'Worklight Mobile App' and the 'Worklight Server Adapter' that would communicate to the ExpressJS REST API that would interact with the MongoDB.
For this sample, I set everything up on a single laptop, although there is no reason why it could not be split out and distributed across machines. As I want this to be a complete sample, I will step through setting up the environment through to testing the app in an Android simulator/emulator.
Setup Steps:
install Eclipse Kepler SR2 (v4.3.2)
install Worklight v6.2 (Developer Edition) from the Eclipse marketplace (it's free)
install Android ADK from the Eclipse marketplace
If you need help, then pop over to the Worklight download page and follow the instructions, in fact all you really need to do is FOLLOW THESE STEPS and you'll be done in 10 minutes (if you have a fast internet connection).
Press the BUTTON on Step 10, if you want access to lots of sample/information etc.. about WL v6.2.
I suspect you'll frequent that page quite a lot when you get more familiar.
Right, now you have Eclipse & Worklight setup, you will need to setup a device SDK. Because I don't own any Apple product (shame on me! LOL), I pick the Android stuff as default. So follow these instructions on setting up Android SDK and Eclipse, after this you'll have Android available on your machine. Oh, BTW - I'm using a Windows 7 laptop for these instructions (I have done the same in Linux Mint, but that laptop is at home in my garage hooked up to my car... long story & an explanation for a different and much later post).
Once you have at least one device SDK setup, you're ready to go. I'll provide the sample project files for you to import into eclipse. Once you've imported it, I'll now step through what it all does and how it works.
So, what are we trying to achieve here? (After all these years Dion, I still start certain sentences with "So" and it is totally your fault for that time we spent working on that project in Birmingham.... you know the one), I digress (again), ah yes, what are we trying to achieve? We want a mobile app that shows how to use AngularJS with Worklight, uses the Worklight Adapters to communicate with external systems to then save that data offline in a local (secure) database (JSONStore) that means the user does not need an internet connection to perform their tasks during the day. This is actually quite a realistic scenario for this type of field worker.
In essence we need to follow the 'Day in the life of' story:
Where the 'Start of Day' involves a synchronisation of the days work ("to do's"), these are saved locally and the user can then leave the house and go about performing their duties. For our sample, that involves performing Health Check Inspections of Fast Food restaurants.
The main project layout is as follows:
These files are the main files used by Worklight. I've added two more, InspectionHI.js and Restaurants.js, these files contain the functions for interacting with the JSONStore.
The controllers folder contains the AngularJS controller files that are referenced by the app.js file (this file handles the routing AngularJS style).
The views folder contains the .html files that are rendered to the end user.
We will create a simple main screen (main.html) that will have four links to the activities described above. For version 2, I will replace the coloured links with nice flashy icons as they look much better and are easier for the end user to prod with their fingers. Yes, most field workers who use mobile devices uses their index fingers to navigate, very rarely do they use the little pointy stylus (mostly because they've lost them - that's why if you notice the post office/delivery people have the stylus you attempt to scrawl your signature with, on a twisty twirly cord). But for now, we'll just have some simple links.
Click here for making a start on Page 1 of walking through the sample.
As defined in the original architecture diagram:
For this sample, I set everything up on a single laptop, although there is no reason why it could not be split out and distributed across machines. As I want this to be a complete sample, I will step through setting up the environment through to testing the app in an Android simulator/emulator.
Setup Steps:
install Eclipse Kepler SR2 (v4.3.2)
install Worklight v6.2 (Developer Edition) from the Eclipse marketplace (it's free)
install Android ADK from the Eclipse marketplace
If you need help, then pop over to the Worklight download page and follow the instructions, in fact all you really need to do is FOLLOW THESE STEPS and you'll be done in 10 minutes (if you have a fast internet connection).
Press the BUTTON on Step 10, if you want access to lots of sample/information etc.. about WL v6.2.
I suspect you'll frequent that page quite a lot when you get more familiar.
Right, now you have Eclipse & Worklight setup, you will need to setup a device SDK. Because I don't own any Apple product (shame on me! LOL), I pick the Android stuff as default. So follow these instructions on setting up Android SDK and Eclipse, after this you'll have Android available on your machine. Oh, BTW - I'm using a Windows 7 laptop for these instructions (I have done the same in Linux Mint, but that laptop is at home in my garage hooked up to my car... long story & an explanation for a different and much later post).
Once you have at least one device SDK setup, you're ready to go. I'll provide the sample project files for you to import into eclipse. Once you've imported it, I'll now step through what it all does and how it works.
So, what are we trying to achieve here? (After all these years Dion, I still start certain sentences with "So" and it is totally your fault for that time we spent working on that project in Birmingham.... you know the one), I digress (again), ah yes, what are we trying to achieve? We want a mobile app that shows how to use AngularJS with Worklight, uses the Worklight Adapters to communicate with external systems to then save that data offline in a local (secure) database (JSONStore) that means the user does not need an internet connection to perform their tasks during the day. This is actually quite a realistic scenario for this type of field worker.
In essence we need to follow the 'Day in the life of' story:
- Start of Day
- Do assigned work
- View completed work (if needed)
- End of Day
Where the 'Start of Day' involves a synchronisation of the days work ("to do's"), these are saved locally and the user can then leave the house and go about performing their duties. For our sample, that involves performing Health Check Inspections of Fast Food restaurants.
The main project layout is as follows:
These files are the main files used by Worklight. I've added two more, InspectionHI.js and Restaurants.js, these files contain the functions for interacting with the JSONStore.
The controllers folder contains the AngularJS controller files that are referenced by the app.js file (this file handles the routing AngularJS style).
The views folder contains the .html files that are rendered to the end user.
We will create a simple main screen (main.html) that will have four links to the activities described above. For version 2, I will replace the coloured links with nice flashy icons as they look much better and are easier for the end user to prod with their fingers. Yes, most field workers who use mobile devices uses their index fingers to navigate, very rarely do they use the little pointy stylus (mostly because they've lost them - that's why if you notice the post office/delivery people have the stylus you attempt to scrawl your signature with, on a twisty twirly cord). But for now, we'll just have some simple links.
Click here for making a start on Page 1 of walking through the sample.
Comments
Post a Comment