1 00:00:01,170 --> 00:00:04,190 ‫Vamos começar configurando nosso mecanismo de modelagem 2 00:00:04,190 --> 00:00:06,480 ‫no Express, o que nos 3 00:00:06,480 --> 00:00:09,830 ‫permitirá renderizar sites usando modelos simples, como 4 00:00:09,830 --> 00:00:11,333 ‫falamos antes. 5 00:00:12,660 --> 00:00:14,520 ‫Como você já 6 00:00:14,520 --> 00:00:16,850 ‫sabe, nesta parte do curso 7 00:00:16,850 --> 00:00:21,210 ‫é hora de realmente enviar um site final renderizado ao cliente 8 00:00:21,210 --> 00:00:23,200 ‫contendo, é claro, todos os 9 00:00:23,200 --> 00:00:25,590 ‫dados com os quais estivemos trabalhando 10 00:00:25,590 --> 00:00:28,770 ‫até este ponto, como tours, usuários e comentários. 11 00:00:28,770 --> 00:00:32,970 ‫Agora, como realmente construímos ou renderizamos esses sites? 12 00:00:32,970 --> 00:00:35,920 ‫Bem, usamos o que é chamado de motor de 13 00:00:35,920 --> 00:00:38,060 ‫template que nos permite criar 14 00:00:38,060 --> 00:00:41,610 ‫um template e então preencher facilmente esse template com nossos dados. 15 00:00:41,610 --> 00:00:43,580 ‫E o mecanismo de template 16 00:00:43,580 --> 00:00:46,210 ‫que usaremos neste curso é chamado de pug. 17 00:00:46,210 --> 00:00:48,700 ‫Existem alguns outros motores de template 18 00:00:48,700 --> 00:00:52,800 ‫como guidão ou EGS para pessoas que não gostam de pug, porque 19 00:00:52,800 --> 00:00:56,010 ‫eu sei que existem algumas opiniões fortes sobre o 20 00:00:56,010 --> 00:00:59,160 ‫pug, mas eu ainda diria que o pug é 21 00:00:59,160 --> 00:01:03,190 ‫na verdade o motor de template mais comumente usado com o Express. 22 00:01:03,190 --> 00:01:05,650 ‫Então, vamos agora, neste vídeo, configurar o 23 00:01:05,650 --> 00:01:08,453 ‫pug e renderizar nossa primeira página da web usando-o. 24 00:01:09,310 --> 00:01:11,920 ‫A primeira etapa é dizer 25 00:01:11,920 --> 00:01:14,510 ‫ao Express qual mecanismo de 26 00:01:14,510 --> 00:01:16,970 ‫modelo usaremos, e fazemos isso 27 00:01:16,970 --> 00:01:18,920 ‫dizendo logo no 28 00:01:19,910 --> 00:01:24,050 ‫início do aplicativo, app. definido, então basicamente isso é 29 00:01:24,050 --> 00:01:29,050 ‫como uma configuração para o mecanismo de visualização e, em seguida, configuramos para pug. 30 00:01:32,600 --> 00:01:33,910 ‫E é isso. 31 00:01:33,910 --> 00:01:35,850 ‫Portanto, o Express suporta 32 00:01:35,850 --> 00:01:38,320 ‫automaticamente os motores mais comuns prontos para 33 00:01:38,320 --> 00:01:40,970 ‫uso e, claro, o pug é um deles. 34 00:01:40,970 --> 00:01:43,470 ‫Na verdade, nem mesmo precisamos instalar o pug, e 35 00:01:43,470 --> 00:01:45,940 ‫também não precisamos solicitá-lo em lugar nenhum. 36 00:01:45,940 --> 00:01:47,660 ‫Tudo isso acontece 37 00:01:47,660 --> 00:01:49,870 ‫nos bastidores internamente no Express. 38 00:01:49,870 --> 00:01:51,910 ‫Portanto, definimos nosso mecanismo de 39 00:01:51,910 --> 00:01:54,450 ‫visualização, agora também precisamos definir onde essas visualizações 40 00:01:54,450 --> 00:01:57,013 ‫estão realmente localizadas em nosso sistema de arquivos. 41 00:01:57,916 --> 00:02:02,230 ‫Portanto, nossos modelos de pug são na verdade chamados de visualizações no Express. 42 00:02:02,230 --> 00:02:04,960 ‫Isso porque esses modelos são, na 43 00:02:04,960 --> 00:02:08,090 ‫verdade, as visualizações na arquitetura do controlador de visualização 44 00:02:08,090 --> 00:02:11,720 ‫de modelo que temos usado neste curso até este ponto. 45 00:02:11,720 --> 00:02:13,980 ‫Como você sabe, já temos os controladores e 46 00:02:13,980 --> 00:02:15,273 ‫as pastas de modelos. 47 00:02:16,180 --> 00:02:17,650 ‫Vamos fechar isso. 48 00:02:17,650 --> 00:02:20,703 ‫E agora é hora de realmente criar a pasta de visualizações. 49 00:02:25,210 --> 00:02:27,590 ‫Com isso temos os três 50 00:02:27,590 --> 00:02:29,583 ‫componentes da arquitetura MVC. 51 00:02:30,900 --> 00:02:32,860 ‫Para definir agora em qual pasta nossas 52 00:02:32,860 --> 00:02:35,070 ‫visualizações estão realmente localizadas, tudo o que precisamos 53 00:02:35,070 --> 00:02:38,943 ‫fazer novamente é dizer app. definido, e desta vez 54 00:02:40,660 --> 00:02:44,763 ‫é a configuração de exibição, ou realmente exibições, e 55 00:02:46,310 --> 00:02:48,660 ‫aqui o nome do caminho. 56 00:02:48,660 --> 00:02:52,500 ‫Bem, aqui poderíamos simplesmente colocar algo assim, 57 00:02:52,500 --> 00:02:57,380 ‫então / views, mas isso não é o ideal. 58 00:02:57,380 --> 00:03:00,040 ‫Como você já sabe, o caminho que fornecemos 59 00:03:00,040 --> 00:03:02,330 ‫aqui é sempre relativo ao diretório 60 00:03:02,330 --> 00:03:05,240 ‫de onde iniciamos o aplicativo Note, e que geralmente 61 00:03:05,240 --> 00:03:07,760 ‫é a pasta raiz do projeto, mas 62 00:03:07,760 --> 00:03:09,180 ‫pode não ser. 63 00:03:09,180 --> 00:03:11,170 ‫Portanto, não devemos usar ponto 64 00:03:11,170 --> 00:03:14,410 ‫aqui, mas devemos usar a variável de nome de diretório. 65 00:03:14,410 --> 00:03:17,550 ‫Então vamos fazer isso, e junto com um 66 00:03:17,550 --> 00:03:22,150 ‫bom truque que podemos usar com o Note, que é usar o módulo path. 67 00:03:22,150 --> 00:03:26,340 ‫Path é um módulo de nota embutido, portanto, um módulo principal, que 68 00:03:26,340 --> 00:03:29,593 ‫é usado para manipular nomes de caminho, basicamente. 69 00:03:32,130 --> 00:03:35,860 ‫Portanto, requer o caminho, então é claro que não 70 00:03:35,860 --> 00:03:37,650 ‫precisamos instalar nada. 71 00:03:37,650 --> 00:03:40,143 ‫É apenas um módulo integrado nativo. 72 00:03:41,320 --> 00:03:44,333 ‫O que podemos fazer agora é o caminho. ingresse e, 73 00:03:46,340 --> 00:03:51,340 ‫em seguida, o nome do diretório e, em seguida, exibições. 74 00:03:52,930 --> 00:03:55,790 ‫Isso irá então, basicamente, nos bastidores, 75 00:03:55,790 --> 00:04:00,403 ‫criar um caminho unindo o nome / visualizações do diretório. 76 00:04:01,640 --> 00:04:03,520 ‫Agora pode parecer um pouco 77 00:04:03,520 --> 00:04:06,620 ‫exagero usar esse caminho. função join aqui, 78 00:04:06,620 --> 00:04:08,880 ‫mas nem sempre sabemos se um 79 00:04:08,880 --> 00:04:13,120 ‫caminho que recebemos de algum lugar já tem uma barra ou não. 80 00:04:13,120 --> 00:04:16,290 ‫Portanto, você verá que essa função aqui é usada o 81 00:04:16,290 --> 00:04:19,040 ‫tempo todo para evitar esse tipo de bug. 82 00:04:19,040 --> 00:04:21,440 ‫Pois desta forma nem precisamos pensar em 83 00:04:21,440 --> 00:04:23,380 ‫nenhuma barra ou não, 84 00:04:23,380 --> 00:04:26,463 ‫pois o Note criará automaticamente um caminho correto. 85 00:04:28,140 --> 00:04:30,140 ‫Na verdade, também devemos 86 00:04:30,140 --> 00:04:33,343 ‫usar isso aqui, onde criamos este middleware. 87 00:04:34,290 --> 00:04:37,623 ‫Aqui, devemos realmente usar exatamente a mesma coisa aqui. 88 00:04:39,070 --> 00:04:40,533 ‫Então, vamos apenas duplicar isso. 89 00:04:43,540 --> 00:04:45,703 ‫Então, junte-se ao caminho e publique. 90 00:04:54,470 --> 00:04:57,510 ‫Na verdade, vamos colocar este aqui no 91 00:04:57,510 --> 00:05:01,373 ‫topo, porque ele meio que pertence a estes aqui. 92 00:05:02,330 --> 00:05:04,580 ‫Ainda é um middleware, mas como você verá 93 00:05:04,580 --> 00:05:07,020 ‫em um dos próximos vídeos, ele funciona em 94 00:05:07,020 --> 00:05:09,053 ‫conjunto com um mecanismo de visualizações. 95 00:05:10,520 --> 00:05:14,050 ‫Mas agora configuramos nosso motor de pug. 96 00:05:14,050 --> 00:05:17,400 ‫Agora é hora de criar nosso primeiro modelo. 97 00:05:17,400 --> 00:05:19,890 ‫Então, aqui vamos criar nosso primeiro arquivo 98 00:05:21,660 --> 00:05:24,970 ‫pug chamado base. pug, e como você 99 00:05:24,970 --> 00:05:29,453 ‫verá, o código vs tem seu próprio ícone para este tipo de arquivo. 100 00:05:30,919 --> 00:05:32,950 ‫Tudo o que realmente quero fazer 101 00:05:32,950 --> 00:05:36,220 ‫aqui por enquanto é criar um elemento h1, então um cabeçalho 102 00:05:36,220 --> 00:05:38,660 ‫principal simplesmente com o nome de algum passeio, 103 00:05:38,660 --> 00:05:41,720 ‫e a maneira que funciona com o pug é exatamente assim. 104 00:05:41,720 --> 00:05:45,170 ‫Portanto, h1 e, em seguida, o conteúdo do elemento. 105 00:05:45,170 --> 00:05:49,030 ‫Digamos The Park Camper. 106 00:05:49,030 --> 00:05:50,520 ‫E é isso na verdade! 107 00:05:50,520 --> 00:05:54,730 ‫Isso se traduzirá aqui, h1 108 00:05:54,730 --> 00:05:59,730 ‫The Park Camper, e feche isso. 109 00:06:04,730 --> 00:06:07,680 ‫Então, em html teríamos que escrever isso, mas 110 00:06:07,680 --> 00:06:10,250 ‫a sintaxe do pug torna muito mais 111 00:06:10,250 --> 00:06:12,193 ‫fácil escrever html assim. 112 00:06:13,470 --> 00:06:14,670 ‫É claro que 113 00:06:14,670 --> 00:06:16,880 ‫também nos permitirá colocar todos os tipos de 114 00:06:16,880 --> 00:06:19,780 ‫variáveis aqui, para que possamos realmente injetar nossos dados nesses 115 00:06:19,780 --> 00:06:21,650 ‫modelos, mas, por enquanto, estou realmente 116 00:06:21,650 --> 00:06:23,853 ‫interessado em disponibilizar algo para o navegador. 117 00:06:25,240 --> 00:06:27,570 ‫Muito mais sobre como o pug realmente funciona 118 00:06:27,570 --> 00:06:29,220 ‫nas próximas duas palestras. 119 00:06:30,870 --> 00:06:33,400 ‫Por enquanto, temos nosso modelo básico aqui e mantenha 120 00:06:33,400 --> 00:06:34,793 ‫esse nome em mente. 121 00:06:37,225 --> 00:06:40,680 ‫Agora podemos criar uma nova rota a partir 122 00:06:40,680 --> 00:06:43,383 ‫da qual acessaremos esse modelo. 123 00:06:45,260 --> 00:06:48,893 ‫Então, vamos realmente fazer isso aqui, antes da rota da API. 124 00:06:51,160 --> 00:06:56,160 ‫Então, app. get, que para renderizar páginas em um 125 00:06:56,680 --> 00:06:59,060 ‫navegador geralmente é sempre aquele que 126 00:06:59,060 --> 00:07:02,990 ‫usamos, e por isso especifica o url aqui, então a rota, 127 00:07:02,990 --> 00:07:05,763 ‫que é simplesmente a raiz do nosso site. 128 00:07:07,060 --> 00:07:10,283 ‫Então, assim como antes, é claro que precisamos de 129 00:07:11,780 --> 00:07:14,363 ‫uma função de manipulador, portanto, solicitação, resposta 130 00:07:17,140 --> 00:07:19,150 ‫e agora para renderizar 131 00:07:19,150 --> 00:07:22,210 ‫nosso modelo exatamente como antes de usarmos o 132 00:07:22,210 --> 00:07:27,210 ‫objeto de resposta, ainda definimos o status como 200 neste caso para ok. 133 00:07:28,100 --> 00:07:31,830 ‫Mas então, em vez de usar json, assim, 134 00:07:31,830 --> 00:07:34,250 ‫como sempre usamos até agora, 135 00:07:34,250 --> 00:07:37,133 ‫é hora de usar o render. 136 00:07:38,015 --> 00:07:40,230 ‫Então render irá renderizar o 137 00:07:40,230 --> 00:07:42,340 ‫template com o nome 138 00:07:42,340 --> 00:07:44,963 ‫que passamos, e neste caso, base. 139 00:07:46,640 --> 00:07:49,910 ‫Nem precisamos especificar a extensão do pug porque 140 00:07:49,910 --> 00:07:52,070 ‫o Express saberá automaticamente que 141 00:07:52,070 --> 00:07:54,490 ‫este é o arquivo que 142 00:07:54,490 --> 00:07:56,920 ‫estamos procurando e, claro, irá procurar 143 00:07:56,920 --> 00:07:59,060 ‫por esse arquivo 144 00:07:59,060 --> 00:08:03,600 ‫dentro da pasta que foi especificada no início, então isso 1. 145 00:08:03,600 --> 00:08:05,390 ‫Ele irá para a pasta de 146 00:08:05,390 --> 00:08:08,303 ‫visualizações e, lá, procure o modelo com o nome base. 147 00:08:09,920 --> 00:08:12,840 ‫Em seguida, ele pegará esse modelo e o 148 00:08:12,840 --> 00:08:16,430 ‫renderizará, e basicamente o enviará como uma resposta ao navegador. 149 00:08:16,430 --> 00:08:18,563 ‫Ótimo, então vamos testar isso agora. 150 00:08:22,190 --> 00:08:23,850 ‫Então, nosso servidor ainda 151 00:08:23,850 --> 00:08:27,223 ‫está rodando na porta 3000 do host local, eu acredito. 152 00:08:32,170 --> 00:08:34,970 ‫E isso nos dá esse 153 00:08:34,970 --> 00:08:37,790 ‫erro, não é possível encontrar o módulo 154 00:08:37,790 --> 00:08:41,323 ‫pug e, portanto, realmente precisamos instalar o módulo pug. 155 00:08:42,845 --> 00:08:45,250 ‫Então, eu disse antes que 156 00:08:45,250 --> 00:08:47,723 ‫não, mas na verdade precisamos fazer isso. 157 00:08:49,220 --> 00:08:52,210 ‫O Express ainda irá carregá-lo nos bastidores automaticamente, 158 00:08:52,210 --> 00:08:54,890 ‫mas não vem com todos esses mecanismos 159 00:08:54,890 --> 00:08:56,553 ‫de modelo instalados imediatamente. 160 00:08:57,460 --> 00:08:59,753 ‫Então npm instale o pug. 161 00:09:06,063 --> 00:09:08,063 ‫E lá vamos nós, então 162 00:09:09,220 --> 00:09:11,620 ‫vamos tentar de novo, e agora 163 00:09:11,620 --> 00:09:14,310 ‫de fato pegamos o campista do parque. 164 00:09:14,310 --> 00:09:17,610 ‫Esse é o nosso elemento h1 que 165 00:09:17,610 --> 00:09:22,610 ‫acabamos de criar na base. arquivo pug, e se agora 166 00:09:22,830 --> 00:09:26,750 ‫o inspecionarmos, você verá que é um elemento h1 simples. 167 00:09:26,750 --> 00:09:28,210 ‫É claro que não 168 00:09:28,210 --> 00:09:31,160 ‫há nenhum estilo e nenhum CSS neste ponto, 169 00:09:31,160 --> 00:09:32,530 ‫mas cuidaremos 170 00:09:32,530 --> 00:09:34,290 ‫disso nas próximas aulas. 171 00:09:34,290 --> 00:09:36,180 ‫Por enquanto, o que importa aqui 172 00:09:36,180 --> 00:09:40,070 ‫é que conforme acessamos nossa raiz, roteamos aqui em nosso host, então ter 173 00:09:40,070 --> 00:09:42,883 ‫isso é de fato o mesmo que ter isso. 174 00:09:44,560 --> 00:09:46,810 ‫Ao acessar essa rota, agora temos 175 00:09:46,810 --> 00:09:48,900 ‫acesso a um site renderizado 176 00:09:48,900 --> 00:09:53,320 ‫dinamicamente com base em nossa base. modelo de pug, ótimo. 177 00:09:53,320 --> 00:09:56,150 ‫Essa é a primeira etapa de como configurar o 178 00:09:56,150 --> 00:09:57,670 ‫pug e, nas próximas 179 00:09:57,670 --> 00:10:00,570 ‫duas palestras, você aprenderá a realmente usar esse mecanismo de 180 00:10:00,570 --> 00:10:02,663 ‫template para construir sites incríveis e dinâmicos.