continuação do documento

material-sistemas-distribuidos/src/components/Nav.svelte

@@ -0,0 +1,3 @@
+<nav>
+  <a href="/">Início</a>
+</nav>

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

@@ -0,0 +1,3 @@
+img {
+  max-width: 100%;
+}

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

@@ -19,4 +19,8 @@ h2 {
 code {
   font-family: var(--font-mono);
   font-size: 16px;
+}
+
+em {
+  font-style: italic;
 }

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

@@ -1,7 +1,11 @@
 :root {
-  --color-bg: #e0e0e0;
+  /* --color-bg: #e0e0e0; */
+  --color-bg: #fff5ee;
   --color-fg: #1c1c1c;
 
+  /* --color-bg: #1c1c1c;
+  --color-fg: #fff5ee; */
+
   --font-serif: "Georgia", "serif";
   --font-mono:  "Monaco", "Menlo";
 

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

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

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

@@ -1,3 +1,7 @@
+<script>
+  import Nav from "../components/Nav.svelte";
+</script>
+
 <svelte:head>
   <title>Sistemas distribuídos</title>
 </svelte:head>
@@ -5,18 +9,14 @@
 <section>
   <h1>Sistemas distribuídos</h1>
 
-  <nav>
-    <a href="/">Início</a>
-  </nav>
-
   <p>
     Bem vindo! Este documento é um material de apoio à disciplina de sistemas distribuídos.
-    Ao longo deste material você irá desenvolver uma API REST que irá responder a alguns endpoints simples. 
+    Ao longo deste material você irá desenvolver uma <em>API REST</em> que irá responder a alguns endpoints simples. 
   </p>
 
   <p>
     Inicialmente, iremos montar o nosso ambiente de desenvolvimento, instalando as ferramentas necessárias
-    para criar e compilar projetos do <a href="https://dotnet.microsoft.com/pt-br/" target="_blank"><code>.NET</code></a>. A seguir iremos definir algumas funcionalidades
+    para criar e compilar projetos do <a href="https://dotnet.microsoft.com/pt-br/" target="_blank"><em>.NET</em></a>. A seguir iremos definir algumas funcionalidades
     que queremos desenvolver na nossa API. Você será então guiado no processo de desenvolvimento e testes da API, até chegarmos no resultado final.
   </p>
   
@@ -24,11 +24,15 @@
     <h2>Sumário</h2>
     <ol>
       <li><a href="/intro">Introdução</a></li>
-      <li><a href="/ambiente">Ambiente de de desenvolvimento</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="/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="/o_que_e_uma_api">O que é uma API, afinal de contas?</a></li>
       <ol>
-        <li><a href="/windows">Windows</a></li>
+        <li><a href="/o_que_e_uma_api#http">Anatomia de uma requisição HTTP</a></li>
-        <li><a href="/linux">Linux</a></li>
+        <li><a href="/o_que_e_uma_api#rest">A arquitetura REST</a></li>
-        <li><a href="/macos">MacOS</a></li>
       </ol>
     </ol>
   </nav>

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

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

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

@@ -0,0 +1,49 @@
+<script>
+  import Nav from "../../components/Nav.svelte";
+</script>
+
+<svelte:head>
+  <title>Introdução</title>
+</svelte:head>
+
+<section>
+  <h1>Introdução</h1>
+
+  <nav>
+    <a href="/">Início</a>
+  </nav>
+
+  <p>
+    Vamos escrever nossa API na linguagem <em>C#</em>, para fazer isso, precisamos instalar a <em>SDK do .NET</em> e uma <em>IDE</em> para nos auxiliar na escrita do código.
+  </p>
+
+  <p>
+    A SDK (<em>Software Development Kit</em>) do .NET é um conjunto de ferramentas e bibliotecas que constituem um ambiente de desenvolvimento de aplicações
+    utilizando uma das linguagens do .NET (o <a href="https://dotnet.microsoft.com/en-us/languages/csharp" target="_blank">C#</a>,
+    <a href="https://dotnet.microsoft.com/en-us/languages/fsharp">F#</a> ou o <a href="https://learn.microsoft.com/pt-br/dotnet/visual-basic">Visual Basic</a>).
+    Ela é fundamental para que possamos criar, compilar e executar projetos escritos em uma dessas linguagens.
+  </p>
+
+  <p>
+    Apesar de ser desenvolvida pela Microsoft, aplicações em .NET são multiplataforma e podem ser facilmente executadas no Windows, MacOS e nas principais distribuições Linux.
+  </p>
+
+  <p>
+    O <em>Visual Studio Code</em> (as vezes abreviado como VSCode ou VSC) é <a href="https://survey.stackoverflow.co/2024/technology#3-integrated-development-environment" target="_blank">um dos editores mais utilizados na indústria</a>.
+    Vamos utilizá-lo pois ele é multiplataforma e foi feito para ser extensível, ou seja, novas funcionalidades podem ser adicionadas ao editor através de extensões feitas por terceiros. Desta forma,
+    o VSCode pode se tornar uma IDE com funcionalidades avançadas, como depuração e navegação de código, tanto para o C# como para qualquer linguagem.
+  </p>
+
+  <p>
+    Nos próximos passos, iremos preparar nosso ambiente de desenvolvimento instalando a SDK e o VSCode. Siga o passo a passo de acordo com o sistema operacional que
+    você está usando no momento.
+  </p>
+
+  <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="/macos">Preparação do ambiente no MacOS</a></li>
+    </ol>
+  </nav>
+</section>

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,151 @@
+<script>
+  import ImgWinDotnetDownload from "../../assets/img/1_win_dotnet_download.webp";
+  import ImgWinDotnetInstalador from "../../assets/img/2_win_dotnet_instalador.webp";
+  import ImgWinDotnetInstaladorInicio from "../../assets/img/3_win_dotnet_instalador_inicio.webp";
+  import ImgWinDotnetInstaladorFinalizacao from "../../assets/img/4_win_dotnet_instalador_finalizacao.webp";
+
+  import ImgWinVscDownload from "../../assets/img/5_win_vsc_download.webp";
+  import ImgWinVscInstalador from "../../assets/img/6_win_vsc_instalador.webp";
+  import ImgWinVscLicensa from "../../assets/img/7_win_vsc_licensa.webp";
+  import ImgWinVscPath from "../../assets/img/8_win_vsc_path.webp";
+  import ImgWinVscStartMenu from "../../assets/img/9_win_vsc_startmenu.webp";
+  import ImgWinVscAdicionais from "../../assets/img/10_win_vsc_adicionais.webp";
+  import ImgWinVscResumo from "../../assets/img/11_win_vsc_resumo.webp";
+  import ImgWinVscFinalizacao from "../../assets/img/12_win_vsc_finalizacao.webp";
+  import ImgWinVscAberto from "../../assets/img/13_win_vsc_aberto.webp";
+</script>
+
+<svelte:head>
+  <title>Preparação do ambiente no Windows</title>
+</svelte:head>
+
+<section>
+  <h1>Preparação do ambiente no Windows</h1>
+
+  <nav>
+    <a href="/">Início</a>
+  </nav>
+
+  <p>
+    O procedimento para a instalação do .NET e do VSCode é simples. Siga o passo a passo abaixo.
+  </p>
+
+  <h2 id="dotnet">SDK do .NET</h2>
+
+  <p>
+    O instalador do .NET está disponível no <a href="https://dotnet.microsoft.com/pt-br/download" target="_blank">site da microsoft</a>.
+  </p>
+
+  <p>
+    Nesta página, duas opções de download serão apresentadas para você: as versões 8 e 9 do SDK. Nós queremos
+    a <em>versão 9</em>.
+  </p>
+
+  <div>
+    <img src={ImgWinDotnetDownload} alt="Página de download da SDK do .NET">
+  </div>
+
+  <p>
+    Clique no botão <em>"Baixar o SDK do .NET x64"</em> (ou <em>"Arm64"</em>, se o seu computador tiver arquitetura ARM). 
+    O download deve iniciar automaticamente. Após finalizado, abra o executável e clique em Instalar.
+  </p>
+
+  <div>
+    <img src={ImgWinDotnetInstalador} alt="Arquivo do instalador baixado">
+  </div>
+
+  <div>
+    <img src={ImgWinDotnetInstaladorInicio} alt="Início do processo de instalação">
+  </div>
+
+  <div>
+    <img src={ImgWinDotnetInstaladorFinalizacao} alt="Sucesso do processo de instalação">
+  </div>
+
+  <p>
+    Se tudo ocorreu bem, o instalador informará que a instalação foi bem sucedida. Você poderá então fechá-lo e prosseguir para a instalação do VSCode.
+  </p>
+
+  <h2>Visual Studio Code</h2>
+
+  <p>
+    Vá para a página de download do <a href="https://code.visualstudio.com/" target="_blank">Visual Studio Code</a> e clique em <em>"Baixar para o Windows"</em>.
+    Assim como na SDK, o download deve iniciar automaticamente. Abra o executável e comece o processo de instalação.
+  </p>
+
+  <div>
+    <img src={ImgWinVscDownload} alt=""/>
+  </div>
+
+  <div>
+    <img src={ImgWinVscInstalador} alt=""/>
+  </div>
+
+  <p>
+    Aceite a licença de software para continuar com a instalação.
+  </p>
+
+  <div>
+    <img src={ImgWinVscLicensa} alt=""/>
+  </div>
+
+  <p>
+    Escolha o caminho em que você deseja que o VSCode seja instalado. Se estiver com dúvida,
+    deixe como está e apenas clique em Próximo.
+  </p>
+
+  <div>
+    <img src={ImgWinVscPath} alt=""/>
+  </div>
+
+  <p>
+    Nesta parte, não altere nada, apenas clique em Próximo.
+  </p>
+
+  <div>
+    <img src={ImgWinVscStartMenu} alt=""/>
+  </div>
+
+  <p>
+    Em seguida, deixe todas as caixas selecionadas. Desta forma, será criado um atalho na sua área de trabalho
+    para abrir o VSCode, além de você poder abrir diretórios específicos no editor através da área
+    de contexto do Windows (quando você clica com o botão direito no explorador de arquivos). Clique em Próximo.
+  </p>
+
+  <div>
+    <img src={ImgWinVscAdicionais} alt=""/>
+  </div>
+
+  <p>
+    O resumo de instalação será apresentado. Clique em Instalar para continuar.
+  </p>
+
+  <div>
+    <img src={ImgWinVscResumo} alt=""/>
+  </div>
+
+  <p>
+    Se tudo der certo, o instalador te informará do sucesso da instalação. Deixe esta caixa marcada e clique em Finalizar.
+  </p>
+
+  <div>
+    <img src={ImgWinVscFinalizacao} alt=""/>
+  </div>
+
+  <p>
+    O VSCode será aberto.
+  </p>
+
+  <div>
+    <img src={ImgWinVscAberto} alt=""/>
+  </div>
+
+  <p>
+    Agora que temos tudo pronto, vamos aprender um pouco sobre como o VSCode funciona, vamos criar o nosso primeiro projeto C#, e vamos instalar as extensões necessárias
+    para auxiliar o processo de desenvolvimento. 
+  </p>
+
+  <nav>
+    <span>Próximo passo: <a href="/vscode">Breve introdução ao Visual Studio Code</a></span>
+  </nav>
+</section>