Halo sahabat Belajarreactjs.com , pada pertemuan kali ini kita akan belajar Membuat toko online dengan React native  Expo dengan menggunakan Rest Api yang sudah di sediakan ,

 

Langkah pertama pastikan teman-teman sudah menginstall expo ya

 

Jika masih bingung cara install expo silahkan ikutin tutorial sebelumnya di membuat form Login dengan React native

 

Langkah kedua setelah install expo CLi , kita akan membuat project baru yaitu aplikasi toko online dengan studi kasus seperti Go-food silahkan buka cmd atau git bash nya di sini saya akan menggunakan CMD.

 

ketikan perintah berikut di terminal atau cmd masing masing

I:\> expo init store

 

jika sudah menginstall projeknya kemudian masuk ke direktori projek caranya seperti gambar di bawah ini

I:\>  store              => perintah ini untuk masuk ke direktori projek

kemudian kita akan menginstall slider agar aplikasi kita kelihatan lebih keren caranya silakan masukan perintah seperti di bawah ini

 

I:\store> npm i react-native-image-slider-box

untuk lebih jelasnya silahkan lihat dokumentasi resminya y  di :

https://www.npmjs.com/package/react-native-image-slider-box

 

 

selanjutnya kita akan menambahkan icon agar App kita kelihatan lebih keren dengan menggunakan Vector Icon

I:\store>npm i react-native-vector-icons

 

langkah selanjutnya install React native  Commuity  untuk dokumentasinya silahkan Klik link berikut :

https://www.npmjs.com/package/@react-native-community/async-storage/v/1.11.0-alpha.0

 

I:\store>yarn add @react-native-community/async-storage

 

 

langkah selanjutnya kita akan menambahkan lokasi di aplikasi yang kita buat untuk itu kita harus install React native map

I:\store>npm i react-native-maps

 

Jika sudah terinstall semua dependencies di atas mari kita masuk ke Visual Studio Codenya. ada beberapa folder dan file yang harus kita buat untuk membuat aplikasinya agar aplikasi tersebut bisa di gunakan dan bisa Runing .

 

Jika sudah di Buka Visual studio Codenya silahkan buat file di dalam Folder src yaitu file :

index.js

Food.js

Profile.js

Adress.js

Cart.js

untuk lebih jelasnya silahkan lihat gambar di bawah ini y !

Kemudian buka file Food.js dan tambahkan script berikut :

import AsyncStorage from '@react-native-community/async-storage';
import React, { Component } from 'react';
import { Text, View ,FlatList,StyleSheet,Dimensions,ScrollView,TextInput,Image,TouchableOpacity } from 'react-native';
var {height, width } = Dimensions.get('window');

import { SliderBox } from "react-native-image-slider-box";
import Icon from 'react-native-vector-icons/Ionicons';

export default class Home extends Component {

  constructor(props)
  {
      super(props);
      this.state = {
          dataBanner:[],
          dataCategories:[],
          dataFood:[],
          selectCatg:0
      }
  }

