Usar o GitHub Codespaces para criar e depurar

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 compilado 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 do GitHub Codespaces para editar, compilar, implantar e depurar seus aplicativos do Azure Sphere remotamente; Usar contêineres para build e depuração com o Visual Studio Code descreve o uso do 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:

1. Faça login no github.com.

2. Na página inicial do GitHub, selecione o botão Novo ao lado da palavra Repositórios.

3. Dê um nome ao seu repositório, como Blink, e selecione Criar repositório.

4. Em Configuração rápida, se você já fez esse tipo de coisa antes, copie a URL HTTPS do seu repositório.

5. 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.

Crie um novo projeto do Blink em seu clone

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

1. Selecione Exibir>Paleta de Comandos>Azure Sphere: Gerar Novo Projeto.
2. Em Selecionar um modelo, selecione Piscar.
3. Na caixa de diálogo Selecionar pasta, especifique uma pasta na qual criar o novo projeto. (Isso pode ser em qualquer lugar — você copiará o conteúdo dessa pasta para o repositório GitHub criado anteriormente.)
4. Especifique um nome de projeto que corresponda ao nome do seu repositório GitHub, como Blink, e pressione Enter.
5. Copie os arquivos de projeto do Azure Sphere (incluindo todas as subpastas, como .vscode e HardwareDefinitions) para o clone local, confirme e envie as alterações por push. Você pode então excluir a pasta do 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. Nessa 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 para o diretório /src/ do contêiner. O WORKDIR especifica o diretório de compilação. O RUN comando fornece o comando CMake para gerar os arquivos de compilação. Por fim, o especifica que ninja ENTRYPOINT deve ser invocado para realmente construir o aplicativo.

Confirme as alterações em seu projeto GitHub e envie as alterações por push.

Instalar a extensão do GitHub Codespaces

Para instalar a extensão do GitHub Codespaces:

1. Abra a pasta do repositório GitHub no Visual Studio Code, se ainda não estiver.
2. Abra Extensões na Barra de Atividades do Visual Studio Code.
3. Pesquise "GitHub Codespaces" e instale a extensão GitHub Codespaces.

Criar um codespace

1. Selecione Exibir>codespaces da paleta de>comandos: criar novo codespace.

2. 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.

3. Na lista suspensa de ramificações, selecione a apropriada.

   A barra de título no Visual Studio Code é alterada 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 iniciar a depuração. Seu aplicativo é compilado e carregado lateralmente em 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 usuais para percorrer seu código. Consulte o tópico Depuração na documentação do Visual Studio Code para obter mais detalhes.

Quando terminar de depurar, pressione Shift+F5 ou o ícone Parar . Para fechar o codespace, selecione Exibir>codespaces da paleta>de comandos: Parar codespace atual.