Membangun Aplikasi Seluler Menggunakan React Native Dan WordPress

Sebagai pengembang web, Anda mungkin berpikir bahwa pengembangan aplikasi seluler membutuhkan kurva pembelajaran baru dengan bahasa pemrograman lain. Mungkin Java dan Swift perlu ditambahkan ke keahlian Anda untuk mulai bekerja dengan iOS dan Android, dan itu mungkin akan menghambat Anda.

Tapi artikel ini membuat Anda terkejut! Kami akan melihat membangun aplikasi e-commerce untuk iOS dan Android menggunakan platform WooCommerce sebagai backend kami. Ini akan menjadi titik awal yang ideal bagi siapa saja yang ingin masuk ke pengembangan lintas platform asli.

Sejarah Singkat Pengembangan Lintas Platform

Ini tahun 2011, dan kami melihat awal dari pengembangan aplikasi seluler hybrid. Framework seperti Apache Cordova, PhoneGap, dan Ionic Framework perlahan muncul. Semuanya terlihat bagus, dan pengembang web dengan bersemangat mengkodekan aplikasi seluler dengan pengetahuan mereka yang ada.

Namun, aplikasi seluler masih terlihat seperti situs web versi seluler. Tidak ada desain asli seperti desain material Android atau tampilan datar iOS. Navigasi bekerja mirip dengan web dan transisi tidak mulus. Pengguna tidak puas dengan aplikasi yang dibuat menggunakan pendekatan hybrid dan memimpikan pengalaman asli.

Maju cepat hingga Maret 2015, dan React Native muncul di layar. Pengembang dapat membangun aplikasi lintas platform yang benar-benar asli menggunakan React, pustaka JavaScript favorit bagi banyak pengembang. Mereka sekarang dapat dengan mudah mempelajari perpustakaan kecil di atas apa yang mereka ketahui dengan JavaScript. Dengan pengetahuan ini, pengembang kini menargetkan web, iOS, dan Android.

Selanjutnya, perubahan yang dilakukan pada kode selama pengembangan dimuat ke perangkat pengujian hampir seketika! Ini biasanya memakan waktu beberapa menit ketika kami memiliki pengembangan asli melalui pendekatan lain. Pengembang dapat menikmati umpan balik instan yang dulu mereka sukai dengan pengembangan web.

Pengembang React sangat senang dapat menggunakan pola yang ada yang telah mereka ikuti ke dalam platform baru secara bersamaan. Bahkan, mereka menargetkan dua platform lagi dengan apa yang sudah mereka ketahui dengan baik.

Ini semua bagus untuk pengembangan front-end. Tapi pilihan apa yang kita miliki untuk teknologi back-end? Apakah kita masih harus mempelajari bahasa atau kerangka kerja baru?

API REST WordPress

Pada akhir 2016, WordPress merilis REST API yang sangat ditunggu-tunggu ke intinya, dan membuka pintu untuk solusi dengan backend yang dipisahkan.

Jadi, jika Anda sudah memiliki situs web WordPress dan WooCommerce dan ingin mempertahankan penawaran dan profil pengguna yang sama persis di situs web dan aplikasi asli Anda, artikel ini untuk Anda!

Asumsi yang Dibuat Dalam Artikel Ini

Saya akan memandu Anda menggunakan keahlian WordPress Anda untuk membangun aplikasi seluler dengan toko WooCommerce menggunakan React Native. Artikel tersebut mengasumsikan:

• Anda sudah familiar dengan berbagai API WordPress, setidaknya pada tingkat pemula.
• Anda sudah familiar dengan dasar-dasar React.
• Anda memiliki server pengembangan WordPress yang siap. Saya menggunakan Ubuntu dengan Apache.
• Anda memiliki perangkat Android atau iOS untuk diuji dengan Expo.

Apa yang Akan Kami Bangun Dalam Tutorial Ini

Proyek yang akan kita bangun melalui artikel ini adalah aplikasi toko pakaian. Aplikasi ini akan memiliki fungsi berikut:

