Challenge Overview
Challenge Objectives
-
Cordova app development (Hybrid, iOS/Android)
-
14 screens + their interactions
-
Create the prototype for the Secure Connect Mobile App
Project Background
-
The purpose of this app is to give a user ability to connect to one or more intruder alarm panels and able to controlling and monitoring their installed intruder alarm (the logs report and output from the alarm panels)
-
The app needs to be responsive and easily used by novice users.
Workflow
Follow the interactivity app below
-
Portrait version: Figma app
Screens/Features
- Please make sure your design includes the following screens and their interactions:
1) Login
- Please preset several accounts in the mock data, so we can mimic the sign in success and failure.
- Please preset a quick access code in the mock data, so we can mimic the quick access correct/incorrect case.
- For the fingerprint screen, let’s mimic the workflow in this way
- Touch the icon to continue
- The first touch shows 01.Login - 04A Error Login using FingerPrint
- The second touch shows 01.Login - 04B Correct Login using FingerPrint
2) Login Options set up (First Time User)
- Allow users to set up their login options to simplify the login experience, there are 3 login options available (login form, fingerprint, or quick code access). This process can be skipped and the user can do it later in settings. It only appears for the first time user that doing their first logged in to the app
- The settings should be memorized in memory to affect the next Login workflow.
3) Pairing
- Features to add a new panel to the app with just a few steps by adding pair code and panel name
4) Settings
- The user will be able to set up their application features from this menu.
5) About
- Show necessary information about the app
6) Feedback
- The user will be able to give feedback about the application
7) My Panels
- Show list of an available existing panel in the application
8) Panel Detail
- Show all available partition in each panel
9) My Timeline
- List of a log file and activity (including notification) happen in each panel
- Leave all the share buttons dummy.
10) My Outputs
- Features that will enable the user to manage the output quantity
11) Register Accounts
- The potential user can create their account to the application via this feature.
- The function is just mocked, no new accounts need to be added in this challenge.
12) Acceptance
- The user needs to accept the terms and condition and privacy policy to be able to use the app
13) Dashboard Status Variation
- Show list of dashboard variation in the application
- To include the error workflows, let’s show the screens as follows
-
14.Dashboard Status Variation - 01 Dashboard Access Denied, then click “Dismiss” button, navigate to
-
14.Dashboard Status Variation - 02 No Internet Connection, then click “Retry” button, navigate to
-
14.Dashboard Status Variation - 03 Offline, after 3 seconds (make the value configurable), navigate to
-
14.Dashboard Status Variation - 04 Back Online, after 1 second (make the value configurable), navigate to
-
14.Dashboard Status Variation - 05 No Video Tab
14) Splash Screen
- A first-time screen that will appear when the user opens the application. It will appear either user have an internet connection or not.
Important notes
(1) Please make sure your app supports:
-
Mobile portrait
(2) Please use mock data for the screens, but read this data from local files. Do not hard-code the data onto the screen.
(3) You don’t need to persist anything in the client side, all the settings are just required to store in memory in this challenge. If we kill the app and reopen it, it’s fine to reset all settings to the default value.
Operating Systems
-
iOS (iPhone)
-
Android (Phone)
Development Assets
Please check the assets in the forum, we provided screenshots and sources in xd format. You can open them via Adobe XD (a free tool).
Technology Stack
The following technology stack will be used as part of this challenge.
- Programming Languages: Typescript
- Frameworks: Cordova + Angular 6 + Angular Material + PX Blue
- Hosting Environment: iOS, Android
Important Guidelines
-
We should implement the app with Cordova + Angular 6, Ionic is not allowed.
-
The design is built on Material Design, we should use Angular Material as component libraries.
-
PX Blue provide some packages available through NPM (https://www.npmjs.com/org/pxblue), you can use these packages freely:
-
Color definitions: https://www.npmjs.com/package/@pxblue/colors
-
Themes for component libraries which apply the colors above: https://www.npmjs.com/package/@pxblue/themes
-
Icons (in multiple formats), to supplement Material Icons (https://material.io/tools/icons/):
-
-
And others, which may or may not be applicable to this project, but can be browsed on NPM or GitHub (https://github.com/pxblue)
-
Each of these libraries includes a ReadMe with instructions for incorporation into your application.
-
PX Blue provides sample code examples for various patterns on the stackblitz page: https://stackblitz.com/@px-blue, these are a good reference for you.
Future Integration Points
The following integrations are not in scope -- but are being provided as an FYI of future work to come.
- We'll integrate REST API to interface with the backend (to be developed)
Scorecard Review
-
Please review the scorecard carefully.
-
Your submission will be reviewed on these requirements:
-
Challenge Spec Requirements
-
Requirements Coverage
-
-
Coding Standards
-
Best Practices
-
Code Quality
-
-
Development Requirements
-
Performance
-
Security
-
Deployment
-
-
Organisation & App Architecture
-
Onboarding
-
Launch Screen
-
Search
-
Alerts
-
Scrolling
-
Tables
-
Alignment
-
-
User Interaction
-
Button Size
-
Page Controls
-
Pickers
-
Sliders
-
Feedback/Notifications
-
Progress Indication
-
-
Visual Design
-
Typography
-
Legibility
-
Images
-
Text Fields
-
-
Final Submission Guidelines
- All original source code.
- A brief write up (in .md) explaining how to build, configure and deploy your code.
- ���A video to demonstrate your app.