  componentDidMount ()
  {
    const url = "http://tutofox.com/foodapp/api.json"
    return fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {

      this.setState({
        isLoading: false,
        dataBanner: responseJson.banner,
        dataCategories:responseJson.categories,
        dataFood:responseJson.food
      });

    })
    .catch((error) =>{
      console.error(error);
    });
  }
  render() {
    return (
   
       
        <ScrollView>
            

             <View style={{ flex: 1,backgroundColor:"#f2f2f2" }}>
                 <View style={{width:width,alignItems:'center'}}>
                    {/* <Image resizeMode="contain" style={{height:60, width:width/2, margin:10}} source={{uri: 'https://tutofox.com/foodapp/foodapp.png'}}/> */}

                    <View style={styles.container} onLayout={this.onLayout}>
                    <SliderBox
                       
                        images={this.state.dataBanner}
                        onCurrentImagePressed={index => console.warn(`itembann ${index} pressed`)}
                        dotColor="#FFEE58"
                        inactiveDotColor="#90A4AE"
                        paginationBoxVerticalPadding={20}
                        autoplay
                        circleLoop
                        resizeMethod={'resize'}
                        resizeMode={'cover'}
                        paginationBoxStyle={{
                          position: "absolute",
                          bottom: 0,
                          padding: 0,
                          alignItems: "center",
                          alignSelf: "center",
                          justifyContent: "center",
                          paddingVertical: 10
                        }}
                        dotStyle={{
                          width: 10,
                          height: 10,
                          borderRadius: 5,
                          marginHorizontal: 0,
                          padding: 0,
                          margin: 0,
                          backgroundColor: "rgba(128, 128, 128, 0.92)"
                        }}
                        ImageComponentStyle={{borderRadius: 15, width: '97%', marginTop: 5}}
                        imageLoadingColor="#2196F3"
                                            />
                    </View>
                 </View>
                 
              
                {/* <Text>{JSON.stringify(this.state.dataCategories)}</Text> */}
            </View>
            <View style={{width:width, borderRadius:20, paddingVertical:20, backgroundColor:'white'}}>
                <Text style={styles.titleCatg}>Categories {this.state.selectCatg}</Text>
                <View style={{height:10}}/>
                <FlatList
                  horizontal={true}
                  data={this.state.dataCategories}
                  renderItem={({ item }) => this._renderItem(item)}
                  keyExtractor = { (item,index) => index.toString() }
                />
            

          
                <FlatList  
                  data={this.state.dataFood}
                  numColumns={2}
                  renderItem={({item})=> this._renderItemFood(item)}
                  keyExtractor={(item,index)=>index.toString()}
                />   
                
             
            </View>          
          
           
          
            {/* <Text>{JSON.stringify(this.state.dataFood)}</Text> */}
         

      </ScrollView>
     
   
                    
    );
  }

  _renderItemFood(item){
    let catg = this.state.selectCatg
    if(catg==0||catg==item.categorie)
    {
      return(
        <TouchableOpacity style={styles.divFood}>
          <Image
            style={styles.imageFood}
            resizeMode="contain"
            source={{uri:item.image}} />
            <View style={{height:((width/2)-20)-90, backgroundColor:'transparent', width:((width/2)-20)-10}} />
            <Text style={{fontWeight:'bold',fontSize:22,textAlign:'center'}}>
              {item.name}
            </Text>
            <Text>Descp Food and Details</Text>
            <Text style={{fontSize:20,color:"green"}}>${item.price}</Text>

              <TouchableOpacity
                style={{
                  width:(width/2)-40,
                  backgroundColor:'#33c37d',
                  flexDirection:'row',
                  alignItems:'center',
                  justifyContent:"center",
                  borderRadius:5,
                  padding:4
                }}
                  onPress={()=>this.onClickAddCart(item)}
                >
                <Text style={{fontSize:18, color:"white", fontWeight:"bold"}}>Add Cart</Text>
                <View style={{width:10}} />
                <Icon name="ios-add-circle" size={30} color={"white"} />
                
              </TouchableOpacity>
          </TouchableOpacity>
        )
    }
  }
// scrip di bawah untuk fungsi kategori 
  _renderItem(item){
    return(
      <TouchableOpacity style={[styles.divCategorie,{backgroundColor:item.color}]}
      onPress={()=>this.setState({selectCatg:item.id})}>
        <Image
          style={{width:100,height:80}}
          resizeMode="contain"
          source={{uri : item.image}} />
        <Text style={{fontWeight:'bold',fontSize:22}}>{item.name}</Text>
      </TouchableOpacity>
    )
  }



  // aksi addto cart
  onClickAddCart(data){

    const itemcart = {
      food: data,
      quantity:  1,
      price: data.price
    }
 
    AsyncStorage.getItem('cart').then((datacart)=>{
        if (datacart !== null) {
          // We have data!!
          const cart = JSON.parse(datacart)
          cart.push(itemcart)
          AsyncStorage.setItem('cart',JSON.stringify(cart));
        }
        else{
          const cart  = []
          cart.push(itemcart)
          AsyncStorage.setItem('cart',JSON.stringify(cart));
        }
        alert("Produk sudah di tambahkan ke keranjang")
      })
      .catch((err)=>{
        alert(err)
      })
  }
}

