Add code for REST API frontend

Author: acsany

build-a-rest-api-frontend/README.md

@@ -0,0 +1,26 @@
+# Build a Frontend for a REST API
+
+This repository contains code related to the tutorial on [building a frontend for a REST API](https://realpython.com/build-a-rest-api-frontend/).
+
+Create and activate a [virtual environment](https://realpython.com/python-virtual-environments-a-primer/), then install the necessary dependencies:
+
+```sh
+$ python -m venv venv
+$ source venv/bin/activate
+(venv) $ python -m pip install -r requirements.txt
+```
+
+Then you can navigate into the folder `source_code_final/` and create a new database:
+
+```sh
+(venv) $ cd source_code_final
+(venv) $ python build_databas.py
+```
+
+After building the database, you can start the Flask server:
+
+```sh
+(venv) $ python app.py
+```
+
+When the Flask server is running, you can visit the frontend on `http://localhost:8000` and the API documentation on `http://localhost:8000/api/ui`.

build-a-rest-api-frontend/requirements.txt

@@ -0,0 +1,27 @@
+attrs==22.1.0
+certifi==2022.9.24
+charset-normalizer==2.1.1
+click==8.1.3
+clickclick==20.10.2
+connexion==2.14.1
+Flask==2.2.2
+flask-marshmallow==0.14.0
+Flask-SQLAlchemy==3.0.0
+idna==3.4
+inflection==0.5.1
+itsdangerous==2.1.2
+Jinja2==3.1.2
+jsonschema==4.16.0
+MarkupSafe==2.1.1
+marshmallow==3.18.0
+marshmallow-sqlalchemy==0.28.1
+packaging==21.3
+pyparsing==3.0.9
+pyrsistent==0.18.1
+PyYAML==6.0
+requests==2.28.1
+six==1.16.0
+SQLAlchemy==1.4.41
+swagger-ui-bundle==0.0.9
+urllib3==1.26.12
+Werkzeug==2.2.2

build-a-rest-api-frontend/source_code_final/app.py

@@ -0,0 +1,16 @@
+from flask import render_template
+import config
+from models import Person
+
+app = config.connex_app
+app.add_api("swagger.yml")
+
+
+@app.route("/")
+def home():
+    people = Person.query.all()
+    return render_template("home.html", people=people)
+
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=8000, debug=True)

build-a-rest-api-frontend/source_code_final/build_database.py

@@ -0,0 +1,56 @@
+from datetime import datetime
+from config import app, db
+from models import Person, Note
+
+PEOPLE_NOTES = [
+    {
+        "lname": "Fairy",
+        "fname": "Sugar",
+        "notes": [
+            ("Cool, a mini-blogging application!", "2022-01-06 22:17:54"),
+            ("This could be useful", "2022-01-08 22:17:54"),
+            ("Well, sort of useful", "2022-03-06 22:17:54"),
+        ],
+    },
+    {
+        "lname": "Ruprecht",
+        "fname": "Knecht",
+        "notes": [
+            (
+                "I'm going to make really profound observations",
+                "2022-01-07 22:17:54",
+            ),
+            (
+                "Maybe they'll be more obvious than I thought",
+                "2022-02-06 22:17:54",
+            ),
+        ],
+    },
+    {
+        "lname": "Bunny",
+        "fname": "Easter",
+        "notes": [
+            ("Has anyone seen my Easter eggs?", "2022-01-07 22:47:54"),
+            ("I'm really late delivering these!", "2022-04-06 22:17:54"),
+        ],
+    },
+]
+
+with app.app_context():
+    db.drop_all()
+    db.create_all()
+    for data in PEOPLE_NOTES:
+        new_person = Person(lname=data.get("lname"), fname=data.get("fname"))
+        for note in data.get("notes"):
+            content, timestamp = note
+            new_person.notes.append(
+                Note(
+                    content=content,
+                    timestamp=datetime.strptime(
+                        timestamp, "%Y-%m-%d %H:%M:%S"
+                    ),
+                )
+            )
+        db.session.add(new_person)
+
+    db.session.commit()

build-a-rest-api-frontend/source_code_final/config.py

@@ -0,0 +1,16 @@
+import os
+import connexion
+from flask_sqlalchemy import SQLAlchemy
+from flask_marshmallow import Marshmallow
+
+basedir = os.path.abspath(os.path.dirname(__file__))
+connex_app = connexion.App(__name__, specification_dir=basedir)
+
+app = connex_app.app
+app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:////" + os.path.join(
+    basedir, "people.db"
+)
+app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
+
+db = SQLAlchemy(app)
+ma = Marshmallow(app)

build-a-rest-api-frontend/source_code_final/models.py

