Bem, volte neste vídeo, vamos começar no aplicativo de campo de Yelp para o qual vamos
trabalhar para o resto deste curso.
Começamos por começar a configuração básica.
Começando o aplicativo expresso e tendo nossas primeiras rotas e modelos.
Mas antes de falar sobre isso, eu só quero explicar o fluxo de trabalho aqui e
como isso funcionará, pois adicionamos continuamente recursos diferentes.
Quero que você consiga ver o código em qualquer momento, não quero que você veja apenas a solução final.
Então, o que eu vou fazer é trabalhar em diferentes pastas.
Então eu tenho um diretório de acampamento yelp e, em vez do campo de Yelp, vou adicionar versões diferentes.
Então você não precisa fazer isso.
Você poderá adicionar continuamente a uma versão você mesmo, se quiser acompanhar e
fazer versões diferentes.
Sempre vou indicar qual a versão em que estamos, mas o objetivo é que, se você quiser que olhe
para trás o que adicionei entre a versão 2 e a versão 3, você poderia abrir os diretórios da versão 2 e da
versão 3 e compará-los.
OK, agora que está fora do caminho, vamos começar aqui.
O que nós vamos fazer é configurar o aplicativo básico irá instalar o Express e cada Sim, nós vamos começar
o diretório de visualizações e depois adicionaremos duas rotas diferentes.
Então, vamos ter uma página inicial, basicamente, como uma bem-vindo ao campo de Yelp.
Aqui está um pouco sobre o que fazemos.
Aqui está um botão de registro.
Aqui está um link de contato que na verdade não funcionará ainda.
E então, a partir daí, vamos criar a página de campgrounds que será a página principal do nosso aplicativo que listará
todos os campgrounds em nosso banco de dados e ainda não temos um banco de dados.
Então, vai ser uma série de campground, assim como fizemos no último vídeo com os amigos onde tínhamos
uma série de amigos.
Muito em breve, estaremos migrando para um novo banco de dados por enquanto, um acampamento só vai
ter duas informações diferentes.
No final do curso, os acampamentos terão de 10 a 15 peças diferentes, mas, por enquanto, é apenas
um nome como o riacho de salmão ou o ponto de Dewey, seja qual for o nome do nosso acampamento e
depois teremos uma imagem que podemos exibir e a imagem será apenas lú.
Então vamos continuar.
Vou começar por executar o NPM nele e então vamos entrar e entrar novamente.
Nós chamaremos isso da câmera v1.
Eu vou fazer o apt, como meu ponto de entrada.
E nós vamos lá.
Autor e pressione enter.
Mais uma vez.
ESTÁ BEM.
Agora vamos executar a instalação do NPM Express e sim.
Dash dash save.
Ainda não mostrei isso, mas esta é uma maneira muito mais fácil se você
quiser instalar vários pacotes de uma só vez, basta separá-los por um espaço.
E se você olhar para o pacote Jason, você pode ver que tem SJS e expressar.
Então, agora vamos criar o aplicativo.
Sim, abra isso e dentro daqui adicione a nossa importação básica expressa, que você deveria ser bastante
confortável, agora exige Express.
executada e, em seguida, irá pular para baixo e fazer a opt out ouvir, que você também deve estar bastante familiarizado com o processo agora.
E, em seguida, a variável do aplicativo é igual a função expressa sendo
O processo de porta Ian VI que o EMV IP e o retorno de
chamada e, aqui, vou fazer um registro consular que diz que o campo de Yelp foi iniciado.
Vamos fazer o servidor do acampamento assim e salvar.
E agora vamos voltar e começar adicionando nossa página de destino.
E, como a maioria das aplicações, a página de destino está no caminho certo.
salvaremos e então vamos começar O servidor assegura-se de
que o servidor do acampamento tenha começado e depois voltem e atualizemos nosso caminho de rota.
Então, vamos adicionar um aplicativo que começará o flash e nós começaremos com apenas um envio do redstart para garantir que as coisas funcionem
bem e nós simplesmente enviaremos esta será a página de destino em breve e
ESTÁ BEM.
E nós recebemos a resposta que é tudo o que estamos procurando.
Agora vamos em frente e configuremos nossos modelos, então precisamos fazer um diretório de notícias que crie
visualizações de diretório e criaremos um modelo chamado de desembarque que cada um de nós dentro do diretório de visualizações desembarque.
Sim, vamos lá.
E então vamos abrir esse recurso de barra-ônibus e nós vamos colocar uma marcação muito simples aqui.
Landing Page e depois é feito aqui podemos colocar um parágrafo.
Bem-vindo ao acampamento Oprah.
E, claro, isso tudo será mudado e será designado de forma muito diferente até o final do curso.
Mas, por enquanto, só queremos ter certeza de que as coisas estão funcionando.
Então vamos voltar para a APT.
Sim.
E a primeira coisa que faremos é mudar isso, de modo que seja um pouso de renderização de repouso e deixaremos o
ponto.
Sim.
E para fazer isso, preciso adicionar no mecanismo de exibição do conjunto de aplicativos para ser J. S. E então não precisamos escrever.
E. J. como aqui e salvaremos o servidor novamente.
James atualiza e nós recebemos nosso modelo de página de destino.
Ótimo.
Em seguida, vamos trabalhar na rota do acampamento.
Então, vamos ter um aplicativo para obter e
o seu auroral deve ser acampamentos de barracão e isso deve mostrar todos os campgrounds que temos que agora não temos nada.
Mas, em breve, pediremos e responderemos como esta, salvar.
E então precisamos definir o conjunto de campgrounds que lembra que só será uma matriz temporariamente.
A próxima grande mudança que você vai fazer é adicionar um banco de dados e ter nossos campgrounds salvos no
banco de dados agora é uma matriz e cada acampamento tem um nome e uma imagem.
Então, vai ficar assim.
Ou temos uma matriz e, em seguida, cada item na matriz é um objeto.
E cada um tem um nome e então digamos que o nome é Salmon Creek, em algum lugar
eu fui acampar recentemente e, em seguida, a imagem e então será uma URL de uma imagem como a HTP seja qual for a imagem GWW dotcom.
Aqui vamos nós.
E então teremos uma série destes.
Então, podemos ter 10 campgrounds diferentes 100 no final do curso.
E cada um deles tem um nome e uma imagem e,
eventualmente, eles terão coisas como Latitude e Longitude da cidade e
capacidade de endereço do estado sazonalidade todos esses atributos diferentes, mas estamos começando simples nome e imagem.
Vamos voltar para Apter Sim.
é igual a uma matriz.
E o que vamos fazer é encontrar essa matriz e podemos começar apenas fazendo isso aqui até agora, chamamos de campgrounds,
E, em seguida, dentro da matriz e
apenas formatar isso um pouco melhor à medida que entramos na matriz, teremos alguns objetos iniciantes.
E o primeiro terá o nome e irei com o Semon.
Você pode simplesmente fazer qualquer coisa e terá imagem e vou voltar e preencher as imagens.
E, em seguida, o próximo fará isso com outro
site, vamos chamá-lo para a colina de Granites e, em seguida, mais uma patrulha chamar cabras de montanha peito.
Tudo bem.
Então, três locais de acampamento três nomes totalmente ficcionais e para imagens.
Na verdade, vou usar algumas fotos comuns criativas para que eu não corra para nenhum problema.
Estes não vão corresponder a nenhum dos acampamentos que
eu realmente visitei, mas vou selecionar algumas imagens aqui.
Vamos com este para começar.
Então eu vou copiar a imagem que você ou eu voltarei aqui e isso será descanso de cabras montanhosas.
Por que não.
E então vamos voltar novamente e eu vou pegar esse aqui.
Copie-o para RL e este será o Salmon Creek.
E então precisamos de mais um e eu vou pegar esse.
Claro que isso não é realmente um acampamento, mas isso não está além do ponto aqui.
Eu encorajo você a usar nomes reais de campismo em imagens reais do acampamento se você se importar.
Caso contrário, se você odeia acampar, algo que pensei em eu me
preocupei com isso, isso poderia alienar algumas pessoas, mas se você
odiar o acampar, acho que você pode facilmente mudar esse aplicativo para outra coisa.
e variáveis ​​diferentes que temos.
Uma vez que terminamos, você poderia transformar em um aplicativo de eventos uma aplicação de festa, um site de revisão de restaurantes, qualquer coisa assim, mas eu recomendo
que você aguarde até o final do Curso para fazer isso para que você não se confunda com nomeações
Então, acampamento Hoje, por agora, acampamentos
falsos e vai economizar, certifique-se de adicionar ou vírgulas entre os diferentes elementos da matriz.
Lá, nós vamos e vamos começar por
renderizar um modelo de renderização do redstart e será chamado de campgrounds e não vamos passar os dados até agora.
Nós apenas vamos ter certeza de que o modelo está funcionando corretamente.
Agora precisamos parar o servidor tocar um novo arquivo exibe barramentos de campground ups que E. J. abriremos isso.
nós e então
É assim e aqui vamos adicionar um H1.
Esta é a página do acampamento e salve e
vamos nos certificar de que vemos essa página quando começamos o servidor, podemos atualizar e vamos acampar os acampamentos e nós conseguimos.
Esta é a página dos campgrounds.
E enquanto estivermos aqui, seria bom adicionar alguns piscar de olhos.
e precisa ir para o modelo de empréstimo e
apenas na parte inferior de uma tag ancorada no atributo ref e o ATF precisa ser acampar acampamento.
Então eu vou adicionar um link para a página de destino que diz: Veja todos os campgrounds e faça isso
E eu vou apenas dizer que
todos os campgrounds e salvar o reinício do servidor atualizar a visão dos acampamentos agora nos leva à página do acampamento.
Tudo bem, então, vamos agora e
certifique-se de que nós passamos os dados através do nosso acampamento para o resto da chamada de renderização e,
então, podemos percorrer tudo e exibir cada imagem e cada nome no nosso modelo começará por atualizar-nos e adicionando nesse segundo
argumento aqui que é um objeto de todos os dados que queremos passar e passamos em campgrounds sob o nome de campgrounds.
Então lembre-se que este é o dado que passamos e este é o nome que queremos dar.
Poderíamos chamar isso de tudo o que queríamos, mas é comum vê-los nomear o mesmo.
Então, vamos economizar agora e voltar ao
nosso modelo e começaremos apenas fazendo esses campgrounds e, se vermos algo, parecerá objeto objeto.
Se o fizemos corretamente, sabemos que passamos os
dados por meio de reiniciar o servidor ou atualizar Rigaud uma matriz com três objetos dentro.
Então, vejamos e exibamos cada título ou cada nome e imagem.
Então vou manter esses colchetes aqui, mas vou livrar-me do sinal de igualdade e faremos um para cada um.
nós colchetes e, em seguida, basta aqui, precisamos incluir isso com cada um também.
Então, isso será um acampamento para cada um e depois passará na função anônima o retorno de chamada e nós chamaremos de campground e vamos
entrar e entrar aqui e então precisamos voltar e certificar-se de que adicionamos o encerramento correto de Ejay
ESTÁ BEM.
Então, isso
deve seguir os campgrounds e, então, o que queremos fazer para cada um, vamos mostrar o nome primeiro.
Então vamos começar com um aliado.
Por que não.
E nós vamos fazer o nosso E. J. ver o que está acontecendo.
s com o sinal de igualdade e todos fazem algum espaço para que seja um pouco mais fácil
E nós vamos exibir dentro do acampamento Y.
Dot nome e salvar todo o espaço que está fora.
Agora vamos carregar a página e atualizar isso e recebemos três nomes de campground.
A última coisa que eu quero fazer é garantir que exibamos as imagens.
Então, vamos voltar aqui e, ao invés
de um aliado, vamos mudar isso para que possamos ter uma etiqueta div para cada acampamento.
E na etiqueta div exibirá uma h.
Vamos fazer um 4 com o nome do acampamento e, em seguida, ele colocará uma marca de imagem.
E o que precisamos fazer é dar à imagem uma fonte e dentro das citações,
em vez de você, como isso, seja o que você for ELAS, vai colocar
a imagem do acampamento e não podemos simplesmente fazer o acampamento dessa imagem.
Nós precisamos desses Ejay como colchetes.
Então, temos que fazê-lo dentro das citações, o
que é um pouco confuso para alguns dos meus alunos no início porque o acampamento que a imagem já é uma string.
adicione-o ao modelo, essas citações não acompanham.
E você pode ver aqui, mas lembre-se de que, quando tomarmos isso e
É apenas adicionado como texto.
Então, ficaria como essa barra do quadril HTP o que precisamos de cotações em torno disso.
Então, temos que nos certificar de que estamos adicionando as tags Ejaz dentro das citações assim.
ESTÁ BEM.
Então, o que queremos fazer é a imagem do acampamento, certifique-se de usar a imagem.
Aqui vamos nós.
Eu sou A-G e nós temos que soletrou aqui exatamente da mesma maneira e vou parar o servidor reiniciado.
Vamos voltar e atualizar a página e nós conseguimos os três campgrounds com as três imagens.
Tudo bem, ótimo.
Então, isso é tudo o que eu quero fazer neste vídeo foi obter a estrutura básica configurada de nossas duas rotas.
Voltemos para garantir que fizemos todas as coisas que pretendemos fazer.
Então, na página de destino, sim, fizemos isso na página do acampamento que lista todo o acampamento.
Nós também fizemos que cada acampamento tenha um nome e uma imagem.
Tudo bem