Catégories
Plugin et site web

Créer et déployer une forme angulaire avec Netlify Forms and Edge – Smashing Magazine

A propos de l'auteur

Zara Cooper est une développeur de logiciels qui aime partager ce qu'elle apprend en tant que développeur avec les autres. Quand elle a du temps à perdre, elle aime lire un bon livre…
Plus à propos
Zara

Netlify Forms est une fonctionnalité de gestion de formulaire qui reçoit automatiquement les soumissions de formulaires HTML. Dans cet article, nous expliquerons comment l'utiliser avec les formulaires réactifs Angular et comment déployer l'application finale sur la plate-forme d'hébergement de Netlify, Netlify Edge.

La création du flux de travail frontend, backend et de déploiement d'une application demande beaucoup de travail. Dans les cas où votre application ne collecte qu'une quantité limitée de soumissions de données de ses utilisateurs, la création d'un backend complet peut ne pas valoir le temps et l'effort. Une alternative au développement d'un backend complet consiste à utiliser Netlify Forms. Dans ce didacticiel, je vais vous expliquer comment utiliser un formulaire réactif angulaire avec Netlify Forms. Étant donné que Netlify Forms ne fonctionne que lorsqu'il est déployé sur Netlify, je vais également illustrer comment déployer votre application sur Netlify Edge.

La boîte à outils

Un formulaire réactif angulaire est un formulaire qui a un modèle de données structuré créé explicitement dans une classe de composant à l'aide des fournisseurs ReactiveFormsModule. Un modèle de formulaire est créé pour chaque élément d'entrée dans la vue de formulaire. Ce modèle de formulaire est une instance de la classe FormControl et effectue le suivi de la valeur de l'élément de formulaire. Le modèle de formulaire est immuable car chaque fois qu'une modification est apportée au modèle, l'instance FormControl renvoie un nouveau modèle de données au lieu de mettre à jour l'ancien modèle. Son immuabilité rend la détection des changements plus efficace et permet la modification des données avec des opérateurs observables. Étant donné que les éléments d'entrée de formulaire sont directement connectés à leurs modèles de formulaire, les mises à jour entre eux sont synchrones et ne reposent pas sur le rendu de l'interface utilisateur.

Netlify est une plate-forme qui vous permet de créer, de déployer et d'héberger des sites construits avec diverses technologies. Les sites créés avec Angular peuvent être hébergés sur Netlify. Netlify fournit également une multitude d'outils qui simplifient, automatisent et augmentent les versions et les déploiements de ces sites. Nous allons utiliser deux de ses produits dans ce didacticiel: Netlify Edge et Netlify Forms.

Comme décrit précédemment, Netlify Forms est une fonctionnalité de gestion de formulaire qui reçoit automatiquement les soumissions de formulaires HTML. Elle ne nécessite aucune configuration de traitement de soumission, comme la création d'API, de scripts, etc. Cette fonctionnalité ne fonctionne qu'avec les formulaires des sites déployés sur Netlify. Il est activé par défaut, ce qui réduit davantage la configuration nécessaire pour configurer les soumissions de formulaires. La gestion des soumissions est configurée lors du déploiement où les fichiers HTML d'un site sont analysés par les robots de compilation de Netlify.

Netlify Edge est un réseau mondial de distribution d'applications sur lequel sont publiés des sites et des applications. Il fournit des fonctionnalités telles que les tests A / B, les restaurations, la préparation et les déploiements par étapes. Tous les déploiements sur Netlify Edge sont atomiques, ce qui signifie qu'un site n'est actif que lorsque tous les fichiers ont été téléchargés / mis à jour et que les modifications apportées au site sont prêtes. Une fois qu'un site est déployé, un sous-domaine lui est attribué sur netlify.app lorsqu'il est déployé en production. Netlify Edge prend également en charge les déploiements d'aperçu et de branche (préparation, développement, etc.).

La gestion des soumissions Netlify Forms fonctionne car les robots de génération analysent les formulaires HTML sur un site pendant le déploiement. Les formulaires rendus Javascript côté client comme ceux des sites angulaires compilés ne seront pas trouvés par ces robots. Ainsi, la configuration normale de Netlify Forms ne fonctionnera pas avec Angular Forms.

