Jira KiirLink proekt

Ülesanded

KiirlLiinki loomise peamised ülesanded:

  1. Andmebaaside loomine ja pilveühenduse loomine
  2. Disain
  3. Arendus
  4. Testimine ja viimistlemine

Mida me täpselt teeme:

Meil on ressursid:

X T (Hussein Tahmazov) – tööde juht

Maksim Tsikvasvili – CEO

Need on meie ülesanded, mida me panname:

Andmebaasis ja disainis:

Siin kavandate, kuidas ja kuhu andmed salvestatakse ning kuidas rakendus nendega suhtleb.

Arenduses, testimises ja viimistlises:

  • Arendus: Siin kirjutate koodi ja loote rakenduse põhifunktsioonid nagu linkide lühendamine ja kuvamine.
  • Testimine ja viimistlus: Siin kontrollite, kas rakendus töötab õigesti, parandate vead ja teete kasutajaliidese lõplikult valmis.

Töö progress:

Kui palju on juba tehtud ja kui palju on veel teha:

Siin on prioriteetide jaotus (jah, kõik on keskmise tähtsusega):

See on foorum, ülesanded on seal loetletud:

Ka viimase aja tegevust on näha – saad vaadata, mis just lisati:

KiirLink SWOT analüüs

Case vahendid

CASE-tööriistad aitavad rakendada nii töövahendeid kui ka meetodeid kvaliteetsete süsteemide loomiseks. Seega võivad vahendid olla ülesehitatud selliselt, et nad toetavad ja soodustavad konkreetse arendusmeetodi kasutamist.

CASE-vahendeid võib nende konkreetse otstarbe järgi klassifitseerida mitmel viisil. Süsteemiarenduse elutsüklit toetavad CASE-vahendid jaotatakse näiteks kahte kategooriasse:

  • „ülemise taseme” CASE-vahendid (upper CASE tools) toetavad analüüsi ja projekteerimist. Peamiselt on nad kasutusel kasutajanõuete analüüsimisel ja dokumenteerimisel. Nad on ennekõike mõeldud visualiseerimiseks, erinevate skeemide koostamiseks ja ka dokumentatsiooni genereerimiseks. nad toetavad traditsiooniliste diagrammikeelte kasutamist (olem-seos diagrammid, andmemudelid, UML-skeemid, jne).
  • „alumise taseme” CASE vahendid (lower CASE tools) keskenduvad teostusele, kus mudelitest saab tegelik tarkvaratoode. Nad toetavad andmebaasi struktuuri genereerimist, koodi genereerimist, testide läbiviimist, koodi versioonihaldust, konfiguratsioonihaldust, pöördprojekteerimist jms.

CASE vahendid võivad olla mõne kitsa tegevuse toetuseks, kuid uuem suund on vahendid integreerida, et süsteemiarenduse erinevatel etappidel loodud dokumentatsioon, mudelid, kood, testid jne oleksid paremini omavahel seostatavad. Seetõttu on ühte tarkvarasse ühendatud ka alumise ja ülemise taseme CASE vahendid.

Veebivahendid (web-based tööriistad, mida saab kasutada)

Kuna sa soovisid web-based varianti ja “free tool”:

  • SonarQube (self-hosted): web UI tuleb kaasa, aga peab jooksma sinu masinas/serveris (Docker on levinud).
  • SonarQube Cloud (SonarCloud): Sonari SaaS veebipõhine lahendus, integreerub repo ja CI-ga; PR-analüüsi tingimused sõltuvad plaanist. (docs.sonarsource.com)

Lisaks Sonariga koos (veebis, DevOps-i kontekstis):

  • GitHub Actions / GitLab CI pipeline tulemused + Sonari “checks”.
  • Koodireview veebis (GitHub / GitLab) + Sonari kommentaarid/raport (sõltub seadistusest ja plaanist).

Praktiline näide (tee ise + ekraanitõmmis Padletisse)

Allpool on lihtne praktiline demo, mida saad teha oma arvutis (tulemus on SonarQube web UI, seega “web-based” nõue on täidetud).

Variant A: SonarQube Community (tasuta) + Docker + “sonar-scanner”

Eesmärk: käivitada SonarQube lokaalselt ja analüüsida ühte väikest projekti.

1) Käivita SonarQube Dockeriga

  • Paigalda Docker Desktop.
  • Käivita:
