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.
Útmutató
Szerver elindítása:
- 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 - npm install paranccsal telepítsd a harmadik féltől származó könyvtárakat
- Ha kész a telepítés, indítsd el a szervert, a node index.js paranccsal
- 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@5.1
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)
Create és edit form egyszerűsítése
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 |
Ha tetszik a tartalom, akkor küldj Google értékelést!
Ezzel segítesz, hogy a Kódbázis képzései minél több emberhez eljussanak. Köszönöm!