const styles = StyleSheet.create({
  imageBanner: {
    height:width/2,
    width:width-40,
    borderRadius:10,
    marginHorizontal:20
  },
  divCategorie:{
    backgroundColor:'red',
    margin:5, alignItems:'center',
    borderRadius:10,
    padding:10
  },
  titleCatg:{
    fontSize:30,
    fontWeight:'bold',
    textAlign:'center',
    marginBottom:10
  },
  imageFood:{
    width:((width/2)-20)-10,
    height:((width/2)-20)-30,
    backgroundColor:'transparent',
    position:'absolute',
    top:-45
  },
  divFood:{
    width:(width/2)-20,
    padding:10,
    borderRadius:10,
    marginTop:55,
    marginBottom:5,
    marginLeft:10,
    alignItems:'center',
    elevation:8,
    shadowOpacity:0.3,
    shadowRadius:50,
    backgroundColor:'white',
  }
});

untuk struktur di Visual studio Codenya seperti gambar di bawah ini y :

 

 

kemudian buka file Cart.js

dan tambahkan script seperti berikut

import React, { Component } from 'react';
import { Text, View,Image ,ScrollView,TextInput,Dimensions,StyleSheet ,TouchableOpacity } from 'react-native';

var { width } = Dimensions.get("window")
// import icons
import Icon from 'react-native-vector-icons/Ionicons';
import AsyncStorage from '@react-native-community/async-storage';

export default class Cart extends Component {

  constructor(props) {
    super(props);
    this.state = {
      dataCart:[],
    };
 }
 componentDidMount()
  {
    AsyncStorage.getItem('cart').then((cart)=>{
      if (cart !== null) {
        // We have data!!
        const cartfood = JSON.parse(cart)
        this.setState({dataCart:cartfood})
      }
    })
    .catch((err)=>{
      alert(err)
    })
  }

  
  render() {
    return (
      <View style={{flex:1,alignItems: 'center', justifyContent: 'center'}}>
         <View style={{height:20}} />
         <Text style={{fontSize:32,fontWeight:"bold",color:"#33c37d"}}>Cart food</Text>
         <View style={{height:10}} />

         <View style={{flex:1}}>

           <ScrollView>

             {
               this.state.dataCart.map((item,i)=>{
                 return(
                   <View style={{width:width-20,margin:10,backgroundColor:'transparent', flexDirection:'row', borderBottomWidth:2, borderColor:"#cccccc", paddingBottom:10}}>
                     <Image resizeMode={"contain"} style={{width:width/3,height:width/3}} source={{uri: item.food.image}} />
                     <View style={{flex:1, backgroundColor:'trangraysparent', padding:10, justifyContent:"space-between"}}>
                       <View>
                         <Text style={{fontWeight:"bold", fontSize:20}}>{item.food.name}</Text>
                         <Text>Baba food</Text>
                       </View>
                       <View style={{flexDirection:'row',justifyContent:'space-between'}}>
                         <Text style={{fontWeight:'bold',color:"#33c37d",fontSize:20}}>${item.price*item.quantity}</Text>
                         <View style={{flexDirection:'row', alignItems:'center'}}>
                           <TouchableOpacity onPress={()=>this.onChangeQual(i,false)}>
                             <Icon name="ios-remove-circle" size={35} color={"#33c37d"} />
                           </TouchableOpacity>
                           <Text style={{paddingHorizontal:8, fontWeight:'bold', fontSize:18}}>{item.quantity}</Text>
                           <TouchableOpacity onPress={()=>this.onChangeQual(i,true)}>
                             <Icon name="ios-add-circle" size={35} color={"#33c37d"} />
                           </TouchableOpacity>
                         </View>
                       </View>
                     </View>
                   </View>
                 )
               })
             }

             <View style={{height:20}} />

             <TouchableOpacity style={{
                 backgroundColor:"#33c37d",
                 width:width-40,
                 alignItems:'center',
                 padding:10,
                 borderRadius:5,
                 margin:20
               }}>
               <Text style={{
                   fontSize:24,
                   fontWeight:"bold",
                   color:'white'
                 }}>
                 CHECKOUT
               </Text>
             </TouchableOpacity>

             <View style={{height:20}} />
           </ScrollView>

         </View>

      </View>
    );
  }


      onChangeQual(i,type)
      {
        const dataCar = this.state.dataCart
        let cantd = dataCar[i].quantity;

        if (type) {
        cantd = cantd + 1
        dataCar[i].quantity = cantd
        this.setState({dataCart:dataCar})
        }
        else if (type==false&&cantd>=2){
        cantd = cantd - 1
        dataCar[i].quantity = cantd
        this.setState({dataCart:dataCar})
        }
        else if (type==false&&cantd==1){
        dataCar.splice(i,1)
        this.setState({dataCart:dataCar})
        } 
      }
}

 

