criando endpoints

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

@@ -1,3 +1,5 @@
 img {
   max-width: 100%;
+  margin: 0 auto;
+  display: block;
 }

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

@@ -1 +1,153 @@
-<h1>em desenvolvimento</h1>
+<script>
+  import VscDebugging                from "../../assets/img/37_vsc_debugging.png";
+  import BrowserHomeEmpty            from "../../assets/img/38_browser_home_empty.png";
+  import BrowserNaoConseguiuConectar from "../../assets/img/39_browser_nao_conseguiu_conectar.png";
+  import BrowserPortaErrada          from "../../assets/img/40_browser_porta_errada.png";
+  import BrowserHelloWorld           from "../../assets/img/41_browser_hello_world.png";
+  import BrowserKonnichiwa           from "../../assets/img/42_browser_konnichiwa.png";
+</script>
+
+<section>
+  <h1>Criando e executando endpoints</h1>
+
+  <nav>
+    <a href="/">Início</a>
+  </nav>
+
+  <p>
+    Enfim, vamos escrever nossos primeiros <em>endpoints</em>.
+  </p>
+
+  <p>
+    Durante este capitulo, vamos trabalhar somente em <code>Biblioteca/Program.cs</code>. Nosso objetivo por enquanto é escrever um endpoint customizado, e testar se ele
+    responde corretamente, da forma como desejamos.
+  </p>
+
+  <section>
+    <h2>Iniciando o serviço Web</h2>
+
+    <p>
+      Para começar, abra <code>Biblioteca/Program.cs</code>, e apague <em>todas as linhas</em> deste arquivo. Vamos escrever manualmente todas as linhas necessárias para iniciar a API e configurar um enpdoint de teste.
+    </p>
+
+  <pre><code>{`var builder = WebApplication.CreateBuilder(args);
+
+  var app = builder.Build();
+
+  app.Run();`}</code></pre>
+
+    <p>
+      Escreva, estas linhas no seu <code>Program.cs</code>. Estas são as chamadas de função essenciais para que a sua aplicação aja como uma API Web.
+      Nenhuma outra configuração adicional foi realizada, nem nenhum endpoint foi definido. Sua aplicação neste momento apenas inicia e escuta requisições em uma porta (definida em <code>launchSettings.json</code>).
+    </p>
+
+    <div>
+      <img src="{VscDebugging}" alt="">
+    </div>
+
+    <p>
+      Tente executar o projeto através do depurador. Você deve se lembrar do arquivo <code>launchSettings.json</code> que vimos no capítulo anterior. Nele é configurado
+      a <em>porta</em> em que nossa aplicação escutará as requisições no protocolo HTTP, definido em uma configuração semelhante a <code>http://localhost:&lt;numero&gt;</code> (por exemplo, <code>http://localhost:5000</code>).
+      Este número após o sinal de dois-pontos é a <em>porta</em> que sua aplicação estará escutando.
+    </p>
+
+    <p>
+      Abra uma nova aba no seu navegador de internet, e, na barra de endereço, escreva <code>http://localhost:&lt;porta&gt;</code>, onde <code>&lt;porta&gt;</code> é o número que está definido no seu <code>launchSettings.json</code> (no meu caso, este número é 5000, portanto o endereço que
+      eu devo digitar é <code>http://localhost:5000</code>. Você pode alterar o seu <code>launchSettings.json</code> para que a sua porta também seja 5000, ou qualquer outro número que desejar). Se tudo der certo - ou seja, sua aplicação está sendo executada, e a porta que você escreveu no navegador é a correta -
+      você verá uma janela vazia. Isto significa que o navegador conseguiu acessar o endereço que você escreveu, só que, como não definimos nenhum endpoint, nossa aplicação não devolveu nada para o navegador, por isso a janela vazia.
+    </p>
+
+    <div>
+      <img src="{BrowserHomeEmpty}" alt="">
+    </div>
+
+    <p>
+      Se você não está executando o projeto, ou escreveu a porta errada, você provavelmente verá uma mensagem no navegador semelhante a esta:
+    </p>
+
+    <div>
+      <img src="{BrowserNaoConseguiuConectar}" alt="">
+    </div>
+
+    <p>
+      Ou esta, onde digitei uma porta aleatória:
+    </p>
+
+    <div>
+      <img src="{BrowserPortaErrada}" alt="">
+    </div>
+  </section>
+
+  <section>
+    <h2>Criando o primeiro endpoint</h2>
+
+    <p>
+      Se você conseguiu executar o projeto, acessar o seu endereço via navegador, e ver uma aba vazia, então tudo está pronto para que possamos criar nosso primeiro endpoint.
+    </p>
+
+    <p>
+      Vamos escrever um de teste, apenas. Modifique o seu <code>Program.cs</code> para que ele fique desta forma:
+    </p>
+
+<pre><code>{`var builder = WebApplication.CreateBuilder(args);
+
+var app = builder.Build();
+
+app.MapGet("/", () =>
+{
+    return "Olá, mundo!";
+});
+
+app.Run();`}</code></pre>
+
+    <p>
+      Note que adicionamos o seguinte trecho de código:
+    </p>
+
+<pre><code>{`app.MapGet("/", () =>
+{
+    return "Olá, mundo!";
+});`}</code></pre>
+
+    <p>
+      <code>app</code> é uma referência a sua aplicação. Neste objeto podemos realizar várias configurações, além de adicionar quais os endpoints nossa API irá reponder. Neste caso, adicionamos um endpoint
+      através do método <code>MapGet(string, Delegate)</code>, que fará com que ele responda ao verbo <code>GET</code> no caminho <code>/</code> (ou seja, a raíz), com uma mensagem simples.
+    </p>
+
+    <p>
+      Acesse a URL da sua aplicação no navegador novamente, como fizemos anteriormente (no meu caso, <code>http://localhost:5000</code>). Você deverá ver a mensagem que você escreveu.
+    </p>
+
+    <div>
+      <img src="{BrowserHelloWorld}" alt="">
+    </div>
+
+    <p>
+      Vamos fazer nosso endpoint ficar um pouco mais inteligente. Copie o seguinte trecho de código e altere o seu endpoint:
+    </p>
+
+<pre><code>{`app.MapGet("/", () =>
+{
+    string[] saudacoes = ["Olá!", "こんにちは", "Привет", "Ողջույն"];
+
+    return saudacoes[Random.Shared.Next(saudacoes.Length)];
+});`}</code></pre>
+
+    <p>
+      Agora, o endpoint irá obter uma mensagem de saudação aleatória a cada vez que você fizer uma nova requisição. Experimente atualizar a página com o endereço da sua aplicação algumas vezes.
+    </p>
+
+    <div>
+      <img src="{BrowserKonnichiwa}" alt="">
+    </div>
+
+    <p>
+      O que fizemos até agora foi criar um <em>endpoint</em> na nossa aplicação utilizando a notação <code>MapGet</code>, que faz parte das APIs de <a href="https://learn.microsoft.com/pt-br/aspnet/core/fundamentals/minimal-apis?view=aspnetcore-9.0" target="_blank">Minimal APIs</a> do dotnet.
+    </p>
+
+    <p>
+      No próximo capítulo, vamos começar a definir os endpoints do escopo que definimos para desenvolver a aplicação da biblioteca.
+    </p>
+  </section>
+
+</section>