diff --git a/material-sistemas-distribuidos/src/assets/img/43_browser_network.png b/material-sistemas-distribuidos/src/assets/img/43_browser_network.png new file mode 100644 index 0000000..8e57179 Binary files /dev/null and b/material-sistemas-distribuidos/src/assets/img/43_browser_network.png differ diff --git a/material-sistemas-distribuidos/src/css/reset.css b/material-sistemas-distribuidos/src/css/reset.css index f109ad3..8c10bc6 100644 --- a/material-sistemas-distribuidos/src/css/reset.css +++ b/material-sistemas-distribuidos/src/css/reset.css @@ -33,9 +33,9 @@ footer, header, hgroup, menu, nav, section { body { line-height: 1; } -ol, ul { +/* ol, ul { list-style: none; -} +} */ blockquote, q { quotes: none; } diff --git a/material-sistemas-distribuidos/src/css/typography.css b/material-sistemas-distribuidos/src/css/typography.css index 3914bff..2c962a3 100644 --- a/material-sistemas-distribuidos/src/css/typography.css +++ b/material-sistemas-distribuidos/src/css/typography.css @@ -4,7 +4,7 @@ h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); } -p { +p, ol, ul { font-family: var(--font-serif); margin-top: var(--paragraph-spacing); margin-bottom: var(--paragraph-spacing); diff --git a/material-sistemas-distribuidos/src/routes/+page.svelte b/material-sistemas-distribuidos/src/routes/+page.svelte index 597e9ec..f582aba 100644 --- a/material-sistemas-distribuidos/src/routes/+page.svelte +++ b/material-sistemas-distribuidos/src/routes/+page.svelte @@ -31,7 +31,8 @@
  1. Criação do projeto
  2. Estrutura de arquivos
    3. -
  3. Criando e executando endpoints
    4. +
  4. Criando e executando endpoints
    5. +
  5. Definindo os endpoints da Biblioteca
  6. Conectando com o banco de dados
  7. Mantendo livros
  8. Emprestando livros
    9. diff --git a/material-sistemas-distribuidos/src/routes/criacao_do_projeto/+page.svelte b/material-sistemas-distribuidos/src/routes/criacao_do_projeto/+page.svelte index c461843..4fd0452 100644 --- a/material-sistemas-distribuidos/src/routes/criacao_do_projeto/+page.svelte +++ b/material-sistemas-distribuidos/src/routes/criacao_do_projeto/+page.svelte @@ -167,7 +167,7 @@ dotnet sln add Biblioteca.WebApi

    \ No newline at end of file diff --git a/material-sistemas-distribuidos/src/routes/endpoints/+page.svelte b/material-sistemas-distribuidos/src/routes/endpoints/+page.svelte deleted file mode 100644 index f2b7223..0000000 --- a/material-sistemas-distribuidos/src/routes/endpoints/+page.svelte +++ /dev/null @@ -1,153 +0,0 @@ - - -
    -

    Criando e executando endpoints

    - - - -

    - Enfim, vamos escrever nossos primeiros endpoints. -

    - -

    - Durante este capitulo, vamos trabalhar somente em Biblioteca/Program.cs. Nosso objetivo por enquanto é escrever um endpoint customizado, e testar se ele - responde corretamente, da forma como desejamos. -

    - -
    -

    Iniciando o serviço Web

    - -

    - Para começar, abra Biblioteca/Program.cs, e apague todas as linhas deste arquivo. Vamos escrever manualmente todas as linhas necessárias para iniciar a API e configurar um enpdoint de teste. -

    - - 
    {`var builder = WebApplication.CreateBuilder(args);
-
-  var app = builder.Build();
-
-  app.Run();`}
    - -

    - Escreva, estas linhas no seu Program.cs. 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 launchSettings.json). -

    - -
    - -
    - -

    - Tente executar o projeto através do depurador. Você deve se lembrar do arquivo launchSettings.json que vimos no capítulo anterior. Nele é configurado - a porta em que nossa aplicação escutará as requisições no protocolo HTTP, definido em uma configuração semelhante a http://localhost:<numero> (por exemplo, http://localhost:5000). - Este número após o sinal de dois-pontos é a porta que sua aplicação estará escutando. -

    - -

    - Abra uma nova aba no seu navegador de internet, e, na barra de endereço, escreva http://localhost:<porta>, onde <porta> é o número que está definido no seu launchSettings.json (no meu caso, este número é 5000, portanto o endereço que - eu devo digitar é http://localhost:5000. Você pode alterar o seu launchSettings.json 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. -

    - -
    - -
    - -

    - Se você não está executando o projeto, ou escreveu a porta errada, você provavelmente verá uma mensagem no navegador semelhante a esta: -

    - -
    - -
    - -

    - Ou esta, onde digitei uma porta aleatória: -

    - -
    - -
    -
    - -
    -

    Criando o primeiro endpoint

    - -

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

    - -

    - Vamos escrever um de teste, apenas. Modifique o seu Program.cs para que ele fique desta forma: -

    - -
    {`var builder = WebApplication.CreateBuilder(args);
-
-var app = builder.Build();
-
-app.MapGet("/", () =>
-{
-    return "Olá, mundo!";
-});
-
-app.Run();`}
    - -

    - Note que adicionamos o seguinte trecho de código: -

    - -
    {`app.MapGet("/", () =>
-{
-    return "Olá, mundo!";
-});`}
    - -

    - app é 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 MapGet(string, Delegate), que fará com que ele responda ao verbo GET no caminho / (ou seja, a raíz), com uma mensagem simples. -

    - -

    - Acesse a URL da sua aplicação no navegador novamente, como fizemos anteriormente (no meu caso, http://localhost:5000). Você deverá ver a mensagem que você escreveu. -

    - -
    - -
    - -

    - Vamos fazer nosso endpoint ficar um pouco mais inteligente. Copie o seguinte trecho de código e altere o seu endpoint: -

    - -
    {`app.MapGet("/", () =>
-{
-    string[] saudacoes = ["Olá!", "こんにちは", "Привет", "Ողջույն"];
-
-    return saudacoes[Random.Shared.Next(saudacoes.Length)];
-});`}
    - -

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

    - -
    - -
    - -

    - O que fizemos até agora foi criar um endpoint na nossa aplicação utilizando a notação MapGet, que faz parte das APIs de Minimal APIs do dotnet. -

    - -

    - No próximo capítulo, vamos começar a definir os endpoints do escopo que definimos para desenvolver a aplicação da biblioteca. -

    -
    - -
    \ No newline at end of file diff --git a/material-sistemas-distribuidos/src/routes/endpoints_1/+page.svelte b/material-sistemas-distribuidos/src/routes/endpoints_1/+page.svelte new file mode 100644 index 0000000..ef4347a --- /dev/null +++ b/material-sistemas-distribuidos/src/routes/endpoints_1/+page.svelte @@ -0,0 +1,235 @@ + + +
    +

    Criando e executando endpoints

    + + + +

    + Enfim, vamos escrever nossos primeiros endpoints. +

    + +

    + Durante este capitulo, vamos trabalhar somente em Biblioteca/Program.cs. Nosso objetivo por enquanto é escrever um endpoint customizado, e testar se ele + responde corretamente, da forma como desejamos. +

    + +
    +

    Iniciando o serviço Web

    + +

    + Para começar, abra Biblioteca/Program.cs, e apague todas as linhas. Vamos escrever nós mesmos somente as linhas necessárias para iniciar um serviço. +

    + + 
    {`var builder = WebApplication.CreateBuilder(args);
+
+var app = builder.Build();
+
+app.Run();`}
    + +

    + Estas são as chamadas de função essenciais para que a sua aplicação aja como uma API Web - ou seja, para que ela inicie e comece a escutar requisições HTTP em uma porta (definida em launchSettings.json). + Nenhuma outra configuração adicional foi realizada, nem nenhum endpoint foi definido. Sua aplicação apenas inicia e fica escutando na porta correspondente. +

    + +
    + +
    + +

    + Tente executar o projeto através do depurador. Você deve se lembrar do arquivo launchSettings.json que vimos no capítulo anterior. Nele é configurado + a porta em que nossa aplicação escutará as requisições, definido em uma configuração semelhante a http://localhost:<numero> (por exemplo, http://localhost:5000). + Este número após o sinal de dois-pontos é a porta que sua aplicação estará escutando. +

    + +

    + Abra uma nova aba no seu navegador de internet, e, na barra de endereço, escreva http://localhost:<porta>, onde <porta> é o número que está definido no seu launchSettings.json (no meu caso, este número é 5000, portanto o endereço que + eu devo digitar é http://localhost:5000. Você pode alterar o seu launchSettings.json 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. +

    + +
    + +
    + +

    + Se você não está executando o projeto, ou escreveu a porta errada, você provavelmente verá uma mensagem no navegador semelhante a esta: +

    + +
    + +
    + +

    + Ou esta, onde digitei uma porta aleatória: +

    + +
    + +
    +
    + +
    +

    Criando o primeiro endpoint

    + +

    + Se você conseguiu executar o projeto, acessar o seu endereço via navegador, e ver uma aba vazia sem nenhuma mensagem de erro, então tudo está pronto para que possamos criar nosso primeiro endpoint. +

    + +

    + Vamos escrever um de teste, apenas. Modifique o seu Program.cs para que ele fique desta forma: +

    + +
    {`var builder = WebApplication.CreateBuilder(args);
+
+var app = builder.Build();
+
+app.MapGet("/", () =>
+{
+    return "Olá, mundo!";
+});
+
+app.Run();`}
    + +

    + Note que adicionamos o seguinte trecho de código: +

    + +
    {`app.MapGet("/", () =>
+{
+    return "Olá, mundo!";
+});`}
    + +

    + app é uma instância de WebApplication e é neste objeto + que podemos configurar nossa API, além de adicionar quais os endpoints ela irá reponder. Neste caso, adicionamos um endpoint + através do método MapGet(string, Delegate), que fará com que ela responda ao verbo GET no caminho / (ou seja, a raíz), com uma mensagem simples. +

    + +

    + Acesse a URL da sua aplicação no navegador novamente, como fizemos anteriormente (no meu caso, http://localhost:5000). Você deverá ver a mensagem que você escreveu. +

    + +
    + +
    + +

    + Vamos fazer nosso endpoint ficar um pouco mais inteligente e responder com mensagens aleatórias. Altere o seu endpoint para que ele fique desta forma: +

    + +
    {`app.MapGet("/", () =>
+{
+    string[] saudacoes = ["Olá!", "こんにちは", "Привет", "Ողջույն"];
+
+    return saudacoes[Random.Shared.Next(saudacoes.Length)];
+});`}
    + +

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

    + +
    + +
    +
    + +
    +

    Estrutura de uma requisição HTTP

    + +

    + Quando você acessa essa URL no seu navegador (no caso deste exemplo, http://localhost:5000), uma mensagem HTTP é preparada e enviada para o endereço especificado. +

    + +

    + HTTP é um acrônimo para Hypertext Transfer Protocol, que é um protocolo para troca de mensagens entre + nós em uma rede em uma arquitetura cliente-servidor. +

    + +

    + Este protocolo define um padrão para que um cliente tenha acesso a um recurso disponibilizado por um servidor. + Por exemplo, quando você acessa uma página Web, seu navegador, o cliente, solicita a página que você deseja ver para o servidor da aplicação. +

    + +

    + Esta solicitação ocorre através de uma troca de mensagens entre o cliente e o servidor. O cliente envia uma mensagem de solicitação, e o servidor devolve uma mensagem de resposta. + Estas mensagem possuem uma estrutura composta por um + verbo, + um identificador de recurso, + cabeçalhos, e, opcionalmente, um conteúdo. + Além disso, toda resposta a uma mensagem enviada por um cliente possui também um código de status. +

    + +

    + O identificador do recurso (ou URI) é o nome que identifica o recurso que o cliente deseja acessar. Em uma URL de um site, a URI é todo o conteúdo que aparece depois do primeiro /. Por exemplo, na url https://en.wikipedia.org/wiki/Plan_9_from_Bell_Labs, + a parte que corresponde à URI é /wiki/Plan_9_from_Bell_Labs. Se não há nada após a barra, então a URI é apenas /. +

    + +

    + O verbo (ou método) determina a ação que o cliente deseja realizar sobre o recurso. Por exemplo, GET, por padrão, significa + que o cliente deseja ler aquele recurso; já o POST, por sua vez, significa que o cliente deseja escrever naquele recurso. +

    + +

    + Imagine que você está realizando um cadastro em algum site. Você preenche os seus dados em um formulário e os envia. O site completa o seu cadastro e logo em seguida mostra a página do seu perfil. + Neste fluxo, seu navegador precisou: +

    + +
      +
    • Enviar uma requisição para obter a página de cadastro (GET /cadastro.html);
      • +
    • Enviar os dados que você preencheu no formulário (POST /cadastro.html);
      • +
    • Mostrar a página do seu perfil (GET /meu_perfil.html).
      • +
    + +

    + Todas as operações de leitura foram realizadas utilizando o verbo GET. Quando o seu navegador solicitou as páginas, ele enviou uma requisição GET + que foi respondida pelo servidor com outra mensagem HTTP, onde o conteúdo da mensagem era a página solicitada. + Já a operação de escrita (ou seja, a de cadastro) utilizou o verbo POST, onde a mensagem que o seu navegador enviou tinha como conteúdo os dados que você preencheu. O servidor recebe esses dados e os salva em algum lugar. + Enquanto a URI identifica qual recurso deve ser acessado, o verbo define a ação que se deseja realizar sobre o recurso. +

    + +

    + Os cabeçalhos são um conjunto de chaves e valores com dados adicionais sobre a mensagem, como, por exemplo, o tamanho da mensagem, a sua codificação, o tempo que o cliente pode armazenar + o conteúdo em cache, entre outros. Existem inúmeros headers padrão, e clientes podem enviar headers específicos da sua aplicação. +

    + +

    + O código de status devolvido em uma resposta a um cliente é um valor que + indica para o cliente o estado da solicitação. Por exemplo, acessar um recurso que não existe gera uma resposta com status 404 Not Found. +

    + +

    + Agora sabemos que, quando acessamos a url da nossa aplicação no servidor, o navegador irá realizar uma requisição GET /. Como configuramos nossa aplicação para responder + a um GET para a uri / (através do app.MapGet("/", ...)) com uma mensagem, esta mensagem é devolvida ao navegador, que a exibe. +

    + +

    + Todos os navegadores recentes possuem ferramentas de desenvolvedor onde você pode observar a atividade de rede (ou seja, as requisições que foram ou estão sendo feitas). Tente descobrir + como você pode abrir estas ferramentas, e observe a atividade do navegador quando você acessa a sua aplicação. +

    + +
    + +
    + +

    + No próximo capítulo, vamos começar a definir os endpoints do escopo que definimos para desenvolver a aplicação da biblioteca. +

    + + +
    + +
    \ No newline at end of file diff --git a/material-sistemas-distribuidos/src/routes/endpoints_2/+page.svelte b/material-sistemas-distribuidos/src/routes/endpoints_2/+page.svelte new file mode 100644 index 0000000..1f7108a --- /dev/null +++ b/material-sistemas-distribuidos/src/routes/endpoints_2/+page.svelte @@ -0,0 +1,34 @@ + + +
    +

    Definindo os endpoints da Biblioteca

    + + + +

    + Como definimos anteriormente, o escopo do nosso projeto determina que nós devemos fazer um sistema onde seja possível: +

    + + + +

    + Para tanto, devemos criar, então, os endpoints necessários para que o nosso sistema seja capaz de realizar estas ações. +

    + +
    +

    Verbos, URIs e REST

    + +

    + No capítulo anterior, criamos um endpoint simples que responde à requisições HTTP +

    +
    + +
    \ No newline at end of file diff --git a/material-sistemas-distribuidos/src/routes/estrutura_de_arquivos/+page.svelte b/material-sistemas-distribuidos/src/routes/estrutura_de_arquivos/+page.svelte index c8def8b..ca7ace3 100644 --- a/material-sistemas-distribuidos/src/routes/estrutura_de_arquivos/+page.svelte +++ b/material-sistemas-distribuidos/src/routes/estrutura_de_arquivos/+page.svelte @@ -224,6 +224,11 @@ app.Run(); O conteúdo que foi gerado automaticamente na criação do projeto contém uma configuração inicial de um endpoint de exemplo. Na próxima seção, vamos começar a escrever código para criamos os endpoints para o escopo que definimos anteriormente.

    + +