untuk penempatanya lihat gambar di bawah ini y :

Langkah selanjutnya kita akan membuat tampilan Cart.js , silahkan buka file Cart.js nya dan tambahkan script seperti di bawah ini :

import React, { Component } from 'react';
import { Text, View,Image ,ScrollView,TextInput,Dimensions,StyleSheet ,TouchableOpacity } from 'react-native';

var { width } = Dimensions.get("window")
// import icons
import Icon from 'react-native-vector-icons/Ionicons';
import AsyncStorage from '@react-native-community/async-storage';

export default class Cart extends Component {

  constructor(props) {
    super(props);
    this.state = {
      dataCart:[],
    };
 }
 componentDidMount()
  {
    AsyncStorage.getItem('cart').then((cart)=>{
      if (cart !== null) {
        // We have data!!
        const cartfood = JSON.parse(cart)
        this.setState({dataCart:cartfood})
      }
    })
    .catch((err)=>{
      alert(err)
    })
  }

  
  render() {
    return (
      <View style={{flex:1,alignItems: 'center', justifyContent: 'center'}}>
         <View style={{height:20}} />
         <Text style={{fontSize:32,fontWeight:"bold",color:"#33c37d"}}>Cart food</Text>
         <View style={{height:10}} />

         <View style={{flex:1}}>

           <ScrollView>

             {
               this.state.dataCart.map((item,i)=>{
                 return(
                   <View style={{width:width-20,margin:10,backgroundColor:'transparent', flexDirection:'row', borderBottomWidth:2, borderColor:"#cccccc", paddingBottom:10}}>
                     <Image resizeMode={"contain"} style={{width:width/3,height:width/3}} source={{uri: item.food.image}} />
                     <View style={{flex:1, backgroundColor:'trangraysparent', padding:10, justifyContent:"space-between"}}>
                       <View>
                         <Text style={{fontWeight:"bold", fontSize:20}}>{item.food.name}</Text>
                         <Text>Lorem Ipsum de food</Text>
                       </View>
                       <View style={{flexDirection:'row',justifyContent:'space-between'}}>
                         <Text style={{fontWeight:'bold',color:"#33c37d",fontSize:20}}>${item.price*item.quantity}</Text>
                         <View style={{flexDirection:'row', alignItems:'center'}}>
                           <TouchableOpacity onPress={()=>this.onChangeQual(i,false)}>
                             <Icon name="ios-remove-circle" size={35} color={"#33c37d"} />
                           </TouchableOpacity>
                           <Text style={{paddingHorizontal:8, fontWeight:'bold', fontSize:18}}>{item.quantity}</Text>
                           <TouchableOpacity onPress={()=>this.onChangeQual(i,true)}>
                             <Icon name="ios-add-circle" size={35} color={"#33c37d"} />
                           </TouchableOpacity>
                         </View>
                       </View>
                     </View>
                   </View>
                 )
               })
             }

             <View style={{height:20}} />

             <TouchableOpacity style={{
                 backgroundColor:"#33c37d",
                 width:width-40,
                 alignItems:'center',
                 padding:10,
                 borderRadius:5,
                 margin:20
               }}>
               <Text style={{
                   fontSize:24,
                   fontWeight:"bold",
                   color:'white'
                 }}>
                 CHECKOUT
               </Text>
             </TouchableOpacity>

             <View style={{height:20}} />
           </ScrollView>

         </View>

      </View>
    );
  }


      onChangeQual(i,type)
      {
        const dataCar = this.state.dataCart
        let cantd = dataCar[i].quantity;

        if (type) {
        cantd = cantd + 1
        dataCar[i].quantity = cantd
        this.setState({dataCart:dataCar})
        }
        else if (type==false&&cantd>=2){
        cantd = cantd - 1
        dataCar[i].quantity = cantd
        this.setState({dataCart:dataCar})
        }
        else if (type==false&&cantd==1){
        dataCar.splice(i,1)
        this.setState({dataCart:dataCar})
        } 
      }
}

 

