Advertisement
  1. Code
  2. Mobile Development
  3. React Native Templates

Começando Com um Modelo de App de React Native

Scroll to top
Read Time: 9 min

() 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:

MStore Template Home pageMStore Template Home pageMStore Template Home page

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

MStore Template CartMStore Template CartMStore Template Cart
MStore Template CheckoutMStore Template CheckoutMStore Template Checkout
MStore Template LoginMStore Template LoginMStore Template Login
MStore Template Product PageMStore Template Product PageMStore Template Product Page

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 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.
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.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.