Comment utiliser Cursor AI pour créer une application Web de conversion de prix de crypto-monnaie

Dans ce guide, nous expliquerons comment utiliser Cursor AI pour créer une application Web, en particulier un convertisseur de prix de crypto-monnaie. Nous exploiterons également l’API CoinGecko pour récupérer les données de prix cryptographiques.

In this tutorial, we'll be building a cryptocurrency price converter web application using React and fetching crypto prices from the CoinGecko API. We'll also be utilizing Cursor AI, an AI-powered code editor, to streamline our development process.

Dans ce didacticiel, nous allons créer une application Web de conversion de prix de crypto-monnaie à l'aide de React et récupérer les prix de crypto-monnaie à partir de l'API CoinGecko. Nous utiliserons également Cursor AI, un éditeur de code basé sur l'IA, pour rationaliser notre processus de développement.

Prerequisites:

Conditions préalables :

Basic knowledge of JavaScript and React (ES6+ features, React components, hooks, state management)

Connaissance de base de JavaScript et React (fonctionnalités ES6+, composants React, hooks, gestion des états)

Familiarity with web scraping concepts

Familiarité avec les concepts de web scraping

A text editor or IDE (we'll be using Visual Studio Code)

Un éditeur de texte ou IDE (nous utiliserons Visual Studio Code)

Node.js and npm (for our development environment)

Node.js et npm (pour notre environnement de développement)

CoinGecko API for crypto price and market data (Demo plan is sufficient)

API CoinGecko pour les prix de la cryptographie et les données de marché (le plan démo est suffisant)

Step 1: Setting Up Cursor AI

Étape 1 : Configuration du curseur AI

Head over to www.cursor.com and download the latest version of the Cursor AI desktop application. Once installed, open the app.

Rendez-vous sur www.cursor.com et téléchargez la dernière version de l'application de bureau Cursor AI. Une fois installé, ouvrez l'application.

Next, open a folder in Cursor AI where you want the source code to be saved. In the Terminal within the Cursor AI app, let's set up a basic React app using create-react-app.

Ensuite, ouvrez un dossier dans Cursor AI dans lequel vous souhaitez que le code source soit enregistré. Dans le terminal de l'application Cursor AI, configurons une application React de base à l'aide de create-react-app.

Run the following command:

Exécutez la commande suivante :

This command will create a React boilerplate project in your designated folder.

Cette commande créera un projet standard React dans votre dossier désigné.

Step 2: Using Cursor AI to Build the App

Étape 2 : Utiliser Cursor AI pour créer l'application

Now that we have our development environment set up, let's start using Cursor AI to build our crypto price converter web app:

Maintenant que notre environnement de développement est configuré, commençons à utiliser Cursor AI pour créer notre application Web de conversion de prix cryptographique :

Open the App.js file in the Cursor AI editor.

Ouvrez le fichier App.js dans l'éditeur Cursor AI.

Select the existing UI code in App.js.

Sélectionnez le code d'interface utilisateur existant dans App.js.

Press CTRL + K to edit the selected code.

Appuyez sur CTRL + K pour modifier le code sélectionné.

In the Cursor AI code editor, provide instructions for how you want the code to be modified. For our crypto price converter, you might use a prompt like: “Create a React component for a cryptocurrency price converter. Include input fields for the amount, 'from' currency, and 'to' currency. Add a button to trigger the conversion and display the result.”

Dans l’éditeur de code Cursor AI, fournissez des instructions sur la manière dont vous souhaitez que le code soit modifié. Pour notre convertisseur de prix de crypto-monnaie, vous pouvez utiliser une invite telle que : « Créez un composant React pour un convertisseur de prix de crypto-monnaie. Incluez des champs de saisie pour le montant, la devise « de » et la devise « de destination ». Ajoutez un bouton pour déclencher la conversion et afficher le résultat.

Cursor AI will generate code based on your instructions. Review the generated code and decide whether to accept or reject it.  

Cursor AI générera du code en fonction de vos instructions. Examinez le code généré et décidez de l’accepter ou de le rejeter.

If needed, provide follow-up instructions to refine the generated code further.

Si nécessaire, fournissez des instructions de suivi pour affiner davantage le code généré.

Step 3: Enhancing Styling and Functionality

Étape 3 : Améliorer le style et la fonctionnalité

After accepting the initial code changes from Cursor AI, we'll iterate on our application's styling and functionality:

Après avoir accepté les modifications initiales du code de Cursor AI, nous allons itérer sur le style et les fonctionnalités de notre application :

Use the same method as before to instruct Cursor AI to improve the styling of your component. For example: "Add CSS styles to make the converter visually appealing. Use a modern color scheme and ensure the layout is responsive."

Utilisez la même méthode que précédemment pour demander à Cursor AI d'améliorer le style de votre composant. Par exemple : « Ajoutez des styles CSS pour rendre le convertisseur visuellement attrayant. Utilisez une palette de couleurs moderne et assurez-vous que la mise en page est réactive. »

To add functionality for handling currency changes, provide instructions like: "Implement functions to handle changes in the input fields. Update the state when the user selects different currencies or enters an amount."

Pour ajouter des fonctionnalités permettant de gérer les modifications de devises, fournissez des instructions telles que : "Implémentez des fonctions pour gérer les modifications dans les champs de saisie. Mettez à jour l'état lorsque l'utilisateur sélectionne différentes devises ou saisit un montant."

Cursor AI will provide inline suggestions as you edit the code. You can incorporate these suggestions by pressing the 'Tab' key.

Cursor AI fournira des suggestions en ligne lorsque vous modifierez le code. Vous pouvez intégrer ces suggestions en appuyant sur la touche « Tab ».

To interact with the CoinGecko API, instruct Cursor AI to add the necessary API calls: "Add a function to fetch real-time exchange rates from the CoinGecko API when the user clicks the convert button."

Pour interagir avec l'API CoinGecko, demandez à Cursor AI d'ajouter les appels d'API nécessaires : "Ajoutez une fonction pour récupérer les taux de change en temps réel à partir de l'API CoinGecko lorsque l'utilisateur clique sur le bouton de conversion."

Continue this iterative process, providing instructions and refining the code until you're satisfied with the result.

Continuez ce processus itératif, en fournissant des instructions et en affinant le code jusqu'à ce que vous soyez satisfait du résultat.

Step 4: Testing and Debugging

Étape 4 : Test et débogage

Once you've implemented the core functionality of your crypto price converter, it's time to test and debug:

Une fois que vous avez implémenté les fonctionnalités de base de votre convertisseur de prix crypto, il est temps de tester et de déboguer :

Save your changes and run the development server by entering the following command in the terminal:

Enregistrez vos modifications et exécutez le serveur de développement en entrant la commande suivante dans le terminal :

Open your browser and navigate to http://localhost:3000 to see your application in action.

Ouvrez votre navigateur et accédez à http://localhost:3000 pour voir votre application en action.

Test various scenarios, such as converting different cryptocurrencies and entering various amounts.

Testez différents scénarios, tels que la conversion de différentes crypto-monnaies et la saisie de différents montants.

If you encounter any issues, use Cursor AI's chat feature (accessible by pressing CTRL + L) to ask for help. For example: "The conversion result isn't displaying correctly. Can you help me debug this issue?"

Si vous rencontrez des problèmes, utilisez la fonction de chat de Cursor AI (accessible en appuyant sur CTRL + L) pour demander de l'aide. Par exemple : « Le résultat de la conversion ne s'affiche pas correctement. Pouvez-vous m'aider à déboguer ce problème ? »

Implement any necessary fixes or improvements suggested by Cursor AI.

Implémentez tous les correctifs ou améliorations nécessaires suggérés par Cursor AI.

Essential Keyboard Shortcuts for Cursor AI

Raccourcis clavier essentiels pour Cursor AI

Keyboard shortcuts are essential for maximizing productivity in any development environment, and Cursor AI is no exception. By mastering these shortcuts, you can significantly speed up your workflow and make the most of Cursor AI's powerful features.

Les raccourcis clavier sont essentiels pour maximiser la productivité dans tout environnement de développement, et Cursor AI ne fait pas exception. En maîtrisant ces raccourcis, vous pouvez accélérer considérablement votre flux de travail et tirer le meilleur parti des puissantes fonctionnalités de Cursor AI.

Essential Cursor AI Shortcuts

Raccourcis essentiels de l'IA du curseur

Advanced Shortcuts and Techniques

Raccourcis et techniques avancés

Customizing Shortcuts

Personnalisation des raccourcis

To avoid conflicts with existing VS Code shortcuts, you can additionally customize Cursor AI's keyboard bindings:

Pour éviter les conflits avec les raccourcis VS Code existants, vous pouvez également personnaliser les liaisons clavier de Cursor AI :

For example, you could remap the AI features to use CMD + U instead of CMD + K:

Par exemple, vous pouvez remapper les fonctionnalités IA pour utiliser CMD + U au lieu de CMD + K :

Another example of how you could remap Cursor AI shortcuts, this time focusing on remapping the AI Pane shortcuts to use CMD + P instead of CMD + L:

Un autre exemple de la façon dont vous pourriez remapper les raccourcis du curseur AI, en vous concentrant cette fois sur le remappage des raccourcis du volet AI pour utiliser CMD + P au lieu de CMD + L :

In this configuration:

Dans cette configuration :

We've retained the remapping of CMD + K to CMD + U from the previous example.

Nous avons conservé le remappage de CMD + K en CMD + U de l'exemple précédent.

We've added new mappings for the AI Pane:

Nous avons ajouté de nouveaux mappages pour le volet AI :

CMD + P now opens the AI Pane (replacing CMD + L)

CMD + P ouvre désormais le volet AI (en remplacement de CMD + L)

SHIFT + CMD + P opens the AI Pane with the selected text (replacing SHIFT + CMD + L)

SHIFT + CMD + P ouvre le volet AI avec le texte sélectionné (en remplaçant SHIFT + CMD + L)

ALT + CMD + P toggles the AI Pane visibility

ALT + CMD + P bascule la visibilité du volet AI

This configuration allows you to use CMD + P for AI Pane operations, which might be more intuitive if you'

Cette configuration vous permet d'utiliser CMD + P pour les opérations AI Pane, ce qui peut être plus intuitif si vous