Membuat aplikasi E-commerce dengan React Native

Saat ini, aplikasi e-commerce sedang menjadi trend. Setiap hari, penggunaan aplikasi e-commerce meningkat dengan pesat terutama dimasa pandemi, dan sepertinya trend ini akan terus berkembang kedepannya. Jadi, jika anda berencana untuk memulai sebuah E-commerce atau ingin merealisasikan ide bisnis anda, maka yang perlu anda lakukan adalah mencari teknologi pengembangan aplikasi berbasis mobile terbaru untuk menciptakan branding yang kuat.

Menambahkan aplikasi mobile ke bisnis offline akan memperluas pertumbuhan bisnis dengan cepat dan memungkinkan kita untuk mendapatkan pelanggan setia. Jika kita melihat data setelah pandemi, ternyata terdapat peningkatan yang signifikan dalam hal jumlah aplikasi e-commerce berbasis mobile. Sementara di masa pandmi, ekonomi global berantakan, banyak orang kehilangan pekerjaan, banyak bisnis offline tutup, di situlah peran aplikasi e-commerce online meroket dan memberikan harapan baru bagi pengusaha.

Dengan aplikasi e-commerce mobile, para pengusaha menemukan cara baru untuk menstabilkan keuangan mereka, memasuki pasar baru dengan inovasi baru, dan menemukan cara yang lebih baik untuk melibatkan pelanggan. Aplikasi E-commerce yang dikembangkan dengan benar akan menambah nilai mutu produk dan terbukti menjadi aset yang berharga untuk memperluas jangkaun bisnis mereka.

Mengapa Memilih Mengembangkan Mobile E-commerce Dengan React Native?

Tidak bisa dipungkiri, aplikasi mobile sedang dan sudah mendominasi setiap lini bisnis dan sebagian besar bisnis telah menyadari pentingnya memiliki aplikasi mobile. Oleh karena itu, menjajaki potensi peluang bisnis menjadi tantangan terbesar di tahun 2022. Jika kita perhatikan, pasti kan menemukan teknologi terbaru yang luar biasa di tahun mendatang yang bahkan tidak bisa diprediksi sekarang. Oleh karena itu, tidak peduli, apakah bisnis kecil atau besar, pemilihan teknologi yang dipakai untuk pengembangan aplikasi moible adalah faktor penentu kesuksesan kita.

Menurut prediksi, industri pengembangan aplikasi mobile memiliki nilai pasar sebesar 935,2 miliar US$ pada tahun 2023. Karena biaya pengembangan aplikasi adalah faktor penentu terbesar, maka kita perlu mencari teknologi terbaru yang dapat menghemat biaya dan waktu pengembangan aplikasi. Salah satu teknologi yang terbukti menjanjikan karena bisa di jalankan di platform Android dan IOS adalah React Native.

Sekilas tentang React Native dan Fitur2nya

React Native adalah framework pengembangan aplikasi mobile lintas platform yang diluncurkan oleh Facebook pada tahun 2015 dan menggunakan JavaScript sebagai bahasa pemrogramannya. Dalam beberapa tahun terakhir, React Native telah menjadi pilihan utama bagi 42% pengembang. Dan komunitas pengembangan global cukup puas dengan React Native karena mereka dapat menuliskan satu kode yang bisa digunakan di platform Android atau IOS. Untuk melihat fitur2 apa saja yang disediakan oleh React Native, anda bisa membaca artikel https://blog.bungadiva.com/cara-installasi-dan-membuat-aplikasi-di-react-native/.

Membuat Aplikasi Mobile E-commerce Dengan React Native

Salah satu keuntungan React Native adalah Sekali kita membuat aplikasi, kita dapat menggunakan kembali 80% kodenya untuk digunakan pada aplikasi yang berbeda. Hal ini bisa menjadi titik permulaan untuk kita membuat aplikasi sendiri dari awal. Pada artikel ini, kita akan membahas tentang apa yang dibutuhkan untuk membangun dan bagaimana melanjutkan proses pengembangannya.

Sebelum kita memulai proses pengembangan aplikasi, saya akan menjelaskan bahwa kita akan membangun aplikasi E-commerce dengan beberapa fitur dasar yang membutuhkan tiga screen fungsional, antara lain:

