Homework - rakenduste-programmeerimine-2022/kursus GitHub Wiki
21.10.2022
Tunni ajal arutame ainult projektide vajadusi ja kuidas edukalt jätkata ning jääb iseseisvaks uurimiseks:
Videosalvestus tunnist (21.10)
Parool on saadetud ÕIS-i kaudu.
- Deployment (juurutamine) ehk teil oleks võimalik oma faile ka internetti panna. Võite leida ka enda alternatiivi, aga uurimiseks on head võimalused Netlify, Cyclic, Railway, Fly.io. Leides deploy keskkonna, on vaja lugeda nende võimaluste kohta, et oleks võimalik frontend ja backend seal deployda. Võimalik on ka backend eraldi teises kohas. Netlify puhul näiteks on vaja backendi veidi muuta cloud functionite kujule. Isiklikult kasutaksin järgmise projekti jaoks kas Netlify või Firebase
- State management - react-redux, react-easy-state, mobx-react või Reacti enda
useContext
jauseState
/useReducer
hooke.
14.10.2022
Tunnis läbitud teemad
Videosalvestus tunnist (14.10)
Tänases tunnis kopeerida eelmistest kordadest kausta nii frontend
kui ka backend
ja VSCode-iga teha nad eraldi lahti ja panna käima ka eraldi.
-
useContext useri/authi jaoks App level
-
Lisada custom hook LocalStorage lugemise/salvestamise jaoks, kuna vaja andmeid persistida pärast refreshi
-
Form, useRef, useState ja useMemo
-
Uurida React Query ja axios kohta ja kasutada enda projektis päringute tegemiseks. React Query on rohkem optional, kuid soovitatav, aga axios kindlasti teeb elu lihtsamaks.
-
Integreerida TODO ja auth ehk:
- Lisada Login/Signup route-id ja lehed
- Luua eraldi ProtectedRoute, mis vaatab, et kas kasutaja on authenticatetud, siis näidata
children
-eid, kui ei, siis näiteksRedirect
-ida Login lehele. - Lisada TODO leht - võimalustega lisada, muuta ja kustutada
- Tasub mõelda teha ka backendis muudatusi ja seostada TODO-d kasutaja id-ga. Võib lisada ka niiöelda globaalsed todo-d, eelpool mainitud kasutajapõhised või võib ka mõelda rolli/grupi põhiselt.
- Otsustasin lisada tagasi: Liigutada user/auth createContext, useState eraldi faili näiteks nimega
AuthProvider
, renderdada.Provider
ja propsina kasutadachildrenit
, ehk seda oleks võimalik kasutada hiljem. AuthProviderit on võimalik siis App-i importida AuthProviderina ja kasutada ning useContexti Contexti saab kätte AuthProvideri seest.
Lisa:
- Kui on ressurssi, soovitan uurida ja kasutada Graph QL-i - Apollo GraphQL. Serveri poole pealt saab kasutada apollo-server-express.
- Hea võimalus notificationitena kasutada MUI Snackbar või ka kasutada lisaks React-Toastify
Kodutöö
- Lõpetada tunnitöö ja kindlasti olla veendunud, et kõik punktid on läbi tehtud ja nendest aru saadud.
👉 Tähtaeg 21.10.2021
07.10.2022
Tunnis läbitud teemad
Videosalvestus tunnist (07.10)
Parool on saadetud ÕIS-i kaudu.
- Luua
auth
controller
,routes
ja lülitadaindex.js
-i - Luua
signup
, mis võtab vastureq.body
'stusername
japassword
i ja alguses võite salvestadaplaintext
kujul andmebaasi, et vaadata, kas töötab ja siis paigaldada ja kasutadabcrypt
hash
-imist. - Luua
login
, mis võtab vastureq body
'stusername
japassword
i ja kasutabbcrypt
compare
, kas parool kattub. - Lisada
JWT
projekti, etgenereerida token
kui parool kattub ja saata tagasi kliendile token koos võimalike lisaandmetega (username, roll), aga mitte parool. - Luua eraldi
protected route
-id, kusmiddleware
-ga kontrollite, et kasreq.headers['authorization']
eksisteerib, kui eksisteerib, siis võtta token asukohaltreq.headers.authorization.split(' ')[1]
ehk mis ta teeb on, etAuthorization token
näeb välja nii:Authorization: Bearer token
, ehk me splitime"Bearer token"
ja võtame"token"
osa. Selle saabverify
-da ja kui erroreid ei viska, võib lisada juurde requestile ehkreq.user = payload
(see sama payload, mida me lõime kui genereerisime tokeni kasutaja sisse logimisel) ja siis kutsudanext()
, et middleware annaks teatepulga edasi controllerile - Lisada ka juurde nüüd
express-validator
-i checkidbody
-le, kasutadavalidationit
jasanitizingut
vajadusel. Kindlasti tutvuda põhjalikult dokumentatsiooniga. - Kunstlik eraldi näide, et luua seosed andmete vahel, et näiteks
User
, kes teeb mingisugusepostituse
, etid
-dega oleks võimalik läbipopulate
-i saada tagasi kõik andmed täiskujul (ehk kui otsida postitust, mis on tehtud teatud kasutaja ID poolt, et siis läbi populate-i saada tagasi kohe ühe päringuna ka kasutaja andmed) ja eraldi ka kommentaaride võimalus, mis seostab inimesi näiteks. Põhjus miks seda teeme on seepärast, et projektis võib suure tõenäosusega tekkida selline olukord, et seda vaja ja parem praegu läbi teha, kui siis õppida.
Muudatused
nodemon
dependencite
altdevDependencite
allamodel
eraldi failis ja importida kontrollerisse, võib luua ka statics abifunktsioonid{ timestamps: true }
schemasse
lisades lisab teie eestcreatedAt
jaupdatedAt
, ehk kui salvestate või uuendate enda dokumenti, siis uuendatakse updatedAt automaatselt
Kodutöö
- Lõpetada tunnitöö ja kindlasti teha järgmiseks korraks kõik valmis, sest siis lähme edasi FE-ga ja hakkame kuvama kõiki funktsionaalsuseid, mis meil siiani tehtud on.
👉 Tähtaeg 14.10.2021
30.09.2022
Tunnis läbitud teemad
‼️ Projekti esitamise ja alustamise kuupäev paigas
Videosalvestus tunnist (30.09)
Parool on saadetud ÕIS-i kaudu.
Backend (Node.js express)
-
npm init -y
, addexpress
,.gitignore
-
nodemon
morgan
-
ES5 vs ES6
-
express.json()
-
express routes
,/controllers
,exports.fnName
CRUD
-
Luua konto: MongoDB
-
Täita küsimustik => Free Shared => Create => valida sobiv regioon => Create Cluster => Create User, My Local Environment, Add my current IP => Finish and Close => Go to Database
-
Cluster0 => Connect => Connect your application => Add your connection string into your application code (copida kood) => Close
-
dotenv
=>.gitignore
,mongoose
-
Muudke
uri
, seal on...
, mis tuleb täiendada enda uri lõpuga, mida MongoDB-st saate
const uri = `mongodb+srv://${process.env.DB_USERNAME}:${process.env.DB_PASSWORD}...`
mongoose
.connect(uri)
.then(() => console.log('Database connection established'))
.catch((e) => console.error(e))
Kodutöö
cats controlleri
loogika
Lõpetada - Kirjutada ümber
update
endpoint, et leida esimene sobiv match ja kui see eksisteerib, siis uuendada ainult seda - Kirjutada
delete
endpointi loogika
dogs controlleri
loogika
Lõpetada - Kirjutada
update
endpointi loogika - Kirjutada
delete
endpointi loogika
Luua sarnaselt uue TODO controller ja route-id
- Luua uus
route
/routes
kaustas - Kasutada uut loodud
route
-iindex
is - Luua TODO
Schema
(kus on näitekstitle
,date
,importance
(numbrites) jacompleted
) jaModel
- Luua uus
controller
/controllers
kaustas Parameetrite
asemel kasutadareq.body
, kuna siis on võimalik loomisel saata terve objekt ja uuendamisel uuendadacompleted
väärtustPostman
iga proovida kõik endpointid läbi (CRUD)
👉 Tähtaeg 07.10.2021
23.09.2022
Tunnis läbitud teemad
Videosalvestus tunnist (23.09)
Parool on saadetud ÕIS-i kaudu.
Kopeerides luua tänase tunni CRA projekt
- Kopeerida kõik 16.09 CRA failid uude folderisse ilma
node_modules
kaustata - Luua uus kaust 23.09 kaustas nt
nimi-app
ja muuta kapackage.json
-is projekti nimi samaks - Avada VSCode-iga ja kirjutada
npm i
terminalis (ehk npm install, ehk installeerime dependencid) .gitignore
tõenäoliselt ei tule kaasa, kui teil pole näha hidden faile, siis lisage see fail ning minimaalselt lisage sinna järgmised read selleks, etgit
-il ei tekiks soovnode_modules
kausta GitHubi pushida.
# dependencies
/node_modules
ESLinter ja Prettieri paigaldamine
- Installida vajalikud devDependencid juurde (--save-dev ehk -D ehk save as devDependency)
npm install --save-dev eslint-config-prettier eslint-plugin-prettier eslint prettier
- Aru saada, mis reeglid need on ja lisada need
package.json
faili (saab ka eraldi failina, seekord valime package.json variandi)
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest",
"plugin:prettier/recommended"
]
},
"prettier": {
"semi": false,
"tabWidth": 2,
"printWidth": 80,
"singleQuote": false,
"jsxSingleQuote": false,
"bracketSpacing": true,
"bracketSameLine": false,
"trailingComma": "none",
"arrowParens": "avoid",
"singleAttributePerLine": true
},
- Lisada
package.json
-is skriptidesse (scripts
) juurde (lisaks olemasolevatelestart
,build
,test
jaeject
):
"lint": "eslint .",
"format": "prettier --write \"**/*.+(js|jsx|json|yml|yaml|css|md|vue)\""
Ehk peale lisamist peaks välja nägema nii:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint .",
"format": "prettier --write \"**/*.+(js|jsx|json|yml|yaml|css|md|vue)\""
},
- Nüüd saab huvipärast projekti kaustas jooksutada käsku
npm run lint
ja saada erroreid - Installeerida
Prettier
VSCode extension - Minna nt
App.js
faili ja vajutadaCMD + SHIFT + P
(mac) või windowsisCTRL + SHIFT + P
ja kirjutadaFormat Document With
ning validaPrettier - Code formatter
(peaks tekkimadefault
selle järele) - Nüüd kirjutades
npm run lint
peaks erroreid olema vähem - Nüüd minna
Preferences
>Settings
ja kirjutamasave
ning panema linnukeseEditor: Format On Save
- Samuti seal samas alla skrollides leidab
Files: Auto Save
ning sealt valida näiteksonFocusChange
- Nüüd jooksutada kogu projekti kaustas:
npm run format
ja seejärel uuestinpm run lint
ja vaatama, kas on veel erroreid järgi
Paigaldada lisa VSCode extensioneid
- Christian Kohler-i
Path Intellisense
- steoates-i
Auto Import
- dsznajder-i
ES7+ React/Redux/React-Native snippets
React side-effects part 1
- Kasutame
useEffect
i ilmadependency array
ta, tühjadependency array
ga ja täidetuddependency array
ga - Lihtsamad näited useEffectiga (näiteks muuta
document.title
-it, mis näidetega saate tutvuda ka tutorialites)
Paigaldada React Router
- Paigaldada React Router - kasutada parem seda dokumentatsiooni, varajasem link oli v5 oma.
- Lisaks luua
No Match (404)
route - Proovida läbi, kas erinevad route-id töötavad.
NB! Näiteid leiab siit: React Router examples
Luua tunni jooksul MUI komponentidega leht
NB! Mitte kasutada HTML elemente (div, p, a), vaid sellele vastanduvaid MUI komponente ja a
elemendi asemel React Routeri Link
elementi
- Kasutada ühist
Header
it igal pool, kus oleksid lingid erinevatele lehtedele (komponentidele) - Kui teha komponente, teha neid eraldi
components
kausta, mida ise olete loonud - Kui teha erienvaid täis lehekülgi, mis võivad sisaldada kompinente, teha eraldi
pages
kaust - Luua lehed nagu:
main
,leht, et kuvada mingisugust tabelit (listi)
,contact form
,user profile settings
(hiljem võib neid ka ümber teha ja taaskasutada, et kuvada järgmise punkti andmeid). Siis tõenäolielt vaja lisada juurde piltide kuvamise leht, postituste ja iga postituste juurde ka kommentaaride komponent ja kasutajate leht.
React side-effects part 2
NB 1 .then
asemel kasutage async/await
, kui see pole tuttav, siis leidke enda jaoks sobiv materjal õppimiseks
NB 2 Kui olete aru saanud async/await -ist, siis fetchimisel on selle jaoks hea materjal siin: How to Use Fetch with async/await
- Luua juba olemasoleva lehe disaini juurde lisalehed selleks, et kasutada ära kõiki JSONPlaceholder API endpointe
GET
endpointide puhul saab päringu paigaldada useEffecti, et teeks päringu komponendi esimesel renderdamisel, teiste endpointide puhul võib panna eraldi funktsioonidesse.- Selleks, et koodi näha, saate tutvuda JSONPlaceholder guide
- Selleks, et mitte saada GET-ga kõiki tulemusi, võib kasutada
paginationit
ehk näitekshttp://jsonplaceholder.typicode.com/photos?_page=0&_limit=10
kuspage
on leht jalimit
on see, palju päringuid küsite. Rohkem informatsiooni on saadaval ka siitREADME
-st: JSON Server NB! Seekord saame kasutada sisse ehitatudfetch
funktsiooni, kuna see on ka näidetes kasutatav. Edaspidi tõenäoliselt kasutameaxios
-t, see veel kaalutlemisel.
Lisa: Luua eraldi loading
, data
ja error
useState
-id. Enne fetchimist paigaldada loading state
true
väärtusesse, kui data käes, siis panna loading state
false
väärtusesse. Errori
puhul kuvada error. Samuti renderdada loading komponent ja error komponent.
PropTypes
Lisada prop validations ehk - Selgitused ja näited leiab Reacti enda dokumentatsioonist: Typechecking With PropTypes
Kodutöö
- Lõpetada kõik tunnitöö
- Kindlasti vaja läbi teha kõik
CRUD
operatsioonid (get
,post
,put
,delete
) osasReact side-effects part 2
- Paigalda lisa VSCode extension MUI komponentide autoimportimiseks vscodeshift poolt nimega
Material-UI Snippets
Tutvuge iseseisvalt extensioni dokumentatsiooniga, et kuidas kasutada
👉 Tähtaeg 30.09.2021
16.09.2022
Tunnis läbitud teemad
Videosalvestus tunnist (16.09)
Parool on saadetud ÕIS-i kaudu.
Kodutöö
- Tutvuda Reacti enda doksi põhiliste kontseptsioonidega - React Docs Main Concepts. Mingeid näited on klassidega, võite neid vaadelda ja püüda aru saada, et mis toimub ja kas saate juba aru nendest
- Teha tutvust Flexboxiga, kui pole veel tuttavad - Flexbox CSS Tricks
src/components
ehk componentide kaust on vaja ise luua.
Luua enda 2 uut komponent kausta Komponent ise tuleb suure algustähega nii fail kui ka funktsiooni defineerimisel. Importida need App.js
faili ja kuvada enda komponendid.
- Mõtteks võib olla mingisugune arvutus, kus oleksid nupud
-1
,+1
,-100
,+100
ehk need muudaksid state-is olevat numbrit. Kasutada useState-i ja luua 4 nuppu. - Lisaks luua ka komponent, mis kuvab
input
elementi (kasutada MUI elementi, mitte HTML oma). Samuti kirjutades input elementi kuvaks value eraldi välja ehk kasutadaonChange
propi ja vihjeks võib öelda, et tuleb kasutadaevent.target.value
-d, mida esimesel tunnil kordasime.
- Lisaks tutvuda Reacti testimisega - React Testing Library. Selleks, et paremini hakkaks välja tulema, proovige enda tehtud komponentidele kirjutada ka lihtsad testid.
👉 Tähtaeg 23.09.2021
09.09.2022
Tunnis läbitud teemad
Õpime tegema veebirakendust, milles kasutame frontendi tegemiseks Reacti, backendi tegemiseks NodeJS-i ja andmebaasiks tõenöoliselt MongoDB-d. Umbes pool kursust on rohkem iseseisev õppimine, erinevad teemad. Toimub sissejuhatus, kuid peamine rõhk on iseseisval tunni ajal töötamisel. Rõhk on dokumentatsiooni lugemise oskuse arendamisel, millega te kindlasti hakkate palju kokku puutuma, kui tööle lähete, ehk parem kohe juba tutvust teha.
Tundides osalemine ei ole kohustuslik, kuid kui puudud mõjuva põhjuseta ja küsida küsimusi, mis on tunni ajal küsitud ja teistega koos lahendatud, siis jääb Sinu enda vastutusele vastuse leidmine.
Kodutööd samuti pole kohustuslikud ja ei kontrolli eraldi, kuid kui projekti tegemisel ja/või esitamisel tekivad lõpus küsimused, kas kursuse jooksul on teemad ikka läbitud ja kodutööd tehtud, siis vaatan kodutöid ja kas on õigeteks aegadeks tehtud. Selle järgi saab näha, kas olete kaasa teinud või mitte ja see selgitab hiljem võimaliku maha jäämist.
Kui kaasa ei tee jooksvalt ja ärgata enne projekti esitamist, siis kindlasti on oht maha jääda, kuna keerukus tõuseb kui pole varem tegelenud selliste teemadega.
Järgmisel tunnil räägin täpselt projektist, aga saate juba praegu mõelda välja projektiideid. Tuleb teha ise frontend, kasutada võib mingisugust frontendi disaini teeki näiteks Material UI ja backend tuleb NodeJS-iga. Projekti minimaalseks ja maksimaalseks suuruseks on 2 inimest, kus saate enda tegemisi jagada.
Hädavajalik on eksperimenteerimine ja proovimine ning eksimine. Koodi kvaliteedile ma suurt rõhku ei pane, kuid vahepeal võin jagada hea praktika tavasid - mõte on saada tegema, isegi kui miski ei pruugi töötada kõige efektiivsemalt. Ainuke viis reaalselt õppida on julgeda eksperimenteerida ja ka küsida. Samuti saate minuga õppida mitte häbenemist ja julgust küsida ja näidata enda koodi, sest ainult hirmudest ülesaamisega on võimalik tõeliselt õppima hakata.
Soovituslik on kasutada Discordi
jooksvate küsimuste lahendamisel. Projekti tegemise faasis on Discordi kasutamine kohustuslik ( kirjalikud standupid).
👉 NB! Tundide jooksul on edaspidi vajalik kasutada kaamerat/mikrofoni küsimuste küsimisel ja vastamisel. Kui pole kaamerat/mikrofoni, saab telefoniga liituda ja kasutada telefoni kaamerat/mikrofoni.
Tunni ajal paigaldasime arvutisse:
- Node.js - Recommended for most users
- Visual Studio Code - IDE, võite kasutada ka midagi muud, kuid tunni jooksul teeme sellega ja teistega on teil vaja ise abi leida
Vaja ise läbi teha järgmised asjad:
Käivitada JS kood oma arvutis (Node.js)
- Pärast
Node.JS
installimist käivitadaterminal
võicommand line
ja kirjutada:node -v
ja peaksite saama versiooni tagasi - Avama
VS Code
-i ja looma uue*.js
faili - Tehke ükshaaval copy-paste ja tehke kaasa tunnitööd iseseisvalt ja vaadake miks midagi töötab tunnitöö
- Selleks, et käivitada vahepeal faili tehke lahti
terminal
ja kirjutagenode failinimi
CodeSandbox konto (selleks soovitan kasutada GitHub-i kontot loomisel).
LuuaHome
>New Sandbox
>Create Sandbox
>Vanilla (by CodeSandbox)
- Tuletage meelde HTML-i, looge 2 erinevat
button
-it, mis muudavad mingisugust teksti üheks ja teiseks väärtuseks. - Looge
input
väli ja printige näiteks konsooli välja ajalugu (ehk igal klahvi vajutusel oleks näha välja kogu teksti). Vihjena saab öelda, et võib kasutada näiteksonchange
võionkeyup
propertit ja funktsiooni tuleb edastada kaevent
ning printida saab siisevent.target.value
.
Kodutöö
Ettevalmistusena järgmisteks tundideks on tarvis üle korrata kõikide tunni jooksul läbitud teemadega - korrata HTML syntax, propertid ja JS teemad (funktsioonid, return kasutamine, map/filter/reduce, spread syntax, object literals, key-value explicit ja shorthand viis).
Kodutöö esitamist saab lugeda, kui olete kuhugi enda GH reposse näiteks lessons/09-09-2022
kausta loonud *.js
faili erineva eksperimenteerimiste ja proovimistega.
👉 Tähtaeg 23.09.2021