third week

órai anyagok/week02/sections/02-routing.tex

@@ -0,0 +1,125 @@
+\section{Routing}
+
+\begin{frame}[fragile]{HTTP metódusok Express-ben}
+\footnotesize
+Minden HTTP metódushoz külön Express függvény tartozik, ami pontosan a metódus nevét viseli -- ez sokkal olvashatóbb, mint egy \texttt{if (req.method === ...)} lánc.
+
+\begin{lstlisting}[language=JavaScript,style=NodeJS]
+app.get('/users', (req, res) => { /* lista */ });
+app.post('/users', (req, res) => { /* letrehozas */ });
+app.get('/users/:id', (req, res) => { /* egy elem */ });
+app.put('/users/:id', (req, res) => { /* teljes frissites */ });
+app.patch('/users/:id', (req, res) => { /* reszleges frissites */ });
+app.delete('/users/:id', (req, res) => { /* torles */ });
+\end{lstlisting}
+
+\begin{block}{Emlékeztető}
+Ez pontosan a 2. héten (a jövő héten, amikor visszatérünk rá) tárgyalt CRUD $\to$ HTTP metódus táblázatot követi -- nem véletlen az egyezés.
+\end{block}
+\end{frame}
+
+\begin{frame}[fragile]{Route paraméterek és query stringek}
+\footnotesize
+Az útvonalban lévő \texttt{:id}-hez hasonló szegmenseket \textbf{route paramétereknek} hívjuk, a kérdőjel utáni \texttt{?key=value} részt pedig \textbf{query stringnek}. Express mindkettőt készen, feldolgozva adja át.
+
+\begin{lstlisting}[language=JavaScript,style=NodeJS]
+// GET /users/123?includeOrders=true
+app.get('/users/:id', (req, res) => {
+  const userId = req.params.id;        // "123"
+  const includeOrders = req.query.includeOrders; // "true"
+  res.json({ id: userId, includeOrders });
+});
+\end{lstlisting}
+
+\begin{itemize}
+\item \textbf{\texttt{req.params}:} az útvonal része, egy konkrét erőforrás azonosítására (\texttt{/users/:id})
+\item \textbf{\texttt{req.query}:} opcionális finomítás (lapozás, szűrés, rendezés)
+\end{itemize}
+\end{frame}
+
+\begin{frame}[fragile]{A kérés törzse: \texttt{req.body}}
+\footnotesize
+\texttt{POST}, \texttt{PUT} és \texttt{PATCH} kéréseknél az adat jellemzően a kérés törzsében (body) érkezik JSON formátumban -- ehhez szükséges az előző órán megismert \texttt{express.json()} middleware.
+
+\begin{lstlisting}[language=JavaScript,style=NodeJS]
+app.use(express.json());
+
+app.post('/users', (req, res) => {
+  const { name, email } = req.body;
+  const newUser = { id: Date.now(), name, email };
+  users.push(newUser);
+  res.status(201).json(newUser);
+});
+\end{lstlisting}
+
+\begin{block}{Emlékeztető az 1. hétről}
+A \texttt{201 Created} a helyes státuszkód sikeres \texttt{POST} esetén -- ezt már az 1. héten megismertük.
+\end{block}
+\end{frame}
+
+\begin{frame}[fragile]{Útvonalak szervezése: \texttt{express.Router()}}
+\footnotesize
+Ahogy nő az alkalmazás, egyetlen fájlban tartani az összes route-ot áttekinthetetlenné válik. Az \texttt{express.Router()} lehetővé teszi, hogy erőforrásonként külön fájlba szervezzük az útvonalakat.
+
+\begin{columns}
+\begin{column}{0.48\textwidth}
+\begin{block}{routes/users.js}
+\begin{lstlisting}[language=JavaScript,style=NodeJS]
+const router = express.Router();
+
+router.get('/', listUsers);
+router.post('/', createUser);
+
+module.exports = router;
+\end{lstlisting}
+\end{block}
+\end{column}
+\begin{column}{0.48\textwidth}
+\begin{block}{app.js}
+\begin{lstlisting}[language=JavaScript,style=NodeJS]
+const usersRouter =
+  require('./routes/users');
+
+app.use(
+  '/users',
+  usersRouter
+);
+\end{lstlisting}
+\end{block}
+\end{column}
+\end{columns}
+\end{frame}
+
+\begin{frame}[fragile]{Hibakezelés alapjai}
+\footnotesize
+Express két speciális esetet kezel middleware-ekkel: amikor egy útvonal nem létezik, és amikor egy route handler hibát dob.
+
+\begin{lstlisting}[language=JavaScript,style=NodeJS]
+// 404 - ha semelyik route nem illeszkedett
+app.use((req, res) => {
+  res.status(404).json({ error: 'Nem talalhato' });
+});
+
+// hibakezelo middleware -- negy parameter jelzi Expressnek!
+app.use((err, req, res, next) => {
+  console.error(err);
+  res.status(500).json({ error: 'Szerver hiba' });
+});
+\end{lstlisting}
+
+\begin{block}{Fontos}
+A hibakezelő middleware-t \emph{a legvégén} kell regisztrálni, az összes route után -- Express a négy paraméter alapján ismeri fel.
+\end{block}
+\end{frame}
+
+\begin{frame}{Összefoglalás -- Routing}
+\footnotesize
+\begin{block}{Routing Express-ben}
+\begin{itemize}
+\item \texttt{app.get/post/put/patch/delete} -- metódusonként külön, olvasható route definíció
+\item \texttt{req.params} -- útvonal paraméterek, \texttt{req.query} -- query string, \texttt{req.body} -- kérés törzse
+\item \texttt{express.Router()} -- útvonalak szervezése külön fájlokba, erőforrásonként
+\item 404 és hibakezelő middleware a route-ok végén
+\end{itemize}
+\end{block}
+\end{frame}