Case Web

Nesta seção, você encontra informações para iniciar um projeto Web com Beagle.

Iniciando um projeto Web

Pré-Requisitos

Para criar um projeto com Beagle para Web, confirme se você tem instalado os seguintes programas:

  • Node 10.16 +
  • Yarn ou npm

Para iniciar o projeto é preciso utilizar o Visual Studio Code. Caso ainda não o tenha instalado, você pode baixá-lo no site oficial da ferramenta.

Após a instalação, siga os passos de acordo com o framework escolhido:

Passo 1: Instale o Angular CLI, abra o terminal e use o comando abaixo:

ng new caseAngular

Aguarde o CLI terminar a criação do projeto.

Passo 2: entre na pasta do projeto gerado cd caseAngular, adicione o Beagle Angular ao seu repositório com um dos comandos abaixo de acordo com seu gerenciador de pacotes:

npm install --save @zup-it/beagle-angular

yarn add @zup-it/beagle-angular

Agora, aguarde a instalação.

Passo 3: digite um desses comandos e aperte o enter:

yarn beagle init

npx beagle init
  • Na pergunta ‘Would you like to use yarn or npm?' Digite a opção que você escolheu para usar como gerenciador, no exemplo será o yarn, portanto digite yarne aperte enter.
  • Na pergunta ‘Path to the beagle module (press enter to use default)’ - digite qual o caminho do módulo que será usado para o Beagle, como o projeto foi criado agora, não há módulos ainda, portanto aperte enter sem informar nada.
  • Na pergunta ‘Path to the module with the components to use with beagle (press enter to use default)’ - digite qual o caminho do módulo que será usado para o Beagle, como o projeto foi criado agora, não há módulos ainda, portanto aperte enter sem informar nada.
  • Na pergunta ‘What’s the base url of the backend providing your beagle JSONs? (press enter to use default)’ - digite qual será a URL base do backend que será utilizada para resgatar os JSONs, aqui será usada o mockyio, então digite https://www.mocky.io/v2/e aperte enter. Aguarde a configuração terminar:

  • Foram criados dois arquivos em seu projeto beagle-components.module.ts e beagle.module.ts.

Passo 1: Abra o terminal e digite um dos comandos abaixo:

npx create-react-app case-react --template typescript

ou

yarn create react-app case-react --template typescript

Passo 2: acesse a pasta do projeto cd case-react e adicione o Beagle React ao seu repositório. No terminal digite:

npm install --save @zup-it/beagle-react

ou

yarn add @zup-it/beagle-react

e aguarde a instalação finalizar.

Configuração

Agora é hora de configurar os arquivos do Beagle dentro da sua aplicação, siga as instruções:

Abra o arquivo app.module.ts e importe o módulo Beagle que acabou de ser gerado:

...
import { Beagle } from './beagle.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    Beagle
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Abra o arquivo beagle.module.ts e coloque o caminho baseUrl

import { BeagleModule } from '@zup-it/beagle-angular'
// import all the components you wish to use with Beagle.

@BeagleModule({
  baseUrl: 'http://usebeagle.io.s3-website-sa-east-1.amazonaws.com/start/',
  module: {
    path: './beagle-components.module',
    name: 'BeagleComponentsModule',
  },
  components: {
    // Associate every beagle component to your angular component.
  },
})
export class Beagle {}

No caminho /src crie uma outra pasta com o nome beagle e dentro dela um novo arquivo chamado beagle-service.tsSua estrutura deve estar parecida com a imagem a seguir:

Agora, abra o arquivo criado beagle-service.ts e copie o código:

import { createBeagleUIService } from '@zup-it/beagle-react'

export default createBeagleUIService({
  baseUrl: "http://usebeagle.io.s3-website-sa-east-1.amazonaws.com/start/",
  components: {}
})

Crie o JSON para ser renderizado

Para uma melhor experiência o JSON deve ser criado por meio de um BFF, como configurar um BFF você encontra aqui, neste exemplo usaremos o JSON que está disponibilizado na URL http://usebeagle.io.s3-website-sa-east-1.amazonaws.com/start/welcome:

{
    "_beagleComponent_": "beagle:container",
    "children": [
        {
            "_beagleComponent_":"beagle:text",
            "text":"Hello Beagle"
        },
       {
            "_beagleComponent_":"beagle:text",
            "style":{
              "padding":{
                "top":{
                  "value":10,
                  "type": "REAL"
                }
              }
            },
            "text":"Beagle is a cross-platform framework which provides usage of the server Driven UI concept, natively in iOS, Android and Web applications. By using Beagle, your team could easily change application's layout and data by just changing backend code"
        }
    ]
}

Renderizando os componentes

Agora é necessário adicionar na aplicação o local onde os componentes serão renderizados via JSON. A biblioteca Beagle fornece um componente com essa funcionalidade o Beagle remote view, siga os passos para configurar:

Abra o arquivo app.component.html e substitua todo o conteúdo pelo código abaixo. No route adicione o caminho relativo ao JSON remoto, será usado o: /welcome.

<beagle-remote-view route="/welcome"></beagle-remote-view>

route no código acima diz qual a rota será carregada. A URL especificada aqui é relativa à baseUrl declarada na configuração.

Abra o arquivo App.tsx onde o JSON será renderizado e altere para ficar como o exemplo a seguir:

import React from 'react';
import './App.css';
import { BeagleProvider, BeagleRemoteView } from '@zup-it/beagle-react';
import BeagleService from './beagle/beagle-service';

function App() {
  return (
    <BeagleProvider value={BeagleService}>
      <BeagleRemoteView route={'/welcome'} />
    </BeagleProvider>
  );
}

export default App;

Neste passo é apontado onde você deseja renderizar o layout definido no arquivo JSON remoto. Veja aqui dois componentes fornecidos pela biblioteca Beagle:

<BeagleProvider> Recebe uma propriedade value com o beagle-service criado no passo anterior que contém as configurações iniciais

<BeagleRemoteView> Recebe uma propriedade route que é o caminho do nosso arquivo JSON, note aqui que adicionamos ' /welcome ‘ pois esse valor será concatenado com o baseUrl definido no arquivo beagle-service.ts.

Testando a aplicação

Depois de finalizar a configuração básica do projeto, agora é preciso rodar um dos comandos abaixo para inicializar a aplicação:

Se você usa o npm:

npm run serve

Se você usa o yarn:

yarn serve

Se você usa o npm:

npm run start

Se você usa o yarn:

yarn start

Depois de finalizados os comando acesse no navegador o endereço da sua aplicação. Se uma tela com os componentes for renderizada tudo está funcionando corretamente.


Última modificação 12/02/2021: Fix/migrate images to aws (#299) (a7bb5457)