Cependant, il existe une solution à ce problème. Pour qu'il reçoive des soumissions, un formulaire HTML caché est ajouté à la index.html fichier. Ce formulaire fonctionne avec les bots de construction. Lors de la soumission du formulaire angulaire, une demande de publication est faite à ce formulaire caché qui est ensuite capturé par Netlify Forms.

Dans cet article, nous allons créer un formulaire réactif. Nous allons également développer un service pour faire une demande de publication dans le formulaire HTML masqué. Enfin, nous déploierons l'application sur Netlify Edge.

Exemple

Pour illustrer comment créer l'application, nous prendrons un exemple de formulaire de commentaires commun sur de nombreux sites Web. Nous utiliserons ce formulaire pour recueillir les commentaires / réclamations, questions et suggestions des utilisateurs du site ainsi que leur nom et leur adresse e-mail. Nous l'utiliserons également pour recueillir leur évaluation du site.

Exigences

Pour suivre ce tutoriel, vous aurez besoin d'un compte Netlify et de la CLI angulaire installés. Si vous ne disposez pas de la CLI, vous pouvez l'installer à l'aide de npm.

npm install -g @angular/cli

Si vous n'êtes pas encore inscrit à un compte Netlify, vous pouvez en créer un ici. Netlify propose une inscription via Github, Gitlab, Bitbucket ou Email. En fonction de la méthode de déploiement que vous choisissez, il peut s'agir d'autres exigences. Ils seront indiqués sous chaque méthode de déploiement.

Configuration de l'application

Pour commencer, nous allons créer l'application et l'appeler feedback. Lors de sa création, ajoutez-lui un routage lorsque vous y êtes invité dans les invites.

ng new feedback

Ensuite, nous allons générer trois composants: un formulaire de commentaires, une page de message d'envoi réussi et une page 404. Netlify Forms vous permet de naviguer vers une page une fois la soumission de formulaire réussie. C’est ce que nous utiliserons le SuccessComponent pour.

ng g c feedback
ng g c success
ng g c page-not-found

Après avoir généré les composants, nous ajouterons les itinéraires à chaque page de la AppRoutingModule dans le app-routing.module.ts fichier.

const routes: Routes = (
  { path:'', component: FeedbackComponent },
  { path: 'success', component: SuccessComponent },
  { path: '**', component: PageNotFoundComponent }
);

Nous utiliserons le FormBuilder service pour créer notre formulaire réactif. C'est parce qu'il est plus pratique et moins répétitif que l'utilisation de contrôles de formulaire de base. Pour y avoir accès, nous devons enregistrer le ReactiveFormsModule dans le app.module.ts fichier.

Étant donné que nous allons faire une demande de publication dans le formulaire HTML masqué, nous devons également enregistrer le HttpClientModule.

import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: (
    // other imports
    ReactiveFormsModule,
    HttpClientModule
  )
})
export class AppModule { }

Continuez à modifier le contenu de app.component.html pour avoir juste la sortie du routeur.


Les différentes pages partageront un certain style. Alors ajoutez le style ci-dessous à styles.css.

html, body {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

h1 {
    margin: 0;
    text-align: center;
}

h1, p, label {
    font-family: Arial, Helvetica, sans-serif;
}

p {
    max-width: 25rem;
}

#container {
    border: none;
    padding: .4rem;
    border-radius: 0;
    flex-direction: column;
    display: flex;
}

hr {
    width: 80%;
}

button {
    color: white;
    background-color: black;
    font-size: large;
    padding: .5rem;
    border-radius: .5rem;
    margin-top: 1rem;
}

@media screen and (min-height: 700px) {
    html, body {
        align-items: center;
        justify-content: center;
    }
}

@media screen and (min-width: 480px) {
    #container {
        border: .1rem solid lightgray;
        padding: 2rem;
        border-radius: .5rem;
    }

    html, body {
        align-items: center;
        justify-content: center;
    }
}

Créer le formulaire réactif

Dans notre FeedbackComponent class, nous commencerons par importer le FormBuilder service que nous utiliserons pour créer le formulaire. Nous importerons également le Validators classe pour la validation d'entrée de formulaire.

import { FormBuilder, Validators } from '@angular/forms';

Nous injecterons ensuite le FormBuilder service en l'ajoutant au FeedbackComponent constructeur.

constructor(private fb: FormBuilder) { }

