Crie um aplicativo de comércio eletrônico do zero com React Native

Os desenvolvedores de aplicativos móveis trabalham com vários tipos de projetos, incluindo aplicativos móveis de comércio eletrônico que os clientes podem usar para comprar produtos online. O número de usuários de smartphones no mundo está aumentando drasticamente a cada dia e, portanto, cada empresa de venda de produtos provavelmente espera fornecer um serviço de compra conveniente por meio de um aplicativo móvel de comércio eletrônico.

Esses aplicativos consistem em vários aplicativos genéricos. telas, como uma lista de produtos, página de detalhes do produto, carrinho de compras, área de checkout e páginas de inscrição/login. Alguns aplicativos móveis também podem ter espaço para comentários de clientes, configurações pessoais e muitos outros recursos. Como qualquer outro aplicativo empresarial, os aplicativos móveis também precisam ser lançados nas lojas de aplicativos do Google Play e da Apple para atingir um amplo público de clientes.

Ecommerce React aplicativos nativos no GitHub em vez de criar seus próprios do zero

Desenvolvedores de aplicativos móveis geralmente tendem a construir seus aplicativos com estruturas de plataforma cruzada para entrega rápida de projetos. Em parte, é por isso que o React Native é uma estrutura popular para a construção de aplicativos móveis multiplataforma-permite que os desenvolvedores criem facilmente aplicativos nativos em um ambiente de desenvolvimento baseado no React.

A maioria dos desenvolvedores autônomos procuram primeiro o React Native de código aberto. modelos de aplicativos de comércio eletrônico e personalizá-los de acordo com os requisitos de seus usuários. Mas a maioria dos modelos de aplicativos existentes para aplicativos de comércio eletrônico no React Native no GitHub usa um pouco do Redux complexo para fins de gerenciamento de estado centralizado, e muitos desses projetos incluem coisas que você não precisa.

Com isso em mente, pode ser uma decisão mais sábia criar seu próprio modelo de aplicativo de comércio eletrônico React Native do zero. Neste tutorial, vou explicar como fazer exatamente isso.

O que vamos construir?

Vamos construir um aplicativo móvel de comércio eletrônico com vários aplicativos genéricos (e, portanto, personalizáveis ) recursos. O aplicativo possui as três telas a seguir.

Tela de produtos
A tela de produtos lista vários produtos e serve como a página inicial do aplicativo. Cada item do produto é renderizado com um título, preço e imagem. Tela de detalhes do produto
Quando o usuário toca em um item específico do produto na página do produto, o aplicativo leva o usuário para a tela de detalhes do produto. A tela de detalhes do produto mostra todas as informações sobre o produto atual. Também existe um botão para adicionar o produto ao carrinho de compras; quando o usuário clica no botão Adicionar ao carrinho , a contagem de itens do ícone do carrinho é atualizada. Tela do carrinho de compras
Esta tela mostra um resumo de todos os produtos adicionados ao carrinho de compras. Ele mostrará uma lista de produtos com nome, quantidade, subtotal e total do produto.

Construindo o aplicativo de comércio eletrônico com React Native

Vamos criar um novo projeto React Native. Neste tutorial, usarei o Expo CLI para construir o aplicativo de comércio eletrônico.

Você pode usar o React Native CLI ou o Expo CLI para construir aplicativos React Native, mas se você usar o React Native CLI, você precisará configurar o ambiente do desenvolvedor sozinho. Por exemplo, se você precisa testar seu aplicativo em um dispositivo Android, você precisa configurar os SDKs Android necessários.

Por outro lado, a Expo CLI permite desenvolver aplicativos React Native sem instalar nenhum dispositivo móvel SDKs de desenvolvimento para o seu computador.

Configurando um novo projeto React Native

Execute o seguinte comando para instalar o Expo CLI. Certifique-se de ter uma versão LTS mais recente do Node.js e do npm.

Observação: se você estiver criando no Ubuntu OS, nvm é uma boa ferramenta de instalação para acompanhar e atualizar para a versão mais recente do Node LTS.

npm install-g expo-cli

​​O comando a seguir irá criar um novo projeto React Native.

expo init e-commerce-app

Se ele solicitar um modelo, selecione a opção de modelo em branco. Depois disso, execute o seguinte comando para começar a desenvolver o aplicativo.

npm start # ou yarn start

Agora você pode ver suas alterações de código ao vivo com o aplicativo móvel Expo Go . (Disponível na Play Store e na App Store.) Vou demonstrar o aplicativo usando um dispositivo Android.

Faça a leitura do código QR fornecido pelo comando acima com seu telefone celular para abrir o aplicativo.

Criando a lista de produtos

