Key Information

Register
Submit
The challenge is finished.

Challenge Overview

Challenge Overview

This is part of a series of F2F challenges to connect frontend with backend REST API.

The requirements to address in the challenge :

  • Control Panel Page

  • Home/Rating pages

  • Solar PV pages flow.

Challenge Requirements

We will use following technology stack in this challenge :

  • PHP

  • Yii Framework version 2.0

  • MySQL

  • Ubuntu OS

  • AngularJS

You are provided with UI prototype and Yii web application (including REST API) and you will implement the outlined below.

You can use postman included in the existing solution to make API calls to test API requests and responses.

Required Pages and Backend Requirements

Lookup Requirements

  • Create SQL scripts to feed lookup tables with data.

  • For pages where lookup is needed, you can find list of lookups API calls in the postman file :

    • [GET][{{BASE_URL}}/v1/lookup/{type-name}]

Control Panel

  • HTML Page

  • The flow to sub-pages is clear in this page. Ask in forums if there is anything not clear.

New Home/Rating

  • HTML Page

  • “Begin Rating” button will take user to “Rating Categories Page”

  • The page will also be used to edit existing Home/Rating info.

    • Title should be updated to be “Update Rating”

  • API :

    • Pick lists should be populated from lookup API.

    • To create new home use [Post] [{{BASE_URL}}/v1/homes]

    • To update existing home [PUT] [{{BASE_URL}}/v1/homes/{home-id}]

    • To retrieve home information [GET] [{{BASE_URL}}/v1/homes/{home-id}]

Existing Homes/Ratings

  • HTML Page

  • Home column should link to “Edit Rating” page.

  • “Options” column links are out of scope of this challenge.

  • We have three ratings for a home :

    • Rated : nothing to do in this case.

    • In-Progress : clicking on the link will take user to “Rating Categories Page”.

    • Does not Qualify : clicking on the link will take user to Existing Home Audit Order page.

  • API :

    • API to retrieve list of homes of the logged in user [GET][{{BASE_URL}}/v1/homes]

Order Audit Navigation Page

  • HTML Page

  • “Create New Home Audit Profile” takes user to a page similar to slide 9 (See New Home Audit Page).

  • “Create Existing Home Audit Profile” takes user to “Existing Homes/Ratings” page.

Existing Home Audit Order Page

  • The home id will be passed to the page.

  • This page will be similar to  this page :

    • Table will match the one in slide 6.

    • The checkboxes beneath the table should be part of the table (each checkbox should have it’s own row)

    • It should have button “Schedule Audit” at top right corner.

    • “Schedule Audit” button will take user to “Thank you” page with content matching slide 96 with two buttons :

      • “My Homes” will take user to “My Homes/Ratings” page.

      • “Home Page” will take user to home page.\

  • API :

    • Pick lists should be populated from lookup API.

    • To create new entity use [Post] [{{BASE_URL}}/v1/audits]

New Home Audit Page

  • This is same as Existing home audit page.

  • This page is similar to this page :

    • Table will match table in slide 9

    • The checkboxes beneath the table should be part of the table (each checkbox should have it’s own row)

    • It should have button “Schedule Audit” at top right corner.

    • “Schedule Audit” button will take user to “Thank you” page with content matching slide 96 with two buttons :

      • “My Homes” will take user to “My Homes/Ratings” page.

      • “Home Page” will take user to home page.

  • API :

    • Pick lists should be populated from lookup API.

    • To create new entity use [Post] [{{BASE_URL}}/v1/audits]

    • To update existing entity [PUT] [{{BASE_URL}}/v1/audits/{audit-id}]

    • To retrieve entity information [GET] [{{BASE_URL}}/v1/audits/{audit-id}]

Rating Categories Page

  • HTML Page

  • The images in the page are placeholders.

  • The ticker in the page means the category data has been successfully collected.

  • “Submit Audit” button should be disabled by default. It will be enabled (clickable) when at least one category data is collected.

  • The “Submit Audit” will take user to “Thank You” page with content as in Slide 98 with two buttons :

    • “My Homes” will take user to “My Homes/Ratings” page.

    • “Home Page” will take user to home page.

  • API :

    • Retrieve the associated home entities products [GET] [{{BASE_URL}}/v1/homes/{home-id}/products/{type}]

    • Display ticker for the category that has entity assocaited with the home.