Ensuite, nous définirons le modèle de formulaire à l'aide du group méthode de l'injecté FormBuilder un service. Nous ajouterons également un errorMsg propriété pour contenir toutes les erreurs que nous pouvons rencontrer lors de la soumission de l'entrée du formulaire. Est également inclus un closeError méthode qui fermera l'alerte d'erreur qui s'affiche sur le formulaire.

Chaque contrôle dans le modèle de formulaire sera vérifié à l'aide des validateurs du Validators classe. Si l'une des entrées échoue à la validation, le formulaire sera invalide et la soumission sera désactivée. Vous pouvez choisir d'ajouter plusieurs validateurs à un contrôle de formulaire comme dans le cas du email contrôle.

export class FeedbackComponent {
  feedbackForm = this.fb.group({
    firstName: ('', Validators.required),
    lastName: ('', Validators.required),
    email: ('', (Validators.email, Validators.required)),
    type: ('', Validators.required),
    description: ('', Validators.required),
    rating: (0, Validators.min(1))
  });

  errorMsg = '';

  closeError() {
    this.errorMsg = '';
  }

  // ...
}

Dans le modèle du composant (feedback.component.html), nous ajouterons ceci.

{{errorMsg}}

✖︎

Feedback Form


We’d like your feedback to improve our website.




Notez que l'élément de formulaire doit avoir le (formGroup)="feedbackForm" attribut correspondant au modèle que nous venons de créer. En outre, chacun des éléments d'entrée doit avoir un formControlName="" attribut correspondant à son contrôle de formulaire équivalent dans le modèle.

Pour styliser le formulaire, ajoutez ceci àfeedback.component.css.

#options {
    display: flex;
    flex-direction: column;
}

#options label {
    margin: 0 0 0 .2rem;
}

.radioOption {
    margin: 0 0 .2rem 0;
}

.inputContainer {
    display: flex;
    flex-direction: column;
    margin: .5rem 0 .5rem 0;
}

label {
    margin: .5rem 0 .5rem 0;
}

.nameInput {
    display: flex;
    flex-direction: column;
}

button:disabled {
    cursor: not-allowed;
    pointer-events: all;
    background-color: slategrey;
}

#ratingLabel {
    display: flex;
    justify-content: space-between;
    margin: .5rem 0 .5rem 0;
}

#ratingValue {
    font-weight: bolder;
    font-size: large;
    border: .1rem solid lightgray;
    padding: .4rem .6rem .1rem .6rem;
    margin: 0;
    vertical-align: middle;
    border-radius: .3rem;
}

.error {
    color: darkred;
    background-color: lightsalmon;
    border: .1rem solid crimson;
    border-radius: .3rem;
    padding: .5rem;
    text-align: center;
    margin: 0 0 1rem 0;
    display: flex;
    width: inherit;
}

.error p {
    margin: 0;
    flex-grow: 1;
}

textarea, input {
    margin: .1rem;
    font-family: Arial, Helvetica, sans-serif;
    padding: 5px;
    font-size: medium;
    font-weight: lighter;
}

.close {
    cursor: default;
}

.hidden {
    display: none;
}

@media screen and (min-width: 480px) {
    #options {
        flex-direction: row;
        justify-content: space-around;
    }

    .nameInput {
        flex-direction: row;
        justify-content: space-between;
    }
}

Voici à quoi ressemblera le formulaire:

Formulaire de commentaires
Capture d'écran du formulaire de commentaires (grand aperçu)

Ajout d'un formulaire HTML masqué

Comme indiqué précédemment, nous devons ajouter un formulaire HTML caché que les robots de construction Netlify Forms peuvent analyser. Les soumissions seront ensuite envoyées de notre formulaire réactif au formulaire HTML masqué. Le formulaire HTML est placé dans le index.html fichier.

Ce formulaire doit avoir le même nom que le formulaire réactif. De plus, il doit contenir trois autres attributs: netlify, netlify-honeypot, et hidden. Les robots recherchent toutes les formes qui ont le netlify attribut afin que Netlify puisse traiter leurs entrées. le netlify-honeypot L'attribut est ajouté pour empêcher l'affichage des captchas lorsqu'une soumission est effectuée et permet une protection supplémentaire contre le spam.




 
  
  
 

Il est important de noter que puisque vous ne pouvez pas définir la valeur de file éléments d'entrée, vous ne pouvez pas importer de fichier à l'aide de cette méthode.

Faire une demande de publication au formulaire caché

