• Build RESTful APIs that are easy to navigate and use in applications.
• Develop a Flask API with successful frontend connections via fetch().
• Integrate create and retrieve routes with the associated actions to return the appropriate JSON data.

• Representational State Transfer (REST): a convention for developing applications that use HTTP in a consistent, human-readable, machine-readable way.
• Application Programming Interface (API): a software application that allows two or more software applications to communicate with one another. Can be standalone or incorporated into a larger product.
• HTTP Request Method: assets of HTTP requests that tell the server which actions the client is attempting to perform on the located resource.
• GET: the most common HTTP request method. Signifies that the client is attempting to view the located resource.
• POST: the second most common HTTP request method. Signifies that the client is attempting to submit a form to create a new resource.
• PATCH: an HTTP request method that signifies that the client is attempting to update a resource with new information.
• PUT: an HTTP request method that signifies that the client is attempting to update a resource with new information contained in a complete record.
• DELETE: an HTTP request method that signifies that the client is attempting to delete a resource.

In this lab, we'll be building an API for a plant store! In addition to our usual Flask code, there is code for a React frontend application in the client directory.

The code for the frontend application is done. Your job is to create the Flask API so that the fetch requests on the frontend work successfully.

The React application is in the client directory. To set it up, from the root directory, run:

$ npm install --prefix client

Using --prefix client will run the npm command within the client directory.

To set up your backend, run:

$ pipenv install; pipenv shell

Then navigate to the server/ directory to run your Python code.

To see how the React application and Flask API are interacting, you can run the Flask application in one terminal by running:

$ flask run

Then, open another terminal and run React:

$ npm start --prefix client

Each application will run on its own port on localhost:

• React: http://localhost:4000
• Flask: http://localhost:3000

Take a look through the components in the client/src/components/ folder to get a feel for what our app does. Note that the fetch requests in the frontend (in NewPlantForm and PlantPage) don't include the backend domain:

fetch("/plants");
// instead of fetch("http://localhost:5000/plants")

This is because we are proxying these requests to our Flask API.

Create a Plant model that matches this specification:

After creating the Plant model, you can run python seed.py to run your migration and add some sample data to your database.

Your API should have the following routes as well as the associated controller actions that return the appropriate JSON data:

GET /plants


Response Body
-------
[
  {
    "id": 1,
    "name": "Aloe",
    "image": "./images/aloe.jpg",
    "price": 11.50
  },
  {
    "id": 2,
    "name": "ZZ Plant",
    "image": "./images/zz-plant.jpg",
    "price": 25.98
  }
]

GET /plants/:id


Response Body
------
{
  "id": 1,
  "name": "Aloe",
  "image": "./images/aloe.jpg",
  "price": 11.50
}

In your controller's create action, use strong params when creating the new Plant object.

POST /plants


Headers
-------
Content-Type: application/json


Request Body
------
{
  "name": "Aloe",
  "image": "./images/aloe.jpg",
  "price": 11.50
}


Response Body
-------
{
  "id": 1,
  "name": "Aloe",
  "image": "./images/aloe.jpg",
  "price": 11.50
}

Note 1: When adding image URLs, you will need to use absolute URLs from the internet; we have only uploaded the two images to this project directory.

Note 2: Due to the structure of the client, you will need to use the get_json() method to retrieve data for the create route. When you write your own clients, you can decide whether data is passed to the backend via forms or raw JSON.

Once all the tests are passing, start up the React app and explore the functionality to see how the routes you created are being used.

• What RESTful Actually Means
• Flask-RESTful
• HTTP request methods - Mozilla
• Proxying API Requests in Development - React