Comment développer une appli CRUD avec TypeScript ?

aperçu dans ce guide, vous apprendrez à construire une application crud (créer, lire, mettre à jour, supprimer) en utilisant typescript nous utiliserons back4app comme plateforme backend, rendant la gestion des données simple ce guide couvre la configuration d'un projet back4app, la modélisation de vos données et l'intégration de la fonctionnalité crud dans une application typescript dans un premier temps, vous créerez un projet sur back4app appelé basic crud app typescript qui offre une solution de stockage nosql flexible vous concevrez votre structure de données en définissant des classes et des champs soit manuellement, soit avec l'aide de l'agent ia de back4app ensuite, vous utiliserez l'application admin de back4app pour la gestion backend via une interface conviviale qui simplifie les opérations sur les données enfin, vous connecterez votre application typescript à back4app en utilisant le sdk javascript parse, garantissant un accès sécurisé et une authentification à la fin de ce tutoriel, vous aurez une application typescript entièrement opérationnelle capable de gérer des tâches crud de base, y compris l'authentification des utilisateurs et la gestion des données ce que vous apprendrez comment construire une application crud basée sur typescript avec un backend nosql méthodes pour concevoir un backend évolutif intégré à un front end typescript comment tirer parti de l'application admin de back4app pour gérer vos données sans effort stratégies de déploiement, y compris la conteneurisation docker, pour lancer votre application typescript en douceur prérequis avant de commencer, assurez vous d'avoir un compte back4app avec un projet configuré besoin d'aide ? visitez commencer avec back4app https //www back4app com/docs/get started/new parse app un environnement de développement typescript utilisez un éditeur comme visual studio code et assurez vous d'avoir node js installé connaissances de base en typescript, programmation orientée objet et apis restful si nécessaire, consultez la documentation typescript https //www typescriptlang org/docs/ étape 1 – initialisation du projet configuration d'un nouveau projet back4app connectez vous à votre compte back4app cliquez sur le bouton “nouvelle application” dans votre tableau de bord entrez le nom du projet basic crud app typescript et suivez les étapes pour compléter la création du projet créer un nouveau projet après la création du projet, il apparaîtra sur votre tableau de bord, servant de base pour votre backend étape 2 – élaboration du schéma de données définir vos structures de données pour cette application, vous allez créer quelques collections (classes) sur back4app ci dessous des exemples de classes essentielles avec des champs qui facilitent les opérations crud 1\ collection d'articles champ type de données description id identifiant d'objet identifiant unique généré 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 mise à jour 2\ collection des utilisateurs champ type de données description id identifiant d'objet identifiant unique généré automatiquement nom d'utilisateur chaîne nom unique pour l'utilisateur email chaîne adresse e mail unique hashdemotdepasse chaîne mot de passe haché en toute sécurité pour la connexion 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 et champs manuellement dans le tableau de bord back4app créer une nouvelle classe lors de l'ajout de champs, choisissez le type de données, nommez le champ, définissez une valeur par défaut si nécessaire et indiquez s'il est obligatoire créer une colonne utilisation de l'agent ai back4app pour la configuration du schéma l'agent ia intégré dans back4app peut automatiquement générer votre schéma de données à partir d'une description cela simplifie la configuration et garantit que votre modèle est prêt pour les opérations crud comment utiliser l'agent ia ouvrir l'agent ia connectez vous à votre tableau de bord back4app et localisez l'agent ia dans les paramètres de votre projet décrire votre schéma fournissez une description détaillée des collections et des champs dont vous avez besoin réviser et confirmer l'agent ia proposera un schéma révisez le et confirmez pour appliquer les modifications exemple de prompt create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) cette méthode assistée par ia fait gagner du temps et garantit un schéma bien structuré étape 3 – utilisation de l'application admin pour les opérations crud aperçu de l'application admin l'application admin de back4app fournit une interface sans code qui rend la gestion de vos données backend simple ses fonctionnalités de glisser déposer vous permettent d'effectuer des opérations crud—comme ajouter, lire, mettre à jour et supprimer des enregistrements—sans tracas activation de l'application admin allez dans le menu “plus” sur votre tableau de bord back4app choisissez “admin app” et cliquez sur “activer l'application admin ” configurez vos identifiants d'administrateur en créant un compte administrateur initial, qui définira également des rôles comme b4aadminuser et des classes système activer l'application admin après activation, connectez vous à l'application admin pour gérer vos données tableau de bord de l'application admin gestion des opérations crud avec l'application admin dans l'application admin, vous pouvez insérer des enregistrements utilisez la fonction “ajouter un enregistrement” dans n'importe quelle collection (par exemple, articles) pour saisir de nouvelles données réviser et modifier cliquez sur un enregistrement pour voir les détails ou modifier les champs supprimer des enregistrements supprimez les entrées qui ne sont plus nécessaires cette interface intuitive améliore la gestion des données en simplifiant les tâches routinières étape 4 – connecter votre application typescript à back4app avec votre backend prêt, l'étape suivante consiste à lier votre application typescript à back4app option a utiliser le sdk javascript parse installer le sdk javascript parse utilisez npm, exécutez npm install parse initialiser parse dans votre application typescript créez un fichier de configuration (par exemple, parseconfig ts ) // parseconfig ts import parse from 'parse'; export function initializeparse() { parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; } 3\ implement crud functions in typescript for example, create a service for managing items ```typescript // itemsservice ts import parse from 'parse'; export async function fetchitems() promise\<parse object\[]> { const query = new parse query('items'); try { return await query find(); } catch (error) { console error('error fetching items ', error); return \[]; } } export async function additem(title string, description string) promise\<void> { const item = new parse object('items'); item set('title', title); item set('description', description); try { await item save(); console log('item added successfully '); } catch (error) { console error('error adding item ', error); } } export async function updateitem(objectid string, newtitle string, newdescription string) promise\<void> { const query = new parse query('items'); try { const item = await query get(objectid); item set('title', newtitle); item set('description', newdescription); await item save(); console log('item updated successfully '); } catch (error) { console error('error updating item ', error); } } export async function removeitem(objectid string) promise\<void> { const query = new parse query('items'); try { const item = await query get(objectid); await item destroy(); console log('item removed successfully '); } catch (error) { console error('error removing item ', error); } } option b utiliser rest ou graphql si vous préférez ne pas utiliser le sdk parse, vous pouvez effectuer des opérations crud via rest par exemple, pour récupérer des éléments en utilisant rest import fetch from 'node fetch'; export async function getitemsviarest() { try { const response = await fetch('https //parseapi back4app com/classes/items', { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); console log('data retrieved ', data); } catch (error) { console error('error retrieving items ', error); } } intégrez ces appels api selon vos besoins dans vos modules typescript étape 5 – assurer la sécurité du backend configuration des listes de contrôle d'accès (acl) sécurisez vos données en appliquant des acl à vos objets par exemple, pour créer un élément auquel seul son propriétaire peut accéder import parse from 'parse'; export async function createsecureitem(title string, description string, owner parse user) { const item = new parse object('items'); item set('title', title); item set('description', description); const acl = new parse acl(); acl setreadaccess(owner, true); acl setwriteaccess(owner, true); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { await item save(); console log('secure item created successfully '); } catch (error) { console error('error creating secure item ', error); } } gestion des autorisations au niveau de la classe (clp) ajustez les clp via le tableau de bord back4app pour appliquer des restrictions d'accès afin que seuls les utilisateurs authentifiés puissent interagir avec certaines collections étape 6 – mise en œuvre de l'authentification des utilisateurs gestion des comptes utilisateurs back4app utilise la classe utilisateur intégrée de parse pour gérer l'authentification dans votre application typescript, implémentez l'enregistrement et la connexion des utilisateurs comme suit import parse from 'parse'; export async function registeruser(username string, password string, email string) promise\<void> { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user registered successfully!'); } catch (error) { console error('registration error ', error); } } export async function loginuser(username string, password string) promise\<void> { try { const user = await parse user login(username, password); console log('user logged in ', user get('username')); } catch (error) { console error('login failed ', error); } } cette approche peut être étendue à la gestion des sessions, aux réinitialisations de mot de passe et à d'autres fonctionnalités d'authentification étape 7 – déployer votre application typescript back4app simplifie le processus de déploiement vous pouvez déployer votre application typescript en utilisant des méthodes comme la conteneurisation docker 7 1 construire votre application typescript compiler et regrouper utilisez votre outil de construction (tel que webpack ou tsc) pour compiler et regrouper votre application par exemple, pour compiler avec tsc tsc confirmer la sortie assurez vous que les fichiers générés incluent tous les actifs et modules nécessaires 7 2 organiser la structure de votre projet un projet typescript typique pourrait ressembler à ceci basic crud app typescript/ \| src/ \| | index ts \| | parseconfig ts \| | services/ \| | itemsservice ts \| | authservice ts \| package json \| tsconfig json \| readme md exemple parseconfig ts // parseconfig ts import parse from 'parse'; export function initializeparse() { parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; } 7 3 dockeriser votre application typescript si vous choisissez la conteneurisation, ajoutez un dockerfile à la racine de votre projet \# use an official node js runtime as a parent image from node 18 alpine \# set the working directory workdir /usr/src/app \# copy package files and install dependencies copy package json / run npm install \# bundle app source code copy \# build the typescript app run npm run build \# expose port (adjust as needed) expose 3000 \# start the app cmd \[ "node", "dist/index js" ] 7 4 déploiement via le déploiement web back4app liez votre dépôt github assurez vous que votre projet typescript est hébergé sur github configurez les paramètres de déploiement dans le tableau de bord back4app, utilisez l'option déploiement web pour connecter votre dépôt (par exemple, basic crud app typescript ) et sélectionnez la branche appropriée définissez les commandes de construction et de sortie spécifiez la commande de construction (comme npm run build ) et indiquez le répertoire de sortie déployez votre application cliquez sur déployer et suivez les journaux jusqu'à ce que votre application soit en ligne étape 8 – dernières réflexions et améliorations futures félicitations ! vous avez réussi à créer une application crud basée sur typescript intégrée à back4app vous avez configuré un projet nommé basic crud app typescript , conçu des collections pour les articles et les utilisateurs, et géré vos données en utilisant l'application d'administration back4app de plus, vous avez connecté votre application typescript via le sdk javascript parse (ou rest/graphql) et mis en œuvre des mesures de sécurité robustes quelles sont les prochaines étapes ? développez votre application intégrez des fonctionnalités supplémentaires telles que le filtrage avancé, des vues détaillées des articles ou des mises à jour de données en temps réel améliorez les capacités du backend explorez les fonctions cloud, intégrez des api tierces ou mettez en œuvre des autorisations basées sur les rôles apprentissage supplémentaire visitez la documentation de back4app https //www back4app com/docs et consultez des guides supplémentaires pour optimiser votre application bonne programmation et amusez vous à construire votre application crud typescript !