Pour envoyer une soumission du formulaire réactif au formulaire HTML, nous allons faire une demande de publication contenant la soumission à index.html. L'opération sera effectuée dans le onSubmit méthode de la FeedbackComponent.

Cependant, avant de pouvoir faire cela, nous devons créer deux choses: un Feedback interface et un NetlifyFormsService. Commençons par l'interface.

touch src/app/feedback/feedback.ts

Le contenu de ce fichier sera:

export interface Feedback {
   firstName: string;
   lastName: string;
   email: string;
   type: string;
   description: string;
   rating: number;
}

le NetlifyFormsService contiendra une méthode publique pour soumettre une entrée de commentaires, une méthode privée pour soumettre une entrée générique et une autre privée pour gérer les erreurs. Vous pouvez ajouter d'autres méthodes publiques pour des formulaires supplémentaires.

Pour le générer, exécutez ce qui suit:

ng g s netlify-forms/nelify-forms

le submitEntry méthode renvoie un Observable car Netlify envoie une page HTML avec une alerte de réussite une fois que nous publions des données dans le formulaire. Voici le service:

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http';
import { Feedback } from '../feedback/feedback';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class NetlifyFormsService {

  constructor(private http: HttpClient) { }

  submitFeedback(fbEntry: Feedback): Observable {
    const entry = new HttpParams({ fromObject: {
      'form-name': 'feedbackForm',
      ...fbEntry,
      'rating': fbEntry.rating.toString(),
    }});

    return this.submitEntry(entry);
  }

  private submitEntry(entry: HttpParams): Observable {
    return this.http.post(
      '/',
      entry.toString(),
      {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        responseType: 'text'
      }
    ).pipe(catchError(this.handleError));
  }

  private handleError(err: HttpErrorResponse) {
    let errMsg = '';

    if (err.error instanceof ErrorEvent) {
      errMsg = `A client-side error occurred: ${err.error.message}`;
    } else {
      errMsg = `A server-side error occurred. Code: ${err.status}. Message: ${err.message}`;
    }

    return throwError(errMsg);
  }
}

Nous enverrons le formulaire en tant que HttpParams. Un en-tête pour le ContentType doit être inclus avec la valeur application/x-www-form-urlencoded. le responseType l'option est spécifiée comme text car en cas de succès, la publication dans le formulaire masqué renverra une page HTML contenant un message de réussite générique de Netlify. Si vous n'incluez pas cette option, vous obtiendrez une erreur car la réponse sera analysée comme JSON. Vous trouverez ci-dessous une capture d'écran du message de réussite Netlify générique.

formulaires / Message de réussite générique Netlify
Capture d'écran du message de réussite générique Netlify (grand aperçu)

dans le FeedbackComponent classe, nous importerons le NetlifyFormsService et Router. Nous soumettrons la saisie du formulaire en utilisant le NetlifyFormsService.submitEntry méthode. Si la soumission est réussie, nous redirigerons vers la page de soumission réussie et réinitialiserons le formulaire. Nous utiliserons le Router service pour la redirection. En cas d'échec, le errorMsg La propriété recevra le message d'erreur et sera affichée sur le formulaire.

import { Router } from '@angular/router';
import { NetlifyFormsService } from '../netlify-forms/netlify-forms.service';

Après cela, injectez à la fois le NetlifyFormsService et Router dans le constructeur.

constructor(
   private fb: FormBuilder,
   private router: Router,
   private netlifyForms: NetlifyFormsService
) {}

Enfin, appelez le NetlifyFormsService.submitEntry méthode dans FeedbackComponent.onSubmit.

onSubmit() {
this.netlifyForms.submitFeedbackEntry(this.feedbackForm.value).subscribe(
   () => {
     this.feedbackForm.reset();
     this.router.navigateByUrl('/success');
   },
   err => {
     this.errorMsg = err;
   }
 );
}

Créer une page de soumission réussie

Lorsqu'un utilisateur termine une soumission, Netlify renvoie un message de réussite générique affiché dans la dernière capture d'écran de la section précédente. Cependant, vous pouvez créer un lien vers votre propre page de message de réussite personnalisée. Vous faites cela en ajoutant le action attribut au formulaire HTML masqué. Sa valeur est le chemin relatif vers votre page de réussite personnalisée. Ce chemin doit commencer par / et être relatif à votre site racine.

