Primeiros Passos

Tópicos abordados

• Criando um projeto iOS do zero
• Adicionando o Beagle ao seu projeto (funciona com projetos já existentes)
• Configurando o Beagle
• Outras customizações

Requisitos

• MacOS com Xcode 11+ instalado
• Swift Package Manager (já vem instalado com o Xcode), Cocoapods ou Carthage
• iOS 10.0+
• Swift 5.0+

Criando um projeto iOS do zero

Nós vamos usar Xcode 11+ nesse exemplo, então se você ainda não instalou, é necessário fazer o download na AppStore.

Passo 1: Abra o seu Xcode e clique em File -> New -> Project.

Passo 2: Selecione a opção App e clique em ‘Next’.

Passo 3: Nomeie o seu projeto, selecione a interface como Storyboard, linguagem Swift e clique em ‘Next’.

Passo 4: Informe onde deseja salvar seu projeto e confirme.

Adicionando o Beagle ao seu projeto

Você pode instalar o Beagle utilizando o SPM (Swift Package Manager), Cocoapods ou o Carthage. Escolha um e siga os passos abaixo:

Versão mais atual do Beagle:

Esta documentação é referente a versão: v2.1

• Swift Package Manager
• Cocoapods
• Carthage

dependencies: [
  .package(name: "Beagle", url: "https://github.com/ZupIT/beagle.git", from: "${beagle.version}"}}),
]

targets: [
  .target(name: "MyApp", dependencies: ["Beagle"], path: "Sources")
]

target 'MyApp' do
  pod 'Beagle'
end

Configurando o Beagle

Depois da instalação, você precisa configurar o Beagle pra rodar na sua aplicação. Para isso, siga as instruções abaixo:

Passo 1: Crie uma classe BeagleConfig:

Essa classe contém a parte das configurações iniciais do Beagle. Agora você precisa implementar uma função estática config, e ela irá aplicar as demais configurações.

import Beagle
import Foundation

class BeagleConfig {
    static func config() {}
}

Passo 2: Nessa função, crie uma constante chamada dependencies do tipo BeagleDependencies.

Você vai atribuir a essa constante algumas configurações do projeto, por exemplo, a URL base que combinada com uma URL relativa irá trazer um JSON que descreve sua tela server-driven.

Para configurar uma URL base, por exemplo, veja o código abaixo:

import Beagle
import Foundation

class BeagleConfig {
    static func config() {
        let dependencies = BeagleDependencies()
        dependencies.urlBuilder = UrlBuilder(
            baseUrl: URL(string: "http://localhost")
        )
        BeagleConfigurator.setup(dependencies: dependencies)
    }
}

Passo 3: Configure a classe SceneDelegate para que você possa utilizá-la para inicializar a sua aplicação com o Beagle a partir de uma tela do BFF:

1. Dentro do SceneDelegate.swift na função scene, chame a função BeagleConfig.config();

2. Nomeie o guard let como windowScene, o Xcode já criou para você;

3. Inicialize a variável window criada fora do escopo da função, utilizando a windowScene;

4. Faça o window.rootViewController como a tela do BFF que você quer mostrar;

5. Agora chame a função makeKeyAndVisible() da variável window.

Seu código deve estar parecido com o modelo abaixo:

import UIKit
import Beagle

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        BeagleConfig.config()
        guard let windowScene = (scene as? UIWindowScene) else { return }
        window = UIWindow(windowScene: windowScene)
        window?.rootViewController = BeagleScreenViewController(.remote(.init(url: "/yourScreenRelativeURL")))
        window?.makeKeyAndVisible()
    }

}

Você pode criar essas camadas usando esses tutoriais:

Camada de Rede customizada

Sistema de Log customizado

Se você quiser pular essas configurações, você pode utilizar a biblioteca de apoio do Beagle: Beagle Scaffold contém implementações padrão de camadas de Rede e Log.

No entando, você deve se lembrar que é muito importante customizar sua própria camada de Rede pela segurança.

Outras customizações

• Ações: você pode criar ações customizadas que serão executadas pelos seus widgets de acordo com as interações dos usuários na sua aplicação
• Animações de navegação: Você pode customizar as animações de navegação das telas do Beagle.
• Camada de Rede: Você pode customizar a camada de rede para configurar a forma que o Beagle irá fazer as requisições.
• Carregamento e tratamento de erros: Você pode customizar o tratamento de erro e o loading das telas server-driven.
• Deep Link handler: Você pode configurar o Deep Link Handler para ter navegação de uma tela server-driven para uma tela nativa.
• Image Downloader: Você pode customizar a forma como as imagens serão baixadas para serem exibidas pelo Beagle.
• Design System: Você pode customizar seu design system para construir telas mais bonitas.
• Serializador e Desserializador: Você pode customizar a forma como o Beagle serializa e desserializa.
• Log: Você pode customizar a maneira como os logs gerados pelo Beagle serão exibidos.
• Widget: Você pode criar componentes específicos para seu projeto e utilizá-los na criação de telas server-driven.
• Operações: Você pode criar suas operações para manipular o Context de uma forma mais simples através do seu backend.
• Analytics: Você pode configurar um analytics para gerar reportes de telas e ações.

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.