projeto de api

material-sistemas-distribuidos/package-lock.json

@@ -7,6 +7,9 @@
 		"": {
 			"name": "material-sistemas-distribuidos",
 			"version": "0.0.1",
+			"dependencies": {
+				"highlight.js": "^11.11.1"
+			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^4.0.0",
 				"@sveltejs/adapter-static": "^3.0.8",
@@ -1093,6 +1096,15 @@
 				"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
 			}
 		},
+		"node_modules/highlight.js": {
+			"version": "11.11.1",
+			"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
+			"integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
+			"license": "BSD-3-Clause",
+			"engines": {
+				"node": ">=12.0.0"
+			}
+		},
 		"node_modules/import-meta-resolve": {
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz",

material-sistemas-distribuidos/package.json

@@ -20,5 +20,8 @@
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",
 		"vite": "^6.0.0"
+	},
+	"dependencies": {
+		"highlight.js": "^11.11.1"
 	}
 }

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

@@ -1,5 +1,6 @@
 a {
-  color: var(--color-fg);
+  background-color: var(--color-anchor-bg);
+  color: var(--color-anchor-fg);
   text-decoration: underline;
   cursor: pointer;
 }

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

@@ -23,4 +23,8 @@ code {
 
 em {
   font-style: italic;
+}
+
+b {
+  font-weight: bold;
 }

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

@@ -4,6 +4,9 @@
   --color-bg: #fff5ee;
   --color-fg: #1c1c1c;
 
+  --color-anchor-bg: unset;
+  --color-anchor-fg: black;
+
   --color-kbd-bg: beige;
   --color-kbd-fg: var(--color-fg);
   --color-kbd-border: lightgray;
@@ -20,8 +23,9 @@
   /* --color-bg: #1c1c1c;
   --color-fg: #fff5ee; */
 
-  --font-serif: "Georgia", "serif";
+  --font-serif: "Georgia", serif;
-  --font-mono:  "Monaco", "Menlo";
+  --font-sans:  sans-serif;
+  --font-mono:  "Monaco", "Menlo", "Consolas", monospace;
 
   --heading1-size:   32px;
   --heading2-size:   26px;

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

@@ -6,7 +6,10 @@
   import "../css/anchor.css";
   import "../css/list.css";
   import "../css/img.css";
-  import "../css/code.css"
+  import "../css/code.css";
+
+  import hljs from "highlight.js/lib/core";
+  import xml from "highlight.js/lib/languages/xml";
 
   let { children } = $props();
 </script>

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

@@ -25,14 +25,18 @@
     <ol>
       <li><a href="/intro">Introdução</a></li>
       <li><a href="/windows">Preparação do ambiente no Windows</a></li>
-      <li><a href="/linux">Preparação do ambiente no Linux</a></li>
+      <!-- <li><a href="/linux">Preparação do ambiente no Linux</a></li>
-      <li><a href="/macos">Preparação do ambiente no MacOS</a></li>
+      <li><a href="/macos">Preparação do ambiente no MacOS</a></li> -->
       <li><a href="/vscode">Breve introdução ao Visual Studio Code</a></li>
-      <li><a href="/criando_o_projeto">Criando o projeto da API</a></li>
+      <li><a href="/projeto_de_api">Projeto de API: Biblioteca</a></li>
-      <li><a href="/o_que_e_uma_api">O que é uma API, afinal de contas?</a></li>
       <ol>
-        <li><a href="/o_que_e_uma_api#http">Anatomia de uma requisição HTTP</a></li>
+        <li><a href="/criacao_do_projeto">Criação do projeto</a></li>
-        <li><a href="/o_que_e_uma_api#rest">A arquitetura REST</a></li>
+        <li><a href="/estrutura_de_arquivos">Estrutura de arquivos</a></li>
+        <li>Conectando com o banco de dados</li>
+        <li>Mantendo livros</li>
+        <li>Emprestando livros</li>
+        <li>Sobre o protocolo HTTP</li>
+        <li>A arquitetura REST</li>
       </ol>
     </ol>
   </nav>

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

@@ -0,0 +1,173 @@
+<script>
+  import VscCsharpDevKit              from "../../assets/img/26_vsc_csharp_devkit.png";
+  import VscCmdNovoProjeto            from "../../assets/img/27_vsc_cmd_novo_projeto.png";
+  import VscCmdProjType               from "../../assets/img/28_vsc_cmd_proj_type.png";
+  import VscCmdProjName               from "../../assets/img/29_vsc_cmd_proj_name.png";
+  import VscCmdProjDir                from "../../assets/img/30_vsc_cmd_proj_dir.png";
+  import VscCmdProjConfirm            from "../../assets/img/31_vsc_cmd_proj_confirm.png";
+  import VscCmdProjCriado             from "../../assets/img/32_vsc_cmd_projeto_criado.png";
+  import VscCmdGenerateAssetsForDebug from "../../assets/img/33_vsc_cmd_generate_assets_for_debug.png";
+  import VscCmdDebuggerSemConfig      from "../../assets/img/34_vsc_debugger_sem_config.png";
+  import VscCmdDebuggerComConfig      from "../../assets/img/35_vsc_debugger_com_config.png";
+  import VscCmdDebuggerExecutando     from "../../assets/img/36_vsc_debugger_executando.png";
+</script>
+
+<svelte:head>
+  <title>Criação do projeto</title>
+</svelte:head>
+
+<section>
+  <h1>Criação do projeto</h1>
+
+  <nav>
+    <a href="/">Início</a>
+  </nav>
+
+  <p>
+    Vamos criar o projeto para a API da nossa biblioteca. Na seção <a href="/vscode" target="_blank">Breve introdução ao Visual Studio Code</a>, fizemos isso utilizando o terminal, apenas para testarmos se a instalação do .NET 
+    estava correta. Agora, vamos utilizar a <em>extensão do C# para o VSCode</em> para criar um novo projeto.
+  </p>
+
+  <h2>Criação e configuração do projeto</h2>
+
+  <p>
+    Assim como fizemos em <a href="/vscode" target="_blank">Breve introdução ao Visual Studio Code</a>, crie uma pasta vazia em algum lugar no seu computador, e abra no VSCode. Com a pasta aberta,
+    na barra lateral, abra a aba de extensões, e pesquise por <em>"C#"</em>.
+  </p>
+
+  <div>
+    <img src={VscCsharpDevKit} alt="">
+  </div>
+
+  <p>
+    Algumas opções aparecerão. Instale a extensão <a href="https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit" target="_blank">C# DevKit</a>.
+  </p>
+
+  <p>
+    Após instalado, feche a aba de extensões, e, no seu teclado, aperte <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>p</kbd> (<kbd>⌘</kbd>+<kbd>Shift</kbd>+<kbd>p</kbd>).
+    Uma janela deve aparecer na parte superior do editor. Esta janela é um <a target="_blank" href="https://code.visualstudio.com/docs/getstarted/userinterface#_command-palette">seletor de comandos</a>
+    do Visual Studio Code, onde você pode acessar as diversas funcionalidades do editor.
+  </p>
+
+  <p>
+    A extensão do <em>C# DevKit</em> adiciona alguns comandos, incluindo um comando para a criação de projetos (tal como fizemos via terminal na seção anterior). Escreva <em>new project</em> para
+    pesquisar o comando correto, selecione <code>.NET: New Project</code>, e aperte <kbd>Enter</kbd> para prosseguir.
+  </p>
+
+  <div>
+    <img src={VscCmdNovoProjeto} alt=""/>
+  </div>
+
+  <p>
+    Na próxima janela, várias opções de tipos de projeto serão apresentadas. Queremos criar uma <em>api web</em>, portanto, devemos selecionar a opção <code>API Web do ASP.NET Core</code>.
+  </p>
+
+  <div>
+    <img src={VscCmdProjType} alt=""/>
+  </div>
+
+  <p>
+    Em seguida, será pedido o nome do projeto. Escreva <em>"Biblioteca"</em>, e aperte <kbd>Enter</kbd> para prosseguir.
+  </p>
+
+  <div>
+    <img src={VscCmdProjName} alt=""/>
+  </div>
+
+  <p>
+    O diretório onde você deseja criar o projeto será perguntado. Como já estamos na pasta vazia onde queremos que o projeto seja criado,
+    deixe a opção <code>Default directory</code> selecionada e aperte <kbd>Enter</kbd> para ir para o próximo passo.
+  </p>
+
+  <div>
+    <img src={VscCmdProjDir} alt=""/>
+  </div>
+
+  <p>
+    Podemos definir algumas configurações iniciais para o projeto. Não queremos nada diferente do padrão, inicialmente, então deixe a opção <code>Create project</code> selecionada e aperte <kbd>Enter</kbd> novamente para criar o projeto.
+  </p>
+
+  <div>
+    <img src={VscCmdProjConfirm} alt=""/>
+  </div>
+
+  <p>
+    Agora, observe o explorador de arquivos do VSCode.
+  </p>
+
+  <div>
+    <img src={VscCmdProjCriado} alt=""/>
+  </div>
+
+  <p>
+    Você deve ter a seguinte estrutura de diretórios, se tudo ocorreu corretamente:
+  </p>
+
+  <ul>
+    <li>
+      <code>Biblioteca.WebApi/</code>
+    </li>
+    <li>
+      <code>Biblioteca.sln</code>
+    </li>
+  </ul>
+
+  <p>
+    Este mesmo processo de criação poderia ter sido realizado no terminal com o seguintes comandos:
+  </p>
+
+<pre><code>dotnet new webapi -n Biblioteca
+dotnet new sln -n Biblioteca
+dotnet sln add Biblioteca.WebApi</code></pre>
+
+  <p>
+    Para finalizar, vamos configurar o depurador. Abra a aba do depurador na barra lateral. Você deverá ver algo como:
+  </p>
+
+  <div>
+    <img src={VscCmdDebuggerSemConfig} alt=""/>
+  </div>
+
+  <p>
+    O depurador ainda não está configurado e enxergando o nosso projeto. Para que isso aconteça,
+    abra o seletor de comandos mais uma vez (<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>p</kbd> ou <kbd>⌘</kbd>+<kbd>Shift</kbd>+<kbd>p</kbd>), escolha
+    a opção <code>.NET: Generate Assets for Build and Debug</code> e aperte <kbd>Enter</kbd>.
+  </p>
+
+  <div>
+    <img src={VscCmdGenerateAssetsForDebug} alt=""/>
+  </div>
+
+  <p>
+    Este comando irá alterar alguns arquivos de configuração para que 
+    o VSCode entenda qual projeto deve ser executado. Se tudo deu certo, a aba do
+    depurador agora irá ser exibida desta forma:
+  </p>
+
+  <div>
+    <img src={VscCmdDebuggerComConfig} alt=""/>
+  </div>
+
+  <p>
+    Clique no botão de executar o projeto (ou aperte <kbd>F5</kbd>).
+  </p>
+
+  <div>
+    <img src={VscCmdDebuggerExecutando} alt="">
+  </div>
+
+  <p>
+    A API está sendo executada agora. Observe uma nova seção que apareceu na parte superior da janela com alguns botões. Estes botões são controles do depurador
+    que veremos com detalhes mais tarde. Para parar de executar, clique no botão com o quadrado com contorno vermelho. 
+  </p>
+
+  <p>
+    Nos próximos passos, vamos explorar os arquivos que foram criados pelo .NET dentro de <code>Biblioteca/</code>. Vamos finalizar algumas configurações simples e, finalmente,
+    vamos começar a escrever código.
+  </p>
+
+  <nav>
+    <span>Próximo passo:</span>
+    <a href="/estrutura_de_arquivos">Estrutura de arquivos</a>
+  </nav>
+</section>

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

@@ -1 +0,0 @@
-<p>em desenvolvimento</p>

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

@@ -0,0 +1,21 @@
+<h2>em desenvolvimento</h2>
+
+<p>
+  Estes arquivos foram criados pelos comandos que você colou no terminal.
+  O primeiro comando cria um projeto do tipo <code>webapi</code> com o nome <code>Biblioteca.WebApi</code>. O segundo comando cria uma <em>solução</em> com o nome <code>Biblioteca</code>.
+  O terceiro comando adiciona o projeto <code>Biblioteca.WebApi</code> à solução <code>Biblioteca</code>.
+</p>
+
+<p>
+  No dotnet, um arquivo de solução é um arquivo com extensão .sln que define uma coleção de <em>projetos</em>. Este arquivo é o ponto de entrada utilizado pela IDE para navegar pelo seu código e disponibilizar
+  as suas ferramentas, como o intellisense e o debugger.
+</p>
+
+<p>
+  Uma solução pode ter vários projetos, e é bem comum ver aplicações em dotnet que utilizam pelo menos dois. Mas não precisamos nos preocupar com isso agora. Apenas devemos criar uma solução para
+  fazer o VSCode ler o projeto corretamente.
+</p>
+
+<p>
+  
+</p>

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

@@ -42,8 +42,8 @@
   <nav>
     <ol>
       <li><a href="/windows">Preparação do ambiente no Windows</a></li>
-      <li><a href="/linux">Preparação do ambiente no Linux</a></li>
+      <!-- <li><a href="/linux">Preparação do ambiente no Linux</a></li>
-      <li><a href="/macos">Preparação do ambiente no MacOS</a></li>
+      <li><a href="/macos">Preparação do ambiente no MacOS</a></li> -->
     </ol>
   </nav>
 </section>

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

@@ -0,0 +1,33 @@
+<svelte:head>
+  <title>Projeto de API: Biblioteca</title>
+</svelte:head>
+
+<section>
+  <h1>Projeto de API: Biblioteca</h1>
+
+  <nav>
+    <a href="/">Início</a>
+  </nav>
+
+  <p>
+    Imagine que você foi escolhido para desenvolver um sistema de informação para a <b>biblioteca</b> da sua faculdade. Os usuários deste sistema serão
+    os funcionários que o utilizarão para gerenciar a biblioteca. Os usuários devem ser capazes de <b>visualizar</b>, <b>cadastrar</b>, <b>editar</b> 
+    e <b>remover</b> os <b>livros</b> que estão disponíveis, além
+    de registrar quando um livro foi <b>emprestado</b> para um <b>aluno</b>. Para isso, vamos desenvolver uma API que irá expor <em>endpoints</em> para cada uma destas operações:
+  </p>
+
+  <ul>
+    <li><b>Visualizar</b> os livros da biblioteca disponíveis no sistema.</li>
+    <li><b>Cadastrar</b>, <b>editar</b> e <b>remover</b> livros no sistema.</li>
+    <li><b>Emprestar</b> um livro para um aluno.</li>
+  </ul>
+
+  <p>
+    Antes de tudo, devemos criar o projeto. Vamos fazer isso no próximo passo.
+  </p>
+
+  <nav>
+    <span>Próximo passo:</span>
+    <a href="/criacao_do_projeto">Criação do projeto</a>
+  </nav>
+</section>

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

@@ -194,17 +194,21 @@
   <div><img src={ImgVscDotnetRun} alt=""/></div>
 
   <p>
-    Como manda a tradição, a saída apresentará:
+    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.
+    Se você vê esta mensagem no seu terminal, então estamos prontos para prosseguir. Na próxima seção, vamos enfim criar um projeto de API.
+  </p>
+
+  <p>
+    Para mais detalhes sobre o funcionamento do VSCode, leia o <a href="https://code.visualstudio.com/docs/getstarted/userinterface" target="_blank">guia oficial</a> do editor.
   </p>
 
   <nav>
     <span>Próximo passo:</span>
-    <a href="/criando_o_projeto">Criando o projeto da API</a>
+    <a href="/projeto_de_api">Projeto de API: Biblioteca</a>
   </nav>
 </section>