Layar Daftar Produk
Layar daftar produk diperlukan untuk menampilkan semua kategori produk disertai gambar, judul, dan harganya.
Layar Detail Produk
Jika pengguna menyukai produk tertentu, mereka akan mengklik halaman produk. Aplikasi akan membawa pengguna ke detail produk dan memberikan informasi lengkap seperti kualitas, deskripsi, dan lainnya. Pada halaman detail juga ada tombol untuk menambahkan produk ke keranjang belanja
Layar Keranjang Belanja
Produk yang ditambahkan pengguna ke keranjang mereka akan ditampilkan di layar keranjang belanja. Di sini pengguna akan melihat semua produk yang ingin mereka beli beserta nama, jumlah, subtotal, dan lainnya.

Inilah tiga layar utama aplikasi mobile E-commerce yang akan kita buat dalam artikel ini. Berikut langkah2 yang perlu dilakukan:

Menginstall software requirement

Sebelum menjalankan step2 pada artikel ini, pastikan telah menginstal Node.js dan NPM di komputer untuk menyederhanakan proses pengembangan lebih lanjut. Langkah2nya bisa dilihat di artikel https://blog.bungadiva.com/cara-installasi-dan-membuat-aplikasi-di-react-native/.

Membuat direktori proyek baru

Untuk membuat proyek React Native, disini kita menggunakan Expo-CLI yang akan membantu untuk mengatur environment pengembangan aplikasi dan memungkinkan kita untuk menulis kode dengan mudah. Untuk membuat proyek baru, jalankan perintah berikut:

expo init e-commerce-mobile

Jika perintah ini meminta anda untuk memilih template, pilih opsi blank template. Kemudian masuk ke dalam folder e-commerce-mobile dan instal paket2 yang diperlukan seperti berikut.

React-Native-Elements. merupakan elemen UI React Native yang mudah digunakan.
React-Navigation: digunakan untuk navigasi di aplikasi React Native.

Untuk menginstall kedua paket diatas, Jalankan perintah berikut.

yarn add react-native-elements
yarn add react-navigation

Karena aplikasi E-commerce menggunakan banyak layar dan layar daftar produk adalah salah satu elemen utama aplikasi, kita perlu menggunakan beberapa library untuk membuat multilayar. Berikut library yang perlu diinstall.

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

Membuat tampilan daftar produk

Data produk dapat diambil dari web API yang sudah disediakan oleh aplikasi Backend. Untuk disini, kita menggunakan data static yang disimpan di file ./services/productService.js. Berikut adalah kode untuk membuat layar produk.

const Products= [
    {
        id: 100,
        name: 'Handphone Samsung',
        price: 100,
        image: require('../assets/products/hpsamsung.png'),
        description: 'Handphone Samsung'
    },
    {
        id: 200,
        name: 'Laptop Thinkpad',
        price: 200,
        image: require('../assets/products/thinkpad.png'),
        description: 'Laptop Thinkpad'
    }, 
    {
        id: 300,
        name: 'HP VIVO',
        price: 300,
        image: require('../assets/products/thinkpad.png'),
        description: 'Laptop Thinkpad'
    }
]

export function getProducts() {
    return Products
}

export function getProduct(id) {
    return Products.find((product) => (product.id == id))
}

Pada kode diatas, ada fungsi getProducts yang mencantumkan semua produk dan fungsi getProduct yang akan mengembalikan detail produk untuk sesuai id produk. Jangan lupa untuk membuat folder assets di root folder aplikasi E-commerce mobile dan diisikan file sesuai dengan data diatas.

Membuat Komponen Produk

Setelah memiliki data produk, kita perlu membuat komponen produk. Buatlah file ./components/Product.js seperti berikut.

import React from 'react'
import {Text, Image, View, StyleSheet, TouchableOpacity} from 'react-native'

export function Product({name, price, image, onPress}) {
    return (
        <TouchableOpacity style={styles.card} onPress={onPress}>
            <Image style={styles.thumb} source={image} />
            <View style={styles.infoContainer}>
                <Text style={styles.name}>{name}</Text>   
                <Text style={styles.price}>$ {price}</Text>
            </View>
        </TouchableOpacity>
    );
}

