SWAMI Page 6 - End user walkthrough of the web application
Here's a walkthrough of running the application from my laptop. I have nodeJS installed, along with mongoDB. To start with, let's start MongoDB and get ExpressJS running so our REST API calls will work:
The Console log will show you that the Worklight Development Server is running and that the application has been successfully deployed:
Before I forget, let's remember to deploy the Worklight Adapter too, otherwise that bit will not work!
The other method is to access the Worklight Console and to select the 'Preview as Common Resources':
When you select to 'Preview' you will be presented with the main.html page as shown below. If you use Google Chrome, you can use the Developer Console to investigate the Console output as well as take a look at the JSONStore. As you can see below, the JSONStore is "empty", after we synchronise a new Collection will be created.
When you select the 'Start of Day' and press the button to Sync, you can use the Console output to see the data that has been looked up from the MongoDB and passed through the Worklight Adapter and stored on the device in the JSONStore:
As I have not set the JSONStore up to be encrypted, you will now be able to see the creation and the current content:
Following the 'Day in the Life of...' approach, the next step is to view the Inspections that we are To Do.
As you can see this list is retrieved from the JSONStore collection:
If you hover the mouse over the logo, you can see the URL that is generated and can confirm that the values are what are expected:
Upon selecting to start a new Inspection, the progressBar grading score will dynamically change as more questions are answered. As we are using the web browser on a laptop and not a true device, the controls will behave as you would expect from a desktop and not a device.
The AngularJS-UI tab control is used and as the user clicks through each tab and answers the questions the progressBar is updated:
When the user presses the 'Completed Health Inspection' button, the data from the form is saved to the JSONStore. We can verify this by viewing the Console output:
and by viewing the JSONStore Collection itself:
The following the 'Day in the Life Of...', let's go checkout the Completed Inspections list... yep, it contains the one we completed earlier:
..and click on the logo takes us to the View screen:
Checking back to the 'Inspections To Do' screen, we can see our day is not over yet, we have one more restaurant to go inspect....
After deciding that we're going to skip doing that inspection today, we'll invoke the 'End of Day' sync (as we have a wifi connection whilst eating our KFC). We can see that the nodeJS ExpressJS API received the data from the Worklight Adapter and as we have our code setup for DEBUG mode, it outputs the data received to the console log in the nodeJS screen:
We can now check the local JSONStore and see that the completedInspections Collection is empty:
and to prove this we can view the screen:
I use RockMongo as an admin tool for the MongoDB and as you can see the data captured on the device has been successfully saved to the correct Collection.
So....that concludes the journey. We now have an end-to-end sample that demonstrates how to use Worklight v6.2, AngularJS, the JSONStore, ExpressJS and MongoDB.
I have a mountain of v2.0 items that I will document and will no doubt add and extend this app aswell as document on this blog and share this information for all to see and learn from.
I'll provide links to download the sample application, so you can import it and use it yourself. If you see any issues/mistakes/major no-no's or valid enhancements, feel free to drop me an email and let me know. As I say, I'm still learning (everyday), so I don't claim to be the font of knowledge, I'm just along for the ride...
thanks
tony
In the eclipse environment, where we have Worklight installed, we shall start the Worklight Developer Server like so:
To now, see the application we have a couple of options. One is to right-click the common folder, select 'Run As...' and select 'Preview':
Before I forget, let's remember to deploy the Worklight Adapter too, otherwise that bit will not work!
When you select to 'Preview' you will be presented with the main.html page as shown below. If you use Google Chrome, you can use the Developer Console to investigate the Console output as well as take a look at the JSONStore. As you can see below, the JSONStore is "empty", after we synchronise a new Collection will be created.
When you select the 'Start of Day' and press the button to Sync, you can use the Console output to see the data that has been looked up from the MongoDB and passed through the Worklight Adapter and stored on the device in the JSONStore:
Following the 'Day in the Life of...' approach, the next step is to view the Inspections that we are To Do.
As you can see this list is retrieved from the JSONStore collection:
Upon selecting to start a new Inspection, the progressBar grading score will dynamically change as more questions are answered. As we are using the web browser on a laptop and not a true device, the controls will behave as you would expect from a desktop and not a device.
The AngularJS-UI tab control is used and as the user clicks through each tab and answers the questions the progressBar is updated:
When the user presses the 'Completed Health Inspection' button, the data from the form is saved to the JSONStore. We can verify this by viewing the Console output:
The following the 'Day in the Life Of...', let's go checkout the Completed Inspections list... yep, it contains the one we completed earlier:
Checking back to the 'Inspections To Do' screen, we can see our day is not over yet, we have one more restaurant to go inspect....
After deciding that we're going to skip doing that inspection today, we'll invoke the 'End of Day' sync (as we have a wifi connection whilst eating our KFC). We can see that the nodeJS ExpressJS API received the data from the Worklight Adapter and as we have our code setup for DEBUG mode, it outputs the data received to the console log in the nodeJS screen:
We can now check the local JSONStore and see that the completedInspections Collection is empty:
and to prove this we can view the screen:
I use RockMongo as an admin tool for the MongoDB and as you can see the data captured on the device has been successfully saved to the correct Collection.
So....that concludes the journey. We now have an end-to-end sample that demonstrates how to use Worklight v6.2, AngularJS, the JSONStore, ExpressJS and MongoDB.
I have a mountain of v2.0 items that I will document and will no doubt add and extend this app aswell as document on this blog and share this information for all to see and learn from.
I'll provide links to download the sample application, so you can import it and use it yourself. If you see any issues/mistakes/major no-no's or valid enhancements, feel free to drop me an email and let me know. As I say, I'm still learning (everyday), so I don't claim to be the font of knowledge, I'm just along for the ride...
thanks
tony
Comments
Post a Comment