Construire un tracker d'habitude avec Prisma 2, Chakra UI et réagir

PRISMA 2: rationalisation des interactions de la base de données dans votre application React

PRISMA 2 (anciennement Prisma 2 Aperçu) Révolutionne la gestion de la base de données, offrant une mise à niveau significative de son prédécesseur. Contrairement à Prisma 1, qui nécessitait un serveur PRISMA distinct, Prisma 2 s'intègre directement dans votre backend, fonctionnant comme une bibliothèque. Cette architecture rationalisée, construite avec de la rouille pour une efficacité de mémoire améliorée, simplifie considérablement les interactions de base de données.

Le cadre PRISMA comprend trois outils clés:

1. Photon: Un client de base de données généré par l'auto-sécurisé, remplaçant efficacement les orms traditionnels.
2. Lift: Un système de migration déclaratif permettant des mises à jour de schéma de base de données en douceur.
3. Prisma Studio: Un IDE de base de données conviviale offrant une interface visuelle pour la gestion de la base de données.

Ce tutoriel montre la construction d'une application de suivi des habitudes ("stries") à l'aide de PRISMA 2, du chakra interface utilisateur (pour le développement rapide de l'interface utilisateur) et des crochets réagis pour la gestion de l'État. Le frontend utilise URQL pour les interactions GraphQL.

Avantages clés de PRISMA:

• Accès simplifié de la base de données: Élimine les requêtes SQL complexes, simplifiant les interactions de la base de données au sein de votre application.
• Agnosticisme de la base de données: facilite la commutation des systèmes de base de données sans modification approfondie du code. Prend actuellement en charge MySQL, SQLite et PostgreSQL.
• Sécurité de type: Fournit un client PRISMA généré automatiquement pour l'accès à la base de données de type type, l'amélioration de la fiabilité du code et de l'expérience du développeur.
• Gestion des données visuelles: PRISMA Studio offre une interface visuelle puissante pour gérer votre base de données.
• Migrations automatiques (facultatives): Le soulèvement simplifie les migrations de schéma de base de données à l'aide d'un modèle de données déclaratif.

PRENDRE:

Ce tutoriel suppose la familiarité de base avec les crochets React et React. Le fil est utilisé pour la gestion des packages. Les versions suivantes ont été utilisées:

• nœud v12.11.1
• npm v6.11.3
• npx v6.11.3
• yarn v1.19.1
• PRISMA2 V2.0.0-preview016.2
• React v16.11.0

Configuration du projet:

1. Créer un répertoire streaks-app.
2. Initialisez le projet PRISMA 2: npx prisma2 init server (ou utilisez le Global prisma2 CLI). Choisissez JavaScript, API GraphQL et SQLite.
3. Créez un projet React dans streaks-app: npx create-react-app client (ou utilisez le Global create-react-app CLI).

La structure du projet sera: streaks-app/client/ et streaks-app/server/.

Développement du backend:

Le backend utilise GraphQL et Prisma 2. Le fichier schema.prisma définit le modèle de données (par exemple, Habit avec id, name et streak champs). Le fichier seed.js> remplit la base de données avec les données initiales. Un serveur GraphQL est configuré à l'aide de graphql-yoga et nexus.

Développement frontal:

Le frontend utilise le chakra ui pour le style et l'URQL pour les requêtes GraphQL. Les composants sont créés pour afficher des habitudes, créer de nouvelles habitudes, supprimer des habitudes et incréments. Les indicateurs de gestion des erreurs et de chargement sont implémentés à l'aide de composants de chakra ui.

(Des exemples de code détaillés pour la configuration du backend et du frontend, les requêtes et les mutations sont omis pour la concision mais étaient présents dans l'entrée d'origine.)

Conclusion:

Ce didacticiel montre la création d'une application de suivi des habitudes robuste en utilisant la gestion efficace de la base de données de Prisma 2, le développement de l'interface utilisateur rationalisé de Chakra UI et les caractéristiques puissantes de React. L'application résultante est en sécurité, maintenable et visuellement attrayante.

(La section FAQ de l'entrée d'origine est également omise par Brivity, car il s'agit d'une répétition de pratiques et de concepts communs déjà couverts.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!