Homework - rakenduste-programmeerimine-2022/kursus Wiki

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