const styles = StyleSheet.create({
    card: {
        backgroundColor: "#dddddd",
        borderRadius: 20,
        shadowOpacity: 0.25,
        shadowRadius: 5,
        shadowColor: '#000',
        shadowOffset: {
            height: 0,
            width: 0
        },
        elevation: 1,
        marginVertical: 18        
    },

    thumb: {
        height: 280,
        borderTopLeftRadius: 14,
        borderTopRightRadius: 14,
        width: '100%'
    },

    infoContainer: {
        padding: 25
    }, 

    name: {
        fontSize:21,
        fontWeight: 'normal'
    }, 

    price: {
        fontSize: 18,
        fontWeight: 'bold',
        marginBottom: 10
    }
})

Kode diatas akan merender komponen produk yang terdiri dari gambar dan 2 buah text nama produk dan harganya. Untuk mempercantik tampilan kita menggunakan stylesheet untuk masing2 komponen yang dibuat.

Membuat tampilan daftar produk

Setelah membuat komponen produk, sekarang kita perlu membuat tampilan daftar produk menggunakan komponen produk. Buatlah file ./screens/ProductsList.js. dan ketikkan kode berikut.

import React, {useEffect, useState} from 'react'
import {View, Text, FlatList, StyleSheet} from 'react-native'
import { Product } from '../components/Product'
import { getProducts } from '../services/productService'

export function ProductsList({navigation}) {
    function renderProduct({item: product}) {
        return (
            <Product {...product} onPress={() => {
                navigation.navigate('ProductDetails', {
                    productId: product.id,
                }); 
            }}
            />
        );
    }

    const [products, setProducts] = useState([])
    useEffect(() => {
        setProducts(getProducts());
    })

    return (
        <FlatList 
            style={styles.productsList} 
            contentContainerStyle={styles.productsListContainer} 
            keyExtractor={(item) => item.id.toString()}
            data={products}
            renderItem={renderProduct}>
        </FlatList>
    );
}

const styles = StyleSheet.create({
    productsList: {
        backgroundColor: '#d9d9d9'
    },
    productsListContainer: {
        backgroundColor: '#d9d9d9',
        paddingVertical: 8,
        marginHorizontal: 8
    }
})

Komponen ProductsList akan mengambil data produk dari service API yang kita buat. Kemudian menampilkan data dengan merendernya menjadi komponen produk. Namun, sebelum dirender, kita perlu membuat fungsi OnPress yang akan melakukan navigasi ke product detail. Berikut tampilan list product jika aplikasi dijalankan.

Membuat Tampilan Detail Produk

Bagian detail produk akan menampilkan informasi lengkap dari produk yang dipilih oleh pengguna. Selain itu, juga ada tombol Add To Cart, yang akan menambahkan produk ke dalam keranjang belanja. Untuk membuat detail produk, tambahkan kode berikut di file ./screens/ProductDetails.js

import React, {useEffect, useState, useContext} from 'react'
import {View, Text, Image, ScrollView, SafeAreaView, Button, StyleSheet} from 'react-native'
import { getProduct } from '../services/productService'
import { CartContext } from '../CartContext'

export function ProductDetails({route}) {
    const { productId } = route.params;
    const [product, setProduct] = useState({})

    const { addItemToCart } = useContext(CartContext);

    useEffect(() => {
        setProduct(getProduct(productId))
    });

    function onAddToCart() {
        addItemToCart(product.id)
    }

    return (
        <SafeAreaView>
            <ScrollView>
                <Image 
                    style={styles.image}
                    source={product.image}
                />
                <View style={styles.infoContainer}>
                    <Text style={styles.name}>{product.name}</Text>
                    <Text style={styles.price}>$ {product.price}</Text>
                    <Text style={styles.description}>{product.description}</Text>
                    <Button onPress={onAddToCart} title="Add to cart"/>
                </View>
            </ScrollView>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    card: {
        backgroundColor: "#dddddd",
        borderRadius: 20,
        shadowOpacity: 0.25,
        shadowRadius: 5,
        shadowColor: '#000',
        shadowOffset: {
            height: 0,
            width: 0
        },
        elevation: 1,
        marginVertical: 18        
    },

    image: {
        height: 320,
        width: '100%'
    }, 

    infoContainer: {
        padding: 25
    }, 

    name: {
        fontSize:21,
        fontWeight: 'normal'
    }, 

    price: {
        fontSize: 18,
        fontWeight: 'bold',
        marginBottom: 10
    }, 

    description: {
        fontSize: 13,
        fontWeight: 'normal',
        color: '#333',
        marginBottom: 18
    }
});