docker run -d --name sonarqube -p 9000:9000 sonarqube:lts-community

Ava brauseris: http://localhost:9000

2) Logi sisse

  • Tavaliselt esmane login on (klassikaline SonarQube): admin / admin (süsteem palub parooli vahetada).

3) Loo projekt SonarQube UI-s

  • “Create project” → vali “Manually”.
  • Genereeri token (access token) scannerile.

4) Tee testprojekt (näiteks väike Java/JS repo) Näide JS failist, kus on “code smell”:

demo.js

function test(a, a) { // duplicate parameter name (bad practice)
  if (a == null) {    // weak comparison / potential smell
    console.log("null");
  }
}

5) Käivita skänner

  • Paigalda sonar-scanner (või kasuta scanneri Dockerit).
  • Käivita skännimine vastavalt SonarQube UI poolt antud käskudele (SonarQube annab täpsed käsud projekti seadistuses).

6) Vaata tulemust web UI-s

  • Ava projekt → “Issues” ja “Overview”.
  • Näed leitud “Code Smells/Bugs” ja Quality Gate staatust.

Padleti ekraanitõmmis (kohustuslik osa):

  • Tee screenshot lehelt, kus on näha:
    • projekti nimi
    • “Quality Gate” staatus
    • vähemalt 1–2 leitud issue’it (Issues vaade)
  • Lisa pilt Padletisse Husseinchik (reminder to myself)

Küsimused

Mindmap ()

Allikad

  • SonarSource – SonarQube (toote ülevaade). (sonarsource.com)
  • SonarSource blogi – SonarQube editions võrdlus (Community vs Developer vs Enterprise vs Data Center). (sonarsource.com)
  • Sonar Documentation – SonarQube Cloud Pull Request analysis (free plaani piirangud jms). (docs.sonarsource.com)
  • SonarSource – SonarQube Cloud (SonarCloud) toote ülevaade. (sonarsource.com)
  • PMD GitHub README (PMD kirjeldus ja CPD duplikaadidetektor). (github.com)

UML skeemid

Ühtne modelleerimiskeel (UML) on standardiseeritud üldotstarbeline modelleerimiskeel, mida kasutatakse tarkvaraintensiivsete süsteemide visualiseerimiseks, täpsustamiseks, konstrueerimiseks ja dokumenteerimiseks ning mille on välja töötanud Object Management Group (OMG). See pakub ühist graafiliste märkide kogumit objektorienteeritud tarkvara disainiks, aidates kaasa suhtlemisele ja projektide planeerimisele.

Kasutuslooskeem (Use case diagram) диаграмма прецедентов: Kasutuslooskeeme kasutatakse süsteemi moodustavate tähtsaimate elementide ja protsesside määramiseks. Primaarelemente nimetatakse “aktoriteks” (эктор) ning protsesse “kasutuslugudeks” (прецедент). Kasutuslooskeem näitab, millised aktorid suhtlevad iga kasutususlooga.

Klassiskeem (Class diagram) Диаграмма классов: Klassiskeemi kasutatakse nö. kasutuslooskeemi viimistlemiseks ning üksikasjaliku süsteemidisaini määramiseks. Klassiskeem liigitab kasutuslooskeemil määratud aktorid omavahel seotud klasside kogumiks. Klassidevaheline suhe või assotsiatsioon võib olla kas “on” või “omab” tüüpi. Iga klassiskeemil toodud klass on võimeline pakkuma teatud funktsionaalsust. Neid nimetatakse klassi meetoditeks. Lisaks sellele on igal klassil olemas rida atribuute mis määravad klassi üheselt.

Objektiskeem (Object diagram) Диаграмма объектов: objektskeem on teatud tüüpi klassiskeem. Objekt esitab klassi olekut teatud ajahetkel süsteemi töö käigus. Objektiskeem esitab süsteemi erinevate klasside olekuid ning nendevahelisi relatsioone või assotsiatsioone teatud ajahetkel.

Olekuskeem (State Diagram) Диаграмма состояний: nagu ka nimi ütleb näitab olekuskeem erinevaid olekuid, mida läbivad süsteemis olevad objektid oma elutsükli jooksul. Süsteemis olevad objektid muudavad oma olekut vastavalt süsteemis toimuvatele sündmustele. Lisaks sellele näitab olekuskeem ka objekti oleku üleminekut algolekust lõppolekusse vastavalt süsteemi mõjutavatele sündmustele.

