criando projeto da api

material-sistemas-distribuidos/src/css/code.css

@@ -0,0 +1,30 @@
+kbd {
+  font-family:      var(--font-mono);
+  font-size:        14px;
+  background-color: var(--color-kbd-bg);
+  color:            var(--color-kbd-fg);
+  padding:          3px 6px;
+  border:           1px solid var(--color-kbd-border);
+  border-radius:    6px;
+  box-shadow:       2px 2px lightgray;
+}
+
+code {
+  font-family: var(--font-mono);
+}
+
+code:not(pre *) {
+  background-color: var(--color-code-bg);
+  color:            var(--color-code-fg);
+  padding:          3px 6px;
+  border:           1px solid var(--color-code-border);
+  border-radius:    6px;
+}
+
+pre:has(code) {
+  background-color: var(--color-codeblock-bg);
+  color:            var(--color-codeblock-fg);
+  padding:          16px;
+  border:           1px solid var(--color-codeblock-border);
+  border-radius:    10px;
+}

material-sistemas-distribuidos/src/css/vars.css

@@ -1,8 +1,22 @@
 :root {
+  /* light theme */
   /* --color-bg: #e0e0e0; */
   --color-bg: #fff5ee;
   --color-fg: #1c1c1c;
 
+  --color-kbd-bg: beige;
+  --color-kbd-fg: var(--color-fg);
+  --color-kbd-border: lightgray;
+
+  --color-codeblock-bg: beige;
+  --color-codeblock-fg: var(--color-fg);
+  --color-codeblock-border: lightgray;
+
+  --color-code-bg: beige;
+  --color-code-fg: var(--color-fg);
+  --color-code-border: lightgray;
+
+  /* dark theme */
   /* --color-bg: #1c1c1c;
   --color-fg: #fff5ee; */
 

material-sistemas-distribuidos/src/keys.txt

@@ -0,0 +1,2 @@
+⌘
+⌥

material-sistemas-distribuidos/src/routes/+layout.svelte

@@ -6,6 +6,7 @@
   import "../css/anchor.css";
   import "../css/list.css";
   import "../css/img.css";
+  import "../css/code.css"
 
   let { children } = $props();
 </script>

material-sistemas-distribuidos/src/routes/vscode/+page.svelte

@@ -1 +1,210 @@
-<p>em desenvolvimento</p>
+<script>
+  import ImgVscVazio from "../../assets/img/14_vsc_vazio.webp";
+  import ImgVscExplorer from "../../assets/img/15_vsc_explorer.webp";
+  import ImgVscDebugger from "../../assets/img/16_vsc_debugger.webp";
+  import ImgVscExtensions from "../../assets/img/17_vsc_extensions.webp";
+  import ImgVscCriandoNovaPasta from "../../assets/img/18_vsc_criando_nova_pasta.webp";
+  import ImgVscSelecionandoPastaVazia from "../../assets/img/19_vsc_selecionando_pasta_vazia.webp";
+  import ImgVscConfia from "../../assets/img/20_vsc_confia.webp";
+  import ImgVscPastaAberta from "../../assets/img/21_vsc_pasta_aberta.webp";
+  import ImgVscTerminal from "../../assets/img/22_vsc_terminal.webp";
+  import ImgVscDotnetVersion from "../../assets/img/23_vsc_dotnet_version.webp";
+  import ImgVscDotnetNew from "../../assets/img/24_vsc_dotnet_new.webp";
+  import ImgVscDotnetRun from "../../assets/img/25_vsc_dotnet_run.webp";
+</script>
+
+<svelte:head>
+  <title>Breve introdução ao Visual Studio Code</title>
+</svelte:head>
+
+<section>
+  <h1>Breve introdução ao Visual Studio Code</h1>
+
+  <nav>
+    <a href="/">Início</a>
+  </nav>
+
+  <p>
+    Uma nova janela do VSCode, sem nada aberto, se parecerá com isso:
+  </p>
+
+  <div>
+    <img src={ImgVscVazio} alt=""/>
+  </div>
+
+  <p>
+    Note a barra lateral à esquerda. Há cinco botões, onde cada um abre uma ferramenta diferente do editor. Elas são, respectivamente:
+  </p>
+
+  <ol>
+    <li>- Explorador de arquivos</li>
+    <li>- Busca</li>
+    <li>- Controle de versionamento</li>
+    <li>- Depurador</li>
+    <li>- Gerenciador de extensões</li>
+  </ol>
+
+  <p>
+    Clique no primeiro botão para abrir o explorador de arquivos.
+  </p>
+
+  <div>
+    <img src={ImgVscExplorer} alt=""/>
+  </div>
+
+  <p>
+    Nesta aba serão mostrados os arquivos do <em>diretório que está aberto no VSCode</em>. Como ainda
+    não temos nenhum diretório aberto, o editor apresenta um botão para que possamos abrir um. Vamos fazer isso mais tarde.
+  </p>
+
+  <p>
+    Podemos ignorar a busca e o controle de versionamento por enquanto. Clique no quarto botão da barra lateral.
+    O depurador (ou <em>debugger</em>, em inglês) será exibido.
+  </p>
+
+  <div><img src={ImgVscDebugger} alt=""/></div>
+
+  <p>
+    Assim como no explorador de arquivos, como não temos nenhum diretório aberto, o VSCode apresenta algumas opções padrão. O que precisamos
+    saber agora é que, quando criarmos o projeto da API, poderemos utilizar esta aba para <em>depurar</em> (ou <em>debugar</em>) o nosso código. Ou seja, executar nosso 
+    código passo a passo e inspecionar as nossas variáveis. Esta é uma ferramenta valiosa para nos ajudar a entender e resolver bugs.
+  </p>
+
+  <p>
+    Por fim, clique no último botão da barra lateral. O gerenciador de extensões será exibido.
+  </p>
+
+  <div><img src={ImgVscExtensions} alt=""/></div>
+
+  <p>
+    Nesta aba podemos instalar extensões ao VSCode. Quando iniciarmos o desenvolvimento da API, iremos instalar a extensão oficial para o desenvolvimento em C#.
+    Esta extensão irá adicionar <em>ferramentas de inteligência de linguagem</em> que disponibilizarão a
+    análise estática do código e o 
+    <a href="https://en.wikipedia.org/wiki/Language_Server_Protocol">LSP</a> <a href="http://www.omnisharp.net/">Omnisharp</a>, além do depurador.
+    Em resumo, serão instaladas ferramentas que irão nos auxiliar no processo de desenvolvimento.
+  </p>
+
+  <p>
+    Agora, vamos criar um Hello World com C#, para testarmos se nossa instalação do SDK do .NET foi realmente bem sucedida. Volte no explorador de arquivos, e clique em "Abrir" para
+    abrir um diretório no VSCode.
+  </p>
+
+  <div>
+    <img src={ImgVscExplorer} alt=""/>
+  </div>
+
+  <p>
+    O diálogo de seleção de arquivos do seu sistema será exibido. Crie uma pasta <em>vazia</em> em algum lugar de fácil acesso no seu computador, e a selecione para abrir.
+  </p>
+
+  <div>
+    <img src={ImgVscCriandoNovaPasta} alt="">
+  </div>
+
+  <p>
+    Neste exemplo, criei uma pasta chamada "HelloWorld".
+  </p>
+
+  <div>
+    <img src={ImgVscSelecionandoPastaVazia} alt="">
+  </div>
+
+  <p>
+    A pasta recém-criada está vazia e foi selecionada para ser aberta. Ao abrir, é possível que o VSCode pergunte
+    se você realmente confia neste diretório.
+  </p>
+
+  <div>
+    <img src={ImgVscConfia} alt="">
+  </div>
+
+  <p>
+    Como foi você mesmo que o criou, selecione a caixa para que o editor
+    confie neste diretório e em todos os arquivos dentro dele, e confirme.
+  </p>
+
+  <div><img src={ImgVscPastaAberta} alt=""/></div>
+
+  <p>
+    Agora temos nossa pasta aberta no editor. Observe que a aba do explorador de arquivos está vazia agora, sem nada. Isto acontece
+    pois, como a pasta está vazia, não temos nenhum arquivo. Assim que eles foram criados, aparecerão aí.
+  </p>
+
+  <p>
+    Agora vamos criar um projeto simples que apenas irá exibir uma saudação. Para fazer isso, precisaremos executar alguns comandos no <em>terminal</em>. O VSCode
+    tem um terminal embutido. Para abrí-lo, aperte <kbd>Ctrl</kbd>+<kbd>j</kbd> (<kbd>⌘</kbd>+<kbd>j</kbd> no MacOS)
+  </p>
+
+  <div><img src={ImgVscTerminal} alt=""/></div>
+
+  <p>
+    Observe que uma aba foi aberta na parte inferior da janela. Este é o terminal onde digitaremos alguns comandos para testar a instalação do dotnet, e criar um novo projeto.
+  </p>
+
+  <p>
+    Antes de tudo, digite o seguinte comando:
+  </p>
+
+  <pre><code>dotnet --version</code></pre>
+
+  <p>
+    A saída do comando deve ser algo como
+  </p>
+
+  <pre><code>9.0.200</code></pre>
+
+  <div><img src={ImgVscDotnetVersion} alt=""/></div>
+
+  <p>
+    Se a versão do SDK que você instalou foi exibida na saída do comando, então a instalação está correta. Vamos criar um projeto agora. Para isso, ainda no terminal, execute o comando:
+  </p>
+
+  <pre><code>dotnet new console</code></pre>
+
+  <p>
+    Este comando irá criar um projeto simples em C# do tipo <em>console</em>. Observe na aba do explorador de arquivos
+    os novos arquivos criados.
+  </p>
+
+  <div><img src={ImgVscDotnetNew} alt=""/></div>
+
+  <p>
+    A estrutura de diretórios agora está assim:
+  </p>
+
+  <ol>
+    <li><code>HelloWorld/</code></li>
+    <ol>
+      <li><code>obj/</code></li>
+      <li><code>HelloWorld.csproj</code></li>
+      <li><code>Program.cs</code></li>
+    </ol>
+  </ol>
+
+  <p>
+    Nas próximas seções, iremos nos aprofundar na estrutura criada pelo .NET e o que cada um destes arquivos faz.
+  </p>
+
+  <p>
+    Agora, vamos executar este projeto. Ainda no terminal, execute:
+  </p>
+
+  <pre><code>dotnet run</code></pre>
+
+  <div><img src={ImgVscDotnetRun} alt=""/></div>
+
+  <p>
+    Como manda a tradição, a saída apresentará:
+  </p>
+
+  <pre><code>Hello, World!</code></pre>
+
+  <p>
+    Se você vê esta mensagem no seu terminal, então estamos prontos para prosseguir. Vamos agora criar um novo projeto de API.
+  </p>
+
+  <nav>
+    <span>Próximo passo:</span>
+    <a href="/criando_o_projeto">Criando o projeto da API</a>
+  </nav>
+</section>