Membuat Tampilan Keranjang Belanja

Setelah tampilan daftar produk dan detail produk selesai, berikutnya kita perlu membuat tampilan keranjang belanja. Sebelum itu, kita juga perlu membuat tombol yang berisi informasi jumlah item yang dibeli di sudut kanan atas tampilan. Oleh karena itu, kita perlu menyimpan data keranjang belanja pada variabel global yang dapat diperbarui dan diakses dengan mudah dengan menggunakan Context API React.

Untuk membuat context API, buat file ./CartContext.js seperti berikut.

import React, {createContext, useState} from 'react'
import { getProduct } from './services/productService'

export const CartContext = createContext()
export function CartProvider(props) {
    const [items, setItems] = useState([])

    function 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
                    }
                    return item;
                });
            }
        });
    }

    function getItemsCount() {
        return items.reduce((sum, item) => (sum + item.qty), 0);
    }
    
    function getTotalPrice() {
        return items.reduce((sum, item) => (sum + item.totalPrice), 0);
    }

    return (
        <CartContext.Provider
            value={{ items, setItems, getItemsCount, addItemToCart, getTotalPrice }}>
            {props.children}
        </CartContext.Provider>
    )
}

Fungsi CartProvider di atas mendefinisikan React Context pada keranjang belanja. Kita bisa menggunakan instance dari React Context ini untuk menambahkan item baru, melihat daftar item, dan menghitung total item.

Setelah membuat Context Api, kita perlu membuat icon yang menampilkan jumlah item yang ada dikeranjang. Icon ini ada di bagian atas halaman. Untuk membuat komponen kecil ini, kita perlu membuat file ./components/CartIcon.js. seperti berikut.

import React, {useContext} from 'react'
import {View, Text, StyleSheet} from 'react-native'
import { CartContext } from '../CartContext'

export function CartIcon({navigation}) {
    const {getItemsCount} = useContext(CartContext)
    return (
        <View style={styles.container}>
            <Text style={styles.text}
                onPress={() => {
                    navigation.navigate('Cart');
                }}>Cart ({getItemsCount()})</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        marginHorizontal: 10,
        backgroundColor: '#515b8c',
        height: 40,
        padding: 5,
        borderRadius: 38/2,
        alignItems: 'center',
        justifyContent: 'center'
    },
    text: {
        color: '#ccc',
        fontWeight: 'normal'
    }
})

Setelah pengguna selesai berbelanja dan menambahkan semua produk ke keranjang mereka, mereka ingin melihat ringkasan pesanan sebelum checkout. Halaman ini mencantumkan semua item keranjang belanja dan detailnya seperti kuantitas, subtotal, nama produk, total, dan informasi lain. Untuk membuat tampilan ringkasan keranjang belanja, buatlah file ./screens/Carts.js, dan isikan kode berikut.

import React, {useEffect, useState, useContext} from 'react'
import {View, Text, FlatList, Button, StyleSheet} from 'react-native'
import { CartContext } from '../CartContext'

export function Cart({navigation}) {
    const {items, getItemsCount, getTotalPrice} = useContext(CartContext)

    function Totals() {
        let [total, setTotal] = useState(0)
        useEffect(() => {
            setTotal(getTotalPrice())
        });

        return (
            <View style={styles.cartLineTotal}>
                <Text style={[styles.lineLeft, styles.lineTotal]}>Total</Text>
                <Text style={styles.lineRight}>$ { total }</Text>
            </View>
        );
    }

    function renderItem({item}) {
        return (
            <View style={styles.cartLine}>
                <Text style={styles.lineLeft}>{item.product.name} x {item.qty}</Text>
                <Text style={styles.lineRight}>$ { item.totalPrice }</Text>
            </View>
        );
    }

    return (
        <FlatList 
            style={styles.itemsList}
            contentContainerStyle={styles.itemsListContainer}
            data={items}
            renderItem={renderItem}
            keyExtractor={(item) => item.product.id.toString()}
            ListFooterComponent={Totals}>                
        </FlatList>
    )
}

