In this article, I’m going to explain you how to avoid wasting time building and assigning your reactive forms through RxFormMapper
<figure><img alt="" src="https://cdn-images-1.medium.com/max/671/1*S2svM73ryIysF_bqpGNofQ.png"></figure><h3>What’s RxFormMapper?</h3>
RxFormMapper is a framework developed for angular and allows you to convert, by annotation, classes into reactive form and vice versa.
<a href="https://github.com/KernelPanic92/rx-form-mapper">KernelPanic92/rx-form-mapper</a>
<h3>When to use RxFormMapper?</h3>
Sometimes you want to transform the classes you have into reactive forms, for example you have a user model that you want to have filled out by a form:
<pre>export class User { 	name: string; 	surname: string; 	age: number; }</pre>
So what to do? How to make a user form ? Solution is to create new instances of Reactive Form object and manually assign all properties to new object. But things may go wrong very fast once you have a more complex object hierarchy.
<pre>new FormGroup( 	name: new FormControl(user.name), 	surname: new FormControl(user.surname), 	age: new FormControl(user.age), );</pre>
To avoid all this you can use RxFormMapper:
<pre>export class User {</pre>
<pre>	@FormControl() 	name: string;</pre>
<pre>	@FormControl() 	surname: string;</pre>
<pre>	@FormControl() 	age: number; }</pre>
<h3>Why use RxFormMapper?</h3>
RxFormMapper speed up your form development avoiding redundant boilerplate in your code. The most important benefits are:
<ul>
<li>
Zero configuration: through annotations removes the boilerplate for creating and assigning forms.</li>
<li>
Dependency Injection: RxFormMapper take advantage from Angular DI container in order to resolves validators and custom mappers.</li>
<li>
Custom mappers: If you want to create custom forms for specific fields, you can do it simple by @CustomControl decorator.</li>
</ul>
<h3>Let’s start writing code</h3>
<h4>Install npm package</h4>
<pre>npm i rx-form-mapper --save</pre>
reflect-metadata is required (with angular+ you should already have this dependency installed.)
<pre>npm i reflect-metadata --save</pre>
<h4>Import the component modules</h4>
Import RxFormMapperModule in your AppModule
<a href="https://medium.com/media/9b504947db1f666bf86792a14305be56/href">https://medium.com/media/9b504947db1f666bf86792a14305be56/href</a><h4>Define your model</h4>
<a href="https://medium.com/media/298610e452ecb1b625a1fa92d2569f81/href">https://medium.com/media/298610e452ecb1b625a1fa92d2569f81/href</a><h4>Annotate it</h4>
RxFormMapper allow you to specify through annotations the type of AbstractControl for each field in your model, specifically: FormControl, FormGroup and FormArray.
<a href="https://medium.com/media/dab80eb3e9ba797285e5a90124e05b95/href">https://medium.com/media/dab80eb3e9ba797285e5a90124e05b95/href</a>You can read further informations about RxFormMapper annotations by consulting the github page attached at the beginning of this article.
<h4>Wait... AsyncValidators? How to inject services?!</h4>
Don’t panic: RxFormMapper automatically resolves all validators registered inside the Angular container for you! 😉
<a href="https://medium.com/media/6a2bffb94d7e010165b4863da3d98e4a/href">https://medium.com/media/6a2bffb94d7e010165b4863da3d98e4a/href</a><a href="https://medium.com/media/96b343de092f0d2208f62e216fe0cad4/href">https://medium.com/media/96b343de092f0d2208f62e216fe0cad4/href</a><h4>Build your form</h4>
<a href="https://medium.com/media/f074b72c95da53e8ba097e2d66160e1c/href">https://medium.com/media/f074b72c95da53e8ba097e2d66160e1c/href</a>You can find the sources of this article on stackblitz 😁
<a href="https://stackblitz.com/edit/rx-form-mapper-example?file=src/app/user-registration.ts">rx-form-mapper-example - StackBlitz</a>
<h3>Conclusion</h3>
RxFormMapper is a great tool that allows you to create reactive forms in a simple and declarative way through the annotations, allowing you to focus on your features. This type of framework is particularly suitable for crud-based applications as it drastically reduces the code to maintain.
If you enjoyed this guide, don’t forget to 👏 and share it with all the people who might benefit from it 😃
So long, and thanks for all the fish 🐬
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=aae089861045" width="1" height="1" alt="">

Building reactive forms with RxFormMapper

