Iterasi Cepat dengan Django dan Heroku

Indonesian (Bahasa Indonesia) translation by Aditia Dwiperdana (you can also view the original English article)

Meluncurkan bisnis online bisa sangat rumit. Walau di atas kertas, lebih mudah membuat bisnis online dibanding bisnis fisik, seorang entrepreneur bisa terjebak dalam pilihan yang sangat banyak. Beberapa kesalahan umum yang membuat seorang pebisnis online terjebak diantaranya:

Membuat terlalu banyak terlalu dini: Menghabiskan waktu dan membakar uang untuk membangun produk yang rumit. Menjadi tidak termotivasi sepanjang perjalanan, kehilangan kepercayaan pada produknya, dan meninggalkan proyek tersebut.
Terlalu percaya pada suatu ide: Terjebak pada ide awal dan tidak mengembangkannya, walau pelanggan tidak muncul, tidak bayar, atau tidak puas.
Gagal untuk memulai: Saat seseorang memulai membangun proyek web, dia bisa kesulitan dengan banyaknya keputusan dan pilihan yang harus diambil. Hosting apa yang perlu digunakan? Platform apa? Tema Wordpress yang mana? Bagaimana cara membuat landing page yang baik? Bahasa pemrograman dan database apa? Apakah kamu perlu menggunakan framework web? Gunakan JavaScript polos atau jQuery untuk front end? Mungkin framework front-end yang lebih kompleks karena proyek ini akan membutuhkannya saat sudah cukup berkembang?
Gagal untuk diluncurkan: Saat membuat proyek web, walau kamu sudah menentukan pilihan teknologi, kamu bisa disulitkan dengan banyaknya feedback yang kamu terima. Tapi, mendengarkan terlalu banyak feedback juga dianggap sebuah kesalahan. Bisa jadi masukan tesebut dari orang-orang yang tidak akan menggunakan produkmu. Orang-orang cenderung memilki opini tentang semua hal, walau mereka tidak terlalu memiliki pengetahuan di bidang tersebut.

Karena banyak hal yang bisa membuat seseorang gagal dalam perjalanan membangun bisnis online, penting untuk:

Bangun produk sekecil mungkin dan secepat mungkin, perlihatkank ke orang-orang yang kamu rasa merupakan pengguna potensial: Meminimalkan biaya dan usaha.
Rilis produk tersebut online secepat mungkin: Dapatkan masukan dari orang-orang tentang produkmu, bukan tentang ide yang masih abstrak.
Buat perubahan dengan cepat: Saat mempelajari apa yang diinginkan pelanggan, penting untuk cekatan dan tetap melayani pelanggan awal.

Ini adalah peran dari membuat prototype. Seorang entrepreneur harus bersikap hemat, tidak membuang waktu atau sumber daya lain. Membangun sesedikit mungkin di awal akan memberi keuntungan.

Ada banyak definisi prototype dan bagaimana membuatnya. Sebagian menyebutkan bahwa seharusnya prototype hanya berupa landing page, orang lain menyebutkan bahwa seharusnya prototype berupa versi sederhana dari produk akhirnya. Saya lebih menyukai definisi kedua. Hanya menggunakan landing page seperti menipu.Kamu pun tidak bisa mendapatkan masukan bagaimana kamu memecahkan masalahnya, hanya masukan tentang apakah masalahnya layak dipecahkan.

Berikut adalah beberapa alat untuk prototyping sebagai entrepreneur online:

Framework Front-End: Bootstrap, Foundation, jQuery, Vue, dan lain-lain. Menggunakan framework front-end akan membuat aplikasimu berjalan di berbagai ukuran layar dan browser yang berbeda, dengan tampilan yang baik.
Framework Back-End: Django, Ruby on Rails, Laravel. Menggunakan framework back-end akan membantu kamu menangani HTML, form HTTP, akses database, skema URL, dan lain-lain dengan mudah,
Platform-as-a-Service: Heroku, Google App Engine, AWS Elastic Beanstalk. Menggunakan PaaS bisa membebaskanmu dari kesulitan menangani server, agregasi log, monitoring uptime, peluncuran infrastruktur, dan lain-lain.

