Daytona-Sample-React : IA de texte

Mon exemple Daytona est un projet React appelé Mindsnap-prosemaster-daytona. Il s'agit d'une application très simple et conviviale pour les débutants, développée à l'aide de React, Node et AI suivant l'architecture MVC

Dans notre monde au rythme effréné, personne ne veut passer son temps à configurer des éléments, les développeurs veulent simplement s'y mettre et les coder. Cela vous ressemble ? Alors, bravo ! vous êtes au bon endroit.

Mais attendez, nous savons tous que ce n’est pas ainsi que fonctionne le développement. Malheureusement, même pour les projets les plus simples, vous devez disposer d'outils de configuration, de packages à installer, de ports à transférer, parfois d'une configuration VPN et bien plus encore. C'est là qu'intervient Daytona avec sa solution simple mais révolutionnaire pour les développeurs.

Vous commencez à vous sentir curieux, hein ?

Dans cet article, je vais vous présenter mon parcours de création de MindSnap ProseMaster, une application très conviviale pour les débutants, conçue pour transformer de longs textes en résumés rapides, en informations clés et en mnémoniques amusants.

Commençons par une courte introduction sur la façon dont j'ai construit cette application. Je pense que c'était ma première application que j'ai créée en utilisant React et Node. C'était assez simple. Maintenant, en supposant que vous sachiez comment les appels API sont effectués, ce sera assez simple !

Tout d'abord, il s'agit d'une application d'une seule page avec une zone de saisie dans laquelle les utilisateurs peuvent saisir n'importe quel texte et maintenant, en utilisant ce texte et en passant une invite, je l'envoie à l'API Gemini. La réponse de gemini api est affichée à l'écran.

Alors, comment moi, un développeur qui ne connaît pas les conteneurs ou quoi que ce soit de ce genre, ai-je connu Daytona ?

Eh bien, nous devrons remercier Quira pour celui-ci. Le Quira's Quest 023 mettait en vedette Daytona avec un énorme prix de 6 000 USD. Dès que j'en ai eu connaissance, j'ai commencé à parcourir mes projets pour soumettre ma candidature à la quête !

Je me souviens très bien avoir pensé que je devrais choisir un projet simple, car un projet complexe pourrait rendre plus difficile la configuration d'un DevContainer pour mon espace de travail. Mais, oh mon Dieu, je n'aurais pas pu me tromper davantage.

Je sais que certains lecteurs ne sont pas familiers avec le conteneur de développement, espace de travail. Mais ne vous inquiétez pas ! Je les ai tous couverts dans ce blog, alors continuez à lire et petit à petit, tout viendra à vous.

En fait commençons par ces termes :

• Dev Container : un environnement préconfiguré qui contient tous les outils et paramètres nécessaires au développement.

• Espace de travail : Il s'agit d'un espace numérique où nous pouvons stocker et organiser tous les fichiers, codes et projets respectifs sur lesquels nous travaillons.

• Port : Pensons-y comme une porte par laquelle les données circulent entre notre environnement de développement et d'autres services ou appareils.

• PostCreateCommand : Une commande importante de devcontainer.json qui s'exécute automatiquement après la configuration de l'environnement de développement. Je pense que cela est utilisé pour finaliser les tâches de configuration.

Grâce à Daytona, j'ai découvert à quel point il est facile de configurer et de gérer des environnements de développement, quel que soit votre niveau de compétence. Restez dans les parages pour apprendre de mon expérience et voyez comment Daytona peut rendre votre prochain projet plus fluide et plus efficace !

Voyons comment j'ai commencé
Je suis plutôt un apprenant visuel ! Cela signifie que plutôt que de lire un texte long et volumineux, j'aime voir des vidéos ou des images de mise en œuvre. Donc comme d'habitude, je n'ai pas lu les instructions qui étaient vraiment simples et faciles à suivre.

Ici, je devrai remercier la communauté open source que Quira est en train de créer. Un de mes chers amis que j'ai rencontré dans la communauté, K OM, m'a proposé son aide. Nous espérions un appel où il a expliqué 3 étapes simples pour commencer :

1. Accédez d'abord au projet et configurez un fichier appelé « .devcontainer/devcontainer.json »
2. Générer un devcontainer à l'aide du générateur de conteneur de développement
3. Modifiez le fichier Lisez-moi pour informer les utilisateurs et c'est fait !

Est-ce vraiment aussi simple ? Eh bien, la réponse courte est OUI. Mais il y a plus encore : j'aime croire que tester l'espace de travail constitue une partie plus importante de l'apprentissage et de l'utilisation de Daytona.

Qu’est-ce qui m’a réellement motivé ? Et quelle a été la partie la plus frustrante de ce voyage ?
Les 100 premières soumissions valides recevraient 50 USD chacune ! Si ce n'est pas un facteur de motivation pour vous, alors je ne sais pas ce que c'est.

Daytona a ce dicton :

Mais c’était la partie la plus frustrante pour moi. L'application fonctionnait sur ma machine mais pas sur celle des évaluateurs, ce qui m'a momentanément amené à la question : Daytona en vaut-il vraiment la peine ?

Haha, maintenant que j'y pense. Ça a l'air vraiment drôle. C'est moi qui faisais de mauvaises configurations et blâmais Daytona en pensant qu'il faisait de fausses déclarations.

Oui, j'avoue que je suis venu pour la récompense mais en toute honnêteté, je suis resté pour la technologie. J'ai enduré toutes ces frustrations parce que j'ai vu de quoi Daytona est vraiment capable.

*D'où la question : à quels problèmes spécifiques ai-je été confronté ? *