Devi sviluppare una nuova funzionalità nella tua applicazione NestJS ma il tuo gatto non è d’accordo? Ecco come fare!
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*9t9hRZAgXiWgHJp7L1JVzw.jpeg"></figure>Nelle precedenti puntate, abbiamo creato la nostra prima applicazione con NestJS, sfruttando tutti i comandi messi a disposizione dalla CLI. Nel caso in cui te lo sia perso, eccoti il link all’articolo:
<a href="https://medium.com/@iacopociao1992/come-creare-la-tua-prima-applicazione-nestjs-fdecdbafd1c6">Come creare la tua prima applicazione NestJS</a>
Dopo aver generato ogni singolo componente tramite un comando della CLI, molto probabilmente ti sarai chiesto se c’è un modo più veloce per generare tutti quei file, vero?
<figure><img alt="" src="https://cdn-images-1.medium.com/max/900/1*wYWtO17t6dRbPj4fp_ol_w.jpeg"></figure>La risposta è sì: tramite il comando resource, NestJS ci permette di ridurre i comandi da eseguire a uno solo! 🎉
<blockquote>Un comando per domarli, un comando per trovarli, Un comando per ghermirli e nei moduli incatenarli.</blockquote>
<blockquote>[semicit]</blockquote>
Proviamo a sostituire i comandi utilizzati nel precedente articolo con il nuovo comando:
<pre>nest g resource todos</pre>
Ci verrà chiesto di scegliere quale transport layer utilizzare:
<ul>
<li>REST API</li>
<li>GraphQL (code first)</li>
<li>GraphQL (schema first)</li>
<li>Microservice (non-HTTP)</li>
<li>WebSockets</li>
</ul>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*4NzvFtJgQdWvKi0SR6lzRA.png"></figure>Nel nostro caso utilizzeremo REST API, per le altre tipologie puoi consultare la <a href="https://docs.nestjs.com/">documentazione NestJS</a>.
Una volta scelto il layer, ci verrà chiesto se vogliamo generare i CRUD entry points:
<ul>
<li>
Y: Verranno generati i DTO e i metodi CRUD all’interno del controller e del servizio.</li>
<li>
N: Non verranno generati i DTO e non verrà generato nessun metodo all’interno del controller e del servizio.</li>
</ul>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*szGcc7eQMx-cLmbdQ7UUbA.png"></figure>Dal momento che noi vogliamo implementare esattamente un CRUD, sceglieremo Y.
Adesso la CLI si occuperà di generare tutto quanto senza che noi si tocchi niente:
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Mm3Mhb7IGkWByIlGx3pCeQ.png"></figure>Adesso non ci resta altro da fare se non sviluppare la nostra business logic! 🎉
<h3>Conclusioni</h3>
La CLI di NestJS è un ottimo strumento che ci permette di rimanere concentrati sullo sviluppo della logica di business della nostra applicazione senza doverci occupare tutte le volte del boilerplate iniziale. Con il comando resource, NestJS riesce a dare un ulteriore spinta nello sviluppo riducendo il numero di operazioni necessarie alla creazione di una funzionalità a un singolo comando!
Se hai apprezzato questa breve guida, non dimenticarti di 👏 e di condividerla con tutte le persone che potrebbero trarne beneficio 😃
So long, and thanks for all the fish 🐬
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=baad63076520" width="1" height="1" alt="">

NestJS: Generare features con un solo click

