Challenge Overview
Welcome to Eaton PX 2.0 Petting Zoo Material Design - iOS Code Challenge
This is challenge series of Eaton PX 2.0 Petting Zoo application using Material Design styling. We are looking to develop a series of demo applications that will provide the same look and feel and functionality across a variety of different Javascript frameworks. These demo apps will serve as a foundation for future applications that will share a common set of core functionality. These applications must utilize the Material Design Components that are available for these specific frameworks like AngularJS, ReactJS, Polymer, MDC Web, iOS, & Android.
For this challenge we need you to build the Eaton PX 2.0 Petting Zoo by using Material Design Components for iOS (MDC iOS) https://github.com/material-components/material-components-ios/
Let’s discuss any questions you have on challenge forum!
- All code must be written in Swift and the project must use latest XCode version. Do not use Objective-C or Bridging approach
- You must use this MDC IOS Framework: https://github.com/material-components/material-components-ios/
- Get familiar with existing MDC IOS Framework components: https://github.com/material-components/material-components-ios/tree/develop/components
- Submission challenge must support iPad & iPhone Screen sizes
- Need able to support Portrait & Landscape view
- App must support 2x and 3x assets and retina devices
- App must support iOS 10.x
- All source code changes must be well commented and MUST follow existing coding conventions
- Please ask in the forums if you wish to use any open-source third-party libs to ensure there are no license violations
Using the Sample API
- We will be making use of json-server (https://www.npmjs.com/package/json-server) to populate data in the demo applications. We will provide a sample database in JSON format.
- The data will be available by running "npx json-server /PATH_TO/db.json".
- See the link above for specific instructions on setting up json-server (NOTE: requires NPM version > 5.2.0).
IMPORTANT! NOTE ON THEMING
- This application will consist of a series of static screens (dynamic screens, working navigation, etc. will be considered additional functionality, but is not required).
- This challenge submission need support from TABLET down to MOBILE size.
- Icons are used in various places throughout the UI. Please make use of Material Icons (https://google.github.io/material-design-icons/#icon-images-for-the-web) as needed. We would prefer an implementation using the icon font, rather than svg, where possible.
- We will be developing our own theme files internally to handle the final look and feel of these applications.
- Our expectation is for developers to use the default theme provided in each of the frameworks, understanding that the final look and feel will not match exactly with the designs that we have provided.
- We do NOT want developers adding inline styles, etc. to try to exactly replicate the designs provided.
FINAL SUBMISSION GUIDELINES
- XCode Project with all source code that addresses the requirements
- Deployment guide with configuration & verification steps. Describe all config params and include steps to run
Downloadable Files:
Google Drive: https://drive.google.com/open?id=0BxNVnWK-ZGA6d0VodHRqVC1rODg
SUBMISSION REQUIREMENTS:
A). MOBILE VERSION
- Please refer to the included visual designs for the desired appearance of the application (a clickable prototype for the mobile app can be found at the following link: https://eaton.invisionapp.com/share/JGE83N24N
- For screen flow below, please refer to provided Design resources on Google Drive.
0). Splash Screen
- Splash Screen (Native Mobile Apps Only, web apps will start at the login page)
- This screen will consist of a large background image and a title indicating the name of the application
1). Login
Screen: 01-Sign In.png
- This is default screen look for the Login page
- Logo placeholder placed on top
- Email Address & Password are the only form fields
- Remember me should be checked by default
- Login button need to be disabled by default
- Request Access & Forgot button are text links
- CyberSecurity is image based
- Footer display some information about Terms & Privacy
- This screen is after user click on Login button, display error validation (Screen: 02-Sign In Missing Field.png)
- User start typing (Screen: 03-Sign In Keyboard.png)
- Value inserted to both fields (Screen: 04-Sign In Info Entered.png)
- Display modal window when incorrect password entered (Screen: 05-Sign In Fail.png)
- Create sample credentials data for login
- After login success need take user Products page
2). Products
- User landed to this screen after logged in (Screen: 06-Products Page v1.png)
- This page will present a group of cards
- The data for the cards should be pulled from the sample API provided (details below).
- Each card will contain a list of items
- Each card has an actions menu with options to add/remove items from the list, change sort, etc.
- These actions in the menu do not need to be functional
- This modal show up when click the 3dots button on the header bar (Screen: 07-Products Page Menu.png)
- Click checkbox need highlight the row and options bar show up on the bottom of screen (Screen: 08-Products Page v2 On Click.png)
- Alternatively, a separate static page may be created showing a selected item
- Click the arrow need display the details page
3). Products Details
Screen: 09-Products Page v4.png
- This is Product details screen for mobile screen
- Important: For Desktop/Tablet version, we need this Product screen displayed in same page.
- The details panel will display a list of key-value pairs of data
- Back arrow need take user back to Products page
- Match the icon on header bar
- Click the 3dots need display this options (Screen: 10-Products Page v4 Popup Menu.png)
- Click one of the option take user back to Product page with this message shows up (Screen: 11-Products Page v5.png)
- Click Dismiss button need hide the message
- This data should be pulled from the sample API provided (details below)
- The graphs/charts in the mockup may be replaced with static images for the demo (provided)
4). Navigation Drawer
Screen: 12-Navigation Drawer v2.png
- For mobile screen, need display drawer for mobile
- Set active state when navigate to Alerts or Products page
- Important: For Desktop/Tablet version, we no need the drawer, just need displayed the left sidebar icon
5). Alarms
Screen: 13-Dashboard List #2.png
- User landed to this page after click Alert menu on main navigation
- This page will present a group of expandable/collapsible panels. User need click the “Past 2 hours” for example to expand/toggle the panel
- Each panel will have a list of items
- The data for these lists should be pulled from the sample API provided (details below)
- The page will have a toolbar with actions that can be taken on the selected items (sort, filter, etc.)
- These do not need to be functional
- Options menu show up after click the 3dots on the header bar (Screen: 14-Menu.png)
- This options show up after click 3dots on the row (Screen: 15-Dashboard List #2 Menu Open.png)
- Click Connected Devices take user to Setting page explained below
- Selected checkbox need highlight the arrow and display the options bar on the bottom (Screen: 16-Dashboard List #3 1 Select.png)
- This is after user select on another row (Screen: 17-Dashboard List #3.png)
- This screen show up after user click 3dots button on selected row (Screen: 18-Dashboard List #3 1 Select Menu Open.png)
- After click some options need display success message (Screen: 19-Dashboard List #5.png)
- This screen show up after click the checkmark button after user selected 2 rows (Screen: 20-Dashboard List #New.png)
- Click Dismiss button need hide the banner
6). Alarms Detail
Screen: 21-Side Panel Stats v6.png
- This is Alarm details screen for mobile screen
- Important: For Desktop/Tablet version, we need this Details screen displayed in same page.
- This data should be pulled from the sample API provided (details below)
- The graphs/charts in the mockup may be replaced with static images for the demo (provided)
7). Settings
Screen: 22-Menu Settings Drill Down.png
- This is Connected Devices screen look
- User landed on this screen after click Connected Devices take user to Setting page explained below
- Display the checkboxes and slider on the page, based on the data in the Sample API provided
B). TABLET VERSION
- All screen flow below please refer to provided Desktop Design folder resources on Google Drive.
- No storyboard screens provided, you can use fluid version of desktop to build the tablet look
- Let us know if need some clarification when you adjust the content for Tablet layout
0). Splash Screen
- Splash Screen (Native Mobile Apps Only, web apps will start at the login page)
- This screen will consist of a large background image and a title indicating the name of the application
1). Login
Screen: 01-Desktop Sign In.png
- This is how Login screen look for Desktop
- Use blue background
- Login form need displayed centered
- Re-use existing flow like on mobile
2). Products
Screen: 02-Desktop Products.png
- For desktop screen, we need display header bar with title on top
- Left sidebar can collapse to display icon based for menu navigation, but should default to the full size as in mobile mockups.
- Display active state when navigate to different page
3). Products Details
Screen: 03-Desktop Products Details.png
- For Desktop view, select the row need show up the details on the right side
- Click the X button need hide the details
4). Alarms
Screen: 04-Desktop Alarms.png
- This is Alarms page look like
- Notice there’s toolbar on top of Alarms page
- By default Alarm page need working like Product page
- Select the checkbox need show the Alarms details
- Click x button need hide the sidebar
- Click the 3dots on top need show up the option (Screen: 05-Desktop Alarms Menus.png)
5). Settings
Screen: 06-Settings.png
- User landed to this screen after click the Connected Devices button
Platforms
iOS
Current Project Technologies
Swift, iOS
This is challenge series of Eaton PX 2.0 Petting Zoo application using Material Design styling. We are looking to develop a series of demo applications that will provide the same look and feel and functionality across a variety of different Javascript frameworks. These demo apps will serve as a foundation for future applications that will share a common set of core functionality. These applications must utilize the Material Design Components that are available for these specific frameworks like AngularJS, ReactJS, Polymer, MDC Web, iOS, & Android.
For this challenge we need you to build the Eaton PX 2.0 Petting Zoo by using Material Design Components for iOS (MDC iOS) https://github.com/material-components/material-components-ios/
Let’s discuss any questions you have on challenge forum!
Final Submission Guidelines
iOS Code Requirements:- All code must be written in Swift and the project must use latest XCode version. Do not use Objective-C or Bridging approach
- You must use this MDC IOS Framework: https://github.com/material-components/material-components-ios/
- Get familiar with existing MDC IOS Framework components: https://github.com/material-components/material-components-ios/tree/develop/components
- Submission challenge must support iPad & iPhone Screen sizes
- Need able to support Portrait & Landscape view
- App must support 2x and 3x assets and retina devices
- App must support iOS 10.x
- All source code changes must be well commented and MUST follow existing coding conventions
- Please ask in the forums if you wish to use any open-source third-party libs to ensure there are no license violations
Using the Sample API
- We will be making use of json-server (https://www.npmjs.com/package/json-server) to populate data in the demo applications. We will provide a sample database in JSON format.
- The data will be available by running "npx json-server /PATH_TO/db.json".
- See the link above for specific instructions on setting up json-server (NOTE: requires NPM version > 5.2.0).
IMPORTANT! NOTE ON THEMING
- This application will consist of a series of static screens (dynamic screens, working navigation, etc. will be considered additional functionality, but is not required).
- This challenge submission need support from TABLET down to MOBILE size.
- Icons are used in various places throughout the UI. Please make use of Material Icons (https://google.github.io/material-design-icons/#icon-images-for-the-web) as needed. We would prefer an implementation using the icon font, rather than svg, where possible.
- We will be developing our own theme files internally to handle the final look and feel of these applications.
- Our expectation is for developers to use the default theme provided in each of the frameworks, understanding that the final look and feel will not match exactly with the designs that we have provided.
- We do NOT want developers adding inline styles, etc. to try to exactly replicate the designs provided.
FINAL SUBMISSION GUIDELINES
- XCode Project with all source code that addresses the requirements
- Deployment guide with configuration & verification steps. Describe all config params and include steps to run
Downloadable Files:
Google Drive: https://drive.google.com/open?id=0BxNVnWK-ZGA6d0VodHRqVC1rODg
SUBMISSION REQUIREMENTS:
A). MOBILE VERSION
- Please refer to the included visual designs for the desired appearance of the application (a clickable prototype for the mobile app can be found at the following link: https://eaton.invisionapp.com/share/JGE83N24N
- For screen flow below, please refer to provided Design resources on Google Drive.
0). Splash Screen
- Splash Screen (Native Mobile Apps Only, web apps will start at the login page)
- This screen will consist of a large background image and a title indicating the name of the application
1). Login
Screen: 01-Sign In.png
- This is default screen look for the Login page
- Logo placeholder placed on top
- Email Address & Password are the only form fields
- Remember me should be checked by default
- Login button need to be disabled by default
- Request Access & Forgot button are text links
- CyberSecurity is image based
- Footer display some information about Terms & Privacy
- This screen is after user click on Login button, display error validation (Screen: 02-Sign In Missing Field.png)
- User start typing (Screen: 03-Sign In Keyboard.png)
- Value inserted to both fields (Screen: 04-Sign In Info Entered.png)
- Display modal window when incorrect password entered (Screen: 05-Sign In Fail.png)
- Create sample credentials data for login
- After login success need take user Products page
2). Products
- User landed to this screen after logged in (Screen: 06-Products Page v1.png)
- This page will present a group of cards
- The data for the cards should be pulled from the sample API provided (details below).
- Each card will contain a list of items
- Each card has an actions menu with options to add/remove items from the list, change sort, etc.
- These actions in the menu do not need to be functional
- This modal show up when click the 3dots button on the header bar (Screen: 07-Products Page Menu.png)
- Click checkbox need highlight the row and options bar show up on the bottom of screen (Screen: 08-Products Page v2 On Click.png)
- Alternatively, a separate static page may be created showing a selected item
- Click the arrow need display the details page
3). Products Details
Screen: 09-Products Page v4.png
- This is Product details screen for mobile screen
- Important: For Desktop/Tablet version, we need this Product screen displayed in same page.
- The details panel will display a list of key-value pairs of data
- Back arrow need take user back to Products page
- Match the icon on header bar
- Click the 3dots need display this options (Screen: 10-Products Page v4 Popup Menu.png)
- Click one of the option take user back to Product page with this message shows up (Screen: 11-Products Page v5.png)
- Click Dismiss button need hide the message
- This data should be pulled from the sample API provided (details below)
- The graphs/charts in the mockup may be replaced with static images for the demo (provided)
4). Navigation Drawer
Screen: 12-Navigation Drawer v2.png
- For mobile screen, need display drawer for mobile
- Set active state when navigate to Alerts or Products page
- Important: For Desktop/Tablet version, we no need the drawer, just need displayed the left sidebar icon
5). Alarms
Screen: 13-Dashboard List #2.png
- User landed to this page after click Alert menu on main navigation
- This page will present a group of expandable/collapsible panels. User need click the “Past 2 hours” for example to expand/toggle the panel
- Each panel will have a list of items
- The data for these lists should be pulled from the sample API provided (details below)
- The page will have a toolbar with actions that can be taken on the selected items (sort, filter, etc.)
- These do not need to be functional
- Options menu show up after click the 3dots on the header bar (Screen: 14-Menu.png)
- This options show up after click 3dots on the row (Screen: 15-Dashboard List #2 Menu Open.png)
- Click Connected Devices take user to Setting page explained below
- Selected checkbox need highlight the arrow and display the options bar on the bottom (Screen: 16-Dashboard List #3 1 Select.png)
- This is after user select on another row (Screen: 17-Dashboard List #3.png)
- This screen show up after user click 3dots button on selected row (Screen: 18-Dashboard List #3 1 Select Menu Open.png)
- After click some options need display success message (Screen: 19-Dashboard List #5.png)
- This screen show up after click the checkmark button after user selected 2 rows (Screen: 20-Dashboard List #New.png)
- Click Dismiss button need hide the banner
6). Alarms Detail
Screen: 21-Side Panel Stats v6.png
- This is Alarm details screen for mobile screen
- Important: For Desktop/Tablet version, we need this Details screen displayed in same page.
- This data should be pulled from the sample API provided (details below)
- The graphs/charts in the mockup may be replaced with static images for the demo (provided)
7). Settings
Screen: 22-Menu Settings Drill Down.png
- This is Connected Devices screen look
- User landed on this screen after click Connected Devices take user to Setting page explained below
- Display the checkboxes and slider on the page, based on the data in the Sample API provided
B). TABLET VERSION
- All screen flow below please refer to provided Desktop Design folder resources on Google Drive.
- No storyboard screens provided, you can use fluid version of desktop to build the tablet look
- Let us know if need some clarification when you adjust the content for Tablet layout
0). Splash Screen
- Splash Screen (Native Mobile Apps Only, web apps will start at the login page)
- This screen will consist of a large background image and a title indicating the name of the application
1). Login
Screen: 01-Desktop Sign In.png
- This is how Login screen look for Desktop
- Use blue background
- Login form need displayed centered
- Re-use existing flow like on mobile
2). Products
Screen: 02-Desktop Products.png
- For desktop screen, we need display header bar with title on top
- Left sidebar can collapse to display icon based for menu navigation, but should default to the full size as in mobile mockups.
- Display active state when navigate to different page
3). Products Details
Screen: 03-Desktop Products Details.png
- For Desktop view, select the row need show up the details on the right side
- Click the X button need hide the details
4). Alarms
Screen: 04-Desktop Alarms.png
- This is Alarms page look like
- Notice there’s toolbar on top of Alarms page
- By default Alarm page need working like Product page
- Select the checkbox need show the Alarms details
- Click x button need hide the sidebar
- Click the 3dots on top need show up the option (Screen: 05-Desktop Alarms Menus.png)
5). Settings
Screen: 06-Settings.png
- User landed to this screen after click the Connected Devices button
Platforms
iOS
Current Project Technologies
Swift, iOS