Develop with AI

GitHub Copilot

Update

Copilot can now use other LLMs than OpenAI, including Google, and Anthropic to provide code suggestions

GitHub Copilot is a tool that uses the OpenAI language models to provide code suggestions and suggestions for improving code quality.

Alternative code assistance

There is also other producs indegrated to IDEs such as :

Copilot Chat

Copilot Chat is a chat interface that allows you to ask questions and get suggestions for code improvements.

it's available on :

It is a similar approach to chat GPT prompting optimised for the developper experience.

CLI

CLI helps you using you command line interpreter You can use it in the terminal with the following command:

gh auth login
gh extension install github.copilot
gh copilot explain "traceroute github.com"

Warning

GitHub CLI is not supported yet with our Worldline account, so you need to use the web version with the link here

IDEs integration (VSCode)

Test generation

Sortcut usage of Copilot chat

You can also use the chat interface to ask questions with shortcuts :

/ask
/explain
/generate
/refactor
/test
/setupTest
...

Architecture diagram

Mermaid diagrams is a great tool to create diagrams in markdown files online. With copilot you can generate a diagram based on the code you write or chat with copilot to generate the diagram.

Generate a mermaid architecture diagram for a simple retail app with product catalog, product details , buying tunnel , loyalty. Be detailed. I want to make this app with express node JS Rest API server, please provide the diagram for the server side. Suggest technical stack on the diagram , name the component variables. Parentheses are not supported by mermaid.

graph TD;
    A[Client Application] -->|HTTP Requests| B[Express.js REST API Server]
    B -->|Fetch Products| C[Product Controller - productController]
    B -->|Fetch Product Details| D[Product Details Controller - productDetailsController]
    B -->|Handle Cart Operations| E[Cart Controller - cartController]
    B -->|Process Orders| F[Order Controller - orderController]
    B -->|Manage User Accounts| G[User Controller - userController]
    B -->|Handle Loyalty Program| H[Loyalty Controller - loyaltyController]

    subgraph Database
        I[MongoDB - mongoose]
    end

    subgraph Middleware
        J[Authentication Middleware - passport]
        K[Error Handling Middleware - errorHandler]
        L[Logging Middleware - morgan]
    end

    B -->|Connects to| I
    B -->|Uses| J
    B -->|Uses| K
    B -->|Uses| L

    C -->|CRUD Operations| I
    D -->|CRUD Operations| I
    E -->|CRUD Operations| I
    F -->|CRUD Operations| I
    G -->|CRUD Operations| I
    H -->|CRUD Operations| I

🧪 Exercise

Install GitHub Copilot on VSCode

Install the GitHub Copilot extension on your VSCode
Sign in with your GitHub account, if not already done
Create a new file and start typing a function or a class, to see the suggestions provided by Copilot

Generating unit tests

We"re going to use GitHub Copilot to generate unit tests for a simple JavaScript project repository.

To run the project and unit tests, you will need NodeJs installed on your machine.

Clone the following repository: github.com/worldline/learning-ai-workspace-js
Open the project in your VSCode
Open GitHub Copilot Chat by clicking on the Copilot icon in the bottom right corner of your VSCode
Ask Copilot to generate unit tests for the index.js file . You can also try the /setupTests command
Copilot may make several suggestions: choosing a testing framework, adding a test command to package.json, install new dependencies. Accept all its suggestions.
Try to run the generated tests. In case of trouble, use Copilot Chat to ask for help.

Solution

Here we decided to go with supertest framework

setupTestsCommand

Here is an example of how Copilot can help you fix a failing test:

Refactoring

Now we are going to use Copilot to refactor a piece of code in the same project.

Open the index.js file in the project
Ask Copilot to add a feature in the GET /movies endpoint that allows filtering movies by director, based on a director query parameter.
Copilot will generate the code for you. Try to understand the changes it made and run the project to test the new feature.
Ask Copilot to complete the unit test in index.test.js to test getting movies filtered by director. It should generate more unit tests that check against one of the directors in the example data.
Now we're going to refactor the code to extract the filtering logic into a separate function. Select the parts of the code with the .find() and .filter() function calls and ask Copilot to extract them into a new function. Let Copilot suggest a name for these functions
Under the previous generated function, type function filterMoviesByYear(. Wait for Copilot to suggest you the rest of the function signature and function body. Accept the suggestion using the Tab key.
Ask Copilot again to allow filtering movies by a year query parameter. Copilot should use the filterMoviesByYear function you just created to implement this feature.
Open index.test.js. In the GET /movies test block, add a new assertion block by typing it('should return movies filtered by year',. Wait for Copilot to suggest you the rest of the tests. Review code to make sure it uses the ?year query parameter and checks correctly a date from the example data.
Run the tests to make sure everything is working as expected. Use Copilot to ask for help if needed.

Solution

Adding the new feature

Complete the test

Refactor the code to extract logic

Get code suggestion from a function name

Refactor with Copilot Chat the API logic

Get code suggestion from test description

GitHub Spark is an AI-powered tool for creating and sharing micro apps (“sparks”), which can be tailored to your exact needs and preferences, and are directly usable from your desktop and mobile devices. Without needing to write or deploy any code.

And it enables this through a combination of three tightly-integrated components:

An NL-based editor, which allows easily describing your ideas, and then refining them over time
A managed runtime environment, which hosts your sparks, and provides them access to data storage, theming, and LLMs
A PWA-enabled dashboard, which lets you manage and launch your sparks from anywhere

🧪 Exercises

Create a web app with V0 and blot

Open V0.dev and enter a prompt to create a todo list web app with common features: add, delete, mark as done, tag, filter and sort.
- Download the code and run it on your local machine. Try to understand the code generated by V0.
Try again this time with bolt.new.
- What are the differences between the two tools?

Develop with AI

GitHub Copilot

Copilot Chat

CLI

IDEs integration (VSCode)

Completion

Generation & Refactoring

Assistance