Challenge Overview
1.0 - Challenge Overview
Welcome to the Data Booklet Mobile App - Frontend - Converter and Encyclopedia Assembly Challenge! In this challenge, you will need to implement the frontend for Converter and Encyclopedia 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 the Converter and Encyclopedia 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"
- TermService
- ConversionService
- EncyclopediaService
- SafetyInfoCtrl
- TermCtrl
- ElementPeriodicTableCtrl
- MoistureConversionCtrl
- GasPropertyEquivalentConversionCtrl
- GasFlowRateConversionCtrl
- PercentFlashOffConstantEnthalpyConversionCtrl
- TemperatureConversionCtrl
- ConversionFactorCtrl
- DecimalEquivalentsConversionCtrl
- MeanSpecificHeatsConversionCtrl
- GradesOfPurityConversionCtrl
- EncyclopediaOtherCtrl
- MetricEquivalentsConversionCtrl
- 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_Converter_and_Encyclopedia_Assembly_Specification.docx"):
1.2.3.1 templates/terms.html
Wireframe Page: encyclopedia.html
AngularJS Controller: TermCtrl
This is the partial view for terms screen.
The tabs should link to:
- Terms & Definitions: "/#/terms"
- Periodic Table: "/#/periodicTable"
- Safety Information: "/#/safetyInfo"
- Other: "/#/encyclopediaOther"
The dropdown for selecting term name should be bound to $scope.currentTermName. The dropdown should be populated with $scope.termNames. Value change of the dropdown should trigger $scope.selectTerm.
Value change of the auto-complete text box should trigger $scope.changeTermFilter, the $scope.matchingTermNames should be displayed and selecting a matching term name should trigger $scope.selectTerm.
1.2.3.2 templates/periodicTable.html
Wireframe Page: encyclopedia.html
AngularJS Controller: ElementPeriodicTableCtrl
This is the partial view for element periodic table screen.
The tabs should link to:
- Terms & Definitions: "/#/terms"
- Periodic Table: "/#/periodicTable"
- Safety Information: "/#/safetyInfo"
- Other: "/#/encyclopediaOther"
The periodic table should be shown as an image. <AREA> tags should be used to make elements boxes clickable, and "onclick" should trigger $scope.selectElement. Zoom in the image should simply show a bigger version of the periodic table image.
If $scope.element is not null, the popover should show the information of the selected element.
1.2.3.3 templates/safetyInfo.html
Wireframe Page: encyclopedia.html
AngularJS Controller: SafetyInfoCtrl
This is the partial view for safety information screen.
The tabs should link to:
- Terms & Definitions: "/#/terms"
- Periodic Table: "/#/periodicTable"
- Safety Information: "/#/safetyInfo"
- Other: "/#/encyclopediaOther"
This view will show static content.
1.2.3.4 templates/encyclopediaOther.html
Wireframe Page: encyclopedia.html
AngularJS Controller: EncyclopediaOtherCtrl
This is the partial view for other encyclopedia data.
The tabs should link to:
- Terms & Definitions: "/#/terms"
- Periodic Table: "/#/periodicTable"
- Safety Information: "/#/safetyInfo"
- Other: "/#/encyclopediaOther"
The tables on the screen corresponds to $scope.gasConstants, $scope.siUnitMultiplicationFactors, $scope.miscPhysicalConstants and $scope.vaporizerPerformances.
1.2.3.5 templates/encyclopediaOther.html
Wireframe Page: encyclopedia.html
AngularJS Controller: EncyclopediaOtherCtrl
This is the partial view for other encyclopedia data.
The tabs should link to:
- Terms & Definitions: "/#/terms"
- Periodic Table: "/#/periodicTable"
- Safety Information: "/#/safetyInfo"
- Other: "/#/encyclopediaOther"
The tables on the screen corresponds to $scope.gasConstants, $scope.siUnitMultiplicationFactors, $scope.miscPhysicalConstants and $scope.vaporizerPerformances.
1.2.3.6 templates/converter/gasPropertyEquivalent.html
Wireframe Page: converter.html
AngularJS Controller: GasPropertyEquivalentConversionCtrl
This is the partial view for Converter Tool screen.
The tabs should link to:
- Tool: "/#/converter/gasPropertyEquivalent"
- Properties: "/#/converter/gasFlowRate"
- Metrics: "/#/converterMetrics"
The dropdown/spinner for selecting gas should be bound to $scope.gasInfos, value changes will trigger $scope.changeSelectedGas.
$scope.mass, $scope.massUnit, $scope.volume, $scope.volumeUnit, $scope.heatOfVaporization and $scope.heatOfVaporizationUnit will be bound to relevant UI inputs and if any of the values changes, $scope.convert should be triggered to recalculate the conversion result.
"Send SMS" will trigger $scope.sendConversionSMS.
"Send Email" will trigger $scope.sendConversionEmail.
The "?" menu will show static content.
1.2.3.7 templates/converter/gasFlowRate.html
Wireframe Page: converter.html
AngularJS Controller: GasFlowRateConversionCtrl
This is the partial view for Flow Rate conversion screen.
The tabs should link to:
- Tool: "/#/converter/gasPropertyEquivalent"
- Properties: "/#/converter/gasFlowRate"
- Metrics: "/#/converterMetrics"
The dropdown/spinner options for selecting conversion types should link to:
- Flow Rate Conversion: "/#/converter/gasFlowRate"
- Percent Flash Off Constant Enthalpy: "/#/converter/percentFlashOffConstantEnthalpy"
- Grades of Purity: "/#/converter/gradesOfPurity"
- Mean Specific Heats: "/#/converter/meanSpecificHeats"
- Moisture Conversion: "/#/converter/moistureConversion"
The dropdown/spinner for selecting gas should be bound to $scope.gasInfos, value changes will trigger $scope.changeSelectedGas.
$scope.gpm, $scope.cfh, $scope.unit will be bound to relevant UI inputs and if any of the values changes, $scope.convert should be triggered to recalculate the conversion result. $scope.gpm will be shown if $scope.unit is "gpm"; $scope.cfh will be shown if $scope.unit is "cfh".
"Send SMS" will trigger $scope.sendConversionSMS.
"Send Email" will trigger $scope.sendConversionEmail.
The "?" menu will show static content.
1.2.3.8 templates/converter/percentFlashOffConstantEnthalpy.html
Wireframe Page: converter.html
AngularJS Controller: PercentFlashOffConstantEnthalpyConversionCtrl
This is the partial view for Percent Flash Off Constant Enthalpy conversion screen.
The tabs should link to:
- Tool: "/#/converter/gasPropertyEquivalent"
- Properties: "/#/converter/gasFlowRate"
- Metrics: "/#/converterMetrics"
The dropdown/spinner options for selecting conversion types should link to:
- Flow Rate Conversion: "/#/converter/gasFlowRate"
- Percent Flash Off Constant Enthalpy: "/#/converter/percentFlashOffConstantEnthalpy"
- Grades of Purity: "/#/converter/gradesOfPurity"
- Mean Specific Heats: "/#/converter/meanSpecificHeats"
- Moisture Conversion: "/#/converter/moistureConversion"
This view will contain static content showing the enthalpy diagram.
The "?" menu will show static content.
1.2.3.9 templates/converter/gradesOfPurity.html
Wireframe Page: converter.html
AngularJS Controller: GradesOfPurityConversionCtrl
This is the partial view for Grades of Purity conversion screen.
The tabs should link to:
- Tool: "/#/converter/gasPropertyEquivalent"
- Properties: "/#/converter/gasFlowRate"
- Metrics: "/#/converterMetrics"
The dropdown/spinner options for selecting conversion types should link to:
- Flow Rate Conversion: "/#/converter/gasFlowRate"
- Percent Flash Off Constant Enthalpy: "/#/converter/percentFlashOffConstantEnthalpy"
- Grades of Purity: "/#/converter/gradesOfPurity"
- Mean Specific Heats: "/#/converter/meanSpecificHeats"
- Moisture Conversion: "/#/converter/moistureConversion"
$scope.9sValue, $scope.purityValue, $scope.gradeValue should be bound to relevant UI inputs, change of any value will trigger $scope.convert.
"Send SMS" will trigger $scope.sendConversionSMS.
"Send Email" will trigger $scope.sendConversionEmail.
The "?" menu will show static content.
1.2.3.10 templates/converter/meanSpecificHeats.html
Wireframe Page: converter.html
AngularJS Controller: MeanSpecificHeatsConversionCtrl
This is the partial view for Mean Specific Heats conversion screen.
The tabs should link to:
- Tool: "/#/converter/gasPropertyEquivalent"
- Properties: "/#/converter/gasFlowRate"
- Metrics: "/#/converterMetrics"
The dropdown/spinner options for selecting conversion types should link to:
- Flow Rate Conversion: "/#/converter/gasFlowRate"
- Percent Flash Off Constant Enthalpy: "/#/converter/percentFlashOffConstantEnthalpy"
- Grades of Purity: "/#/converter/gradesOfPurity"
- Mean Specific Heats: "/#/converter/meanSpecificHeats"
- Moisture Conversion: "/#/converter/moistureConversion"
The dropdown/spinner for selecting gas should be bound to $scope.gasInfos, value changes will trigger $scope.changeSelectedGas.
$scope.cValue, $scope.fValue will be bound to relevant UI inputs and if any of the values changes, $scope.convert should be triggered to recalculate the conversion result.
"Send SMS" will trigger $scope.sendConversionSMS.
"Send Email" will trigger $scope.sendConversionEmail.
The "?" menu will show static content.
1.2.3.11 templates/converter/moistureConversion.html
Wireframe Page: converter.html
AngularJS Controller: MoistureConversionCtrl
This is the partial view for Moisture conversion screen.
The tabs should link to:
- Tool: "/#/converter/gasPropertyEquivalent"
- Properties: "/#/converter/gasFlowRate"
- Metrics: "/#/converterMetrics"
The dropdown/spinner options for selecting conversion types should link to:
- Flow Rate Conversion: "/#/converter/gasFlowRate"
- Percent Flash Off Constant Enthalpy: "/#/converter/percentFlashOffConstantEnthalpy"
- Grades of Purity: "/#/converter/gradesOfPurity"
- Mean Specific Heats: "/#/converter/meanSpecificHeats"
- Moisture Conversion: "/#/converter/moistureConversion"
$scope.dewPointValue, $scope.ppmValue, $scope.mglValue should be bound to relevant UI inputs, change of any value will trigger $scope.convert.
"Send SMS" will trigger $scope.sendConversionSMS.
"Send Email" will trigger $scope.sendConversionEmail.
The "?" menu will show static content.
1.2.3.12 templates/converter/temperature.html
Wireframe Page: converter.html
AngularJS Controller: TemperatureConversionCtrl
This is the partial view for temperature conversion screen.
The tabs should link to:
- Tool: "/#/converter/gasPropertyEquivalent"
- Properties: "/#/converter/gasFlowRate"
- Metrics: "/#/converterMetrics"
The dropdown/spinner options for selecting conversion types should link to:
- Temperature Conversion: "/#/converter/temperature"
- Conversion Factors: "/#/converter/conversionFactors"
- Decimal Equivalents: "/#/converter/decimalEquivalents"
- Metric Equivalents: "/#/converter/metricEquivalents"
$scope.f, $scope.r, $scope.c, $scope.r should be bound to relevant UI inputs, change of any value will trigger $scope.convert.
"Send SMS" will trigger $scope.sendConversionSMS.
"Send Email" will trigger $scope.sendConversionEmail.
The "?" menu will show static content.
1.2.3.13 templates/converter/conversionFactor.html
Wireframe Page: converter.html
AngularJS Controller: ConversionFactorCtrl
This is the partial view for conversion based on conversion factors.
The tabs should link to:
- Tool: "/#/converter/gasPropertyEquivalent"
- Properties: "/#/converter/gasFlowRate"
- Metrics: "/#/converterMetrics"
The dropdown/spinner options for selecting conversion types should link to:
- Temperature Conversion: "/#/converter/temperature"
- Conversion Factors: "/#/converter/conversionFactors"
- Decimal Equivalents: "/#/converter/decimalEquivalents"
- Metric Equivalents: "/#/converter/metricEquivalents"
$scope.sourceValue, $scope.targetValue, $scope.target, $scope.source should be bound to relevant UI inputs, change of any value will trigger $scope.convert.
$scope.sources will be used to populate the dropdown for selecting the conversion source.
"Send SMS" will trigger $scope.sendConversionSMS.
"Send Email" will trigger $scope.sendConversionEmail.
The "?" menu will show static content.
1.2.3.14 templates/converter/decimalEquivalent.html
Wireframe Page: converter.html
AngularJS Controller: DecimalEquivalentsConversionCtrl
This is the partial view for conversion based on decimal equivalents.
The tabs should link to:
- Tool: "/#/converter/gasPropertyEquivalent"
- Properties: "/#/converter/gasFlowRate"
- Metrics: "/#/converterMetrics"
The dropdown/spinner options for selecting conversion types should link to:
- Temperature Conversion: "/#/converter/temperature"
- Conversion Factors: "/#/converter/conversionFactors"
- Decimal Equivalents: "/#/converter/decimalEquivalents"
- Metric Equivalents: "/#/converter/metricEquivalents"
$scope.fractionalInches, $scope.decimalInches, $scope.millimeters should be bound to relevant UI inputs, change of any value will trigger $scope.convert.
"Send SMS" will trigger $scope.sendConversionSMS.
"Send Email" will trigger $scope.sendConversionEmail.
The "?" menu will show static content.
1.2.3.15 templates/converter/metricEquivalent.html
Wireframe Page: converter.html
AngularJS Controller: MetricEquivalentsConversionCtrl
This is the partial view for conversion based on metric equivalents.
The tabs should link to:
- Tool: "/#/converter/gasPropertyEquivalent"
- Properties: "/#/converter/gasFlowRate"
- Metrics: "/#/converterMetrics"
The dropdown/spinner options for selecting conversion types should link to:
- Temperature Conversion: "/#/converter/temperature"
- Conversion Factors: "/#/converter/conversionFactors"
- Decimal Equivalents: "/#/converter/decimalEquivalents"
- Metric Equivalents: "/#/converter/metricEquivalents"
$scope.sourceValue, $scope.targetValue, $scope.target, $scope.source, $scope.type should be bound to relevant UI inputs, change of any value will trigger $scope.convert.
$scope.sources will be used to populate the dropdown for selecting the conversion source.
$scope.targets will be used to populate the dropdown for selecting the conversion target.
$scope.types will be used to populate the dropdown for selecting the conversion type.
"Send SMS" will trigger $scope.sendConversionSMS.
"Send Email" will trigger $scope.sendConversionEmail.
The "?" menu will show static content.
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