Começando Com um Modelo de App de React Native

() translation by (you can also view the original English article)

Projetar um app em React Native do zero é um processo bem trabalhoso—especialmente a parte de design, porque temos de planejar para aparelhos iOS e Android. Não apenas isso, também temos de garantir que sejam visualmente bons em telas de tamanhos diferentes.

É aí que modelos entram em jogo. Eles lidam com o design inicial por nós para que o app pareça bem com esforço de design mínimo nosso. Existem vários desses modelos na CodeCanyon, um mercado para modelos e plugins. Lá, encontramos tipos diferentes de modelos voltados para tipos específicos de apps que queremos criar.

Nesse tutorial, veremos como usar o modelo BeoStore. Como o nome sugere, o BeoStore é um modelo de app de e-commerce para React Native.

Começando com Modelo de um Mercado

Podemos baixar o modelo aindo à página do BeoStore na CodeCanyon. É um modelo pago, mas vale o investimento já que possui vários recursos necessários para apps de e-commerce. Tudo que precisamos é configurar o modelo e customizá-lo ao nosso gosto. Para termos uma ideia do que é oferecido, eis alguns recursos em destaque:

Integração completa com WooCommerce: Se temos um site com WooComerce, o app pode mostrar os mesmos produtos que temos no site.
Suporte a iOS e Android: o app executa e é visualmente bom tanto no Android quanto no iOS.
Logins Sociais: clientes podem acessar usando suas contas do Facebook ou Google.
Customização Fácil: tudo é dividido em componentes. Isso garante fácil customização do modelo baseado na nossa marca.
Notificações Push: alerta automaticamente clientes quando há uma atualizações na situação do pedido. Podemos enviar notificações push para produtos promocionais. Elas são implementadas usando Firebase.
Suporte a vários idioimas: do começo, temos Inglês como idioma principal. Vietinamita existe como segunda opção, mas podemos adicionar nosso próprio idioma.
Integração de pagamento seguro: realizados via PayPal.

Se não temos uma conta da Envato ainda, façamos cadastro aqui. Quando feito, acessemos a conta recém criada. Então, podemos voltar à página da BeoStore e clicar no botão Buy Now.

Preparando o Projeto

Após comprar o modelo, obteremos um link para baixar o arquivo dele. Após extraí-lo, teremos uma pasta CodeCanyon que contem MStore 2.2.

MStore 2.2 é a pasta do projeto do modelo. Abramos o terminal dentro desse diretório e executemos o comando a seguir:

1	npm install

Isso instalará todas as dependências do projeto. Pode demorar um pouco dependenda da velocidade de download, porque são muitas dependências. Para saber quais pacotes precisamos baixar, basta olhar o arquivo package.json.

Após terminado, há um passo adicional se quisermos versões para iOS. Vamos à pasta do iOS e executemos o seguinte:

1	pod install

Depois, para Android, conectemos nosso aparelho móvel ao computador e exeutemos:

1	adb devices

Isso listará os aparelhos Android conectados ao computador. Se for a primeira vez conectando o aparelho, seremos questionados se queremos permitir o computador depurar via USB. Apenas digamos sim quando isso ocorrer.

Agora, podemos executar o app num aparelho Android:

1	react-native run-android

Para iOS:

1	react-native run-ios

Se não encontramos erros, devemos ser recebidos pela página a seguir:

Para ter uma ideia das diferentes páginas existentes no modelo, eis outras capturas de tela:

Solucionando Problemas na Preparação do Projeto

Nessa seção, compilamos uma lista dos erros mais comuns da preparação do projeto e suas soluções.

Servidor de Desenvolvimento Não Inicia

Se o servidor de desenvolvimento não começar sozinho ao executar react-native run-android ou react-native run-ios, podemos executá-lo manualmente via:

1	react-native start

Sentinela Levando Muito Tempo Para Carregar

Se obtivermos um erro parecido ao logo abaixo:

Error building DependencyGraph:
 Error: Watcher took too long to load
Try running `watchman version` from your terminal
https://facebook.github.io/watchman/docs/troubleshooting.html
    at [object Object]._onTimeout (index.js:103:16)
    at Timer.listOnTimeout (timers.js:89:15)

Isso é pela existência de uma instância de Watchman rodando. Esse é um componente do servidor de desenvolvimento do React Native. Resolvemos isso parando Watchman ao executar esses comandos:

1	sudo sysctl fs.inotify.max_user_instances=99999
2	sudo sysctl fs.inotify.max_user_watches=99999
3	sudo sysctl fs.inotify.max_queued_events=99999
4	watchman shutdown-server

Não É Possível Executar ADB Reverse