Tegevusskeem (Activity diagram) Диаграмма активности: protsesside kulgemist süsteemis kirjeldatakse tegevusskeemi abil. Sarnaselt olekuskeemile koosneb ka tegevusskeem toimingutest, tegevustest, üleminekutest, alg- ja lõppolekust ning tõkisetingimustest

Jadaskeem (Sequence diagram) Диаграмма последовательности: jadaskeem esitab süsteemi objektide omavahelist suhtlemist. Jadaskeemi oluliseks omaduseks on selle ajaline järjestus. S.o. esitatakse samm-sammult täpne objektide vaheline interaktsioon. Erinevad objektid jadaskeemil suhtlevad omavahel “sõnumite” edastamise kaudu.

Koostööskeem (Collaboration diagram) Диаграмма взатмодействия: koostööskeem grupeerib erinevate objektide vahelise interaktsiooni. Interaktsioonid esitatakse nummerdatuna, mis lubab jälgida nende toimumise järjekorda. Koostööskeem lubab kindlaks teha kõikvõimalikud interaktsioonid mis igat objekti teistega seovad.

Komponentskeem (Component diagram) Схема компонентов: komponentskeemi abil kujutatakse kõrgtaseme osi, millest süsteem koosneb. See skeem esitab millised komponendid süsteemi moodustavad ning kuidas nad omavahel seotud on. Levitusskeem (Deployment diagram): levitusskeemi abil kujutatakse rakenduse käitusaegeseid elemente.

Olemi – suhteskeem (Database diagram, диаграмма баз данных ):

Tarkvaraarenduse elutsükkel (SDLC)

Tarkvaraarenduse elutsükkel (SDLC) on struktureeritud raamistik, mida organisatsioonid kasutavad kvaliteetse tarkvara kavandamiseks, arendamiseks ja testimiseks. See defineerib kogu tarkvara tootmisprotsessi alates esialgsest ideest kuni lõpliku juurutamise ja hoolduseni. SDLC peamine eesmärk on luua tarkvara, mis vastab või ületab kliendi ootusi, valmib planeeritud ajal ja eelarve piires ning on tõhusalt hooldatav.

Tüüpiline SDLC koosneb seitsmest põhietapist:

  1. Planeerimine ja nõuete analüüs: Projekti ulatuse, teostatavuse ja vajalike ressursside määratlemine.
  2. Nõuete määratlemine: Funktsionaalsete ja mittefunktsionaalsete nõuete dokumenteerimine tarkvara nõuete spetsifikatsioonis (SRS).
  3. Arhitektuuri projekteerimine: Tehnilise eskiisi loomine, mis sisaldab süsteemi üldist arhitektuuri ja üksikasjalikku loogikat.
  4. Arendus (kodeerimine): Etapp, kus tarkvara tegelikult valmis kirjutatakse.
  5. Testimine: Vigade leidmine ja parandamine, et tagada vastavus nõuetele.
  6. Juurutamine: Tarkvara vabastamine lõppkasutajatele.
  7. Hooldus: Jooksev vigade parandamine, uuendamine ja jõudluse optimeerimine.

Erinevad mudelid on vajalikud, kuna projektide vajadused on väga erinevad. Valik sõltub sellistest teguritest nagu nõuete stabiilsus, riskitase, projekti suurus ja turule jõudmise aeg. Näiteks turvakatsetusi nõudev lennujuhtimissüsteem eeldab ranget V-mudelit, samas kui idufirma, mis alles otsib oma kohta turul, vajab Agile’i pakutavat paindlikkust ja kiiret tagasisidet. Sobiva mudeli puudumine võib viia kaootilise arendusprotsessi, eelarve ületamise või vigase toodeni.

SDLC mudelite võrdlustabel

