menu

React Native - Basic code React Native (macOS)


Pada tutorial sebelumnya kita sudah membuat sebuah project react native sederhana dengan perubahan routing dan penambahan header App, tutorial kali ini kita akan belajar code sederhana dalam react native.

Karena react sendiri merupakan bahasa nativenya maka react native ini sangat berbeda dengan permrograman html biasa, untuk dari sisi Frontend react native memiliki syntax-nya sendiri.

Oke kita mulai saja pemahaman basic code pada react native ini,

Buka kembali file home.js yang sudah kita buat pada tutorial sebelumnya, dan edit menjadi seperti ini,
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, { Component } from 'react';
import {
  NavigatorIOS,
  TouchableHighlight,
  TouchableOpacity,
  TouchableNativeFeedback,
  TouchableWithoutFeedback,
  ScrollView,
  FlatList,
  SectionList,
  ActivityIndicator,
  ListView,
  Button,
  Alert,
  Image,
  TextInput,
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class NavigatorIOSApp extends Component {
  render() {
    return (
      <NavigatorIOS
        initialRoute={{
          title: 'Codedoct',
          component: HelloWorld,
        }}
        style={{flex: 1}}
      />
    );
  }
}

class HelloWorld extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Hello world!</Text>
      </View>
    )
  }
}

class InputImageAndProps extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <View style={styles.container}>
        <Image source={pic} style={{width: 193, height: 110}}/>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}
//component greeting
class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

class HeightAndWidth extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
        <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}
class HeightAndWidthFull extends Component {
  render() {
    return (
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}

class HandlingTextInput extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: ''
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
        </Text>
      </View>
    );
  }
}

class HandlingTouches extends Component {
  _onPressButton() {
    Alert.alert('You tapped the button!')
  }

  render() {
    return (
      <View style={styles.container}>
        <Button
          onPress={() => {
            Alert.alert('You tapped the button!');
          }}
          title="Press Me"
        />
        <Button
          onPress={this._onPressButton}
          title="Press Me"
        />
        <TouchableHighlight onPress={this._onPressButton} underlayColor="white">
          <View style={styles.button}>
            <Text style={styles.buttonText}>TouchableHighlight</Text>
          </View>
        </TouchableHighlight>
        <TouchableOpacity onPress={this._onPressButton}>
          <View style={styles.button}>
            <Text style={styles.buttonText}>TouchableOpacity</Text>
          </View>
        </TouchableOpacity>
        <TouchableNativeFeedback
            onPress={this._onPressButton}
            background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}>
          <View style={styles.button}>
            <Text style={styles.buttonText}>TouchableNativeFeedback</Text>
          </View>
        </TouchableNativeFeedback>
        <TouchableWithoutFeedback
            onPress={this._onPressButton}
            >
          <View style={styles.button}>
            <Text style={styles.buttonText}>TouchableWithoutFeedback</Text>
          </View>
        </TouchableWithoutFeedback>
        <TouchableHighlight onPress={this._onPressButton} onLongPress={this._onLongPressButton} underlayColor="white">
          <View style={styles.button}>
            <Text style={styles.buttonText}>Touchable with Long Press</Text>
          </View>
        </TouchableHighlight>
      </View>
    );
  }
}

class UsingAScrollView extends Component {
  render () {
    return(
      <View style={styles.container}>
        <ScrollView>
          <Text style={{fontSize: 100}}>
            start to scroll start to scroll start to scroll start to scroll start to scroll start to scroll start to scroll 
          </Text>
        </ScrollView>
      </View>
    )
  }
}

