‼️  This chapter should be completed by Deadline 5 (see course information at Lovelace)

---

📑  Chapter summary

In this section your group must design, implement and test a client application that uses the RESTful API implemented by you. The application MUST provide a GUI for a user to control it. If you want to implement a machine-to-machine application please contact the assistants first. 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.

It is not mandatory to write code for test the application. Client testing would be considered extra work.

CHAPTER GOALS

• Learn how to use APIs
• Implement a client that uses the project API

---

---

✔️     Chapter evaluation (max 15 points)

You can get a maximum of 15 points after completing this section. More detailed evaluation is provided after each heading.

---

---

📑  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.

---

Our client is a simple browser client that allows users to easilly submit changes to our database trough GUI. Users can use all resources except open paymentplan collection. You can create and delete paymentplans and append them to models. Our client also allows you to toggle paymentplans open-field on and off. You can submit and browse new models easily to the database.

Client uses hypermedia links to communicate with the database.

---

✔️     Evaluation criteria(max 1.0 points)

You can get a maximum of 1.0 points in this section:

• The clients purpose is clearly described: 0.5
• Description of the API client not just a GUI: 0.5

---

---

📑  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

---

✔️     Evaluation criteria(max 2.0 points)

You can get a maximum of 2.0 points in this section:

• Diagram below presents the different use cases and they are correctly explained: 1.25
• Description + diagram shows clearly what functionality of the API the client uses: 0.75

---

Our Client uses Model Collection and Paymentplan Collection for browsing and adding information. For PUT and DELETE requests individual item resources are used. Model Item uses POST method to append paymentplan to item. Paymentplan Item uses DELETE to delete paymentplan and PUT to modify payments "open"-value.

---

📑  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.

---

---

✔️     Evaluation criteria(max 1.5 points)

You can get a maximum of 1.5 points in this section:

• Client layout present: 0.5
• UI is stetically pleasant: 1.0

---

The top three fields are from the Paymentplan Collection resource and client will automatically load three paymentplans as document is loaded. In our client there is an arrow underneath that allows you to browse rest of the paymentplans. Clicking on one of these field will send GET request using that plans hypermedia and load response to the Paymentplan Item field. This is from the Paymentplan Item resource and is used for editing and browsing. In the buttoncont - field under it there are two buttons, one for deleting and one that depends on the state of Paymentplans open-field. If field is open, the button will say close. If displayed paymentplan is close, it will say "open" and clicking on it will send PUT request to the Paymentplan Item resource thus toggling it open.
Under bottom controls there is a small box called payment info. This is to display various information about the payment that is displayed.

Three model fields are from the Model Collection resource and clicking on one will send get request to individual item using its hypermedia link. NOTE that this feature is ignored if you already have displayed paymentplan with model associated to it. You will have to find paymentplan that has no appended models to it in order to display Model Item.

If you have displayed a paymentplan with no associated model then Model Item -field will display "No model". Then you can browse models to be appended by clicking one of the model slots. When you find what you are looking for you can press the ADD -button in between item containers to send POST request to the models Model Item resource to append new payment to it. After you reload the page you should see your paymentplan now have a model associated with it.

Those two post fields in the bottom are fairly straightforward. Interestrate field is optional.

---

📑  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?)

---

---

✔️     Evaluation criteria(max 1.0 points)

You can get a maximum of 1.0 points in this section:

• Workflow diagram available. Navigation is coherent 1.0

---

✏️ Add your diagrams here
Red markings are not part of the client. I added them to make it easier for readers to know what I am talking about.

This is the main page view. I have clicked on the next-arrow to browse paymentplans until I found one with no model attached. Red numbers 1-3 represent responses from Paymentplan Collection and box underneath them on the left with number 4 represents Paymentplan Item resource response. On the right of this is another box with "No model" text on it, because current paymentplan does not have model associated with it. Lets change this.

At the bottom of the page we have two Post fields(numbers one and two). Here I have filled these fields and pressed Post. You notice the text that says "product added"(number 3). This is clients way to signal that product has been added to the database.

Here I have pressed "next" button until my latest addition was found from collection resource. Since adding to collection appends element to the last position, I had to scroll to the end of the list. However my new model is already shown in the model collection(bottom right, marked with number 4). I have pressed my paymentplan (number 1) and it has given me information in the item box below it (number 2). How ever my paymentplan has text "no model" to it since I havent appended my new model to my paymentplan.

I clicked on the bottom right to select my new model(3) to model item field(2). Then I clicked on the "add"-button (4). My client notifies that Plans are now connected in the info box below paymentplan item(5). Next time you click on the paymentplan collection resource it will automatically display my new model in the model item box.

---

💻     TODO: SOFTWARE TO DELIVER IN THIS SECTION

The code repository must contain:

1. The source code for the client application. 
2. External libraries. You can also report them in the README.md if the libraries are very big or need to be installed.
3. The code for testing the application (if it exists).
4. We recommend to include a set of scripts to run your application and tests.
5. 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)

NOTE: Your code MUST be clearly documented. For each public method/function you must provide: a short description of the method, input parameters, output parameters, exceptions (when the application can fail and how to handle such fail). Check Exercise 4 for examples on how to document the code. addition, should be clear which is the code you have implemented yourself and which is the code that you have borrowed from other sources.

---

---

✔️     Evaluation criteria(max 9.5 points)

In this section you can get a maximum of 9.5 points.

• Instructions to set up the client and run the tests are provided in the README.md file: 0.5
  • this means there should be no undocumented extra steps in running the code/tests!
• The code has clear structure and naming for variables and methods: 1.0
• You have clearly marked which parts of the code are your own work and which is borrowed code: 0.5
• Client is usable and navigation is coherent (no broken links): 1.0
• Demonstrate through a presentation or screenshots that your client fulfills the minimum requirements: 1.0
• Client works as expected: 2.0
  • We do not find errors while using the application
• The client uses a different API in addition to using your own API (i.e. finds additional information from somewhere else): 1.5
  • For full points the client should utilize at least two different methods from the uniform interfaces OR utilize at least 4 differents API calls.
  • For full points the functionality provided by the external API should be integrated in the client functionality and not as an incosistent addition.
• The client is a true hypermedia client (if you are not using an hypermedia API you won't get these points): 2.0
  • this means that the client uses the hypermedia links to find URLs, uses forms from the hypermedia to form its requests, follows correctly link relations, workflow is mainly in the server, not the client... etc. If any of these aspects are not considered cannot get full points in this section.
  • The ideal client is resistant to changes in the API because it only relies on information it gets from the API in runtime

---

✏️ Implement your client and include a few screenshots of the final version of the client to show that meets the requirements

Task	Student	Estimated time
Client	Pyry Saarinen	35h