kemudian buka file Profile.js dan tambahkan script seperti di bawah ini :

import React, { Component } from 'react';
import { Text, View, TextInput, TouchableOpacity } from 'react-native';

export default class Profile extends Component {

  constructor(props) {
     super(props);
     this.state = {
       data:"",
     };
  }

  render() {
    return (
      <View style={{flex:1,alignItems: 'center', justifyContent: 'center'}}>
         <Text>Profile</Text>
      </View>
    );
  }
}

Belajar membuat website

Langkah selanjutnya kita akan membuat navigation tapi disini kita tidak akan menggunakan react-navigation karena terlalu lumayan ribet disini kita akan membuat navigasi mengguanakn teknik javascript biasa untuk scriptnya silahkan buka file index.js dan tambahkan script seperti di bawah ini:

 

import React, { Component } from 'react';
import { Text, View, TextInput,StyleSheet ,Dimensions,TouchableOpacity } from 'react-native';

// import food
import Food    from './Food';
import Cart    from './Cart';
import Profile from './Profile';
import Address  from './Adress';
// import icons
import Icon from 'react-native-vector-icons/Ionicons';

var {width}  = Dimensions.get("window")


console.disableYellowBox = true;

export default class Index extends Component {

  constructor(props) {
     super(props);
     this.state = {
       module:1,
     };
  }

  render() {
    return (
      <View>
          <View style={{width:width,alignItems:'center',marginTop:20}}>
              {/* <Image resizeMode="contain" style={{height:60, width:width/2, margin:10}} source={{uri: 'https://tutofox.com/foodapp/foodapp.png'}}/> */}
              <Text style={{fontWeight:'bold',fontSize:22,}}>BabaFoodAPP</Text>
          </View>
          <View style={{flex:1,alignItems: 'center', justifyContent: 'center'}}>
            {
              this.state.module==1? <Food />
              :this.state.module==2? <Cart />
              :this.state.module==3? <Address />
              :<Profile />
            }
            <View style={styles.bottomTab}>
                <TouchableOpacity style={styles.itemTab} onPress={()=>this.setState({module:1})}>
                    <Icon name="md-restaurant" size={30} color={this.state.module==1?"#900":"gray"} />
                    <Text>Food</Text>
                  </TouchableOpacity>
                  <TouchableOpacity style={styles.itemTab} onPress={()=>this.setState({module:2})}>
                    <Icon name="md-basket" size={30} color={this.state.module==2?"#900":"gray"} />
                    <Text>Cart</Text>
                  </TouchableOpacity>
                  <TouchableOpacity style={styles.itemTab} onPress={()=>this.setState({module:3})}>
                    <Icon name="md-map" size={30} color={this.state.module==3?"#900":"gray"} />
                    <Text>Address</Text>
                  </TouchableOpacity>
                  <TouchableOpacity style={styles.itemTab} onPress={()=>this.setState({module:4})}>
                    <Icon name="md-person-circle-outline" size={30} color={this.state.module==4?"#900":"gray"} />
                    <Text>Profile</Text>
                  </TouchableOpacity>
            </View>
          </View>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  bottomTab:{
    height:60,
   
    width:width,
    backgroundColor:'orange',
    flexDirection:'row',
    justifyContent:'space-between',
    elevation:8,
    shadowOpacity:0.3,
    shadowRadius:50,
  },
  itemTab:{
    width:width/4,
    backgroundColor:'white',
    alignItems:'center',
    justifyContent:'center'
  }
})

script di bawah ini yang kita gunakan untuk membuat navigasi

          {
              this.state.module==1? <Food />
              :this.state.module==2? <Cart />
              :this.state.module==3? <Address />
              :<Profile />
            }

 

Langkah selanjutnya silahkan buka file App.js dan tambahkan script seperti gambar di bawah ini :

untuk script App.js silahkan ikutin seperti di bawah ini :

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Home from './src/index'

export default function App() {
  return (
    <View style={styles.container}>
       <Home/>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

jika sudah semua langkah terahir kita akan menjalankan aplikasiny di expo silahkan buka hp nya dan scanner barcodenya :

 

silahakn jalankan dlu npm start

kemudian akan terbuka di browser barcode yang akan kita scan tampilanya seperti gambar di bawah ini :

 

 

dan hasilnya seperti gambar di bawah ini :