Trello

A következő feladat során, egy olyan webalkalmazást kell elkészítened, amely a Trello API-ját felhasználva egy funkcionális frontend felületet biztosít annak.

Dizájn

A feladat során a dizájnra semmilyen utasítást nem fog tartalmazni a feladat, így teljes mértékben rád van bízva a pontos megvalósítás.

Könyvtárszerkezet

A következők alapján alakítsd ki a könyvtárszerkezetedet:

  • index.html
  • board.html
  • src/
    • assets/
      • css/
    • models/
    • utils/
      • constants.mjs
    • main.mjs

Az assets/css könyvtár tartalmazza a stíluslapokat. A models könyvtár fogja a model osztályokat tartalmazni. Az utils kiegészítő funkciókat lát el, pl: konstansok tárolása. További fájlokat a megfelelő könyvtárakban tudod létrehozni. Amennyiben ES scripteket hozol létre, akkor azokat kezeld modulként. A főprogram pedig fusson szigorú módban.

Fejlesztői kulcs

Az alábbiakban megtalálod a feljelsztői kulcsot és az alatta megtalálható linkre kattintva tudod engedélyezni fiókodon a fejlesztői módot. Ekkor megkapod azt a tokent, amivel a saját adataidat tudod lekérni a továbbiakban.

API kulcs: f552a9954b3416295dfaab9812b26529

Token lekérés: ezen a linken

Készíts egy objektumot a constants.mjs fájlba, ahova felveszed a kulcsot is és a tokent is, a későbbienkben szükséged lesz rá.

Modelek

Készíts osztályt a táblák, listák valamint kártyák tárolására.

Ezek elkészítéséhez használd fel a REST dokumentációt, de ügyelj rá, hogy csak olyan adatot tárolja, amelyekre valóban szükséged van.

Végpontok

Táblák

MetódusURL LeírásDokumentáció
GEThttps://api.trello.com/1/members/me/boards Megadja az összes tábla összes adatátLink
POSThttps://api.trello.com/1/boards/?name={name} Létrehoz egy táblátLink
PUThttps://api.trello.com/1/boards/{boardId} Frissíti a táblátLink
DELETEhttps://api.trello.com/1/boards/{boardId} Törli a megadott táblátLink

Listák

MetódusURL LeírásDokumentáció
GEThttps://api.trello.com/1/boards/{boardId}/lists Megadja az összes listát az adott táblánLink
POSThttps://api.trello.com/1/lists?name={name}&idBoard={boardId} Létrehoz egy listát a megadott táblánLink
PUThttps://api.trello.com/1/lists/{listId} Módosítja az adott listátLink
PUThttps://api.trello.com/1/lists/{listId}/closed Archiválja a megadott listátLink

Kártyák

MetódusURL LeírásDokumentáció
GEThttps://api.trello.com/1/lists/{listId}/cards Megadja az adott listán található összes kártya adatátLink
POSThttps://api.trello.com/1/cards?idList={listId} Létrehoz egy új kártyát az adott listánLink
PUThttps://api.trello.com/1/cards/{cardId} Módosít az adott kártyámLink
DELETEhttps://api.trello.com/1/cards/{cardId} Törli az adott kártyátLink

A {}-lel jelölt változókat a megfelelő adatokkal töltsük fel.

Mindent GET-es paraméterként vár a Trello api ezért mindent ?a=1&b=2 fromában adjunk meg, tehát a tábla/lista/kártya nevét, egyéb módosítani kívánt paraméterét a dokumentáció alapján!
Ügyeljünk rá, hogy mindig minden kéréshez adjuk hozzá a key= és a token= paramétereket!

HTML oldalak

A főoldalon betöltéskor jelenjenek meg a saját tábláid, legyen lehetőséged újat létrehozni, módosítani, törölni is. Az egyes táblákhoz tartozzon hivatkozás amely átvezet a board.html oldalraés GET-es paraméterként átadja a tábla id-ját.

A board.html A GET-es paraméterben kapott id alapján kérdezzel le az adott tábla adatait. Jelenítsd meg a listákat és a hozzájuk tartozó kártyákat. Mindkét esetben legyen lehetőség a fennmaradó 3 CRUD művelet elvégzésére.

\pagebreak
Table of Contents