Meli AngularJS Hybrid App - Alerts Module Implementation

Project Overview

Meli command center is a hybrid mobile app for the iPad, iOS 7 that leverages Cordova (PhoneGap) and the Salesforce Mobile SDK.  It will be retrieving most of the data via REST APIs, connecting mostly to a Salesforce Org.  There are some 3rd-party APIs that will be used to pull extra data into the app.

Competition Task Overview

For the coming days, we will launch a series of code challenges for building out prototype to a functioning application. For this challenge, competitors need to integrate the provided iPad prototype with the Alerts REST API and get related pages working end to end. 

Below are the User Interface areas to work on:

• Alert Box List (This is the initial list of 6 alerts on the dashboard that sits on the right-hand side of the app).  templates/alerts-box.html

  • Alert Name should pull from alert.title.  On touch, this should popup the Alert Detail Modal (see below)

  • “1 Minutes ago” - should map back to field (we will update the service to include this field)

  • Icon should be determined on whether alert.assetId or alert.spaceId is set.  assetId = asset, spaceId = space

  • Coloring should be determined by alert.type. “Critical” = red, “Major” or “Energy” = yellow, “Minor” = Green, “Trivial” or “Informational” = default = grey

  • Ignore unread count for now

  • This box should scroll and include all of the alerts that have not been dispositioned (acted upon), up to 20. If you scrolls to the bottom, should load the next 20.

• Alert Detail Modal (from the alert box list, touch an alert to bring up alert detail modal). templates/alert-detail-modal.html

  • All the fields described in Alert Box List should be included here as well (alert.title, timeElapsed, type determines coloring)

  • Include alert.description, alert.status (don't include alert.value or alert.valueType)

  • There should be a link to the related Asset or Space above “Alert Type”. Should hyperlink to /assets/:assetId if alert.assetId is set, or /spaces/:spaceId if alert.spaceId is set.  Text should be “See Asset” if assetId is set, or “See Space” if spaceId is set.

  • Remove “Attachment”

  • Acknowledge: If alert.status != ‘Acknowledge’, acknowledge button should show “Acknowledge”.  If alert.status == ‘Acknowledge’, the button should update to “Acknowledged”.  This should already be handled in the current prototype UI.  When a user taps “Acknowledge”, it should call the update alert status service defined above, and update the button text to reflect the new value.

  • Ignore: If alert.status != ‘Ignore’, ignore button should show “Ignore”.  If alert.status == ‘Ignore’, the button should update to “Ignored”. This should already be handled in the current prototype UI.  When a user taps “Ignore”, and confirms the “Are you sure?” box, it should call the update alert status service defined above, and update the button text to reflect the new value.

• Alert List (from alerts notification in header, or “All 6” from top of alert box list, tap to show all alerts list). templates/alerts.html

  • Display alert.name in bold, first line of displayed name

  • Display alert.title below alert.name, normal weight

  • Display Icon similar to Alert List Box: if alert.assetId is set, use asset icon; if alert.spaceId is set, use space icon

  • Alert Name should hyperlink to /assets/:assetId if alert.assetId is set, or /spaces/:spaceId if alert.spaceId is set

  • Ignore comments/chatter feed for now

User Interfaces should make use of these factory methods below.  Please update UIs to call methods properly and use data returned.  Current prototype data may not be consistent with data structure returned from service calls so you may need to update the related templates and controllers to get the previous prototype to work correctly.

• Create SFDC_API_URI constant in app.js pointed to our SFDC endpoint (available in forums)

• Add  support to manage list of alerts "alertsList" (build onto what already exists, services.js -> ObservationService).   

• Types of alert queries should run off stored alertsList, not calls to the server. If alerts list is empty, requery all alerts (lazily load, use “ObservationService -> findByFilters(‘Alert’)”). Factory should provide ability to:

  • return all - standard set of all alerts. Note: the service should be returning these in descending datetime order (newest first) and all the queries should keep that sorting.

  • return all for a space Id - loop through alertList to find all where the alert.spaceId matches the space Id

  • return all for an asset Id - loop through alertList to find all where the alert.assetId matches the asset Id

  • return next 20 (pagination) - should work for “return all”.  allow ability to send batch number.  create variable for batch size - default to 20.  when batch number is sent, return starting with batchNumberx20.

  • method to update alert status by Id - should call the ObservationService -> partialUpdate

    • id = alertId

    • observation =

      • “{ “status” : “Acknowledge” }” or

      • “{ “status” : “Ignore” }”

Please ask questions in the challenge forum if you feel anything confusing

Materials Provided

1. iPad Prototype with Angular JS services/controller

2.  Login Account for salesforce org will be provided as per request in the challenge forum

Technologies

1. Apex

2. Salesforce

3. REST

4. PhoneGap

Final Submission Guidelines

Getting Started

• Download the included zip of iPad prototype app from challenge forum
• Request login account in the challenge forum
• Build/run datacenter.xcodeproj in xcode and use the assigned account to login.

Submission Deliverables

• Upload all your source code as a zip (you can simply zip up your source codes) and provide any documentation and/or instructions that are needed.
• A Final Documentation that covers Deploy/Install, Configuration for the solution. Please be clear and concise with any setup instructions.