• Halaman toko yang mencantumkan semua produk,
• Halaman produk tunggal dengan rincian item yang dipilih,
• fitur 'Tambahkan ke troli',
• Fitur 'Tampilkan item di keranjang',
• Fitur 'Hapus item dari keranjang'.

Artikel ini bertujuan untuk menginspirasi Anda untuk menggunakan proyek ini sebagai titik awal untuk membangun aplikasi seluler yang kompleks menggunakan React Native.

Catatan : Untuk aplikasi lengkap, Anda dapat mengunjungi proyek saya di Github dan mengkloningnya .

Memulai Proyek Kami

Kami akan mulai membangun aplikasi sesuai dengan dokumentasi resmi React Native. Setelah menginstal Node di lingkungan pengembangan Anda, buka command prompt dan ketik perintah berikut untuk menginstal Create React Native App secara global.

 npm install -g create-react-native-app

Selanjutnya, kita dapat membuat proyek kita

 create-react-native-app react-native-woocommerce-store

Ini akan membuat proyek React Native baru yang dapat kita uji dengan Expo.

Selanjutnya, kita perlu menginstal aplikasi Expo di perangkat seluler yang ingin kita uji. Ini tersedia untuk iOS dan Android.

Setelah menginstal aplikasi Expo, kami dapat menjalankan npm start di mesin pengembangan kami.

 cd react-native-woocommerce-store npm start

Setelah itu, Anda dapat memindai kode QR melalui aplikasi Expo atau memasukkan URL yang diberikan di bilah pencarian aplikasi. Ini akan menjalankan aplikasi dasar 'Hello World' di ponsel. Sekarang kita dapat mengedit App.js untuk membuat perubahan instan pada aplikasi yang berjalan di telepon.

Atau, Anda dapat menjalankan aplikasi pada emulator. Tetapi untuk singkatnya dan akurasi, kami akan membahas menjalankannya di perangkat yang sebenarnya.

Selanjutnya, mari kita instal semua paket yang diperlukan untuk aplikasi menggunakan perintah ini:

 npm install -s axios react-native-htmlview react-navigation react-redux redux redux-thunk

Menyiapkan Situs WordPress

Karena artikel ini tentang membuat aplikasi React Native, kami tidak akan membahas detail tentang membuat situs WordPress. Silakan merujuk ke artikel ini tentang cara menginstal WordPress di Ubuntu. Karena REST API WooCommerce memerlukan HTTPS, harap pastikan itu diatur menggunakan Let's Encrypt. Silakan merujuk ke artikel ini untuk panduan cara.

Kami tidak membuat instalasi WordPress di localhost karena kami akan menjalankan aplikasi di perangkat seluler, dan juga karena HTTPS diperlukan.

Setelah WordPress dan HTTPS berhasil diatur, kita dapat menginstal plugin WooCommerce di situs.

Setelah menginstal dan mengaktifkan plugin, lanjutkan dengan penyiapan toko WooCommerce dengan mengikuti wizard. Setelah wisaya selesai, klik 'Kembali ke dasbor'.

Anda akan disambut oleh prompt lain.

Klik 'Ayo' untuk 'Tambahkan contoh produk'. Ini akan menghemat waktu kami untuk membuat produk kami sendiri untuk ditampilkan di aplikasi.

File Konstanta

Untuk memuat produk toko kami dari WooCommerce REST API, kami memerlukan kunci yang relevan di dalam aplikasi kami. Untuk tujuan ini, kita dapat memiliki file constans.js .

Pertama buat folder bernama 'src' dan buat subfolder di dalamnya sebagai berikut:

Sekarang, mari buat kunci untuk WooCommerce. Di dasbor WordPress, navigasikan ke WooCommerce → Pengaturan → API → Kunci/Aplikasi dan klik 'Tambah Kunci.'

Selanjutnya buat kunci Read Only dengan nama React Native. Salin Kunci Konsumen dan Rahasia Konsumen ke file constants.js sebagai berikut:

 const Constants = { URL: { wc: 'https://woocommerce-store.on-its-way.com/wp-json/wc/v2/' }, Keys: { ConsumerKey: 'CONSUMER_KEY_HERE', ConsumerSecret: 'CONSUMER_SECRET_HERE' } } export default Constants;

