Comment créer une application CRUD avec Aurelia ? Un tutoriel complet

aperçu dans ce guide, vous apprendrez à créer une application crud simple (créer, lire, mettre à jour, supprimer) en utilisant le framework aurelia ce tutoriel explique comment construire une application capable de gérer des opérations de données essentielles en intégrant aurelia avec back4app comme votre service backend dans un premier temps, vous allez configurer un projet back4app intitulé basic crud app aurelia pour servir de système de gestion de données robuste ensuite, vous allez esquisser une structure de base de données évolutive en définissant manuellement des collections et des champs—ou en utilisant l'agent ia de back4app—pour garantir des opérations de données fiables par la suite, vous profiterez de l'application admin de back4app, qui offre une interface de glisser déposer pour gérer vos données sans effort enfin, vous allez connecter votre frontend aurelia avec back4app en utilisant des appels rest/graphql (ou le sdk parse lorsque cela est applicable), et sécuriser votre backend avec un contrôle d'accès détaillé à la fin de ce tutoriel, vous disposerez d'une application web prête pour la production avec une fonctionnalité crud complète, une authentification des utilisateurs et une gestion sécurisée des données principales idées maîtriser la création d'applications crud avec un service backend fiable acquérir des compétences pratiques pour concevoir un backend évolutif et le lier à un frontend aurelia explorer une interface d'administration sans code (back4app admin app) pour des opérations de données sans faille apprendre à déployer votre application en utilisant des techniques modernes, y compris la conteneurisation prérequis avant de commencer, assurez vous d'avoir ce qui suit un compte back4app avec un projet actif visitez commencer avec back4app https //www back4app com/docs/get started/new parse app si vous avez besoin d'aide une configuration de développement aurelia utilisez l'aurelia cli ou un outil similaire ; assurez vous d'avoir node js (version 14 ou ultérieure) installé compétence de base en javascript, aurelia et api rest consultez la documentation aurelia https //aurelia io/docs pour plus de détails si nécessaire étape 1 – configuration de votre projet créer un nouveau projet back4app connectez vous à votre compte back4app appuyez sur le bouton “nouvelle application” depuis votre tableau de bord entrez le nom du projet basic crud app aurelia et complétez les étapes de configuration créer un nouveau projet après la création, votre projet sera visible sur votre tableau de bord, prêt pour la configuration du backend et la gestion des données étape 2 – concevoir votre schéma de base de données élaborer le modèle de données pour cette application crud, vous définirez plusieurs collections ci dessous se trouvent des exemples des collections requises ainsi que les champs et types de données nécessaires pour soutenir efficacement les opérations crud 1\ collection d'articles champ type de données détails id identifiant d'objet clé primaire générée automatiquement titre chaîne nom ou titre de l'élément description chaîne une brève description de l'article créé à date horodatage lorsque l'élément a été créé mis à jour le date horodatage de la dernière modification de l'élément 2\ collection des utilisateurs champ type de données détails id identifiant d'objet clé primaire générée automatiquement nom d'utilisateur chaîne identifiant unique pour l'utilisateur email chaîne adresse e mail unique pour la validation du compte hash de mot de passe chaîne mot de passe crypté pour l'authentification de l'utilisateur créé à date horodatage de création du compte mis à jour le date horodatage de la dernière mise à jour du compte vous pouvez créer ces collections manuellement dans le tableau de bord back4app en ajoutant une nouvelle classe pour chacune et en définissant les colonnes nécessaires créer une nouvelle classe configurez facilement vos champs de base de données en choisissant le bon type de données, en spécifiant les noms de champs, en définissant des valeurs par défaut et en indiquant si le champ est obligatoire créer une colonne utilisation de l'agent ai back4app pour la création de schémas l'agent ai back4app simplifie la génération de schémas en vous permettant de décrire votre modèle de données à travers des invites cet outil crée automatiquement des collections et des champs en fonction de vos besoins étapes pour utiliser l'agent ai lancez l'agent ai ouvrez votre tableau de bord back4app et localisez l'agent ai sous les paramètres du projet décrivez votre schéma entrez une invite détaillée qui décrit les collections et les champs dont vous avez besoin examinez et confirmez examinez les suggestions de schéma générées et appliquez les à votre projet exemple d'invite create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) cette méthode accélère le processus de création de schéma et garantit une structure cohérente pour votre application étape 3 – activation de l'interface admin et des fonctionnalités crud exploration de l'interface admin l'application admin back4app est une solution robuste sans code qui vous permet de gérer vos données backend à travers une interface conviviale de glisser déposer cet outil simplifie l'exécution des opérations crud activation de l'application admin ouvrez le menu “plus” dans votre tableau de bord back4app sélectionnez “admin app” puis cliquez sur “activer l'application admin ” configurez vos identifiants administratifs en créant votre compte administrateur initial, ce qui établit également des rôles par défaut (comme b4aadminuser ) et des collections système activer l'application admin après avoir activé, connectez vous à l'application admin pour commencer à gérer vos données tableau de bord de l'application admin effectuer des opérations crud avec l'application admin dans cette interface, vous pouvez créer des entrées utilisez l'option “ajouter un enregistrement” dans une collection (par exemple, articles) pour ajouter de nouvelles données voir/modifier des entrées cliquez sur n'importe quel enregistrement pour inspecter ses détails ou apporter des modifications supprimer des entrées sélectionnez l'option de suppression pour éliminer les données qui ne sont plus nécessaires cette interface rationalise vos opérations de données, améliorant l'expérience utilisateur grâce à son design intuitif étape 4 – lier aurelia avec back4app avec votre backend configuré et géré via l'application admin, il est temps de connecter votre frontend aurelia à back4app utiliser rest ou graphql vous pouvez utiliser les api rest ou graphql par exemple, pour récupérer des éléments via rest // example rest request to get items async function fetchitems() { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('items fetched ', data results); } catch (error) { console error('fetch error ', error); } } fetchitems(); intégrez ces appels api dans vos composants aurelia selon les besoins étape 5 – protéger votre backend mise en œuvre des listes de contrôle d'accès (acl) améliorez la sécurité en attribuant des acl à vos objets de données par exemple, pour créer un élément privé async function createsecureitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // configure acl restrict access to the owner only const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('secure item created ', saveditem); } catch (error) { console error('error saving secure item ', error); } } définir les autorisations au niveau de la classe (clp) dans le tableau de bord back4app, ajustez les clp pour chaque collection afin d'appliquer des règles de sécurité par défaut, garantissant que seuls les utilisateurs authentifiés ou autorisés peuvent accéder à des informations sensibles étape 6 – gestion de l'authentification des utilisateurs configuration des comptes utilisateurs back4app utilise la classe user de parse pour gérer l'authentification dans votre application aurelia, vous pouvez gérer l'inscription et la connexion des utilisateurs comme illustré ci dessous // src/resources/components/auth js import { observable } from 'aurelia framework'; import parse from ' / /parse config'; export class auth { @observable username = ''; @observable password = ''; @observable email = ''; async signup(event) { event preventdefault(); const user = new parse user(); user set('username', this username); user set('password', this password); user set('email', this email); try { await user signup(); alert('registration successful!'); } catch (error) { alert('registration error ' + error message); } } } un modèle similaire peut être mis en œuvre pour la connexion et la gestion des sessions des fonctionnalités supplémentaires, telles que l'intégration de la connexion sociale, la vérification par e mail et la réinitialisation du mot de passe, peuvent être configurées via le tableau de bord back4app étape 7 – déployer votre frontend aurelia via le déploiement web la fonctionnalité de déploiement web de back4app vous permet d'héberger votre application aurelia de manière efficace en déployant le code depuis un dépôt github dans cette section, vous préparerez votre build de production, engagerez votre code sur github, connecterez votre dépôt avec le déploiement web et déploierez votre site 7 1 créez votre build de production ouvrez votre répertoire de projet dans le terminal exécutez la commande de build au build env production cette commande génère un dossier dist contenant vos ressources statiques optimisées confirmez le build assurez vous que le dossier dist inclut un index html et les sous répertoires nécessaires pour javascript, css et images 7 2 organisez et téléchargez votre code de projet votre dépôt github devrait contenir tous les fichiers source pour votre frontend aurelia une structure d'exemple pourrait être basic crud app aurelia frontend/ \| node modules/ \| public/ \| ` index html \| src/ \| | app js \| | parse config js \| ` resources/ \| | components/ \| | | items list js \| | ` auth js \| package json ` readme md fichiers d'exemple src/parse config js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } engager votre code sur github initialisez git dans votre dossier de projet (si ce n'est pas déjà fait) git init mettez vos fichiers en scène git add engagez vos modifications git commit m "engagement initial du code source frontend aurelia" créez un dépôt sur github (par exemple, basic crud app aurelia frontend ) poussez votre code sur github git remote add origin https //github com/votre nom utilisateur/basic crud app aurelia frontend git git push u origin main 7 3 lier votre dépôt github avec le déploiement web accédez au déploiement web connectez vous à votre tableau de bord back4app, naviguez vers votre projet (basic crud app aurelia), et sélectionnez l'option déploiement web connectez vous à github suivez les instructions pour intégrer votre compte github, en accordant à back4app l'accès à votre dépôt choisissez votre dépôt et votre branche sélectionnez le dépôt (par exemple, basic crud app aurelia frontend ) et la branche (par exemple, main ) contenant votre code 7 4 configuration du déploiement définissez les détails de configuration suivants commande de construction si le dist dossier n'est pas pré construit, spécifiez une commande (par exemple, au build env production ) que back4app doit exécuter répertoire de sortie définissez ceci sur dist afin que back4app sache où se trouvent vos fichiers statiques variables d'environnement ajoutez toutes les variables d'environnement requises (comme les clés api) dans les paramètres de configuration 7 5 conteneuriser votre application aurelia (docker) si vous préférez le déploiement docker, incluez un dockerfile dans votre dépôt similaire à ce qui suit \# use an official node image as the build environment from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy remaining files and build the app copy run au build env production \# use nginx to serve the production build from nginx\ stable alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] configurez l'option de déploiement docker dans le déploiement web en conséquence 7 6 déployer votre application appuyez sur le bouton déployer après avoir configuré le déploiement, cliquez sur déployer surveillez le processus de construction back4app récupérera votre code depuis github, exécutera la commande de construction si nécessaire, et déploiera votre application dans un conteneur récupérez votre url une fois le déploiement terminé, back4app fournira l'url où votre application aurelia est hébergée 7 7 vérifier votre déploiement ouvrez l'url fournie visitez l'url dans votre navigateur pour voir votre site en direct testez l'application assurez vous que votre application se charge correctement, que les routes fonctionnent comme prévu, et que tous les actifs (css, javascript, images) sont servis déboguez si nécessaire utilisez les outils de développement du navigateur pour diagnostiquer tout problème, et consultez les journaux de déploiement de back4app si nécessaire étape 8 – conclusion et orientations futures félicitations ! vous avez réussi à construire une application crud complète en utilisant aurelia et back4app vous avez configuré un projet nommé basic crud app aurelia , défini des schémas de base de données complets pour les éléments et les utilisateurs, et géré vos données en utilisant l'application d'administration back4app vous avez également intégré votre frontend aurelia avec le backend et mis en œuvre des mesures de sécurité robustes prochaines étapes améliorez votre interface utilisateur développez votre application aurelia avec des vues détaillées, des fonctionnalités de recherche et des mises à jour de données en temps réel ajoutez des fonctionnalités avancées envisagez d'incorporer des fonctions cloud, des api tierces ou des autorisations basées sur les rôles explorez davantage consultez la documentation back4app https //www back4app com/docs et d'autres ressources aurelia pour des conseils plus approfondis sur l'optimisation et la personnalisation bonne programmation et bonne chance dans votre parcours de développement !