Mudeli nimiVõtmefunktsioonidPlussidMiinusedMillal kasutada
Waterfall (Kosk)Lineaarne ja järjestikune; iga etapp peab lõppema enne järgmise algust.Ennustatav lõpptoode, minimaalne ulatuse muutumine ja selged rollid.Äärmiselt jäik; vead avastatakse sageli alles tsükli lõpus.Suured, keerulised projektid, millel on väga täpsed ja muutumatud nõuded.
IteratiivneAlustatakse väikese osaga nõuetest ja arendatakse tarkvara korduvate tsüklite kaudu.Varajane töötav mudel; disainivigu on lihtsam varakult leida ja parandada.Suur juhtimiskeerukus; vajab kvalifitseeritud riskianalüüsi ressursse.Suured, missioonikriitilised projektid, kus funktsionaalsus võib ajas evolueeruda.
Spiral (Spiraal)Riskipõhine mudel, mis kombineerib kose ja iteratiivse mudeli elemente.Suurepärane riskihaldus; võimaldab muudatusi ka hilisemates etappides.Võib olla kallis; nõuab sügavat ekspertiisi riskide hindamisel.Suuremahulised ja kõrge riskiga projektid keeruliste nõuetega.
Agile (Scrum/ Kanban)Rõhutab kiiret iteratsiooni, autonoomiat ja paindlikkust “Sprintide” kaudu.Kõrge kliendiväärtus sagedaste uuenduste kaudu; reageerib kiiresti turu muutustele.Lõtv planeerimine võib viia ennustamatu lõpptähtaja ja kuupäevade nihkumiseni.Projektid, mis alles otsivad turuväljundit või kus nõuded on pidevas muutmises.
V-mudelIga arendusetapp on paaritatud vastava testimisetapiga (kontroll ja valideerimine).Vigade varajane tuvastamine ja selge jälgitavus nõuete ja testide vahel.Jäik ja paindumatu; muudatused on pärast arenduse algust kulukad.Väikesed kuni keskmised projektid stabiilsete nõuetega või reguleeritud tööstusharud.

Analüüs

  • Milline mudel on parim väikese projekti jaoks? Väikeste projektide jaoks on sobivaim V-mudel, eeldusel et nõuded on stabiilsed. Samuti võib lihtsate projektide puhul kasutada Waterfall-mudelit, kus etapid võivad kattuda. Allikate kohaselt ei sobi iteratiivne ja spiraalmudel väikestele projektidele, kuna nende jagamine väikesteks osadeks on keeruline ja kulukas.
  • Milline mudel on parim suurettevõtte jaoks? Suurettevõtetele sobivad mitmed mudelid sõltuvalt projekti iseloomust: Waterfall on kasulik suurte ja keeruliste projektide puhul, kus nõuded on fikseeritud. Samas on iteratiivne mudel parem suurte ja missioonikriitiliste projektide jaoks, kuna see võimaldab paralleelset arendust ja varajasi tulemusi. Spiraalmudel on loodud spetsiaalselt suuremahuliste ja keeruliste süsteemide jaoks, kus riskide analüüs on kriitilise tähtsusega.
  • Milline mudel on parim kiiresti muutuvate nõuetega projekti jaoks? Kiiresti muutuvate nõuete puhul on parim valik Agile, kuna see on loodud prioritiseerima paindlikkust ja kiiret reageerimist. Agile tervitab nõuete muutumist isegi arenduse hilises etapis. Ka spiraalmudel on hea kandidaat, kui muudatusi võib vaja minna igal ajal, kuna see on oma olemuselt iteratiivne ja keskendub riskidele. Iteratiivne mudel toetab küll muutusi paremini kui kosemudel, kuid see on vähem paindlik kui Agile.

Mõttekaart

Kontrollküsimustik

e) Kontrollküsimustik

Valikvastustega küsimused (MCQ):

  1. Milline mudel on tuntud kui “Verifitseerimise ja Valideerimise” mudel? a) Agile b) Koskmudel c) V-mudel d) Spiraalmudel
  2. Mida tähendab “Sprint” Agile-metoodikas? a) Vigade parandamise etapp b) 1–4 nädala pikkune töötsükkel c) Kiire koosolek d) Kliendi esitlus
  3. Milline on spiraalmudeli peamine fookus? a) Kiirus b) Dokumentatsioon c) Riskihaldus d) Madal hind
  4. Koskmudelis algab testimine tavaliselt: a) Paralleelselt disainiga b) Enne arendust c) Pärast arenduse lõppu d) Iga nädal
  5. Milline dokument on SDLC-s “arendusmeeskonna piibel”? a) Projektigraafik b) SRS (Software Requirement Specification) c) Testiplaan d) Eelarvearuanne

