Construisez un tableau de bord des stocks collaboratif avec Tanstack, Velt SDK et Kiro Ide⛵

Introduction

La gestion des stocks est une partie cruciale de toute entreprise qui vend ou traite des biens physiques. La gestion des stocks permet aux propriétaires ou aux gestionnaires d'entreprise de comprendre précisément leur inventaire commercial, y compris les tarifs de vente, ce qu'ils ont besoin de commander et ce qui pourrait ne pas être vendu.

Cependant, les outils traditionnels de gestion des stocks manquent souvent de fonctionnalités collaboratives. Cela conduit à une désinformation ou à un avis tardif de pénuries de produits.

Une étude de Deloitte a montré que parmi les employés qui collaborent sur le lieu de travail, 73% font un meilleur travail et 60% sont plus innovants.

Maintenant, imaginez si ces outils de gestion des stocks traditionnels avaient des fonctionnalités telles que les commentaires en direct et les @Ementions, des fonctionnalités qui permettent à l'équipe de gestion des stocks de collaborer sans avoir besoin d'être en ligne simultanément. Cela rendrait la vie tellement plus facile à l'équipe de gestion des stocks.

Dans cet article, vous apprendrez à construire un tableau de bord de gestion des stocks collaboratifs avec des fonctionnalités de commentaires, de présence et de @Mections.

Vous utiliserez les technologies suivantes:

• Next.js, Tanstack
• Velt SDK pour les commentaires, les @mentions et les notifications
• Kiro ai ide pour un échafaudage d'interface utilisateur rapide

Notre application finale ressemblera à ceci:

Configuration de l'architecture principale

Dans cette section, vous allez configurer votre infrastructure de projet.

Création d'un projet Next.js avec TypeScript

Ouvrez votre terminal et créez un nouveau projet Next.js en utilisant la commande suivante:

Suivez les invites pour créer votre projet.

Assurez-vous de sélectionner TypeScript pour la sécurité de type.

Ajout de table tanstack pour la création et la gestion des tables

Le tableau de bord de gestion des stocks sera un tableau pour les produits. Vous utiliserez Tanstack Table pour créer et gérer des tables dans l'application.

Tanstack Table est une bibliothèque d'interface utilisateur sans tête pour la création de tables et de grilles de données pour les applications JavaScript / TypeScript. Comme il s'agit d'une bibliothèque d'interface utilisateur sans tête, vous avez le contrôle de la conception et des composants.

Dans votre terminal de projet, utilisez la commande suivante pour installer Tanstack Table:

Ajout de la ceinture pour les commentaires en temps réel et les @Mections

Vous utiliserez Velt SDK pour ajouter des fonctionnalités de commentaires en temps réel et @Mections au tableau de bord de l'inventaire.

Vous vous demandez peut-être: qu'est-ce que Velt?

Velt est une plate-forme de développeur qui permet aux équipes de développement d'intégrer des fonctionnalités de collaboration en temps réel alimentées en AI dans leurs applications Web. Velt SDK fournit aux développeurs des composants plongés prêts à l'emploi pour ajouter des fonctionnalités de collaboration à leurs applications.

Utilisez les commandes suivantes pour installer les packages Velt dans votre projet:

Vous aurez besoin d'une clé API pour utiliser Velt. Allez à la console de Velt et obtenez votre clé API gratuite.

Ajoutez la clé API dans votre.envdéposer:

Remarque: vous ne pouvez utiliser que la clé API gratuite en développement. Vous devez passer à la version payante pour utiliser Velt en production.

La gestion de l'état des utilisateurs est nécessaire car vous aurez plusieurs utilisateurs qui vont collaborer à votre tableau de bord.

Utilisez la commande suivante pour installer Zustand:

Vous avez installé les packages nécessaires et avez votre clé API Velt. Dans la section suivante, vous échafauquerez votre application à l'aide de l'IA.

Construire l'interface utilisateur avec kiro ai ide

Dans cette section, vous construirez l'interface utilisateur de votre application à l'aide de Kiro AI IDE.

Qu'est-ce que Kiro Ai IDE?

Kiro est un environnement de développement intégré expérimental, agentique et alimenté en AI (IDE) construit par AWS. Avec ses capacités agentiques, Kiro AI IDE peut prendre votre idée et créer une application de travail. Kiro Ai IDE comprend l'intégralité de votre base de code, lui permettant d'apporter des modifications en fonction de cette compréhension.

Comme il est expérimental, l'accès est uniquement invite. Vous pouvez postuler ou rejoindre la liste d'attente.

Nou...
[Courte citation de 8% de l'article original]