Developing with Frontend & Backend
To get started with development, you need tools. You'll learn how to get the necessary tools here using Conda scripts.
GitHub
- What is GitHub?
- place where users can share code
- Why do we use GitHub? Why not Google Drive or messages?
- GitHub is primarily used for version control and collaboration on software development projects, while Google Drive is a cloud storage and document management platform.
- On the other hand, Google Drive is a cloud storage platform that allows users to store and share documents, spreadsheets, and other files. While it can be used for collaboration, it lacks the version control and code management features that make GitHub more suited for software development projects.
- What's the difference between Git and GitHub?
- Git is the process of sharing code/ way to store code
- Name as many Git commands as you can:
- git clone
- git push
- git pull
- git commit
- git config
Two Main Machines
- Which is better, MacOS or Windows?
- neither - Mr. Mort
- Give some differences between MacOS and Windows in terms of the development we use in APCSP:
- Windows requires WSL to be installed but Mac already runs on linux so extra installations are'nt necessary
- If you are on Windows, you want to skip the MacOS Setup instructions.
Our Tools:
- What is the first tool you remember installing?
- python, bash, anaconda
- Why was installations so hard the first time?
- lots of unknown errors
- impatience when reading instructions
- Without looking back at previous notes, name three tools you remember installing. This can be kernels, extensions, any installation for APCSP, and also write why it is needed.
- Javascript - frontend code
- python - backend code
- anaconda
- brew - used to install other programs
Actual Installations:
Tool setup is a week 0 thing. You should already have the knowledge to set up your machine. There is also a high chance you had to remove your environments and set up your machine again due to errors. If, for some reason, these don't apply to you, go here to set up your machine, here to check everything working with Bash, and here for Docker setup, which are the main tools on our machine needed to develop in APCSP.
brew list # list packages
brew update # update package list
brew upgrade # upgrade packages
brew install git # install latest git
brew install python # install python3 for development
python --version # version of python3 installed
brew install java # openjdk install
wsl --install
wsl --list
wsl --install -d Ubuntu-20.04
# restart machine
wsl
cd ~
mkdir vscode
ls
cd ~/vscode # changes the directory to path for vscode files
git clone https://github.com/nighthawkcoders/APCSP.git # clone repo
cd APCSP # changes the directory to path for APCSP repos assets
code . # opens APCSP in VSCode
cd .. # changes the directory to the previous/parent directory
git config --global user.email mygmail@gmail.com # tell git your email
git config --global user.name mygithub # tell git your github id
shay@MSI:/mnt/c/Users/ShayM$ git config --global user.email your@email.here
shay@MSI:/mnt/c/Users/ShayM$ git config --global user.name yourusernamehere
# restart machine
PS C:\Users\UserName> wsl # Windows prompt to WSL command
cd /tmp
wget https://repo.anaconda.com/archive/Anaconda3-2022.05-Linux-x86_64.sh
chmod +x Anaconda3-2022.05-Linux-x86_64.sh
# Answer yes to all the prompts
./Anaconda3-2022.05-Linux-x86_64.sh
# run apt package commands now
sudo apt list # list packages
sudo apt update # update package list
sudo apt upgrade # upgrade packages
sudo apt install python2 # install python2 for package dependencies
sudo apt install python3 python3-pip # install python3 and pip3 for development
python --version # version of python3 should be shown
sudo apt install default-jdk default-jre # java install
java --version # java runtime version
javac --version # java compiler version
sudo apt install unzip # unzip utility
(base) id:~$ conda --version
(base) id:~$ conda install jupyter # install jupyter
(base) id:~$ jupyter kernelspec list # list installed kernels
Available kernels:
python3 /home/shay/.local/share/jupyter/kernels/python3
(base) id:~$ # start in home directory
(base) id:~$ pip install bash_kernel # download bash kernel
Collecting bash_kernel
Downloading bash_kernel-0.7.2-py2.py3-none-any.whl (15 kB)
Requirement already satisfied: pexpect>=4.0 in ./anaconda3/lib/python3.9/site-packages (from bash_kernel) (4.8.0)
Requirement already satisfied: ptyprocess>=0.5 in ./anaconda3/lib/python3.9/site-packages (from pexpect>=4.0->bash_kernel) (0.7.0)
Installing collected packages: bash-kernel
Successfully installed bash-kernel-0.7.2
(base) id:~$ python -m bash_kernel.install # install kernel
Installing IPython kernel spec
(base) id:~$ jupyter kernelspec list # list kernels
Available kernels:
bash /home/shay/.local/share/jupyter/kernels/bash
python3 /home/shay/.local/share/jupyter/kernels/python3
(base) id:~$ conda install nodejs # node is framework for JavaScript kernel
(base) id:~$ npm -version # node package manager comes with nodejs
(base) id:~$ npm install -g ijavascript # get the kernel
(base) id:~$ ijsinstall # install javascript kernel
(base) id:~$ jupyter kernelspec list # list kernels
Available kernels:
bash /home/shay/.local/share/jupyter/kernels/bash
javascript /home/shay/.local/share/jupyter/kernels/javascript
python3 /home/shay/.local/share/jupyter/kernels/python3
By now, you should already know how to clone Git repositories into your VSCode directory. Once you do that, you're all set for developing with GitHub Pages and Fastpages!
Before We Set Up Pages, A Guide to Git
As we've discussed, Git is different from GitHub. Because GitHub is merely the place where we store Git repos, we use Git's commands to help us get, open, and configure these repositories. Here are some of the Git commands you should be using a lot (In the comments, tell what each Git command does):
git clone {repos-name-here.git} # what does it do? clones a repo onto your own local vscode folder
git checkout [branch] # what does it do? Commit only to certain branches of a repo instead of to the main branch
git fork {repos-name-here.git} # what does it do? makes a copy of an existing repository. Can make changes without affecting original repo
git commit -m {"commit-msg"} # what does it do? commits any changes to the repo. -m just adds a message since that it required to commit
git pull # what does it do? pull changes from repo. synch and become up to date
git push # what does it do? push changes to repo
# After this line, name other commands that you can use and what they do. This should be easy, as you've already answered the qeue
git init # Initializes a new Git repository in the current directory.
git add # Adds changes to the staging area. This command allows you to choose which changes to commit.
git status # Shows the current status of the repository. This command displays information about changes made to the files in the repository.
git log # Shows a log of all the commits made to the repository. This command displays information about the author, date, and message of each commit.
Setting Up GitHub Pages
- Some of you may have come to know that GitHub Pages is starting to become outdated. So why do we still use it? The answer is that we are in a class, and following a curriculum with something like GitHub Pages is much easier than creating portfolio content from scratch, which becomes quite unnecessary. Therefore, we can use GitHub Pages to create this content instead.
- On the topic of unnecessary vs necessary coding, we don't need to make GitHub Pages from scratch as opposed to using a template that our very own Mr. Mortensen created for us. To do that, we can go to the Leuck Reunion repository and use the template to make our own GitHub Pages.
- Then, in Ubuntu, we can
git cloneour repository and open it in VSCode. After we have it open, the last thing we want to do is set up local hosting for this website, so that we can preview it and make changes in real time. To do that, head here to install Jekyll for Ubuntu, here to install Ruby next, and here to finalize the process by installing Bundler.
Setting Up FastPages
In Setting Up Github Pages, we talked about how it is easier to use a template to create portfolio content. It is also easier to use a template when creating the portfolio itself. To do that, we can use Fastpages, which is what we have been using to show our blogs, code, and projects. However, Fastpages has been deprecated for some time now, so the instructions in Week 0 won't be effective. So, we need to fork the APCSP Fastpages. To do that, follow this video to get started developing with Fastpages.
Hacks
- Show how you incorporate three tools that we have installed into your project. 0.1 points for each feature. (0.3). This can include code, but definitely blog about it.
- Used javascript to write a function that filters data that is fetched from the backend. Additionally, javascript is used to write a fetch method to actually access the data in the backend.
- Used python to adapt the API and Model code. API acts as a bridge between frontend and backend. Model code creates my Car objects and populates a data table which is accessed by fetch call on the frontend.
- we also installed git which is used used to clone, push, commit, add, etc. Its super useful for doing fixes on AWS and making sure vscode and deployed server are up to date on changes.
- frontend hack goes here
- frontend code below utilizes javascript to do a fetch call to the backend (which is deployed with AWS)
- Below the fetch call is a function that does filtering. It iterates through the list which contains data from the backend. Users select values from drop down menus on the user interface. These values are compared to the values of the cars in the list "all_cars". matches are pushed to a list called "result", which are then pushed to a table on the user's screen.
function getAllCars() {
fetch('https://finalssvgcars.duckdns.org/api/cars/').then(function(response) {
return response.json();
}).then(function(data) {
console.log(data);
all_cars = data;
}).catch(function(err) {
console.log(err);
});
}
function getCarResults(brand, color, type, powersource, pricerange) {
var result = [];
for (const car of all_cars){
console.log(car);
console.log("price range from data is:" + typeof car["pricerange"] + car["pricerange"])
console.log("being compared to:" + typeof pricerange + pricerange)
if ((car["brand"] === brand || !brand) &&
(car["color"] === color || !color) &&
(car["type"] === type || !type) &&
(car["powersource"] === powersource || !powersource) &&
(car["pricerange"] === parseInt(pricerange, 10) || !pricerange)) {
result.push(car);
}
}
if (result.length === 0) {
console.log('No Cars Found');
}
else {
console.log(result.length + 'Cars Found');
}
return result;
}
- backend hack goes here
- not all of the code but this is the function initCars which pre-defines Car objects and populates them into a database
- I've also included CRUD features which are responsible for Create, read, add, and deleting objects from the database
def initCars():
with app.app_context():
"""Create database and tables"""
db.create_all()
"""Tester data for table"""
c1 = Car(image='1', brand='Acura', color='gray', powersource='ice', type='suv', pricerange='2')
c2 = Car(image='2', brand='Hyundai', color='red', powersource='ice', type='sedan', pricerange='1')
c3 = Car(image='3', brand='Mazda', color='white', powersource='ice', type='sedan', pricerange='1')
c4 = Car(image='4', brand='Honda', color='gray', powersource='ice', type='suv', pricerange='1')
c5 = Car(image='5', brand='Dodge', color='black', powersource='ice', type='suv', pricerange='2')
c6 = Car(image='6', brand='Toyota', color='white', powersource='ice', type='truck', pricerange='2')
c7 = Car(image='7', brand='Hyundai', color='blue', powersource='ice', type='sedan', pricerange='1')
c8 = Car(image='8', brand='Chevrolet', color='gray', powersource='ice', type='truck', pricerange='2')
c9 = Car(image='9', brand='Jeep', color='gray', powersource='ice', type='suv', pricerange='1')
c10 = Car(image='10', brand='Nissan', color='silver', powersource='ice', type='sedan', pricerange='1')
c11 = Car(image='11', brand='Lexus', color='black', powersource='ice', type='sedan', pricerange='2')
c12 = Car(image='12', brand='Kia', color='red', powersource='ice', type='suv', pricerange='1')
c13 = Car(image='13', brand='Mazda', color='red', powersource='ice', type='truck', pricerange='2')
c14 = Car(image='14', brand='Ford', color='white', powersource='ice', type='sedan', pricerange='2')
c15 = Car(image='15', brand='Kia', color='red', powersource='ice', type='truck', pricerange='2')
c16 = Car(image='16', brand='Ford', color='gray', powersource='ice', type='suv', pricerange='1')
c17 = Car(image='17', brand='Jeep', color='red', powersource='ice', type='truck', pricerange='1')
c18 = Car(image='18', brand='Toyota', color='red', powersource='electric', type='suv', pricerange='3')
c19 = Car(image='19', brand='Kia', color='silver', powersource='ice', type='truck', pricerange='1')
c20 = Car(image='20', brand='Honda', color='white', powersource='ice', type='suv', pricerange='1')
c21 = Car(image='21', brand='Hyundai', color='white', powersource='ice', type='sedan', pricerange='1')
c22 = Car(image='22', brand='Chevrolet', color='white', powersource='ice', type='suv', pricerange='3')
c23 = Car(image='23', brand='Jeep', color='white', powersource='ice', type='suv', pricerange='3')
c24 = Car(image='24', brand='BMW', color='gray', powersource='ice', type='sedan', pricerange='4')
c25 = Car(image='25', brand='Ferrari', color='yellow', powersource='ice', type='sports', pricerange='4')
c26 = Car(image='26', brand='Tesla', color='red', powersource='electric', type='suv', pricerange='4')
c27 = Car(image='27', brand='Tesla', color='blue', powersource='electric', type='suv', pricerange='4')
c28 = Car(image='28', brand='Ford', color='white', powersource='electric', type='truck', pricerange='3')
c29 = Car(image='29', brand='Ford', color='blue', powersource='electric', type='truck', pricerange='4')
c30 = Car(image='30', brand='Audi', color='black', powersource='electric', type='suv', pricerange='4')
c31 = Car(image='31', brand='Ferrari', color='red', powersource='electric', type='sports', pricerange='4')
c32 = Car(image='32', brand='Mercedes', color='silver', powersource='electric', type='sedan', pricerange='4')
c33 = Car(image='33', brand='Mazda', color='silver', powersource='electric', type='suv', pricerange='2')
c34 = Car(image='34', brand='Nissan', color='blue', powersource='electric', type='suv', pricerange='2')
c35 = Car(image='35', brand='Subaru', color='red', powersource='electric', type='suv', pricerange='2')
cars = [c1, c2, c3, c4, c5, c6, c7, c8, c9, c10, c11, c12, c13, c14, c15, c16, c17, c18, c19, c20, c21, c22, c23, c24, c25, c26, c27, c28, c29, c30, c31, c32, c33, c34, c35]
try:
db.session.query(Car).delete()
db.session.commit()
except:
db.session.rollback()
"""Builds sample car/note(s) data"""
for car in cars:
try:
car.create()
except IntegrityError:
'''fails with bad or duplicate data'''
db.session.remove()
print(f"Records exist, duplicate email, or error: {car.model}")
def create(self):
try:
# creates a person object from User(db.Model) class, passes initializers
db.session.add(self) # add prepares to persist person object to Users table
db.session.commit() # SqlAlchemy "unit of work pattern" requires a manual commit
return self
except IntegrityError:
db.session.remove()
return None
# CRUD read converts self to dictionary
# returns dictionary
def read(self):
return {
"id": self.id,
"image": self.image,
"brand" : self.brand,
"color" : self.color,
"type" : self.type,
"powersource" : self.powersource,
"pricerange" : self.pricerange
}
# CRUD update: updates user name, password, phone
# returns self
def update(self, image="", brand="", color="", powersource="", type="", pricerange=""):
"""only updates values with length"""
if len(image) > 0:
self.image = image
if len(brand) > 0:
self.brand = brand
if len(color) > 0:
self.color = color
if len(type) > 0:
self.type = type
if len(powersource) > 0:
self.powersource = powersource
if len(pricerange) > 0:
self.pricerange = pricerange
db.session.commit()
return self
# CRUD delete: remove self
# None
def delete(self):
db.session.delete(self)
db.session.commit()
return None