Membuat Aplikasi Real-Time Dengan Python Dan Pusher

Implementasi real-time data saat ini sangat populer dalam dunia aplikasi. Pengembang aplikasi dapat memberikan informasi terkini secara langsung saat itu juga kepada user. Sebagai contoh sebuah aplikasi website yang dapat meng-update informasi tanpa user memperbaharui halaman website tersebut.

Python memiliki berbagai macam cara implementasi penyajian data secara real-time ini, salah satunya dengan menggunakan Pusher.

Pusher adalah sebuah layanan hosting yang dapat membantu menyajikan data secara real-time pada aplikasi. Pusher biasa digunakan pada aplikasi web dan mobile.

Pada tutorial kali ini, kita akan mencoba membuat aplikasi real-time dengan menggunakan Pusher.

Yang perlu dipersiapkan adalah framework python yaitu Flask yang akan digunakan sebagai server dan Pusher.

Tutorial

Jika ingin mencoba secara langsung, source code bisa didapatkan disini. Namun jika ingin mengikuti step by step secara lengkap bisa mengikuti tutorial di bawah ini.

Instalasi

Pertama-tama kita perlu install library python yang diperlukan. Disini kita hanya perlu menginstall dua library:

pip install Flask==1.1.1
pip install pusher==1.7.2

- Membuat Server

Setelah semua library yang kita perlukan sudah ter-install dengan benar, maka selanjutnya kita perlu membuat server. Kita akan membuat server dengan nama file `app.py`. Disini selain membuat route, kita juga akan menginisiasi library Pusher sebagai obyek.

from flask import Flask, render_template, request, jsonify
from pusher import Pusher
import random 
import string 

# buat flask app
app = Flask(__name__)

# konfigurasi pusher object
pusher = Pusher(
  app_id='APP_ID',
  key='APP_KEY',
  secret='APP_SECRET',
  cluster='APP_CLUSTER',
  ssl=True
)

# buat id dengan generate huruf dan angka
def get_id():
  data = ''.join([random.choice(string.ascii_letters + string.digits) for n in range(32)])
  return data

# menampilkan home
@app.route('/')
def index():
  return render_template('home.html')

# menampilkan semua post
@app.route('/posts')
def posts():
  return render_template('posts.html')

# membuat post
@app.route('/post', methods=['POST'])
def addPost():
  data = {
    'id': "{}".format(get_id()),
    'title': request.form.get('title'),
    'content': request.form.get('content'),
    'event_name': 'created'
  }
  pusher.trigger("blog", "post-added", data)
  return jsonify(data)

# run Flask dalam mode debug
app.run(debug=True)

Pastikan bahwa konfigurasi Pusher sudah dilakukan dengan benar. Kita perlu mendapatkan APP_ID, APP_KEY, APP_SECRET, APP_CLUSTER. Semuanya bisa didapatkan dengan mendaftarkan akun disini.

- Membuat Tampilan

Setelah server berhasil dibuat, langkah selanjutnya adalah membuat tampilan. Jika diperhatikan, file `app.py` melakukan render pada sebuah file HTML. Untuk itu, kita perlu membuat file tersebut dengan nama `home.html` dan `posts.html`. Kedua file tersebut kita masukkan ke dalam sebuah folder bernama`templates` .

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Home!</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">
  <style>
    #post-list .card {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <section class="section">
    <div class="container">
      <h1 class="title">
        Realtime Blog
      </h1>
      <p class="subtitle">
        Realtime blog built with <strong><a href="https://pusher.com" target="_blank">Pusher</a></strong>!
      </p>

      <div class="columns">
        <div class="column">
          <form id="post-form">
            <div class="field">
              <label class="label">Title</label>
              <div class="control">
                <input name="title" class="input" type="text" placeholder="Hello world">
              </div>
            </div>

            <div class="field">
              <label class="label">Content</label>
              <div class="control">
                <textarea class="textarea" name="content" rows="10" cols="10"></textarea>
              </div>
            </div>

            <div class="field">
              <button class="button is-primary">Submit</button>
            </div>

          </form>
        </div>


        <div class="column">
          <div id="post-list">
          </div>
        </div>

      </div>

    </div>
  </section>

  <script src="https://js.pusher.com/4.1/pusher.min.js"></script>

  <script>
    const pusher = new Pusher('APP_KEY', {
      cluster: 'APP_CLUSTER', 
      encrypted: true 
    });
    const channel = pusher.subscribe('blog');


    const form = document.querySelector('#post-form');
    form.onsubmit = (e) => {
      e.preventDefault();
      fetch("/post", {
        method: 'POST',
        body: new FormData(form)
      })
      .then(r => {
        form.reset();
      });
    }

  </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Realtime Post</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">
</head>
<body>
  <section class="section">
    <div class="container">
      <h1 class="title">Blog Realtime!</h1>
      <div id="events"></div>
    </div>
  </section>

  <script src="https://js.pusher.com/4.1/pusher.min.js"></script>

  <script>
    // connect to Pusher
    const pusher = new Pusher('APP_KEY', {
      cluster: 'APP_CLUSTER',
      encrypted: true 
    });
    const channel = pusher.subscribe('blog');

    // listen for relevant events
    channel.bind('post-added', eventHandler);

    // handler function to show feed of events
    function eventHandler (data) {
      const html = `
          <div class="box">
            <article class="media">
              <div class="media-content">
                <div class="content">
                  <p>
                    <strong>Post ${data.event_name}</strong>
                    <small>
                      <i class="fa fa-${ data.event_name == 'created' 
                        ? `plus` 
                        : data.event_name == 'deactivated' ? `ban` : `trash`
                      }"></i>
                    </small>
                    <br>
                    Post with ID [<strong>${data.id}</strong>] has been ${data.event_name}
                  </p>
                </div>
              </div>
            </article>
          </div>`;
      let list = document.querySelector("#events")
      list.innerHTML += html;
    }
  </script>
</body>
</html>

Pastikan ganti APP_KEY dan APP_CLUSTER dengan credential Pusher yang sudah kita dapatkan sebelumnya.

Setelah ketiga file diatas sudah dibuat, langsung saja kita running aplikasi di terminal.

python app.py

Aplikasi kita telah running

http://127.0.0.1:5000/

Maka tampilan aplikasi kita akan seperti berikut ini;

Jika kita submit postingan pada halaman tersebut, secara real-time postingan akan terposting pada halaman berikut ini;

Oke, demikian tutorial membuat aplikasi real-time dengan menggunakan Pusher. Semoga artikel ini bermanfaat. Selamat mencoba!!

reference :

https://pusher.com/tutorials/activity-feed-flask