@@ -0,0 +1,48 @@
+from datetime import datetime
+from marshmallow_sqlalchemy import fields
+from config import db, ma
+
+
+class Note(db.Model):
+    __tablename__ = "note"
+    id = db.Column(db.Integer, primary_key=True)
+    person_id = db.Column(db.Integer, db.ForeignKey("person.id"))
+    content = db.Column(db.String, nullable=False)
+    timestamp = db.Column(
+        db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow
+    )
+
+
+class NoteSchema(ma.SQLAlchemyAutoSchema):
+    class Meta:
+        model = Note
+        load_instance = True
+        sqla_session = db.session
+        include_fk = True
+
+
+class Person(db.Model):
+    __tablename__ = "person"
+    id = db.Column(db.Integer, primary_key=True)
+    lname = db.Column(db.String(32))
+    fname = db.Column(db.String(32))
+    timestamp = db.Column(
+        db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow
+    )
+    notes = db.relationship(
+        "Note",
+        backref="person",
+        cascade="all, delete, delete-orphan",
+        single_parent=True,
+        order_by="desc(Note.timestamp)",
+    )
+
+
+class PersonSchema(ma.SQLAlchemyAutoSchema):
+    class Meta:
+        model = Person
+        load_instance = True
+        sqla_session = db.session
+        include_relationships = True
+
+    notes = fields.Nested(NoteSchema, many=True)

build-a-rest-api-frontend/source_code_final/notes.py

@@ -0,0 +1,57 @@
+from flask import make_response, abort
+
+from config import db
+from models import (
+    Note,
+    NoteSchema,
+    Person,
+)
+
+
+def read_one(note_id):
+    note = Note.query.get(note_id)
+
+    if note is not None:
+        note_schema = NoteSchema()
+        return note_schema.dump(note)
+    else:
+        abort(404, f"Note with ID {note_id} not found")
+
+
+def update(note_id, note):
+    existing_note = Note.query.get(note_id)
+
+    if existing_note:
+        schema = NoteSchema()
+        update_note = schema.load(note, session=db.session)
+        existing_note.content = update_note.content
+        db.session.merge(existing_note)
+        db.session.commit()
+        return schema.dump(existing_note), 201
+    else:
+        abort(404, f"Note with ID {note_id} not found")
+
+
+def delete(note_id):
+    existing_note = Note.query.get(note_id)
+
+    if existing_note:
+        db.session.delete(existing_note)
+        db.session.commit()
+        return make_response(f"{note_id} successfully deleted", 200)
+    else:
+        abort(404, f"Note with ID {note_id} not found")
+
+
+def create(note):
+    person_id = note.get("person_id")
+    person = Person.query.get(person_id)
+
+    if person:
+        schema = NoteSchema()
+        new_note = schema.load(note, session=db.session)
+        person.notes.append(new_note)
+        db.session.commit()
+        return schema.dump(new_note), 201
+    else:
+        abort(404, f"Person not found for ID: {person_id}")

build-a-rest-api-frontend/source_code_final/people.py

@@ -0,0 +1,56 @@
+from flask import make_response, abort
+
+from config import db
+from models import (
+    Person,
+    PersonSchema,
+)
+
+
+def read_all():
+    people = Person.query.all()
+    person_schema = PersonSchema(many=True)
+    return person_schema.dump(people)
+
+
+def create(person):
+    schema = PersonSchema()
+    new_person = schema.load(person, session=db.session)
+    db.session.add(new_person)
+    db.session.commit()
+    return schema.dump(new_person), 201
+
+
+def read_one(person_id):
+    person = Person.query.get(person_id)
+
+    if person is not None:
+        person_schema = PersonSchema()
+        return person_schema.dump(person)
+    else:
+        abort(404, f"Person with ID {person_id} not found")
+
+
+def update(person_id, person):
+    existing_person = Person.query.get(person_id)
+
+    if existing_person:
+        schema = PersonSchema()
+        update_person = schema.load(person, session=db.session)
+        existing_person.fname = update_person.fname
+        db.session.merge(existing_person)
+        db.session.commit()
+        return schema.dump(existing_person), 201
+    else:
+        abort(404, f"Person with ID {person_id} not found")
+
+
+def delete(person_id):
+    existing_person = Person.query.get(person_id)
+
+    if existing_person:
+        db.session.delete(existing_person)
+        db.session.commit()
+        return make_response(f"{person_id} successfully deleted", 200)
+    else:
+        abort(404, f"Person with ID {person_id} not found")

build-a-rest-api-frontend/source_code_final/static/css/notes.css

@@ -0,0 +1,32 @@
+.note-control-card {
+    text-align: right;
+}
+
+.note-control {
+    text-align: left;
+}
+
+.note-create-card {
+    background-color: var(--secondary-color);
+    padding: 1em;
+}
+
+.note-create-card input,
+.note-control-card input {
+    width: 100%;
+}
+
+.note-list {
+    list-style: none;
+    padding-left: 0;
+}
+
+.note-card {
+    background-color: blanchedalmond;
+    padding: 1em;
+    margin: 0.6em 0;
+}
+
+.note-content {
+    padding: 0.3em 0;
+}

build-a-rest-api-frontend/source_code_final/static/css/people.css

@@ -0,0 +1,32 @@
+.person-control-card {
+    text-align: right;
+}
+
+.person-control {
+    text-align: left;
+}
+
+.person-create-card {
+    margin-right: 1em;
+}
+
+.person-create-card,
+.person-control-card.editing {
+    background-color: var(--secondary-color);
+    padding: 1em;
+}
+
+.person-create-card input,
+.person-control-card input {
+    width: 100%;
+}
+
+.people-list {
+    margin-bottom: 1.3em;
+}
+
+.person-card {
+    border-left: 0.3em solid var(--main-color);
+    padding: 0.3em 1em;
+    margin: 1em 0;
+}