Challenge Overview
1.0 - Challenge Overview
Welcome to the Data Booklet Mobile App - Frontend Home, Gases, Tanks, Resources and Blends Assembly Challenge! In this challenge, you will need to implement the frontend for Home, Gases, Tanks, Resources and Blends screens for the Cordova based application for iOS and Android platforms (based on the architecture design).
1.1 - Project Overview
The client for this project has an existing PDF reference guide called "Your Guide to Industrial Gases and Cryogenic Fluids" that they would like to convert into a mobile application. Currently, salesman and customers use this PDF reference guide that explains measurements and calculations of industrial gases and cryogenic fluid. The client has decided to convert this reference guide into a mobile application. Converting this reference guide into a mobile application will allow salesman to discuss their products with their customers and use their "handy and useful" mobile application to search and show measurements, calculations and conversions to help explain a sale or their products. Customers could also use it as quick reference guide while at work or in the field. The client needs this mobile app to be cross-platform, and they have decided to go with PhoneGap / Cordova.
This assembly will implement the frontend for Home, Gases, Tanks, Resources and Blends screens (details below).
1.2 - Competition Task Overview
A complete list of deliverables can be found in the TopCoder Assembly competition Tutorial at: http://apps.topcoder.com/wiki/display/tc/Assembly+Competition+Tutorials
Note: Please read the whole Application Design Specification first. All the details not mentioned in this specification are provided in that document.
1.2.1 Cordova Application
The final application should be Cordova based application for iOS and Android platforms. Since there is no custom Cordova plugin code to be developed in this application, the frontend application will be coded using JavaScript, HTML and CSS with AngularJS as the application framework, and no native iOS/Android coding is necessary.
Assemblers are responsible for providing instructions to build the application for both iOS and Android platforms in the Deployment Guide.
1.2.2 AngularJS Services & Controllers
This assembly will implement the following classes on "Frontend Class Diagram"
- BlendService
- TankageService
- BannerService
- LinkService
- ResourceService
- GasService
- MainCtrl
- HomeCtrl
- GasCtrl
- ListLinkCtrl
- ListResourceCtrl
- ListBlendCtrl
- StandardTankageCtrl
- CylinderSizeCtrl
- RareGasCylinderCtrl
- IndustrialPureGasCylinderCtrl
- LiquidCryogenicContainerCtrl
- OnsiteStorageSystemCtrl
- app.js
- routes.js
Implementation details are provided at TCUML method documentations.
1.2.3 AngularJS Views
This assembly is responsible for the following views (details also included in the attached Requirements Specification "Data_Booklet_Mobile_App_Frontend_Home_Gases_Tanks_Resources_and_Blends_Assembly_Specification.docx"):
1.2.3.1 index.html
This is the index page of the application, this page should include all third-party JavaScript libraries as well as all AngularJS services and controllers JavaScript files.
This page should include common page components such as page header, footer, menu, etc.
This page should use AngularJS controller MainCtrl.
This page should also include an "ng-view" DIV element for AngularJS to dynamically display views:
<div ng-view></div>
The search button should trigger MainCtrl.search action.
1.2.3.2 templates/home.html
Wireframe Page: home.html
AngularJS Controller: HomeCtrl
This is the partial view for home screen.
The banners on this screen correspond to $scope.banners, and each banner should link to the "url" attribute of Banner object with "_black" target (i.e. to open using the system's default browser in a new window).
The menu items should link to:
- Gases: "/#/gases"
- Converter: "/#/converter/gasPropertyEquivalent"
- Tanks & Cylinders: "/#/standardTankages"
- Blends: "/#/blends"
- Encyclopedia: "/#/terms"
- Links & Resources: "/#/links"
1.2.3.3 templates/links.html
Wireframe Page: linksresources.html
AngularJS Controller: ListLinkCtrl
This is the partial view for Links screen.
The links on this screen correspond to $scope.links.
The tab "Links" should be active, and the "Resources" tab should link to "/#/resources".
1.2.3.4 templates/resources.html
Wireframe Page: linksresources.html
AngularJS Controller: ListResourceCtrl
This is the partial view for Resources screen.
The resources on this screen correspond to $scope.resources.
The tab "Resources" should be active, and the "Links" tab should link to "/#/links".
Image should be rendered using <IMG> or <CANVAS> tag.
Video should be rendered using <VIDEO> tag.
Download link would allow user to download the image/video.
1.2.3.5 templates/blends.html
Wireframe Page: blends.html
AngularJS Controller: ListBlendCtrl
This is the partial view for Blends screen.
The tabs on this screen correspond to $scope.blendTypes, and the active tab is determined by $scope.currentBlendType. Each tab links to "/#/blends/<type>", where <type> is the type for the tab.
Each table on the screen correspond to a key/value pair in $scope.blends, where key will be used as the table header, and the value (an array of Blend objects) will be used to fill the table.
1.2.3.6 templates/gases.html
Wireframe Page: gases.html
AngularJS Controller: GasCtrl
This is the partial view for Gases screen.
The dropdown/spinner for selecting gas should be bound to $scope.gasInfos, value changes will trigger $scope.changeSelectedGas.
If $scope.gas is not null (i.e. selected gas is not Air), the gas data should be shown (please refer to wireframes for data layout).
If $scope.dryAirComponents is not null (i.e. selected gas is Air), the dry air components data should be shown (please refer to wireframes for data layout).
1.2.3.7 templates/standardTankages.html
Wireframe Page: tanksandcylinders.html
AngularJS Controller: StandardTankageCtrl
This is the partial view for Standard Tankages screen.
The first-level tabs should link to:
- Standard Tankage: "/#/standardTankages"
- Onsite Storage System: "/#/onsiteStorageSystems"
- Cylinders: "/#/cylinderSizes"
The second-level tabs on this screen correspond to $scope.gasInfos, and the active tab is determined by $scope.currentGasInfo. "onclick" event of each tab link should trigger $scope.changeSelectedGas.
The dropdown for selecting characteristics code (e.g. "TM", "TL", "HTM") should be bound to $scope.currentCharacteristicsCode. The dropdown should be populated with $scope.characteristicsCodes.
The dropdown for selecting characteristics volume (e.g. "500", "900", "1500") should be bound to $scope.currentCharacteristicsVolume. The dropdown should be populated with $scope.characteristicsVolumes.
The main data area should show data of $scope.currentStandardTankage. <IMG> tag should be used to render the tankage image ($scope.currentStandardTankageImage) - note that the image will be Base64 encoded.
1.2.3.8 templates/onsiteStorageSystems.html
Wireframe Page: tanksandcylinders.html
AngularJS Controller: OnsiteStorageSystemCtrl
This is the partial view for Onsite Storage System screen.
The first-level tabs should link to:
- Standard Tankage: "/#/standardTankages"
- Onsite Storage System: "/#/onsiteStorageSystems"
- Cylinders: "/#/cylinderSizes"
The second-level tabs on this screen correspond to $scope.gasInfos, and the active tab is determined by $scope.currentGasInfo. "onclick" event of each tab link should trigger $scope.changeSelectedGas.
The dropdown for selecting characteristics code (e.g. "TM", "TL", "HTM") should be bound to $scope.currentCharacteristicsCode. The dropdown should be populated with $scope.characteristicsCodes.
The dropdown for selecting characteristics volume (e.g. "500", "900", "1500") should be bound to $scope.currentCharacteristicsVolume. The dropdown should be populated with $scope.characteristicsVolumes.
The main data area should show data of $scope.currentOnsiteStorageSystem.
1.2.3.9 templates/cylinderSizes.html
Wireframe Page: tanksandcylinders.html
AngularJS Controller: CylinderSizeCtrl
This is the partial view for Cylinder Sizes screen.
The first-level tabs should link to:
- Standard Tankage: "/#/standardTankages"
- Onsite Storage System: "/#/onsiteStorageSystems"
- Cylinders: "/#/cylinderSizes"
The second-level tabs should link to:
- Size Chart: "/#/cylinderSizes"
- Rare Gases: "/#/rareGasCylinders"
- Industrial Pure Gases: "/#/industrialPureGasCylinders"
- Liquid Cryogenic: "/#/liquidCryogenicContainers"
Each table on the screen correspond to a key/value pair in $scope.cylinderSizes, where key will be used as the table header, and the value (an array of CylinderSize objects) will be used to fill the table.
1.2.3.10 templates/rareGasCylinders.html
Wireframe Page: tanksandcylinders.html
AngularJS Controller: RareGasCylinderCtrl
This is the partial view for Rare Gases screen.
The first-level tabs should link to:
- Standard Tankage: "/#/standardTankages"
- Onsite Storage System: "/#/onsiteStorageSystems"
- Cylinders: "/#/cylinderSizes"
The second-level tabs should link to:
- Size Chart: "/#/cylinderSizes"
- Rare Gases: "/#/rareGasCylinders"
- Industrial Pure Gases: "/#/industrialPureGasCylinders"
- Liquid Cryogenic: "/#/liquidCryogenicContainers"
The third-level tabs should correspond to the keys of $scope.rareGasCylinders.
Content of each third-level tab correspond to a key/value pair in $scope.rareGasCylinders, where key will be used as the tab header, and the value (an array of RareGasCylinder objects) will be used to fill the table.
1.2.3.11 templates/industrialPureGasCylinders.html
Wireframe Page: tanksandcylinders.html
AngularJS Controller: IndustrialPureGasCylinderCtrl
This is the partial view for Industrial Pure Gases screen.
The first-level tabs should link to:
- Standard Tankage: "/#/standardTankages"
- Onsite Storage System: "/#/onsiteStorageSystems"
- Cylinders: "/#/cylinderSizes"
The second-level tabs should link to:
- Size Chart: "/#/cylinderSizes"
- Rare Gases: "/#/rareGasCylinders"
- Industrial Pure Gases: "/#/industrialPureGasCylinders"
- Liquid Cryogenic: "/#/liquidCryogenicContainers"
The dropdown for selecting product should be bound to $scope.currentProduct. The dropdown should be populated with $scope.products.
The screen should display $scope.currentIndustrialPureGasCylinders as a table.
1.2.3.12 templates/liquidCryogenicContainers.html
Wireframe Page: tanksandcylinders.html
AngularJS Controller: LiquidCryogenicContainerCtrl
This is the partial view for Liquid Cryogenic Containers screen.
The first-level tabs should link to:
- Standard Tankage: "/#/standardTankages"
- Onsite Storage System: "/#/onsiteStorageSystems"
- Cylinders: "/#/cylinderSizes"
The second-level tabs should link to:
- Size Chart: "/#/cylinderSizes"
- Rare Gases: "/#/rareGasCylinders"
- Industrial Pure Gases: "/#/industrialPureGasCylinders"
- Liquid Cryogenic: "/#/liquidCryogenicContainers"
The third-level tabs should correspond to the keys of $scope.liquidCryogenicContainers.
Content of each third-level tab correspond to a key/value pair in $scope.liquidCryogenicContainers, where key will be used as the tab header, and the value (an array of LiquidCryogenicContainer objects) will be used to fill the table. There will also be a table that summarizes the containers data ($scope.liquidCryogenicContainerInfos).
1.3 - Deliverables
- Source code and configuration files.
- Deployment guide to configure and verify the application.
1.4 - Technology Overview
1.5 - Documentation Provided
Documentation and Applications that will be provided to registered members:
| Document Name | Document Description |
|---|---|
| Application Design Specification | Architecture documentation attached |
| Class Diagrams | Architecture documentation attached |
| Sequence Diagrams | Architecture documentation attached |
| ERD | Architecture documentation attached |
| UI Prototype | HTML / CSS / JS prototype attached (AngularJS) |
| Backend Assembly | Completed Backend Assembly |
1.6 - Testing
Please include unit tests to verify your application successfully meets the requirements of the project. You should provide functional tests.
Final Submission Guidelines
- Completed code for the application (see architecture documentation and section 1.2 of this challenge spec above)
- A complete and detailed deployment documented explaining how to deploy the application including configuration information.
- Tests to verify your application successfully meets the requirements of the project.
A complete list of deliverables can be found in the TopCoder Assembly competition Tutorial at: http://apps.topcoder.com/wiki/display/tc/Assembly+Competition+Tutorials