MobileFirst Platform Foundation 7.0 Developer Labs


Electricity Consumption Checker

During this lab you will create reusable assets for the Energy & Utility industry. You will use the Ionic Framework, MobileFirst Platform and JetBrains WebStorm as the main IDE with the MobileFirst Platform Foundation Command Line Interface.

You will learn how to do easy application translation to other languages, work with some native features such as the device Camera, use Google Maps components inside the application and more. From a server side perspective – you will be using Bluemix mobile services and Cloudant to perform user authorization and store task lists in the cloud.

Electricity Consumption Checker app UI
Description: Using the NinjaMock service, create screen mockups for the application.
Time to complete: 17 minutes
Description: Using the Ionic framework, create a simple project and migrate it to MobileFirst Platform. Open it using Visual Studio Code together with live-reload server from Ionic framework.
Time to complete: 18 minutes
Lab files: download
Description: Add the Android environment and configure server connectivity. Preview the application in Mobile Browser Simulator and install it on Android Emulator.
Time to complete: 21 minutes
Description: Prepare tabs, controllers and page structure required for the development of the application.
Time to complete: 27 minutes
Description: Modify the login screen and add translation capabilities by using angular-translate.
Time to complete: 38 minutes
Lab files: download
Description: Add an intro tutorial when launching app in Demo mode and prepare required structure for the first two tabs. Time to complete: 45 minutes
Description: Integrate with Google Maps
Time to complete: 45 minutes
Description: Modify "task details" and "finish task" page templates according to ECC application requirements.
Time to complete: 70 minutes
Lab files: download
Description: Using ngCordova camera plug-in, add capability to take and pick a photo on finish page and display the result.
Time to complete: 27 minutes
Description: Prepare service to provide demotasks, call service from alltasks controller and display them in the list together with markers on the map, that will show their location.
Time to complete: 35 minutes
Lab files: download
Description: Add logic for taking tasks from list of available tasks and count & display the currently active ones with badges.
Time to complete: 30 minutes
Description: Using a service, transfer data between controllers and use it in the "details" and "finish" pages.
Time to complete: 80 minutes
Lab files: download