Visão Geral

Iniciando um projeto Android

Para este exemplo prático, utilizaremos o Android Studio IDE. Caso você ainda não o tenha instalado, basta acessar no site oficial do Android e seguir as instruções.

Depois de ter instalado o programa, siga os passos abaixo:

Passo 1: Abra o Android Studio e clique em Start a new Android Studio project.

Passo 2: Selecione a opção Empty Activity e clique em next.

Passo 3️: Nesta página, devemos listar algumas informações importantes:

• Informe o nome do seu projeto. Neste exemplo, chamaremos de BeagleApp.
• Selecione qual linguagem utilizará. Para o Beagle, devemos utilizar oKotlin.
• Selecione o SDK mínimo 19, já que qualquer SDK menor que este não será compatível.
• Defina o package e a Save location de acordo com sua preferência.
• Clique em Next.

Passo 4️: Feitas as configurações anteriores, o Android levará um tempo pra construir o projeto porque estará sincronizando todas as dependências inicias para inicializar o projeto

Quando a inicialização for concluída, você verá esta página:

Configurando o Beagle

Passo 1: Definir as dependências

Para começar, você precisa configurar as dependências do Beagle no seu repositório. Isso pode ser feito utilizando as configurações abaixo e fazendo o download da biblioteca do Beagle.

• Abra o seu projeto no Android Studio.
• Localize o arquivo Graddle scripts no projeto.
• Nele existem dois arquivos do com o nome gradle. Abra o primeiro cujo nome é build.graddle(project:Beagle)
• Procure o bloco de código allprojects e configure as credenciais do Maven como listadas abaixo.

// Add it in your root build.gradle at the end of repositories:
allprojects {
    repositories {
        google()
        jcenter()
        mavenCentral()
    }
}

• Feche o arquivo build.graddle(project:Beagle)

Feito isso, devemos incluir o kapt plugin e o Beagle como dependências no dependency manager. Para isso, siga estas instruções:

• Abra o arquivo build.graddle(Module:app)

Perceba que alguns plugins já estão listados no começo desse arquivo como mostrado na figura abaixo

• Em seguida, adicione a linha*apply plugin: 'kotlin-kapt'*

Depois disso, você precisa adicionar algumas dependências. Para isso:

• Procure neste arquivo que está mexendo o bloco de código dependencies { }:
• Adicione a variável ext.beagle_version logo acima (no caso, fora) do escopo das dependências
  • Versão atual do Beagle

Copie e cole as linhas abaixo dentro das dependências :

• implementation “br.com.zup.beagle:android:$beagle_version”
• kapt “br.com.zup.beagle:android-processor:$beagle_version”

// Add in your app level dependency
ext.beagle_version = "${beagle_version}"

dependencies {
    implementation "br.com.zup.beagle:android:$beagle_version"
    kapt "br.com.zup.beagle:android-processor:$beagle_version"
}

Ao final destas configurações, o seu arquivo deverá estar assim:

Passo 2: Configurar o Android Manifest

O próximo passo é atualizar o seu projeto no Android Manifest adicionando algumas linhas a este arquivo:

1. A permissão de INTERNET para que sua aplicação seja capaz de acessar a internet. <uses-permission android:name="android.permission.INTERNET" />

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.beagleexamples">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        ...
        android:usesCleartextTraffic="true"
        ...

Uma dica é deixar este arquivo aberto porque vamos usá-lo de novo em outro momento.

Passo 3: Configurar Network, Cache e Logger

Agora que seu projeto está criado, você deve fazer as configurações do Beagle. Para isso, siga os passos abaixo:

Passo 4: Criar o AppBeagleConfig

Em um próximo passo, você deve criar uma classe chamada AppBeagleConfig. Ela faz parte das configurações iniciais do Beagle e é nela que vamos registrar algumas configurações importantes.

Ao criá-la, devemos garantir que ela esteja configurada da seguinte forma:

• Anotada com o @BeagleComponent
• E deve estender (extend) da classeBeagleConfig

Para criar o AppBeagleConfig, siga estes passos:

1. Primeiro vamos criar o pacote que conterá nossos arquivos de configuração.
2. Clique com botão direito do mouse no pacote principal do seu projeto e click em new > package __conforme a figura abaixo:

Embora você possa nomeá-lo como preferir, sugerimos que para este tutorial você use o nomebeagle

