Fejlessz önállóan!

  • Fejlesztés lokálisan Node.js backend-del
  • Recept nyilvántartó app építése
  • Dinamikusan bővíthető lista létrehozása

Kihívás! Hozd létre az alábbi single page appot!

A szerver programot letöltheted a saját gépedre, így kedvedre kísérletezhetsz.

 

React App

 

Útmutató

 

Szerver elindítása:

  1. Töltsd le az alábbi állományt és tömörítsd ki egy mappába
    Recept app Node.js szerver letöltése
  2. npm install paranccsal telepítsd a harmadik féltől származó könyvtárakat
  3. Ha kész a telepítés, indítsd el a szervert, a node index.js paranccsal
  4. A szerver a http://localhost:9090 URL-en fogadja a kéréseket

 

Megszólítható endpointok:

 

Method Útvonal Funkcionalitás
GET "/api/recipes" Összes recept kilistázása
GET "/api/recipes/:recipeSlug" Egyetlen recept lekérése slug alapján
POST "/api/recipes" Új recept létrehozása
PUT "/api/recipes/:id" Recept felülírása id alapján
DELETE "/api/recipes/:id" Recept törlése id alapján

A képek a "/static/images" publikus mappába mentődnek, így a React appodból innen tudod őket megszerezni.

Az egyéb statikus fájlok (pl a logó), a "/static/assets" mappából nyerhetőek ki!

 

Egyetlen recept sémája a következő:

 

  {
    "id": string,
    "name": string,
    "slug": string,
    "ingredients": [
      {
        "name": string,
        "quantity": string,
        "type": string
      },
      ...
    ],
    "steps": [
      {
        "content": string,
        "timer": string
      },
      ...
    ],
    "imageURL": string
  }

Ajánlott komponens felosztás:

  •  App
  •  Home
  •  RecipeList
  •  RecipeSingle
  •  RecipeCreate
  •  RecipeEdit
  •  Modal
  •  Spinner

 

Ajánlott harmadik féltől származó könyvtárak:

Create React App:

  • npx create-react-app‎

 

Ikonok:

  • npm i --save @fortawesome/fontawesome-svg-core‏‏‎ ‎
  • npm i --save @fortawesome/free-solid-svg-icons
  • npm i --save @fortawesome/react-fontawesome

 

Útvonalválasztó:

  • npm i --save react-router-dom

 

Megjelenés:

  • npm i --save bootstrap

 

Sok sikert!

 

 

Megvalósítás:

Első rész:

(Üdvözlő képernyő, recept lista, törlés modal)


 

Második rész:

(Létrehozó form, szerkesztő form, megtekintő oldal)

 

Nézd meg a slide-okat

Kisokos

Leghasznosabb Visual Studio Code gyorsbillentyűk

A "Keyboard shortcuts" alatt állíthatók be a VSCode-ban

Művelet

Megnevezés

Kijelölés duplikálása

Duplicate Selection

Keresés

Find

Keresés és csere

Replace

Kijelölés mozgatása fel

Move Line Up

Kijelölés mozgatása le

Move Line Down

Dokumentum automatikus formázása

(A VSCode első formázáskor felszólíthat, hogy tölts le egy formázó plugint. Ilyen pl a Prettier plugin)

Format Document

Gyakori Docker parancsok

Művelet

Parancs

Összes konténer leállítása

(Akkor hasznos, amikor port ütközést tapasztalsz, egy másik futó konténer miatt)

docker stop $(docker ps -a -q)

Összes konténer eltávolítása

docker rm -f $(docker ps -a -q)

Konténerek indítása egy adott projektben

docker-compose up

Docker image-ek újraépítése és konténerek indítása

(Leginkább akkor hasznos, amikor újra akarod építeni az adatbázist)

docker-compose up --build

Konténerek leállítása és eltávolítása egy adott projektben

docker-compose down

Image-ek kitörlése

(Idővel felgyűnek az image-ek és egyre több helyet foglalnak a gépeden. Ezt a parancsot pár havonta érdemes lefuttatni.)

docker image prune

Volume-ok törlése

(A volume-ok időnkénti törlésével több GB-nyi hely felszabadítható. Figyelem, adatvesztéssel járhat!)

docker volume prune



További ajánlott kurzusok:

A weboldalunkon cookie-kat használunk, hogy a legjobb felhasználói élményt nyújthassuk. Részletes leírás »