Dimulai Dengan React Navigasi

React Navigation adalah solusi komunitas untuk menavigasi antara layar yang berbeda dan merupakan perpustakaan mandiri. Ini memungkinkan pengembang untuk mengatur layar aplikasi React Native hanya dengan beberapa baris kode.

Ada beberapa metode navigasi dalam React Navigation:

• Tumpukan,
• Mengalihkan,
• tab,
• Laci,
• dan banyak lagi.

Untuk Aplikasi kami, kami akan menggunakan kombinasi StackNavigation dan DrawerNavigation untuk bernavigasi di antara layar yang berbeda. StackNavigation mirip dengan cara kerja riwayat browser di web. Kami menggunakan ini karena menyediakan antarmuka untuk header dan ikon navigasi header. Ini memiliki push dan pop yang mirip dengan tumpukan dalam struktur data. Push berarti kita menambahkan layar baru ke bagian atas Navigation Stack. Pop menghapus layar dari tumpukan.

Kode menunjukkan bahwa StackNavigation , sebenarnya, menampung DrawerNavigation di dalam dirinya sendiri. Ini juga membutuhkan properti untuk gaya tajuk dan tombol tajuk. Kami menempatkan tombol laci navigasi di sebelah kiri dan tombol keranjang belanja di sebelah kanan. Tombol laci menghidupkan dan mematikan laci sedangkan tombol keranjang membawa pengguna ke layar keranjang belanja.

 const StackNavigation = StackNavigator({ DrawerNavigation: { screen: DrawerNavigation } }, { headerMode: 'float', navigationOptions: ({ navigation, screenProps }) => ({ headerStyle: { backgroundColor: '#4C3E54' }, headerTintColor: 'white', headerLeft: drawerButton(navigation), headerRight: cartButton(navigation, screenProps) }) }); const drawerButton = (navigation) => ( <Text style={{ padding: 15, color: 'white' }} onPress={() => { if (navigation.state.index === 0) { navigation.navigate('DrawerOpen') } else { navigation.navigate('DrawerClose') } } }> ( <Text style={{ padding: 15, color: 'white' }} onPress={() => { navigation.navigate('CartPage') }} > <EvilIcons name="cart" size={30} /> {screenProps.cartCount} </Text> );  const StackNavigation = StackNavigator({ DrawerNavigation: { screen: DrawerNavigation } }, { headerMode: 'float', navigationOptions: ({ navigation, screenProps }) => ({ headerStyle: { backgroundColor: '#4C3E54' }, headerTintColor: 'white', headerLeft: drawerButton(navigation), headerRight: cartButton(navigation, screenProps) }) }); const drawerButton = (navigation) => ( <Text style={{ padding: 15, color: 'white' }} onPress={() => { if (navigation.state.index === 0) { navigation.navigate('DrawerOpen') } else { navigation.navigate('DrawerClose') } } }> ( <Text style={{ padding: 15, color: 'white' }} onPress={() => { navigation.navigate('CartPage') }} > <EvilIcons name="cart" size={30} /> {screenProps.cartCount} </Text> );

DrawerNavigation di sisi lain menyediakan laci samping yang memungkinkan kita untuk menavigasi antara Home, Shop, dan Cart. DrawerNavigator mencantumkan layar berbeda yang dapat dikunjungi pengguna, yaitu halaman Beranda, halaman Produk, halaman Produk, dan halaman Keranjang. Ini juga memiliki properti yang akan mengambil wadah Laci: menu geser yang terbuka saat mengklik menu hamburger.

 const DrawerNavigation = DrawerNavigator({ Home: { screen: HomePage, navigationOptions: { title: "RN WC Store" } }, Products: { screen: Products, navigationOptions: { title: "Shop" } }, Product: { screen: Product, navigationOptions: ({ navigation }) => ({ title: navigation.state.params.product.name }), }, CartPage: { screen: CartPage, navigationOptions: { title: "Cart" } } }, { contentComponent: DrawerContainer }); 

Menyuntikkan Toko Redux ke App.js

Karena kami menggunakan Redux di aplikasi ini, kami harus menyuntikkan toko ke dalam aplikasi kami. Kami melakukan ini dengan bantuan komponen Provider .

 const store = configureStore(); class App extends React.Component { render() { return ( <Provider store={store}> <ConnectedApp /> </Provider> ) } }

Kami kemudian akan memiliki komponen ConnectedApp sehingga kami dapat memiliki jumlah keranjang di header.

 class CA extends React.Component { render() { const cart = { cartCount: this.props.cart.length } return ( <StackNavigation screenProps={cart} /> ); } } function mapStateToProps(state) { return { cart: state.cart }; } const ConnectedApp = connect(mapStateToProps, null)(CA);

Toko Redux, Tindakan, Dan Pereduksi

Di Redux, kami memiliki tiga bagian berbeda:

1. Toko
   Memegang seluruh status seluruh aplikasi Anda. Satu-satunya cara untuk mengubah status adalah dengan mengirimkan tindakan ke sana.
2. tindakan
   Objek polos yang mewakili niat untuk mengubah keadaan.
3. Pereduksi
   Fungsi yang menerima status dan tipe tindakan dan mengembalikan status baru.

Ketiga komponen Redux ini membantu kami mencapai keadaan yang dapat diprediksi untuk seluruh aplikasi. Untuk mempermudah, kita akan melihat bagaimana produk diambil dan disimpan di toko Redux.

Pertama-tama, mari kita lihat kode untuk membuat toko:

 let middleware = [thunk]; export default function configureStore() { return createStore( RootReducer, applyMiddleware(...middleware) ); }

Selanjutnya, tindakan produk bertanggung jawab untuk mengambil produk dari situs web jarak jauh.

 export function getProducts() { return (dispatch) => { const url = `${Constants.URL.wc}products?per_page=100&consumer_key=${Constants.Keys.ConsumerKey}&consumer_secret=${Constants.Keys.ConsumerSecret}` return axios.get(url).then(response => { dispatch({ type: types.GET_PRODUCTS_SUCCESS, products: response.data } )}).catch(err => { console.log(err.error); }) }; }

Peredam produk bertanggung jawab untuk mengembalikan muatan data dan apakah perlu dimodifikasi.

 export default function (state = InitialState.products, action) { switch (action.type) { case types.GET_PRODUCTS_SUCCESS: return action.products; default: return state; } }

Menampilkan Toko WooCommerce

File products.js adalah halaman Toko kami. Ini pada dasarnya menampilkan daftar produk dari WooCommerce.

 class ProductsList extends Component { componentDidMount() { this.props.ProductAction.getProducts(); } _keyExtractor = (item, index) => item.id; render() { const { navigate } = this.props.navigation; const Items = ( <FlatList contentContainerStyle={styles.list} numColumns={2} data={this.props.products || []} keyExtractor={this._keyExtractor} renderItem={ ({ item }) => ( <TouchableHighlight style={{ width: '50%' }} onPress={() => navigate("Product", { product: item })} underlayColor="white"> <View style={styles.view} > <Image style={styles.image} source={{ uri: item.images[0].src }} /> <Text style={styles.text}>{item.name}</Text> </View> </TouchableHighlight> ) } /> ); return ( <ScrollView> {this.props.products.length ? Items : <View style={{ alignItems: 'center', justifyContent: 'center' }}> <Image style={styles.loader} source={LoadingAnimation} /> </View> } </ScrollView> ); } }

this.props.ProductAction.getProducts() dan this.props.products dimungkinkan karena mapStateToProps dan mapDispatchToProps .

mapStateToProps dan mapDispatchToProps

State adalah toko Redux dan Dispatch adalah tindakan yang kami aktifkan. Kedua hal ini akan diekspos sebagai props dalam komponen.

 function mapStateToProps(state) { return { products: state.products }; } function mapDispatchToProps(dispatch) { return { ProductAction: bindActionCreators(ProductAction, dispatch) }; } export default connect(mapStateToProps, mapDispatchToProps)(ProductsList);

Gaya

Di React, gaya Native umumnya didefinisikan pada halaman yang sama. Ini mirip dengan CSS, tetapi kami menggunakan properti camelCase alih-alih properti dengan tanda hubung.

 const styles = StyleSheet.create({ list: { flexDirection: 'column' }, view: { padding: 10 }, loader: { width: 200, height: 200, alignItems: 'center', justifyContent: 'center', }, image: { width: 150, height: 150 }, text: { textAlign: 'center', fontSize: 20, padding: 5 } });

Halaman Produk Tunggal

Halaman ini berisi detail produk yang dipilih. Ini menunjukkan kepada pengguna nama, harga, dan deskripsi produk. Ini juga memiliki fungsi 'Tambahkan ke troli'.

Halaman Keranjang

Layar ini menunjukkan daftar item dalam keranjang. Tindakan tersebut memiliki fungsi getCart , addToCart , dan removeFromCart . Peredam juga menangani tindakan. Identifikasi tindakan dilakukan melalui actionTypes — konstanta yang menggambarkan tindakan yang disimpan dalam file terpisah.

 export const GET_PRODUCTS_SUCCESS = 'GET_PRODUCTS_SUCCESS' export const GET_PRODUCTS_FAILED = 'GET_PRODUCTS_FAILED'; export const GET_CART_SUCCESS = 'GET_CART_SUCCESS'; export const ADD_TO_CART_SUCCESS = 'ADD_TO_CART_SUCCESS'; export const REMOVE_FROM_CART_SUCCESS = 'REMOVE_FROM_CART_SUCCESS';

Ini adalah kode untuk komponen CartPage :

 class CartPage extends React.Component { componentDidMount() { this.props.CartAction.getCart(); } _keyExtractor = (item, index) => item.id; removeItem(item) { this.props.CartAction.removeFromCart(item); } render() { const { cart } = this.props; console.log('render cart', cart) if (cart && cart.length > 0) { const Items = <FlatList contentContainerStyle={styles.list} data={cart} keyExtractor={this._keyExtractor} renderItem={({ item }) => <View style={styles.lineItem} > <Image style={styles.image} source={{ uri: item.image }} /> <Text style={styles.text}>{item.name}</Text> <Text style={styles.text}>{item.quantity}</Text> <TouchableOpacity style={{ marginLeft: 'auto' }} onPress={() => this.removeItem(item)}><Entypo name="cross" size={30} /></TouchableOpacity> </View> } />; return ( <View style={styles.container}> {Items} </View> ) } else { return ( <View style={styles.container}> <Text>Cart is empty!</Text> </View> ) } } }

Seperti yang Anda lihat, kami menggunakan FlatList untuk beralih melalui item keranjang. Dibutuhkan dalam array dan membuat daftar item yang akan ditampilkan di layar.

Kesimpulan

Anda dapat mengonfigurasi informasi tentang aplikasi seperti nama dan ikon di file app.json . Aplikasi ini dapat diterbitkan setelah npm menginstal exp.

Untuk menyimpulkan:

• Kami sekarang memiliki aplikasi e-commerce yang layak dengan React Native;
• Expo dapat digunakan untuk menjalankan proyek di smartphone;
• Teknologi backend yang ada seperti WordPress dapat digunakan;
• Redux dapat digunakan untuk mengelola status seluruh aplikasi;
• Pengembang web, terutama pengembang Bereaksi dapat memanfaatkan pengetahuan ini untuk membangun aplikasi yang lebih besar.

Untuk aplikasi lengkapnya, Anda dapat mengunjungi proyek saya di Github dan mengkloningnya. Jangan ragu untuk memotongnya dan meningkatkannya lebih lanjut. Sebagai latihan, Anda dapat terus membangun lebih banyak fitur ke dalam proyek seperti:

• halaman pembayaran,
• Autentikasi,
• Menyimpan data keranjang di AsyncStorage sehingga menutup aplikasi tidak menghapus keranjang.