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 @@
+ 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. +
+ ++ 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: +
+ +Biblioteca.WebApi/
+ Biblioteca.sln
+ + 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.
+
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 @@ +
+ 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 @@ ++ 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. +
+ + +- 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