Agora que concluímos o desenvolvimento de um servidor API Rest completo usando LoopBack,
a próxima pergunta imediata que surgirá em sua mente é,
como adaptamos o aplicativo Angular para fazer uso deste servidor API Rest?
Como fizemos nos casos anteriores,
também precisaremos reconfigurar nosso aplicativo Angular para fazer uso específico dos
pontos finais da API Rest e das
várias solicitações da API Rest, conforme exposto pelo nosso servidor LoopBack.
Agora, é aqui que vamos tirar proveito de
um LoopBack SDK que pode ser construído automaticamente para nós usando um módulo Node.
Vamos olhar para nossos servidores LoopBack,
vários endpoints API Rest e construir automaticamente o SDK,
que podemos incorporar em
nosso aplicativo Angular e, em seguida, ser capaz de se comunicar com nosso servidor LoopBack,
tanto para autenticação quanto para poder trocar dados.
Para começar este exercício,
primeiro clone o repositório git que contém
um aplicativo Angular parcialmente concluído que se comunica com nosso servidor LoopBack.
Então, para fazer isso, vá para sua localização conveniente em seu computador.
Então, aqui estou eu na minha pasta Coursera Angular.
Vou clonar o repositório git
digitando git clone
https://github.com/jmuppala/conFusion-Angular6-LoopBack.git
e, em seguida, clonar este repositório git.
Uma vez que o repositório git é clonado,
em seguida, vamos mover para a pasta Confusion Angular6 LoopBack e, em seguida,
executar uma instalação NPM para instalar
todos os módulos de nó para esta aplicação Angular parcialmente concluída.
Para criar automaticamente o kit de desenvolvimento de software LoopBack para o nosso servidor LoopBack,
vamos receber a ajuda deste módulo de nó LoopBack SDK Builder.
Então, este LoopBack SDK Builder
é um módulo de nó orientado pela comunidade que é realmente desenvolvido
a partir do LoopBack SDK Angular oficial que os desenvolvedores LoopBack lançaram.
O Loopback SDK Angular suportou Angular JS.
Então, isso foi modificado neste Loopback SDK Builder
para suportar o Angular dois e sobre aplicativos.
Então, o LoopBack SDK Builder,
o próprio módulo de nó
depois de instalado na pasta do projeto do servidor, você pode fazer uso do LoopBack SDK Builder para
passar automaticamente pelo aplicativo LoopBack que você já criou.
Isso irá construir automaticamente tudo o que
precisamos para começar em nossa aplicação Angular.
Então, ele constrói o kit de desenvolvimento de software.
Assim, dentro do kit de desenvolvimento de software,
o LoopBack SDK Builder exporta
todas as interfaces, todos os modelos para os vários dados que vamos armazenar em
nosso servidor LoopBack e também
todos os serviços API que podem ser usados dentro de seu aplicativo Angular.
Assim, seus modelos e seus serviços vêm automaticamente para o passeio depois que você criar o SDK.
Agora é apenas uma questão de incorporar este SDK em nosso aplicativo Angular
e, em seguida, começar rapidamente.
Como já construímos nosso aplicativo Angular em um curso anterior,
vou reajustar esse aplicativo para fazer uso
do LoopBack SDK que vamos exportar deste LoopBack SDK Builder.
Na etapa anterior,
você acabou de instalar
o aplicativo Angular parcialmente concluído que
já foi adaptado para fazer uso do LoopBack SDK.
Então, vamos em frente e construir
o LoopBack SDK e, em seguida, implantá-lo em nosso aplicativo Angular,
e, em seguida, ir em frente e compilar nosso aplicativo Angular e começar com ele.
Para configurar o LoopBack SDK,
vá para a pasta do servidor LoopBack na guia terminal ou na janela de comando.
Então aqui estou eu na minha pasta de servidor LoopBack.
Então, nesta pasta,
deixe-me ir em frente e instalar esse LoopBack
SDK Builder.
Uma vez que o construtor é instalado,
vamos em frente e construir o LoopBack SDK.
Para construir o LoopBack SDK,
vamos ter a ajuda da ferramenta de linha de comando LB-SDK que este módulo LoopBack SDK
configura automaticamente para nós.
Então, para acessar isso, vamos dizer,. /nó módulos.
Então, nos módulos do nó,
há a pasta a.bin que é criada automaticamente sempre que você
instalar vários módulos de nó na pasta lá.
Então, para ir para a pasta the.bin,
vamos acessar este comando LB-SDK lá,
que é instalado automaticamente,
então vamos chamar este servidor de largura. /server.js,
e precisamos especificar o caminho para o aplicativo Angular que acabamos de configurar.
Então, meu aplicativo Angular está atualmente em
meus documentos Coursera angular Confusion pasta LoopBack angular.
Então, deixe-me copiar essa parte.
Então deixe-me entrar no meu terminal ou na janela de comando
onde estou tentando configurar meu LoopBack SDK.
Então, no prompt,
uma vez que está na pasta Meus Documentos,
vou digitar o caminho completo para isso a partir da minha pasta raiz no meu mac.
Se estiver a utilizar o Windows,
certifique-se de que este caminho indica o caminho completo a partir de dois-pontos C ou D dois-pontos, seja
qual for a unidade que estiver a instalá-lo no computador Windows.
Então, o caminho completo para sua pasta LoopBack angular
e, em seguida, vamos dizer,
/SRC, a pasta de origem lá e, em seguida, aplicativo.
Em seguida, vamos implantar o SDK na
pasta compartilhada na subpasta SDK lá.
Queremos que este LoopBack SDK Builder
implante automaticamente a versão web NG2 do SDK.
Então, esta é a versão que irá suportar
aplicações web e nossa aplicação Angular neste caso.
Se você estiver construindo isso para um aplicativo de script nativo, então você dirá,
NG2 nativo para criar o SDK para o aplicativo de script nativo.
Desde que estou construindo meu aplicativo Angular,
eu vou apenas dizer, NG2 web
e, em seguida, deixar o Loopback SDK Builder
criar automaticamente o kit de desenvolvimento de software e, em seguida, implantá-lo
em meus aplicativos Angular pasta app/shared/sdk fonte lá.
Então, depois de alguns segundos,
o SDK é construído e implantado no meu aplicativo Angular.
Agora antes de iniciar a minha aplicação Angular,
deixe-me iniciar o meu servidor LoopBack,
e antes de fazer isso eu vou para outra guia terminal
aqui e, em seguida, iniciar o meu servidor MongoDB,
então bem eu vou dizer,
Mongod —dbpath=data, e, em seguida,
iniciar o meu servidor MongoDB.
Primeiro, deixe-me iniciar meu servidor LoopBack.
Então, no prompt de início do NPM,
e meu servidor LoopBack deve estar ativo e funcionando em um curto espaço de tempo.
Em seguida, agora indo para o meu aplicativo LoopBack,
deixe-me abrir este aplicativo no
meu código Visual Studio para que possamos olhar para o código-fonte.
Quando meu aplicativo estiver aberto no código do Visual Studio,
deixe-me levar isso para uma nova janela de área de trabalho.
Em seguida, deixe-me também iniciar minha implantação de aplicativo Angular
digitando NGServe no prompt e aguarde meu aplicativo Angular para ser compilado.
Uma vez que meu aplicativo Angular é compilado e aplicado,
deixe-me ir para um navegador,
e depois primeiro check-out este aplicativo Angular.
Indo para o navegador,
deixe-me abrir uma nova guia aqui,
e então digite localhost: 4200 e você verá
o aplicativo Angular implantado nesta janela do navegador aqui,
e você pode ver que o Início,
a página Sobre Nós com todos os dados,
depois o Menu e também os Meus Favoritos.
Atualmente, o que não está mostrando nada porque
nenhum usuário está logado e a página de contato, assim como antes.
Então, para entrar, deixe-me entrar como um usuário e então eu vou estar digitando
meu nome de usuário e uma senha aqui,
e então uma vez que eu entrar, então você será capaz de ver que quando eu ir para Meus Favoritos,
os Favoritos deste usuário em particular serão exibidos aqui.
Assim como antes, podemos digitar comentários e, em seguida, enviar comentários
e, em seguida, também adicionar itens aos favoritos e assim por diante.
Todas as funcionalidades que você viu com as versões anteriores
do aplicativo Angular também são suportadas nesta versão do aplicativo Angular.
Também para que seu servidor LoopBack possa servir imagens,
todos esses dados serão armazenados no código do servidor na pasta cliente do código do servidor.
Então, na pasta cliente do meu servidor LoopBack,
observe que eu criei essa subpasta
nomeada imagens e, em seguida, armazenei todas as imagens na subpasta.
Agora, para que essas imagens sejam servidas e também para que
a pasta cliente seja usada como pasta pública para o meu servidor LoopBack,
então em algumas alterações que eu preciso fazer no meu servidor LoopBack.
Agora, a primeira coisa que você precisa fazer é
ir para a pasta de inicialização e na pasta de inicialização,
você veria este arquivo root.js aqui,
que contém essas informações aqui.
Agora, você pode excluir o arquivo root.js
ou simplesmente renomear o arquivo root.js para outra coisa.
Então aqui, você vê que eu renomeei este arquivo para root.jsold com a extensão jsold.
Agora, esse arquivo não deve mais conter a extensão the.js.
Então, qualquer coisa além da extensão the.js está bem.
Então, o que isso significa é que, neste caso,
meu servidor LoopBack, quando ele inicia não executará o código nesta pasta.
Agora, quando você olha para o código no arquivo root.js que foi configurado anteriormente,
você viu que o roteador foi configurado de tal forma que,
quando você acessar a barra que é a pasta raiz de seus servidores,
então ele simplesmente servirá o status de LoopBack servidores e, de fato,
isso é o que vimos nosso servidor LoopBack servindo
o tempo de atividade e o último tempo de reinicialização para o nosso servidor.
Nós não queremos que ele faça isso,
em vez disso queremos que nosso servidor LoopBack seja capaz de usar qualquer coisa que
colocamos na pasta cliente como a pasta pública e assim
qualquer aplicativo cliente pode ser implantado
na pasta cliente do meu servidor LoopBack e deve ser
acessado quando acessamos o LoopBack em seus pontos finais de barra padrão.
Então, essa é a raiz da pasta do servidor.
Então, para fazer isso, a primeira coisa que você precisa fazer é
alterar este nome de arquivos root.js para root.
por exemplo, você pode simplesmente renomear isso para
root.jsold ou você pode simplesmente excluir esse arquivo.
Esse arquivo não será necessário nesta versão do meu servidor LoopBack.
Agora, não só isso,
a segunda parte que você precisa reconfigurar é entrar no arquivo middleware.json aqui.
O arquivo middleware.json.
No arquivo middleware.json,
se você rolar para baixo,
você verá que aqui,
originalmente isso simplesmente conterá arquivos: e então uma chave vazia aqui.
Agora, nessa chave vazia aqui,
basta adicionar este código aqui,
que diz loopback #static e ele diz params$!.. /cliente.
Então, isso indicará ao meu servidor LoopBack
que a pasta cliente que está disponível aqui
deve ser usada como a pasta pública estática para o meu servidor LoopBack.
Então, qualquer coisa colocada na pasta do cliente pode ser acessada a partir do meu servidor.
Então, esta é a alteração adicional que você precisa fazer para o arquivo middleware.json.
Então, uma vez que você fizer essas duas alterações,
em seguida, seu servidor LoopBack será configurado para servir os dados, incluindo
as imagens que você vai colocar
na subpasta imagens sob a pasta cliente aqui.
Então, certifique-se de copiar as imagens para a pasta cliente aqui e a segunda é
ir para o arquivo middleware.json na pasta do servidor
e, em seguida, atualizar esta parte.
Uma vez que fazemos isso, então essas imagens podem ser acessadas simplesmente acessando
o /images/ o nome do arquivo de imagem para acessar
essas imagens porque nossos pratos
, líderes, e as promoções exigirão esses arquivos
de imagem e assim estarão disponíveis para nós
no servidor LoopBack e também o que você colocar na pasta do cliente.
Assim, por exemplo, você pode preparar a pasta de distribuição
para o seu aplicativo Angular e simplesmente copiar
todo o conteúdo da pasta de distribuição para a pasta cliente aqui,
e, em seguida, se você acessar o servidor LoopBack em
seu ponto de extremidade raiz padrão
, então seu aplicativo Angular será automaticamente servido pelo seu servidor LoopBack.
Então, essas são as duas alterações que você precisa fazer para seu servidor LoopBack.
Claro, você deve estar curioso sobre como exatamente este SDK é construído,
onde exatamente está este SDK e como eu
vou realmente fazer uso dele dentro do meu aplicativo Angular.
Então, para fazer isso, vamos para o nosso aplicativo Angular e na pasta de
código-fonte, sob pasta de aplicativo de origem
, agora quando
você abre a pasta compartilhada, você veria que há uma subpasta aqui chamada SDK e dentro desta subpasta SDK,
você encontrará um monte de arquivos aqui,
lb.config.ts, index.ts e dentro dos soquetes de armazenamento,
os serviços e dentro do serviço,
você tem serviços personalizados e serviços principais aqui,
e os vários modelos que são implantados aqui.
Os modelos realmente contêm as estruturas de modelo
para os nossos vários modelos que estamos implementando.
Agora, este é o LoopBack SDK.
Este código é construído automaticamente para você e, se você quiser,
você pode simplesmente entrar e, em seguida,
passar por esses arquivos para apenas ver o que está disponível lá.
Certifique-se de que não modifique nenhum dos arquivos
nesta subpasta SDK porque isso é
criado automaticamente para você pelo Loopback SDK Builder,
e isso conterá tudo configurado para que
seu servidor LoopBack possa ser acessado a partir de seu aplicativo Angular.
Os serviços que vou fazer uso estão todos disponíveis aqui.
Agora, como fazemos uso disso?
Então, para ajudá-lo a entender como fazemos uso disso,
vamos visitar nosso componente doméstico e depois ver como o componente doméstico está agora atualizado.
Então, quando você vai para o componente doméstico,
você vai notar que eu estou agora importando pratos de.. /shared/sdk/modelos.
Então, esses são os modelos que são exportados automaticamente para
o SDK pelo meu Loopback SDK Builder.
Então, é aqui que meu modelo de pratos será definido lá.
Então, eu só vou alavancar o modelo de pratos.
Da mesma forma, o serviço em si está disponível como este DishesAPI,
como você pode ver aqui e este DishesAPI está no.. /shared/sdk/services pasta aqui.
Da mesma forma, as promoções e a API de promoções,
e líderes e líderes API.
Então, todos eles são criados automaticamente para mim pelo Loopback SDK Builder.
Agora, então você vai para o código,
você vai notar agora que eu vou declarar o prato como pratos,
promoção como promoções, e líder como /líderes.
Esses três são os modelos exportados pelo Loopback SDK Builder.
Observe também como eu reconfigurei os três serviços aqui.
Agora, meu serviço de prato está se referindo a pratos API,
serviços de promoção referindo-se a promoções API,
e serviço líder para líderes API API,
e também notar como eu acessar o serviço de prato aqui.
Então, eu vou dizer que este serviço de prato encontrar um e onde destaque igual a verdadeiro.
Então, é aqui que você se lembra que no meu LoopBack rest API Explorer,
eu tinha digitado isso no filtro lá,
então eu tentei encontrar os pratos lá.
Então, isso é exatamente o que estou fazendo aqui também no meu código aqui.
Então, este FindOnE, em seguida, fornecido com este,
vai encontrar um item e, em seguida, retornar
que aqui, e em seguida, que eu estou atribuindo cada um
a este prato aqui eo resto da minha aplicação angular funciona exatamente da mesma maneira que antes.
Agora, observe também que no construtor,
observe como configurei isso chamado de configuração LoopBack.
Agora, para fazer a configuração LoopBack em cada componente que você está fazendo uso,
você precisa importar essa configuração LoopBack desta pasta compartilhada do SDK aqui e também,
esta versão da API que eu declaro.
Atualizei este arquivo baseurl.ts.
Então, na pasta URL base,
eu atualizei isso para o meu nome do meu computador dois pontos 3.000.
Então, este certifique-se de substituir isso com
o endereço IP ou o nome do seu computador específico no qual você está executando.
Então, certifique-se de atualizar a URL base aqui e a versão da API aqui é simplesmente uma string.
Dizendo API aqui.
Então esses dois serão usados no meu arquivo component.ts home.
Então eu estou importando esta versão API aqui e o LoopbackConfig.
O baseURL eu já estou
injetando no meu construtor aqui para que já está disponível aqui,
e em seguida, no meu construtor do meu componente,
eu tenho que fazer essas duas declarações aqui.
Então, vamos dizer, “LoopBack definir URL base
para URL base” que é o mesmo que eu acabei de
injetar lá e, em seguida, olhar para trás na versão da API definida para a versão da API aqui.
Então esses dois que eu preciso configurar no meu componente home
e também qualquer outro componente onde eu estou acessando meu servidor LoopBack,
eu preciso configurar isso.
Agora, o construtor de SDK LoopBack sugere que precisamos
fazer isso em cada um dos componentes aqui.
Além disso, você vai notar que se você vai para o arquivo module.ts aplicativo no arquivo module.ts aplicativo,
eu removi todas as entradas de todos os outros serviços e, em vez disso, eu estou importando
isso aqui chamado módulo importar SDK Browser de compartilhamento SDK aqui.
SDK Browser módulo aqui,
e se você descer para as entradas aqui,
você verá que eu configurei este SDK Browser module.forRoot aqui nas entradas.
Então, este módulo SDK Browser é configurado automaticamente quando criamos nosso LoopBack SDK e
nós só precisamos importar isso para o nosso aplicativo
module.ts arquivo e também notar que os provedores,
é onde configuramos nossos serviços,
não contém mais nenhum dos serviços porque
vem como parte do meu LoopBack SDK,
então a única coisa que estou fornecendo é a URL base aqui.
Eu removi todos os outros do meu aplicativo module.ts arquivo aqui.
Então, essa é uma mudança que você vai notar.
Assim, da mesma forma, se você for para o arquivo About
component.ts, o arquivo.ts componente DishDetail,
o arquivo component.ts favoritos e também o arquivo.ts do componente do menu.
Então vamos olhar para o arquivo component.ts menu.
Então você vai ver aqui novamente eu estou importando este
quatro e, em seguida, no meu componente de menu eu estou dizendo,
pratos prato API e, em seguida, eu estou
configurando o LoopbackConfig set BaseURL SetAPI versão.
Eu já fiz isso no repositório Angular que eu tenho fornecido para
você para o meu aplicativo angular para o servidor LoopBack,
e também, você vai ver que eu acabei de fazer alguma modificação aqui.
Então, se você quiser encontrar todos os itens do serviço de prato para que você simplesmente diga
dishservice.Find e que irá retornar
todos os pratos que estão lá no meu servidor LoopBack aqui.
Então é isso que estou recuperando aqui.
Então, o resto do código deve parecer familiar aqui, exceto que aqui eu chamo
pratos é igual a pratos e matriz de pratos aqui.
Então essa é a mudança que você verá no componente de menu.
Agora, você deve estar se perguntando como funciona a autenticação de usuário neste caso.
Para autenticação do usuário, deixe-me chamar sua atenção para
dois lugares onde estou fazendo uso da autenticação do usuário.
Vamos primeiro para o componente de login.
Então, no componente de login,
você veria que no componente de login eu estou importando esses dois aqui,
a API do cliente que é os serviços que me permitem
fazer autenticação de usuário e login e logout,
e também estou importando o modelo de cliente e o modelo de
token de acesso e no componente de login,
você veria que pelo serviço Auth agora não é nada além de API do cliente e
também você notará que no componente de login quando o formulário de login for enviado,
chamo este AuthService.Login.
Esta função de login que está disponível através da API do cliente.
Lembre-se de que quando tentamos fazer login usando o LoopBack rest API explorer,
estávamos usando o endpoint do cliente para fazer login no sistema.
Então é exatamente isso que estou fazendo em código aqui.
Então vamos dizer este AuthService.Login e aqui você vê que
ele leva esses parâmetros livres aqui,
o nome de usuário e a senha como o primeiro objeto JavaScript aqui,
e então eu também estou especificando este user.remember., .remember é a bandeira
da caixa de seleção lembrar me que temos em nossa diálogo de componentes de login lá.
Então, quando o usuário verifica que as informações do usuário serão
automaticamente persistidas pelo SDK.
O serviço de autenticação fornecido dentro do SDK.
Então, agora você vê que eu não preciso
implementar explicitamente nenhum serviço de autorização que esteja
automaticamente disponível para mim por meio
da API do cliente que está disponível como um serviço aqui.
Então, é assim que eu faço login no usuário aqui,
e quando o usuário fizer login isso retornará
um objeto JavaScript e do objeto JavaScript eu recebo o
usuário res.user.. fornece as informações do usuário para mim e eu estou
simplesmente enviando isso para o meu HeaderComponent aqui.
Então, indo para o HeaderComponent.
Então vamos para o componente de cabeçalho,
e no arquivo HeaderComponent.ts,
você verá que novamente aqui estou importando a API do cliente e o
cliente aqui e também você notará que na API do cliente,
eu especifico aqui nota que eu estou dizendo que
este cliente é este AuthService getCachedCurrent.
Portanto, se um usuário está bloqueado no atualmente conectado, as
informações de usuários são convertidas no AuthService, que não é nada além da API do cliente.
Então, quando eu chamo esse getCachedCurrent isso retornará o usuário conectado no momento.
Se nenhum usuário estiver conectado,
isso retornará nulo.
Então essa é uma maneira que eu posso verificar para ver se um usuário está conectado ou não no momento.
Então, se o usuário estiver conectado no momento, esse cliente
receberá as informações sobre o cliente que está carregado.
As informações do cliente, incluindo nome, sobrenome,
e-mail e perfil do outro usuário, estarão disponíveis para este objeto this.customer.
Então, aqui estou verificando se o this.customer não é nulo.
Se não for nulo, então eu vou salvar o nome de usuário para
this.customer.username e dessa forma quando
o nome de usuário é definido, então meu cabeçalho
na barra de ferramentas em meu HeaderComponent irá refletir o nome do usuário lá.
Agora, para sair do usuário tudo o que eu estou fazendo é definir o nome de usuário e
as variáveis do cliente como nulo e então eu simplesmente chamei authService.log,
AuthServices é CustomerAPI.Logout, e é assim que eu faço logout do usuário.
Quando o usuário faz logout,
suas credenciais são todas destruídas.
Agora, tudo isso é cuidado automaticamente pelo serviço de API do cliente
que está disponível no meu LoopBack SDK que eu acabei de criar lá.
Então, você percebe que como o LoopBack SDK Builder constrói
os serviços e os modelos e tudo o que eu preciso e no meu aplicativo Angular,
eu estou simplesmente importando esses e, em seguida, fazendo uso
deles para configurar meu aplicativo Angular.
Então, quando eu criar
o LoopBack SDK usando o LoopBack SDK Builder, tudo o que me resta é
implementar os componentes e seus modelos de exibição que se encaixam no resto.
Os serviços são criados automaticamente para mim pelo LoopBack SDK Builder,
os modelos são construídos automaticamente para mim e tudo o que eu preciso fazer é
apenas importá-los em todos os componentes onde eu preciso fazer uso deles.
Então, observe como este aplicativo Angular foi atualizado para fazer uso do LoopBack SDK.
Agora, se você quiser obter mais informações sobre como o LoopBack SDK deve ser usado,
você também pode verificar a documentação fornecida pelo LoopBack SDK Builder.
Então, se você for para o LoopBack SDK Builder,
um link para isso estará disponível nos recursos adicionais desta lição
e no LoopBack SDK Builder,
você terá todas as informações necessárias
para fazer uso do SDK criado pelo LoopBack SDK Builder.
Então, se você vai para a documentação wiki.
Na documentação wiki, muita explicação de como o LoopBack SDK Builder pode
ser ou o SDK gerado pelo LoopBack SDK Builder deve ser usado é tudo dado aqui.
Então, eu só passei por esta documentação para descobrir como
fazer uso do SDK que é construído pelo LoopBack SDK Builder
e, em seguida, reconfigurou meu aplicativo Angular para fazer uso
disso para interagir com meu servidor LoopBack.
Então, com isso, demonstrei rapidamente como
você pode criar seu aplicativo Angular e
aproveitar o SDK construído pelo LoopBack SDK
Builder para acessar seu servidor LoopBack de dentro de seu aplicativo Angular.
Uma abordagem semelhante também será apropriada para a sua aplicação Ionic.
Para o aplicativo de script nativo, você constrói o SDK com NG2 nativo
na linha de comando em vez de NG2 web, como usamos quando criamos esse SDK.
Com esta introdução rápida de como podemos fazer uso
do LoopBack SDK Builder para construir o SDK e,
em seguida, usá-lo dentro do nosso aplicativo Angular,
eles chegam ao fim deste exercício.