L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Création d'une application sans serveur avec KendoReact
Dans cet article, nous vous expliquons comment créer une application sans serveur avec Serverless Framework, la déployer dans le cloud et créer une interface utilisateur à l'aide de KendoReact.
Serverless est un modèle d'exécution qui permet aux fournisseurs de cloud d'innover. allouez des ressources au niveau de la fonction dans votre code plutôt que dans l'ensemble de l'application. Cela constitue un moyen plus économique et plus flexible d’exécuter votre application dans le nuage.
Parmi les plates-formes sans serveur les plus largement utilisées sont Amazon Lambda, les fonctions Google Cloud, les fonctions Microsoft Azure et IBM OpenWhisk.
Le modèle gagne en popularité du fait de quelques avantages par rapport aux applications en nuage traditionnelles:
- Coût faible et grande flexibilité: les plates-formes sans serveur fournissent automatiquement le matériel optimal pour exécuter votre code lorsqu’elles sont déclenchées
- Faible coût: Fournisseurs sans serveur facturez le temps que vos fonctions passent à courir; vous payez moins s'il y a moins de trafic sur votre application; vous payez également moins si vos fonctions fonctionnent rapidement
- Elles se déplacent de l’infrastructure cloud à l’application: vous n’êtes pas obligé de gérer ou de maintenir vos propres serveurs, ce qui vous permet de vous concentrer plus facilement sur votre application
Serverless Framework est un projet open source qui vous permet d’abstraire le fournisseur spécifique sans serveur et d’écrire votre application de la même manière sur toutes les plates-formes cloud. Serverless Framework ajoute la portabilité du fournisseur de cloud à la liste déjà impressionnante des avantages du modèle sans serveur.
Dans cet article, nous vous expliquons comment créer une application sans serveur avec Serverless Framework. Ceci est réalisable avec à peu près toutes les plateformes sans serveur, y compris Progress Kinvey mais dans cet exemple, nous allons le déployer sur Amazon Lambda, puis créer une interface utilisateur à l'aide de KendoReact.
KendoReact
Progress KendoReact est une bibliothèque de composants d'interface utilisateur natifs créés spécifiquement pour le développement de React. KendoReact n'a pas de dépendances et fournit un ensemble de composants d'interface utilisateur natifs optimisés pour React. En tant que tel, nous pouvons utiliser KendoReact pour simplifier et accélérer le développement d'interface utilisateur pour les applications sans serveur.
Présentation du projet
Dans cet article, nous créons un simple temporisateur Pomodoro à l'aide de KendoReact et Serverless. Si vous êtes nouveau dans la technique de Pomodoro, vous pouvez en lire plus ici ici .
Nous créons une interface simple pour démarrer et arrêter les minuteries Pomodoro et lister les minuteries récemment terminées. Les événements sont suivis dans une base de données AWS DynamoDB . Nous utilisons des composants KendoReact dans l'interface utilisateur.
Nous vous expliquerons l'installation des dépendances, la création du backend et du front-end, ainsi que le déploiement du projet sur AWS Lambda.
Dépendances
Backend
Tout d'abord, configurez les informations d'identification de votre compte Amazon Web Services (AWS). Si vous n'en avez pas, inscrivez-vous sur le site Web AWS ici . Une fois que vous avez les informations d'identification, configurez-les avec l'interface de commande AWS (AWS CLI). Les instructions pour le faire sont ici . Pour que la configuration soit aussi simple que possible, votre compte AWS doit disposer des informations d'identification de l'administrateur. Si vous utilisez l'AWS CLI pour la première fois, configurez-le selon les instructions .
Ensuite, assurez-vous d'avoir installé Node.js . Au moment de l'écriture, la dernière version stable de Node.js est 10.15.0. L'installation de Node.js installe également la dernière version de npm.
Enfin, installez Serverless Framework en suivant les instructions répertoriées dans l'article Prise en main de Serverless .
Frontend
. pour l'interface du projet sont similaires à l'arrière-plan:
- Node.js (au moment d'écrire ces lignes, la dernière version date du 10.15.0)
- npm (inclus avec Node.js)
- create -react-app incluse dans les versions modernes de Node.js
- KendoReact, que nous ajouterons plus tard
Création du backend pour l'application sans serveur
Assurez-vous d'avoir enregistré vos informations d'identification AWS. correctement. Serverless les utilise pour accéder au fournisseur de cloud, comme détaillé dans la section Dépendances.
Créez votre structure de back-end en utilisant la commande suivante:
$ serverless create -t aws-nodejs -p backend Cette commande produit un backend. répertoire contenant deux fichiers, handler.js et serverless.yml :
$ tree
.
├── backend
├── ├── handler.js
└── └── serverless.yml handler.js contient le code de notre serveur. serverless.yml déclare toute l'infrastructure nécessaire à notre système.
Nous commençons par définir deux fonctions: une pour récupérer les entrées Pomodoro enregistrées et l'autre pour créer un nouveau temporisateur Pomodoro. Remplacez le contenu actuel dans handler.js par le code suivant:
module.exports.getPomodoros = async (événement, contexte) => {
// récupère tous les pomodoros de la table DynamoDB
const pomodoros = wait documentClient
.scan ({TableName: "pomodoros"})
.promettre();
réponse de retour (JSON.stringify ({pomodoros}));
};
module.exports.postPomodoro = async (événement, contexte) => {
const Item = JSON.parse (event.body);
wait documentClient.put ({
TableName: "pomodoros",
Article
})
.promettre();
réponse de retour (JSON.stringify ({Item}));
}; Les deux fonctions accèdent au tableau pomodoros via l'objet documentClient . Il s'agit d'un mappage fourni par la bibliothèque JavaScript AWS DynamoDB. Nous déclarons le mappage dans le même fichier au-dessus des fonctions:
const AWS = require ("aws-sdk");
const documentClient = new AWS.DynamoDB.DocumentClient (); Grâce à cela, nous pouvons accéder aux tables DynamoDB. Nous définissons également la fonction de réponse avec les en-têtes CORS nécessaires au fonctionnement du serveur et du client:
const response = body => ({
// retourne les en-têtes CORS dans la réponse, sans que cela
// ne fonctionnerait pas depuis le navigateur
en-têtes: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Credentials": true
},
statusCode: 200,
corps
Ceci complète le fichier handler.js . Ensuite, nous exposons les deux fonctions de notre gestionnaire au monde extérieur via le fichier serverless.yml . Nous ajoutons d’abord les définitions de fonctions, en remplaçant tout ce que vous avez dans la section des fonctions:
getPomodoros:
gestionnaire: handler.getPomodoros
événements:
- http:
chemin: /
méthode: GET
cors: vrai
postPomodoro:
gestionnaire: handler.postPomodoro
événements:
- http:
chemin: / add
méthode: POST
cors: vrai
Deuxièmement, nous définissons la base de données DynamoDB:
Ressources:
# DynamoDB Table pour les entrées de pomodoro
Table Pomodoros:
Type: AWS :: DynamoDB :: Table
Propriétés:
TableName: pomodoros
AttributeDefinitions:
- AttributeName: nom
AttributeType: S
KeySchema:
- AttributeName: nom
Type de clé: HASH
ProvisionedThroughput:
ReadCapacityUnits: 2
WriteCapacityUnits: 2
Enfin, nous définissons un emplacement où persister stack.json - Voici comment le serveur sait plus tard où chercher notre application dorsale:
plugins:
- serverless-stack-output
Douane:
sortie:
# Enregistrer les URL de points de terminaison sur stack.json dans la source frontend
# répertoire
fichier: ../frontend/src/stack.json
C'est ça! Nous pouvons maintenant installer toutes les dépendances et déployer notre backend Serverless vers Amazon Lambda. Commencez par installer le plug-in indiqué ci-dessus:
$ serverless plugin install --name serverless-stack-output
puis
$ npm install
et deploy:
$ npm run deploy # ou serverless deploy
Et après quelques minutes:
$ npm run deploy
> déploiement sans serveur
Serverless: service de packaging ...
Serverless: Exclure les dépendances de développement ...
Serverless: Créer une pile ...
Serverless: Checking Stack crée des progrès ...
.....
Serverless: Stack Create terminé ...
Serverless: Téléchargement du fichier CloudFormation sur S3 ...
Serverless: Télécharger des artefacts ...
Serverless: Téléchargement du fichier .zip du service sur S3 (3.53 KB) ...
Serverless: validation du modèle ...
Serverless: Mise à jour de la pile ...
Serverless: Vérification de la progression de la mise à jour de la pile ...
.................................................. ....
Serverless: mise à jour de la pile terminée ...
Des informations de service
service: serverless-kendo-pomodoro
étape: dev
région: us-east-1
pile: serverless-kendo-pomodoro-dev
clés api:
Aucun
points finaux:
GET - https://pyjsahfuk7.execute-api.us-east-1.amazonaws.com/dev/
POST - https://pyjsahfuk7.execute-api.us-east-1.amazonaws.com/dev/add
les fonctions:
getPomodoros: serveur sans-kendo-pomodoro-dev-getPomodoros
postPomodoro: serveur sans-kendo-pomodoro-dev-postPomodoro
Serverless: Stack Sortie enregistrée dans le fichier: ../frontend/src/stack.json[19659031HERNotrebackendestdéployésurAWS!Noussommesprêtspourlaprochaineétape
Nettoyage
Serverless Framework crée des ressources AWS pour vous. Une fois que vous avez terminé de configurer l'application Serverless et de travailler avec son interface, supprimez toutes les ressources créées en exécutant $ serverless remove dans le répertoire principal afin d'éviter des charges AWS inattendues pour votre compte.
Création de l'interface pour l'application sans serveur
Le moyen le plus simple de créer une structure pour l'interface consiste à utiliser l'utilitaire create-react-app. Exécutez cette commande:
$ npx create-react-app frontend
L’interface se compose de deux composants:
- Le principal est
-
est utilisé pour mesurer le temps.
Pour le composant App nous utilisons les composants Grid et GridColumn de KendoReact. Commencez par installer et sauvegarder les paquets:
$ npm install --save @ progress / kendo-react-grid
@ progress / kendo-data-query
@ progress / kendo-react-input
@ progress / kendo-react-intl
@ progress / kendo-react-dropdowns
@ progress / kendo-react-dateinputs
Ajoutez-le à la section d'importation de App.js :
import {Grid, GridColumn} de "@ progress / kendo-react-grid"; 19659031] Et remplacez l'actuel par ce qui suit:
KendoReact Pomodoros sans serveur
Ici, nous utilisons un tableau simple pour montrer les temporisateurs Pomodoro que nous avons déjà terminés, en référence à un composant Timer qui a toute la logique pour mesurer le temps passé dans les Pomodoros et entre
Le composant Timer utilise les composants RadialGauge Input et Button KendoReact, et vous pouvez voir toute sa logique. ici .
L’interface utilise stack.json pour déterminer le détail du point final auquel elle est connectée. Ce fichier est généré lors du déploiement du backend. Il est important de déployer le serveur avant d'exécuter le serveur.
Une fois le serveur utilisé, nous analysons le noeud final dans App.js :
import {ServiceEndpoint}. from "./stack.json";
Le code base de notre interface est petit maintenant que KendoReact implémente tous les composants. Nous pouvons nous concentrer sur la définition de la logique métier et sur la présentation claire des données.
Nous ne couvrirons pas tout le code frontal dans cet article, car de nombreuses informations sont fournies par Create React App. Vous pouvez trouver la base de code frontale complète ici . Clonez ce dépôt avant de continuer.
Exécution du serveur
Une fois le serveur prêt, et une fois le serveur déployé, vous pouvez exécuter le serveur localement en exécutant les commandes suivantes dans le répertoire du serveur:
$ npm install
Alors:
$ npm start
Ensuite, l'interface est accessible à l'adresse localhost: 3000 dans votre navigateur. Essayez d'ajouter quelques pomodoros:
Notez les transitions en douceur dans les champs fournis par KendoReact sans code supplémentaire de notre côté:
[19659003] C'est ça! Notre minuterie Pomodoro est prête pour un temps productif.
Conclusion
Comme nous l'avons vu, il est facile de faire fonctionner ensemble KendoReact et Serverless. La configuration d'une application React pour utiliser un serveur sans serveur nécessite uniquement un fichier serverless.yml et un fichier stack.json . Il y a beaucoup de choses que vous pouvez faire avec un serveur sans serveur.
KendoReact fournit des composants pratiques à utiliser dans de nombreuses situations. Nous avons utilisé des grilles, des boutons et des champs de texte dans cet article, mais il en existe de nombreux autres, notamment des outils pour l'animation, les interfaces utilisateur de conversation, le traitement des fichiers PDF, etc.
Serverless est un excellent moyen de créer des applications simples et évolutives. API et automatiser le déploiement de l'infrastructure requise pour ces API. En savoir plus sur le cadre sans serveur ici . Si vous souhaitez en savoir plus sur le fonctionnement du processus de déploiement Serverless sur AWS, accédez au site ici . Comme je l'ai mentionné précédemment, bien que nous utilisions AWS dans cet exemple, vous auriez pu également utiliser une plate-forme telle que Kinvey, sur laquelle vous pouvez en savoir plus sur ici .
En savoir plus sur les composants KendoReact ] ici . La documentation sur des composants spécifiques inclus dans KendoReact est ici . Et ici explique comment installer KendoReact.
Comment votre configuration a-t-elle fonctionné avec Serverless et KendoReact? Faites-le-nous savoir dans les commentaires!
Source link