Pada tutorial in kita akan membangun aplikasi yang mencerminkan semangat prototyping. Kita akan menggunakan Django, Bootstrap CSS, dan Heroku. Fokusnya di bagian back-end, bukan front end.

Kita akan mengambil keuntungan dari platform Heroku untuk menyimpan sesuatu secara online dengan cepat dan merilis fitur baru dengan cepat pula. Kita menggunakan Django untuk membuat model database dan fungsionalitas yang rumit. Bootsrap CSS akan memberi kita tampilan dasar yang baik. Sekarang mari kita mulai.

Apa yang akan kita buat

Pastikan kamu saat ini duduk, karena ide ini akan membuatmu melompat. Ini idenya: Apakah kamu tidak kesal ketima mendapat banyak kode diskon tapi kamu lupa menggunakannya dan akhirnya kadaluarsa?

Akan lebih baik untuk menyimpan kode tersebut di suatu tempat yang mudah dicari dan kita akan diberi tahu saat ada kode yang akan kadaluarsa? Ide yang bagus kan? Tenang, kamu tidak perlu membayarnya, kamu akan membuatnya.

Memulai

Pada tutorial ini saya akan menggunakan Python 3. Jika kamu menggunakan Python 2.7, perubahannya cukup mudah. Saya akank mengasumsikan kamu sudah familiar dengan setuptools, virtualenvs pada Python, dan Git. Satu hal lagi sebelum kita mulai: pastikan kamu memiliki akun Github dan Heroku. Untuk menggunakan Heroku, kamu juga perlu menginstall Heroku CLI.

Kita mulai dengan membuat sebuah virtualenv:

$ mkvirtualenv coupy

Seperti yang sudah kamu tebak, aplikasi kita bernama Coupy. Kita pindah ke virtualenv tersebut, $ workon coupy, dan install Django:

$ pip install Django

Masuk ke akun GitHub dan buat sebuah project baru. Sekarang kita clone project tersebut.

$ git clone https://github.com/<GITHUB_USERNAME>/<GITHUB_PROJECT_NAME>.git
$ cd <GITHUB_PROJECT_NAME>

Langkah berikutnya adalah membuat proyek Django. Untuk mendeploy proyek Django ke Heroku, kita perlu mengikuti beberapa panduan. Untungnya kita bisa menggunakan template proyek. Berikut adalah cara untuk melakukannya:

$ django-admin.py startproject --template=https://github.com/heroku/heroku-django-template/archive/master.zip --name=Procfile coupy

Kamu mungkin perlu memindahkan beberapa folder. Pastikan folder dasar repositorymu seperti berikut ini:

.
├── Procfile
├── README.md
├── coupy
│   ├── __init__.py
│   ├── settings.py
│   ├── static
│   │   └── humans.txt
│   ├── urls.py
│   └── wsgi.py
├── manage.py
├── requirements.txt
└── runtime.txt

Mari install persyaratan dari template tesebut:

$ pip install -r requirements.txt

Kita sekarang ingin push file-file baru ke GitHub:

$ git add .
$ git commit -m"Init Django project"
$ git push origin master

Kita lihat apa yang sudah kita lakukan sejauh ini:

$ python manage.py runserver

Sekarang buka browser dan buka http://localhost:8000. Jika tidak ada masalah, kamu akan lihat halaman awal Django. Untuk memastikan semuanya berjalan dari sudut pandang Heroku, kita juga bisa menjalankan aplikasi seperti ini:

$ heroku local web

Untuk membuktikan seberapa cepat kita bisa online, kita buat deploy ke Heroku:

$ heroku login
$ heroku create

Kita sudah membuat aplikasi Heroku, tapi kita belum mengirim kode apapun ke Heroku. Perhatikan bahwa Heroku membuat app id yang mudah dibaca. Berikut adalah output yang seharusnya kamu dapat:

Creating app... done, ⬢ <HEROKU_APP_ID>
https://<HEROKU_APP_ID>.herokuapp.com/ | https://git.heroku.com/<HEROKU_APP_ID>.git

Sekarang kita perlu menghubungkan repo kita dengan aplikasi Heroku yang baru dibuat:

$ heroku git:remote -a <HEROKU_APP_ID>
$ git push heroku master
$ heroku open

Keren, kamu baru saja mendeploy aplikasi ke Heroku. Tidak banyak, tapi kamu menyimpan sesuatu online dengan sangat cepat. Kerja bagus.

Menyiapkan Database

Kamu mungkin tidak akan membuat aplikasi web tanpa database. Database adalah penyimpanan informasi dari suatu aplikasi web. Di sini lah aplikasi web menyimpan sebagian besar statusnya. Di sini kita menyimpan detail akun dan login user, dan lain-lain. Heroku menyediakan servis PostgreSQL managed.

Itulah yang akan kita gunakan. Pastikan kamu sudah menginstall Postgres di mesinmu dan buat instans database untuk digunakan pada aplikasi kita. Heroku memerlukan sebuah environment variable agar bisa terhubung dengan servis database. Variabel yang kita butuhkan adalah DATABASE_URL:

$ export DATABASE_URL="postgres://<USERNAME>:<PASSWORD>@localhost:5432/<DATABASE_NAME>"

Sekarang kita beri tahu Django untuk menerapkan migasi dan membuat tabel yang dibutuhkan:

$ ./manage.py migrate

Buat sebuah superuser dan login ke antarmuka admin di http://localhost:8000/admin:

$ ./manage.py createsuperuser
$ ./manage.py runserver

Kita bisa lihat tabel sudahu dibuat. Heroku sudah terhubung dengan sebuah instans database sejak awal. Kamu bisa memastikannya dengan memeriksa di Heroku HEROKU_APP_ID > Settings > Config Variables pada konsol online Heroku. Kamu bisa melihat DATABASE_URL sudah mengarah pada alamat database yang dibuat oleh Heroku.

Kita sekarang perlu menjalankan migrasi dan membuat perintah super user online. Kita lihat apakah semua berjalan sesuai yang kita inginkan:

$ heroku run python manage.py migrate
$ heroku run python manage.py createsuperuser

Jika semua berjalan lancar, jika kita mengunjungi https://<HEROKU_APP_ID>.herokuapp.com/admin/, kita bisa log in dengan akun yang kita buat.

Otentifikasi Pengguna

Pada bagian ini, kita akan membuat aplikasi Django dan menggunakan komponen bawaan Django untuk membuat otentifikasi pengguna pada aplikasi kita.

$ ./manage.py startapp main

Di dalam aplikasi baru ini, kita akan membuat file urls.py:

from django.conf.urls import url
from django.contrib.auth import views as auth_views
from django.views.generic.base import RedirectView


urlpatterns = [
    url('^$', RedirectView.as_view(url='login'), name='index'),
    url(r'^login$', auth_views.LoginView.as_view(), name='login'),
    url(r'^logout$', auth_views.LogoutView.as_view(), name='logout'),
]

Di sini kita menggunakan tiga view generik dari Django:

RedirectView: Karena URL dasar aplikasi tidak melakukan apapun, kita akan mengarahkannya ke halaman login.
LoginView: view bawaan Django yang membuat form login dan mengimplementasi fungsi otentifikasi pengguna.
LogoutView: view bawaan Django yang membuat pengguna log out dan mengarahkan ke halaman tertentu.

Tambahkan aplikasi main ke daftar INSTALLED_APPS:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    # Disable Django's own staticfiles handling in favour of WhiteNoise, for
    # greater consistency between gunicorn and `./manage.py runserver`. See:
    # http://whitenoise.evans.io/en/stable/django.html#using-whitenoise-in-development
    'whitenoise.runserver_nostatic',
    'django.contrib.staticfiles',

    'main',
]

Hubungkank main.urls ke skema URL dasar:

from django.conf.urls import url, include
from django.contrib import admin

urlpatterns = [
    url(r'^', include('main.urls')),
    url(r'^admin/', admin.site.urls),
]

Untuk menampilkan from dengan benar, dengan style, class, dan lain-lain, kita perlu install django-widget-tweaks:

$ pip install django-widget-tweaks
$ pip freeze > requirements.txt

Tambahkan django-widget-tweaks pada INSTALLED_APPS:

INSTALLED_APPS = [
    # ...
    'main',
    'widget_tweaks',
]

Sekarang kita tambahkakn dua pengaturan ini pada settings.py:

LOGIN_REDIRECT_URL: memberitahu Django ke mana mengarahkan pengguna yang berhasil melakukan otentifikasi.
LOGOUT_REDIRECT_URL: memberitahu Django ke mana mengarahkan pengguna setelah dia log out.

# settings.py

LOGIN_REDIRECT_URL = 'dashboard'
LOGOUT_REDIRECT_URL = 'login'

Kita buat template dasar sederhana base.html dan mengembangkan sebuah dashboard.html dari situ. Kita kembali ke dashboard di bagian berikutnya.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    <div class="container">
    {% block content %}{% endblock %}
    </div><!-- /container-->
</body>
</html>

{% extends 'base.html' %}

{% block title %}Dashboard{% endblock %}

{% block content %}
<h1>Dashboard</h1>
{% endblock %}

Buat tampilan yang merender dashboard.html template:

from django.shortcuts import render
from django.core.urlresolvers import reverse_lazy


@login_required(login_url=reverse_lazy('login'))
def dashboard(request):
    return render(request, 'dashboard.html')

Sekarang kita sudah siap. Buka http://localhost:8000/login/ dan periksa apakah otentifikasi berjalan dengan benar. Lalu simpan pekerjaanmu:

$ git add .
$ git commit -m"Login/Logout/Dashboard views"

Buat model kupon

Sekarang kita masuk ke bagian paling penting dari aplikasi kita, merancang model Kupon. Kita akan menginstall django-model-utils untuk menambahkan properti tambahan pada model kita.

$ pip install django-model-utils
$ pip freeze > requirements.txt

Tulis model Coupon:

from model_utils.models import TimeStampedModel, TimeFramedModel
from django.db import models
from django.contrib.auth.models import User


class Coupon(TimeStampedModel, TimeFramedModel):
    owner = models.ForeignKey(User)
    discount_code = models.CharField("Discount Code", max_length=100)
    website = models.URLField("Website")
    description = models.TextField("Coupon Description")

Model django-model-utils yang kita kembangkan membuat kita bisa:

TimeStampModel membantu kita mencatat kapan model disimpan apda database, dengan field created.
TImeFramedModel menambahkan field start dan end pada model kita. Kita akan menggunakan field tersebut untuk mencatat masa berlaku kupon.

Sambungkan model ke admin:

from django.contrib import admin
from .models import Coupon


@admin.register(Coupon)
class CouponAdmin(admin.ModelAdmin):
    pass

Buat dan terapkan migrasi:

$ ./manage.py makemigrations
$ ./manage.py migrate

Simpan pekerjaan kita:

$ git add .
$ git commit -m"Create Coupon model"

ModelForm untuk Pembuatan Kupon

Salah satu fitur keren Django adalah kemampuan untuk membuat form dari kelas model. Kita akan membuat form seperti itu untuk pengguna membuat kupon. Kita buat sebuah forms.py di dalam aplikasi main:

from django.forms import ModelForm
from .models import Coupon


class CouponForm(ModelForm):
    class Meta:
        model = Coupon
        exclude = ('owner', ) # We're setting this field ourselves

Kita tambahkan form ini pada dashboard. Kita perlu mengubah view dan template:

# views.py

from django.shortcuts import render, redirect
from django.core.urlresolvers import reverse_lazy
from .forms import CouponForm


@login_required(login_url=reverse_lazy('login'))
def dashboard(request):
    if request.method == 'POST':
        form = CouponForm(request.POST)
        if form.is_valid():
            coupon = form.save(commit=False)
            coupon.owner = request.user
            coupon.save()
            return redirect('dashboard')
    else:
        form = CouponForm()

    return render(request, 'dashboard.html', context={'create_form': form})

{% extends 'base.html' %}

{% load widget_tweaks %}

{% block title %}Dashboard{% endblock %}

{% block content %}
<h1>Dashboard</h1>

<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="discount_code">Discount Code</label>
        {% render_field create_form.discount_code class="form-control" placeholder="Discount Code" %}
    </div>

    <div class="form-group">
        <label for="website">Website</label>
        {% render_field create_form.website class="form-control" placeholder="Website" %}
    </div>

    <div class="form-group">
        <label for="description">Description</label>
        {% render_field create_form.description class="form-control" placeholder="Description" %}
    </div>

    <div class="form-group">
        <label for="start">Available From</label>
        {% render_field create_form.start class="form-control" placeholder="Available From (MM/DD/YYYY)" %}
    </div>

    <div class="form-group">
        <label for="end">Expires on</label>
        {% render_field create_form.end class="form-control" placeholder="Expires On (MM/DD/YYYY)" %}
    </div>

    <button type="submit" class="btn btn-primary">Save</button>
</form>


{% endblock %}

Kita sekarang punya cara untuk membuat kupon dari dashboard. Cobalah fitur tersebut. Kita belum punya cara melihat kupon di dashboard, tapi kita bisa melakukannya di admin panel. Kita simpan pekerjaan kita:

$ git add .
$ git commit -m"Coupon creation form in dashboard"

Kupon yang akan Kadaluarsa

Satu hal yang ingin kita tampilkan di dashboard: kupon yang akan segera kadaluarsa, misalnya yang akan kadaluarsa minggu ini.

Tambahkan django.contrib.humanize pada INSTALLED_APPS untuk menampilkan tanggal pada template yang mudah dipahami manusia.

Kita kembangkan view agar view segera mengambil kupon yang akan kadaluarsa dan melemparnya pada konteks template:

from datetime import timedelta

from django.contrib.auth.decorators import login_required
from django.shortcuts import render, redirect
from django.core.urlresolvers import reverse_lazy
from django.utils import timezone

from .forms import CouponForm
from .models import Coupon


@login_required(login_url=reverse_lazy('login'))
def dashboard(request):
    expiring_coupons = Coupon.objects.filter(
        end__gte=timezone.now(),
        end__lte=timezone.now() + timedelta(days=7))

    if request.method == 'POST':
        form = CouponForm(request.POST)
        if form.is_valid():
            coupon = form.save(commit=False)
            coupon.owner = request.user
            coupon.save()
            return redirect('dashboard')
    else:
        form = CouponForm()

    return render(request, 'dashboard.html', context={
        'create_form': form,
        'expiring_coupons': expiring_coupons})

Kita update template agar menampilkan kupon yang akan kadaluarsa secara tabular. Kita juga akan menyimpan form pembuatan kupon dan tabel pada dua kolom terpisah menggunkan sistem grid dari Bootstrap:

{% extends 'base.html' %}

{% load widget_tweaks %}
{% load humanize %}

{% block title %}Dashboard{% endblock %}

{% block content %}
<h1>Dashboard</h1>
<div class="row">
    <div class="col-md-6">
        [The form code]
    </div>
    <div class="col-md-6">
        {% if expiring_coupons %}
            <table class="table">
                <thead>
                    <tr>
                        <th>Discount Code</th>
                        <th>Website</th>
                        <th>Expire Date</th>
                    </tr>
                </thead>
            {% for coupon in expiring_coupons %}
                <tr>
                    <td>{{coupon.discount_code}}</td>
                    <td>{{coupon.website}}</td>
                    <td>{{coupon.end|naturalday }}</td>
                </tr>
            {% endfor %}
            </table>
        {% else %}
            <div class="alert alert-success" role="alert">No coupons expiring soon</div>
        {% endif %}

        {% endblock %}
    </div>
</div>

Sejauh ini terlihat bagus. Simpan pekerjaan kita:

$ git add .
$ git commit -m"Implementing the expiring coupon list"

Tampilan Katalog

Sekarang kita belajar fitur Django lain untuk membuat view yang menampilkan daftar kupon yang tersedia, yang berupa generic view. Berikut adalah cara membuat sebuah ListView:

# views.py

# ...
from django.views.generic.list import ListView
from django.db.models import Q


