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.

  1. 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
  2. State management - react-redux, react-easy-state, mobx-react või Reacti enda useContext ja useState/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:

  1. Lisada Login/Signup route-id ja lehed
  2. Luua eraldi ProtectedRoute, mis vaatab, et kas kasutaja on authenticatetud, siis näidata children -eid, kui ei, siis näiteks Redirect -ida Login lehele.
  3. Lisada TODO leht - võimalustega lisada, muuta ja kustutada
  4. 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 kasutada childrenit, 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:

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.

  1. Luua auth controller, routes ja lülitada index.js-i
  2. Luua signup, mis võtab vastu req.body 'st username ja passwordi ja alguses võite salvestada plaintext kujul andmebaasi, et vaadata, kas töötab ja siis paigaldada ja kasutada bcrypt hash-imist.
  3. Luua login, mis võtab vastu req body 'st username ja passwordi ja kasutab bcrypt compare, kas parool kattub.
  4. Lisada JWT projekti, et genereerida token kui parool kattub ja saata tagasi kliendile token koos võimalike lisaandmetega (username, roll), aga mitte parool.
  5. Luua eraldi protected route-id, kus middleware -ga kontrollite, et kas req.headers['authorization'] eksisteerib, kui eksisteerib, siis võtta token asukohalt req.headers.authorization.split(' ')[1] ehk mis ta teeb on, et Authorization token näeb välja nii: Authorization: Bearer token, ehk me splitime "Bearer token" ja võtame "token" osa. Selle saab verify-da ja kui erroreid ei viska, võib lisada juurde requestile ehk req.user = payload (see sama payload, mida me lõime kui genereerisime tokeni kasutaja sisse logimisel) ja siis kutsuda next(), et middleware annaks teatepulga edasi controllerile
  6. Lisada ka juurde nüüd express-validator -i checkid body-le, kasutada validationit ja sanitizingut vajadusel. Kindlasti tutvuda põhjalikult dokumentatsiooniga.
  7. Kunstlik eraldi näide, et luua seosed andmete vahel, et näiteks User, kes teeb mingisuguse postituse, et id-dega oleks võimalik läbi populate -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 alt devDependencite alla
  • model eraldi failis ja importida kontrollerisse, võib luua ka statics abifunktsioonid
  • { timestamps: true } schemasse lisades lisab teie eest createdAt ja updatedAt, 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)

  1. npm init -y, add express, .gitignore

  2. nodemon morgan

  3. ES5 vs ES6

  4. Postman

  5. express.json()

  6. express routes, /controllers, exports.fnName CRUD

  7. What is MongoDB?

  8. Luua konto: MongoDB

  9. 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

  10. Cluster0 => Connect => Connect your application => Add your connection string into your application code (copida kood) => Close

  11. dotenv => .gitignore, mongoose

  12. 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öö

Lõpetada cats controlleri loogika

  1. Kirjutada ümber update endpoint, et leida esimene sobiv match ja kui see eksisteerib, siis uuendada ainult seda
  2. Kirjutada delete endpointi loogika

Lõpetada dogs controlleri loogika

  1. Kirjutada update endpointi loogika
  2. Kirjutada delete endpointi loogika

Luua sarnaselt uue TODO controller ja route-id

  1. Luua uus route /routes kaustas
  2. Kasutada uut loodud route-i indexis
  3. Luua TODO Schema (kus on näiteks title, date, importance (numbrites) ja completed) ja Model
  4. Luua uus controller /controllers kaustas
  5. Parameetrite asemel kasutada req.body, kuna siis on võimalik loomisel saata terve objekt ja uuendamisel uuendada completed väärtust
  6. Postmaniga 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

  1. Kopeerida kõik 16.09 CRA failid uude folderisse ilma node_modules kaustata
  2. Luua uus kaust 23.09 kaustas nt nimi-app ja muuta ka package.json -is projekti nimi samaks
  3. Avada VSCode-iga ja kirjutada npm i terminalis (ehk npm install, ehk installeerime dependencid)
  4. .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, et git-il ei tekiks soov node_modules kausta GitHubi pushida.
# dependencies
/node_modules

ESLinter ja Prettieri paigaldamine

  1. Installida vajalikud devDependencid juurde (--save-dev ehk -D ehk save as devDependency)
npm install --save-dev eslint-config-prettier eslint-plugin-prettier eslint prettier
  1. 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
},
  1. Lisada package.json-is skriptidesse (scripts) juurde (lisaks olemasolevatele start, build, test ja eject):
