diff --git a/material-sistemas-distribuidos/package-lock.json b/material-sistemas-distribuidos/package-lock.json index 44c3e19..51027c4 100644 --- a/material-sistemas-distribuidos/package-lock.json +++ b/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", diff --git a/material-sistemas-distribuidos/package.json b/material-sistemas-distribuidos/package.json index 2236661..bab466a 100644 --- a/material-sistemas-distribuidos/package.json +++ b/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" } } diff --git a/material-sistemas-distribuidos/src/assets/img/26_vsc_csharp_devkit.png b/material-sistemas-distribuidos/src/assets/img/26_vsc_csharp_devkit.png new file mode 100644 index 0000000..467c5df Binary files /dev/null and b/material-sistemas-distribuidos/src/assets/img/26_vsc_csharp_devkit.png differ diff --git a/material-sistemas-distribuidos/src/assets/img/27_vsc_cmd_novo_projeto.png b/material-sistemas-distribuidos/src/assets/img/27_vsc_cmd_novo_projeto.png new file mode 100644 index 0000000..87e0a81 Binary files /dev/null and b/material-sistemas-distribuidos/src/assets/img/27_vsc_cmd_novo_projeto.png differ diff --git a/material-sistemas-distribuidos/src/assets/img/28_vsc_cmd_proj_type.png b/material-sistemas-distribuidos/src/assets/img/28_vsc_cmd_proj_type.png new file mode 100644 index 0000000..d5d30f6 Binary files /dev/null and b/material-sistemas-distribuidos/src/assets/img/28_vsc_cmd_proj_type.png differ diff --git a/material-sistemas-distribuidos/src/assets/img/29_vsc_cmd_proj_name.png b/material-sistemas-distribuidos/src/assets/img/29_vsc_cmd_proj_name.png new file mode 100644 index 0000000..6eda8d2 Binary files /dev/null and b/material-sistemas-distribuidos/src/assets/img/29_vsc_cmd_proj_name.png differ diff --git a/material-sistemas-distribuidos/src/assets/img/30_vsc_cmd_proj_dir.png b/material-sistemas-distribuidos/src/assets/img/30_vsc_cmd_proj_dir.png new file mode 100644 index 0000000..11e74ea Binary files /dev/null and b/material-sistemas-distribuidos/src/assets/img/30_vsc_cmd_proj_dir.png differ diff --git a/material-sistemas-distribuidos/src/assets/img/31_vsc_cmd_proj_confirm.png b/material-sistemas-distribuidos/src/assets/img/31_vsc_cmd_proj_confirm.png new file mode 100644 index 0000000..5936eca Binary files /dev/null and b/material-sistemas-distribuidos/src/assets/img/31_vsc_cmd_proj_confirm.png differ diff --git a/material-sistemas-distribuidos/src/assets/img/32_vsc_cmd_projeto_criado.png b/material-sistemas-distribuidos/src/assets/img/32_vsc_cmd_projeto_criado.png new file mode 100644 index 0000000..97a91f0 Binary files /dev/null and b/material-sistemas-distribuidos/src/assets/img/32_vsc_cmd_projeto_criado.png differ diff --git a/material-sistemas-distribuidos/src/assets/img/33_vsc_cmd_generate_assets_for_debug.png b/material-sistemas-distribuidos/src/assets/img/33_vsc_cmd_generate_assets_for_debug.png new file mode 100644 index 0000000..7afb0ef Binary files /dev/null and b/material-sistemas-distribuidos/src/assets/img/33_vsc_cmd_generate_assets_for_debug.png differ diff --git a/material-sistemas-distribuidos/src/assets/img/34_vsc_debugger_sem_config.png b/material-sistemas-distribuidos/src/assets/img/34_vsc_debugger_sem_config.png new file mode 100644 index 0000000..12986dc Binary files /dev/null and b/material-sistemas-distribuidos/src/assets/img/34_vsc_debugger_sem_config.png differ diff --git a/material-sistemas-distribuidos/src/assets/img/35_vsc_debugger_com_config.png b/material-sistemas-distribuidos/src/assets/img/35_vsc_debugger_com_config.png new file mode 100644 index 0000000..31ccb97 Binary files /dev/null and b/material-sistemas-distribuidos/src/assets/img/35_vsc_debugger_com_config.png differ diff --git a/material-sistemas-distribuidos/src/assets/img/36_vsc_debugger_executando.png b/material-sistemas-distribuidos/src/assets/img/36_vsc_debugger_executando.png new file mode 100644 index 0000000..2bf8847 Binary files /dev/null and b/material-sistemas-distribuidos/src/assets/img/36_vsc_debugger_executando.png differ diff --git a/material-sistemas-distribuidos/src/css/anchor.css b/material-sistemas-distribuidos/src/css/anchor.css index c821b94..ba77d5e 100644 --- a/material-sistemas-distribuidos/src/css/anchor.css +++ b/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; } diff --git a/material-sistemas-distribuidos/src/css/typography.css b/material-sistemas-distribuidos/src/css/typography.css index 8c250e5..382159e 100644 --- a/material-sistemas-distribuidos/src/css/typography.css +++ b/material-sistemas-distribuidos/src/css/typography.css @@ -23,4 +23,8 @@ code { em { font-style: italic; +} + +b { + font-weight: bold; } \ No newline at end of file diff --git a/material-sistemas-distribuidos/src/css/vars.css b/material-sistemas-distribuidos/src/css/vars.css index 974a2d9..7121baa 100644 --- a/material-sistemas-distribuidos/src/css/vars.css +++ b/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-mono: "Monaco", "Menlo"; + --font-serif: "Georgia", serif; + --font-sans: sans-serif; + --font-mono: "Monaco", "Menlo", "Consolas", monospace; --heading1-size: 32px; --heading2-size: 26px; diff --git a/material-sistemas-distribuidos/src/routes/+layout.svelte b/material-sistemas-distribuidos/src/routes/+layout.svelte index 2ee6069..6e5a31e 100644 --- a/material-sistemas-distribuidos/src/routes/+layout.svelte +++ b/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(); diff --git a/material-sistemas-distribuidos/src/routes/+page.svelte b/material-sistemas-distribuidos/src/routes/+page.svelte index 66e31fb..b829d8d 100644 --- a/material-sistemas-distribuidos/src/routes/+page.svelte +++ b/material-sistemas-distribuidos/src/routes/+page.svelte @@ -25,14 +25,18 @@
  1. Introdução
  2. Preparação do ambiente no Windows
  3. -
  4. Preparação do ambiente no Linux
  5. -
  6. Preparação do ambiente no MacOS
  7. +
  8. Breve introdução ao Visual Studio Code
  9. -
  10. Criando o projeto da API
  11. -
  12. O que é uma API, afinal de contas?
  13. +
  14. Projeto de API: Biblioteca
    1. -
    2. Anatomia de uma requisição HTTP
    3. -
    4. A arquitetura REST
    5. +
    6. Criação do projeto
    7. +
    8. Estrutura de arquivos
    9. +
    10. Conectando com o banco de dados
    11. +
    12. Mantendo livros
    13. +
    14. Emprestando livros
    15. +
    16. Sobre o protocolo HTTP
    17. +
    18. A arquitetura REST
diff --git a/material-sistemas-distribuidos/src/routes/criacao_do_projeto/+page.svelte b/material-sistemas-distribuidos/src/routes/criacao_do_projeto/+page.svelte new file mode 100644 index 0000000..c461843 --- /dev/null +++ b/material-sistemas-distribuidos/src/routes/criacao_do_projeto/+page.svelte @@ -0,0 +1,173 @@ + + + + Criação do projeto + + +
+

Criação do projeto

+ + + +

+ Vamos criar o projeto para a API da nossa biblioteca. Na seção Breve introdução ao Visual Studio Code, fizemos isso utilizando o terminal, apenas para testarmos se a instalação do .NET + estava correta. Agora, vamos utilizar a extensão do C# para o VSCode para criar um novo projeto. +

+ +

Criação e configuração do projeto

+ +

+ Assim como fizemos em Breve introdução ao Visual Studio Code, 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 "C#". +

+ +
+ +
+ +

+ Algumas opções aparecerão. Instale a extensão C# DevKit. +

+ +

+ Após instalado, feche a aba de extensões, e, no seu teclado, aperte Ctrl+Shift+p (+Shift+p). + Uma janela deve aparecer na parte superior do editor. Esta janela é um seletor de comandos + do Visual Studio Code, onde você pode acessar as diversas funcionalidades do editor. +

+ +

+ A extensão do C# DevKit adiciona alguns comandos, incluindo um comando para a criação de projetos (tal como fizemos via terminal na seção anterior). Escreva new project para + pesquisar o comando correto, selecione .NET: New Project, e aperte Enter para prosseguir. +

+ +
+ +
+ +

+ Na próxima janela, várias opções de tipos de projeto serão apresentadas. Queremos criar uma api web, portanto, devemos selecionar a opção API Web do ASP.NET Core. +

+ +
+ +
+ +

+ Em seguida, será pedido o nome do projeto. Escreva "Biblioteca", e aperte Enter para prosseguir. +

+ +
+ +
+ +

+ 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 Default directory selecionada e aperte Enter para ir para o próximo passo. +

+ +
+ +
+ +

+ Podemos definir algumas configurações iniciais para o projeto. Não queremos nada diferente do padrão, inicialmente, então deixe a opção Create project selecionada e aperte Enter novamente para criar o projeto. +

+ +
+ +
+ +

+ Agora, observe o explorador de arquivos do VSCode. +

+ +
+ +
+ +

+ Você deve ter a seguinte estrutura de diretórios, se tudo ocorreu corretamente: +

+ + + +

+ Este mesmo processo de criação poderia ter sido realizado no terminal com o seguintes comandos: +

+ +
dotnet new webapi -n Biblioteca
+dotnet new sln -n Biblioteca
+dotnet sln add Biblioteca.WebApi
+ +

+ Para finalizar, vamos configurar o depurador. Abra a aba do depurador na barra lateral. Você deverá ver algo como: +

+ +
+ +
+ +

+ 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 (Ctrl+Shift+p ou +Shift+p), escolha + a opção .NET: Generate Assets for Build and Debug e aperte Enter. +

+ +
+ +
+ +

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

+ +
+ +
+ +

+ Clique no botão de executar o projeto (ou aperte F5). +

+ +
+ +
+ +

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

+ +

+ Nos próximos passos, vamos explorar os arquivos que foram criados pelo .NET dentro de Biblioteca/. Vamos finalizar algumas configurações simples e, finalmente, + vamos começar a escrever código. +

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

em desenvolvimento

\ 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 new file mode 100644 index 0000000..6138331 --- /dev/null +++ b/material-sistemas-distribuidos/src/routes/estrutura_de_arquivos/+page.svelte @@ -0,0 +1,21 @@ +

em desenvolvimento

+ +

+ Estes arquivos foram criados pelos comandos que você colou no terminal. + O primeiro comando cria um projeto do tipo webapi com o nome Biblioteca.WebApi. O segundo comando cria uma solução com o nome Biblioteca. + O terceiro comando adiciona o projeto Biblioteca.WebApi à solução Biblioteca. +

+ +

+ No dotnet, um arquivo de solução é um arquivo com extensão .sln que define uma coleção de projetos. 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. +

+ +

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

+ +

+ +

\ No newline at end of file diff --git a/material-sistemas-distribuidos/src/routes/intro/+page.svelte b/material-sistemas-distribuidos/src/routes/intro/+page.svelte index fe5b587..c627f40 100644 --- a/material-sistemas-distribuidos/src/routes/intro/+page.svelte +++ b/material-sistemas-distribuidos/src/routes/intro/+page.svelte @@ -42,8 +42,8 @@ \ No newline at end of file diff --git a/material-sistemas-distribuidos/src/routes/projeto_de_api/+page.svelte b/material-sistemas-distribuidos/src/routes/projeto_de_api/+page.svelte new file mode 100644 index 0000000..8750173 --- /dev/null +++ b/material-sistemas-distribuidos/src/routes/projeto_de_api/+page.svelte @@ -0,0 +1,33 @@ + + Projeto de API: Biblioteca + + +
+

Projeto de API: Biblioteca

+ + + +

+ Imagine que você foi escolhido para desenvolver um sistema de informação para a biblioteca 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 visualizar, cadastrar, editar + e remover os livros que estão disponíveis, além + de registrar quando um livro foi emprestado para um aluno. Para isso, vamos desenvolver uma API que irá expor endpoints para cada uma destas operações: +

+ + + +

+ Antes de tudo, devemos criar o projeto. Vamos fazer isso no próximo passo. +

+ + +
\ No newline at end of file diff --git a/material-sistemas-distribuidos/src/routes/vscode/+page.svelte b/material-sistemas-distribuidos/src/routes/vscode/+page.svelte index b8bccb4..d07a75e 100644 --- a/material-sistemas-distribuidos/src/routes/vscode/+page.svelte +++ b/material-sistemas-distribuidos/src/routes/vscode/+page.svelte @@ -194,17 +194,21 @@

- Como manda a tradição, a saída apresentará: + A saída apresentará:

Hello, World!

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

+ +

+ Para mais detalhes sobre o funcionamento do VSCode, leia o guia oficial do editor.

\ No newline at end of file