Madison Nelson

I am working through the Python + JavaScript – Full Stack App Tutorial.

My first hurdle, instantly, is the fact I’m working on a school computer. Getting and downloading node.js has to be done on the Virtual Machine. After searching a bit, I followed a tutorial How To Install Node.js on Ubuntu 22.04 LTS (Linux) not too far in. Now I FINALLY have Node.js installed.

Starting off, I create my folders, and then I, painstakingly, type in the terminal code.
( npm create vite@latest frontend — –template react)
I follow the prompts up to the second one, not doing the last one just yet.

Generally, we start with the backend/API first when building our program. It structures our application and the operations we can do. We’re going to be create a CRUD backend. CRUD stands for Create, Read, Update, Delete. These are the main operations we will be using. These options will help our application do just that- Create, Show, Update and Remove contacts, in simpler terms. These operations should be available through any other application, frontend or even some backends, to call on it, but we’re using react. It’s more of a set up program.

SQL Alchemy helps with something known as ORM, Object Relational Mapping. This will help act as our database that we can navigate through and change as an object.

We build the API first. CORS stands for Cross Origin Request. We need this so we do not get a CORS error when trying to connect our frontend with our backend.

app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///mydatabase.db"

This will create our database and say where to put it on our device so we can access it.

db = SQLAlchemy(app)

This will allow us to reference and access the database we created and specified in the previous line of code, so we can use our operations on it.

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///mydatabase.db"
app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False (temp for dev purposes)

db = SQLAlchemy(app)

With this, we have finished the config for now, and it is set up for our next step.

Next, we start working on models.py. Building up these two files, models.py and config.py will help when we go to set up our main code, and it will be out of the way.

models.py will set up the basic structure for our database to store our data properly, so we can access it later in a neat way. Once we know the data we’re going to need, we can create views for that data to create, store and modify it, which is the API’s main job.

First, we bring over our database, so we can access SQL Alchemy with app in it.

from config import db

Next, we do:

Class Contact(db.Model):

This inherits from db and it is a database model being represented as a python class. This allows us to set up our categories and have specifications on what can be entered into those categories. When we create id, however, those are automatically entered with numbers based on the previous id. This will help us keep track of our contacts and list them in a particular order (chronological by default).

(left off on 36:20)
(notes left off on 15:02)