"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)\""
},
  1. Nüüd saab huvipärast projekti kaustas jooksutada käsku npm run lint ja saada erroreid
  2. Installeerida Prettier VSCode extension
  3. Minna nt App.js faili ja vajutada CMD + SHIFT + P (mac) või windowsis CTRL + SHIFT + P ja kirjutada Format Document With ning valida Prettier - Code formatter (peaks tekkima default selle järele)
  4. Nüüd kirjutades npm run lint peaks erroreid olema vähem
  5. Nüüd minna Preferences > Settings ja kirjutama save ning panema linnukese Editor: Format On Save
  6. Samuti seal samas alla skrollides leidab Files: Auto Save ning sealt valida näiteks onFocusChange
  7. Nüüd jooksutada kogu projekti kaustas: npm run format ja seejärel uuesti npm run lint ja vaatama, kas on veel erroreid järgi

Paigaldada lisa VSCode extensioneid

  1. Christian Kohler-i
Path Intellisense
  1. steoates-i
Auto Import
  1. dsznajder-i
ES7+ React/Redux/React-Native snippets

React side-effects part 1

  1. Kasutame useEffecti ilma dependency arrayta, tühja dependency arrayga ja täidetud dependency arrayga
  2. Lihtsamad näited useEffectiga (näiteks muuta document.title -it, mis näidetega saate tutvuda ka tutorialites)

Paigaldada React Router

  1. Paigaldada React Router - kasutada parem seda dokumentatsiooni, varajasem link oli v5 oma.
  2. Lisaks luua No Match (404) route
  3. 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

  1. Kasutada ühist Headerit igal pool, kus oleksid lingid erinevatele lehtedele (komponentidele)
  2. Kui teha komponente, teha neid eraldi components kausta, mida ise olete loonud
  3. Kui teha erienvaid täis lehekülgi, mis võivad sisaldada kompinente, teha eraldi pages kaust
  4. 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

  1. Luua juba olemasoleva lehe disaini juurde lisalehed selleks, et kasutada ära kõiki JSONPlaceholder API endpointe
  2. GET endpointide puhul saab päringu paigaldada useEffecti, et teeks päringu komponendi esimesel renderdamisel, teiste endpointide puhul võib panna eraldi funktsioonidesse.
  3. Selleks, et koodi näha, saate tutvuda JSONPlaceholder guide
  4. Selleks, et mitte saada GET-ga kõiki tulemusi, võib kasutada paginationit ehk näiteks http://jsonplaceholder.typicode.com/photos?_page=0&_limit=10 kus page on leht ja limit on see, palju päringuid küsite. Rohkem informatsiooni on saadaval ka siit README-st: JSON Server NB! Seekord saame kasutada sisse ehitatud fetch funktsiooni, kuna see on ka näidetes kasutatav. Edaspidi tõenäoliselt kasutame axios-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.

Lisada prop validations ehk PropTypes

Kodutöö

  • Lõpetada kõik tunnitöö
  • Kindlasti vaja läbi teha kõik CRUD operatsioonid (get, post, put, delete) osas React 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

Luua enda 2 uut komponent kausta src/components ehk componentide kaust on vaja ise luua.

Komponent ise tuleb suure algustähega nii fail kui ka funktsiooni defineerimisel. Importida need App.js faili ja kuvada enda komponendid.

  1. 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.
  2. Lisaks luua ka komponent, mis kuvab input elementi (kasutada MUI elementi, mitte HTML oma). Samuti kirjutades input elementi kuvaks value eraldi välja ehk kasutada onChange propi ja vihjeks võib öelda, et tuleb kasutada event.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)

  1. Pärast Node.JS installimist käivitada terminal või command line ja kirjutada: node -v ja peaksite saama versiooni tagasi
  2. Avama VS Code-i ja looma uue *.js faili
  3. Tehke ükshaaval copy-paste ja tehke kaasa tunnitööd iseseisvalt ja vaadake miks midagi töötab tunnitöö
  4. Selleks, et käivitada vahepeal faili tehke lahti terminal ja kirjutage node failinimi

Luua CodeSandbox konto (selleks soovitan kasutada GitHub-i kontot loomisel).

  1. Home > New Sandbox > Create Sandbox > Vanilla (by CodeSandbox)
  2. Tuletage meelde HTML-i, looge 2 erinevat button-it, mis muudavad mingisugust teksti üheks ja teiseks väärtuseks.
  3. 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äiteks onchange või onkeyup propertit ja funktsiooni tuleb edastada ka event ning printida saab siis event.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