Avatud küsimused:

  1. Selgitage, miks on vigade leidmine koskmudelis kulukam kui V-mudelis või Agile-is.
  2. Kirjeldage spiraalmudeli nelja peamist faasi.
  3. Millised on Agile-metoodika suurimad riskid seoses projekti planeerimisega?

Esitlus

Esitlus

Aruteluküsimused klassis

  1. Kas on olukordi, kus vana kooli koskmudel on tegelikult parem kui kaasaegne Agile? Tooge näiteid.
  2. Kui te arendaksite tarkvara südamestimulaatorile, millise mudeli valiksite ja miks?
  3. Agile rõhutab inimeste ja suhtluse olulisust protsesside asemel. Kas see võib suurtes ettevõtetes tekitada probleeme?
  4. Kuidas mõjutab tehisintellekti ja automatiseerimise levik traditsioonilisi SDLC mudeleid (nt DevSecOps kontekstis)?
  5. Miks on kliendi pidev kaasatus (Agile) mõnikord keeruline teostada reaalsetes äritingimustes?

Isiklik refleksioon

Selle ülesande täitmine andis mulle selge ülevaate, et tarkvaraarendus ei ole ainult koodi kirjutamine, vaid põhjalikult planeeritud protsess. Mind üllatas kõige rohkem Spiraalmudeli keerukus ja see, kui oluline on tegelikult riskide maandamine suurprojektide puhul. Edaspidi oskan paremini hinnata, miks mõni projekt ebaõnnestub – tihti on põhjuseks lihtsalt valesti valitud arendusmudel.

Kasutatud allikad

Artikkel: Agile vs. Waterfall | Pros, Cons, and Key Differences

Veebiallikas: Principles behind the Agile Manifesto

Veebileht: Tutorials Point: SDLC – Iterative Model

Veebiallikas: GeeksforGeeks: Software Development Life Cycle (SDLC)

Veebileht: Wikipedia: Software development process

Veebileht: Guru99: Spiral Model: When to Use? Advantages and Disadvantages

Veebileht: Guru99: V-Model in Software Testing

Jira: Scrum project

Sissejuhatus

Selles projektis kasutasin Scrum metoodikat ja Atlassian Jira tarkvara, et planeerida, hallata ja jälgida dünaamilise veebilehe arendusprotsessi. Kogu arendustsükkel jagati loogilisteks etappideks (Epics) ja jaotati nelja sprinti. Projekt valmis iseseisva tööna. Allpool on visuaalne ülevaade projekti haldusest.

Tööplaan

Tööplaanist (Timeline) on näha kõikide peamiste ülesannete ajaline jaotus, nende eeldatav kestus ning omavahelised seosed. See vaade aitas planeerida, millal toimub ettevalmistus ja millal algab reaalne koodikirjutamine.

Sprindid

Projekti töömaht jaotati neljaks sprintiks, millest igaüks kestab ühe nädala:

  1. Sprint 1: Ettevalmistus (nõuded, disain).
  2. Sprint 2: Andmebaasi loomine.
  3. Sprint 3: Kodeerimine ja funktsionaalsus.
  4. Sprint 4: Testimine ja hindamine.

Pildil on näha, kuidas ülesanded on sprintide vahel jagatud – aktiivne sprint on käivitatud ja ülejäänud ootavad oma järge.

Igapäevane töölaud

Iga ülesanne (Task) liigub vastavalt oma elutsüklile loogilistes tulpades: “Tegemata” (To Do), “Töös” (In Progress) ja “Valmis” (Done). See Kanban-tüüpi vaade andis hea visuaalse ülevaate hetkeseisust ja aitas fookust hoida.

GitHubi integratsioon

Sujuvaks koodihalduseks ja versioonikontrolliks sidusin Jira projekti GitHubiga. See võimaldas siduda koodimuudatused (commitid) ja harud (branches) otse vastavate Jira ülesannetega, tagades täieliku läbipaistvuse õpetajale ja lihtsustades arendust.

Web Design

Tabel: Responsive vs Adaptive Web Design

