Challenge Overview
Welcome to ABB Commodity Market Ionic Framework Application Code Challenge
In this challenge, we are looking for your help to create Mobile Ionic application based on the provided storyboard using Ionic + Angular framework.
As part of this challenge we need you to create documentation of your Ionic application, we are looking for a clear explanation of the code to allow us the ability to quickly update and integrate with future development.
Good luck and Let us know any questions you have!
Datasource Details
- The data source of this challenge will be an Excel file. See below for more details.
- You can download the excel file: https://drive.google.com/open?id=1TBhPVHBbUdNCBxV7wILRBxuyz2Pfzu4L
- Put the same in your dev folder structure. Read the file directly from there. Remember, the excel will not be updated dynamically for now. Use it as a static source of data and the excel should be part of the app. Ask questions in the forum if you have any confusion.
- You can use this library to load the excel file: https://github.com/SheetJS/js-xlsx OR come up with your own library suggestion
- The idea is that while the app loads the code will read all the related data for the Dashboard screen from the excel file and display the same.
- On selecting any metal when the second page - Details page is loaded, then the app will again read the excel and display the data as needed.
Cordova
- Please note. The build has to be cordova compatible.
General Tasks
- In this challenge we are converting the provided Storyboard to a working (Mobile Layout) Ionic/HTML5/AngularJS/CSS prototype that compile run in iPhone/Android devices.
- Make sure to test this on simulator/real devices, testing only on web browser is not sufficient and won’t ensure good performance/responsiveness on device.
- You must support Portrait & Landscape view for this submission unless mentioned. See individual screens for exceptions mentioned.
- Use latest version of the Ionic framework: http://ionicframework.com/
- Get familiar with Ionic Framework: http://ionicframework.com/getting-started/ & http://ionicframework.com/docs/
- Put clear comment for all Ionic codes
- Please use proper id’s and classes in your naming conventions.
Challenge Assets:
- Use this Zeplin project to grab all challenge assets: https://zpl.io/29qvweB
- Send email to lunarkid@copilots.topcoder.com to get the Zeplin access.
- You can also download the original Sketch file here: https://drive.google.com/open?id=1OJhfIEwc9GwwixSWKnXq3wEV-QJT5K_V
- FYI: Zeplin project contains of Tag for All Pages & Icons. Toggle on each to filter related Pages or Icons
- Pull icons assets as SVG & image assets as PNG
- Embed provided fonts.zip into your submission
- Gitlab - Details in forum.
Screen Requirements:
We need below pages to be put together, take a look at the flow - let us know if you have any questions.
01). App Icon
Assets: https://zpl.io/29qvweB > Icons Tag
- Create application icon for application on Android & iOS devices.
- Pull assets from Zeplin, let us know if need some clarifications
- Refer to this site for iOS App icon Guidelines: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/
- Refer to this site for Android App icon Guidelines: https://developer.android.com/guide/practices/ui_guidelines/icon_design.html
02). Splash Screen
Assets: https://zpl.io/Vxmy0Zw
- Create splash screen after user open the application
- ABB logo need placed vertically & horizontally centered.
- After some seconds need take user go to Login page explained below
- Refer to this site for iOS Launch Screen Guidelines: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/launch-screen/
- Refer to this site for Android Splash screen Guidelines: https://android.jlelse.eu/launch-screen-in-android-the-right-way-aca7e8c31f52
03). Login
Assets: https://zpl.io/2GEBGLj
- This is how Login page look and feel
- ABB Logo and the welcome message placed on top
- Display username and password fields
- Login button take user to Dashboard page
- Use dummy login details.
04). Dashboard
Assets: https://zpl.io/V40Dz9Q
- This is Dashboard screen look
- On header bar you need display the logo and title on top left, and hamburger menu on the right side
- Header bar need remain in place when user scrolling the content
- Each category need able to collapse/expand
- Notice there’s arrow with different color on page as indicator for market price status
- Each Product item should take user to Details page
- Update all dashboard information based on spreadsheet
- Important : Dashboard Screen must be in Portrait mode.
Actual Data need to captured from Spreadsheet:
-- Non-Ferrous Metals - Category
-- Last Update Month - Month
-- Aluminium - Commodity
-- London Metal Exchange - Source
-- $2,030 USD/mt - Current Value
- (Green Up Arrow)127 - M-o-M Change (FYI: Negative will be using red arrow and red text)
05). Sidebar Menu
Assets: https://zpl.io/b6N9xom
- This sidebar menu show up after user click the hamburger menu
- Click X button need hide the sidebar mene
- Put dead link for Edit button
- Logout need take user back to Login page
- Display some menu navigation, put them all as dead links for now
06). Details
Assets: https://zpl.io/2ykYGgw
- This Details screen look and feel
- On header bar, the left arrow take user back to homepage
- Product information placed below the page title
- Create dots pagination for 3 sections: AI Pricing summary, AI LME + USMW Premium chart (https://zpl.io/anoMLwn) & AI LMECash and USMW Premium chart (https://zpl.io/a8lxGrQ)
- For AI LME + USMW Premium chart & AI LMECash and USMW Premium chart, please build the chart based on structured spreadsheet data
- Suggest chart library to look like provided storyboard
- There’s full-size chart button on top right of both chart.
- Click that button need force application to use landscape view and display the full size chart
Actual Data need to captured from Spreadsheet on AI Pricing summary slide:
- Aluminium - Category Title
- Market Pricing - Market Commentary
- Current $2,030 USD/mt - Current Value
- 2017 YTD - Current Year Average
- 2017 Fcast - Current Year Forecast
- 2017 Badge - Current Year Budget
- 2017 Average - Previous Year Average
07) Details - Full Size Chart
Assets: https://zpl.io/awqZgEj
- This screen show up after user click the full size chart
- Back button take user to Details page
- On the top right click that button need force to details page and change to portrait view
- There’s dots pagination on the bottom to let user navigate to another chart
CODE REQUIREMENTS:
Ionic/Javascript
- Ionic framework and AngularJs are our main focus frameworks, you must use the ionic directives, and “think in Angular” when coding.
- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
CSS
- It is preferred using SASS for ionic framework
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Assets/Images
- Use SVG to make graphics look sharp on your submissions.
- Make sure your submission look sharp for Retina and Standard devices
- Wherever it makes sense, you can use icon fonts instead of images.
- For all the image, please pull them as PNG format from provided Assets
- For all the icons, please pull them as SVG format from provided Assets
Browsers Requirements
- Native Mobile on Android
- Native Mobile on iOS
1. Source code zip file.
2. Packaged App in Android and iOS format
3. Compiling and building instructions.
4. List of frameworks / plugins used.
5. Submit merge requests
In this challenge, we are looking for your help to create Mobile Ionic application based on the provided storyboard using Ionic + Angular framework.
As part of this challenge we need you to create documentation of your Ionic application, we are looking for a clear explanation of the code to allow us the ability to quickly update and integrate with future development.
Good luck and Let us know any questions you have!
Datasource Details
- The data source of this challenge will be an Excel file. See below for more details.
- You can download the excel file: https://drive.google.com/open?id=1TBhPVHBbUdNCBxV7wILRBxuyz2Pfzu4L
- Put the same in your dev folder structure. Read the file directly from there. Remember, the excel will not be updated dynamically for now. Use it as a static source of data and the excel should be part of the app. Ask questions in the forum if you have any confusion.
- You can use this library to load the excel file: https://github.com/SheetJS/js-xlsx OR come up with your own library suggestion
- The idea is that while the app loads the code will read all the related data for the Dashboard screen from the excel file and display the same.
- On selecting any metal when the second page - Details page is loaded, then the app will again read the excel and display the data as needed.
Cordova
- Please note. The build has to be cordova compatible.
General Tasks
- In this challenge we are converting the provided Storyboard to a working (Mobile Layout) Ionic/HTML5/AngularJS/CSS prototype that compile run in iPhone/Android devices.
- Make sure to test this on simulator/real devices, testing only on web browser is not sufficient and won’t ensure good performance/responsiveness on device.
- You must support Portrait & Landscape view for this submission unless mentioned. See individual screens for exceptions mentioned.
- Use latest version of the Ionic framework: http://ionicframework.com/
- Get familiar with Ionic Framework: http://ionicframework.com/getting-started/ & http://ionicframework.com/docs/
- Put clear comment for all Ionic codes
- Please use proper id’s and classes in your naming conventions.
Challenge Assets:
- Use this Zeplin project to grab all challenge assets: https://zpl.io/29qvweB
- Send email to lunarkid@copilots.topcoder.com to get the Zeplin access.
- You can also download the original Sketch file here: https://drive.google.com/open?id=1OJhfIEwc9GwwixSWKnXq3wEV-QJT5K_V
- FYI: Zeplin project contains of Tag for All Pages & Icons. Toggle on each to filter related Pages or Icons
- Pull icons assets as SVG & image assets as PNG
- Embed provided fonts.zip into your submission
- Gitlab - Details in forum.
Screen Requirements:
We need below pages to be put together, take a look at the flow - let us know if you have any questions.
01). App Icon
Assets: https://zpl.io/29qvweB > Icons Tag
- Create application icon for application on Android & iOS devices.
- Pull assets from Zeplin, let us know if need some clarifications
- Refer to this site for iOS App icon Guidelines: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/
- Refer to this site for Android App icon Guidelines: https://developer.android.com/guide/practices/ui_guidelines/icon_design.html
02). Splash Screen
Assets: https://zpl.io/Vxmy0Zw
- Create splash screen after user open the application
- ABB logo need placed vertically & horizontally centered.
- After some seconds need take user go to Login page explained below
- Refer to this site for iOS Launch Screen Guidelines: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/launch-screen/
- Refer to this site for Android Splash screen Guidelines: https://android.jlelse.eu/launch-screen-in-android-the-right-way-aca7e8c31f52
03). Login
Assets: https://zpl.io/2GEBGLj
- This is how Login page look and feel
- ABB Logo and the welcome message placed on top
- Display username and password fields
- Login button take user to Dashboard page
- Use dummy login details.
04). Dashboard
Assets: https://zpl.io/V40Dz9Q
- This is Dashboard screen look
- On header bar you need display the logo and title on top left, and hamburger menu on the right side
- Header bar need remain in place when user scrolling the content
- Each category need able to collapse/expand
- Notice there’s arrow with different color on page as indicator for market price status
- Each Product item should take user to Details page
- Update all dashboard information based on spreadsheet
- Important : Dashboard Screen must be in Portrait mode.
Actual Data need to captured from Spreadsheet:
-- Non-Ferrous Metals - Category
-- Last Update Month - Month
-- Aluminium - Commodity
-- London Metal Exchange - Source
-- $2,030 USD/mt - Current Value
- (Green Up Arrow)127 - M-o-M Change (FYI: Negative will be using red arrow and red text)
05). Sidebar Menu
Assets: https://zpl.io/b6N9xom
- This sidebar menu show up after user click the hamburger menu
- Click X button need hide the sidebar mene
- Put dead link for Edit button
- Logout need take user back to Login page
- Display some menu navigation, put them all as dead links for now
06). Details
Assets: https://zpl.io/2ykYGgw
- This Details screen look and feel
- On header bar, the left arrow take user back to homepage
- Product information placed below the page title
- Create dots pagination for 3 sections: AI Pricing summary, AI LME + USMW Premium chart (https://zpl.io/anoMLwn) & AI LMECash and USMW Premium chart (https://zpl.io/a8lxGrQ)
- For AI LME + USMW Premium chart & AI LMECash and USMW Premium chart, please build the chart based on structured spreadsheet data
- Suggest chart library to look like provided storyboard
- There’s full-size chart button on top right of both chart.
- Click that button need force application to use landscape view and display the full size chart
Actual Data need to captured from Spreadsheet on AI Pricing summary slide:
- Aluminium - Category Title
- Market Pricing - Market Commentary
- Current $2,030 USD/mt - Current Value
- 2017 YTD - Current Year Average
- 2017 Fcast - Current Year Forecast
- 2017 Badge - Current Year Budget
- 2017 Average - Previous Year Average
07) Details - Full Size Chart
Assets: https://zpl.io/awqZgEj
- This screen show up after user click the full size chart
- Back button take user to Details page
- On the top right click that button need force to details page and change to portrait view
- There’s dots pagination on the bottom to let user navigate to another chart
CODE REQUIREMENTS:
Ionic/Javascript
- Ionic framework and AngularJs are our main focus frameworks, you must use the ionic directives, and “think in Angular” when coding.
- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
CSS
- It is preferred using SASS for ionic framework
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Assets/Images
- Use SVG to make graphics look sharp on your submissions.
- Make sure your submission look sharp for Retina and Standard devices
- Wherever it makes sense, you can use icon fonts instead of images.
- For all the image, please pull them as PNG format from provided Assets
- For all the icons, please pull them as SVG format from provided Assets
Browsers Requirements
- Native Mobile on Android
- Native Mobile on iOS
Final Submission Guidelines
Things need to be submitted:1. Source code zip file.
2. Packaged App in Android and iOS format
3. Compiling and building instructions.
4. List of frameworks / plugins used.
5. Submit merge requests