Solar PV Listing Page

  • This page will have the following UI components :

    • A “Create Solar PV” button will take user to “Create Solar PV” page (see next page)

    • A table as in this page with following columns :

      • Solar type column :

        • If lease, it should append the lease type to the cell content (i.e. Lease - PrePaid Lease)

      • Columns for extra information as in slide  144.

      • Update date column

  • API :

    • Use [GET] [{{BASE_URL}}/v1/homes/{id}/products/solarpv] to get list of solar pvs.

Create Solar PV for Rating Flow

  • You need to refer to the powerpoint file to understand the flow, we have four flows to create Solar PV product (numbers represents the slide number from PPT file):

    • Flow 1 : (own) 132 → 137 → 138 → 139 → 141 → 142, 143 → 145 (optional) → 144

    • Flow 2: (lease - Fixed Monthly Payment) 132 → 133 → 134 → 138 → 139 → 141 → 142, 143 → 145 (optional) → 144

    • Flow 3 : (lease - Fixed Utilities Prices) 132 → 133 → 135 → 138 → 139 → 141 → 142, 143 → 145 (optional) → 144

    • Flow 4 : (lease - Pre-Paid Lease) 132 → 133 → 136 → 138 → 139 → 141 → 142, 143 → 145 (optional) → 144

  • The flows above share same pages so you need to reuse these partials (in angular) and minimize number of partial pages needed.

  • We don’t have UI prototype pages for each flow, you have built generic pages and you will reuse UI prototype pages, change it’s content to address the 4 flows.

  • Below are list of pages to be reused from UI prototype to address the flows above (number represents the PPT slide) :

    • 132 : HTML Page

    • 133 : It will be same page as this page with following changes :

      • The description will be as in slide the slide.

      • The radio button group will contain 3 radio buttons, each radio button represents a button in the slide.

      • The descriptions beside each button in the slide will be in the help icon popup.

    • 134 : HTML Page

    • 135 : It will be same page as this page with following changes :

      • The fields will match the fields in the slide.

      • “Fixed Rate” and “Contracted Increase Percentage” fields will have same icon as “Monthly Payment Amount” field but the placeholder will match the one in the slider.

    • 136 :  It will be same page as this page with fields labels will match the ones in the slide.

    • 137 : It will be same page as this page with fields matching the ones in the slide.

      • “Expected Recs over next 15 years” text field should match the one in this page

    • 138 : HTML Page

    • 139 : HTML Page

      • The page should have description above the fields. the description should be taken from slide 140

    • 141, 142 and 143 are grouped into single HTML Page.

    • 144 :

      • This page should reuse table from this page

      • It should have “Advanced Input” button to take user to slide 145 (page).

    • 145 : HTML Page

  • The user can repeat the flow to update the entity. It should show the user the previous input/selected values.

  • API :

    • Pick lists should be populated from lookup API.

    • To create new entity use [Post] [{{BASE_URL}}/v1/homes/{id}/products/solarpv]

    • To update existing entity [PUT] [{{BASE_URL}}/v1/homes/{id}/products/solarpv]

    • To retrieve entity information [GET] [{{BASE_URL}}/v1/homes/{id}/products/solarpv]

General Notes

  • UI Prototype pages names might be confusing, ignore it and follow requirements outlined above.

  • The frontend pages should communicate with Yii REST API via angularjs.

  • Use Angularjs for navigation between pages.

  • The login (Http Basic Authentication) will be used to protect the REST API. User must be logged in to make any call to the API, so update REST API to have a base controller to enforce authentication in all API calls.

  • Follow Yii 2.0 for best practices for project folder structure.

  • Update readme/deployment guide to include steps to deploy the application along with REST API, with verification steps.

    • Provide verification that API is now need valid session to consume it.

  • All code must be documented.

Deliverable

  • Source code that address the requirement.

  • Detailed deployment guide with verification steps.

  • Winner is responsible on setting up the solution on AWS VM.



Final Submission Guidelines

.

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30049547