Skip to content

Practice App Frontend Documentation

Alperen edited this page May 10, 2023 · 4 revisions

How will you add your api request page to frontend?

Important! After making your changes, open a pull request without pushing directly and don't forget to add the front-end team as a reviewer.

1) First, you need to write your API post and get functions in the APIFunctions folder. Below you can find an example of the Post and Get functions.

Don forget that you can use the utility fonctions getAPIUrl() and getUserEmail() ! image

2) You need to write your elements correctly in the "apidata.js" file.

  • /api/"your_api_page_url_extension" to do that first add an element to apidata dictionary which in apidata.js.
  • Your element key must be "your_api_page_url_extension".
  • Value of element key is an object which has 4 keys. First key is name, which is the title of your api. There is also postFunction, getFunction and form.
  • Form is an object and there are two elements. First element is buttonText and its value is text on the submit button. Second element is input and its value is also an object.
  • In input objects value, we can add as many input elements as we want to the input object value dictionary from the below input elements.
  • On your request page, you can get 4 types of input from the user.

image

Text Input Number Input Bool Input Select Input
You can get the input that the user writes in the text section. You can get the number that the user writes in the text section. You can get the input from a switch. You can take the selected option as input by providing options to the user.
Text Input has 3 fields. type must be "text", name must be a unique name and label should be the label name. Number Input has 3 fields. type must be "number", name must be a unique name and label should be the label name. Bool Input has 3 fields. type must be "bool", name must be a unique name and label should be the label name. Select Input has 4 fields. type must be "select", name must be a unique name, label should be the label name ,and options is an array whose elements are objects. Option objects have two keys, name and value.

3) Check the below example and its output

image image

Important! After making your changes, open a pull request without pushing directly and don't forget to add the front-end team as a reviewer.



💻 Meeting Notes

Cmpe 352
Cmpe 451

📝 Requirements


🪧 Diagrams


📬 Deliverables

Cmpe 352
Cmpe 451

🎇 General Contributions

Cmpe 352 Contributions

Milestone 1
Final Milestone

Cmpe 451 Contributions

Milestone 1
Milestone 2
Final Milestone

📕 Mock Up


🕵️ User Scenario



📝 RAM


📚 Research


📑 Templates


📱 Practice App

API Documentation for Practice App
Clone this wiki locally