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:
1 |
Error building DependencyGraph: |
2 |
Error: Watcher took too long to load |
3 |
Try running `watchman version` from your terminal |
4 |
https://facebook.github.io/watchman/docs/troubleshooting.html |
5 |
at [object Object]._onTimeout (index.js:103:16) |
6 |
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.
1 |
WordPress: { |
2 |
Address: 'http://mstore.io/api', |
3 |
},
|
4 |
WooCommerce: { |
5 |
url: 'http://mstore.io', |
6 |
consumerKey: '', |
7 |
consumerSecret: '', |
8 |
wp_api: true, |
9 |
version: 'wc/v1', |
10 |
timeout: 10, //request timeout |
11 |
RootCategoryId: 0, |
12 |
Product: { |
13 |
Display: { |
14 |
ProductThumbnails: {width: 180, height: 216,}, |
15 |
CatalogImages: {width: 300, height: 360,}, |
16 |
SingleProductImage: {width: 600, height: 720,} |
17 |
}
|
18 |
},
|
19 |
},
|
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-
.
1 |
Icon: { //App's icons. Checkout http://fontawesome.io/icons/ for more icons. |
2 |
Menu: 'ios-menu', |
3 |
Home: 'ios-home', |
4 |
Back: 'ios-arrow-back', |
5 |
Forward: 'ios-arrow-forward', |
6 |
Config: 'ios-settings', |
7 |
More: 'ios-more', |
8 |
SignIn: 'ios-log-in', |
9 |
SignOut: 'ios-log-out', |
10 |
ShoppingCart: 'ios-cart', |
11 |
ShoppingCartEmpty: 'ios-cart-outline', |
12 |
Sort: 'ios-funnel', |
13 |
Filter: 'ios-funnel-outline', |
14 |
ShowItem: 'ios-arrow-dropright', |
15 |
HideItem: 'ios-arrow-dropup', |
16 |
ListMode: 'ios-list-box', |
17 |
GridMode: 'ios-grid', |
18 |
RatingFull: 'ios-star', |
19 |
RatingEmpty: 'ios-star-outline', |
20 |
Wishlist: 'ios-heart', |
21 |
WishlistEmpty: 'ios-heart-outline', |
22 |
Delete: 'ios-trash', |
23 |
AddToCart: 'ios-cart', |
24 |
MyOrder: 'ios-cube', |
25 |
News: 'ios-paper', |
26 |
Mail: 'ios-mail', |
27 |
RatioOff: 'ios-radio-button-off', |
28 |
RatioOn: 'ios-radio-button-on', |
29 |
Search: 'ios-search', |
30 |
Close: 'ios-close', |
31 |
HappyFace:'ios-happy-outline', |
32 |
SadFace: 'ios-sad-outline', |
33 |
},
|
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:
1 |
Image: { |
2 |
Logo: require('./images/logo.png'), |
3 |
SplashScreen: require('./images/splash_screen.png'), |
4 |
CategoryPlaceholder: require('./images/category_placehodler.png'), |
5 |
DefaultAvatar: require('./images/default_avatar.jpg'), |
6 |
AvatarBackground: require('./images/avatar_background.jpg'), |
7 |
CheckoutStep1: require('./images/line-1.png'), |
8 |
CheckoutStep2: require('./images/line-2.png'), |
9 |
CheckoutStep3: require('./images/line-3.png'), |
10 |
Stripe: require('./images/stripe.png'), |
11 |
PayPal: require('./images/PayPal.png'), |
12 |
CashOnDelivery: require('./images/cash_on_delivery.png'), |
13 |
PlaceHolder: require('./images/placeholderImage.png'), |
14 |
},
|
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
esecretKey
. Devemos atualizarsandBoxMode
parafalse
ao publicar o app para produção, porque, por padrão, ele usa o modo sandbox, assim, nenhum dinheiro será gasto nas transações.
1 |
PayPal: { |
2 |
clientID: '', |
3 |
secretKey: '', |
4 |
sandBoxMode: true, //change to false on production |
5 |
},
|
- 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:
1 |
this.styles = { |
2 |
container: {flex: 1}, |
3 |
imageCard: { |
4 |
width: Constants.Dimension.ScreenWidth(1), |
5 |
height: 200, |
6 |
},
|
7 |
mainCategoryText: { |
8 |
color: 'white', //change the color of the category text |
9 |
fontSize: 40 //make the category text bigger |
10 |
},
|
11 |
numberOfProductsText: { |
12 |
color: 'white', |
13 |
fontSize: 15 |
14 |
}
|
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.