<h3>Creating your first NestJS application</h3>
In this article, I’m going to walk you through developing a simple todo rest application in NestJS and give you an overview of this framework.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*9em36jjiwsQVwCko"><figcaption>Photo by <a href="https://unsplash.com/@kimtheris?utm_source=medium&amp;utm_medium=referral">Sereja Ris</a> on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure><h3>What’s NestJS?</h3>
NestJS is a framework for a fast development of backend applications whose structure, inspired from Angular, makes it perfect for the realization of projects with MEAN stack.
<a href="https://nestjs.com/">NestJS - A progressive Node.js framework</a>
<h3>When to use NestJS?</h3>
Nest is most suitable for developing applications that manage a huge quantity of requests with a tiny amount of data processed on the server side and prompt response time (e-commerce, live chats, etc..).
<h3>Why use NestJS?</h3>
The benefits of using NestJS are innumerable. The most important (imho) to highlight are:
<ul>
<li>
Type checking: with Typescript we exploit all the power of javascript without running into type problems.</li>
<li>
Modular: through the division into modules we can isolate our components based on the domain boundary.</li>
<li>
Dependency Injection: thanks to the DI container we are able to write decoupled and testable code.</li>
<li>
Adapters: Nest integrates all the most used and community tested javascript / typescript libraries and provides all the tools developers need to contribute to the collection.</li>
<li>
Angular Like: the familiar structure allows us to easily switch from frontend to backend without having to change the development approach every time.</li>
<li>
CLI: we can develop our functionality without having to worry about the initial boilerplate.</li>
</ul>
<h3>Let’s start writing code</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/552/1*MyknCM460S7oSrRGwmWr1A.png"></figure><ul>
<li>retrieve the list of all todos</li>
<li>retrieve a single todo</li>
<li>insert a todo</li>
<li>edit a todo</li>
<li>delete a todo</li>
</ul>
therefore of the following APIs:
<ul>
<li>[GET] todos</li>
<li>[GET] todos/{id}</li>
<li>[POST] todos</li>
<li>[PUT] todos/{id}</li>
<li>[DELETE] todos/{id}</li>
</ul>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/900/1*rkP7hzyAiRBqXsKieCABMw.png"><figcaption>Ehm 😅</figcaption></figure><h4>step 0: Setup</h4>
Setting up our project with two simple commands in terminal:
<pre>npm i -g @nestjs/cli nest new TodoBackend</pre>
Run $ npm run start in todo-backend folder to make sure everything is okay!
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vgr5OvF4fEjBDDFCbyEutg.png"><figcaption>NestJS bootstrap logs</figcaption></figure><h4>step 1: Module</h4>
Modules are the mechanism that allows us to separate our components based on a domain they belong to and, in practice, to instruct the DI container about their interactions in the bootstrap phase.
The main module with which the bootstrap is performed is called root module and, in applications generated via CLI, we find it in the src folder under the AppModule name.
Our application, being very small and with a single functionality, could directly exploit the root module to manage its dependencies. There are at least two good reasons we won’t be doing this in this guide:
<ul>
<li>It’s not a typical case and consequently difficult to apply in a real context.</li>
<li>We would not be decoupled, thus losing the maintainability and portability of our code.</li>
</ul>
We create our module via CLI:
<pre>nest generate module todo</pre>
<a href="https://medium.com/media/951ea88095f08cd24e9f6499eeaa3475/href">https://medium.com/media/951ea88095f08cd24e9f6499eeaa3475/href</a>When it’s generated, the CLI will also take care of updating the AppModule by importing TodoModule as a feature module 🎉
<h4>step 2: Entity</h4>
An entity is a class that maps a table (or collection) of our database (very pragmatic definition).
We create our entity through CLI:
<pre>nest generate class todo/entities/Todo --no-spec</pre>
<a href="https://medium.com/media/d30e65c4b896158c902fbedbb8885cc3/href">https://medium.com/media/d30e65c4b896158c902fbedbb8885cc3/href</a><h4>step 3: Repository</h4>
Now that we have our entity we just have to persist it through an ORM!
For this guide I have decided to use Typeorm and setting up a basic connection to an <a href="https://www.sqlite.org/">sqlite</a> database.
<a href="https://github.com/typeorm/typeorm">typeorm/typeorm</a>
First we install the dependencies:
<pre>npm i @nestjs/typeorm typeorm sqlite3</pre>
We modify AppModule by importing TypeOrmModule with the static method forRoot, inserting the configurations we need:
<a href="https://medium.com/media/e2e64581aa65cbdb2be8d5b722b2ab26/href">https://medium.com/media/e2e64581aa65cbdb2be8d5b722b2ab26/href</a>Let’s add TypeOrmModule also on TodoModule, this time using the forFeature method, specifying Todo as the entity to manage:
<a href="https://medium.com/media/66b049784d4fc5bd0ce80619240bfc5a/href">https://medium.com/media/66b049784d4fc5bd0ce80619240bfc5a/href</a>Now that we’ve configured Typeorm we can finally update our Todo entity with all the necessary annotations:
<a href="https://medium.com/media/0135d2b57912f8e9085ed3892703f0a8/href">https://medium.com/media/0135d2b57912f8e9085ed3892703f0a8/href</a>You can read further informations about Typeorm and its annotations by consulting the link attached at the beginning of the step. For TypeOrmModule forRoot and forFeature methods, you can consult the database section in the official NestJS documentation: <a href="https://docs.nestjs.com/techniques/database">https://docs.nestjs.com/techniques/database</a>
<h4>step 4: DTO</h4>
To avoid exposing our entities outside our business logic layer, we define a set of classes that will be used to manage the communication in and out of our services: the DTO (Data Transfer Objects).
<a href="https://medium.com/media/4195e363f435f53c303b22910f2c1866/href">https://medium.com/media/4195e363f435f53c303b22910f2c1866/href</a><h4>step 5: Service</h4>
The service is the “package” where we are going to encapsulate our business logic, exposing a set of ready-to-use features.
Let’s define the objects that will populate our service layer:
<pre>nest generate service todo/services/todo</pre>
In the created service, we implement the findAll, findOne, add, edit and delete methods which, through the DTOs, will be consumed by our controller.
To decouple the conversion logic from Entity to DTO (and vice versa) from the business logic, let’s create a TodoMapperService:
<pre>nest generate service todo/services/TodoMapper</pre>
<a href="https://medium.com/media/11bd51cda8e859d3dde1dbc84233da17/href">https://medium.com/media/11bd51cda8e859d3dde1dbc84233da17/href</a>Now let’s implement our TodoService: we inject, through Dependency Injection, the Todo Repository provided by Typeorm and our TodoMapperService:
<a href="https://medium.com/media/7acb1e93c0ed8943991442ae2e8f7ec6/href">https://medium.com/media/7acb1e93c0ed8943991442ae2e8f7ec6/href</a><h4>step 6: Controller</h4>
Here we are at the last layer of our climb to the NestJS stack! ⛰
To create our controller we will use our very useful CLI for the last time with this command:
<pre>nest generate controller todo/controllers/todo</pre>
Let’s implement the methods that will mirror the rest calls we listed at the beginning of the article, decorate them with routing annotations and hook them to the TodoService methods:
<a href="https://medium.com/media/8c89d3a086918023c9f4262930cab85f/href">https://medium.com/media/8c89d3a086918023c9f4262930cab85f/href</a>WARNING: DTO serialization is not active unless you decorate your controller method with ClassSerializerInterceptor
<pre>@Post() @UseInterceptors(ClassSerializerInterceptor) public add(@Body() todo: AddTodoDto): Promise&lt;TodoDto&gt; { </pre>
In the next step we will deepen this topic by developing a solution that allows us to centralize this interceptor 😉
<h4>step 7: Validation</h4>
Our DTOs are ready to travel as fast as Formula 1 cars under the http protocol but one last piece is missing: the validation of its data.
To handle the validation of our fields, NestJS provides a validation pipe that takes advantage of the class-transformer and class-validator libraries. To be able to use it however, we need to install its dependencies in the project:
<pre>npm i class-transformer class-validator</pre>
Let’s add the ValidationPipe to the global pipes:
<a href="https://medium.com/media/daadc7598b26c4b9c66547ed8264480d/href">https://medium.com/media/daadc7598b26c4b9c66547ed8264480d/href</a>And now let’s decorate our DTOs:
<a href="https://medium.com/media/d1598e8a1ab358fa57ab38cd0afbbb3f/href">https://medium.com/media/d1598e8a1ab358fa57ab38cd0afbbb3f/href</a>WARNING: Once our application has been compiled, all the DTOs we have defined so far will be converted into javascript objects, this means that no type check will be performed on the values of its fields!
<figure><img alt="" src="https://cdn-images-1.medium.com/max/940/1*TaQyQXaxqXgBteYGuzWxWg.png"></figure>So will our validators only work as long as they are passed the right type values? NO.
The class-validator library also has a set of validators specifically designed to type check our fields at runtime:
<a href="https://medium.com/media/2fc0bb81ea3f0a9a5bfd23bc7b4ad641/href">https://medium.com/media/2fc0bb81ea3f0a9a5bfd23bc7b4ad641/href</a><h4>step 8: Run!</h4>
It’s time to run our application! 🎉
To execute it normally, just run the command:
<pre>npm run start</pre>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*3LSVAT2MihWr4CX53IfMbg.png"></figure>If we need to debug our code, we will have to run the command:
<pre>npm run start:debug</pre>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vzc83_-lKibKNyEhNCI7bw.png"></figure><h4>step 9: Enable CORS</h4>
After developing our backend, we will most likely want to develop a frontend application and try to consume our todo-backend, here the CORS comes into play:
<blockquote>
Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one <a href="https://developer.mozilla.org/en-US/docs/Glossary/origin">origin</a>, access to selected resources from a different origin. […] For security reasons, browsers restrict cross-origin HTTP requests initiated from scripts. For example, XmlHttpRequest and the Fetch API follow the same-origin policy.</blockquote>
<blockquote><a href="https://developer.mozilla.org/it/docs/Web/HTTP/CORS">https://developer.mozilla.org/en/docs/Web/HTTP/CORS</a></blockquote>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/609/1*ggx2KYeeNbja1Kmb8OxXxA.png"></figure>To enable CORS just edit main.ts again by invoking the enableCors() method with all the configuration parameters we need. For simplicity, we will enable everything! (Freedom! 🤟)
<a href="https://medium.com/media/9078255738062b8fadf479d8085baad4/href">https://medium.com/media/9078255738062b8fadf479d8085baad4/href</a><h4>step 10: Test</h4>
Tests are absolutely necessary when you want to build a maintainable application: they prevent us from the most common development errors and possible regressions due to the modification of an existing functionality.
When we generate a new component via CLI, its test file is also automatically generated. Let’s try to make one:
<a href="https://medium.com/media/9938279004538b20f748153a1338d85e/href">https://medium.com/media/9938279004538b20f748153a1338d85e/href</a>For test development, Nest uses Jest under the hood
<a href="https://jestjs.io/">Jest · 🃏 Delightful JavaScript Testing</a>
for more information see the NestJS documentation <a href="https://docs.nestjs.com/fundamentals/testing">https://docs.nestjs.com/fundamentals/testing</a>
You can find the sources of this article on my Github repository, feel free to put a ⭐️ 😁
<a href="https://github.com/KernelPanic92/nestjs-todo-app">KernelPanic92/nestjs-todo-app</a>
️
<h3>Conclusion</h3>
By creating the application described in this article, I was able to see firsthand how fast and powerful this framework is: it allows you to be extremely fast and flexible without having to give up absolutely anything. NestJS passes exams with top votes and can deservedly occupy its place in the top list of frameworks for web development.
If you enjoyed this guide, don’t forget to 👏 and share it with all the people who might benefit from it 😃
So long, and thanks for all the fish 🐬
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=1f24a79619b9" width="1" height="1" alt="">

Creating your first  NestJS application

In questo articolo, ti guiderò attraverso lo sviluppo di una semplice applicazione rest per TODO, fornendoti una panoramica sul framework NestJS.
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*9em36jjiwsQVwCko"><figcaption>Photo by <a href="https://unsplash.com/@kimtheris?utm_source=medium&amp;utm_medium=referral">Sereja Ris</a> on <a href="https://unsplash.com/?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure><h3>Che cos’è NestJS?</h3>
NestJS è un framework per lo sviluppo rapido di applicazioni backend la cui struttura, fortemente ispirata a quella di Angular, lo rende perfetto per la realizzazione di progetti con stack MEAN.
<a href="https://nestjs.com/">NestJS - A progressive Node.js framework</a>
<h3>Quando utilizzare NestJS?</h3>
Nest è particolarmente indicato per lo sviluppo di applicazioni che gestiscono un’enorme quantità di richieste con una piccolissima quantità di dati elaborati lato server e tempi di risposta istantanei (e-commerce, live chat, ecc ..).
<h3>Perché usare NestJS?</h3>
I vantaggi nell’utilizzo di NestJS sono innumerevoli. I più importanti (imho) che voglio evidenziare sono:
<ul>
<li>
Type checking: con il Typescript sfruttiamo tutta la potenza del javascript senza incorrere nei problemi di tipizzazione.</li>
<li>
Modulare: tramite la suddivisione in moduli possiamo isolare i nostri componenti in base al domain boundary.</li>
<li>
Dependency Injection: grazie al container DI siamo in grado di scrivere codice disaccoppiato e testabile.</li>
<li>
Adapters: Nest integra al suo interno tutte le librerie javascript/typescript più utilizzate e testate dalla community e fornisce agli sviluppatori tutti gli strumenti necessari per poter contribuire alla raccolta.</li>
<li>
Angular Like: la struttura familiare ci permette di passare facilmente da frontend a backend senza dover cambiare l’approccio di sviluppo ad ogni iterazione.</li>
<li>
CLI: possiamo sviluppare le nostre funzionalità senza doverci preoccupare del boilerplate iniziale</li>
</ul>
<h3>Cominciamo a scrivere codice</h3>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/552/1*MyknCM460S7oSrRGwmWr1A.png"></figure><ul>
<li>recuperare la lista di tutti i todo</li>
<li>recuperare un todo singolo</li>
<li>inserire un todo</li>
<li>modificare un todo</li>
<li>eliminare un todo</li>
</ul>
Di conseguenza delle seguenti API:
<ul>
<li>[GET] todos</li>
<li>[GET] todos/{id}</li>
<li>[POST] todos</li>
<li>[PUT] todos/{id}</li>
<li>[DELETE] todos/{id}</li>
</ul>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/900/1*rkP7hzyAiRBqXsKieCABMw.png"><figcaption>Ehm 😅</figcaption></figure><h4>step 0: Setup</h4>
Configuriamo il nostro progetto con due semplici comandi da terminale:
<pre>npm i -g @nestjs/cli nest new TodoBackend</pre>
Per essere sicuri che tutto sia okay, eseguiamo $ npm run start nella cartella todo-backend:
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vgr5OvF4fEjBDDFCbyEutg.png"><figcaption>NestJS bootstrap logs</figcaption></figure><h4>step 1: Module</h4>
I moduli sono il meccanismo che ci permette di separare i nostri componenti in base a un dominio di appartenenza e, nell’atto pratico, di istruire il container DI sulle loro interazioni nella fase di bootstrap.
Il modulo principale con cui viene eseguito il bootstrap viene definito modulo radice e, nelle applicazioni generate tramite CLI, lo troviamo nella cartella src sotto il nome di AppModule.
La nostra applicazione, essendo molto piccola e con un’unica funzionalità, potrebbe sfruttare direttamente il modulo radice per gestire le proprie dipendenze. Ci sono almeno due buone ragioni per cui non lo faremo in questa guida:
<ul>
<li>Non è un caso tipico e di conseguenza difficilmente applicabile in un contesto reale.</li>
<li>Non saremmo disaccoppiati, perdendo quindi in manutenibilità e in portabilità del nostro codice.</li>
</ul>
Creiamo il nostro modulo tramite la CLI:
<pre>nest generate module todo</pre>
<a href="https://medium.com/media/951ea88095f08cd24e9f6499eeaa3475/href">https://medium.com/media/951ea88095f08cd24e9f6499eeaa3475/href</a>Appena generato, la CLI si occuperà anche di aggiornare AppModule importando TodoModule come modulo feature 🎉
<h4>step 2: Entity</h4>
Una entity è una classe che mappa una tabella (o collezione) del nostro database (definizione molto pragmatica).
Creiamo la nostra entity tramite la CLI:
<pre>nest generate class todo/entities/Todo --no-spec</pre>
<a href="https://medium.com/media/d30e65c4b896158c902fbedbb8885cc3/href">https://medium.com/media/d30e65c4b896158c902fbedbb8885cc3/href</a><h4>step 3: Repository</h4>
Adesso che abbiamo la nostra entity non ci resta che persisterla attraverso un ORM!
Per questa guida ho deciso di utilizzare Typeorm e di limitarci a configurare una connessione a un database <a href="https://www.sqlite.org/">sqlite</a>.
<a href="https://github.com/typeorm/typeorm">typeorm/typeorm</a>
Per prima cosa installiamo le dipendenze:
<pre>npm i @nestjs/typeorm typeorm sqlite3</pre>
Modifichiamo AppModule andando ad importare TypeOrmModule con il metodo statico forRoot, inserendo le configurazioni che ci servono:
<a href="https://medium.com/media/e2e64581aa65cbdb2be8d5b722b2ab26/href">https://medium.com/media/e2e64581aa65cbdb2be8d5b722b2ab26/href</a>Aggiungiamo TypeOrmModule anche sul nostro , questa volta utilizzando il metodo forFeature, specificando Todo come entity da gestire:
<a href="https://medium.com/media/66b049784d4fc5bd0ce80619240bfc5a/href">https://medium.com/media/66b049784d4fc5bd0ce80619240bfc5a/href</a>Ora che abbiamo configurato Typeorm possiamo finalmente aggiornare il nostro Todo con tutte le annotazioni necessarie:
<a href="https://medium.com/media/0135d2b57912f8e9085ed3892703f0a8/href">https://medium.com/media/0135d2b57912f8e9085ed3892703f0a8/href</a>Typeorm e le sue annotazioni potete approfondirli consultando il link allegato a inizio step. Per i metodi forRoot e forFeature di TypeOrmModule, potete consultare la sezione database nella documentazione ufficiale di NestJS: <a href="https://docs.nestjs.com/techniques/database">https://docs.nestjs.com/techniques/database</a>
<h4>step 4: DTO</h4>
Per evitare di esporre le nostre entities al di fuori del nostro business logic layer, definiamo un set di oggetti che verranno utilizzati per gestire la comunicazione in entrata e in uscita dai nostri servizi: i DTO (Data Transfer Object).
<a href="https://medium.com/media/4195e363f435f53c303b22910f2c1866/href">https://medium.com/media/4195e363f435f53c303b22910f2c1866/href</a><h4>step 5: Service</h4>
Il service è il “pacchetto” dove andremo a incapsulare la nostra logica di business, esponendo un set di funzionalità pronte all’utilizzo.
Definiamo gli oggetti che popoleranno il nostro service layer:
<pre>nest generate service todo/services/todo</pre>
Nel service appena creato, implementiamo i metodi findAll, findOne, add, edit e delete che, attraverso i DTO, verranno consumati dal nostro controller.
Per disaccoppiare la logica di conversione da Entity a DTO e viceversa dalla business logic, creiamo un TodoMapperService:
<pre>nest generate service todo/services/TodoMapper</pre>
<a href="https://medium.com/media/11bd51cda8e859d3dde1dbc84233da17/href">https://medium.com/media/11bd51cda8e859d3dde1dbc84233da17/href</a>Adesso implementiamo il nostro TodoService: iniettiamo, tramite Dependency Injection, il Todo Repository fornito da Typeorm e il nostro TodoMapperService:
<a href="https://medium.com/media/7acb1e93c0ed8943991442ae2e8f7ec6/href">https://medium.com/media/7acb1e93c0ed8943991442ae2e8f7ec6/href</a><h4>step 6: Controller</h4>
Eccoci arrivati all’ultimo layer della nostra scalata allo stack di NestJS! Per creare il nostro controller utilizzeremo per l’ultima volta la nostra utilissima CLI con questo comando:
<pre>nest generate controller todo/controllers/todo</pre>
Implementiamo i metodi che rispecchieranno le chiamate rest che abbiamo elencato all’inizio dell’articolo, decoriamoli con le routing annotations e agganciamoli ai metodi di TodoService:
<a href="https://medium.com/media/8c89d3a086918023c9f4262930cab85f/href">https://medium.com/media/8c89d3a086918023c9f4262930cab85f/href</a>ATTENZIONE: la serializzazione dei DTO non è attiva a meno che non decoriate il metodo del vostro controller con ClassSerializerInterceptor
<pre>@Post() @UseInterceptors(ClassSerializerInterceptor) public add(@Body() todo: AddTodoDto): Promise&lt;TodoDto&gt; {</pre>
Nel prossimo step approfondiremo questo argomento andando a sviluppare una soluzione che ci permetta di centralizzare questo interceptor 😉
<h4>step 7: Validation</h4>
I nostri DTO sono pronti per viaggiare spediti come macchine di formula 1 all’interno del protocollo http ma manca un ultimo pezzo: la validazione dei suoi dati.
per gestire la validazione dei nostri campi, NestJS fornisce una pipe per la validazione che sfrutta le librerie class-transformer e class-validator. Per poterla utilizzare però, dobbiamo installare le sue dipendenze nel progetto:
<pre>npm i class-transformer class-validator</pre>
Aggiungiamo nelle pipes globali il validatore ValidationPipe:
<a href="https://medium.com/media/daadc7598b26c4b9c66547ed8264480d/href">https://medium.com/media/daadc7598b26c4b9c66547ed8264480d/href</a>E adesso decoriamo i nostri DTO:
<a href="https://medium.com/media/d1598e8a1ab358fa57ab38cd0afbbb3f/href">https://medium.com/media/d1598e8a1ab358fa57ab38cd0afbbb3f/href</a>ATTENZIONE: Una volta compilata la nostra applicazione, tutti i DTO che abbiamo definito fino ad adesso verranno convertiti in oggetti javascript, questo significa che non verrà effettuato nessun type check sui valori che verranno assegnati ai suoi campi!
<figure><img alt="" src="https://cdn-images-1.medium.com/max/940/1*TaQyQXaxqXgBteYGuzWxWg.png"></figure>Quindi inostri validatori funzioneranno solo fino a quando gli verranno passati i valori del tipo giusto? NO.
La libreria class-validator possiede al suo interno anche un set di validatori atti appositamente a eseguire il type check dei nostri campi a runtime:
<a href="https://medium.com/media/2fc0bb81ea3f0a9a5bfd23bc7b4ad641/href">https://medium.com/media/2fc0bb81ea3f0a9a5bfd23bc7b4ad641/href</a><h4>step 8: Run!</h4>
È arrivato finalmente il momento di eseguire la nostra applicazione! 🎉
Per eseguirla normalmente basterà lanciare il comando
<pre>npm run start</pre>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*3LSVAT2MihWr4CX53IfMbg.png"></figure>Se invece abbiamo bisogno di entrare in debug nel nostro codice, dovremo eseguire il comando
<pre>npm run start:debug</pre>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vzc83_-lKibKNyEhNCI7bw.png"></figure><h4>step 9: Enable CORS</h4>
Dopo aver sviluppato il nostro backend, molto probabilmente vorremo sviluppare una applicazione frontend e provare a contattarlo, qui entra in gioco il CORS:
<blockquote>Il Cross-Origin Resource Sharing (CORS) è un meccanismo che usa header HTTP addizionali per indicare a un browser che un’applicazione Web in esecuzione su un’origine (dominio) dispone dell’autorizzazione per accedere alle risorse selezionate da un server di origine diversa. […] Per ragioni di sicurezza, i browser limitano le cross-origin HTTP requests che vengono generate all’interno degli scripts.</blockquote>
<blockquote><a href="https://developer.mozilla.org/it/docs/Web/HTTP/CORS">https://developer.mozilla.org/it/docs/Web/HTTP/CORS</a></blockquote>
<figure><img alt="" src="https://cdn-images-1.medium.com/max/609/1*ggx2KYeeNbja1Kmb8OxXxA.png"></figure>Per abilitare CORS basta intervenire nuovamente nel main.ts invocando il metodo enableCors() con tutti i parametri di configurazione di cui necessitiamo. Per semplicità, noi abiliteremo tutto! (Freedom! 🤟)
<a href="https://medium.com/media/9078255738062b8fadf479d8085baad4/href">https://medium.com/media/9078255738062b8fadf479d8085baad4/href</a><h4>step 10: Test</h4>
I test sono assolutamente necessari quando si desidera realizzare un’applicazione manutenibile: ci prevengono dai più comuni errori di sviluppo e dalle possibili regressioni dovute alla modifica di una funzionalità esistente.
Quando generiamo un nuovo componente tramite CLI, viene generato automaticamente anche il suo file di test. Proviamo a farne uno:
<a href="https://medium.com/media/9938279004538b20f748153a1338d85e/href">https://medium.com/media/9938279004538b20f748153a1338d85e/href</a>Per lo sviluppo dei test, Nest utilizza sotto al cofano Jest
<a href="https://jestjs.io/">Jest · 🃏 Delightful JavaScript Testing</a>
per ulteriori informazioni visionate la documentazione NestJS <a href="https://docs.nestjs.com/fundamentals/testing">https://docs.nestjs.com/fundamentals/testing</a>
Potete trovare i sorgenti di questo articolo sul mio repository Github, sentitevi liberi di mettere una ⭐️ 😁
<a href="https://github.com/KernelPanic92/nestjs-todo-app">KernelPanic92/nestjs-todo-app</a>
️
<h3>Conclusioni</h3>
Realizzando l’applicazione descritta in questo articolo ho potuto constatare in prima persona quanto sia veloce e potente questo framework: ti permette di essere estremamente rapido e flessibile senza dover rinunciare assolutamente a nulla. NestJS passa a pieni voti gli esami e può occupare meritatamente il suo posto nella top list dei framework per lo sviluppo web.
Se hai apprezzato questa guida, non dimenticarti di 👏 e di condividerla con tutte le persone che potrebbero trarne beneficio 😃
So long, and thanks for all the fish 🐬
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=fdecdbafd1c6" width="1" height="1" alt="">

Blog

Building reactive forms with RxFormMapper

2021-04-20 17:44:32

#angular #typescript #reactive-forms #mapper #decorator-pattern

NestJS: Generare features con un solo click

2020-09-22 21:09:03

#javascript #nodejs #typescript #nestjs #tutorial

Creating your first NestJS application

2020-09-21 16:42:13

#nestjs #nodejs #typescript #javascript #tutorial

Come creare la tua prima applicazione NestJS

2020-09-21 16:40:21

#javascript #nestjs #typescript #tutorial #nodejs