Estamos criando um aplicativo móvel multitela, e a lista de produtos é uma das telas do aplicativo. Podemos usar uma extensão de navegação React Native para construir aplicativos multitelas.

Instale o popular React Navigation pacote com os seguintes comandos.

npm install @ react-navigation/native expo install react-native-screens react-native-safe-area-context npm install @ react-navigation/native-stack

As informações do produto são normalmente obtidas por meio de uma API da web. Mas, por enquanto, vamos criar um serviço de API simulado para obter vários produtos e colocar nosso aplicativo móvel em execução. Adicione o seguinte código ao arquivo./services/ProductsService.js.

const PRODUCTS=[{id: 100, name:’ReactProX Headset’, price: 350, image: require (‘../assets/products/headset-100.jpg’), descrição:’Um fone de ouvido combina um fone de ouvido com um microfone. Os fones de ouvido são feitos com um fone de ouvido único (mono) ou um fone de ouvido duplo (mono para ambos os ouvidos ou estéreo).’}, {id: 101, name:’FastLane Toy Car’, price: 600, image: require (‘../assets/products/car-101.jpg’), description:’A model car, or toy car, é uma representação em miniatura de um automóvel. Outros veículos motorizados em miniatura, como caminhões, ônibus ou até mesmo ATVs, etc. são frequentemente incluídos nesta categoria geral.’}, {id: 102, name:’SweetHome Cupcake’, price: 2, image: require (‘../assets/products/cake-102.jpg’), description:’A cupcake (também inglês britânico: bolo de fadas ; Hiberno-Inglês: pão; Inglês australiano: bolo de fada ou bolo patty [1]) é um pequeno bolo projetado para servir uma pessoa.’}]; função de exportação getProducts () {return PRODUCTS; } função de exportação getProduct (id) {return PRODUCTS.find ((product)=> (product.id==id)); }

Como você pode ver, o serviço acima funcionará como um servidor de API simulado para recuperar informações do produto. A função getProducts lista todos os produtos existentes e a função getProduct retorna detalhes do produto para um determinado identificador de produto. Certifique-se de armazenar suas imagens de produto de amostra no diretório ativos/produtos.

Agora que temos os dados do produto, precisamos criar um componente reutilizável para um único item de produto porque a lista de produtos tem vários produtos. Adicione o seguinte código em./components/Product.js.

import React from’react’; import {Text, Image, View, StyleSheet, TouchableOpacity} de’react-native’; export function Product ({name, price, image, onPress}) {return ( {name} $ {price} ); } const styles=StyleSheet.create ({card: {backgroundColor:’white’, borderRadius: 16, shadowOpacity: 0.2, shadowRadius: 4, shadowColor:’black’, shadowOffset: {height: 0, width: 0,}, elevação: 1, marginVertical: 20,}, polegar: {height: 260, borderTopLeftRadius: 16, borderTopRightRadius: 16, largura:’100%’,}, infoContainer: {padding: 16,}, nome: {fontSize: 22, fontWeight:’negrito’,}, preço: {fontSize: 16, fontWeight:’600′, marginBottom: 8,},});

O componente do produto é responsável por renderizar um produto quando o nome, o preço e as propriedades da imagem são fornecidos. Este componente aceita um retorno de chamada de evento de toque que abre a tela de detalhes do produto. Como você já deve ter notado, também existem algumas regras de estilo aplicadas para fazer a entrada do produto exibir um retângulo ligeiramente arredondado.

Construindo nossa lista de produtos

Já que concluímos o componente do produto , agora podemos começar a construir nossa tela de lista de produtos reutilizando o componente do produto. Adicione o seguinte código em./screens/ProductsList.js.