OmadusResponsive Web Design (RWD)Adaptive Web Design (AWD)
Põhimõte“Voolav” disain. Sisu kohandub sujuvalt iga ekraanisuurusega, kasutades protsente ja paindlikke ruudustikke (fluid grids).“Fikseeritud” disain. Tuvastab seadme ja laeb sellele konkreetsele seadmele (nt mobiil, tahvel) mõeldud kindla paigutuse (layout).
TehnikaKasutab peamiselt CSS Media Queries (@media) ja suhtelisi ühikuid (%vwvh).Kasutab mitut erinevat fikseeritud paigutust (nt 320px, 768px, 1024px) ja serveripoolset või JavaScripti tuvastust.
KasutajakogemusÜhtlane kogemus kõigil seadmetel, kuid disain võib vahepealsetel suurustel veidi “katki” minna, kui pole hästi optimeeritud.Väga täpne kontroll kindlate seadmete üle, kuid ei pruugi sobida ebatavaliste ekraanisuurustega seadmetele (nt uued volditavad telefonid).
KeerukusLihtsam alustada, üks HTML/CSS koodibaas.Keerulisem arendada, kuna tuleb luua ja hallata mitut erinevat paigutust.

Koodi näited

Responsive (CSS näide): Üks disain, mis muutub sujuvalt.

/* Põhistiil (Desktop) */
.container {
  width: 100%;
  display: flex;
}

/* Mobiilivaade - elemendid lähevad üksteise alla */
@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

Adaptive (Kontseptuaalne näide): Erinevad fikseeritud laiused vastavalt seadmele (tihti lahendatakse see ka JavaScripti või eraldi CSS failidega).

/* Fikseeritud laius mobiilile */
@media screen and (max-width: 480px) {
  .container {
    width: 320px; /* Kindel laius */
    margin: 0 auto;
  }
}

/* Fikseeritud laius tahvlile */
@media screen and (min-width: 481px) and (max-width: 1024px) {
  .container {
    width: 760px; /* Kindel laius */
    margin: 0 auto;
  }
}

Kokkuvõte (Minu arvamus)

Minu hinnangul on Responsive Web Design (RWD) tänapäeval parem valik enamike veebilehtede jaoks.

  • Põhjendus: Google eelistab responsive disaini (SEO sõbralikkus). See on haldamise mõttes lihtsam, kuna on ainult üks koodibaas, mida uuendada. Adaptive disain on õigustatud vaid väga spetsiifiliste ja keerukate rakenduste puhul, kus mobiilikogemus peab drastiliselt erinema arvutikogemusest (nt pangarakendused või keerukad e-poed). Tavalise kodulehe jaoks on Responsive paindlikum ja tulevikukindlam (future-proof).

Kuidas parandada index.html (Responsive muutmine)

Et muuta oma index.html responsive (kohanduvaks), pead tegema kaks asja:

  1. Lisama HTML faili päisesse (<head> sisse) viewport meta tagi.
  2. Kasutama CSS-is Media Queries reegleid.

Kui sul on kood GitHubis, anna mulle repositooriumi nimi ja ma saan teha sulle Pull Requesti parandustega. Kui mitte, siis siin on juhis, mida pead faili lisama:

1. Lisa see rida <head> siltide vahele:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ilma selleta kuvab telefon veebilehte nagu väikest arvutiekraani (tekst on kribukirjas).

2. Lisa CSS faili (või <style> sisse) reeglid väikestele ekraanidele:

/* Näide: Muudame menüü vertikaalseks ja pildid paindlikuks */

/* Pildid ei tohi kunagi olla laiemad kui ekraan */
img {
  max-width: 100%;
  height: auto;
}

/* Mobiilivaade (ekraanid kitsamad kui 600px) */
@media screen and (max-width: 600px) {
  /* Peida suur menüü või tee see vertikaalseks */
  nav ul {
    flex-direction: column;
    padding: 0;
  }
  
  nav li {
    margin-bottom: 10px;
    text-align: center;
  }

  /* Tekstisuuruse kohandamine loetavamaks */
  body {
    font-size: 18px;
  }
}

React projekt

Mis on React?

React on JavaScripti raamatukogu kasutajaliideste loomiseks, eriti üheleheküljeliste rakenduste (SPA) arendamiseks React projekt.
See võimaldab jagada kasutajaliidese väikesteks, korduvkasutatavateks komponentideks.
React kasutab virtuaalset DOM-i, et muuta rakendused kiireks ja tõhusaks.
State ja props võimaldavad andmeid dünaamiliselt kuvada ja uuendada.
Seda kasutatakse tänapäeval paljudes suurtes veebirakendustes.