Se obtivermos um erro parecido ao logo abaixo:

1	error: closed Could not run adb reverse:
2	Command failed: /path/to/android-sdk-linux/sdk/platform-tools/adb -s
3	300494a80ea22200 reverse tcp:8081 tcp:8081

Isso significa que nosso aparelho Android executa uma versão menor que 5.0 (Lollipop). Não é bem um erro. Só quer dizer que o aparelho Android não suporta adb reverse, que é usado para conectar o servidor de desenvolvimento a aparelho pela depuração via USB. Se isso não está disponível, React Native alterna para depuração via Wi-Fi. Podemos ver mais sobre isso aqui: Executando no Aparelho.

Alguma outra coisa pode causar a falha na compilação. Podemos rolar a barra do terminal para ver se algum erro ocorreu antes disso.

Não É Possível Encontrar a Variável `_fbBatchedBridge`

Se vemos esse erro e o servidor de desenvolvimento está no modo Wi-Fi, significa que não configuramos o IP do computador no aparelho Android (costuma acontecer apenas com Androids abaixo da versão 5.0).

1	ReferenceError: Can't find variable: _fbBatchedBridge (line 1 in the generated bundle)

Podemos executar o comando a seguir para mostrar as opções de desenvolvedor da React Native no aparelho:

1	adb shell input keyevent 82

Seleionemos Dev Settings do menu que aparecer. Sob a seção Debugging, apertemos em Debug server hsot & port for device. Digitemos o IP interno atribuido para o roteador junto da porta que o servidor de desenvolvimento roda e apertemos OK:

1	YOUR_INTERNAL_IP:8081

Voltando à tela inicial do app e executemos adb shell input keyevent 82 de novo. Dessa vez escolhamos Reload para recarregar o app.

Não É Possível Encontrar Firebase, App Compat ou GMS Play Services

Se vemos muitos erros "could not find", isso significa que não instalamos os pacotes correspondentes usando o Android SDK Manager.

Eis os pacotes que precisam ser instalados:

Android Support Repository
Android Support Library
Google Play Services
Google Repository

É bom atualizar pacotes existentes se houver alguma atualização disponível.

Outros Problemas

Se nosso problema não involver um dos acima, podemos tentar o seguinte:

Vejamos a documentação sobre solução de problemas
Vejamos comentários do modelo. Podemos buscar pelo erro que aparece. Tentemos generalizar e encurtar a mensagem de erro—não busquemos a mensagem de erro inteira. Se não acharmos o erro, podemos criar nossa própria pergunta no tópito de comentários. A equipe de suporte geralmente responder bem rápido.
Busquemos o erro no Google. Mesmo que os resultados encontrados não resolvam o uso do modelo, eles darão uma ideia de como resover o problema.
Vejamos no StackOverflow ou criemos uma nova pergunta. Incluamos todos os detalhes necessários (mensagem de erro, passos para reproduzí-lo, etc). Há um bom artigo sobre como fazer perguntas no StackOverflow.

Customizando o Modelo

Um bom lugar pra começar a aprender como fazer coisas no modelo é sua documentação:

Layout do Projeto: mostra onde encontras os vários arquivos do modelo e para que são usados.
Migrar WooCommerce: mostra como atrelar nosso site WooCommerce ao app. Atrelar o app ao WooComerce significa que ele poderá buscar todas as categorias e produtos no loja.
Migrar Serviços: mostra como configurar o nome do app, Firebase (para notificações Push) e login social.
Customização: mostra como customizar o idioma e temas.

É bom lê-los! Não repetiremos o que está escrito na documentação. Contudo, o que faremos nessa seção é customizar o modelo para parecer do jeito que quisermos.

A maioria das configurações do projeto são salvas no arquivo app/Constants.js. Eis alguns exemplos do que podemos mudar no arquivo:

Integração com WooCommerce: A URL da loja WooComerce usada pelo app. Por padrão, mstore.io.

WordPress: {
    Address: 'http://mstore.io/api',
},
WooCommerce: {
    url: 'http://mstore.io',
    consumerKey: '',
    consumerSecret: '',
    wp_api: true,
    version: 'wc/v1',
    timeout: 10, //request timeout
    RootCategoryId: 0,
    Product: {
        Display: {
            ProductThumbnails: {width: 180, height: 216,},
            CatalogImages: {width: 300, height: 360,},
            SingleProductImage: {width: 600, height: 720,}
        }
    },
},

Logins Sociais: Implementado via Auth0, uma plataforma de autenticação. Por padrão, o modelo apenas suporta acessos com Google e Facebook. Mas podemos adicionar qualquer serviço que o Auth0 suportar.

