Challenge Overview
Project Overview
We are building a web based application that allows Construction Project Managers to track tasks and the number of hours spent on each task, their costs, materials and equipment.
Currently, they are using a legacy Powerbuilder application along with emails and spreadsheets to track their progress. With this project, we are seeking to modernize this by building a HTML5 based web application.
Challenge Overview
We have a UI Prototype for the front end of the challenge. In addition to the front end, we have a back end written in Node.js.
This challenge deals with updating the UI Prototype to use AngularJS and connect the prototype with Node.js backend.
This is the second challenge in a series of WCS challenges. The first challenge can be found here. This challenge deals with a new set of pages that need to be updated using Angularjs.
Message for participants
Note that the requirements are as detailed as possible. However, the functions that are required themselves are minimal.
We already have the submission from the first challenge - this contains directives and code common for the application which reduces your effort for the current challenge drastically.
Although we are using SQL Server for the backend, the same is easy to set up and configure by following the deployment guide (let us know if you run into any trouble). There is already code to carry out CRUD operations on the database.
Thus, even if you know Angularjs and Nodejs, you should be comfortable working on this challenge. Don't be deterred by the length of the requirements. You can reuse much of the existing code and need not have to create all of it from scratch.
Challenge Details
After registration, you will be provided with the UI Prototype files and the Node.js backend application. This will be available in the challenge forums.
Install the backend application using the deployment guide. Carry out this step carefully and verify that you have installed it correctly - see the verification section in the deployment guide.
From the first challenge, we already have completed converting some pages to use AngularJS. You should be able to see the same in the application files.
For this challenge, we outline the page(s) of the UI Prototype that you need to be converted to AngularJS. You may have to create any additional routes or enhance existing ones in the Node.js server to provide the data for this application.
Use the code of the first challenge and enhance it with the pages mentioned.
You will notice that there are two variations of each page.
One for "Admin" users and one for "Superintendent" users. These are the only two user roles for this application.
Depending on the role of the user logged in, show the appropriate page.
You will get the list of pages and changes to make in the challenge forum (shown only after registration).
Offline Web Application
Certain pages are available in the offline mode. This means that once a user logs in, the user is able to navigate through these pages without the need to have an internet connection. Update the Node.js server to provide a manifest file of the available offline web pages.
Other than the schedule-list-current-superintendent.html / schedule-list-current-admin.html pages, none of the pages mentioned in this challenge should be available in offline mode.
If the user tries to create / edit a schedule while offline, show an error message about the same.
Note that the code from the first challenge already has this feature included. Don't make any changes here. Just reuse it.
Backend Node.js application
Currently the Node.js application has routes to access the database and also provides both HTTP and HTTPS server. It currently serves the pages of the first front end challenge.
There are two types of routes - one for the database and one for the web application. However, the web application routes do not follow the DRY principle.
Hence, create new routes in the config/routes.js and create appropriate controllers, if needed. See how the database table CRUD routes are configured to get examples.
DO NOT use the generic CRUD routes. Instead make use of the routes dedicated to that table. If one does not exist, create it.
Materials Provided
- UI Prototype
- Node.js Application
- Winning submission of the First Challenge in the series.
- SQL Server Database Backup (Import this into your database)
- List of pages of the UI Prototype that are in scope for this challenge
Points to Note
Use the latest Angularjs version - version 1.3. You have to update the application to use the latest version.
Use AngularJS partials. Do no use Angular UI Bootstrap. Angular UI Router is allowed. Follow the DRY principle.
Use the new operator :: of Angularjs wherever appropriate. Reduce the number of watchers created through this operator. Your submission shoud not have performance issues.
Access to routes is restricted based on user role and authentication. Use the appropriate middlewares to carry out the same. See how the existing code handles this.
Follow the existing application's coding style.
If we have requested to "hide" a feature keep the corresponding HTML tags of the prototype but do not show it in the UI - hide the elements through CSS.
In the above pages, any links that exist that navigate to other pages not part of this challenge - make them dummy links.
Although the prototype contains two variations of a page for each the two user roles, you need to have only one AngularJS partial for that page. Depending on the user logged in, show / hide the UI elements. See how the minimalist web application does this.
Create RESTful routes for the actions, if does not exist. For example, in the User Interface, if we delete a row, it should actually delete the row from the database. Although not explicitly mentioned for each pages, it is understood that you need to make calls to the server to carry the actions out.
Finally note that you need to use the winning submission of the First Challenge and enhance it with the above pages. The submission already includes directives for common elements./ Re-use them and don't attempt to create them from scratch.
Final Submission Guidelines
Ensure that you have updated the Deployment guide, if required.
Compress your application into a .zip file and submit it through the Submit and Review utility.
Your submission must include both the Updated AngularJS prototype and the updated backend.