Tecnologie & Linguaggi Web
Last Update : 13/11/2023
- Responsive Web Design
- HTML
- XHTML
- CSS
- Bootstrap
- XML
- JSON
- JSON Vs XML
- REST
- JavaScript
- NodeJS
- SwaggerJS
- MongoDB
- Downloads
Responsive Web Design
Il responsive web design riguarda la creazione di siti web che si adattano automaticamente
per avere un aspetto adatto a seconda del dispositivo in cui vengono visualizzati, dai piccoli telefoni ai desktop di grandi dimensioni.
HTML
→ Sintassi HTML ←
HyperText Markup Lan Viene usato per la creazione delle pagine Web
- È uno standard per la rappresentazione
- Descrive la struttura della pagina
- Linguaggio di markup (basato sui tag), ossia un linguaggio per strutturare e marcare i documenti in maniera indipendente dall’applicazione, modellato per rendere esplicita una particolare interpretazione di un testo.
- Descrive dati e regole su come mostrare i dati
- Ha poche e semplici regole sintattiche
- Non ha nessun meccanismo di decisione o iterazione (linguaggio di markup e non di programmazione)
La struttura dei documenti HTML è divisa in due parti: testa (head) e corpo (body)
Scheletro Pagina HTML
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
</head>
</html>
Tags
La struttura delle pagine web è definita attraverso dei tag ossia
dei marcatori che identificano porzioni di testo, e personalizzano la
pagina.
Tutto il codice contenuto all interno del tag <html>
è codice html.
Lo head contiene informazioni/metadati relativi al documento (non immediati), ad
esempio descrive come il documento deve essere letto e interpretato ed eventualmente il titolo
Il body contiene il documento vero e proprio, presentando il
contenuto in diversi modi sia testo ma anche immagini, video, audio.
Il tag div che è un blocco contenitore generico, fornisce un vero e
proprio elemento strutturale della pagina, perchè suddivide gli spazi
della pagina in zone in modo seplice e dettagliato.
Altri tag es img, table, ul/li, ol, li, form, input, a, select/option.
Esempio di tag: <nome_tag attributi>contenuto</nome_tag>
Tag <div>
Un tag molto utilizzato è <div>
che rappresenta un blocco che funziona da contenitore.
È utile sopratutto nella creazione del layout della pagina in quanto ne permette di definire la
struttura.
Suddivide gli spazi in zone per progettare il sito in modo semplice e dettagliato
Esempio di struttura con tag div
<div id="container">
<div id="header">
<div id="navigation"></div><!--#navigation-->
</div><!--#header-->
<div id="main"></div><!--#main-->
<div id="sidebar"></div><!--#sidebar-->
<div id="footer"></div><!--#footer-->
</div><!--#container-->
Un tratto che ha reso HTML popolare sono gli ipertesti (o link), ovvero un collegamento tra un
testo e un altro.
I link sono formati da due componenti: contenuto e risorsa a cui si riferiscono.
Esempio e sintassi dei link: <a href="remote_or_local_address">Testo</a>
La risorsa a cui i link fanno riferimento possono essere: immagini, documenti, altre pagine HTML,
file, e-mail, numeri ecc... (è possibile utilizzare anche il relative path)
I Commenti in HTML →
<!-- commento -->
HTML è case unsensitive →<HEAD></HEAD>
==<head></head>
XHTML è case sensitive →<HEAD></HEAD>
!=<head></head>
È comunque consigliabile utilizzare il carattere minuscolo
Browser
Un browser interpreta e legge i documenti HTML, e serve per la
navigazione web, infatti esso richiede risorse attraverso il web e le
mostra nella finestra.
Inoltre contiene alcuni tool per gli sviluppatori per esempio il
debug della pagina, analisi di sorgenti e stili, accesso allo storage e
cookie e molto altro, alcuni browser famosi sono: Chrome, Firefox,
Opera, Safari.
Composizione del Browser:
-
Layout Engine
riceve input dal browser (Url bar, search box, mouse clicks e key presses) e li passa al rendering engine -
Rendering Engine
riceve il codice HTML e lo interpreta mostrandolo a video -
User Interface
controlli del browser, ad esempio pulsanti per andare avanti/indietro, bookmarks ecc.. -
JavaScript Engine
engine che effettua il parse ed esegue il codice JavaScript per poi restituirne il risultato -
Network Layer
gestisce le funzioni di rete: criptazione, richieste http e le varie configurazioni... -
Storage
porzione di memoria dove il browser memorizza cached file, cookie e oggetti creati con JavaScript -
Operating System Interface
componente che interagisce con il Sistema Operativo per disegnare i diversi e elemnti e gestire la finestra
XHTML
EXtensible HyperText Markup Language
Linguaggio di markup quasi identico a html, ma più stringente, supportato dai principali browser, motivo per cui si usa è che molte pagine web contengono html errato, dove per interpretare codice sbagliato richiede maggiori risorse o potenza computazionale, quindi è un linguaggio di markup corretto dove i documenti devono essere ben formati (es tag sempre chiusi, innestati correttamente).
Come converto un file html in x-html?
- aggiungendo un XHTML
<!DOCTYPE>
; nella prima linea di ogni pagina, - aggiungendo l'attributo xmlns all'elemento html
<html xmlns="http://*.w3.org/*/xhtml"></html>
- cambiando tutti i nomi di elemento in minuscolo etc…
CSS
→ Sintassi CSS ←
Cascading Style Sheet
File css non sono altro che fogli di stile a cascata, è uno dei
linguaggi fondamentali del W3C (organizzazione che fornisce linee guida e regole
per la specifica delle pagine), serve per associare uno stile al testo
delle pagine, riducendo il carico del lavoro, permette inoltre di
controllare il layout delle pagine web multiple in un colpo solo,
possono essere separate dalla pagina html.
Pagine più leggere e facili da modificare.
È un insieme di regole, ogni regola è formata da un selettore
associato ad un blocco delle dichiarazioni, ossia delle coppie
propietà, valore.
Selettore per i tag (tag{}), selettore per id (#id{}
), selettore per le
classi (.classe{})
Per inserire css esterni uso <link>
nello <head>
, per quelli
interni metto tutte le regole nel tag <style>
, oppure in linea
con l’attributo style=""
.
“a cascata” perché è il modo in cui vengono valutate le regole css.
Infatti lo User agent deve applicare un algoritmo per stabilire i valori
di una combinazione di elementi e proprietà. Questa valutazione a
cascata avviene in 4 fasi:
- Per prima cosa bisogna selezionare tutte le dichiarazioni che applicano a un elemento/proprietà per il media type richiesto
- Il primo ordinamento è fatto in base a peso e origine
- Il secondo ordinamento è fatto in base alla specificity
- Il terzo ordinamento è fatto in base all’ordine
Css box model: ossia tutti gli elementi html sono delle box, da più esterno al più interno abbiamo: margin area trasparente attorno al bordo, border un bordo che circonda padding e content , padding area trasparente attorno al content, il content dove risiedono testo e immagini.
Bootstrap
→ Ulteriori info nel sito ufficiale ←
Bootstrap è il framework HTML, CSS e JavaScript più popolare per lo sviluppo di siti Web responsive
e mobile-first.
Bootstrap è un framework front-end gratuito per uno sviluppo web più
rapido e semplice, include modelli di progettazione basati su HTML e CSS
per molti elementi, oltre a plug-in JavaScript opzionali, inoltre ti dà
anche la possibilità di creare facilmente design reattivi, ossia
design che si adattano automaticamente per avere un bell’aspetto su
tutti i dispositivi, dai piccoli telefoni ai desktop di grandi
dimensioni.
In pratica consiste in una libreria open-source per realizzare siti web e applicazioni web
responsive.
Per usarlo basta includere i fogli di stile e gli script.
Incorpora alcuni elementi come: grid, table, buttons e molto altro.
I vantaggi dell'utilizzo di Bootstrap sono:
- Facile utilizzo
- Funzionalità reattive
- Approccio mobile-first
- Compatibilità con tutti i browser moderni
Per includere Bootstrap è necessario inserire i seguenti elementi all'interno del progetto:
CSS
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/${VERSION_NUMBER}/css/bootstrap.min.css">
JavaScript
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/${VERSION_NUMBER}/js/bootstrap.min.js"></script>
jQuery Library
<script src="https://code.jquery.com/jquery-latest.js"></script>
Per garantire il corretto rendering e zoom al tocco è necessario utilizzare con Bootstrap il tag
<meta>
, attraverso il codice:
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width
→ imposta la larghezza in modo da seguire la larghezza del display del device in usoinitial-scale=1
→ imposta il livello di zoom iniziale quando la pagina viene caricata la prima volta
Info su Bootstrap
Se l'utente ha già visitato un sito che utilizza Bootstrap allora non verrà effettuato nuovamente il download, ma verrà caricato dalla cache, velocizzando i tempi di caricamento. Inoltre Bootstrap è creato in modo che quando un utente richieda un file, esso venga fornito dal server più vicino per ridurre ulteriormente i tempi di caricamento.
XML
→ Sintassi XML ←
EXtensible Markup Language
Nato dalla necessità di un nuovo e comune formato dei dati per Internet, necessità di regole semplici comuni e semplici da comprendere, capacità di definire una struttura delle informazioni per diversi domini, formato abbastanza formale, e leggibile.
XML è uno strumento per trasmettere informazioni, indipendente dalla
piattaforma, dal software e dall’hardware.
Ossia un linguaggio di markup come HTML, dove i tag di
XML non sono predefiniti, creato per strutturare e memorizzare e trasmettere dati.
Le informazioni sono collezionate in unità chiamate
documento XML, il quale contiene uno o più elementi dove ogni
elemento ha un nome, ossia all’interno dei tag abbiamo le informazioni.
XML non vuole sostituire HTML ma la tendenza è quella di rappresentare i dati con XML e mostrarli con HTML.
Infatti il solo scopo di XML è quello di strutturare, memorizzare e trasmettere i dati.
Inoltre con xml è possibile scambiare i dati fra sistemi incompatibili.
Sintassi
- in XML è illegale omettere il tag di chiusura
- i nomi dei tag XML sono case-sensitive
- è presente l’annidamento dei tag
- tutti i documenti XML devono avere un nodo radice
- tutti gli altri elementi devono essere compresi
nell’elemento radice - tutti gli elementi possono avere dei nodi figli
- i valori di tutti gli attributi devono essere tra doppi apici
- evito di usare gli attributi se possibili li uso solo per le istruzioni di controllo
<?xml version="1.0" encoding="utf-8"?>
<event>
<date>20 Settembre 2023</date>
<priority>High</priority>
<name>Esame Tecnologie e Linguaggi Web</name>
<note>Presentazione e discussione orale del progetto</note>
<url>https://ariel.unimi.it</url>
</event>
Validazione XML e DTD
Un documento XML sintatticamente corretto è detto ben formato.
Un documento XML che rispetta uno schema (o un DTD) è detto valido.
Per leggere, modificare o creare un documento XML è necessario un
parser XML (js con DOMParser()
).
JSON
→ Sintassi JSON ←
JavaScript Object Notation
È un text-based open standard leggero disegnato per lo scambio di dati human-readable.
Usato quando si scrivono applicazioni basate su JavaScript (include estensioni al browser e siti web);
sopratutto usato per trasmettere dati tra server e applicazioni web (servizi API).
Facile da usare da leggere e scrivere, molto leggero, ed indipendente dal linguaggio.
La sintassi JSON è considerata come un sottoinsieme della sintassi JavaScript,
infatti dati rappresentati come coppia chiave, valore, le parentesi graffe contengono oggetti,
le parentesi quadre definiscono array.
Esempio JSON
{
"exams":[
{
"id": "01",
"name": "Tecnologie e Linguaggi Web",
"teacher": "V.B.",
"year": 3,
"url": "https://ariel.unimi.it/tlw",
},
{
"id": "02",
"name": "Programmazione II",
"teacher": "M.S.",
"year": 2,
"url": "https://ariel.unimi.it/prog2",
}
]
}
I tipi di dato supportati da JSON sono:
Number, String, Boolean, Array, Value, Object (key:value), Whitespace, null
JSON Schema
È una specifica per la definizione dei dati JSON, serve
per validare JSON, con diverse librerie per i vari linguaggi (validatore più valido →
JVS)
Altre info di JSON e implementazioni nei vari linguaggi.
JSON Vs XML
JSON è simile a XML ma più leggero.
Sono entrambi formati human readable e indipendenti dal linguaggio.
Ogni valore in XML richiede apertura e chiusura di un tag, in JSON
solo il valore.
Si possono confrontare su 3 fattori:
- verbosità: xml più verboso di JSON che è più veloce da scrivere
- utilizzo degli array: xml usato per dati strutturali che non contengono array, invece json li include
- parsing: in JS molto semplice parsare json
(
JSON.parse or JSON.stringify
), chiunque può parsare XML
REST
REST → REpresentational State Transfer
- Gestisce un tipo di contenuto variabile che può essere XML, ma principalmente JSON.
- è un’astrazione di elementi architetturali in un sistema hypermedia distribuito
- ignora i dettagli implementativi dei componenti e la sintassi dei protocolli
- si focalizza sul ruolo dei componenti
Data Element | Modern Web Example |
---|---|
resource | conceptual target of hypertext reference |
resource identifier | URL, URN (Unified Resource Name) |
representation | HTML document, JPEG image |
representation metadata | media type, last-modified time |
resource metadata | source link, alternates, vary |
control data | if-modified-since, cache-control |
La natura e lo stato dei data element è un aspetto essenziale di
REST, le componenti REST trasferiscono una risorsa usando una delle
rappresentazioni standard.
Ogni resource è una membership function che al tempo t viene
associata a un set di entità/valori.
Resource identifier
l’autore sceglie l’identificatore, due uri possono puntare alla stessa risorsa.
Addressability
una applicazione è indirizzabile se espone i suoi
dati come risorse, espone un uri per ogni info di interesse.
Statelessness
ogni richiesta HTTP è eseguita in isolation, infatti
il server non usa informazioni da richieste precedenti, il client
inserisce tutto ciò che è necessario a soddisfare la richiesta, lo stato
renderebbe le richieste molto più semplici ma la gestione del client
molto più complicata.
Representation
usata per ottenere lo stato di una risorsa,
trasferita tra i componenti, sequenza di dati più byte che la
descrivono, il client sceglie la rappresentazione, e il server sceglie
la rappresentazione in base allo header della richiesta (xml, json
etc…).
Uniform Interface per tutte le risorse interfaccia comune
GET
ottiene una rappresentazione della risorsaPOST
crea una nuova risorsaPUT
crea o aggiorna una risorsaDELETE
cancella una risorsa
Uniform Interface Principle: CRUD example
CRUD | REST | action |
---|---|---|
CREATE | POST | create a sub resource |
READ | GET | retrieve the current state of the resource |
UPDATE | PUT | initialize or update the state of a resource at the given URI |
DELETE | DELETE | clear a resource, after the URI is no longer valid |
POST
è usata per creare risorse subordinate,PUT
per creare/modificare risorse
Con la PUT il client decide il nome della risorsa, con la POST lo decide il server.
RESTful-Services
Un servizio basato su REST è chiamato RESTful service, REST non
dipende da nessun protocollo, anche se quasi tutti i RESTful service
usano HTTP.
Visione astratta REST client:
- definisco le info da aggiungere alla HTTP request (header, body, method, uri)
- creare l’HTTP request e mandarla al server HTTP
- parsare la risposta e fornire le info al codice REST
Il client usa XMl parser per interpretare la risposta, client REST possono essere sviluppati in molti linguaggi (js).
Visione astratta REST server:
- accettare la HTTP request
- parsare la HTTP request ed estrarre le info importanti
- spedire la risposta al client
REST accede ai dati usando URI.
Safety: richieste di sola lettura che non causano danni (GET, HEAD).
Idempotenza: L’esecuzione di un commando una o più volte ha lo
stesso effetto (GET, HEAD, PUT, DELETE).
JavaScript
Linguaggio di scripting, tipo particolare di linguaggio di programmazione, utilizzato appunto per scrivere script.
Script: È un programma che inseriamo nella pagina web
- È formato da un insieme di istruzioni, essenziale per la visualizzazione di pagine web dinamiche, ossia pagine web dove il contenuto viene generato al momento della richiesta/visualizzazione
- È un linguaggio lato client: viene elaborato tramite il client (browser), senza la necessità di un server per poter visualizzare la pagina
- È un linguaggio interpretato, ossia che il sorgente non deve essere compilato per essere eseguito, inoltre l’interprete di JS è contenuto all’interno del browser.
JavaScript inoltre è:
- case-sensitive
- weak-typed
- event-driven
- Object-based language
Il codice JS può essere incluso in un tag <script>codice JavaScript</script>
, oppure
semplicemente indicando il percorso del file JS <script src="path_to_file.js"></script>
Possibilità di accesso agli oggetti tramite nodi (ex: aggiungo con appendChild()
)
Oggetti JS: è una collezione di dati dotata di nome, posso accedere alle sue propietà con la dot-notation, oggetto JS costruito tramite costruttore.
Variabili e Scope
Scope:
- Globale → per le variabili definite fuori da funzioni
- Locale → per le variabili definite esplicitamente all'interno di funzioni
ATTENZIONE un blocco NON delimita uno scope!
x = '3' + 2; // string "32" { { x = 5 } // internal block y = x + 3; // x = 5 and not "323" -> y = 8 }
DOM
Document Object Model
È uno dei concetti chiave di JS, è uno standard di W3C, costituito da tre parti:
- Core DOM: modello standard per tutti i tipi di documenti
- XML DOM: modello standard per documenti XML
- HTML DOM: modello standard per documenti HTML
HTML DOM
Definisce uno standard su come come ottenere, cambiare, aggiungere o modificare elementi HTML.
JavaScript usa HTML DOM per modificare tutti gli elementi di una pagina web.
In pratica definisce ogni elemento HTML come oggetto, che ha delle proprietà e dei metodi per
accedervi, oltre a creare degli eventi per gli elementi stessi.
quando una pagina è caricata il browser crea il DOM della pagina, generato secondo una gerarchia.
Tra gli oggetti del DOM ho:
window
che è la finestra corrente del browserdocument
il contenuto della finestranavigator
oggetto relativo al browserlocation
oggetto relativo alle informazioni sull'indirizzo della risorsa, il percorso etc...history
oggetto relativo alla navigazione delle pagine (avanti/indietro)
Come accedo agli elementi della pagina attraverso id?
document.getElementByID(id)
Eventi
I programmi JavaScript sono tipicamente “guidati dagli eventi” (event-driven).
Gli eventi sono scatenati da azioni dell’utente sulla pagina Web.
Un programma JavaScript deve contenere un gestore di eventi (event handler),
che sia in grado di ricevere e interpretare le azioni dell’utente (eventi).
Il DOM fornisce una serie di gestori di eventi predefiniti.
Per esempio evento di onClick
, onLoad
, onMouseOver
, inoltre questi
eventi possono chiamare funzioni JS che raccolgono i dati dal form.
<!-- L'utente fa click (onClick) sul link <a ..> -->
<a href="#" onClick="window.print()">
<!-- L'utente invia (onSubmit) il modulo <form ..> -->
<form name="module" onSubmit="alert('Sent!');">
<!-- L'utente porta il cursore (onFocus) nel campo di testo <input ..> -->
<input type="text" name="login" onFocus="js_action();">
<!-- L'utente carica (onLoad) la pagina <body ..> -->
<body onLoad="alert('Loaded!');">
Promises
Una promise è un particolare oggetto che connette il codice
produttore, una qualsiasi operazione che richiede tempo (come il download di file da server),
con il codice consumatore; cioè un operazione che necessita del risultato
del codice produttore, rendendo il risultato disponibile al consumatore
quando il codice produttore è terminato.
let promise = new Promise(function(resolve, reject) {
// codice produttore
});
I due argomenti della funzione sono delle callback che vengono eseguite quando la promise è risolta o rifiutata:
- resolve(value) - se il processo termina correttamente con il valore passato come parametro
- reject(reason) - se il processo termina con un errore
L'oggetto Promise ha due proprietà interne:
- state
- pending stato iniziale
- fulfilled se viene invocato resolve
- rejected se viene invocato reject
- result
- undefined stato iniziale
- value se viene invocato resolve
- error se viene invocato reject
Esempio di utilizzo
var promise = new Promise(function(resolve, reject) {
// dopo 1 secondo segnala che l'istruzione ha avuto successo
setTimeout(() => resolve("done!"), 1000);
})
// utilizzo della promise
promise.then(function(valore) { alert(valore) });
// versione compatta
promise.then(valore => alert(valore));
Fetch
JavaScript può inviare richieste di rete al server e caricare nuove informazioni
ogni volta che è necessario.
Il metodo fetch()
è tra tutti il più moderno e versatile.
Sintassi di base: var promise = fetch(url, [options])
, senza options
è una GET, la funzione restituisce una promise che verrà gestita
come precedentemente detto, oppure con await
.
Posso anche specificare un method diverso ad esempio POST con anche il
body.
Ottenere una riposta avviene in due fasi:
-
Valutazione dello stato
let response = await fetch(url); if (response.ok) { // se HTTP-status è 200..299 var json = await response.json(); } else { alert("HTTP-ERROR: " + response.status); }
-
Risposta
fornisce diversi metodi per accedere al body in formati differentiresponse.text()
legge la risposta e restituisce un testoresponse.json()
interpreta la risposta e restituisce la response come JSONresponse.formData()
restituisce la response come oggetto FormDataresponse.blob()
restituisce la response come Blob (binary large object), dato binario con type
fetch("https://server.com/api/movie/") .then(response => response.json()) .then(results => alert(results.results[0].title())
Per eseguire una richiesta
POST
o con un altro metodo, utilizziamo le opzioni di fetch
let user = { nickname: "K", id: "01" }
// var promise = fetch(url, [opts])
var response = await fetch("server/path", {
method: 'POST',
headers: { 'Content-Type': 'application/json;charset=utf-8' },
body: JSON.stringify(user)
})
NodeJS
Node.js è un ambiente JavaScript multipiattaforma lato server,
basato su motore JS, inoltre fornisce moduli per interagire con le
risorse del sistema.
I programmi Node.js possono essere creati utilizzando file JavaScript
che devono essere eseguiti tramite Node.js.
Semplice script Node, in file app.js
const http = require('http');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World');
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
Nella Shell
node app.js
# open browser at location:
{open,xdg-open} http://localhost:3000
NPM
NPM → Node.js Package Manager
È il gestore dei pacchetti di NodeJS; fornisce un repository pubblico di pacchetti,
uno strumento a riga di comando per lavorare con i pacchetti.
I pacchetti possono essere installati a livello globale (accessibili da tutto il sistema),
oppure a livello locale, memorizzati nella cartella selezionata nella sottocartella
node_modules
e disponibili esclusivamente al progetto residente in quella cartella.
Comandi Principali NPM
# Inizializza e configura node per la cartella dove viene eseguito
# creando anche il file <package.json> che contiene metadati e info sul progetto oltre
# a dipendenze dell'applicazione e utili per lo sviluppo
npm init
# installa il pacchetto 'express' a livello globale
npm install --global express
# installa il pacchetto 'express' a livello locale
npm install express
# installa il pacchetto 'express' a livello locale identificandolo come dipendenza della
# applicazione (flag '-S' o '--save')
npm install -S express
# installa il pacchetto 'express' a livello locale identificandolo come dipendenza dello
# sviluppatore (flag '-D' o '--save-dev')
npm install -D express
# rimuove il pacchetto 'express'
npm uninstall express
SwaggerJS
Swagger ti consente di descrivere la struttura delle API
in modo che le macchine possano leggerle.
In pratica è un tool utile per la creazione della documentazione delle API di un progetto e del
loro utilizzo.
A seconda dell'applicazione, lo swagger consiste in un file di testo (con formato JSON o YAML).
L'interfaccia utente per semplificare la documentazione è basata su HTML e JavaScript.
Per lo sviluppo delle API è essenziale una documentazione adeguata e comprensibile.
Senza la documentazione è difficile per gli sviluppatori, utilizzare le interfacce.
Ciò è vero soprattutto per le API di dominio pubblico!
Utilizzare Swagger è attualmente il modo migliore per documentare le API REST,
poiché è in grado di mappare quasi tutti i servizi web e le informazioni relative all’interfaccia.
Swagger evolve con il sistema e tutte le modifiche apportate vengono documentate automaticamente.
È possibile utilizzarlo con il pacchetto express
attraverso l'apposito modulo disponibile tramite
npm.
Esempio utilizzo
// installare prima il pacchetto tramite comando shell
// npm install swagger-ui-express
// nel file app.js
const express = require('express');
const app = express();
const swaggerUi = require('swagger-ui-express');
const swaggerDocument = require('./swagger.json');
app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument));
MongoDB
→ Sintassi Mongo ←
→ Docs ←
È un database open source (scritto in C++) NoSql senza schema, composto da
collezione di documenti.
Utilizza BSON, “Binary JSON”, al posto di JSON che permette un pò più di dati
rispetto a JSON in forma di campo e valore con possibilità di usare
delle chiavi esterne, la struttura incorporata riduce la necessità di
join.
- Una collezione è un insieme di documenti di uno stesso tipo
- Può archiviare qualsiasi tipo di dati con qualsiasi dimensione
- Utilizza la RAM per archiviare i dati, questo consente un accesso più rapido ai dati
- È conveniente perché riduce i costi su hardware e archiviazione
- Supporta l'elaborazione di query ad-hoc
MongoDB Data Model: è document-based (max 16MB), documenti in formato BSON, ogni documento è archiviato in una collezione.
MongoDB vs. SQL
MongoDB | SQL |
---|---|
Document | Tuple |
Collection | Table/View |
PK: _id Field | PK: Any Attribute(s) |
Uniformity not Required | Uniform Relation Schema |
Index | Index |
Embedded Structure | Joins |
Shard | Partition |
Altre proprietà di MongoDB:
- È facile da installare, utilizzare → database senza schema
- database senza schema → il codice che creiamo definisce lo schema
- può archiviare qualsiasi tipo di dato con qualsiasi dimensione
- i dati sono archiviati in BSON (key:value), non sono necessari join complessi
- può essere replicato e utilizzato su più host
- supporta la proprietà ACID (atomicità, coerenza, isolamento, durata)
per una transazione del database
CRUD |
---|
Create |
Read |
Update |
Delete |
CRUD permette di inserire dati nel database usando la shell
show dbs/collection
use DB_NAME
db.DB_NAME # crea un db di nome DB_NAME
# db.<collection/db>.insert(<document/instance>)
db.City.insertOne({"name":"Milan","state":"Italy"})
db.Name.insertMany([{},{}])
Considerazioni su Mongo
database affidabile, raccomandato durante la progettazione di un app Web
scalabile che permette di creare database di grandi dimensioni per archiviare grandi quantità
di dati, anche di grandi dimensioni, non strutturati.
È utile per chi cerca un database che abbia un ottima disponibilità, elaborazione rapida,
buon backup, nessuna perdita di informazioni e oltretutto sia gratuito.