3. Clique com o botão direito do mouse no pacote beagle e clique em **new>Kotlin File/Class**

**4. **Nomeie como AppBeagleConfig e pressione ENTER

5. Copie e cole as configurações abaixo no arquivo AppBeagleConfig que acabou de criar. Perceba que ele implementará os atributos: baseUrl, environment, isLoggingEnabled, cache.

• O baseUrl retorna a URL base do seu ambiente.
• O environment retorna o current build state da sua aplicação.
• O isLoggingEnabled retorna a visualização de log da aplicação.
• O cache retorna a configuração de gerenciamento de cache.

import br.com.zup.beagle.android.annotation.BeagleComponent
import br.com.zup.beagle.android.setup.BeagleConfig
import br.com.zup.beagle.android.setup.Cache
import br.com.zup.beagle.android.setup.Environment

@BeagleComponent
class AppBeagleConfig : BeagleConfig {
    override val baseUrl: String get() = "http://10.0.2.2:8080" // return the base url based on your environment
    override val environment: Environment get() = Environment.DEBUG // return the current build state of your app
    override val isLoggingEnabled: Boolean = true
    override val cache: Cache get() = Cache(
        enabled = true, // If true, we will cache data on disk and memory.
        maxAge = 300, // Time in seconds that memory cache will live.
        memoryMaximumCapacity = 15 // Memory LRU cache size. It represents number of screens that will be in memory.
    ) // Cache management configuration
}

Passo 5: BeagleActivity

O Beagle oferece uma Activity padrão para gerenciar todas as server-driven activities que recebe. No entanto, é possível criar uma activity mais específica para lidar com determinados componentes server-driven de forma diferente. Você criará essa nova activity herdando de BeagleActivity e anotando-a com @BeagleComponent. Para mais detalhes sobre como criar essa classe, clique em Beagle Activity Customizada

Passo 6: Inicializar o Beagle e o Design System

Agora, você deve inicializar sua Application para que o Beagle gere os outros arquivos de configuração que necessita. Para isso, basta clicar emMake project (símbolo de MARTELO) ou use o comando CTRL + F9.

Ao ser inicializado, o Beagle irá criar automaticamente o arquivo BeagleSetup, que estará na pasta de arquivos gerados como mostrado na figura abaixo:

Passo 7: Criar a classe AppApplication

Nesta etapa, você precisa criar uma classeKOTLIN que estenda da classe Application. Neste exemplo, vamos nomeá-la de AppApplication.

É preciso realizar algumas configurações para que a pasta cumpra seu papel de chamar a função BeagleSetup().init(this) em seu método onCreate. Siga os passos abaixo:

1. Clique com o botão direito do mouse no pacote principal do seu projeto (beagleapp) e selecione:
   • new > Kotlin file/class
   • Nomeie o arquivo como AppApplication e aperte enter
   • Configure-a como no exemplo abaixo:

class AppApplication: Application() {

    override fun onCreate() {
        super.onCreate()
        BeagleSetup().init(this)
    }
}

2. Para finalizar a implementação, você deve declarar a classe no Android Manifest que criamos no começo e que já está aberto.

O nome da suaapplication agora é o nome desta classe que você criou. Faça o update do Android Manifest como indicado abaixo:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.beagleexamples">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:name=".beagle.AppApplication"

        ...

Tudo o que você precisa agora é configurar um backend para responder as requisições da sua aplicação. Feita esta configuração, inicie a sua aplicação e você verá sua primeira tela server-driven!

Passo 8: Exibir sua Tela Server-Driven

É muito simples exibir uma tela server-driven. Agora que toda a configuração do Beagle está pronta, você precisa seguir estes passos:

• Abra o arquivo MainActivity.kt
• Declare o intent como listado abaixo. Ele vai definir o endereço que tem as informações da sua tela no backend que você configurou.
• Copie e cole o intent listado abaixo no método onCreate.

val intent = this.newServerDrivenIntent<AppBeagleActivity>(ScreenRequest("/screen"))
startActivity(intent)
finish()

• SuaMainActivity.kt deve ficar assim:

Agora basta somente clicar em Run app e checar sua tela no emulador!
Você verá esta tela:

Feedback

Was this page helpful?

Glad to hear it! Please tell us how we can improve.

Sorry to hear that. Please tell us how we can improve.