Visão Geral
Nesta seção, você encontra um passo a passo para iniciar um projeto Android com Beagle.
Beagle v1.7 não é mais mantida ativamente. A versão documentada que você está visualizando pode conter funcionalidades depreciadas. Para obter as funcionalidades mais recentes, consulte a nossa última versão .
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:
BeagleApp
.Kotlin
.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:
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.
Graddle scripts
no projeto.gradle
. Abra o primeiro cujo nome é build.graddle(project:Beagle)
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()
// < 1.1.0
maven {
url 'https://dl.bintray.com/zupit/repo'
}
// >= 1.1.0
mavenCentral()
}
}
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:
build.graddle(Module:app)
Perceba que alguns plugins
já estão listados no começo desse arquivo como mostrado na figura abaixo
apply plugin: 'kotlin-kapt'
*Depois disso, você precisa adicionar algumas dependências. Para isso:
dependencies { }
:ext.beagle_version
logo acima (no caso, fora) do escopo das dependênciasCopie e cole as linhas abaixo dentro das dependências :
// 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"
}
Insira a versão de release do Beagle no lugar de ${beagle.version}
, ou seja, coloque a versão do Beagle destacada em azul da badge acima, mas sem o caracter v que antecede os números de versão.
Por exemplo: undefined-ext.beagle.version = "0.2.8"
Ao final destas configurações, o seu arquivo deverá estar assim:
O próximo passo é atualizar o seu projeto no Android Manifest adicionando algumas linhas a este arquivo:
<uses-permission android:name="android.permission.INTERNET" />
Se você tiver dificuldade para encontrar este ou qualquer arquivo, basta usar a ferramenta de busca do Android Studio.
Para habilitá-la, aperte o botão**SHIFT
**do seu teclado duas vezes e a interface de busca aparecerá . Feito isso, é só digitar AndroidManifest
e o Android Studio o localizará.
<?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.
usesCleartextTraffic:
** indica que o aplicativo pretende usar o tráfego de rede de texto não criptografado, HTTP. O valor padrão para aplicativos que visam o nível de API 27 ou inferior é **true
**. Os aplicativos que têm como alvo o nível de API 28 ou superior são padronizados como **false
**.android: usesCleartextTraffic = "true"
dentro da tag
<application>
é usado para se comunicar com o BFF local. Se você pretende depurar
o projeto usando um BFF local, você pode usar essa configuração como uma etapa de configuração rápida.release
, recomendamos que você use o networkSecurityConfig
, que você pode configurar usando as instruções na página de desenvolvedores do Android.Agora que seu projeto está criado, você deve fazer as configurações do Beagle. Para isso, siga os passos abaixo:
O Beagle
não fornece uma configuração de ** Rede **, ** Cache ** e ** Logger ** padrão em seus componentes internos, sendo necessário implementá-los para que o Beagle funcione conforme o esperado. Você pode criar suas próprias configurações seguindo os exemplos abaixo:
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:
@BeagleComponent
estender (extend)
da classeBeagleConfig
Para criar o AppBeagleConfig, siga estes passos:
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
AppBeagleConfig
que acabou de criar. Perceba que ele implementará os atributos: baseUrl, environment, isLoggingEnabled, cache.
baseUrl
retorna a URL base do seu ambiente.environment
retorna o current build state
da sua aplicação.isLoggingEnabled
retorna a visualização de log da aplicaçã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
}
A partir deste ponto do tutorial, iremos testar nossas telas Server-Driven usando o local host. Por isso, é importante que nossa**baseURL
** seja o seu local host.
Outro ponto de atenção é que, neste momento, o Beagle espera que classes anotadas com @BeagleComponent
tenham seus construtores vazios.
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
Importante! O que é o Design System?
É o design system que guarda os registros dos componentes de estilo criados no frontend e é assim que sua aplicação Android “saberá” qual componente de estilo deve aplicar a cada elemento de uma tela Server-Driven. É na tela server driven que os elementos visuais (views) são utilizados na construção da sua tela.
Embora você possa criá-lo agora se quiser, não é necessário para as configurações iniciais, para que você possa testar logo o Beagle! Você pode prosseguir sem configurá-lo. Mas saiba que o Design System é o pulmão da aplicação server-driven!
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:
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:
new
> Kotlin file/class
AppApplication
e aperte enter
class AppApplication: Application() {
override fun onCreate() {
super.onCreate()
BeagleSetup().init(this)
}
}
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!
É muito simples exibir uma tela server-driven. Agora que toda a configuração do Beagle está pronta, você precisa seguir estes passos:
MainActivity.kt
intent
como listado abaixo. Ele vai definir o endereço que tem as informações da sua tela no backend que você configurou.intent
listado abaixo no método onCreate
.val intent = this.newServerDrivenIntent<AppBeagleActivity>(ScreenRequest("/screen"))
startActivity(intent)
finish()
MainActivity.kt
deve ficar assim:Agora basta somente clicar em Run app
e checar sua tela no emulador!
Você verá esta tela:
Nesta seção, você encontra um passo a passo para iniciar um projeto Android com Beagle.
Nesta seção, você encontra um tutorial para configurar o Design System do Beagle no Android
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.