Mis on komponent?

Komponent on sõltumatu ja taaskasutatav osa kasutajaliidesest, mis tagastab JSX-i Reactis.

Milleks riiki kasutatakse?

State’i kasutatakse komponentide andmete salvestamiseks ja dünaamiliseks uuendamiseks, mis põhjustab kasutajaliidese automaatse uuesti renderdamise.

Miks on React kasulik veebirakenduste loomiseks?

React muudab koodi modulaarseks, kiireks ja lihtsasti hooldatavaks ning võimaldab luua interaktiivseid kasutajaliideseid.

Important terms

  • JSX – JavaScripti laiendus, mis võimaldab kirjutada Reactis HTML-i sarnast süntaksit.
  • Komponent – korduvkasutatav kasutajaliidese osa, mis tagastab JSX-i.
  • Props – vanemkomponendist alamkomponendile edastatavad andmed.
  • State – komponendi sisemised muutujad.

React project creation

React-projekti alustamiseks kasutatakse kõige sagedamini tööriista create-react-app või moodsamat Vite’i. (Ma kasutasin Visual Studio’t.)

# Powershell
npx create-react-app movie-library
cd movie-library
# Powershell
npm start

Kasutatakse Localhost:3000

Reacti installimise kohta: saate selle installida Dockeriga, kuid kõige lihtsam on see alla laadida Windowsist, see on seal all:

Link: https://nodejs.org/en/download
saate lihtsalt installida msi kaudu

Komponendid, mida me kasutame:

Pärast komponentide seadistamist jäävad alles muud failid ja md-failid, need võite lihtsalt alles jätta :3

App.js – see on peamine (juur)komponent. See sisaldab kogu rakenduse loogikat, haldab filmide nimekirja seisundit ja kutsub teisi komponente.

MovieList.js – Selle komponendi ülesanne on võtta vastu filmide nimekiri (props-ina) ja kuvada need. See toimib n-ö konteinerina filmikaartidele.

MovieCard.js – see on väikseim komponent, mis vastutab konkreetse filmi kohta teabe (pilt, pealkiri, aasta) kuvamise eest. Seda kasutatakse korduvalt iga filmi puhul.

Riigi kasutamine filmide näitamiseks

const movies = [
  { id: 1, title: "Inception", image: "https://m.media-amazon.com/images/I/912AErFSBHL._AC_SL1500_.jpg" },
  { id: 2, title: "Interstellar", image: "https://upload.wikimedia.org/wikipedia/en/b/bc/Interstellar_film_poster.jpg" },
  { id: 3, title: "The Matrix", image: "https://m.media-amazon.com/images/I/51EG732BV3L.jpg" },
  { id: 4, title: "Avatar", image: "https://m.media-amazon.com/images/I/41kTVLeW1CL._AC_.jpg" },
  { id: 5, title: "Titanic", image: "https://m.media-amazon.com/images/I/811lT7khIrL._SL1500_.jpg" }
];

Kui soovite pilte kuvada, peate need kopeerima ja kleepima pildi URL-ist.

Riigi kasutamine:

const [movieList, setMovieList] = useState(movies);

Kui olek muutub, renderdatakse kasutajaliides automaatselt uuesti.

Otsingufunktsiooni lisamine

Otsingu lisamiseks vajame kahte asja:

  1. Kohta, kuhu kasutaja kirjutab (input väli).
  2. Funktsiooni, mis filtreerib filme vastavalt sisestatud tekstile.

Tavaliselt tehakse seda nii, et luuakse uus state muutuja searchTerm ja kasutatakse API päringut või filter() meetodit.

Loogika:

  • Kasutaja kirjutab otsingukasti sõna (nt “Batman”).
  • onChange sündmus uuendab searchTerm olekut.
  • Vajutades otsingunuppu, käivitatakse funktsioon, mis otsib filme (kas API-st või olemasolevast massiivist), mille pealkiri sisaldab sõna “Batman”.

Sisend:

<input
  type="text"
  placeholder="Search movie..."
  onChange={(e) => setSearch(e.target.value)}
/>

Filtreerimine:

const filteredMovies = movieList.filter(movie =>
  movie.title.toLowerCase().includes(search.toLowerCase())
);

Tulemused: