Alkalmazások fejlesztése

4. gyakorlat

Horváth Győző
Egyetemi adjunktus
1117 Budapest, Pázmány Péter sétány 1/c., 2.420-as szoba
Tel: (1) 372-2500/1816
horvath.gyozo@inf.elte.hu

Tartalomjegyzék

  • Szerveroldali webprogramozás
  • Mintafeladat
  • Tervezési lépések
  • Megvalósítás JavaScript keretrendszerben (AdonisJS)
  • Routing, vezérlők, nézetek, statikus adatok

Szerveroldali webprogramozás

Kliens-szerver architektúra

Alkalmazásszerver koncepciók

Modell-Nézet-Vezérlő minta

Modell-Nézet-Vezérlő minta

Angolul: Model-View-Controller (MVC)

  • Modell: adatok és feldolgozási logika (adatbázis)
  • Nézet: a kimenet
  • Vezérlő: folyamatirányítás, kérés fogadása, feldolgozása

MVC keretrendszerek a szerveroldalon

  • Java: Spring, Struts2
  • .NET: ASP.NET MVC
  • Ruby: Ruby on Rails
  • Python: Django
  • PHP: Laravel, Codeigniter, Zend, Symfony2, ...
  • JavaScript: AdonisJs, Sails, Kraken, ...

Mintafeladat tervezése

Feladat

Recepteket kezelő alkalmazás készítése

Tervezés lépései

  • Követelményanalízis
    • funkcionális és nem funkcionális elvárások
    • szakterületi fogalomjegyzék
    • használatieset-modell: szerepkörök, használati esetek, folyamatok meghatározása
  • Tervezés
    • Architektúra terv: oldaltérkép, végpontok
    • Felhasználóifelület-modell: oldalvázlatok, designterv
    • Osztálymodell: adatmodell, adatbázisterv, állapotdiagram
    • Dinamikus működés: szekvenciadiagram

További információ

Követelmények összegyűjtése

  • Funkcionális elvárások
    • nyújtandó szolgáltatások ismertetése
  • Nem funkcionális követelmények
    • használhatóság
    • teljesítmény
    • rendelkezésre állás
    • skálázhatóság
    • biztonság
    • karbantarthatóság

Receptek

Funkcionális követelmények

  • Vendégként a főoldalon szeretnék kiemelt recepteket látni kategóriánként.
  • Vendégként szeretnék a receptek között szabadon böngészni.
  • Vendégként szeretnék egy receptleírást megtekinteni.
  • Vendégként szeretnék receptet keresni.
  • Vendégként szeretnék tudni regisztrálni az oldalra.

Receptek

Funkcionális követelmények

  • Felhasználóként szeretnék tudni bejelentkezni az oldalra.
  • Felhasználóként szeretném tudni a profiladataimat szerkeszteni.
  • Felhasználóként szeretnék új receptet beküldeni.
  • Felhasználóként szeretném a saját recpetjeimet módosítani vagy törölni.

Receptek

Nem funkcionális követelmények

  • Felhasználóbarát, ergonomikus elrendezés és kinézet.
  • Gyors működés.
  • Biztonságos működés: jelszavak tárolása, funkciókhoz való hozzáférés.

Szakterületi fogalomjegyzék

  • Recept: étel elkészítéséhez szükséges hozzávalók és az elkészítés lépéseit tartalmazó leírás.

Szerepkörök

  • jogosultsági csoportok
  • elérhető funkciók

Szerepkörök (Receptek)

  • vendég: receptek keresését, böngészését és megtekintését végezheti.
  • felhasználó: a vendég szerepkörén túl a saját receptjeinek kezelésére (új, módosít, törlés) képes.

Használati esetek

Szerepkörökhöz tartozó használati esetek.

Használati eset diagram.

nomnoml/ArgoUML

Használati esetek (Receptek)

Használati eset diagram
Használati eset diagram

Folyamatok meghatározása

Az egyes használati esetek részletes folyamatai.

UML Activity Diagram.

nomnoml/ArgoUML

Folyamatok meghatározása (Receptek)

  • felhasználó
    • Új recept felvételének folyamata
      Új recept felvételének folyamata
    • Bejelentkezés folyamata
      Bejelentkezés folyamata
  • vendég
    • keresés egy receptre

Oldaltérkép

