API Development and Documentation Final Project

Trivia App

Udacity is invested in creating bonding experiences for its employees and students. A bunch of team members got the idea to hold trivia on a regular basis and created a webpage to manage the trivia app and play the game. The game will be comprised of six category with each category having some questions, answers and difficulty displayed on cards. All backend code follows PEP8 style guidelines

Prerequisites And Installation

Setting up the Backend

Install Dependencies

1. Python 3.7 - Follow instructions to install the latest version of python for your platform in the python docs

2. Virtual Environment - We recommend working within a virtual environment whenever using Python for projects. This keeps your dependencies for each project separate and organized. Instructions for setting up a virual environment for your platform can be found in the python docs

3. PIP Dependencies - Once your virtual environment is setup and running, install the required dependencies by navigating to the /backend directory and running:

pip install -r requirements.txt

Key Pip Dependencies

• Flask is a lightweight backend microservices framework. Flask is required to handle requests and responses.

• SQLAlchemy is the Python SQL toolkit and ORM we'll use to handle the lightweight SQL database. You'll primarily work in app.pyand can reference models.py.

• Flask-CORS is the extension we'll use to handle cross-origin requests from our frontend server.

Set up the Database

With Postgres running, create a trivia database:

createdb trivia

Populate the database using the trivia.psql file provided. From the backend folder in terminal run:

psql trivia < trivia.psql

Run the Server

From within the ./src directory first ensure you are working using your created virtual environment.

To run the server, execute:

flask run --reload

The --reload flag will detect file changes and restart the server automatically.

Testing

Write at least one test for the success and at least one error behavior of each endpoint using the unittest library.

To deploy the tests, run

dropdb trivia_test
createdb trivia_test
psql trivia_test < trivia.psql
python test_flaskr.py

Setting Up The Frontend

Installing Dependencies

1. Installing Node and NPM This project depends on Nodejs and Node Package Manager (NPM). Before continuing, you must download and install Node (the download includes NPM) from https://nodejs.com/en/download.

2. Installing project dependencies This project uses NPM to manage software dependencies. NPM Relies on the package.json file located in the frontend directory of this repository. After cloning, open your terminal and run:

npm install

tip: npm iis shorthand for `npm install``

Required Tasks

Running Your Frontend in Dev Mode

The frontend app was built using create-react-app. In order to run the app in development mode use npm start. You can change the script in the package.json file.

Open http://localhost:3000 to view it in the browser. The page will reload if you make edits.

npm start

Request Formatting

The frontend should be fairly straightforward and disgestible. You'll primarily work within the components folder in order to understand, and if you so choose edit, the endpoints utilized by the components. While working on your backend request handling and response formatting, you can reference the frontend to view how it parses the responses.

After you complete your endpoints, ensure you return to the frontend to confirm your API handles requests and responses appropriately:

• Endpoints defined as expected by the frontend
• Response body provided as expected by the frontend

Optional: Updating Endpoints and API behavior

Would you rather the API had different behavior - different endpoints, return the response body in a different format? Go for it! Make the updates to your API and the corresponding updates to the frontend so it works with your API seamlessly.

Optional: Styling

In addition, you may want to customize and style the frontend by editing the CSS in the stylesheets folder.

API Reference

Getting Started

-Base URL: At present the app can only be run locally and is not hosted as a base URL. The backend app is hosted at the default, http://127.0.0.1:5000/, which is set as proxy in the front end configuration. -Authentication: This version of the application does not require authentication or API keys.

Error Handling Errors are returned as JSON objectsin the following format:

{ "success": False, "error": 400, "message": "bad_request" }

The API will return four error types when requests fail:

-400:Bad Request -404:Resource Not Found -405:Method Not Allowed -422:Not Processable

Endpoints

GET /categories

-General: -Returns a dictionary containing key-value pairs of category id as the key and category type as the value and a success value

-Sample: curl http://127.0.0.1:5000/categories

{ "categories": { "1": "Science", "2": "Art", "3": "Geography", "4": "History", "5": "Entertainment", "6": "Sports" }, "success": true }

GET /questions

-General: -Returns a list of questions, number of total questions, current category, categories and results are paginated in groups of 10. Include a request argument to choose page number, starting from 1

-Sample: curl http://127.0.0.1:5000/questions

{ "categories": { "1": "Science", "2": "Art", "3": "Geography", "4": "History", "5": "Entertainment", "6": "Sports" }, "current_category": "History", "questions": [ { "answer": "Tom Cruise", "category": 5, "difficulty": 4, "id": 4, "question": "What actor did author Anne Rice first denounce, then praise in the role of her beloved Lestat?" }, { "answer": "Edward Scissorhands", "category": 5, "difficulty": 3, "id": 6, "question": "What was the title of the 1990 fantasy directed by Tim Burton about a young man with multi-bladed appendages?" }, { "answer": "Muhammad Ali", "category": 4, "difficulty": 1, "id": 9, "question": "What boxer's original name is Cassius Clay?" }, { "answer": "Brazil", "category": 6, "difficulty": 3, "id": 10, "question": "Which is the only team to play in every soccer World Cup tournament?" }, { "answer": "Uruguay", "category": 6, "difficulty": 4, "id": 11, "question": "Which country won the first ever soccer World Cup in 1930?" }, { "answer": "George Washington Carver", "category": 4, "difficulty": 2, "id": 12, "question": "Who invented Peanut Butter?" }, { "answer": "Lake Victoria", "category": 3, "difficulty": 2, "id": 13, "question": "What is the largest lake in Africa?" }, { "answer": "Agra", "category": 3, "difficulty": 2, "id": 15, "question": "The Taj Mahal is located in which Indian city?" }, { "answer": "Escher", "category": 2, "difficulty": 1, "id": 16, "question": "Which Dutch graphic artist\u2013initials M C was a creator of optical illusions?" }, { "answer": "Mona Lisa", "category": 2, "difficulty": 3, "id": 17, "question": "La Giaconda is better known as what?" } ], "success": true, "total_questions": 21 }

DELETE /questions/int:question_id

-General: -Deletes a question using a question ID

-Sample: curl -X DELETE http://127.0.0.1:5000/questions/25

{ "categories": { "1": "Science", "2": "Art", "3": "Geography", "4": "History", "5": "Entertainment", "6": "Sports" }, "success": true } POST /questions

-General: -Creates a new question, accepts question, answer text, category and difficulty score arguments to create the new question.

-Sample: curl -X POST -H "Content-Type: application/json" -d '{"question":"Whats black and white and read all over?","answer":"A book","category":"4","difficulty":"4"}' http://127.0.0.1:5000/questions

Authors

Mr Ekuka Stephen

---

Acknowledgements

All thanks to session leaders and students who helped in the stack forum to correct all errors and difficulties.