Cependant, la définition d'une page de réussite personnalisée ne semble pas fonctionner lors de l'utilisation d'un formulaire HTML masqué. Si la demande de publication dans le formulaire HTML masqué aboutit, elle renvoie le message de réussite Netlify générique sous forme de page HTML. Il ne redirige pas même lorsqu'un action l'attribut est spécifié. Nous allons donc à la place naviguer vers la page du message de réussite après une soumission à l'aide de la Router un service.

Tout d'abord, ajoutons du contenu à la SuccessComponent nous avons généré plus tôt. Dans success.component.html, ajouter:

Thank you!


Your feedback submission was successful.

Thank you for sharing your thoughts with us!

Pour styliser la page, ajoutez ceci à success.component.css:

p {
    margin: .2rem 0 0 0;
    text-align: center;
}

Voici à quoi ressemble la page:

Page de soumission réussie
Capture d'écran de la page de soumission réussie (grand aperçu)

dans le FeedbackComponent classe, nous avons déjà ajouté le Routerservice en tant qu'importation et l'injecte dans le constructeur. Dans son onSubmitméthode, une fois la demande réussie et le formulaire réinitialisé, nous naviguons vers la page de soumission réussie, /success. Nous utilisons le navigateByUrl méthode du routeur pour ce faire.

Création de la page 404

La page 404 n'est peut-être pas nécessaire, mais c'est une bonne chose à avoir. Le contenu de page-not-found.component.html serait:

Page Not Found!


Sorry! The page does not exist.

Pour le styliser, ajoutez ceci à page-not-found.component.css:

p {
    text-align: center;
}

Voici à quoi ressemblera la page 404.

Page 404
Capture d'écran de la page 404 (grand aperçu)

Corriger le routage avant le déploiement

Puisque nous utilisons le Router service, tout notre routage se fait sur le client. Si un lien vers une page de notre application est collé dans la barre d'adresse (lien profond) ou s'il y a une actualisation de la page, cette demande nous sera envoyée à notre serveur. Le serveur ne contient aucune de nos routes car elles ont été configurées dans le frontend, dans notre application. Nous recevrons un statut 404 dans ces cas.

Pour résoudre ce problème, nous devons dire au serveur Netlify de rediriger toutes les demandes vers notre index.html page. De cette façon, notre routeur angulaire peut les gérer. Si vous êtes intéressé, vous pouvez en savoir plus sur ce phénomène ici et ici.

Nous allons commencer par créer un _redirects fichier dans notre src dossier. le _redirects file est un fichier texte brut qui spécifie les règles de redirection et de réécriture pour le site Netlify. Il doit résider dans l'annuaire du site de publication du site (dist/). Nous allons le placer dans le src dossier et spécifiez-le en tant qu'actif dans le angular.json fichier. Lorsque l'application est compilée, elle sera placée dans dist/.

touch src/_redirects

Ce fichier contiendra la règle ci-dessous. Il indique que toutes les demandes adressées au serveur doivent être redirigées vers index.html. Nous ajoutons également une option de code d'état HTTP à la fin pour indiquer que ces redirections doivent renvoyer un 200 statut. Par défaut, un 301 l'état est renvoyé.

