commit 23de0663dd99303952c6f9df9126d7a35a900d0f Author: magdo Date: Tue Jan 27 19:23:54 2026 +0100 alapok diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..bd3e405 --- /dev/null +++ b/.gitignore @@ -0,0 +1,17 @@ +# LaTeX temps +*.toc +*.log +*.aux +*.bbl +*.blg +*.dvi +*.ps +*.spl +*.nav +*.out +*.snm +*.tex.backup +*.vrb +*.synctex.gz + +Thumbs.* \ No newline at end of file diff --git a/Alapok/alapok.pdf b/Alapok/alapok.pdf new file mode 100644 index 0000000..d460d09 Binary files /dev/null and b/Alapok/alapok.pdf differ diff --git a/Alapok/alapok.tex b/Alapok/alapok.tex new file mode 100644 index 0000000..ec14e55 --- /dev/null +++ b/Alapok/alapok.tex @@ -0,0 +1,21 @@ +\documentclass[usenames,dvipsnames,aspectratio=169]{beamer} +\usepackage{../common/webfejl} + +\title[Webtechnológia és webalkalmazás-fejlesztés - Alapok]{Webtechnológia és webalkalmazás-fejlesztés - Alapok} +\subtitle{Alapok} + +\begin{document} + +\begin{frame}[plain] + \titlepage + \logoalul +\end{frame} + +\input{orabemut.tex} +\input{https.tex} +\input{js_alapok.tex} +\input{nodejs_alapok.tex} +\input{npm_package.tex} + + +\end{document} \ No newline at end of file diff --git a/Alapok/https.tex b/Alapok/https.tex new file mode 100644 index 0000000..a983f53 --- /dev/null +++ b/Alapok/https.tex @@ -0,0 +1,298 @@ +\section{HTTP és HTTPS} +\subsection{} + +\begin{frame}{Mi a HTTP?} + \begin{itemize} + \item \kiemel{HyperText Transfer Protocol} - szövegalapú protokoll + \item Kliens-szerver kommunikáció alapja a weben + \item Állapotmentes (stateless) protokoll + \item Request-Response modell + \item Port: \kiemel{80} (HTTP), \kiemelZ{443} (HTTPS) + \end{itemize} + \vspace{0.5cm} + \begin{block}{HTTP verziók} + \begin{itemize} + \item HTTP/1.0 (1996) - Egy kérés per kapcsolat + \item HTTP/1.1 (1997) - Perzisztens kapcsolat, pipeline + \item HTTP/2 (2015) - Multiplexing, bináris protokoll + \item HTTP/3 (2022) - QUIC protokoll, UDP alapú + \end{itemize} + \end{block} +\end{frame} + +\begin{frame}{HTTP vs HTTPS} + \begin{columns} + \begin{column}{0.5\textwidth} + \begin{block}{HTTP} + \begin{itemize} + \item Titkosítatlan kommunikáció + \item Lehallgatható + \item Módosítható (Man-in-the-Middle) + \item Gyorsabb (nincs titkosítás) + \item Port 80 + \end{itemize} + \end{block} + \end{column} + \begin{column}{0.5\textwidth} + \begin{block}{HTTPS = HTTP + SSL/TLS} + \begin{itemize} + \item \kiemelZ{Titkosított} kommunikáció + \item SSL/TLS tanúsítvány szükséges + \item Védett adatátvitel + \item Autentikáció és integritás + \item Port 443 + \end{itemize} + \end{block} + \end{column} + \end{columns} + \vspace{0.5cm} + \begin{alertblock}{Fontos} + Modern webalkalmazásoknál \kiemel{HTTPS kötelező}! (SEO, biztonság, böngésző figyelmeztetések) + \end{alertblock} +\end{frame} + +\begin{frame}{HTTP Request felépítése} + \begin{block}{Request struktúra} + \texttt{\kiemel{GET} /api/users/123 \kiemelN{HTTP/1.1}}\\ + \texttt{Host: example.com}\\ + \texttt{User-Agent: Mozilla/5.0}\\ + \texttt{Accept: application/json}\\ + \texttt{Authorization: Bearer token123}\\ + \texttt{}\\ + \texttt{\kiemelZ{[Request Body - opcionális]}} + \end{block} + + \begin{itemize} + \item \kiemel{Request Line:} Metódus, útvonal, protokoll verzió + \item \kiemel{Headers:} Metaadatok kulcs-érték párok + \item \kiemel{Body:} Opcionális adatok (POST, PUT, PATCH) + \end{itemize} +\end{frame} + +\begin{frame}{HTTP Response felépítése} + \begin{block}{Response struktúra} + \texttt{\kiemelN{HTTP/1.1} \kiemelZ{200} OK}\\ + \texttt{Content-Type: application/json}\\ + \texttt{Content-Length: 58}\\ + \texttt{Date: Mon, 27 Jan 2026 10:00:00 GMT}\\ + \texttt{Server: nginx/1.20.1}\\ + \texttt{}\\ + \texttt{\kiemel{\{"id": 123, "name": "Alice", "email": "alice@example.com"\}}} + \end{block} + + \begin{itemize} + \item \kiemel{Status Line:} Protokoll, státuszkód, státusz szöveg + \item \kiemel{Headers:} Metaadatok + \item \kiemel{Body:} Válasz tartalma (HTML, JSON, XML, stb.) + \end{itemize} +\end{frame} + +\begin{frame}{HTTP Metódusok} + \begin{description} + \item[\kiemel{GET}] Erőforrás lekérése (csak olvasás, idempotens) + \item[\kiemel{POST}] Új erőforrás létrehozása (nem idempotens) + \item[\kiemel{PUT}] Erőforrás teljes frissítése (idempotens) + \item[\kiemel{PATCH}] Erőforrás részleges frissítése (nem idempotens) + \item[\kiemel{DELETE}] Erőforrás törlése (idempotens) + \item[\kiemelN{HEAD}] Mint GET, de csak headerek (nincs body) + \item[\kiemelN{OPTIONS}] Támogatott metódusok lekérése (CORS) + \item[\kiemelN{TRACE}] Echo teszt (diagnosztika) + \item[\kiemelN{CONNECT}] Tunnel létrehozása (proxy) + \end{description} + + \vspace{0.3cm} + \begin{block}{Idempotens} + Többszöri végrehajtás ugyanazt az eredményt adja (GET, PUT, DELETE) + \end{block} +\end{frame} + +\begin{frame}{HTTP Státuszkódok - 1xx Informational} + \begin{description} + \item[\kiemelN{100 Continue}] A kliens folytathatja a kérést + \item[\kiemelN{101 Switching Protocols}] Protokoll váltás (pl. WebSocket) + \item[\kiemelN{102 Processing}] A szerver dolgozik a kérésen (WebDAV) + \item[\kiemelN{103 Early Hints}] Korai válasz header információkkal + \end{description} + + \vspace{0.5cm} + \begin{block}{Használat} + Ritkán használt kategória, főleg speciális protokoll műveleteknél + \end{block} +\end{frame} + +\begin{frame}{HTTP Státuszkódok - 2xx Success} + \begin{description} + \item[\kiemelZ{200 OK}] Sikeres kérés (GET, PUT, PATCH) + \item[\kiemelZ{201 Created}] Erőforrás sikeresen létrehozva (POST) + \item[\kiemelZ{202 Accepted}] Kérés elfogadva, de még feldolgozás alatt + \item[\kiemelZ{203 Non-Authoritative}] Proxy/cache módosította a választ + \item[\kiemelZ{204 No Content}] Sikeres, de nincs visszaadott tartalom (DELETE) + \item[\kiemelZ{205 Reset Content}] Sikeres, űrlap visszaállítása szükséges + \item[\kiemelZ{206 Partial Content}] Részleges tartalom (range request) + \end{description} + + \vspace{0.3cm} + \begin{alertblock}{REST API} + \textbf{200} (GET, PUT, PATCH), \textbf{201} (POST), \textbf{204} (DELETE) + \end{alertblock} +\end{frame} + +\begin{frame}{HTTP Státuszkódok - 3xx Redirection} + \begin{description} + \item[\kiemel{300 Multiple Choices}] Több lehetséges választás + \item[\kiemel{301 Moved Permanently}] Végleges átirányítás (SEO átad) + \item[\kiemel{302 Found}] Ideiglenes átirányítás (POST $\rightarrow$ GET) + \item[\kiemel{303 See Other}] Átirányítás GET-re (POST után) + \item[\kiemel{304 Not Modified}] Cache friss, nincs módosítás + \item[\kiemel{307 Temporary Redirect}] Ideiglenes, metódus megmarad + \item[\kiemel{308 Permanent Redirect}] Végleges, metódus megmarad + \end{description} + + \vspace{0.3cm} + \begin{block}{Cache és átirányítás} + 301/308 végleges, 302/307 ideiglenes. 307/308 megőrzi az eredeti metódust! + \end{block} +\end{frame} + +\begin{frame}{HTTP Státuszkódok - 4xx Client Error (1/2)} + \begin{description} + \item[\kiemel{400 Bad Request}] Hibás kérés szintaxis (validáció) + \item[\kiemel{401 Unauthorized}] Autentikáció szükséges (login hiányzik) + \item[\kiemel{402 Payment Required}] Fizetés szükséges (nem használt) + \item[\kiemel{403 Forbidden}] Hozzáférés megtagadva (nincs jogosultság) + \item[\kiemel{404 Not Found}] Erőforrás nem található + \item[\kiemel{405 Method Not Allowed}] Metódus nem engedélyezett + \item[\kiemel{406 Not Acceptable}] Nem támogatott tartalom típus + \item[\kiemel{407 Proxy Auth Required}] Proxy autentikáció szükséges + \item[\kiemel{408 Request Timeout}] Kérés időtúllépés + \end{description} +\end{frame} + +\begin{frame}{HTTP Státuszkódok - 4xx Client Error (2/2)} + \begin{description} + \item[\kiemel{409 Conflict}] Konfliktus (pl. már létező erőforrás) + \item[\kiemel{410 Gone}] Erőforrás véglegesen eltávolítva + \item[\kiemel{411 Length Required}] Content-Length header hiányzik + \item[\kiemel{412 Precondition Failed}] Feltétel nem teljesült + \item[\kiemel{413 Payload Too Large}] Request body túl nagy + \item[\kiemel{414 URI Too Long}] URL túl hosszú + \item[\kiemel{415 Unsupported Media Type}] Nem támogatott media type + \item[\kiemel{416 Range Not Satisfiable}] Érvénytelen range + \item[\kiemel{418 I'm a teapot}] Vicces kód (április 1.) + \item[\kiemel{422 Unprocessable Entity}] Validációs hiba (WebDAV) + \item[\kiemel{429 Too Many Requests}] Rate limit túllépés + \end{description} +\end{frame} + +\begin{frame}{HTTP Státuszkódok - 5xx Server Error} + \begin{description} + \item[\kiemel{500 Internal Server Error}] Általános szerver hiba + \item[\kiemel{501 Not Implemented}] Metódus nem implementált + \item[\kiemel{502 Bad Gateway}] Gateway/proxy hiba + \item[\kiemel{503 Service Unavailable}] Szerver túlterhelt/karbantartás + \item[\kiemel{504 Gateway Timeout}] Gateway időtúllépés + \item[\kiemel{505 HTTP Version Not Supported}] HTTP verzió nem támogatott + \item[\kiemel{506 Variant Also Negotiates}] Konfigurációs hiba + \item[\kiemel{507 Insufficient Storage}] Nincs elég tárhely + \item[\kiemel{508 Loop Detected}] Végtelen ciklus (WebDAV) + \item[\kiemel{510 Not Extended}] További kiterjesztés szükséges + \item[\kiemel{511 Network Auth Required}] Hálózati autentikáció + \end{description} +\end{frame} + +\begin{frame}{REST API-ban gyakori státuszkódok} + \begin{table} + \centering + \small + \begin{tabular}{|l|l|l|} + \hline + \textbf{Metódus} & \textbf{Sikeres} & \textbf{Hiba} \\ + \hline + GET & 200 OK & 404 Not Found \\ + \hline + POST & 201 Created & 400 Bad Request, 409 Conflict \\ + \hline + PUT & 200 OK, 204 No Content & 400 Bad Request, 404 Not Found \\ + \hline + PATCH & 200 OK & 400 Bad Request, 404 Not Found \\ + \hline + DELETE & 204 No Content & 404 Not Found \\ + \hline + \multicolumn{3}{|l|}{Autentikáció: 401 Unauthorized, 403 Forbidden} \\ + \hline + \multicolumn{3}{|l|}{Szerver hiba: 500 Internal Server Error, 503 Service Unavailable} \\ + \hline + \multicolumn{3}{|l|}{Validáció: 400 Bad Request, 422 Unprocessable Entity} \\ + \hline + \end{tabular} + \end{table} +\end{frame} + +\begin{frame}[fragile]{Fontos HTTP Headers (Request)} + \begin{block}{Gyakori Request Headers} + \begin{lstlisting}[language=bash, basicstyle=\tiny\ttfamily] +Host: api.example.com # Celszerver +User-Agent: Mozilla/5.0 # Kliens informacio +Accept: application/json # Elfogadott tartalom tipus +Content-Type: application/json # Kuldes tartalom tipus +Authorization: Bearer # Autentikacio (JWT) +Cookie: sessionId=abc123 # Session cookie +Accept-Language: hu-HU,en # Nyelvi preferencia +Accept-Encoding: gzip, deflate # Tomoritesi modok +Cache-Control: no-cache # Cache iranyitas +If-None-Match: "etag123" # Felteteles keres +Origin: https://example.com # CORS eredethelye + \end{lstlisting} + \end{block} +\end{frame} + +\begin{frame}[fragile]{Fontos HTTP Headers (Response)} + \begin{block}{Gyakori Response Headers} + \begin{lstlisting}[language=bash, basicstyle=\tiny\ttfamily] +Content-Type: application/json # Valasz tartalom tipus +Content-Length: 1234 # Tartalom merete +Date: Mon, 27 Jan 2026 10:00:00 # Valasz idopontja +Server: nginx/1.20.1 # Szerver informacio +Set-Cookie: sessionId=abc; HttpOnly # Cookie beallitas +Cache-Control: max-age=3600 # Cache idotartam +ETag: "etag123" # Verzio azonosito +Expires: Wed, 29 Jan 2026 10:00:00 # Lejarat idopont +Location: /api/users/123 # Atiranyitas cel (3xx, 201) +Access-Control-Allow-Origin: * # CORS engedelyezes +X-RateLimit-Remaining: 99 # Rate limit info + \end{lstlisting} + \end{block} +\end{frame} + +\begin{frame}{HTTPS - SSL/TLS Handshake} + \begin{enumerate} + \item \kiemel{Client Hello} - Támogatott titkosítási módok + \item \kiemel{Server Hello} - Kiválasztott titkosítás + tanúsítvány + \item \kiemel{Certificate Verify} - Tanúsítvány ellenőrzése (CA) + \item \kiemel{Key Exchange} - Szimmetrikus kulcs létrehozása + \item \kiemel{Finished} - Titkosított kommunikáció kezdete + \end{enumerate} + + \vspace{0.5cm} + \begin{block}{SSL/TLS verziók} + \begin{itemize} + \item SSL 2.0/3.0 - \kiemel{Elavult, sebezhetőségek} + \item TLS 1.0/1.1 - \kiemel{Elavult} (2020-tól) + \item TLS 1.2 - Még használt, de \kiemelZ{TLS 1.3 ajánlott} + \item TLS 1.3 - Legújabb, gyorsabb, biztonságosabb + \end{itemize} + \end{block} +\end{frame} + +\begin{frame}{Összefoglalás} + \begin{block}{HTTP/HTTPS alapok} + \begin{itemize} + \item HTTP: Request-Response, állapotmentes protokoll + \item HTTPS: Titkosított HTTP (SSL/TLS) + \item HTTP metódusok: GET, POST, PUT, PATCH, DELETE + \item Státuszkódok: 1xx, 2xx, 3xx, 4xx, 5xx + \item Headers: Metaadatok kérésben és válaszban + \item REST API: 200, 201, 204, 400, 401, 403, 404, 500 + \end{itemize} + \end{block} +\end{frame} diff --git a/Alapok/js_alapok.tex b/Alapok/js_alapok.tex new file mode 100644 index 0000000..d561208 --- /dev/null +++ b/Alapok/js_alapok.tex @@ -0,0 +1,260 @@ +\section{JavaScript Alapok} +\subsection{} + +\begin{frame}{Mi a JavaScript?} + \begin{itemize} + \item \kiemel{Dinamikus, interpretált programozási nyelv} + \item Eredetileg böngészőkben futó szkriptnyelv (1995, Brendan Eich) + \item Ma már szerveroldali fejlesztésre is használható (Node.js) + \item Gyengén típusos, prototype-alapú objektum-orientált nyelv + \item Az ECMAScript szabvány implementációja + \end{itemize} + \vspace{0.5cm} + \begin{block}{Miért fontos?} + A JavaScript az egyetlen nyelv, amely \kiemel{natívan fut a böngészőben}, és a Node.js révén a \kiemel{backend fejlesztés} alapja is lehet. + \end{block} +\end{frame} + +\begin{frame}[fragile,shrink=10]{Változók és adattípusok} + \begin{columns} + \begin{column}{0.5\textwidth} + \begin{block}{Változó deklaráció} + \begin{lstlisting}[style=JavaScript] +// Konstans (nem valtoztathato) +const PI = 3.14159; + +// Blokk scope valtozo +let count = 0; +count = 1; // OK + +// Fuggvenyi scope (kerulendo!) +var oldStyle = "legacy"; + \end{lstlisting} + \end{block} + \end{column} + \begin{column}{0.5\textwidth} + \begin{block}{Primitív típusok} + \begin{lstlisting}[style=JavaScript] +let num = 42; // Number +let str = "Hello"; // String +let bool = true; // Boolean +let empty = null; // Null +let undef = undefined; // Undefined +let big = 123n; // BigInt +let sym = Symbol("id"); // Symbol + \end{lstlisting} + \end{block} + \end{column} + \end{columns} +\end{frame} + +\begin{frame}[fragile,shrink=10]{Tömbök és objektumok} + \begin{columns} + \begin{column}{0.5\textwidth} + \begin{block}{Tömbök (Arrays)} + \begin{lstlisting}[style=JavaScript] +const fruits = ['apple', 'banana']; + +// Elem hozzaadasa +fruits.push('orange'); + +// Bejaras +fruits.forEach(fruit => { + console.log(fruit); +}); + +// Szures +const long = fruits.filter( + f => f.length > 5 +); + \end{lstlisting} + \end{block} + \end{column} + \begin{column}{0.5\textwidth} + \begin{block}{Objektumok (Objects)} + \begin{lstlisting}[style=JavaScript] +const user = { + name: 'Alice', + age: 25, + greet() { + return `Hi, I'm ${this.name}`; + } +}; + +// Eleres +console.log(user.name); +console.log(user['age']); + +// Uj tulajdonsag +user.email = 'alice@example.com'; + \end{lstlisting} + \end{block} + \end{column} + \end{columns} +\end{frame} + +\begin{frame}[fragile,shrink=10]{Függvények} + \begin{block}{Hagyományos függvénydeklaráció} + \begin{lstlisting}[style=JavaScript] +function add(a, b) { + return a + b; +} + \end{lstlisting} + \end{block} + + \begin{block}{Arrow function (ES6+)} + \begin{lstlisting}[style=JavaScript] +const add = (a, b) => a + b; + +const square = x => x * x; // Egy parameter, kapcsos zarojel nelkul + +const greet = name => { + const message = `Hello, ${name}!`; + return message; +}; + \end{lstlisting} + \end{block} +\end{frame} + +\begin{frame}[fragile,shrink=10]{Destructuring és Spread operátor} + \begin{columns} + \begin{column}{0.5\textwidth} + \begin{block}{Destructuring} + \begin{lstlisting}[style=JavaScript] +// Tomb destructuring +const [first, second] = [1, 2, 3]; + +// Objektum destructuring +const {name, age} = user; + +// Fuggveny parameterenel +function print({name, age}) { + console.log(`${name}: ${age}`); +} + \end{lstlisting} + \end{block} + \end{column} + \begin{column}{0.5\textwidth} + \begin{block}{Spread operator (...)} + \begin{lstlisting}[style=JavaScript] +// Tomb osszefuzes +const arr = [...arr1, ...arr2]; + +// Objektum masolasa +const copy = {...original}; + +// Rest parameter +function sum(...numbers) { + return numbers.reduce( + (a, b) => a + b, 0 + ); +} + \end{lstlisting} + \end{block} + \end{column} + \end{columns} +\end{frame} + +\begin{frame}[fragile,shrink=10]{Aszinkron programozás - Callback} + \begin{block}{Callback függvények} + \begin{lstlisting}[style=JavaScript] +function fetchData(callback) { + setTimeout(() => { + const data = {id: 1, name: 'User'}; + callback(data); + }, 1000); +} + +fetchData((data) => { + console.log(data); +}); + \end{lstlisting} + \end{block} + + \begin{alertblock}{Callback Hell problémája} + Többszintű beágyazott callback-ek olvashatatlan kódot eredményeznek. + \end{alertblock} +\end{frame} + +\begin{frame}[fragile,shrink=10]{Aszinkron programozás - Promise} + \begin{block}{Promise használata} + \begin{lstlisting}[style=JavaScript] +function fetchData() { + return new Promise((resolve, reject) => { + setTimeout(() => { + const data = {id: 1, name: 'User'}; + resolve(data); + // reject(new Error('Failed')); + }, 1000); + }); +} + +fetchData() + .then(data => console.log(data)) + .catch(error => console.error(error)) + .finally(() => console.log('Done')); + \end{lstlisting} + \end{block} +\end{frame} + +\begin{frame}[fragile,shrink=10]{Aszinkron programozás - Async/Await} + \begin{block}{Modern async/await szintaxis} + \begin{lstlisting}[style=JavaScript] +async function loadUser() { + try { + const user = await fetchData(); + console.log(user); + + const posts = await fetchUserPosts(user.id); + console.log(posts); + + return {user, posts}; + } catch (error) { + console.error('Error:', error); + } +} + +// Hasznalat +loadUser(); + \end{lstlisting} + \end{block} +\end{frame} + +\begin{frame}[fragile,shrink=10]{ES6+ Modern jellemzők} + \begin{itemize} + \item \kiemel{Template literals:} \texttt{`Hello \$\{name\}`} + \item \kiemel{Default parameters:} \texttt{function greet(name = 'Guest')} + \item \kiemel{Class syntax:} + \end{itemize} + + \begin{block}{Class példa} + \begin{lstlisting}[style=JavaScript] +class Person { + constructor(name, age) { + this.name = name; + this.age = age; + } + + greet() { + return `Hi, I'm ${this.name}`; + } +} + +const alice = new Person('Alice', 25); + \end{lstlisting} + \end{block} +\end{frame} + +\begin{frame}{Összefoglalás} + \begin{block}{JavaScript alapok} + \begin{itemize} + \item Változók: \texttt{const}, \texttt{let} (kerüljük a \texttt{var}-t) + \item Adattípusok: primitívek és objektumok + \item Tömbök és objektumok manipulációja + \item Függvények: hagyományos és arrow function + \item Destructuring és spread operátor + \item Aszinkron programozás: callback, Promise, async/await + \item Modern ES6+ jellemzők + \end{itemize} + \end{block} +\end{frame} diff --git a/Alapok/nodejs_alapok.tex b/Alapok/nodejs_alapok.tex new file mode 100644 index 0000000..eade7ce --- /dev/null +++ b/Alapok/nodejs_alapok.tex @@ -0,0 +1,350 @@ +\section{Node.js Alapok} +\subsection{} + +\begin{frame}{Mi a Node.js?} + \begin{itemize} + \item \kiemel{JavaScript futtatókörnyezet} a V8 motoron alapulva + \item \kiemelZ{Szerveroldali JavaScript} fejlesztés lehetősége + \item Eseményvezérelt, nem-blokkoló I/O modell + \item Kiváló nagy számú egyidejű kapcsolat kezelésére + \item Létrehozta: Ryan Dahl (2009) + \end{itemize} + \vspace{0.5cm} + \begin{block}{Miért Node.js?} + \begin{itemize} + \item Ugyanaz a nyelv frontend és backend oldalon + \item Hatalmas ökoszisztéma (npm) + \item Gyors fejlesztés és prototípuskészítés + \item Skálázható, nagy teljesítményű alkalmazások + \end{itemize} + \end{block} +\end{frame} + +\begin{frame}{Node.js architektúra} + \begin{columns} + \begin{column}{0.5\textwidth} + \begin{block}{V8 JavaScript Engine} + \begin{itemize} + \item Google Chrome motorja + \item JIT (Just-In-Time) fordítás + \item C++ nyelven íródott + \item Rendkívül gyors végrehajtás + \end{itemize} + \end{block} + \begin{block}{libuv} + \begin{itemize} + \item Event loop implementáció + \item Aszinkron I/O műveletek + \item Cross-platform támogatás + \end{itemize} + \end{block} + \end{column} + \begin{column}{0.5\textwidth} + \begin{block}{Event Loop} + \begin{enumerate} + \item Timers (setTimeout, setInterval) + \item Pending callbacks + \item Poll (I/O műveletek) + \item Check (setImmediate) + \item Close callbacks + \end{enumerate} + \end{block} + \vspace{0.2cm} + \centering + \kiemel{Single-threaded}, de \kiemelZ{aszinkron}! + \end{column} + \end{columns} +\end{frame} + +\begin{frame}[fragile,shrink=10]{Első Node.js program} + \begin{block}{hello.js} + \begin{lstlisting}[style=NodeJS] +console.log('Hello, Node.js!'); +console.log('Node verzio:', process.version); +console.log('Platform:', process.platform); +console.log('Aktualis konyvtar:', __dirname); +console.log('Fajl neve:', __filename); + \end{lstlisting} + \end{block} + + \begin{block}{Futtatás} + \begin{lstlisting}[language=bash] +node hello.js + \end{lstlisting} + \end{block} + + \vspace{0.3cm} + \begin{alertblock}{Fontos} + A Node.js \kiemel{nem böngésző}! Nincs \texttt{window}, nincs \texttt{document}, de van \texttt{global} és \texttt{process}. + \end{alertblock} +\end{frame} + +\begin{frame}[fragile,shrink=10]{Modulrendszer - CommonJS} + \begin{columns} + \begin{column}{0.5\textwidth} + \begin{block}{math.js - Modul exportálás} + \begin{lstlisting}[style=NodeJS] +function add(a, b) { + return a + b; +} + +function multiply(a, b) { + return a * b; +} + +module.exports = { + add, + multiply +}; + \end{lstlisting} + \end{block} + \end{column} + \begin{column}{0.5\textwidth} + \begin{block}{app.js - Modul importálás} + \begin{lstlisting}[style=NodeJS] +const math = require('./math'); + +console.log(math.add(2, 3)); +// 5 + +console.log(math.multiply(4, 5)); +// 20 + \end{lstlisting} + \end{block} + \end{column} + \end{columns} + \vspace{0.3cm} + \begin{block}{Beépített modulok} + \begin{lstlisting}[style=NodeJS] +const fs = require('fs'); // File system +const path = require('path'); // Path mukodtatas +const http = require('http'); // HTTP szerver + \end{lstlisting} + \end{block} +\end{frame} + +\begin{frame}[fragile,shrink=10]{ES Modules (ESM)} + \begin{columns} + \begin{column}{0.5\textwidth} + \begin{block}{math.mjs - Export} + \begin{lstlisting}[style=NodeJS] +export function add(a, b) { + return a + b; +} + +export function multiply(a, b) { + return a * b; +} + +// Default export +export default { + add, + multiply +}; + \end{lstlisting} + \end{block} + \end{column} + \begin{column}{0.5\textwidth} + \begin{block}{app.mjs - Import} + \begin{lstlisting}[style=NodeJS] +// Named import +import { add, multiply } from './math.mjs'; + +console.log(add(2, 3)); + +// Default import +import math from './math.mjs'; + +console.log(math.multiply(4, 5)); + \end{lstlisting} + \end{block} + \end{column} + \end{columns} + \vspace{0.3cm} + \begin{alertblock}{package.json} + ESM használatához: \texttt{\{"type": "module"\}} a package.json-ben + \end{alertblock} +\end{frame} + +\begin{frame}[fragile,shrink=10]{File System műveletek} + \begin{block}{Fájl olvasás - Szinkron} + \begin{lstlisting}[style=NodeJS] +const fs = require('fs'); + +const data = fs.readFileSync('input.txt', 'utf8'); +console.log(data); +// Blokkolja a vegrehajtast! + \end{lstlisting} + \end{block} + + \begin{block}{Fájl olvasás - Aszinkron (Callback)} + \begin{lstlisting}[style=NodeJS] +fs.readFile('input.txt', 'utf8', (err, data) => { + if (err) { + console.error('Hiba:', err); + return; + } + console.log(data); +}); +// Nem blokkolja a vegrehajtast! + \end{lstlisting} + \end{block} +\end{frame} + +\begin{frame}[fragile,shrink=10]{File System - Promises API} + \begin{block}{Fájl olvasás - Promise} + \begin{lstlisting}[style=NodeJS] +const fs = require('fs').promises; + +async function readData() { + try { + const data = await fs.readFile('input.txt', 'utf8'); + console.log(data); + } catch (error) { + console.error('Hiba:', error); + } +} + +readData(); + \end{lstlisting} + \end{block} + + \begin{block}{Fájl írás} + \begin{lstlisting}[style=NodeJS] +await fs.writeFile('output.txt', 'Hello Node.js!', 'utf8'); + \end{lstlisting} + \end{block} +\end{frame} + +\begin{frame}[fragile,shrink=10]{HTTP szerver létrehozása} + \begin{block}{Egyszerű HTTP szerver} + \begin{lstlisting}[style=NodeJS] +const http = require('http'); + +const server = http.createServer((req, res) => { + res.statusCode = 200; + res.setHeader('Content-Type', 'text/plain; charset=utf-8'); + res.end('Hello, Node.js szerver!\n'); +}); + +const PORT = 3000; +server.listen(PORT, () => { + console.log(`Szerver fut: http://localhost:${PORT}`); +}); + \end{lstlisting} + \end{block} + + \vspace{0.3cm} + \centering + \kiemel{Böngészőben:} \texttt{http://localhost:3000} +\end{frame} + +\begin{frame}[fragile,shrink=10]{Process objektum} + \begin{block}{Process információk és műveletek} + \begin{lstlisting}[style=NodeJS] +// Kornyezeti valtozok +console.log(process.env.NODE_ENV); + +// Parancssori argumentumok +console.log(process.argv); + +// Kilepes +process.exit(0); // Sikeres kilepes +process.exit(1); // Hiba + +// Esemenyek +process.on('exit', (code) => { + console.log(`Kilepes kod: ${code}`); +}); + \end{lstlisting} + \end{block} +\end{frame} + +\begin{frame}[fragile,shrink=10]{Path modul} + \begin{block}{Útvonal műveletek} + \begin{lstlisting}[style=NodeJS] +const path = require('path'); + +// Utvonalak osszefuzese +const filePath = path.join(__dirname, 'data', 'users.json'); + +// Kiterjesztes lekerese +const ext = path.extname('file.txt'); // .txt + +// Fajlnev bazisresz +const base = path.basename('/user/local/file.txt'); // file.txt + +// Konyvtar resz +const dir = path.dirname('/user/local/file.txt'); // /user/local + +// Abszolut utvonal +const abs = path.resolve('data', 'users.json'); + \end{lstlisting} + \end{block} +\end{frame} + +\begin{frame}[fragile,shrink=10]{Events - Eseménykezelés} + \begin{block}{EventEmitter használata} + \begin{lstlisting}[style=NodeJS] +const EventEmitter = require('events'); + +class MyEmitter extends EventEmitter {} + +const myEmitter = new MyEmitter(); + +// Esemeny figyelese +myEmitter.on('event', (data) => { + console.log('Esemeny tortent:', data); +}); + +// Esemeny kivaltas +myEmitter.emit('event', {message: 'Hello Events!'}); + \end{lstlisting} + \end{block} + + \vspace{0.3cm} + \centering + Node.js \kiemel{eseményvezérelt} architektúrája alapja! +\end{frame} + +\begin{frame}{Node.js vs. Böngésző} + \begin{table} + \centering + \begin{tabular}{|l|l|l|} + \hline + \textbf{Jellemző} & \textbf{Node.js} & \textbf{Böngésző} \\ + \hline + JavaScript engine & V8, SpiderMonkey & V8, SpiderMonkey, stb. \\ + \hline + DOM API & \kiemel{Nincs} & Van \\ + \hline + window objektum & \kiemel{Nincs} & Van \\ + \hline + global objektum & \kiemelZ{global} & window \\ + \hline + File system & \kiemelZ{Van (fs)} & Nincs (limitált) \\ + \hline + Modulrendszer & CommonJS, ESM & ESM \\ + \hline + HTTP szerver & \kiemelZ{Készíthető} & Nem \\ + \hline + Használat & Backend, CLI & Frontend \\ + \hline + \end{tabular} + \end{table} +\end{frame} + +\begin{frame}{Összefoglalás} + \begin{block}{Node.js alapok} + \begin{itemize} + \item V8 engine alapú JavaScript futtatókörnyezet + \item Event-driven, non-blocking I/O modell + \item Modulrendszer: CommonJS és ES Modules + \item Beépített modulok: fs, path, http, events + \item Process objektum: környezeti változók, argumentumok + \item File system műveletek: szinkron, aszinkron, Promise + \item HTTP szerver készítése + \item EventEmitter: saját események létrehozása + \end{itemize} + \end{block} +\end{frame} diff --git a/Alapok/npm_package.tex b/Alapok/npm_package.tex new file mode 100644 index 0000000..48ba71b --- /dev/null +++ b/Alapok/npm_package.tex @@ -0,0 +1,370 @@ +\section{NPM Package Manager} +\subsection{} + +\begin{frame}{Mi az npm?} + \begin{itemize} + \item \kiemel{Node Package Manager} - Node.js csomagkezelő + \item A világ legnagyobb szoftver registry-je (2+ millió csomag) + \item Node.js-szel együtt települ + \item Csomagok telepítése, kezelése, megosztása + \item Projekt függőségek kezelése + \end{itemize} + \vspace{0.5cm} + \begin{block}{Verziószám ellenőrzése} + \texttt{node --version} \hspace{1cm} \texttt{npm --version} + \end{block} + \vspace{0.3cm} + \begin{block}{Alternatívák} + \kiemelZ{yarn}, \kiemelZ{pnpm} - gyorsabb, hatékonyabb csomagkezelők + \end{block} +\end{frame} + +\begin{frame}[fragile,shrink=10]{npm init - Projekt inicializálás} + \begin{block}{Interaktív projekt létrehozás} + \begin{lstlisting}[language=bash] +npm init + \end{lstlisting} + \end{block} + + \begin{block}{Gyors inicializálás alapértelmezett értékekkel} + \begin{lstlisting}[language=bash] +npm init -y +# vagy +npm init --yes + \end{lstlisting} + \end{block} + + \vspace{0.3cm} + \begin{alertblock}{Eredmény} + Létrejön a \kiemel{package.json} fájl, amely a projekt metaadatait tartalmazza + \end{alertblock} +\end{frame} + +\begin{frame}[fragile,shrink=10]{package.json struktúra} + \begin{block}{Alapvető package.json} + \begin{lstlisting}[style=JavaScript, basicstyle=\tiny\ttfamily] +{ + "name": "my-backend-app", + "version": "1.0.0", + "description": "Backend alkalmazas Node.js-sel", + "main": "index.js", + "scripts": { + "start": "node index.js", + "dev": "nodemon index.js", + "test": "jest" + }, + "keywords": ["nodejs", "backend", "api"], + "author": "Magda Donat", + "license": "MIT", + "dependencies": { + "express": "^4.18.2" + }, + "devDependencies": { + "nodemon": "^3.0.1" + } +} + \end{lstlisting} + \end{block} +\end{frame} + +\begin{frame}[fragile,shrink=10]{Csomagok telepítése} + \begin{block}{Telepítés production függőségként} + \begin{lstlisting}[language=bash] +npm install express +# vagy rovidebben +npm i express + +# Tobbe csomag egyszerre +npm install express prisma dotenv + \end{lstlisting} + \end{block} + + \begin{block}{Telepítés development függőségként} + \begin{lstlisting}[language=bash] +npm install --save-dev nodemon +# vagy +npm i -D nodemon jest eslint + \end{lstlisting} + \end{block} + + \begin{alertblock}{Mi a különbség?} + \textbf{dependencies:} éles környezetben is kell | \textbf{devDependencies:} csak fejlesztéshez + \end{alertblock} +\end{frame} + +\begin{frame}[fragile,shrink=10]{Csomagok kezelése} + \begin{columns} + \begin{column}{0.5\textwidth} + \begin{block}{Telepítés specifikus verzióval} + \begin{lstlisting}[language=bash] +npm i express@4.18.0 + +# Legfrissebb verzio +npm i express@latest + \end{lstlisting} + \end{block} + + \begin{block}{Globális telepítés} + \begin{lstlisting}[language=bash] +npm install -g nodemon +npm i -g typescript + \end{lstlisting} + \end{block} + \end{column} + \begin{column}{0.5\textwidth} + \begin{block}{Eltávolítás} + \begin{lstlisting}[language=bash] +npm uninstall express +npm un express + +# Globalis eltavolitas +npm uninstall -g nodemon + \end{lstlisting} + \end{block} + + \begin{block}{Frissítés} + \begin{lstlisting}[language=bash] +npm update +npm update express + \end{lstlisting} + \end{block} + \end{column} + \end{columns} +\end{frame} + +\begin{frame}{Semantic Versioning (SemVer)} + \begin{block}{Verzió formátum: \kiemel{MAJOR.MINOR.PATCH}} + \texttt{1.2.3} $\rightarrow$ \kiemelN{1} (major) . \kiemelZ{2} (minor) . \kiemel{3} (patch) + \end{block} + + \vspace{0.3cm} + \begin{itemize} + \item \kiemelN{MAJOR:} Nem kompatibilis API változások + \item \kiemelZ{MINOR:} Új funkciók, visszafelé kompatibilis + \item \kiemel{PATCH:} Hibajavítások, visszafelé kompatibilis + \end{itemize} + + \vspace{0.5cm} + \begin{table} + \centering + \begin{tabular}{|l|l|} + \hline + \textbf{Jelölés} & \textbf{Jelentés} \\ + \hline + \texttt{1.2.3} & Pontosan 1.2.3 verzió \\ + \hline + \texttt{\textasciicircum1.2.3} & $\geq$ 1.2.3 és $<$ 2.0.0 (MINOR frissítések) \\ + \hline + \texttt{\textasciitilde1.2.3} & $\geq$ 1.2.3 és $<$ 1.3.0 (PATCH frissítések) \\ + \hline + \texttt{*} vagy \texttt{latest} & Legfrissebb verzió \\ + \hline + \end{tabular} + \end{table} +\end{frame} + +\begin{frame}[fragile,shrink=10]{npm scripts} + \begin{block}{Scripts definiálása package.json-ben} + \begin{lstlisting}[style=JavaScript] +{ + "scripts": { + "start": "node index.js", + "dev": "nodemon index.js", + "test": "jest", + "build": "tsc", + "lint": "eslint .", + "format": "prettier --write ." + } +} + \end{lstlisting} + \end{block} + + \begin{block}{Scripts futtatása} + \begin{lstlisting}[language=bash] +npm run dev +npm run test +npm start # 'run' nelkul is mukodik (start, test, stop) + \end{lstlisting} + \end{block} +\end{frame} + +\begin{frame}[fragile,shrink=10]{node\_modules és package-lock.json} + \begin{columns} + \begin{column}{0.5\textwidth} + \begin{block}{node\_modules} + \begin{itemize} + \item Telepített csomagok mappája + \item Nagyon nagy lehet (100+ MB) + \item \kiemel{Ne commitoljuk} git-be! + \item .gitignore-ba: \texttt{node\_modules/} + \item Újragenerálás: \texttt{npm install} + \end{itemize} + \end{block} + \end{column} + \begin{column}{0.5\textwidth} + \begin{block}{package-lock.json} + \begin{itemize} + \item Pontos verziókat rögzít + \item Függőségek fája + \item Determinisztikus telepítés + \item \kiemelZ{Commitoljuk} git-be! + \item Reprodukálható build-ek + \end{itemize} + \end{block} + \end{column} + \end{columns} + + \vspace{0.5cm} + \begin{alertblock}{Fontos} + \texttt{npm install} a package-lock.json alapján telepít (ha létezik) + \end{alertblock} +\end{frame} + +\begin{frame}[fragile,shrink=10]{Hasznos npm parancsok} + \begin{columns} + \begin{column}{0.5\textwidth} + \begin{block}{Információk lekérése} + \begin{lstlisting}[language=bash] +# Telepitett csomagok listaja +npm list + +# Elavult csomagok +npm outdated + +# Csomag informacio +npm info express + +# Csomag keresese +npm search prisma + \end{lstlisting} + \end{block} + \end{column} + \begin{column}{0.5\textwidth} + \begin{block}{Karbantartás} + \begin{lstlisting}[language=bash] +# Cache torlese +npm cache clean --force + +# Fuggosegek auditja +npm audit + +# Sebezhetosegek javitasa +npm audit fix + +# Projekt tisztitas +rm -rf node_modules +npm install + \end{lstlisting} + \end{block} + \end{column} + \end{columns} +\end{frame} + +\begin{frame}[fragile,shrink=10]{npx - Csomag futtatás telepítés nélkül} + \begin{block}{npx használata} + \begin{lstlisting}[language=bash] +# Egyszeri futtatas telepites nelkul +npx create-react-app my-app +npx prisma init +npx tsx index.ts + +# Lokalis csomag futtatas +npx nodemon index.js + \end{lstlisting} + \end{block} + + \vspace{0.3cm} + \begin{block}{Előnyök} + \begin{itemize} + \item Nem szennyezi a globális telepítéseket + \item Mindig a legfrissebb verzió + \item Gyors prototípuskészítés + \item CLI eszközök futtatása + \end{itemize} + \end{block} +\end{frame} + +\begin{frame}[fragile,shrink=10]{Gyakori csomagok Backend fejlesztéshez} + \begin{block}{Production dependencies} + \begin{lstlisting}[language=bash] +npm i express # Web framework +npm i @prisma/client # ORM kliens +npm i dotenv # Kornyezeti valtozok +npm i cors # CORS middleware +npm i bcrypt # Jelszo hash +npm i jsonwebtoken # JWT token +npm i express-validator # Validacio + \end{lstlisting} + \end{block} + + \begin{block}{Development dependencies} + \begin{lstlisting}[language=bash] +npm i -D nodemon # Auto-restart +npm i -D prisma # ORM CLI +npm i -D typescript # TypeScript +npm i -D @types/node # Node.js tipusok + \end{lstlisting} + \end{block} +\end{frame} + +\begin{frame}[fragile,shrink=10]{.npmrc - npm konfiguráció} + \begin{block}{Projekt .npmrc fájl} + \begin{lstlisting}[language=bash] +# Pontos verziot ment (^ nelkul) +save-exact=true + +# Engine strict mod +engine-strict=true + +# Automaikus audit +audit=true + \end{lstlisting} + \end{block} + + \begin{block}{package.json - Node verzió megkötés} + \begin{lstlisting}[style=JavaScript] +{ + "engines": { + "node": ">=18.0.0", + "npm": ">=9.0.0" + } +} + \end{lstlisting} + \end{block} +\end{frame} + +\begin{frame}{npm Registry és publikálás} + \begin{itemize} + \item \kiemel{npmjs.com} - Publikus npm registry + \item Ingyenes, bárki publikálhat csomagot + \item Saját csomag publikálás: \texttt{npm publish} + \item Privát csomagok: fizetős npm Pro/Teams + \item Alternatív registry-k: GitHub Packages, Verdaccio + \end{itemize} + + \vspace{0.5cm} + \begin{block}{Saját csomag publikálás lépései} + \begin{enumerate} + \item \texttt{npm login} - Bejelentkezés + \item package.json konfiguráció + \item \texttt{npm publish} - Publikálás + \item \texttt{npm version patch/minor/major} - Verziókezelés + \end{enumerate} + \end{block} +\end{frame} + +\begin{frame}{Összefoglalás} + \begin{block}{npm alapok} + \begin{itemize} + \item npm: Node Package Manager, 2+ millió csomag + \item \texttt{npm init} - projekt inicializálás + \item \texttt{npm install/uninstall/update} - csomagkezelés + \item package.json: projekt metaadatok, függőségek, scripts + \item Semantic Versioning: MAJOR.MINOR.PATCH + \item dependencies vs devDependencies + \item node\_modules (ne commit), package-lock.json (commit) + \item npm scripts: egyéni parancsok definiálása + \item npx: csomagok futtatása telepítés nélkül + \end{itemize} + \end{block} +\end{frame} diff --git a/Alapok/orabemut.tex b/Alapok/orabemut.tex new file mode 100644 index 0000000..c65748d --- /dev/null +++ b/Alapok/orabemut.tex @@ -0,0 +1,141 @@ +\section{Tárgy bemutatása} +\subsection{} + +\begin{frame}{Oktató} + \begin{block}{Elérhetőségek} + \textbf{Magda Donát}, mérnökinformatikus BSc + \vspace{0.1cm} + \begin{itemize} + \item \textbf{E-mail:} \href{mailto:magda.donat@ga.sze.hu}{magda.donat@ga.sze.hu} + \item \textbf{Konzultáció:} előre egyeztetve, Google Meet + \end{itemize} + \end{block} +\end{frame} + +\begin{frame}{Tantárgy célja} + \begin{itemize} + \item Átfogó kép a modern webalkalmazás-fejlesztés folyamatáról + \item Kliens-oldali (frontend) és szerver-oldali (backend) fejlesztés + \item Adatbázis-kezelés és API-kommunikáció + \item Gyakorlati tapasztalat a teljes fejlesztési folyamatban + \item Különös hangsúly a \kiemel{JavaScript-alapú technológiákra} + \end{itemize} + \vspace{0.2cm} + \begin{block}{Cél} + A tervezéstől a működő alkalmazásig: teljes fejlesztési folyamat elsajátítása + \end{block} +\end{frame} + +\begin{frame}{Backend technológiák} + \begin{columns} + \begin{column}{0.5\textwidth} + \begin{block}{Szerveroldali fejlesztés} + \begin{itemize} + \item \kiemel{Node.js} – szerveroldali futtatókörnyezet + \item \kiemel{Express.js} – webes keretrendszer + \item \kiemel{Prisma} – ORM adatmodellezésre + \end{itemize} + \end{block} + \end{column} + \begin{column}{0.5\textwidth} + \begin{block}{Eszközök és adatbázis} + \begin{itemize} + \item \kiemel{SQLite} – relációs adatbázis + \item \kiemel{Postman} – API tesztelés + \item \kiemel{Redis} – gyorsítótár + \end{itemize} + \end{block} + \end{column} + \end{columns} + \vspace{0.5cm} + \begin{center} + REST API-k $\rightarrow$ Útvonalkezelés $\rightarrow$ Adatbázis-kapcsolat $\rightarrow$ Biztonságos adatkezelés + \end{center} +\end{frame} + +\begin{frame}{Tematika – 1-6. hét} + \begin{block}{Alapozás, HTTP, REST API, Express és architektúra} + \begin{description} + \item[1. hét:] Alapok, Node.js, HTTPS, NPM package manager + \item[2. hét:] REST API, Architekturális felépítések, CQRS + \item[3. hét:] Express.js, Routing, Postman + \item[4. hét:] ORM, Database connection, CRUD operations + \item[5. hét:] Prisma, Aggregates, Repositories + \item[6. hét:] \kiemel{ZH 1} – Database CRUD, ORM, CQRS + DTOs, Mappers + \end{description} + \end{block} +\end{frame} + +\begin{frame}{Tematika – 7-13. hét} + \begin{block}{Authentikáció, Authorizáció, Külső szolgáltatások} + \begin{description} + \item[7. hét:] AUTH, OAUTH, OAUTH2 + \item[8. hét:] Session, JWT, Cookie + \item[9. hét:] Hash, Middleware, Services + \item[10. hét:] Email sending, Templating + \item[11. hét:] Dependency Injection, Logging + \item[12. hét:] CORS, Redis, External API + \item[13. hét:] \kiemel{NAGY ZH} – Teljes API írása + \end{description} + \end{block} +\end{frame} + +\begin{frame}{Értékelési mód} + \begin{columns} + \begin{column}{0.5\textwidth} + \begin{alertblock}{1. Zárthelyi dolgozat (50 pont)} + Frontend és Backend fejlesztés + \begin{itemize} + \item Frontend rész: 25 pont + \item Backend rész: 25 pont + \end{itemize} + \vspace{0.2cm} + \small{Alapvető komponensek, API-k és adatkezelés} + \end{alertblock} + \end{column} + \begin{column}{0.5\textwidth} + \begin{alertblock}{2. Zárthelyi dolgozat (50 pont)} + Összetett webalkalmazás + \begin{itemize} + \item Teljes frontend–backend integráció + \item Önálló, működő alkalmazás + \item Egyéni munka + \end{itemize} + \end{alertblock} + \end{column} + \end{columns} +\end{frame} + +\begin{frame}{Pontszámítás és jegyek} + \begin{table} + \centering + \begin{tabular}{|c|c|} + \hline + \textbf{Összesített pontszám} & \textbf{Érdemjegy} \\ + \hline + 0–50 & 1 (elégtelen) \\ + \hline + 51–60 & 2 (elégséges) \\ + \hline + 61–70 & 3 (közepes) \\ + \hline + 71–80 & 4 (jó) \\ + \hline + 81–100 & 5 (jeles) \\ + \hline + \end{tabular} + \end{table} + \vspace{0.5cm} + \begin{block}{Megajánlott jegy feltétele} + Legalább \kiemel{71 pont} a két zárthelyi dolgozat összesített eredményéből + \end{block} +\end{frame} + +\begin{frame}{Következő lépések} + \begin{enumerate} + \item Fejlesztői környezet telepítése (Node.js, npm) + \item Git és verziókezelés alapjai + \item Első Express.js alkalmazás elkészítése + \item REST API alapok megismerése + \end{enumerate} +\end{frame} diff --git a/README.md b/README.md new file mode 100644 index 0000000..280af23 --- /dev/null +++ b/README.md @@ -0,0 +1,2 @@ +# GKxB_INTM049 +Ebben a tárolóban a **Web technológiák** tárgy fóliáit készítem elő, tárolom, tartom naprakészen. Minden észrevételt szívesen fogadok [e-mail](mailto:miklos.hatwagner@sze.hu) címemen. diff --git a/common/it_logo.pdf b/common/it_logo.pdf new file mode 100644 index 0000000..dde9932 Binary files /dev/null and b/common/it_logo.pdf differ diff --git a/common/sze_logo.pdf b/common/sze_logo.pdf new file mode 100644 index 0000000..cbf22f9 Binary files /dev/null and b/common/sze_logo.pdf differ diff --git a/common/webfejl.sty b/common/webfejl.sty new file mode 100644 index 0000000..bdb5acb --- /dev/null +++ b/common/webfejl.sty @@ -0,0 +1,141 @@ +\usepackage[utf8]{inputenc} +\usepackage[T1]{fontenc} +\usepackage[magyar]{babel} +\usepackage{indentfirst} +\usepackage{graphicx} +\usepackage{listingsutf8} +\usepackage{textcomp} +\usepackage{eurosym} +\usepackage{mathtools} +\lstset{literate= + {á}{{\'a}}1 {é}{{\'e}}1 {í}{{\'i}}1 {ó}{{\'o}}1 {ú}{{\'u}}1 + {Á}{{\'A}}1 {É}{{\'E}}1 {Í}{{\'I}}1 {Ó}{{\'O}}1 {Ú}{{\'U}}1 + {à}{{\`a}}1 {è}{{\`e}}1 {ì}{{\`i}}1 {ò}{{\`o}}1 {ù}{{\`u}}1 + {À}{{\`A}}1 {È}{{\'E}}1 {Ì}{{\`I}}1 {Ò}{{\`O}}1 {Ù}{{\`U}}1 + {ä}{{\"a}}1 {ë}{{\"e}}1 {ï}{{\"i}}1 {ö}{{\"o}}1 {ü}{{\"u}}1 + {Ä}{{\"A}}1 {Ë}{{\"E}}1 {Ï}{{\"I}}1 {Ö}{{\"O}}1 {Ü}{{\"U}}1 + {â}{{\^a}}1 {ê}{{\^e}}1 {î}{{\^i}}1 {ô}{{\^o}}1 {û}{{\^u}}1 + {Â}{{\^A}}1 {Ê}{{\^E}}1 {Î}{{\^I}}1 {Ô}{{\^O}}1 {Û}{{\^U}}1 + {œ}{{\oe}}1 {Œ}{{\OE}}1 {æ}{{\ae}}1 {Æ}{{\AE}}1 {ß}{{\ss}}1 + {ç}{{\c c}}1 {Ç}{{\c C}}1 {ø}{{\o}}1 {å}{{\r a}}1 {Å}{{\r A}}1 + {€}{{\EUR}}1 {£}{{\pounds}}1 {ő}{{\H{o}}}1 {ű}{{\H{u}}}1 +} +\lstdefinestyle{HTML}{ + language=HTML, + breaklines=true, + postbreak=\mbox{\textcolor{red}{$\hookrightarrow$}\space}, + stringstyle=\ttfamily, + inputencoding=utf8, + morekeywords={header, time, nav, main, article, section, aside, role, + footer, details, open, summary, srcdoc, list, datalist, placeholder, + pattern, required, min, max, step, enctype, formaction, formmethod, + formnovalidate, formtarget, output} +} + +\lstdefinestyle{JavaScript}{ + basicstyle=\ttfamily\scriptsize, + breaklines=true, + columns=fullflexible, + keepspaces=true, + showstringspaces=false, + literate={} +} +\lstdefinestyle{NodeJS}{ + basicstyle=\ttfamily\scriptsize, + breaklines=true, + columns=fullflexible, + keepspaces=true, + showstringspaces=false, + literate={} +} +\lstdefinestyle{Express}{ + basicstyle=\ttfamily\scriptsize, + breaklines=true, + columns=fullflexible, + keepspaces=true, + showstringspaces=false, + literate={} +} +\lstdefinestyle{Prisma}{ + basicstyle=\ttfamily\scriptsize, + breaklines=true, + columns=fullflexible, + keepspaces=true, + showstringspaces=false, + literate={} +} +\usepackage{hyperref} +\usepackage{attachfile} +\usepackage{multirow} +% Navigációs pöttyök hozzáadása subsection nélküli fejezetekhez +\usepackage{remreset} +\makeatletter +\@removefromreset{subsection}{section} +\makeatother +\setcounter{subsection}{1} +%%%%% +\attachfilesetup{color={1.0 0.6 0.0},author={MD},description={Kattintson duplán a minta % +megtekintéséhez!},icon=Paperclip} +% Széchenyi Egyetem arculati színek +\definecolor{szenavy}{RGB}{44,62,80} % Sötét kék (fejléc) +\definecolor{szecyan}{RGB}{0,168,225} % Világos kék (kiemelés, logó) +\definecolor{szezold}{RGB}{139,195,74} % Élénk zöld (akcentus) +\definecolor{szeszurke}{RGB}{96,96,96} % Sötét szürke +% Kompatibilitás a régi parancsokkal +\definecolor{kiemelesszin}{RGB}{0,168,225} % Kék kiemelés (szecyan) +\definecolor{kiemelesszinZ}{RGB}{139,195,74} % Zöld kiemelés (szezold) +\definecolor{kiemelesszinN}{RGB}{44,62,80} % Navy kiemelés (szenavy) +\definecolor{hivatkozasszin}{RGB}{0,168,225} % Kék hivatkozás +\newcommand{\kiemel}[1]{{\color{kiemelesszin}#1}} +\newcommand{\kiemelZ}[1]{{\color{kiemelesszinZ}#1}} +\newcommand{\kiemelN}[1]{{\color{kiemelesszinN}#1}} +\newcommand{\hiv}[1]{{\color{hivatkozasszin}#1}} +\newcommand{\logoalul}{ + \begin{picture}(0,0) + \put(120,-0){\hbox{\includegraphics[scale=.5]{../common/sze_logo.pdf}}} + \put(205,-6){\hbox{\includegraphics[scale=.4]{../common/it_logo.pdf}}} + \end{picture} +} + +\frenchspacing +\usetheme[compress]{Berlin} + +% Navigációs sáv testreszabása - section nevek és navigációs körök megjelenítése +\setbeamertemplate{headline} +{ + \leavevmode% + \hbox{% + \begin{beamercolorbox}[wd=\paperwidth,ht=2.5ex,dp=1.125ex]{section in head/foot}% + \insertsectionnavigationhorizontal{\paperwidth}{}{\hskip0pt plus1filll} + \end{beamercolorbox}% + } + \vskip0pt% +} + +% Kisebb betűméret a slide-okhoz +\setbeamerfont{frametitle}{size=\normalsize} +\setbeamerfont{framesubtitle}{size=\small} +\setbeamerfont{block title}{size=\small} +\setbeamerfont{block body}{size=\footnotesize} +\setbeamerfont{itemize/enumerate body}{size=\footnotesize} +\setbeamerfont{itemize/enumerate subbody}{size=\scriptsize} + +% Beamer színséma testreszabása Széchenyi arculathoz +\setbeamercolor{structure}{fg=szecyan} +\setbeamercolor{palette primary}{bg=szenavy,fg=white} +\setbeamercolor{palette secondary}{bg=szecyan,fg=white} +\setbeamercolor{palette tertiary}{bg=szezold,fg=white} +\setbeamercolor{palette quaternary}{bg=szeszurke,fg=white} +\setbeamercolor{titlelike}{parent=palette primary} +\setbeamercolor{frametitle}{bg=szenavy,fg=white} +\setbeamercolor{frametitle right}{bg=szenavy} +\setbeamercolor{block title}{bg=szecyan,fg=white} +\setbeamercolor{block body}{bg=szecyan!10,fg=black} +\setbeamercolor{block title alerted}{bg=szezold,fg=white} +\setbeamercolor{block body alerted}{bg=szezold!10,fg=black} +\setbeamercolor{item}{fg=szecyan} +\setbeamercolor{subitem}{fg=szezold} + +\author{Magda Donát} +\institute{Széchenyi István Egyetem, Győr} +\date{\hiv{\href{https://git.mdnd-it.cc/Donat/GKNB_MSTM071}{https://git.mdnd-it.cc/Donat/GKNB_MSTM071}}\\ \today}