Aplikacje Webowe i ich znaczenie w kontekście egzaminu INF.04

1. Wprowadzenie do aplikacji webowych

Aplikacje webowe to programy, które działają w przeglądarce internetowej i nie wymagają instalacji na urządzeniu użytkownika. Ich zaletą jest uniwersalność i możliwość dostępu z dowolnego miejsca na świecie.

2. Wykorzystanie środowiska programistycznego dla aplikacji zaawansowanych webowych

Aby tworzyć aplikacje webowe, konieczne jest odpowiednie środowisko programistyczne.

Dobór środowiska do określonych zadań i języka programowania: Popularne narzędzia to Visual Studio (dla C# i ASP.NET), Eclipse (dla Java), czy JetBrains WebStorm (dla JavaScript i frameworków webowych).
Stosowanie środowisk IDE i RAD: IDE (Integrated Development Environment) to zintegrowane środowiska, które ułatwiają programowanie, np. Visual Studio Code, PhpStorm. RAD (Rapid Application Development) umożliwia szybkie budowanie aplikacji, np. Mendix czy OutSystems.
Rozpoznawanie narzędzi wykorzystywanych w procesie tworzenia aplikacji webowych:
- Git – system kontroli wersji pozwalający na śledzenie zmian w kodzie, współpracę zespołową i tworzenie repozytoriów.
- Docker – platforma do konteneryzacji aplikacji, ułatwiająca wdrażanie i zarządzanie środowiskiem aplikacyjnym.
- Postman – narzędzie do testowania API, umożliwiające wysyłanie zapytań HTTP i analizowanie odpowiedzi.

Szczegółowe omówienie wybranych narzędzi

1. Git – system kontroli wersji

Git to rozproszony system kontroli wersji, który pozwala programistom na zarządzanie kodem źródłowym. Każda zmiana wprowadzona w kodzie jest zapisywana jako kolejna wersja, co umożliwia powrót do wcześniejszych stanów projektu.
Co to jest Git ~Youtube

Podstawowe komendy Git

git init # Inicjalizacja repozytorium

git clone <adres_repo> # Sklonowanie repozytorium z GitHub

git add . # Dodanie wszystkich zmian do staged area

git commit -m "Opis zmian" # Zatwierdzenie zmian

git push origin main # Wysłanie zmian do zdalnego repozytorium

git pull origin main # Pobranie najnowszych zmian

git status # Sprawdzenie statusu repozytorium

Konfiguracja Git

git config --global user.name "Twoje Imię"
git config --global user.email "twoj@email.com"

Wykorzystanie Git w projektach zespołowych

Każdy programista pracuje na osobnej gałęzi (branch).
Po zakończeniu pracy zmiany są scalane (merge) z główną gałęzią (main).
GitHub, GitLab, Bitbucket – popularne platformy do hostowania repozytoriów Git.

2. Docker – konteneryzacja aplikacji

Docker pozwala na uruchamianie aplikacji w izolowanych kontenerach, dzięki czemu działa ona w identycznym środowisku niezależnie od systemu operacyjnego.

Instalacja Dockera

Na Windows i macOS: Pobierz Docker Desktop
Na Linux:

sudo apt update
sudo apt install docker.io
sudo systemctl start docker
sudo systemctl enable docker

Podstawowe komendy Docker

docker pull nginx # Pobranie obrazu nginx
docker images # Wyświetlenie pobranych obrazów
docker run -d -p 8080:80 nginx # Uruchomienie kontenera z nginx
docker ps # Lista działających kontenerów
docker stop <ID_kontenera> # Zatrzymanie kontenera
docker rm <ID_kontenera> # Usunięcie kontenera
docker rmi <ID_obrazu> # Usunięcie obrazu

Tworzenie własnego kontenera z aplikacją

Stwórz plik Dockerfile:

FROM php:7.4-apache
COPY . /var/www/html
EXPOSE 80
CMD ["apachectl", "-D", "FOREGROUND"]

Zbuduj obraz:

docker build -t moja_aplikacja .

Uruchom kontener:

docker run -d -p 8080:80 moja_aplikacja

3. Postman – testowanie API

Postman to narzędzie, które umożliwia testowanie żądań HTTP do API oraz analizowanie ich odpowiedzi.

Podstawowe operacje w Postman

Wprowadzenie adresu API (np. https://api.example.com/users).
Wybór metody HTTP (GET, POST, PUT, DELETE).
Wysyłanie parametrów w zapytaniu (np. JSON).
Analiza odpowiedzi serwera.

Przykładowe zapytanie POST do API

API do rejestracji użytkownika:

{
  "username": "test_user",
  "email": "test@example.com",
  "password": "secret"
}

Wysłanie zapytania w Postman:
- Wybierz metodę POST
- Wklej adres API
- Przejdź do zakładki Body i wybierz raw JSON
- Wklej powyższy JSON i kliknij Send

Testowanie API za pomocą Postmana

Możliwość automatyzacji testów.
Tworzenie kolekcji zapytań do testowania API.
Obsługa tokenów autoryzacyjnych (OAuth, Bearer Token, API Key).

3. Wykorzystanie frameworków do programowania aplikacji webowych

Frameworki pozwalają przyspieszyć proces tworzenia aplikacji, zapewniając gotowe moduły do obsługi serwera, bazy danych czy interfejsu użytkownika.

Popularne frameworki i ich instalacja na Windows

1. ASP.NET Core (C#)

Instalacja:

Pobierz i zainstaluj Visual Studio 2022.
Podczas instalacji wybierz opcję „ASP.NET and web development”.
Sprawdź poprawność instalacji w wierszu poleceń:dotnet --version

Tworzenie nowego projektu ASP.NET Core:

dotnet new webapp -o MojaAplikacja
cd MojaAplikacja
dotnet run

Podstawowa aplikacja C# (Controller w ASP.NET Core):

using Microsoft.AspNetCore.Mvc;

[Route("api/hello")]
[ApiController]
public class HelloController : ControllerBase
{
    [HttpGet]
    public string Get()
    {
        return "Witaj w aplikacji ASP.NET Core!";
    }
}

2. Django (Python)

Instalacja Django:

Zainstaluj Pythona (https://www.python.org/downloads/).
W terminalu wpisz:pip install django

Tworzenie nowego projektu Django:

django-admin startproject MojaAplikacja
cd MojaAplikacja
python manage.py runserver

Tworzenie podstawowego widoku Django:

from django.http import HttpResponse

def hello(request):
    return HttpResponse("Witaj w aplikacji Django!")

3. Angular (frontend)

Instalacja Angular CLI:

npm install -g @angular/cli

Tworzenie nowego projektu Angular:

ng new MojaAplikacja
cd MojaAplikacja
ng serve

Podstawowy komponent w Angular:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>Witaj w aplikacji Angular!</h1>`
})
export class AppComponent {}

4. Node.js (backend dla JavaScript)

Instalacja Node.js:

Pobierz i zainstaluj Node.js z https://nodejs.org/.
Sprawdź wersję:node -v

Tworzenie serwera HTTP w Node.js:

const http = require('http');

const server = http.createServer((req, res) => {
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.end('Witaj w aplikacji Node.js!');
});

server.listen(3000, () => {
    console.log('Serwer działa na http://localhost:3000');
});

Uruchamianie aplikacji:

node server.js

4. Programowanie zaawansowanych aplikacji webowych

Tworzenie aplikacji webowych obejmuje zarówno backend, jak i frontend.

Języki programowania:
- PHP – popularny w tworzeniu dynamicznych stron i aplikacji webowych.
- C# – wykorzystywany w ASP.NET.
- Python – stosowany w Django i Flask.
- JavaScript – podstawowy język dla interaktywnych aplikacji webowych.
Mechanizmy sesji i ciasteczek:
- Sesje pozwalają na przechowywanie informacji o użytkowniku po zalogowaniu.
- Ciasteczka (cookies) są używane do zapamiętywania preferencji użytkownika.

Przykładowy kod – Połączenie PHP z bazą danych MySQL

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "moja_baza";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Błąd połączenia: " . $conn->connect_error);
}

echo "Połączono z bazą danych!";
?>

Programowanie dynamicznych formularzy i systemów logowania:
- Formularze kontaktowe, rejestracyjne, logowania z walidacją danych.
- Obsługa różnych poziomów dostępu w witrynie.
Tworzenie aplikacji korzystających z baz danych:
- Użycie SQL (MySQL, PostgreSQL) lub NoSQL (MongoDB) do zarządzania danymi.
Implementacja elementów funkcjonalnych:
- Tworzenie sklepów internetowych (Magento, WooCommerce).
- Budowa portali społecznościowych, serwisów ogłoszeniowych czy rezerwacyjnych.

5. Umiejętności niezbędne na egzaminie INF.04

Aby zdać egzamin INF.04, należy posiadać następujące umiejętności:

Znajomość języków programowania: Opanowanie PHP, C#, Pythona i JavaScript pozwala tworzyć nowoczesne aplikacje webowe.
Obsługa frameworków i bibliotek: Znajomość narzędzi takich jak Angular, React, ASP.NET czy Django znacznie ułatwia rozwój aplikacji.
Zarządzanie sesjami i ciasteczkami: Implementacja mechanizmów sesyjnych oraz obsługi cookies.
Integracja z bazami danych: Tworzenie aplikacji, które komunikują się z bazami danych, np. MySQL, PostgreSQL.
Projektowanie interfejsu użytkownika: Tworzenie intuicyjnych systemów logowania, formularzy oraz dynamicznych stron internetowych.
Implementacja specyficznych funkcjonalności: Tworzenie aplikacji typu e-commerce, portali społecznościowych czy systemów rezerwacyjnych.