Usar codespaces do GitHub para criar e depurar

Artigo
08/09/2023

Se você tiver uma assinatura do GitHub Team ou do GitHub Enterprise Cloud, poderá usar o GitHub Codespaces para configurar seu projeto para que ele seja criado dentro de um contêiner hospedado pelo GitHub. Usando o recurso Remoto do Visual Studio Code, você pode conectar o Visual Studio Code em sua área de trabalho ao Codespace e editar, compilar, implantar e depurar diretamente do Codespace.

Este tópico discute o uso de Codespaces do GitHub para editar, compilar, implantar e depurar seus aplicativos do Azure Sphere remotamente; Usar contêineres para compilar e depurar com Visual Studio Code descreve o uso de Visual Studio Code para editar, compilar, implantar e depurar seus aplicativos do Azure Sphere em um contêiner localmente.

Para usar codespaces, seu projeto deve ser configurado como um repositório GitHub e também configurado para uso em um contêiner. Neste tópico, você criará um novo projeto Blink com a configuração apropriada.

Criar um repositório GitHub para seu projeto

Crie um repositório GitHub vazio da seguinte maneira:

Faça logon no github.com.
Na página inicial do GitHub, selecione o botão Novo ao lado da palavra Repositórios.
Dê um nome ao repositório, como Blink, e selecione Criar repositório.
Em Configuração rápida — se você já fez esse tipo de coisa antes, copie a url HTTPS para seu repositório.
Em um prompt de comando, clone seu novo repositório para sua área de trabalho local da seguinte maneira:
```
git clone <repository-url>
```
Você deve ver um aviso de que clonou um repositório vazio.

Criar um novo projeto Blink em seu clone

Abra Visual Studio Code e crie um novo projeto da seguinte maneira:

Selecione Exibir>Paleta> deComandos do Azure Sphere: gerar novo projeto.
Em Selecionar um Modelo, selecione Piscar.
Na caixa de diálogo Selecionar Pasta , especifique uma pasta na qual criar o novo projeto. (Isso pode estar em qualquer lugar— você copiará o conteúdo dessa pasta para o repositório GitHub criado anteriormente.)
Especifique um nome de projeto que corresponda ao nome do repositório GitHub, como Blink, e pressione Enter.
Copie seus arquivos de projeto do Azure Sphere (incluindo todas as subpastas como .vscode e HardwareDefinitions ) em seu clone local, commit e push das alterações. Em seguida, você pode excluir a pasta de projeto criada nesta seção, pois tudo estará no repositório GitHub.

Configurar a pasta .devcontainer

No diretório de nível superior do repositório gitHub, crie uma pasta chamada .devcontainer. Nesta pasta, crie um arquivo chamado devcontainer.json com o seguinte conteúdo:

{
    "name": "Azure Sphere Blink",
    "runArgs": [ "--cap-add=SYS_PTRACE", "--security-opt", "seccomp=unconfined"],
    "build": {
        "dockerfile": "Dockerfile",
        "target": "dev"
    },

    // Use 'settings' to set *default* container specific settings.json values on container create.
    // You can edit these settings after create using File > Preferences > Settings > Remote.
    "settings": {
        "terminal.integrated.shell.linux": "/bin/bash"
    },

    // Use 'appPort' to create a container with published ports. If the port isn't working, be sure
    // your server accepts connections from all interfaces (0.0.0.0 or '*'), not just localhost.
    // "appPort": [],

    // Uncomment the next line to run commands after the container is created.
    // "postCreateCommand": "gcc -v",

    // Comment out the next line if you want to run as root instead
    "remoteUser": "vscode",

    // Add the IDs of extensions you want installed when the container is created in the array below.
    "extensions": [
        "ms-vscode.azure-sphere-tools",
        "ms-vscode.azure-sphere-tools-ui"
    ]
}

Em seguida, crie um arquivo chamado Dockerfile na pasta .devcontainer com o seguinte conteúdo:

FROM mcr.microsoft.com/azurespheresdk:latest AS dev

FROM dev AS build
COPY ./ /src/
WORKDIR /out
RUN cmake -G "Ninja" -DCMAKE_TOOLCHAIN_FILE="/opt/azurespheresdk/CMakeFiles/AzureSphereToolchain.cmake" \
    -DAZURE_SPHERE_TARGET_API_SET="latest-lts" -DCMAKE_BUILD_TYPE="Release" "/src"
ENTRYPOINT [ "ninja" ]

A linha inicial FROM especifica a imagem padrão do Docker do Azure Sphere como o contêiner de desenvolvimento base e a segunda diz para usar esse contêiner base como o ambiente de build. A COPY linha copia o conteúdo do repositório no diretório /src/do contêiner. O WORKDIR especifica o diretório de build. O RUN comando fornece o comando CMake para gerar os arquivos de build. Por fim, o especifica que o ENTRYPOINT ninja deve ser invocado para realmente criar o aplicativo.

Confirme as alterações no projeto do GitHub e envie por push as alterações.

Instalar a extensão de Codespaces do GitHub

Para instalar a extensão do GitHub Codespaces:

Abra a pasta do repositório GitHub no Visual Studio Code, se ainda não estiver.
Abra extensões da barra de atividades Visual Studio Code.
Pesquise "Codespaces do GitHub" e instale a extensão codespaces do GitHub.

Criar um codespace

Selecione Exibir> codespaces depaleta>de comandos: criar novo codespace.
Na lista suspensa de repositórios, selecione Piscar. Se o repositório não aparecer na lista suspensa, você poderá digitar seu nome na caixa de texto acima da lista.
Na lista suspensa de ramificações, selecione a apropriada.

A barra de título no Visual Studio Code alterações para mostrar que você está editando em Codespaces. Se você abrir a guia Extensões na barra de navegação à esquerda, verá as extensões instaladas localmente e as instaladas no contêiner remoto.

Compilar e depurar o projeto

Pressione F5 ou selecione Executar>Iniciar Depuração para criar seu projeto e começar a depuração. Seu aplicativo cria e sideloads para seu dispositivo, como de costume. Se você tiver definido um ponto de interrupção em seu código, o aplicativo será executado até que o ponto de interrupção seja atingido. Você pode usar os comandos de depuração habituais para percorrer seu código. Consulte o tópico Depuração no Visual Studio Code documentação para obter mais detalhes.

Quando terminar de depurar, pressione Shift+F5 ou o ícone Parar . Para fechar o codespace, selecione Exibir> Codespacesda Paleta> deComandos: Parar o Codespace Atual.

Compartilhar via