class UsingListViews extends Component {
  render () {
    return(
      <View style={styles.container}>
        <FlatList
          data={[
            {
              key: 'Devin'
            },
            {key: 'Jackson'},
            {key: 'James'},
            {key: 'Joel'},
            {key: 'John'},
            {key: 'Jillian'},
            {key: 'Jimmy'},
            {key: 'Julie'},
          ]}
          renderItem={({item}) => <Text>{item.key}</Text>}
        />
      </View>
    )
  }
}
class UsingListViews2 extends Component {
  render () {
    return(
      <View style={styles.container}>
        <SectionList
          sections={[
            {title: 'D', data: ['Devin']},
            {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
          ]}
          renderItem={({item}) => <Text>{item}</Text>}
          renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
          keyExtractor={(item, index) => index}
        />
      </View>
    )
  }
}

class Networking extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    }
  }

  async componentDidMount() {
    // ada 2 cara
    // 1. fetch yang akan mengembalikan sebuah promise
    // return fetch('https://facebook.github.io/react-native/movies.json')
    //   .then((response) => response.json())
    //   .then((responseJson) => {
    //     let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    //     this.setState({
    //       isLoading: false,
    //       dataSource: ds.cloneWithRows(responseJson.movies),
    //     }, function() {
    //       // do something with new state
    //     });
    //   })
    //   .catch((error) => {
    //     console.error(error);
    //   });

    // 2. async await (kita akan lebih sering menggunakan cara async await untuk tutor2 selanjutnya)
    try {
      let response = await fetch(
        'https://facebook.github.io/react-native/movies.json'
      );
      let responseJson = await response.json();
      let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
      this.setState({
        isLoading: false,
        dataSource: ds.cloneWithRows(responseJson.movies),
      }, function() {
        // do something with new state
      });
    } catch (error) {
      console.error(error);
    }
  }

  render() {
    if (this.state.isLoading) {
      return (
        <View style={styles.container}>
          <ActivityIndicator />
        </View>
      );
    }

    return (
      <View style={styles.container}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <Text>{rowData.title}, {rowData.releaseYear}</Text>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    marginTop: 65,
    backgroundColor: '#F5FCFF',
  },
  button: {
    marginBottom: 30,
    width: 260,
    alignItems: 'center',
    backgroundColor: '#2196F3'
  },
  buttonText: {
    padding: 20,
    color: 'white'
  },
  sectionHeader: {
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    fontSize: 14,
    fontWeight: 'bold',
    backgroundColor: 'rgba(247,247,247,1.0)',
  },
});t

Pada code tersebut codedoct sudah menambahkan beberapa contoh basic code pada react native, kita akan mengulasnya satu persatu.
Pertama belajar Input Image dan bermain dengan Props, untuk mencobanya mudah pada code dibawah ini,
export default class NavigatorIOSApp extends Component {
  render() {
    return (
      <NavigatorIOS
        initialRoute={{
          title: 'Codedoct',
          component: HelloWorld,
        }}
        style={{flex: 1}}
      />
    );
  }
}

Dapat kita lihat pada component kita memanggil class HelloWorld, coba kita ganti dengan class InputImageAndProps seperti ini,
export default class NavigatorIOSApp extends Component {
  render() {
    return (
      <NavigatorIOS
        initialRoute={{
          title: 'Codedoct',
          component: InputImageAndProps,
        }}
        style={{flex: 1}}
      />
    );
  }
}

Maka hasilnya akan tampak seperti ini,

Pahamilah basic code-nya, bagaimana syntax yang ditulis agar dapat memperoleh UI seperti pada gambar diatas.

Sekarang lanjutkan dengan class-class berikutnya dengan cara yang sama dengan cara sebelumnya yaitu mengganti nama componentnya.
HeightAndWidth


HeightAndWidthFull


HandlingTextInput


HandlingTouches


UsingAScrollView


UsingListViews


UsingListViews2


Networking


===DONE!===

React Native - Create project React Native (macOS)


Back to code, lama tidak menulis blog akhirnya diberi waktu juga untuk menulis kembali.

Setelah melihat analytics dari website codedoct.com ternyata peminat dari react native sendiri sangat banyak, maka dari itu codedoct akan meberikan tutorial yang lebih mendalam lagi tentang mobile develop react native ini, dan bila ada kesempatan codedoct juga akan memberikan tutorial mobile develop untuk hybrid (Ionic).

Pada tutorial sebelumnya pada chapter react native kita sudah membuat project react native untuk Android yang diinstall pada windows, maka tutorial kali ini kita akan membuat project react native untuk versi iOS nya, dan karena development dari raect native untuk iOS ini hanya bisa dilakukan pada macOS maka saya sarankan untuk gunakan macbook untuk development keduanya baik iOS maupun Android hehe..

Oke langsung saja kita mulai tutorialnya,

