Visão Geral

Iniciando um projeto iOS

Para criar um projeto iOS no Beagle, você primeiro precisa ter o Xcode instalado. Caso ainda não o tenha instalado ainda, faça o download na Mac App Store.

Antes de começar, você primeiro precisar criar um projeto no Xcode. Para isso, basta abrir o programa e nomear o seu projeto. Para este exemplo, colocaremos como Beagle Sample.

Após criar o seu projeto, precisaremos adicionar as dependências. Para isso, usaremos o gerenciador CocoaPods.

Passo 1: Configurar o Cocoa Pods

Você usará o terminal para instalar o CocoaPods, para isto abra o terminal e digite sudo gem install cocoapods

sudo gem install cocoapods

Para configurá-lo, navegue até sua pasta pelo terminal e digite o comando: pod init

pod init

Depois, abra o folder do projeto usando o comando: open .

open .

Feito isso, você deve selecionar o arquivo podfile assim como apresentado na imagem abaixo:

Abra o arquivo e adicione as seguintes dependências:

target 'Beagle Sample' do
    pod 'Beagle'
    pod 'YogaKit', :git => 'https://github.com/ZupIT/YogaKit'
end

Abra novamente o terminal e digite o comando: pod install para que as dependências sejam instaladas.

pod install

Depois da instalação, você deve abrir o arquivo que possui a extensão workspace. Neste exemplo, nós o chamaremos de Beagle Sample.workspace

Passo 2: Configurar o Beagle

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

1. Crie uma classe chamadaBeagleConfig .

Esta classe será responsável por conter parte da configuração inicial do Beagle. Nela, implementaremos uma função estática config para aplicar essas configurações.

2. Nesta função crie uma constante chamada dependency que deve ser do tipo BeagleDependencies.

A esta constante serão atribuídas algumas configurações do projeto, como por exemplo, listar a URL base que lista o JSON a ser utilizado na construção de uma tela server-driven. Para configurar esta constante, use o exemplo abaixo:

import Beagle
import Foundation

class BeagleConfig {
    static func config() {

        let dependencies = BeagleDependencies()
        dependencies.urlBuilder = UrlBuilder(
            baseUrl: URL(string: "http://localhost")
        )
        Beagle.dependencies = dependencies
    }
}

Agora, vamos configurar a classe SceneDelegate para que possamos inicializar nossa aplicação com o Beagle a partir de uma tela via BFF:

• Crie a constante beagleScreen, que irá receber a tela server-driven.
• O argumento init URL deve conter o endereço da URL relativa que será criada no backend (BFF). No nosso exemplo a chamaremos de “/screen”

Siga o exemplo abaixo:

let beagleScreen = Beagle.screen(.remote(.init(url: "/screen")))
window = UIWindow(frame: UIScreen.main.bounds)
window?.windowScene = windowScene
window?.rootViewController = beagleScreen
window?.makeKeyAndVisible()

Ao final, a classe SceneDelegate deve ficar assim:

Passo 3: Configurar o Xcode

Inicialmente, as propriedades do Xcode estão configuradas para que sua aplicação seja iniciada via main.storyboard. No entanto, agora quem deve iniciar a aplicação é o Beagle e, para que isso ocorra, devemos mudar essas propriedades apagando as referências ligadas ao main.storyboard.

Estas referências estão no main project file, na**Info tab**, e estão assim organizadas:

A primeira fica na sessão:
Custom iOS Target Properties >
Main storyboard file base name

A segunda fica na sessão:
Application Scene Manifest>
Scene Configuration>
Application Session Role >
Item 0 (Default Configuration)>
Storyboard name.

No GIF abaixo, você vê melhor como remover as referências:

Feito! O Beagle está configurado na sua aplicação iOS. Agora, tudo o que você precisa é configurar um backend para responder as requisições do seu aplicativo server-driven.

Feita essa configuração, inicie a sua aplicação e você terá sua primeira tela server-driven!
Você verá a tela a seguir:

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.