alapok
This commit is contained in:
magdo
+17
@@ -0,0 +1,17 @@
|
||||
# LaTeX temps
|
||||
*.toc
|
||||
*.log
|
||||
*.aux
|
||||
*.bbl
|
||||
*.blg
|
||||
*.dvi
|
||||
*.ps
|
||||
*.spl
|
||||
*.nav
|
||||
*.out
|
||||
*.snm
|
||||
*.tex.backup
|
||||
*.vrb
|
||||
*.synctex.gz
|
||||
|
||||
Thumbs.*
|
||||
Binary file not shown.
@@ -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}
|
||||
@@ -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 <token> # 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}
|
||||
@@ -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}
|
||||
@@ -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}
|
||||
@@ -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}
|
||||
@@ -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}
|
||||
@@ -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.
|
||||
Binary file not shown.
Binary file not shown.
@@ -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}
|
||||
Reference in New Issue
Block a user