Le premier problème qui m'est venu était que le conteneur que j'avais généré à l'aide de l'IA renvoyait une erreur fatale lors de la tentative de création de l'espace de travail Daytona.

Après avoir résolu ce problème, le prochain problème qui m'est venu à l'esprit était que mon projet avait été créé en utilisant vite et il s'avère que lorsque c'est le cas, rien ne s'affiche à l'écran. Cela viendra comme une page blanche et blanche. C'était un problème de client.

Plus tard, lorsque j'ai résolu ce problème client, mon serveur ne répondait plus.

Lorsque mon client et mon serveur ont commencé à fonctionner, j'ai eu ce problème CORS.

Enfin, j'ai supprimé le serveur et appelé directement l'API mais j'ai ensuite reçu un message d'erreur lors de la création de l'espace de travail mais cela ouvrirait toujours l'IDE. Il s'avère que j'ai dû modifier mon devcontainer.json pour qu'il corresponde aux modifications que j'ai apportées à mon code.

Les solutions et comment y suis-je parvenu ?

Honnêtement, tous les problèmes étaient liés à des solutions très simples. Peut-être que je ne les aurais jamais compris sans l'aide de l'équipe de Daytona, en particulier de Jafa, qui a patiemment examiné et suggéré les changements nécessaires. Il m'a aidé à en apprendre davantage sur Daytona, comment ça marche et pourquoi c'est le meilleur.

Certaines solutions dont vous pourriez avoir besoin sont :

1. Si votre projet utilise Vite, alors dans votre package.json, vous devez spécifier vite avec un indicateur d'hôte. Cela devrait ressembler à ceci :
   

2. Si vous avez à la fois des exigences frontend et backend, vous devez ajouter le port du serveur en tant que port transféré. Cela devrait ressembler à ceci :
   

3. Et une solution finale à tous les problèmes que vous pourriez rencontrer est : DEMANDER. Allez rejoindre Daytona's Slack et parlez-leur de votre problème. Je suis presque sûr que vous obtiendrez l’aide que vous recherchez. Lien Slack

Mes suggestions, pourquoi utiliser Daytona ?
Je préfère demander pourquoi pas Daytona ? C'est super simple à utiliser et facile à gérer. Cela garantit que vous n'aurez plus à passer par la complexité de la mise en place d'environnements de développement

Avec Daytona, vous pouvez vous concentrer sur ce qui est vraiment important plutôt que de vous soucier de la configuration.

Certaines des meilleures fonctionnalités qui, selon moi, font de Daytona une option attrayante pour les développeurs sont :

• Commande unique :
  Lancez l'intégralité de votre environnement de développement avec une seule commande. Pas besoin de configurer manuellement les choses : tout est prêt à fonctionner instantanément.

• Fonctionne partout :
  Que vous soyez sur votre ordinateur portable, sur un serveur distant ou dans le cloud, votre environnement de développement fonctionne n'importe où. Il est totalement flexible, vous pouvez donc travailler depuis n'importe quelle machine.

• Support IDE :
  Intégrez-vous de manière transparente à des outils populaires tels que VS Code et JetBrains. De plus, il existe un IDE Web intégré pour que vous puissiez commencer à coder sans aucune configuration.

• Sécurité :
  Vous connecte automatiquement à votre environnement de développement via un VPN sécurisé. Cela protège vos données et garantit que vous pouvez travailler en toute sécurité, même à distance.

Ces fonctionnalités permettent de gagner du temps, d'augmenter la flexibilité et de maintenir le processus de développement fluide et sécurisé. Hé, que peut demander de plus un développeur ? C'est parfait pour les développeurs de tous niveaux.

Commentaires honnêtes !
Eh bien, affirmer que c'est parfait pourrait être un peu trop tiré par les cheveux. Bien que je pense que c'est l'un des meilleurs du secteur, certains changements pourraient réellement améliorer l'expérience utilisateur.

• Modèles prédéfinis spécifiques au framework Oui, je veux dire des modèles, pas des échantillons. Qu'y a-t-il de si différent entre eux ? Je sais que Daytona collecte des échantillons afin que les développeurs puissent s'y référer et travailler sur l'espace de travail Daytona en rotation.

Mais, si Daytona fournit des modèles prêts à l'emploi pour certaines des piles technologiques populaires, y compris un fichier devcontainer.json préconfiguré. Quelque chose comme un assistant de configuration interactif prenant en charge certains modèles.

• Partage d'environnement en un clic Je pense que Daytona peut ajouter une fonctionnalité permettant de partager des environnements de développement instantanément. Les développeurs peuvent envoyer un lien à leurs coéquipiers pour collaborer.

Quelque chose comme Daytona Share qui générera un lien sécurisé vers l'environnement, accessible via l'IDE Web intégré. Nous pouvons même avoir une collaboration en direct ici, comme dans Google Docs.

• Peut-être un outil de dépannage alimenté par l'IA J'y ai pensé parce que de nombreux projets étaient bloqués sur des choses très simples comme des ports mal configurés, des inadéquations de dépendances, etc.

Encore une fois, voici mes réflexions sur ce qui pourrait l'améliorer !

À emporter :
Le simple dicton ; ne jugez pas un livre à sa couverture. Daytona est bien plus que ce que j’ai décrit et vous ne le découvrirez jamais à moins d’essayer. Alors qu'est-ce que tu attends ? Essayez maintenant !

Et une dernière chose avant de vous revoir : j'aimerais exprimer ma plus profonde gratitude à toute l'équipe de Quira et Daytona pour avoir imaginé cela. Félicitations !

Lien Github vers mon projet
Lien Github de Daytona
Lien vers Daytona Quest

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!