const styles = StyleSheet.create({
    cartLine: {
        flexDirection: 'row'
    },

    cartLineTotal: {
        flexDirection: 'row',
        borderTopColor: '#ccc',
        borderTopWidth: 2
    },

    lineTotal: {
        fontWeight: 'bold'
    }, 

    lineLeft: {
        fontSize: 18,
        lineHeight: 25,
        color: '#000'
    },

    lineRight: {
        flex: 1,
        fontSize: 18,
        fontWeight: "600",
        lineHeight: 35,
        color: '#000',
        textAlign: 'right'
    },

    itemsList: {
        backgroundColor: '#ddd'
    },

    itemsListContainer: {
        backgroundColor: '#ddd',
        paddingVertical: 10, 
        marginHorizontal: 10
    },
});

Menggabungkan Semua Komponen Untuk Pembuatan Aplikasi Mobile E-commerce

Setelah semua komponen selesai dikembangkan, sekarang kita perlu untuk menggabungkan semuanya agar berfungsi secara optimal. Untuk menggabungkan semua komponen diatas, kita perlu mengubah file ./App.js dengan kode berikut.

import React from 'react'
import {StyleSheet} from 'react-native'
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { ProductsList } from './screens/ProductsList';
import { ProductDetails } from './screens/ProductDetails';
import { Cart } from './screens/Carts';
import { CartIcon } from './components/CartIcon';
import { CartProvider } from './CartContext';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <CartProvider>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Products" component={ProductsList} options={({navigation}) => ({
            title:'List Products',
            headerTitleStyle: styles.headerTitle,
            headerRight: () => <CartIcon navigation={navigation}/>
          })} />


          <Stack.Screen name="ProductDetails" component={ProductDetails} options={({navigation}) => ({
            title:'Product details',
            headerTitleStyle: styles.headerTitle,
            
            headerRight: () => <CartIcon navigation={navigation}/>
          })} />

          <Stack.Screen name="Cart" component={Cart} options={({navigation}) => ({
            title:'My cart',
            headerTitleStyle: styles.headerTitle,
            headerRight: () => <CartIcon navigation={navigation}/>
          })} />

          
        </Stack.Navigator>
      </NavigationContainer>
    </CartProvider>
  );
}

const styles = StyleSheet.create({
  headerTitle: {
    fontSize:18,
    backgroundColor: '#fff'
  }
});

Menjalankan Aplikasi Mobile E-commerce

Kita telah selesai membuat tiga tampilan utama Aplikasi E-commerce yang terdiri dari daftar produk, detail produk, ringkasan item belanja. Langkah berikutnya adalah menjalankan aplikasi yang sudah kita buat. Untuk menjalankannya, jalankan script npm-start pada direktori proyek.

Berikut tampilan aplikasi mobile E-commerce menggunakan React Native dengan memakai emulator genymotion.

Penutup

Artikel ini dibuat sebagai contoh dasar aplikasi mobile E-commerce minimal. Untuk aplikasi mobile E-commerce yang lebih advance kita perlu menambahkan fungsi2 lain seperti otentikasi, komentar pelanggan, komentar produk, manajemen stok, dan fungsi2 yang lain. Semoga Artikel ini bermanfaat, setidaknya memberikan gambaran tentang bagaimana membuat apliakasi mobile E-commerce dengan React Native.

choirul ihwan

Fullstack Developer yang tinggal di yogyakarta. Suka eksplorasi hal baru yang berhubungan dengan pemrograman dan ilmu keislaman. Berpengalaman dalam pemrograman PHP, Delphi dan sedang upgrade skill dengan python. Just as simple that.

Mengapa Memilih Mengembangkan Mobile E-commerce Dengan React Native?

Sekilas tentang React Native dan Fitur2nya

Membuat Aplikasi Mobile E-commerce Dengan React Native

Menginstall software requirement

Membuat direktori proyek baru

Membuat tampilan daftar produk

Membuat Komponen Produk

Membuat tampilan daftar produk

Membuat Tampilan Detail Produk

Membuat Tampilan Keranjang Belanja

Menggabungkan Semua Komponen Untuk Pembuatan Aplikasi Mobile E-commerce

Menjalankan Aplikasi Mobile E-commerce

Penutup

Leave a Reply Cancel reply