RESTful client design and implementation - LassiHeikkila/taskey GitHub Wiki
📑 Chapter summary
In this section your group must design, implement and test a client application that uses the RESTful API implemented by you. If you utilize HTML and JavaScript, it is mandatory that the HTML is contained in static files. It means that your server cannot generate HTML dynamically (using PHP or JSP). All modifications made to the webpage must be done in the client side using javascript. Of course, you can use anchors () to load a new URL. Please, consider the Same Origin Policy" because it might cause problems to your client implementation. It is recommend to host the files in a local HTTP server and not directly in your file system. We will give you more instructions in Exercise 4.- Learn how to use APIs
- Implement a client that uses the project API
✔️ Chapter evaluation (max 35 points)
You can get a maximum of 25 points after completing this section for your client. In addition you can score 10 additional points for implementing an auxiliary service.📑 Content that must be included in the section
You must provide a description of the application. You must clarify which are the goals of the application and why a user would like to use this application. You must also state what is the functionality provided by the RESTful API used by this application.taskey-frontend is a web application that can be used to interact with the taskey service.
The application can be used to define machines and tasks, adding users to organization, controlling user roles (i.e. what they are allowed to do), defining machine schedules, and viewing records (outcome of tasks).
📑 Content that must be included in the section
Provide a use case diagram of your application. For each case, specify which is the API resource/s that cover the given functionality
📑 Content that must be included in the section
Draw a diagram of the client layout. Students can use any software they want to do the sketching. For more professional-like design, students can use any wireframing tool available in Internet. Some of them can be found from http://webdesignledger.com/tools/13-super-useful-ui-wireframe-tools. Pencil is free, open source and easy to use. Other options are Visio and Balsamiq (you need a license). You can also create the UI using a paper and a pencil and scan the resulting drawing.
📑 Content that must be included in the section
Draw the screen workflow of your client (which are the possible screens that you can access from one specific screen?)Before logging in, only log-in view is reachable. Log-in view is a simple form with fields for username and password.
Once logged in, every view is reachable directly from every other view, using a navigation bar with "tab-like" buttons.
Logout is always possible by clicking logout button on top right.
💻 TODO: SOFTWARE TO DELIVER IN THIS SECTION
The code repository must contain:- The source code for the client application.
- External libraries. You can also report them in the README.md if the libraries are very big or need to be installed.
- The code for testing the application (if it exists).
- We recommend to include a set of scripts to run your application and tests.
- A README.md file containing:
- Dependencies (external libraries)
- How to setup/install the client
- How to configure and run the client
- How to run the different tests of your client (if you have implemented unit testing)
✏️ Implement your client and include a few screenshots of the final version of the client to show that meets the requirements taskey-frontend repository, deployed at taskey-frontend.herokuapp.com.
I've created a web app that integrates with the API provided by taskey.
The web app is written with React and does queries using the browser Fetch API and utilizing react-query for data caching.
Most components used by the app are from React Bootstrap.
Two additional components are also used:
Some state management (mainly login state) is done using React Redux.
The application is deployed using Heroku at taskey-frontend.herokuapp.com/.
Below are only a select few screenshots.
All screenshots can be viewed here.
(Sign up form not implemented yet)
I've recorded a short demo of the whole UI here.
taskeyd
📑 Content that must be included in the section
You must provide a description of the service. You must clarify which are the goals of the service and how it interacts with your API (and possibly the client). The service can be autonomous entity that does some automated work on the API (data cleaning, calculating composites etc.), or it can be commanded from the client interface to perform heavier tasks that would clog the API server itself (statistics generation, recommendation algorithms etc.).taskeyd is a small daemon that will run on target machines.
It connects to the taskey API, downloads task definitions and it's own schedule, and then just executes those tasks based on the schedule.
When a task is executed, its return code and output is recorded and uploaded back to the taskey API.
Code is available in the main taskey repository, under cmd/taskeyd/.
Demo recorded with Asciinema is available here.
📑 Content that must be included in the section
Provide a diagram that shows how the service communicates with other parts in the ecosystem.This is already visible in the above diagrams where machine is mentioned.
| Task | Student | Estimated time |
|---|---|---|
| Web app implementation | Lassi Heikkilä | 60h |
| Taskeyd implementation (incl. scheduler logic) | Lassi Heikkilä | 20h |
| Documentation | Lassi Heikkilä | 10h |