Postingan ini akan menjadi pembuka dari seri tutorial "Membuat Web Jual Beli Barang Bekas Online (BarBek) dengan Yii2 dan Riot.Js" yang akan dipublish setiap (insyaAlloh) minimal seminggu sekali di blog ini.
Baiklah, tanpa banyak basa basi lagi, saya akan coba jelaskan projek apa yang akan dibuat, tujuan membuat projek ini, arsitektur aplikasi yang digunakan, tools /software yang akan digunakan, dan untuk siapa tutorial ini ditujukan.
1. Mau buat apa sih ?
Ya itu tadi, dalam tutorial ini kita akan membuat sebuah aplikasi web yang memungkinkan pengguna untuk menjual barang bekas mereka.
2. Tujuan buat projek semacam ini?
Yang jelas, saya berharap dengan membuat projek ini dapat memberikan gambaran secara menyeluruh tentang bagaimana membuat sebuah aplikasi web kekinian menggunakan Yii2 sebagai Web Service/API dan juga menggunakan Riot.JS sebagai aplikasi disisi browser (frontend).
3. Arsitektur Aplikasi BarBek
Jadi, aplikasi yang akan dibuat kita sebut sebagai BarBek oke! Yang kurang setuju boleh deh kasih usulan nama lain di komentar. Lanjut ke topik yang dibahas, diatas saya menyebut "aplikasi web kekinian", emangnya kaya gimana sih yang kekinian tuh? Well, mungkin pengguna tak akan peduli seberapa kekinian kah arsitektur aplikasi yang kita kembangkan, namun untuk kita sebagai developer tentu hal ini sangat penting dan perlu dipertimbangkan secara matang. Berikut ini adalah ciri-ciri dari aplikasi web kekinian menurut hasil penelusuran saya dari berbagai sumber.
a. Stateless
Ciri pertama sebuah aplikasi web kekinian adalah stateless (istilah apa lagi ini?). Memang agak sedikit sulit mencari definisi dari stateless application ini di mbah Google (Coba aja sendiri). Namun secara sederhana sebuah aplikasi bisa dikatakan stateless jika aplikasi tersebut tidak lagi menyimpan informasi untuk mengenali pengguna dengan menyimpannya didalam session (disisi server) atau cookies (disisi browser). Lihat contoh code PHP dibawah ini, mungkin saja menjelaskan dengan code akan lebih mudah difahami:
Diatas adalah contoh perbedaan program
stateless dan
stateful, bentuk nyata dari aplikasi
stateless ini adalah
Restful Web Service/API dimana session tidak lagi digunakan untuk mengautentikasi pengguna, dan sebagai penggantinya developer akan menggunakan autentikasi berbasis token yang dikirim setiap kali melakukan request baik itu melalui
query parameter ataupun
HTTP Header.
Konon katanya dengan menggunakan arsitektur seperti ini, akan mempermudah dan mempermurah proses
horizontal scaling dari apikasi yang kita kembangkan.
Dalam tutorial ini kita akan membuat API menggunakan sebuah
PHP framework bernama
Yii2 dan basisdata
MySql.
b. Single Page
Ciri kedua sebuah aplikasi web kekinian adalah mengusung arsitektur single page untuk bagian frontend-nya. Artinya, aplikasi tidak perlu memuat ulang seluruh halaman untuk mengakses atau berpindah dari halaman satu kehalaman yang lainnya. Menurut saya istilah single page ini sudah cukup popular dan bahkan dapat diterapkan di aplikasi
stateful sekalipun. Banyak framework yang dapat kita gunakan untuk mempermudah membuat single page application contohnya Angular, React, Ember, Backbone, Vue, Riot, dan banyak lagi sampai suka bingung mau pake framework yang mana ini teh. Dalam tutorial ini saya akan menggunakan
Riot.Js, alasanya karena saya sangat nyaman dengan fiturnya yang minimalis dan ukuran filenya yang sangat kecil dibanding dengan framework lain, namun lengkap dan sangat mumpuni untuk membangun single page, serta yang terpenting adalah mudah untuk dipelajari. Selain itu, biar semakin kekinian saya juga akan menggunakan
Redux dan
Webpack untuk mendukung
Riot.JS dalam membangun aplikasi frontend dari BarBek ini.
Untuk sementara dua dulu aja ciri-ciri aplikasi web kekiniannya, nanti kalau nemu lagi inspirasi saya tambahin lagi deh.
Jadi, jika saya buat diagram (ceritanya) inilah arsitektur aplikasi yang akan digunakan untuk aplikasi BarBek.
Gambar 1. Arsitektur aplikasi Barbek
4. Tools/Software/Library/Framework yang akan digunakan
Tutorial ini akan kita bagi kedalam dua bagian besar yaitu, pertama membuat Restful Web Services dengan Yii2 dan MySQL dan kedua Membuat aplikasi single page menggunakan Riot.js dan Redux. Jadi, development tools atau software atau library yang digunakan pasti akan berbeda.
a. Umum (Dipake di bagian pertama dan kedua)
1. Laptop atau PC + Sistem Operasi (sebenarnya ini gak usah disebutin)
2. Code Editor (saya rekomendasikan Visual Studio Code)
3. Git dan GitHub
4. Terminal / CMD/ PowerShell
5. Akses Internet
b. Bagian Pertama (Membuat Restful Web Services/APIs)
1. PHP 5.4 ( atau yang lebih baru)
2. MySQL
3. Composer
4. Yii2
5. Libraries /Extentions pendukung lainnya jika dibutuhkan dari Packagist
6.
Postman (Chrome App)
c. Bagian Kedua (Membuat Single Page Applicaiton)
1. Node.JS
2. NPM
3. Express JS
4. Webpack
5. Riot JS
6. Redux
7. Bootstrap
8. Library pendukung lainnya yang tersedia di NPM
9. Web Browser
5. Untuk siapa tutorial ini ditujukan?
Untuk kamu yang lagi baca postingan ini dan yang mau belajar bersama-sama di blog ini. Secara spesifik untuk bagian pertama ditujukan untuk Backend Developer, bagian kedua untuk Frontend Developer, dan keduanya untuk kalian Full Stack Developer. Terutama yang berada di level pemula hingga menengah. Untuk para mastah yang tidak sengaja membaca postingan ini terimakasih telah bersedia membaca sampai baris sini mohon koreksinya jika ada yang belum/kurang tepat.
Sampai disini dulu postingan pembuka ini, ya begitulah, mudah-mudahan bisa di-istiqomah-kan untuk menulis dan berbagi dalam blog ini.
Untuk postingan selanjutnya, kita akan membahas tentang Fitur BarBek, Rancangan Database, Membuat Database Migration di Yii2, Membuat Model (insyaAlloh minggu depan).
Terimakasih..
Selanjutnya,
Implementasi Rancangan Database menggunakan fitur Database Migration di Yii2
Comments
Post a Comment