third week

órai anyagok/week02/sections/01-expressjs.tex

@@ -0,0 +1,95 @@
+\section{Express.js}
+
+\begin{frame}[fragile]{Miért nem elég a nyers \texttt{http} modul?}
+\footnotesize
+Emlékezzünk vissza az 1. héten írt szerverre: egyetlen callback-ben kellett eldöntenünk, milyen útvonalra és milyen metódussal érkezett a kérés.
+
+\begin{lstlisting}[language=JavaScript,style=NodeJS]
+const server = http.createServer((req, res) => {
+  if (req.url === '/users' && req.method === 'GET') {
+    // ...
+  } else if (req.url === '/users' && req.method === 'POST') {
+    // ...
+  } else if (req.url.startsWith('/users/') && req.method === 'GET') {
+    // egy adott felhasznalo -- id kezzel kivagva az URL-bol
+  } // es igy tovabb...
+});
+\end{lstlisting}
+
+\begin{alertblock}{A probléma}
+Tíz-húsz végpontnál ez a lánc kezelhetetlenné válik: nincs beépített segítség a paraméterek kiolvasásához, a JSON törzs feldolgozásához, vagy az útvonalak csoportosításához.
+\end{alertblock}
+\end{frame}
+
+\begin{frame}{Mi az Express.js?}
+\footnotesize
+Az \textbf{Express.js} a legelterjedtebb Node.js webes keretrendszer (web framework): a nyers \texttt{http} modulra épül, és eltünteti a kézi \texttt{if-else} láncokat egy sokkal kényelmesebb, deklaratív routing API-val.
+
+\begin{itemize}
+\item Egyszerű, minimalista -- nem kényszerít ránk egy előírt projektszerkezetet
+\item Beépített segítség: útvonal-paraméterek, query stringek, JSON válaszok
+\item Hatalmas ökoszisztéma: middleware-ek szinte minden problémára (autentikáció, naplózás, CORS, stb.)
+\item Ez lesz a tárgy hátralévő részének elsődleges keretrendszere
+\end{itemize}
+
+\begin{block}{Fontos}
+Az Express \emph{nem} helyettesíti a Node.js-t -- ráépül. Amit az 1. héten a \texttt{http} modulról tanultunk (request/response ciklus), az Express alatt is pontosan úgy működik.
+\end{block}
+\end{frame}
+
+\begin{frame}[fragile]{Az első Express alkalmazás}
+\footnotesize
+Néhány sorból már működő szerverünk van -- hasonlítsd össze az előző dia \texttt{if-else} láncával!
+
+\begin{block}{Telepítés}
+\begin{verbatim}
+npm install express
+\end{verbatim}
+\end{block}
+
+\begin{lstlisting}[language=JavaScript,style=NodeJS]
+const express = require('express');
+const app = express();
+
+app.get('/', (req, res) => {
+  res.send('Hello, Express!');
+});
+
+app.listen(3000, () => {
+  console.log('Szerver fut: http://localhost:3000');
+});
+\end{lstlisting}
+\end{frame}
+
+\begin{frame}[fragile]{A middleware fogalma}
+\footnotesize
+Az Express legfontosabb koncepciója a \textbf{middleware}: egy függvény, ami a kérés és a válasz között fut le, és vagy továbbengedi a folyamatot (\texttt{next()}), vagy lezárja azt egy válasszal.
+
+\begin{lstlisting}[language=JavaScript,style=NodeJS]
+app.use((req, res, next) => {
+  console.log(`${req.method} ${req.url}`);
+  next(); // tovabb a kovetkezo middleware-hez/route-hoz
+});
+
+app.use(express.json()); // JSON body-t olvaso middleware
+\end{lstlisting}
+
+\begin{itemize}
+\item A kérések egy "csövön" (pipeline) haladnak végig, middleware-eken keresztül
+\item \texttt{express.json()} nélkül a \texttt{req.body} üres lenne POST/PUT kéréseknél
+\item Naplózás, autentikáció, hibakezelés -- mind middleware-ként valósul meg
+\end{itemize}
+\end{frame}
+
+\begin{frame}{Összefoglalás -- Express.js}
+\footnotesize
+\begin{block}{Express.js alapok}
+\begin{itemize}
+\item Node.js-re épülő, minimalista webes keretrendszer
+\item Kiváltja a kézi \texttt{if-else} útvonal-elágazásokat
+\item \texttt{app.listen()} -- szerver indítása, ugyanaz mint a nyers \texttt{http}-nél
+\item Middleware: \texttt{app.use()} -- a kérés-válasz "csövének" építőeleme
+\item \texttt{express.json()} -- beépített middleware a JSON törzs feldolgozásához
+\end{itemize}
+\end{block}
+\end{frame}