Az egyes oldalak egymáshoz viszonyított kapcsolatai.

Tipikusan hierarchikus, ritkán topografikus kapcsolati rendszer.

Szöveges/Grafikus megadás

Oldaltérkép (Receptek)

Publikus:

- Főoldal
- Receptek böngészése
    + Recept megtekintése
- Belépés
- Regisztráció

Felhasználó

- Kilépés
- Profiladatok
    + Profiladatok szerkesztése
- Új recept felvitele
- Hibalista
    + hiba megtekintése
        * hiba módosítása
        * megjegyzés hozzáfűzése

Végpontok

Az egyes oldalak elérhetősége.

Szemantikus URI-k.

Végpontok (Receptek)

  • GET /: főoldal
  • GET /login: bejelentkező oldal
  • POST /login: bejelentkezési adatok felküldése
  • GET /profile: profiladatok
  • GET /recipes: receptlista
  • GET /recipes/:id: recept megtekintése
  • GET /recipes/create: új recept felvitele, űrlap megjelenítése
  • POST /recipes/create: új recept felvitele, adatok küldése

Oldalvázlatok

Az egyes oldalak körülbelüli elrendezése.

Kölcsönös hatással az adattartalomra és funkciókra.

Drótvázkészítés, mockup.

Lumzy/Táblázatkezelő/Prezentációkészítő/Befotózott szabadkézi rajz

Oldalvázlatok (Receptek)

Főoldal
Főoldal

Oldalvázlatok (Receptek)

Böngészés
Böngészés

Oldalvázlatok (Receptek)

Recept megtekintése
Recept megtekintése

Oldalvázlatok (Receptek)

Új recept
Új recept

Adatmodell

Az alkalmazásban használatos adatok struktúrája.

Osztály- vagy objektumdiagram

nomnoml/ArgoUML

Adatmodell (Receptek)

Adatmodell
Adatmodell

Adatbázisterv

Az adatok tárolásához szükséges struktúra.

Táblaleírások, mezőnkénti kifejtéssel.

Függ a választott adatbázis-kezelő rendszertől.

Relációs adatbázisoknál nem kell.

nomnoml/ArgoUML

Állapotdiagram

Az alkalmazásban használt állapotátmenetek definiálása.

nomnoml/ArgoUML

Állapotdiagram (Receptek)

Egyelőre nincs a feladatban.

Ötlet: új recept, előnézet vagy jóváhagyási fázis

Designtervek

Drótvázrajzok alapján.

Háttérképek, elrendezések, színek, stb.

Kép (GIMP, Photoshop)

--> Statikus oldalvázak, sablonok.

Designtervek (Receptek)

Kihagyható

CSS keretrendszer megfelelő kinézetet biztosít.

Környezet előkészítése

Fejlesztőkörnyezet

  • Lokálisan
  • Visual Studio Code
    • parancssor
  • Böngésző

Keretrendszer: AdonisJS

Telepítés előtt

Proxy miatt a git: protokoll átirányítása https:-re (parancssor):

git config --global url."https://".insteadOf git://

Telepítés

cd \Users\<user>\Desktop
npm i -g adonis-cli
\Users\<user>\AppData\Roaming\npm\adonis new receptek
cd receptek

VAGY

cd \Users\<user>\Desktop
npm i adonis-cli
node_modules\.bin\adonis new receptek
cd receptek

Telepítés után

  • A package.json fájlban a --harmony-proxies törlése.
  • Indítás: npm start
  • Fejlesztéshez: npm run dev

Lépések

  • ace parancssori eszköz használata (node ace)
  • Routing (app/Http/routes.js)
    • Callback function (response.send('valami'))
    • Callback function (yield response.sendView('home'))
    • route.render()
  • View-k létrehozása (főoldal)
    • ./ace make:view main
    • master view
    • Bootswatch
    • public/styles.css
  • Vezérlők
    • ./ace make:controller Post
    • Route.get('/', 'PostController.index')
    • Statikus adatokkal kipróbálni a view-kat

Önálló feladat

Készítsd el a következő oldalak dinamikus sablonját beégetett példaadatokkal!

  • recept megjelenítése
  • receptek böngészése

Végül: mentés Githubra

  • üres repo létrehozása
  • git init
  • git add .
  • git commit -m""
  • git remote beállítása
  • git push