• Tutte
  • Portfolio
  • Sviluppo
  • Tecnologia
  • Creare una webapp completa con NodeJs, TypeScript, TypeORM

    di Ivano Iorio

    PRESUPPOSTI

    L’intento è presentare un setup per lo sviluppo di un sito web leggero e moderno.

    Back-end:

    • NodeJs (express)
    • TypeScript
    • TypeORM

    Quest’ultimo è un ORM (Object Relational Mapping) scritto in TypeScript poco conosciuto ma molto interessante.
    https://typeorm.github.io/
    Ricorda “Entity Framework” e utilizza i “decorator” di TypeScript per il “mapping”.

    Front-end (prossimo articolo!):

    • AngularJS
    • TypeScript (naturalmente)

    IDE utilizzato:

    Visual Studio Code.

     

    TYPESCRIPT

    Perché TypeScript?

    Typescript è un superset di JavaScript.
    Significa che se inserite codice JavaScript in TypeScript questo funzionerà perfettamente: E’ JavaScript con delle “cose in più”.
    Praticamente TypeScript è ECMAScript6 (ES6) con “tipizzazione forte” (e i “decorator” in fase sperimentale).

    Se usate ES6 in effetti potreste anche farne a meno.
    Ma se usate un IDE che supporta TypeScript (come Visual Studio Code) avrete a disposizione degli strumenti importanti come:

    • refactoring,
    • auto-completamento
    • rilevamento della definizione
    • rilevamento dei riferimenti

    e soprattutto

    • errori “compile-time”

    Questi strumenti possono essere trascurati per “progetti piccoli” ma risultano fondamentali per “progetti grandi”.
    Se invece usate ES5 non potete fare “progetti grandi” 🙂

    Inoltre se volete usare JavaScript come “dovrebbe essere” e “come sarà” usate TypeScript: prima o poi ci sarete costretti.

    BACK-END

    Setup

    Installare Visual Studio Code

    https://code.visualstudio.com/
    Non vi fate ingannare dal nome: non c’entra nulla con “Visual Studio”!
    Infatti è multipiattaforma, realizzato con http://electron.atom.io/ e soprattutto leggero.

    • Aprire Visual Studio Code

    Creiamo la cartella con il nostro progetto:

    • File > Apri Cartella…
    • Creare una cartella “test” e selezionarla

    Configuriamo l’IDE

    • File > Preferenze > Impostazioni

    Vogliamo configurare l’IDE solo per questo progetto:
    Click sul bottone in alto a destra “IMPOSTAZIONI AREA DI LAVORO”
    Scrivere:

    files.exclude: nasconde alcuni file per rendere più leggibile l’albero delle directory in Visual Studio Code.
    typescript.tsdk: la directory del compilatore TypeScript “tsc”.

    Salvare (Visual Studio Code crea automaticamente directory e file “.vscode/settings.json”)

    “package.json” per npm:

    • File > Nuovo File

    Salvare in “root” con nome “package.json”

    Configurazione per TypeScript:

    • File > Nuovo File

    Salvare nella “root” con nome “tsconfig.json”

    Task di Visual Studio Code (per la compilazione automatica TypeScript):

    • File > Nuovo File

    Salvare nella cartella “.vscode” con nome “tasks.json”

    Creare ALMENO un file “.ts”

    Altrimenti il compilatore TypeScript da errore bloccando il “watch” (che avvieremo in seguito)

    • File > Nuovo File

    Per il momento potremmo creare il file “app.ts” e scrivere

    Salvare in “root” con nome “app.ts”

     

    StartUp

    Installiamo tutto il necessario con npm:

    • Visualizza > Terminale integrato (oppure CTRL+ò)

    Lanciare il task di Visual Studio Code

    • Premere SHIFT+CTRL+B

    Il task esegue il compilatore TypeScript “tsc” che si mette in “ascolto” (watch=true del file “tsconfig.json”) .
    A conferma di ciò possiamo vedere una rotellina che ruota nell’angolo in basso a sinistra della finestra di Visual Studio. 
    Cioè quando un file TypeScript (.ts)  viene salvato “tsc” automaticamente lo compila in JavaScript (.js)
    Quindi dovrebbe apparire il file “app.js”, creato automaticamente da “app.ts”.
    Se volete interrompere il task premere nuovamente SHIFT+CTRL+B.

    Conclusione

    Possiamo iniziare a lavorare con TypeScript!
    La nostra directory di lavoro è questa:

    NodeJs

    Usiamo il classico “express” per implementare un server web.
    Inseriamolo nel “package.json”:

    Quindi:

    Su “express” ci sono numerosi tutorial quindi non mi dilungo.

    Scriviamo uno stupido web server per test:

    • apriamo “app.ts” creato precedentemente e sostituiamo con:

    Avviamo il debugger:

    • Click sul bottone “Debug”  di Visual Studio Code oppure CTRL+SHIFT+D
    • Click sul bottone di configurazione (l’ingranaggio)
    • selezionare “NodeJs” dal menu’ a tendina.

    Verrà creato, nella directory “.vscode” il file “launch.json”.

    Modificare il parametro “program” e specificare il file da avviare allo start (app.js):

    • Click sul bottone “avvia debugger” (freccia verde in alto a sinistra)

    Il server dovrebbe rimanere in ascolto sulla porta 3000.

    • con un browser collegarsi all’indirizzo:

    http://localhost:3000/test la pagina dovrebbe visualizzare la scritta “test ok!”

    TypeORM

    Questa è la parte “interessante”.
    TypeORM permette di mappare dei modelli (con i “decorator”) e generare automaticamente SQL per la loro memorizzazione e recupero.

    inseriamo TypeORM in “package.json”

    abbiamo inserito anche  i “reflect-metadata” per i “decorator” TypeScript e “sqlit3” che sarà il nostro DB (ma possiamo usare MySQL, MariaDB, Postgres e Microsoft SQL Server).

    aggiorniamo il progetto

    Creiamo il modello “User”

    In “root” creare la directory “models” quindi il file “User.ts”

    Il funzionamento dei “decorator” di TypeScript lo affronteremo in seguito.

    Per il momento sappiamo che:
    iniziano con il carattere “@” e possono essere posti prima della definizione della classe, metodo, proprietà o anche prima di un parametro di un metodo.

    @Table() lega la classe ad una tabella (se non si specifica la tabella avrà lo stesso nome della classe cioè “user”)
    @Column() lega una proprietà ad una colonna (della tabella “user”)
    e chiaramente @PrimaryGeneratedColumn() dichiara quella proprietà come chiave primaria della tabella.

    La cosa interessante di TypeScript (in un IDE che lo supporta) è l’autocompletamento perfettamente funzionante.

    Bene abbiamo creato il nostro modello!

    Connessione al DB e avvio web server

    • creare, in “root” la directory “db”
    • modificare “app.ts”. Inseriamo la connessione al DB tramite typeorm:

    autoSchemaSync è interessante:
    TypeORM sincronizza automaticamente i modelli con il DB.
    Se eliminiamo, per esempio, una proprietà dell’oggetto “User” e mandiamo in esecuzione il server (con autoSchemaSync: true) verrà eseguita una DROP COLUMN sul DB (quindi ATTENZIONE!)

     

    Conclusione

    Il DB è stato creato e TypeORM se ne occuperà. Noi ci limiteremo a salvare o recuperare modelli.

    Nel prossimo articolo potremmo continuare impostando il front-end e utilizzare AngularJS 2.

    Leggi anche...