Como faço para criar uma imagem no Beagle que funciona para Angular, Android e iOS?

Question

Gostaria de saber como faço para criar uma imagem no Beagle que seja compatível com todas essas três plataformas: Angular, Android e iOS.

Está funcionando bem em meu aplicativo Angular, mas não consigo fazê-lo funcionar em nenhuma plataforma móvel.

Este é meu código para o back-end:

Image(Local.justWeb('/public/logo.png'))

Vi que tem um Local.both, mas não sei exatamente como usá-lo.

Answer 1

Uma imagem pode ser de dois tipos: local ou remota. As imagens remotas usam apenas uma URL e funcionam da mesma forma em qualquer plataforma.

No entanto, este é o caso das imagens locais. Um recurso de imagem local funciona de maneira diferente dependendo da plataforma. Para aplicativos da web, você sempre precisará de um URL. Para aplicativos móveis, você precisará de um identificador para localizar o recurso.

No back-end, você pode escrever Local.justWebse seu aplicativo tiver apenas clientes da web ou Local.justMobilese seu aplicativo tiver apenas clientes móveis. Se precisar que funcione em todas as plataformas, você pode usar Local.both.

• Local.justWeb aceita um único parâmetro: o URL relativo à raiz do site.
• Local.justMobile aceita um único parâmetro: o identificador do recurso em plataformas móveis.
• Local.bothaceita dois parâmetros: primeiro: o URL do aplicativo da web; segundo: o identificador para plataformas móveis.

No Android, primeiro você precisa importar a imagem como um recurso (guia de recursos> importar). Um identificador de recurso pode ser definido em sua classe de sistema de design. Se você ainda não tem uma classe de sistema de design, pode criá-la. Veja o exemplo abaixo:

package com.myapp.beagle

import com.myapp.R
import br.com.zup.beagle.android.annotation.BeagleComponent
import br.com.zup.beagle.android.setup.DesignSystem

@BeagleComponent
class DesignSystem : DesignSystem() {
    override fun image(id: String): Int? {
        return when (id) {
            "informationImage" -> android.R.drawable.ic_menu_help
            "delete" -> android.R.drawable.ic_delete
            "TestImage" -> android.R.drawable.editbox_dropdown_dark_frame
            "logo" -> R.drawable.logo // <-- your identifier goes here
            else -> android.R.drawable.ic_menu_help
        }
    }
}

No iOS, você só precisa criar o recurso com nome igual ao mobileId que você vai usar. Para criar um novo recurso, no xCode, clique na pasta de ativos> botão +> criar imagem.