1	Auth0: {
2	clientId: '',
3	domain: '',
4	},

Ícones: Podemos usar qualquer ícone da Fontawesome, mas devemos prefixá-los com ios-.

Icon: { //App's icons. Checkout http://fontawesome.io/icons/ for more icons.
    Menu: 'ios-menu',
    Home: 'ios-home',
    Back: 'ios-arrow-back',
    Forward: 'ios-arrow-forward',
    Config: 'ios-settings',
    More: 'ios-more',
    SignIn: 'ios-log-in',
    SignOut: 'ios-log-out',
    ShoppingCart: 'ios-cart',
    ShoppingCartEmpty: 'ios-cart-outline',
    Sort: 'ios-funnel',
    Filter: 'ios-funnel-outline',
    ShowItem: 'ios-arrow-dropright',
    HideItem: 'ios-arrow-dropup',
    ListMode: 'ios-list-box',
    GridMode: 'ios-grid',
    RatingFull: 'ios-star',
    RatingEmpty: 'ios-star-outline',
    Wishlist: 'ios-heart',
    WishlistEmpty: 'ios-heart-outline',
    Delete: 'ios-trash',
    AddToCart: 'ios-cart',
    MyOrder: 'ios-cube',
    News: 'ios-paper',
    Mail: 'ios-mail',
    RatioOff: 'ios-radio-button-off',
    RatioOn: 'ios-radio-button-on',
    Search: 'ios-search',
    Close: 'ios-close',
    HappyFace:'ios-happy-outline',
    SadFace: 'ios-sad-outline',
},

Tema: Cores para diversos componentes que compõe a página também são atualizáveis. Por exemplo, se quisermos mudar a cor de plano de fundo do cabeçalho, podemos alterar TopBar:

1	Color: {
2	TopBar: 'white',
3	TopBarIcon: '#283747',
4	}

Imagens: A tela de abertura e outras imagens podem ser atualizadas dando um novo caminho em cada um desses:

Image: {
    Logo: require('./images/logo.png'),
    SplashScreen: require('./images/splash_screen.png'),
    CategoryPlaceholder: require('./images/category_placehodler.png'),
    DefaultAvatar: require('./images/default_avatar.jpg'),
    AvatarBackground: require('./images/avatar_background.jpg'),
    CheckoutStep1: require('./images/line-1.png'),
    CheckoutStep2: require('./images/line-2.png'),
    CheckoutStep3: require('./images/line-3.png'),
    Stripe: require('./images/stripe.png'),
    PayPal: require('./images/PayPal.png'),
    CashOnDelivery: require('./images/cash_on_delivery.png'),
    PlaceHolder: require('./images/placeholderImage.png'),
},

Essas imagens são salvas na pasta app/images, podemos simplesmente substituí-las se não quisermos as antigas.

Também podemos mudar as opções do PayPal aqui. Devemos ter uma conta de Desenvolvedor do PayPal para ter a clientID e secretKey. Devemos atualizar sandBoxMode para false ao publicar o app para produção, porque, por padrão, ele usa o modo sandbox, assim, nenhum dinheiro será gasto nas transações.

PayPal: {
    clientID: '',
    secretKey: '',
    sandBoxMode: true, //change to false on production
},

Para customizar páginas individuais, devemos ir em app/containers. Aqui encontraremos os arquivos de cada página. Por exemplo, se quisermos customizar a página inicial, naviguemos à pasta home e abramos index.js. Uma vez aberto, veremos que a página usa o componente <ImageCard> para renderizar cada categoria de produto. Se quisermos adicionar um estilo geral ao componente, temos de atualizar o arquivo app/Components/ImageCard/index.js. Caso contrário, podemos atualizar o estilos na página em si:

this.styles = {
    container: {flex: 1},
    imageCard: {
        width: Constants.Dimension.ScreenWidth(1),
        height: 200,
    },
    mainCategoryText: {
        color: 'white', //change the color of the category text
        fontSize: 40 //make the category text bigger
    },
    numberOfProductsText: {
        color: 'white',
        fontSize: 15
    }
}

Conclusão

Esse tutorial, de forma alguma, é um guia complte sobre como usar o modelo BeoStore. Mas combrimos muita coisa, especialmente na solução de problemas da preparação, que a documentação oficial é fraca.

O próximo passo é atrelar esse modelo ao nosso site WooCommerce ou ainda ajustá-lo de modo que possa ser usado com outros tipos de apps.

Baixemos o modelo agora ou, se quisermos aprender mais sobre el, vejamos sua documentação aqui. Também encontramos outros modelos de app em React Native no CodeCanyon.