Pertama sebelum install react native, kita harus menginstall Xcode terlebih dahulu karena kita akan membutuhkan simulator iOS pada Xcode untuk menjalankan App react native kita, cara install Xcode sangat mudah, buka saja App Store dan cari Xcode kemudian install.

Setelah selesai kemudian install react native nya, dengan cara,
npm install npm@latest -g
npm install -g create-react-native-app

Jika sudah diinstall coba cek dengan cara,


Selanjutnya create project dan jalankan pada simulator dengan cara,
create-react-native-app BlogReactNative
cd BlogReactNative
npm start

Maka akan muncul simulatornya seperti ini,


Oke, sekarang kita sudah bisa development iOS app dengan react native, development yang pertama yang akan kita lakukan adalah mengganti routing dan menambahkan header dengan cara,

Pertama buat folder baru dengan nama Project dan buat file home.js pada folder tersebut sehingga struktur foldernya akan tampak seperti ini,


Selanjutnya isi file home.js dengan code berikut,
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, { Component } from 'react';
import {
  NavigatorIOS,
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class NavigatorIOSApp extends Component {
  render() {
    return (
      <NavigatorIOS
        initialRoute={{
          title: 'Codedoct',
          component: HelloWorld,
        }}
        style={{flex: 1}}
      />
    );
  }
}

class HelloWorld extends Component {
  render() {
    return (
      <view>
        <text>Hello world!</text>
      </view>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    marginTop: 65,
    backgroundColor: '#F5FCFF',
  },
});

Kemudian arahkan route ke file home.js yang baru saja kita buat dengan cara mengedit file index.js menjadi seperti ini,
import { AppRegistry } from 'react-native';
import Project from './Project/home';

AppRegistry.registerComponent('BlogReactNative', () => Project);

Sekarang refresh simulator dengan cara menekan tombol command + R sehingga akan muncul,



Agar tidak repot untuk selalu refresh simulator, coba buka simulator dan tekan tombol command + D maka akan keluar menu berikut,


dan klik saja pilihan Enable Live Reload untuk auto reload simulator.

===DONE!===

Laravel - RabbitMQ (consume message)


Tahun baru, kita kita akan lanjutkan project rabbitMQ, pada tutorial sebelumnya kita sudah sampai pada engine untuk mengirim pesan rabbitMQ pada server, tutorial kali ini kita akan menitik beratkan pada cara mentrigger untuk membaca pesan.

Oke langsung saja kita mulai tutorialnya, pertama kita buat dulu engine consume rabbitnya, dengan cara buat file baru dengan nama consumeRabbit.php isi dengan code berikut:

<?php
 require_once __DIR__ . '/protected/vendor/autoload.php';
 use PhpAmqpLib\Connection\AMQPStreamConnection;
 use PhpAmqpLib\Message\AMQPMessage;

 $host = '127.0.0.1';
 $port = 5672;
 $user = 'guest';
 $pass = 'guest';
 $queue = 'test_message';

 $connection = new AMQPStreamConnection($host, $port, $user, $pass);
 $channel = $connection->channel();
 $channel->queue_declare($queue, false, false, false, false);
 echo ' [*] Waiting for messages. To exit press CTRL+C', "\n";

 $callback = function($msg) {
   echo " [x] Received ", $msg->body, "\n";
 };

 $channel->basic_consume($queue, '', false, true, false, false, $callback);
 while(count($channel->callbacks)) {
     $channel->wait();
 }
?>


Oke saatnya kita test
nyalakan terlebih dahulu server rabbitnya dengan cara buka tutorial sebelumnya,
kemudian, buka terminal masuk ke path project laravel kita kemudian jalankan engine consume rabbitnya dengan cara: php consumeRabbit.php sehingga akan muncul tampilan seperti ini,


Jika engine sudah ready, sekarang buka project laravel kita sehingga akan muncul halaman home seperti gambar dibawah,


selanjutnya click Send Rabbit jika proses selesai lihat terminal yang sudah kita jalankan engine consumeRabbit.php tadi sehingga akan tampak seperti gambar dibawah,



===DONE!===

Laravel - RabbitMQ (send message)


Pada tutorial sebelumnya kita sudah menginstall rabbitmq, tutorial kali ini kita akan membuat engine send message to rabbitmq dari framework laravel.

Engine yang akan kita buat ini akan kita ditempel pada project laravel yang sudah kita buat sebelumnya (silahkan ikuti tutorial laravel secara terurut, bisa lihat di books), atau download projectnya disini.

Pertama, install library rabbitmq pada laravel, dalam hal ini kita akan menggunakan library php-amqplib/php-amqplib, install library dengan cara, ketikan pada terminal code berikut,
php composer require php-amqplib/php-amqplib

Selanjutnya, tambahkan route baru untuk controller rabbitmq yang akan kita buat, terletak pada path protected/app/routes file web.php
///////////
// QUEUE //
///////////
Route::group(array('prefix' => 'queue'), function(){
 Route::get('sendRabbit', 'Controller\QueueController@sendRabbit');
});

Setelah itu, buat controller baru dengan nama QueueController.php pada path protected/app/controllers/ dan masukkan code berikut,
<?php namespace Controller;

use Model\User;
use \Input;
use \View;
use \Validator;
use \Redirect;
use PhpAmqpLib\Connection\AMQPStreamConnection;
use PhpAmqpLib\Message\AMQPMessage;

class QueueController extends \BaseController 
{
 function sentQueueRabbitMQ($message = [])
 {
    $connection = new AMQPStreamConnection(RABBITMQ_HOST, RABBITMQ_PORT, RABBITMQ_LOGIN, RABBITMQ_PASSWORD);

    $channel = $connection->channel();

    if (!empty($message)) {
      $message = new AMQPMessage(json_encode($message));
      $channel->basic_publish($message, '', RABBITMQ_QUEUE);
    }

    $channel->close();
    $connection->close();
 }

 public function sendRabbit()
 {
  $id = str_random(4);
  $message = [
   'id' => $id,
   'message' => 'halo '.$id
  ];
  $this->sentQueueRabbitMQ($message);
  return Redirect::to('/');
 }
}

Terakhir buat tampilannya untuk test saja berupa satu button untuk mengirim message yang berupa json ke rabbitmq dengan cara,
edit file header.blade.php pada path protected/app/views/layouts/web/ menjadi seperti ini,
<div class="header">
 <div class="banner">
  <div class="welcome">Welcome</div>
  {{-- code dibawah ini menggunakan constant variabel --}}
  <div class="gambar"><a href="#"><img src="{{ IMAGE_HEADER }}" style="width:"100px" height="129px";"></a></div>
 </div>
 <hr>
 <div class="menu">
  <div class="kiri">
   <li>
    <div class="dropdown">
      <button class="btn btn-default">Menu(css)</button>
      <div class="dropdown-content">
        <a href="{{ URL::to('crud/users')}}">User</a>
        <a href="{{ URL::to('book')}}">Index Book</a>
        <a href="{{ URL::to('javaScript/js1')}}">Belajar Script</a>
        <a href="{{ URL::to('javaScript/js2')}}">Belajar Script2</a>
        <a href="{{ URL::to('javaScript/js3')}}">Belajar Script3</a>
        <a href="{{ URL::to('javaScript/js4')}}">Belajar Script4</a>
        <a href="{{ URL::to('javaScript/js5')}}">Belajar Script5</a>
        <a href="{{ URL::to('javaScript/js6')}}">Belajar Script6</a>
        <a href="{{ URL::to('javaScript/js7')}}">Belajar Script7</a>
      </div>
    </div>
   </li>
   <li>
     <div class="dropdown-script">
      <button onclick="myFunction()" class="dropbtn btn btn-default">Translate</button>
      <div id="myDropdown" class="dropdown-content-script">
        <a href="{{ URL::to('lang/en') }}">English</a>
        <a href="{{ URL::to('lang/ina') }}">Indonesia</a>
      </div>
     </div>
   </li>
  </div>
  <div class="kanan">
   @if(Auth::user())
    <li onclick="if(confirm('Are you sure to logout?')) location.href='{{ URL::to('logout') }}';">Logout</li>
   @else
    <li onclick="location.href='{{ URL::to('login') }}';">Login</li>
   @endif
   <li onclick="location.href='{{ URL::to('register') }}';">Register</li>

   <!-- Send queue rabbit -->
   <li onclick="location.href='{{ URL::to('queue/sendRabbit') }}';">Send Rabbit</li>
  </div>
 </div>
</div>

Sehingga tampilannya akan tampak seperti ini,


Saat di klik button Send Rabbit maka pada rabbitmq (http://localhost:15672/#/) akan muncul tampilan seperti ini,



Tutorial berikutnya kita akan membuat engine untuk consume message rabbitmq,

===DONE!===

Laravel - RabbitMQ (Setup)


Back to code, lebih dari sebulan vakum akhirnya bisa eksperimen lagi,
pada eksperimen kali ini kita akan bereksperimen membuat sebuah engine rabbitmq yang akan disematkan pada project laravel, rabbitmq adalah salah satu perangkat lunak manajemen antrian yang digunakan untuk pengiriman pesan. Eksperiment ini akan dibagi menjadi 3 tutorial,
  1. Setup rabbitmq
  2. Send message
  3. Consume message
Pada tutorial yang pertama kita akan menginstall rabbitmq pada komputer,
Oke langsung saja kita mulai tutorialnya, pertama install rabbitmq terlebih dahulu dengan cara ikuti saja langkah ini https://www.rabbitmq.com/download.html karena saya menggunakan macOS maka saya akan menggunakan homebrew https://www.rabbitmq.com/install-homebrew.html
brew update
brew install rabbitmq

Jika muncul error ini,



Ini berarti anda tidak memiliki akses pada folder man5, ketikan saja code berikut pada terminal,
sudo chown -R nama_user_mac:admin /usr/local/share
jika sudah ketikan code berikut pada terminal,
brew link rabbitmq

Jika tidak muncul error diatas, langsung lanjut saja ke bawah,
Setelah selesai install rabbitmq pada komputer maka nyalakan servernya pada localhost dengan cara,
ketikan pada terminal
/usr/local/sbin/rabbitmq-server

Sehingga akan muncul seperti pada gambar dibawah,


Untuk mematikan server rabbitmq ketikan syntax berikut pada terminal
/usr/local/sbin/rabbitmqctl stop

Sekarang buka browser dan buka link ini http://localhost:15672/#/ (user:guest password:guest) sehingga akan muncul tampilan seperti ini,


Selanjutnya tambahkan queue pada rabbitmq, caranya

  • Masuk ke menu Queues
  • Isi name
  • Klik Add queue


Tutorial selanjutnya send message,

===DONE!===

Engine - Chat with firebase


Pada tutorial kali ini, codedoct akan sharing membuat engine chat sederhana dengan firebase, apa itu firebase bisa baca disini,

Oke langsung saja kita mulai experimentnya, hal pertama yang harus dilakukan adalah sign-in terlebih dahulu ke firebase-console dengan menggunakan akun gmail anda, jika belum punya akun gmail? silahkan buat terlebih dahulu.

Jika anda sudah login maka akan tampak seperti pada gambar dibawah ini,


Klik tambahkan proyek untuk membuat proyek baru, akan tampak seperti gambar dibawah,


Jika sudah dibuat maka anda akan masuk ke halaman ini,


Masuk ke menu database dengan meng-click submenu "Database" disebelah kiri halaman, dan akan tampil seperti gambar dibawah,


Selanjutnya kita akan mengimpor database yang sudah saya buat terlebih dahulu sebagai template database. Caranya bisa lihat pada gambar diatas, sehingga akan tampak gambar dibawah,


Silahkan dowload database ini, kemudian pada gambar diatas klik jelajahi dan silahkan pilih database yang sudah di download tadi. Sehingga akan tampah database seperti pada gambar dibawah,


Selanjutnya kita akan membuat auth pada engine firebase kita, masuk ke menu "Authentification" dan klik "Metode Masuk" seperti pada gambar dibawah,


Klik Google dan aktifkan seperti pada gambar dibawah,


Jika semua sudah dilakukan, sekarang kita akan setup engine sederhana yang sudah saya buat, buat folder pada htdocs (bagi pengguna windows, yang lain menyesuaikan hehe..), saya akan buat folder bernama "firebase" dan buat file format php dengan nama index.php pada folder "firebase" tersebut kemudian isikan code berikut,
<!DOCTYPE html>
<html>
<head>
 <!-- Letakan code firebase disini -->

 <!-- ============================ -->

 <title>Experiment Firebase</title>
 <script type="text/javascript">
  window.onload = function () { 
   var user = userShow();
   if (user) {
    loadMessage();
    alert('Welcome '+user.displayName+'!');
   }
  }

  function login() {
   var provider = new firebase.auth.GoogleAuthProvider();
   firebase.auth().signInWithPopup(provider).then(function(result) {
     console.log("login");
   }).catch(function(error) {
     // Handle Errors here.
     var errorCode = error.code;
     var errorMessage = error.message;
     // The email of the user's account used.
     var email = error.email;
     // The firebase.auth.AuthCredential type that was used.
     var credential = error.credential;
     // ...
   });
  }

  function userShow() {
   var auth = localStorage['firebase:authUser:'+config.apiKey+':[DEFAULT]'] ? localStorage['firebase:authUser:'+config.apiKey+':[DEFAULT]'] : null;
   if (auth) {
    var result = JSON.parse(auth);
    console.log(result.displayName);
    return result;
   } else {
    alert('Please login first.');
   }
  }

  function logout() {
   firebase.auth().signOut().then(function() {
     // Sign-out successful.
     console.log("logout");
   }).catch(function(error) {
     // An error happened.
   });
  }

  function sendMessage() {
   var messageContent = document.getElementById('message').value;
   var user = userShow();

   if (user) {
    var data = {
     name:user.displayName,
     message:messageContent
    };
    // console.log(message);
    var firebaseRef = firebase.database().ref('messages');
    firebaseRef.push(data);
    document.getElementById('message').value = '';
   }
  }

  function loadMessage() {
   var dataMessages = firebase.database().ref('messages').limitToLast(5);
   dataMessages.on('value', function(messages) {
      var messagesList = document.getElementById('messages-list');
      var boxChat = document.getElementById('box-chat');

       if (messages.val()) {
     messagesList.parentNode.removeChild(messagesList);
     boxChat.innerHTML = boxChat.innerHTML + '<div id="messages-list"></div>';
     var messagesList = document.getElementById('messages-list');
       for (var message in messages.val()) {
      messagesList.innerHTML = messagesList.innerHTML + "<p>" + messages.val()[message].name + " || " + messages.val()[message].message + "</p>"; 
     }
       } else {
        console.log('data not found');
       }
   });
  }
 </script>
</head>
<body>
 <button type="button" onclick="login()">Login</button> || <button type="button" onclick="userShow()">User</button> || <button type="button" onclick="logout()">Logout</button>
 <br><br>
 <div id="box-chat">
  <div id="messages-list"></div>
 </div>
 <textarea placeholder="Write the message" id="message"></textarea>
 <button type="submit" onclick="sendMessage()">Send</button>
</body>
</html>

Jika sudah, masuk ke path folder firebase tadi dengan menggunakan PowerShell kemudian install firebase-tools ketikan code berikut,


Setelah itu login,


Initiate firebase dan user --add


Oke semua sudah di set sekarang tinggal menghubungkan engine dengan firebasenya saja, buka kembali firebase-console tadi,


Dan klik "Tambahkan Firebase ke apliksi web anda" salin codenya dan letakkan code firebase ke engine firebase yang sudah saya siapkan tempatnya sehingga akan terlihat seperti gambar dibawah,


Buka halaman engine firebase pada browser sehingga akan tampak seperti pada gambar dibawah ini,


Klik "Login", menggunakan user gmail, karna sudah kita aktifkan authentification untuk gmail, jika berhasil login, coba refresh halaman sehingga akan tampak seperti pada gambar dibawah,


Jika kita inspect halaman saat kita klik "User" maka akan tampak username gmail yang kita gunakan untuk login seperti gambar dibawah,


===DONE!===

Syntax - Syntax elasticsearch


Pada tutorial kali ini, codedoct akan sharing syntax2 untuk elasticsearch, apa itu elasticsearch? bisa cari tahu di official websitenya langsung disini,

Untuk mengetesnya bisa menggunakan postman yang diinstall pada chrome,
Oke langsung saja sharing ilmu.

Test elasticsearch

Add index

Get index

Add document

Get document

Search Document

Show Document

Bulk Document

Edit document

Delete document

Delete index


===DONE!===