/*  /index.html 200

La dernière chose que nous devons faire est d'ajouter l'option ci-dessous dans notre angular.json und er projects > {your_project_name} > architect > options > assets. Incluez-le dans le assets tableau:

{
  "glob": "_redirects",
  "input": "src",
  "output": "/"
}

Prévisualisez votre application localement

Avant de pouvoir déployer l'application de commentaires, il est préférable de la prévisualiser. Cela vous permet de vous assurer que votre site fonctionne comme vous l'aviez prévu. Vous pouvez découvrir des problèmes résultant du processus de construction, tels que des chemins brisés vers des ressources, entre autres. Tout d'abord, vous devrez créer votre application. Nous diffuserons ensuite la version compilée à l'aide d'un serveur. Nous utiliserons un serveur léger, un serveur léger de rechargement en direct pour les applications Web.

Remarque: Étant donné que l'application n'est pas encore déployée sur Netlify, vous obtiendrez une erreur 404 lorsque vous tenterez de faire la demande de publication. En effet, les formulaires Netlify ne fonctionnent que sur les applications déployées. Vous verrez une erreur sur le formulaire comme indiqué dans la capture d'écran ci-dessous, cependant, cela fonctionnera une fois que vous l'avez déployé.

Erreur sur le formulaire de commentaires
Capture d'écran de l'erreur sur le formulaire de commentaires (grand aperçu)
  1. Pour commencer, installez lite-server:
    npm install lite-server --save-dev
    
  2. Ensuite, dans le répertoire de l'espace de travail de votre application, créez votre application. Pour vous assurer que les builds sont exécutés chaque fois que vos fichiers changent, transmettez le --watch drapeau à lui. Une fois l'application compilée, les résultats sont écrits dans le dist/ répertoire de sortie. Si vous utilisez un système de contrôle de version, assurez-vous de ne pas vérifier dist dossier car il est généré et est uniquement à des fins d'aperçu.
    ng build --watch
    
  3. Pour servir le site compilé, exécutez le lite-server par rapport au répertoire de sortie de build.
    lite-server --baseDir="dist/"
    

Le site est maintenant desservi à localhost:3000. Vérifiez-le sur votre navigateur et assurez-vous qu'il fonctionne comme prévu avant de commencer son déploiement.

Déploiement

Il existe plusieurs façons de déployer votre projet Angular sur Netlify Edge. Nous en couvrirons trois ici:

  1. En utilisant netlify-builder,
  2. Utilisation de Git et de l'interface utilisateur Web de Netlify,
  3. Utilisation de l'outil CLI Netlify.

1. Utilisation netlify-builder

netlify-builder facilite le déploiement d'applications angulaires via la CLI angulaire. Pour utiliser cette méthode, votre application doit avoir été créée à l'aide de Angular CLI v8.3.0 ou version ultérieure.

  1. Du Des sites de votre tableau de bord Netlify, créez un nouveau projet. Puisque nous n'utiliserons pas Git pour créer un projet, faites glisser n'importe quel dossier vide vers la zone de bordure pointillée marquée "Faites glisser et déposez le dossier de votre site ici". Cela créera automatiquement un projet avec un nom aléatoire. Vous pouvez modifier ce nom dans les paramètres de domaine du site ultérieurement si vous le souhaitez.
    Capture d'écran du tableau de bord pour créer un projet
    Capture d'écran du tableau de bord pour créer un projet (Grand aperçu)

    C'est ce que vous devriez voir une fois votre projet créé.

    Capture d'écran d'une page de projet pour un exemple de projet
    Capture d'écran d'une page de projet pour un exemple de projet (Grand aperçu)
  2. Avant de pouvoir déployer en utilisant cette méthode, vous devrez obtenir le projet Netlify ID API et un Netlify jeton d'accès personnel depuis votre compte. Vous pouvez obtenir l'ID d'API du projet à partir des paramètres du site. En dessous de Paramètres du site> Général> Détails du site> Informations sur le site vous trouverez l'ID API de votre projet.
    Capture d'écran montrant où se trouve le bouton des paramètres du site
    Capture d'écran montrant où se trouve le bouton Paramètres du site (Grand aperçu)
    Capture d'écran montrant où se trouve l'ID API du site dans ses paramètres
    Capture d'écran montrant où se trouve l'ID API du site dans ses paramètres (Grand aperçu)

    Vous pouvez obtenir un jeton d'accès personnel dans vos paramètres utilisateur. À Paramètres utilisateur> Applications> Jetons d'accès personnels, clique le Nouveau jeton d'accès bouton. Lorsque vous y êtes invité, entrez la description de votre jeton, puis cliquez sur le bouton Générer un jeton bouton. Copiez votre jeton. Par souci de persistance, vous pouvez stocker ces valeurs dans un .env dans votre projet, mais ne l'archivez pas si vous utilisez un système de contrôle de version.

    Capture d'écran montrant où se trouve le bouton Paramètres utilisateur
    Capture d'écran montrant où se trouve le bouton Paramètres utilisateur (Grand aperçu)
    Capture d'écran montrant où créer un jeton d'accès personnel
    Capture d'écran montrant où créer un jeton d'accès personnel (Grand aperçu)
    Capture d'écran montrant où entrer la description du jeton
    Capture d'écran montrant où entrer la description du jeton (Grand aperçu)
    Capture d'écran montrant la valeur du jeton
    Capture d'écran montrant la valeur du jeton (Grand aperçu)
  3. Ensuite, ajoutez netlify-builder à votre projet en utilisant ng add.
    ng add @netlify-builder/deploy
    

    Une fois l'installation terminée, vous serez invité à ajouter l'ID API et le jeton d'accès personnel.

    Capture d'écran montrant les invites d'ajout du générateur netlify
    Capture d'écran montrant les invites d'ajout du générateur netlify (Grand aperçu)

    Il est facultatif de les ajouter ici. Vous pouvez ignorer cette invite, car elle sera ajoutée à votre angular.json fichier qui est généralement archivé si vous utilisez un système de contrôle de version. Il n’est pas sûr de stocker ce type d’informations sensibles sur des dépôts de code. Si vous ne consignez pas ce fichier, vous pouvez simplement saisir votre ID API et votre jeton d'accès personnel. L'entrée ci-dessous sera modifiée dans votre angular.json fichier sous le architect réglages.

    "deploy": {
        "builder": "@netlify-builder/deploy:deploy",
        "options": {
        "outputPath": "dist/",
        "netlifyToken": "",
        "siteId": ""
        }
    }
    
  4. Il ne vous reste plus qu'à déployer votre application en exécutant:
    NETLIFY_TOKEN= NETLIFY_API_ID= ng deploy
    

    Vous pouvez également le mettre dans un script et l'exécuter lorsque vous devez déployer votre application.

    # To create the script
    touch deploy.sh && echo "NETLIFY_TOKEN= NETLIFY_API_ID= ng deploy" >> deploy.sh && chmod +x deploy.sh
    
    # To deploy
    ./deploy.sh
    

    Voici la sortie que vous devriez voir une fois que vous exécutez cette commande:

    Capture d'écran montrant les résultats du déploiement
    Capture d'écran montrant les résultats du déploiement (Grand aperçu)

2. Utilisation de Git et de l'interface utilisateur Web Netlify

Si le code de votre application Angular est hébergé sur Github, Bitbucket ou Gitlab, vous pouvez héberger le projet à l'aide de l'interface utilisateur Web de Netlify.

  1. Du Des sites sur votre tableau de bord Netlify, cliquez sur le bouton "Bouton "Nouveau site de Git".
    Capture d'écran montrant le bouton pour créer un nouveau site
    Capture d'écran montrant le bouton pour créer un nouveau site (Grand aperçu)

  2. Connectez-vous à un service de référentiel de code. Choisissez le service sur lequel votre code d'application est hébergé. Vous serez invité à autoriser Netlify à afficher vos référentiels. Cela différera d'un service à l'autre.
    Capture d'écran montrant les options de connexion à un fournisseur Git
    Capture d'écran montrant les options de connexion à un fournisseur Git (Grand aperçu)
  3. Choisissez votre référentiel de code.
    Capture d'écran montrant la liste des dépôts disponibles
    Capture d'écran montrant la liste des dépôts disponibles (Grand aperçu)
  4. Ensuite, vous spécifierez les déploiements et les paramètres de construction. Dans ce cas, sélectionnez la branche à partir de laquelle vous souhaitez effectuer le déploiement, spécifiez la commande de construction comme ng deploy --prod et le répertoire de publication comme dist/.
    Capture d'écran montrant les paramètres de construction et de déploiement
    Capture d'écran montrant les paramètres de construction et de déploiement (grand aperçu)
  5. Clique le Déployer le site et vous avez terminé.

3. Utilisation de l'outil CLI Netlify

  1. Pour commencer, installez l'outil CLI Netlify comme suit:
    npm install netlify-cli -g
    

    Si l'installation réussit, vous devriez voir ces résultats sur votre terminal:

    Capture d'écran montrant les résultats d'une installation réussie de Netlify CLI
    Capture d'écran montrant les résultats d'une installation réussie de Netlify CLI (Grand aperçu)
  2. Ensuite, connectez-vous à Netlify en exécutant:
    netlify login
    

    Lorsque vous exécutez cette commande, elle accède à une fenêtre de navigateur où vous serez invité à autoriser la CLI Netlify. Clique le Authorize bouton. Vous pouvez ensuite fermer l'onglet une fois l'autorisation accordée.

    Capture d'écran montrant une boîte de dialogue demandant l'autorisation de Netlify CLI
    Capture d'écran montrant une boîte de dialogue demandant l'autorisation de Netlify CLI (Grand aperçu)
    Capture d'écran montrant la boîte de dialogue d'autorisation accordée
    Capture d'écran montrant la boîte de dialogue d'autorisation accordée (grand aperçu)
  3. Pour créer un nouveau projet Netlify, exécutez ce qui suit sur votre terminal:
    netlify init
    

    Vous serez invité à connecter votre application Angular à un projet Netlify existant ou à en créer un nouveau. Choisir la Créer et configurer un nouveau site option.

    Capture d'écran montrant les options de création ou de connexion d'un projet
    Capture d'écran montrant les options de création ou de connexion d'un projet (Grand aperçu)

    Ensuite, sélectionnez votre équipe et un nom pour le site que vous souhaitez déployer. Une fois le projet créé, l'outil CLI répertorie les détails du site pour votre projet.

    Capture d'écran montrant les détails du nouveau site
    Capture d'écran montrant les détails du nouveau site (Grand aperçu)

    Après quoi, l'outil CLI vous invite à connecter votre compte Netlify à un fournisseur d'hébergement Git pour configurer les webhooks et déployer les clés. Vous ne pouvez pas vous désabonner. Choisissez une option pour vous connecter, puis autorisez Netlify.

    Capture d'écran montrant une invite pour se connecter à un fournisseur Git
    Capture d'écran montrant une invite pour se connecter à un fournisseur Git (Grand aperçu)

    Ensuite, vous serez invité à entrer une commande de construction. Utilisation:

    ng build --prod
    

    Ensuite, il vous sera demandé de fournir un répertoire à déployer. Entrer dist/ avec le nom de votre application.

    Capture d'écran montrant une invite de paramètres de construction
    Capture d'écran montrant une invite de paramètres de construction (Grand aperçu)

    À la fin de cela, la commande se terminera et affichera cette sortie.

    Capture d'écran montrant les résultats d'une initialisation de projet réussie
    Capture d'écran montrant les résultats d'une initialisation de projet réussie (Grand aperçu)
  4. Pour déployer l'application, exécutez:
    netlify deploy --prod
    

    En utilisant le --prod L'indicateur garantit que la version est déployée en production. Si vous omettez cet indicateur, le netlify deploy La commande déploiera votre build sur une URL de brouillon unique utilisée pour les tests et la prévisualisation. Une fois le déploiement terminé, vous devriez voir cette sortie:

    Capture d'écran montrant les résultats d'un déploiement réussi
    Capture d'écran montrant les résultats d'un déploiement réussi (grand aperçu)

Affichage des soumissions de formulaires

Les soumissions de formulaires peuvent être consultées sur le tableau de bord Netlify sous le Formes onglet de votre site. Vous pouvez le trouver sur app.netlify.com/sites//forms. Sur cette page, tous vos formulaires actifs seront répertoriés. L'attribut name que vous insérez dans l'élément de formulaire masqué est le nom du formulaire sur le tableau de bord.

Une fois que vous sélectionnez un formulaire, toutes les soumissions pour ce formulaire seront répertoriées. Vous pouvez choisir de télécharger toutes les entrées sous forme de fichier CSV, de les marquer comme spam ou de les supprimer.

Liste des formulaires actifs
Capture d'écran des formulaires actifs répertoriés sur le tableau de bord du site (Grand aperçu)
Entrées de formulaire
Capture d'écran des entrées de formulaire répertoriées dans le tableau de bord du formulaire (Grand aperçu)

Conclusion

Netlify Forms vous permet de collecter la soumission de formulaire à partir de votre application sans avoir à créer ou configurer un backend pour le faire. Cela peut être utile en particulier dans les applications qui n'ont besoin que de collecter une quantité limitée de données telles que les informations de contact, les commentaires des clients, les inscriptions à des événements, etc.

L'association de formulaires réactifs angulaires avec les formulaires Netlify vous permet de structurer votre modèle de données. Les formulaires réactifs angulaires ont l'avantage supplémentaire d'avoir leur modèle de données et leurs éléments de formulaire synchronisés les uns avec les autres. Ils ne reposent pas sur le rendu de l'interface utilisateur.

Bien que Netlify Forms ne fonctionne que lorsqu'il est déployé sur Netlify Edge, la plate-forme d'hébergement est assez robuste, fournit des fonctionnalités utiles comme les tests A / B et automatise les créations et les déploiements d'applications.

Vous pouvez continuer à lire plus sur l'utilisation de Netlify avec vos formulaires ici.

Éditorial fracassant(rail)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *