Web App (frontend) dengan Python

Saya membantu penelitian dosen prodi lain dan karena programmernya menghilang, saya diminta untuk jadi programmer pengganti. Aplikasi yang dibuat adalah aplikasi web tetapi banyak menggunakan javascript untuk user interfacenya.

Posting ini untuk catatan pribadi  sebagai template pengembangan web app (karena saya gampang lupa). Setiap orang punya preferensi masing-masing dan perlu disesuaikan dengan kondisi yang ada. Saya pilih Python+Flask karena hanya saya programmernya dan bisa memilih tools dengan bebas 🙂  Sempat lihat-lihat framework  seperti react, vue, angular tapi saya sendiri tidak terlalu suka dengan bahasa Javascript. Saya tetap gunakan Javascript, tetapi hanya untuk user interface saja.  Ada juga framework seperti Django, tetapi menurut saya terlalu berlebihan untuk proyek kecil yang  dikerjakan satu orang.   Sebelumnya saya sudah membahas tentang Flask, tapi dengan docker bisa dipermudah.

Saya menggunakan PyCharm Profesional karena Pycharm Community tidak dapat mengedit css dan javascript (dianggap sebagai teks biasa). Untungnya ada versi pro gratis untuk dosen yang punya email .edu.

Pertama yang perlu dilakukan adalah install Flask.  Siapkan struktur direktori: /app, /app/static/img, app/static/node_modules, /app/templates. Buat program utama di: /app/main.py

Template dasarnya seperti ini:

import requests
from flask import Flask, session
from flask import render_template
from flask import request

app = Flask(__name__)
app.secret_key = "x"

@app.route("/", methods=['GET', 'POST'])
def beranda():
    return render_template('index.html')

if __name__ == "__main__":
    # Only for debugging while developing
    # operasional
    app.run(host='0.0.0.0', debug=False, port=80)

    # debug
    #app.run(host='0.0.0.0', debug=True, port=8080)

Untuk mengelola lib javascript, gunakan NPM.  Masuk ke directory app/static, gunakan npm init  lalu npm install lib yang diperlukan. Tadinya saya kira NPM itu seperti pip-nya Python, defaultnya global, ternyata lokal.

Di html, untuk memanggil javascript gunakan url_for seperti ini (ganti img dengan script, karena WordPress ternyata memblok tag script):

//ganti dengan img dengan script karena wordpress tdk mengijinkan
<img src="{{ url_for('static', filename='node_modules/file-js-nya')}}" /> 

Demikian juga dengan image dan css :

<img src="{{ url_for('static', filename='img/gambar.png')}}" />

Untuk deploy, buat Dockerfile yang sejajar dengan /app (bukan di dalam).

FROM tiangolo/uwsgi-nginx-flask:python3.6
RUN pip install requests
COPY ./app /app
EXPOSE 80

Coba dulu di lokal (jangan lupa titik saat docker build):

docker build -t nama-app .
docker run -p 80:80 nama-app

Untuk stop bisa dengan ctrl-c, atau:

docker ps
docker stop container [id-container]

Untuk deploy, push ke gitlab (di Pycharm gunakan plugin gitlab project, posting saya tentang ini).

Di server, jika pertama kali, gunakan git clone  (siapkan sebelumnya ssh key untuk gitlab). Selanjutnya untuk update gunakan git pull. Lakukan docker build dan docker run.

Untuk koneksi ke database, saya belum memutuskan apakah digabung saja dengan frontend ini, atau dipisahkan jadi web service. Tapi mungkin akan saya pisahkan untuk jaga-jaga jika mau dibuat versi mobile app-nya, sekalian lebih mendalami model web API.

 

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google

You are commenting using your Google account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s