‫Instrutor: Na
‫aula anterior, enquanto falava sobre front-end
‫e back-end, mencionei algumas vezes sites simples e
‫estáticos e dinâmicos, ou aplicativos,
‫mas sem realmente definir o que são.
‫Então, neste vídeo, eu queria esclarecer essas coisas e
‫também falar sobre APIs, a fim de
‫trazer todos esses conceitos para o quadro geral do
‫desenvolvimento back-end da web em geral.
‫Portanto, vamos começar falando sobre sites
‫estáticos e sites dinâmicos.
‫Então, um site estático, ou um site
‫simples, como chamei no
‫último vídeo, é quando um desenvolvedor carrega
‫os arquivos finais prontos para serem veiculados de um site no servidor web.
‫Esses arquivos geralmente contêm HTML, CSS,
‫JavaScript, imagens e muito mais, e como eu disse,
‫esses são os arquivos exatos que o servidor enviará
‫posteriormente ao navegador quando o site for solicitado.
‫O navegador pegará esses
‫arquivos e os renderizará como estão.
‫Isso significa que não há trabalho feito no servidor,
‫não há código de back-end e também não há nenhum
‫aplicativo em execução.
‫OK?
‫Então, é apenas um servidor web estático servindo arquivos
‫estáticos, exatamente como mencionei no último vídeo.
‫Agora, você pode pensar, espere,
‫quando há JavaScript
‫na página, geralmente há efeitos dinâmicos,
‫como animações e outras coisas, certo?
‫Bem, essa dinâmica que você quer dizer é
‫uma dinâmica diferente.
‫É apenas no contexto de desenvolvimento de front-end.
‫No contexto do navegador, dinâmico não tem nada a
‫ver com os efeitos em uma página ou coisas que se
‫movem, mas com a maneira como os sites são gerados nos servidores.
‫OK?
‫Portanto, os sites dinâmicos são diferentes dos sites estáticos
‫porque geralmente são construídos no
‫servidor cada vez que uma nova solicitação chega.
‫Então, como vimos no
‫último vídeo, sites dinâmicos geralmente contêm um banco de
‫dados, então há também um aplicativo
‫em execução, como um Node. js app, que busca dados
‫do banco de dados e, em seguida, junto com
‫um modelo predefinido, cria cada página que o usuário solicita dinamicamente
‫com base nos dados provenientes do banco de dados.
‫Portanto, cada vez que um navegador
‫solicita uma página, essa página é construída como arquivos HTML, CSS e JavaScript,
‫que serão enviados de volta ao navegador.
‫Todo esse processo às vezes é chamado
‫de renderização do lado do servidor.
‫Então, novamente, é por isso que é chamado de
‫dinâmico, porque o site pode mudar o tempo todo de acordo
‫com o conteúdo que está no banco
‫de dados ou com as ações do usuário no site.
‫Por exemplo, se você entrou no Twitter,
‫ele irá mostrar uma página
‫completamente diferente daquela quando você saiu, certo?
‫E também vai mostrar uma página diferente amanhã
‫do que hoje porque há novos tweets, portanto,
‫novos dados no banco de dados.
‫E é disso que se tratam os sites dinâmicos.
‫Agora, se você, por exemplo, for para Jonas. io, e você
‫deveria, aliás, então você
‫sempre verá o mesmo conteúdo, o
‫mesmo site, não importa quando você o visita ou
‫o que você faz lá.
‫E isso significa que é uma página estática, certo?
‫Essa diferença faz sentido?
‫Agora, às vezes usamos o termo sites dinâmicos e às
‫vezes o termo aplicativo da web,
‫mas eles são quase a mesma coisa.
‫Normalmente, quando as pessoas se referem a
‫aplicativos da web, elas se referem a um site
‫dinâmico com algumas funcionalidades, como fazer login, criar
‫perfis de usuário, pesquisar coisas e coisas assim em geral.
‫Os sites são, por exemplo, algo como um blog WordPress.
‫Eles ainda são gerados dinamicamente,
‫mas não podemos fazer nada além de lê-los, certo?
‫E, tradicionalmente, os sites estáticos e dinâmicos eram os únicos dois
‫tipos de sites, mas nos últimos anos,
‫graças ao quão poderosos os navegadores
‫se tornaram do lado do cliente, vemos cada vez
‫mais sites que são, basicamente, baseados em APIs.
‫Então, vamos aprender como eles funcionam e
‫como podemos usar o Node. js para alimentá-los.
‫Vamos apenas manter os sites dinâmicos aqui
‫no slide para que possamos comparar melhor os dois.
‫Então, assim como acontece com os sites dinâmicos, temos
‫um banco de dados aqui e um aplicativo que busca
‫dados do banco de dados cada
‫vez que um cliente faz uma solicitação, então, nesse sentido, um site
‫baseado em API é bastante semelhante a um site
‫dinâmico local na rede Internet.
‫Portanto, ambos funcionam dinamicamente.
‫Agora, a grande diferença aqui é que com uma
‫API, enviamos apenas os dados para o
‫navegador, geralmente no formato de
‫dados JSON, e não o site inteiro.
‫Portanto, novamente, apenas os dados são enviados ao cliente e
‫não o site pronto para ser exibido.
‫Então, sem HTML, sem CSS, apenas os dados JSON, certo?
‫Então, ao construir sites baseados em
‫API, há sempre essas
‫duas etapas, construir uma API e, em seguida,
‫consumir a API no lado do cliente
‫e, a propósito, API significa interface de programação de
‫aplicativo e, em um nível muito alto,
‫é basicamente um software que pode ser usado por
‫outro software para, basicamente, permitir que os aplicativos se comuniquem.
‫E falaremos um pouco mais profundamente
‫sobre o que realmente é uma API assim que começarmos a construir uma.
‫Enfim, agora sobre o lado do cliente que acabei de mencionar.
‫Então, é aqui que o site é realmente
‫montado, conectando os dados que recebemos em
‫algum tipo de modelo, geralmente usando alguma estrutura de front-end
‫sofisticada como React, Angular ou Vue.
‫Não vou entrar em detalhes
‫aqui porque isso seria para um curso de front-end,
‫mas em termos muito gerais, é assim que funciona.
‫Então, você vê que ao construir um site com
‫base em API, a fase de construção
‫do site mudou do back-end para o front-end, certo?
‫Ou também podemos dizer que mudou do servidor para o cliente.
‫É por isso que muitas
‫vezes você verá sites dinâmicos sendo chamados de renderizados do lado
‫do servidor, porque na verdade eles são construídos no servidor.
‫Por outro lado, sites baseados em API são
‫frequentemente chamados de renderizados do lado do cliente, o que faz sentido, certo?
‫Portanto, para nós, desenvolvedores de
‫back-end, é realmente muito mais fácil apenas construir uma API
‫e deixar que o pessoal do front-end construa um site, certo?
‫E, de fato, o Node é uma ferramenta absolutamente perfeita
‫para construir APIs, e é muito comumente usada para isso, mas
‫é claro, também é perfeitamente
‫adequada para construir um site dinâmico renderizado no lado do servidor.
‫Portanto, neste curso, faremos as duas versões, começando com
‫a API e, ao final do curso,
‫também construindo um site renderizado usando exatamente os mesmos dados.
‫Escolhi fazer ambos porque acredito que é extremamente importante que você
‫saiba como construir uma API e um site renderizado
‫do lado do servidor.
‫E agora, para terminar este
‫vídeo, gostaria de mencionar rapidamente que as
‫APIs que construímos com o Node, ou realmente, qualquer outra linguagem, podem,
‫é claro, ser
‫consumidas por outros clientes além do navegador, o que
‫é uma grande vantagem de construir uma API em vez
‫de um site renderizado do lado do servidor.
‫Então, digamos que construamos
‫uma API de exemplo no jonas. io / api / myCourseData.
‫Portanto, sempre que acessarmos essa URL, o servidor enviará de volta dados sobre os
‫cursos de desenvolvimento
‫web que estou ministrando no momento.
‫Até agora, falamos apenas sobre solicitações
‫provenientes de navegadores da web, mas também podemos solicitar
‫e consumir os mesmos dados JSON
‫em um aplicativo iOS nativo ou Android, ou
‫mesmo em aplicativos de desktop para Mac
‫ou para computadores Windows.
‫As possibilidades são realmente infinitas quando construímos uma API porque simplesmente
‫temos uma fonte de dados, que pode
‫então ser solicitada e usada em qualquer lugar,
‫não apenas nos navegadores.
‫Esse é o tipo de problema quando construímos
‫um site dinâmico normal.
‫Retornamos arquivos HTML, CSS e
‫JavaScript, e apenas os navegadores podem realmente
‫entendê-los, então ficamos presos naquela plataforma única.
‫E isso pode não ser um
‫problema em muitos casos, mas para produtos complexos que
‫exigem muitos aplicativos e, em seguida, sites
‫e aplicativos da web, geralmente, uma API é sempre necessária.
‫Então, neste exemplo em Jonas. Io, eu poderia construir essa
‫API e, em seguida, construir um site com base em API
‫e alguns aplicativos e obter meus dados
‫sobre todos esses clientes de apenas uma fonte, certo?
‫E algumas pessoas ou equipes nem mesmo têm nenhum
‫cliente próprio e simplesmente vendem o acesso à
‫sua API para terceiros
‫que irão consumir essas APIs e não as suas.
‫Portanto, existem negócios inteiros construídos em
‫torno dessa filosofia de apenas vender uma API para
‫outros desenvolvedores ou empresas.
‫De qualquer forma, espero que com este slide final o
‫conceito e a razão e, tipo de filosofia
‫por trás da construção de APIs agora tenham ficado claros para você.
‫Então, vamos seguir em frente.