Claude Code : les 6 outils à maîtriser avant de commencer

This guide aims to provide foundational knowledge for understanding cloud code tutorials, specifically focusing on six essential tools. The goal isn't to become a developer but to grasp what's happening on your screen, enabling you to follow any cloud tutorial without getting lost. The first essential tool is VS Code. Just as Word is used for writing text, VS Code is for writing code. Code consists of various files, such as .MD, .JS, .HTML, and .CSS files. VS Code recognizes these files and adapts its assistance accordingly. While technically one could write code in Notepad, it lacks features. VS Code improves code visibility with syntax coloring and offers an autocompletion system that anticipates what you're trying to type, significantly aiding programming. Furthermore, unlike Notepad, VS Code effectively detects potential errors in your code. For this training, a new Windows system was set up from scratch, but the instructions are also applicable to Mac users. To begin, navigate to the provided link in the description to download and install VS Code. After downloading, proceed with the installation, accepting the terms and leaving the default destination. It's recommended to create a desktop icon and check the two options that allow opening any folder quickly with VS Code. Once installed, create a new working folder, for instance, named "fun." Then, open VS Code, go to "File," "Open Folder," and select the "fun" folder from your desktop. VS Code will display the list of files and folders within your opened directory. Any files or folders created within VS Code will be reflected in the "fun" folder on your desktop. Next, you'll learn about the terminal. The terminal is a way to communicate with your computer using a special language, similar to sending an SMS. To access it in VS Code, go to "Terminal," then "New Terminal." There are three basic commands to understand. The `PWD` command tells you your current location on the computer. The `LS` command lists the contents (folders and files) of your current directory. Finally, the `CD` command allows you to change directories. To practice, type `PWD` in the terminal to see your current location, which should be the "fun" folder on your desktop. Typing `LS` will show the contents of "fun." If you create a new folder named "test" inside "fun," you can then type `CD test` to move into it. Typing `PWD` again will show you're now in the "test" folder. To go back, use `CD ..` which will return you to the "fun" folder. These are the fundamental terminal commands. The next crucial components are Node.js and npm. Node.js is an engine that enables various tools to run. Without it, none of the tools you intend to use will start. NPM (Node Package Manager) acts like a free store where you can retrieve tools. In development, you often reuse code snippets developed by others. `npm install` allows you to install these external tools directly into your project, preventing you from having to "reinvent the wheel." Node.js then executes these installed tools. Node.js provides the execution environment, while npm provides the tools; they are an inseparable duo. To install Node.js, use the link provided in the description. The installer will automatically detect your operating system. For Windows, download the .MSI file and run the installer, clicking "Next" through most steps. It might be relevant to install Chocolatey for future use. After installation, close and reopen VS Code. To verify Node.js installation, open the terminal in VS Code and type `node -v` to see its version. To check npm, type `npm -v`. If you encounter an error with `npm -v`, it's likely due to Windows security settings on PowerShell. To fix this, you'll need to enter a specific command in the terminal (provided in the video) to resolve the issue, after which `npm -v` should display the npm version. The discussion then moves to Git and GitHub, clarifying that they are distinct but related. Git is a version control system that keeps a local history of your project on your computer, allowing you to "travel back in time" to previous versions if something goes wrong. GitHub, on the other hand, is a platform for storing your project online, providing an online copy and enabling sharing with others. Git manages the history, and GitHub facilitates sharing and online storage. Key Git commands include initializing a repository (`git init`), adding files for versioning (`git add`), saving changes locally (`git commit`), connecting to GitHub, and pushing changes online (`git push`). The general workflow involves modifying a file, adding it to version control, saving it with a commit, and then pushing it to GitHub to have an online, versioned copy. This ensures that even if your computer fails, your project's history and versions are safe online. To set this up, first create a GitHub account via github.com. You can sign up with Google for convenience. Once your GitHub account is active, install Git on your computer using the provided link in the description. During installation, consistently click "Next," and consider adding a Bash profile. When prompted, select VS Code as your default editor. After installation, restart VS Code and verify Git installation by typing `git -v` in the terminal. If a version number appears, it's successfully installed. To link your local Git to your GitHub account, create a new repository on GitHub. Go to your profile, click "New repository," give it a name (e.g., "fun"), and set it to "Private" unless you intend to make your code publicly accessible. After creating the repository, GitHub will provide a series of commands. In your VS Code terminal, navigate to your project folder (e.g., "fun"). Run `git init` to initialize Git versioning. Then, use `git add .` to stage all files for versioning. Next, make your first commit using `git commit -m "Initial commit"` (the message can be anything descriptive). If prompted, configure your Git user identity by providing your email and username (found on your GitHub profile). After configuring, retry the commit. Finally, to connect your local repository to the GitHub repository and push your code online, copy the last three commands provided on your GitHub repository page (which typically include `git branch -M main`, `git remote add origin`, and `git push -u origin main`). Paste these commands into your VS Code terminal. You will be prompted to log in to GitHub in your browser to authorize the connection. Once authorized, your code will be pushed to GitHub. Returning to your GitHub repository and refreshing the page will show your code online. To update your project, make changes (e.g., add a new file), then use `git add .`, `git commit -m "Added file2.txt"`, and `git push origin main`. This will create a new commit on GitHub, providing a new version of your project. This allows you to track changes and revert to previous versions if necessary, a crucial feature for collaboration and error recovery. Cloud development tools often automate these commit and push processes, but understanding the underlying commands is vital. The final step is hosting your application. Currently, your site is not publicly visible, even if your GitHub repository is public. You need a free hosting service to deploy your website. Tools like Vercel integrate with Git and GitHub to automatically deploy your site online. You push your code to GitHub, allow Vercel to communicate with GitHub, and Vercel deploys your application for public access, often within 30 seconds and for free. To demonstrate, create a new folder (e.g., "test-deployment") and open it in VS Code. Create a new Next.js application within this folder using `npx create-next-app@latest`. While the application is being set up, create a new private GitHub repository (e.g., "test") for this project. Once the Next.js application is generated, use `git add .` and then copy and paste the `git commit` and `git push` commands from your GitHub repository to upload your application. Then, go to vercel.com, sign up (e.g., as "Benbk 735" for personal projects), and connect with GitHub. Authorize Vercel to communicate with GitHub. You may need to provide a phone number for verification. Import your GitHub repository (e.g., "test") into Vercel, ensuring you select only the repositories you want Vercel to access. Select the Next.js application, click "Deploy," and your application will be live and accessible online. In summary, you've learned about VS Code for code editing, the terminal for system commands, Node.js and npm for running and managing development tools, Git for version control, GitHub for online code storage and collaboration, and Vercel for hosting and deploying web applications. These are the essential foundations for understanding and working with cloud code. For further learning, especially concerning specific cloud platforms like Claude, additional resources are available.