ECE 448, Spring 2021
Project 6: Web Frontend for IoT Hub
Due: 05/09 (Sun.) by the end of the day Chicago Time
In this project, we are going to build the web frontend for our IoT hub to utilize the
RESTful services provided by the server backend.
You should be able to find the user stories describing the requirements in the next
section. While we are going to discuss possible class design and implementations in the
lectures, you are free to choose designs and implementaions you are comfortable with.
For this project, you are required to design testing procedures, one for each user
story, to test the application. Since our user stories are mostly based on UI interactions,
the procedures will be like instructions for users to use the application. An example
procedure is provided for one of the user stories.
Once the testing procedures are documented, you are required to demonstrate that
the web application actually works as expected. If possible, please use a screen capture
software like ShareX1 to record your operations together with voice explanations. Oth-
erwise, please include screenshots in your project report. The details should be found
in Section 4 Deliverables and Grading.
While in general you don’t need to modify the code for the server backend, you may
find bugs in it when debugging your web frontend. Please correct those bugs as needed.
2 User Stories
2.1 Plugs and Plug States
As an end-user, I want to see available plugs and their states, so that I can know what
plugs are there and whether they are on or off.
2.2 Control a Single Plug
As an end-user, I want to click a button on the web page to switch on/off or toggle a
plug of my choice, so that I can easily control it.
ECE 448 – Project 6, Spring 2021 2
2.3 Groups and Plugs
As an end-user, I want to see available groups, as well as plugs belong to a group of
my choice and their states, so that I can know what groups have been defined, and the
state of a group.
2.4 Group Management
As an end-user, I want to add groups and modify their members on the web page, so
that I can easily manage them.
2.5 Control Plugs in a Group
As an end-user, I want to click a button on a web page to switch on/off or toggle all
plugs belong to a group of my choice, so that I can easily control them together.
2.6 Multi-User Synchronization
As an end-user, I want to see the state update for plugs in all places if someone else
switch on/off or toggle plugs from another browser, so that multiple users can use the
web application together.
3 Testing Procedures
Here is an exmaple testing procedure for the user story “Plugs and Plug States”. As
you see, the procedure is organized as an ordered list of items. For each item, we first
state the operation you will perform, and then state the expected output on the UI.
You may use it as it is, or modify it, or design your own as needed.
1. Open a browser and access the root page. The name of all available plugs will
show on the left part of the page.
2. Click a plug name on the left. Its state should show on the right part of the page.
3. Click a different plug name on the left. The right part of the page should show
the state of that plug now.
4 Deliverables and Grading
Please push your code to the Git repository before the deadline. Although there is no
auto-grading for Project 6, our TA will check your code to evaluate its quality and will
run your code to verify your demonstrations.
ECE 448 – Project 6, Spring 2021 3
Please submit a project report to Blackboard before the deadline. This report
should include six testing procedures, one each for the six user stories. You may copy
my exmaple procedure for the first user story into the report if you choose to use it.
Please submit the demonstration video to Blackboard together with the report. If you
choose to not use the video but to use screenshots, please include those screenshots in
your project report and explain how they follow the testing procedures.
The 100 points project grade will be evaluated using the following criteria:
• Source code quality (40 points):
– Properly formatted source code (10 points): with indentation and reasonable
– Reasonable implementation (10 points): meaningful names and purposes for
– Reasonable user interface design (10 points): proper use of HTML/CSS
– Reasonable RESTful communications with backend (10 points).
• Testing procedures (30 points): 5 point for each testing procedure that correctly
addresses one user story.
• Demonstrations (30 points): 5 point for each successful demonstration of one
testing procedure that can be verified by the TA using the code you have pushed
to the Git repository.