class CouponListView(ListView):
    model = Coupon

    def get_queryset(self):
        return Coupon.objects.filter(Q(end__gte=timezone.now()) | Q(end__isnull=True)).order_by('-end')

Sekarang atur view tersebut pada skema URL:

# main/urls.py

from django.conf.urls import url
from django.contrib.auth import views as auth_views
from django.views.generic.base import RedirectView
from .views import dashboard, CouponListView


urlpatterns = [
    url('^$', RedirectView.as_view(url='login'), name='index'),
    url(r'^login/$', auth_views.LoginView.as_view(), name='login'),
    url(r'^logout/$', auth_views.LogoutView.as_view(), name='logout'),
    url(r'^dashboard/$', dashboard, name='dashboard'),
    url(r'^catalogue/$', CouponListView.as_view(template_name='catalogue.html'), name='catalogue'),

]

Buat template catalogue.html:

{% extends 'base.html' %}

{% load humanize %}

{% block title %}Catalogue{% endblock %}

{% block content %}
<h1>Catalogue</h1>
<div class="row">

    <div class="col-md-12">
        {% if object_list %}
            <table class="table">
                <thead>
                    <tr>
                        <th>Discount Code</th>
                        <th>Website</th>
                        <th>Expire Date</th>
                    </tr>
                </thead>
            {% for coupon in object_list %}
                <tr>
                    <td>{{coupon.discount_code}}</td>
                    <td>{{coupon.website}}</td>
                    <td>{{coupon.end|naturalday }}</td>
                </tr>
            {% endfor %}
            </table>
        {% else %}
            <div class="alert alert-success" role="alert">
                No coupons yet. Create your first one <a href="{% url 'dashboard' %}">here</a>.
            </div>
        {% endif %}

        {% endblock %}
    </div>
</div>

Karena kita sudah menghubungkan semuanya, buka http://localhost:8000/catalogue/ untuk melihat katalog kupon.

Simpan pekerjaan kita:

$ git add .
$ git commit -m"Creating the catalogue view"

Ini sudah cukup menjadi sebuah MVP. Saya sarankan kamu mengembangkannya dengan menambahkan navbar, tombol login/logout/register, dan lain-lain. Yang paling penting adalah kamu mengerti proses membuat prototype dan merilis produk kamu agar digunakan oleh orang lain. Produk kita belum online. Kita tidak mengirim versi terbaru ke Heroku. Kita lakukan itu lalu menelepon investor.

Kesimpulan

Kita membuat aplikasi sederhana tapi praktis. Kita membuat fitur dengan cepat dan kita merilis aplikasi tersebut online agar pelanggan potensial bisa menggunakannya dan memberi masukkan untuk kita. Lebih baik memperlihatkan sebuah produk pada orang lain dibanding hanya membicarakan sebuah ide.

Berikut adalah beberapa kesimpulan yang bisa kita ambil:

Memilih alat yang tepat bisa mempercepat proses development.
Alat yang digunakan untuk prototyping belum tentu pilihan terbaik untuk proyek yang sudah berkembang. Tapi, lebih baik menggunakan alat yang gesit di awal dan mengiterasi produk daripada terjebak di pengembangan produk yang terlalu detail di awal.
Memanfaatkan keuntungan dari PaaS berarti aplikasi kita harus mengikuti beberapa design pattern. Biasanya pola tersebut masuk akal dan mendorong kita untuk menulis kode yang lebih baik.
Django memiliki banyak fitur untuk mempermudah pekerjaan kita:
- Django ORM membantu kita mengakses database. Tidak perlu khawatir untuk menulis SQL yang benar dan menghindari kesalahan sintaks.
- Migrasi membantu kita menjaga versi dan mengiterasi skema database. Tidak perlu menulis SQL untuk membuat tabel atau menambah kolom.
- Django memiliki arsitektur yang ramah untuk plugins. Kita bisa menginstall aplikasi yang bisa membantu kita mencapai tujuan yang diinginkan.
- View generik dan model form bisa memasukkan banyak perilaku umum: membuat daftar model, membuat model, otentifikasi, redirect, dan lain-lain.
Saat meluncurkan produk, penting untuk gesit dan ramping. Jangan menghabiskan waktu dan uang.