import React, {useEffect, useState} from’react’; import {View, Text, FlatList, StyleSheet} de’react-native’; importar {Product} de’../components/Product.js’; import {getProducts} de’../services/ProductsService.js’; export function ProductsList ({navigation}) {function renderProduct ({item: product}) {return ( {navigation.navigate (‘ProductDetails’, {productId: product. id,});}}/>); } const [produtos, setProducts]=useState ([]); useEffect (()=> {setProducts (getProducts ());}); return ( item.id.toString ()} data={products} renderItem={renderProduct}/>); } const styles=StyleSheet.create ({productsList: {backgroundColor:’#eeeeee’,}, productsListContainer: {backgroundColor:’#eeeeee’, paddingVertical: 8, marginHorizontal: 8,},});

O componente da lista de produtos busca os dados da lista de produtos do serviço de API simulado que criamos anteriormente. Depois disso, ele exibirá itens de produto renderizando várias instâncias de componentes de produto.

Antes de cada produto ser renderizado, passamos um retorno de chamada de navegação por meio do prop onPress. O retorno de chamada de navegação exibe a tela de detalhes do produto assim que um determinado item do produto é selecionado.

Agora, nossa tela de lista de produtos está pronta.

Desenvolvendo o ícone do carrinho e o contexto

O usuário deve ser capaz de adicionar o produto atualmente aberto ao carrinho de compras a partir da tela de detalhes do produto. Agora, precisamos implementar a lógica do carrinho de compras antes da tela de detalhes do produto.

Neste cenário, precisamos atualizar o ícone de resumo do carrinho de compras (no canto superior direito da tela) quando o usuário atualizar o carrinho. Além disso, a tela de resumo do carrinho também lista os itens no carrinho de compras.

Temos que armazenar os dados do carrinho de compras em um local global e precisamos atualizá-los/recuperá-los de diferentes locais. A API de contexto do React é uma boa solução para esse cenário porque fornece uma maneira simples de ter um estado global , ao contrário de outras soluções de gerenciamento de estado.

Crie um contexto para o carrinho de compras em CartContext.js com o seguinte código.

import React, {createContext, useState} from’react’; import {getProduct} de’./services/ProductsService.js’; exportar const CartContext=createContext (); função de exportação CartProvider (props) {const [items, setItems]=useState ([]); função addItemToCart (id) {const product=getProduct (id); setItems ((prevItems)=> {const item=prevItems.find ((item)=> (item.id==id)); if (! item) {return [… prevItems, {id, qty: 1, product, totalPrice: product.price}];} else {return prevItems.map ((item)=> {if (item.id==id) {item.qty ++; item.totalPrice +=product.price;} item de retorno ;});}}); } function getItemsCount () {return items.reduce ((sum, item)=> (sum + item.qty), 0); } function getTotalPrice () {return items.reduce ((sum, item)=> (sum + item.totalPrice), 0); } return ( {props.children} ); }

A classe CarProvider acima define um Contexto React para o carrinho de compras, expondo as ações do carrinho de compras. Agora, podemos usar esta instância de contexto para adicionar novos itens do carrinho, obter uma lista de itens e obter o total de itens.

Criando a tela de detalhes do produto

A seção de detalhes do produto é exibida a informação completa sobre o produto atualmente selecionado. Além disso, possui o botão Adicionar ao carrinho , que atualiza o carrinho de compras.

Adicione o seguinte código ao arquivo./screens/ProductDetails.js.

importar React, {useEffect, useState, useContext} de’react’; import {Text, Image, View, ScrollView, SafeAreaView, Button, StyleSheet} de’react-native’; import {getProduct} de’../services/ProductsService.js’; import {CartContext} de’../CartContext’; função de exportação ProductDetails ({route}) {const {productId}=route.params; const [produto, setProduct]=useState ({}); const {addItemToCart}=useContext (CartContext); useEffect (()=> {setProduct (getProduct (productId));}); função onAddToCart () {addItemToCart (product.id); } return ( {product. name} $ {product.price} {product.description} ); } const styles=StyleSheet.create ({card: {backgroundColor:’white’, borderRadius: 16, shadowOpacity: 0.2, shadowRadius: 4, shadowColor:’black’, shadowOffset: {height: 0, width: 0,}, elevação: 1, marginVertical: 20,}, imagem: {height: 300, width:’100%’}, infoContainer: {padding: 16,}, name: {fontSize: 22, fontWeight:’bold’,}, price: {fontSize: 16, fontWeight:’600′, marginBottom: 8,}, descrição: {fontSize: 16, fontWeight:’400′, color:’# 787878′, marginBottom: 16,},});

A tela acima carrega os detalhes do produto do serviço de API simulado com base no identificador do produto recebido dos parâmetros de navegação. A ação onPress do botão Adicionar ao carrinho atualiza o contexto do carrinho de compras chamando a função de contexto addItemToCart. Finalmente, o conteúdo da tela é empacotado com SafeAreaView e ScrollView para habilitar uma barra de rolagem vertical para mostrar o conteúdo que não se encaixa perfeitamente na janela de visualização do dispositivo.

Criando a tela de resumo do carrinho de compras

Cada cliente deseja ver um resumo de seu pedido antes de finalizar a compra. Este aplicativo de comércio eletrônico tem uma tela de resumo do carrinho que lista todos os itens do carrinho de compras com o nome do produto, quantidade, subtotal e total final. Implemente a tela do carrinho em./screens/Cart.js com o seguinte código.

import React, {useEffect, useState, useContext} de’react’; import {View, Text, Button, FlatList, StyleSheet} de’react-native’; import {CartContext} de’../CartContext’; função de exportação Cart ({navegação}) {const {items, getItemsCount, getTotalPrice}=useContext (CartContext); função Totals () {let [total, setTotal]=useState (0); useEffect (()=> {setTotal (getTotalPrice ());}); return ( Total $ {total} ); } function renderItem ({item}) {return ( {item.product.name} x {item.qty} $ {item.totalPrice} ); } return ( item.product.id.toString ()} ListFooterComponent={ Totais}/>); } const styles=StyleSheet.create ({cartLine: {flexDirection:’row’,}, cartLineTotal: {flexDirection:’row’, borderTopColor:’#dddddd’, borderTopWidth: 1}, lineTotal: {fontWeight:’bold’, }, lineLeft: {fontSize: 20, lineHeight: 40, color:’# 333333′}, lineRight: {flex: 1, fontSize: 20, fontWeight:’bold’, lineHeight: 40, color:’# 333333′, textAlign:’right’,}, itemsList: {backgroundColor:’#eeeeee’,}, itemsListContainer: {backgroundColor:’#eeeeee’, paddingVertical: 8, marginHorizontal: 8,},});

O código acima busca itens do carrinho de compras no contexto do carrinho e os exibe dentro de uma lista.

Criando o ícone do carrinho de compras

Cada aplicativo de comércio eletrônico normalmente mostra a contagem atual de itens do carrinho com a ajuda de um pequeno ícone no canto superior direito da tela. Vamos criar um pequeno componente para exibir a contagem total de itens do carrinho atual com o seguinte código em./components/CartIcon.js.

import React, {useContext} from’react’; import {View, Text, StyleSheet} from’react-native’; import {CartContext} de’../CartContext’; função de exportação CartIcon ({navegação}) {const {getItemsCount}=useContext (CartContext); return ( {navigation.navigate (‘Cart’);}}> Cart ({getItemsCount ()}) ); } const styles=StyleSheet.create ({container: {marginHorizontal: 8, backgroundColor:’orange’, height: 32, padding: 12, borderRadius: 32/2, alignItems:’center’, justifyContent:’center’,}, texto: {color:’white’, fontWeight:’bold’,},});

Montagem de todos os componentes do aplicativo principal

Agora, todos os componentes do aplicativo estão prontos para serem montados como um aplicativo móvel de comércio eletrônico. O principal componente do aplicativo precisa incluir um controlador de navegação porque temos várias telas. Além disso, realmente precisamos envolver todos os componentes com o provedor de contexto do carrinho porque usamos a API React Context.

Substitua o código do arquivo./App.js pelo seguinte código como a etapa final.

import React from’react’; import {StyleSheet} de’react-native’; importar {NavigationContainer} de’@ react-navigation/native’; importar {createNativeStackNavigator} de’@ react-navigation/native-stack’; import {ProductsList} de’./screens/ProductsList.js’; import {ProductDetails} de’./screens/ProductDetails.js’; import {Cart} de’./screens/Cart.js’; import {CartIcon} de’./components/CartIcon.js’; import {CartProvider} de’./CartContext.js’; const Stack=createNativeStackNavigator (); function App () {return ( ({title:’Products’, headerTitleStyle: styles.headerTitle, headerRight: ()=> })}/> ({title:’Detalhes do produto’, headerTitleStyle: styles.headerTitle, headerRight: ()=> ,})}/> ({title:’My cart’, headerTitleStyle: styles.headerTitle, headerRight: ()=> ,})}/> ); } const styles=StyleSheet.create ({headerTitle: {fontSize: 20}}); exportar aplicativo padrão;

Conclusão e pensando no futuro

Este tutorial o guiou a criar um aplicativo de comércio eletrônico multiplataforma com React Native do zero. Construímos um modelo de aplicativo de comércio eletrônico mínimo sem usar nenhuma biblioteca de gerenciamento de estado. Portanto, é fácil construir um modelo de aplicativo pessoal com o código-fonte do aplicativo de demonstração deste tutorial e deixar de olhar todos os modelos de comércio eletrônico React Native preparados no GitHub que podem não atender às suas necessidades específicas. (Além disso, se você precisar, pode integrar sua biblioteca de gerenciamento de estado favorita a isso.)

O o código-fonte completo está disponível em meu GitHub.

Quanto às próximas etapas, você pode implementar requisitos como autenticação, análises de clientes, comentários de produtos, verificações de disponibilidade de estoque etc. Também será necessário planejar o back-end do seu aplicativo móvel porque usamos um serviço de API simulado neste tutorial.

Se você planeja usar uma API de comércio eletrônico existente, pode escrever um serviço para fazer chamadas de API. Se você for construir uma nova API de comércio eletrônico, um back-end NoSQL baseado em Node é fácil de começar.