Author: Dhendik Dwi Prasetyo

Kapan waktu yang tepat Menggunakan Microservices?
Apa itu Microservices?
Microservices adalah arsitektur yang digunakan untuk mengembangkan system yang dibagi menjadi bagian-bagian kecil / modular dan memungkinkan teknologi yang digunakan berbeda sesuai kebutuhan dan kemudahan dalam satu system. Di dalam microservices memungkinkan setiap fitur dikembangkan dengan teknologi yang berbeda baik dari skema Database ataupun Bahasa Pemrograman. Microservices sering digunakan oleh pada system produk yang memiliki skala yang besar, kompleksitas dan transfer rate yg sangat besar.
Diketahui aplikasi yang menggunakan Microservices Gojek, Grab, Tokopedia, Shopee, Paypal , Twitter, Netflix dan lain lain.

Performa Apache Druid dibanding dengan ekosistem MYSQL
A. Pengenalan Apache Druid

Apache Druid adalah Open Source untuk mendistribusikan data penyimpanan. Core Desain Druid menggabungkan ide-ide dari Data Warehouse Timeseries Database, dan Search System untuk membuat analisa dengan performa terbaik untuk pencarian di database secara realtime khusus kasus tertentu. Apache Druid paling tepat digunakan untuk analisa Big Data.
1. Kapan harus menggunakan Apache Druid
Druid digunakan untuk mendistribusikan sesuai dengan sekenario berikut:
· Pada saat proses Menambah data atau INSERT sangat tinggi, dan UPDATE data rendah.
· Kebanyakan menggunakan query untuk reporting seperti Grouping, tapi juga bias untuk query pencarian.
· Lama ekseskusi query antara 0.1 detik sampai beberapa detik.
· Data memiliki komponen waktu.
· Saat banyak sekali Table, tapi query hanya mengambil dari Table yang memiliki data yng Besar.
· Banyak kolom Cardinal (numeric) yang membutuhkaan perhitungan cepat dan melakukan pemeringkatan.
· Data yang akan di proses dari atau dalam bentuk Apache Kafka, HDFS, flat files dan Object Storage seperti Amazon S3.
2. Kapan tidak harus menggunanakan Apache Druid
Druid tidak bisa digunakan untuk mendistribusikan sesuai dengan sekenario berikut:
· Butuh waktu cepat untuk update Data. Druid mendukung untuk Streaming INSERT tapi tidak mendukung Streaimng UPDATE (bisa melakukan update tapi harus menggunakan batchs job dan memakan resource tentunya).
· Menyediakan reporting historical data dalam bentuk data mentah, tanpa adanya grouping.
· Membuat reporting system secara offline menghiraukan kecepatan proses data.
· Query yang memiliki join antara Big Table, yang mana kamu nyaman dengan query yang memakan waktu yang lama.
3. Integration

Druid bisaa digunakan beberapa opensource untuk terintegrasi diantaranya Apache Kafka, HDFS, System processor, dan kemudian out put dari integrasi Apache Druid diantaranya SQL Queries, Custom Aplications dan Monitoring & BI Tools.
4. Ingestion

Druid mengolah data dalam bentuk Row Data hasil dari Event Streaming dan Barch File yang kemudian diolah sesuai dengan Spec dan akan menghasil kan druid segment yang bisa dugunakan. Bisa dilihat di dokumentasi: Link
5. Storage

Seperti Data Store lainnya, Druid memiliki Colomn, data type (String, Num dll) dan tentunya druid menyediakan data partition berdasarkan waktu ingestion dari segment. Optimized Filter atau Query bisa di lakukan pada saat Proses Ingestion / Input Row Data.
bisa dilihat dokumentasi: Link
6. Querying

Querying dalam Druid bisa menggunakan JSON dan SQL, untuk SQL sepenuhnya querying akan sama dengan SQL seperti JOIN, GROUPING dll dalam bentuk aggregation. Silakan lihat dokumentasi: Link
7. Architecture

Druid memiliki Architecture seperti Figure 6, berikut runtutan penjelasannya:
· Raw Data (Stream Data/Batch Data) : Dalam bentuk Event Streaming atau dalam bentuk file (JSON, csv, txt dll).
· Data Node: Dalam data node terjadi Ingestion dengan indexer dan olah data untuk menjadi history Segment.
· Deep Storage: Dalam Deep Storage adalah data yang sudah di Ingestion akan tersimpan dalam Storage Druid dan data siap digunakan .
· Query Node: dalam query node ini adalah proses untuk mengambil data dan proses akhir analisa yang dibutuhkan.
B. Penggunaan Apache Druid
Dalam penggunaan Apache Druid yang saya praktik kan hanya menggunakan Load data Batch File dalam bentuk CSV. Druid bisa realtime hanya bisa menggunakan Event Streamer yaitu Apache Kafka,Kinesis, HDFS, Amazon S3. Dalam riset ini saya menggunakan Raw Data Batch File
Kenapa tidak Riset menggunakan Apache Kafka:
· Setelah berdiskusi apabila harus install apache Kafka harus menambah RAM kurang lebih 8 GB.
· Harus riset tapa itu Apache Kafka.
· Apabila kebutuhan untuk optimization Time Load bisa menggunaakan Chace seperti Redis.
Methode Raw Data Batch File tidak akan bisa mendapatkan Data Realtime dan data terupdate, dikarenakan saya upload melalui overlord secara manual walaupun bisa kita buat sebuahh strategi update batch file disimpan dalam storage kemudian kita buat Task Spec Granularity update setiap beberapa menit akan mengabil data secara terus menerus.
Akhirnya kami memutuskan untuk Riset menggunakan Batch File Load data dari storage. Dikarenakan Percobaan Batch File 4 Juta data gagal maka saya punya ide untuk partial dibagi per 200 Ribu. Dalam percobaan Load data dengan 4 Juta data saya mengalami permasalahan yaitu Pada saat Ingestion dimana Status akan selalu ‘WAITING’ dan apabila saya kill Task Ingestion maka akan hilang namun pada saat Load data lagi maka akan GAGAL seperti Figure 7. Akhirnya Harus install Ulang Apache Druid dan saya mencoba method maksimal Load data 200 Ribu dan setting Append sehingga data bisa menambah.

1. Load Data
Proses Load data ini bertujuan untuk menentukan proses Raw data yang akan diinputkan menggunakan method apa dan pengatusan Spec. Berikut Proses Load Data.
· Pilih Menu Load Data yang berada paling kiri Atas, dapat dilihat di Figure 8.

· Start: Pilih Menu Local Disk kemudian pilih Connect.

· Connect: Masukan informasi Source Type, Base Directory dan nama file csv. Kemudian klik Applyy dan kemudian file akan terload di Raw Data.

· Parse Data: Parsing data sebelum diolah di Parse Time, Parsing jenis data Raw Data yaitu Input Format (jenis format yang diinputkan),Find Colomn Fron Header (semacam filter dalam field apabila false akan ada permintaan nama colomn yang dihindari untuk di cari).

· Parse Time: Druid akan selalu berbasi skan waktu untuk mengolah data, sehingga dafult aka nada file bernama ( _time ) yang mengambil dari salah satu filed asli disini mengambil dari created_at . Dalam Parse Time kita bisa mengatur Timestamp bisa From Colomn ( dari colomn) atau bisa diisi sendiri (Constant Value).

· Transform: Dalam Transform Colomn lebih semacar Grouping dll dan bisa juga untuk alter field/Colomn.

· Filter: Dalam Filter bisa memilih Add Colomn Filter dan Add global Filter seperti di Figure 14. Dalam Add Colomn Filter (Figure 15) ada Type filter, Dimension dan Value ini sama dengan di SQL type seperti SELECT Dimension seperti nama field dan value. Untuk Add Global Filter (Figure 16) bisa set Intervals dan Filter dalam Bentuk HJSON.



· Configure Schema: dalam Configure Schema ini ada untuk membuat liast Aggregation sesuai dengan type data.Terdapat Add Dimension bisa untuk menambah Field dan Add Metric untuk menambah Schema perhitungan di Filed Baru. Dan Set Granularity yaitu Setting Query akan diupdate setiap Waktu tertentu atau juga bisa tidak diatur.

· Partition: Dalam Partition ada beberapa Fitur namun fitur utama nya adalah Partition By Time dan Secondary Partition, kebetulan disini saya setting Type Uniform dan segment granularity By HOUR selebihnya default dari Druid Learn More.

· Tune: Disini untuk mengatur properties dari Ingestion data untuk men setting kecepatan memory task dll. Learn More

· Publish: dalam publish terdapat configurasi Datasource Name atau istilahnya dalah SQL Table Name, dn kemudian bisa di Append data apabila terjadi Task berulang maka data akan menambah dan tidak di rebase. Parse Error untuk menyimpan setiap Log Error pada saat menjalankan Task.

· Edit Spec: Spec adalah ringkasa dari semua Configurasi muli dari Start sampai Publish yng di simpan dalam bentuk JSON. Apabilasudah mkaa siap Untuk Di submit dan masuk ke Task Ingestion.

2. Ingestion
Menu Ingestion ada 2 Fitur yaitu Untuk Supervisor dan Tasks yang mana untuk memperlihatkan proses Ingestion yang terjadi di Overlord Learn More. Beberapa Status dalam Task Ingestion:
· RUNNING : menunjukan proses Task ingestion dalam proses (Figure 22)
· PENDING: Menunjukan harus menunggu Task yang running menjadi tidak success.
· FAILED: Apabila Task memiliki Spec yang tidak valid seperti Raw Data yg sebenaarnya tidak ada.
· WAITING: Waiting terjadi pada saat menunggu proses Deep Storage dari system belum selesai.
· SUCCESS: Sukses adalah proses yang menunjukan Task sudah selesai dan Data source, service, Segment dan Query sudah terbuat dan bisa digunakan.



3. Data Source
Dalam data source akan terlihat list nya dan mana yg aktif atau pun tidak dan beberapa field yang menunjukan informasi Datasource.

4. Segments
Dalam segment terdapat informasi hasil ingestion yang dibuat dalam bentuk segment.

5. Services
Service menunjukan informasi service PoRT yang berjalan dan Informasi Max Sice Usage daan Detail.

6. Query
Querying dalam Apache Druid bisa dibuat dalam bentuk Model MYSQL juga bisa dalam Bentuk JSON. Ada beberapa property yang bisa dugunakan didalam druid bisa dipelajari disini Learn More

C. Queries Library
Depedensi Library yang bisa digunakan untuk Fetch atu olah Query Apache Druid terdaapat hampir disemua Platform dan Bahasa Pemrograman silahkan kunjungi Learn More.

A. Benchmark Performance
Dalam Benchmark ini saya membandingkan Performa dengan Druid dengan MYSQL dan Query Service HTTP (API Druid) Dengan MYSQL. Dengan menggunakan schema Querying di Druid dan di MYSQL. Sebelumnya ada beberapa langkah dalam ingestion yang saya buat default saya sesuaikan agar bisa Load Data sebanyak 4 Juta data. Berikut List Datasource yang bisa kita gunakan Figure 30.

Mengesampingkan spesifikasi Server disini saya akan mencoba membandikan Druid Query dengan MYSQL Query dan Service HTTP (API Druid) dengan MYSQL Query untuk mendapatkan performa secara latency time. Disini kita menggunakan Query yang sama dengan jumlah data yang sama sebagai Acuan.
Proses Cara Perbandingan:
· Druid Query

Dalam Console Druid saya akan membuat Query dan kemudian saya menghilangkan Smart Query Limit untuk menghilangkan fitur limit sehingga akan diload semua sesuai dengan Query yang sama.
· MYSQL Query
Dalam MYSQL Query saya menggunakan HEIDISQL.
· Service Druid (API Druid).

Dalam Service ini saya menggunakan POSTMAN sebagai Tools untuk Client Service HTTP.
Saya harus setting sebagai berikut
i. Authorization: menggunakan Basic Auth
ii. Header : KEY: Content-Type Value : application/json
iii. End Point: https://linkendpoint/druid/v2/sql
iv. Request rody: raw JSON
Berikut hasil dari perbandingan performa :
· Druid Query VS MYSQL Query
· Service HTTP (API Druid) dengan MYSQL Query
Dari perbandingan Druid dengan MYSQL berdasarkan lama latency load data terdapat beberapa hasil sebagai berikut:
1. Untuk Pencarian dengan sepesifik field dan filter Druid bisa lebih cepat 2 kali lipat bahkan lebih Query Biasa melalui MYSQL.
2. Untuk Pencarian Flat Table Serrch All Content pakai OR Query maka MYSQL Query bisa lebih cepat hampir 2 kali lipat.
3. Untuk mengambil data Flat table dan multi join sebanyak 4 Juta Data terjadi Error.
4. Untuk Service HTTP API Druid akan mengalami Error response size apabila memasuki data berjuta, selama masih belum masuk berjuta masih Aman.
E. Kesimpulan
Apache Druid adalah Open Source untuk mendistribusikan data penyimpanan. Core Desain Druid menggabungkan ide-ide dari Data Warehouse Timeseries Database, dan Search System untuk membuat analisa dengan performa terbaik untuk pencarian di database secara realtime khusus kasus tertentu. Apache Druid paling tepat digunakan untuk analisa Big Data.
Druid memiliki Architecture seperti Figure 6, berikut runtutan penjelasannya:
· Raw Data (Stream Data/Batch Data) : Dalam bentuk Event Streaming atau dalam bentuk file (JSON, csv, txt dll).
· Data Node: Dalam data node terjadi Ingestion dengan indexer dan olah data untuk menjadi history Segment.
· Deep Storage: Dalam Deep Storage adalah data yang sudah di Ingestion akan tersimpan dalam Storage Druid dan data siap digunakan .
· Query Node: dalam query node ini adalah proses untuk mengambil data dan proses akhir analisa yang dibutuhkan.
Dalam Riset ini saya menggunakan Raw Data Batch File sehingga proses input data masih manual karena beberapa alasan. Apabila ingin di otomatisasi bisa buat sebuah cronjob untuk create batch file yg akan diload oleh Druid secara berkala namun memerlukan waktu dan effort. Selain itu juga bisa menggunakan Event Streamer Seperti Apache Kafka dimana data akan selalu Realtime dengan granulity dibuat lebih pendek seperti per minute.
Druid memiliki kemampuan untuk filtering untuk setiap dimensi atau field pada saat ingestion sehingga apabila menggunakan event streamer walau pun dengan data 500GB tetap akan bisa diambil dengan cepat dengaan filtering berdasarkan interval segment yang dibuat.
Dari Hasil Benchmark menunjukan Druid memiliki kemampuan latency time dari segi Query filtering yang baik bahkan lebih baik 2 kali lipat Query MYSQL, namun saya menemukan bahwa Druid akan lama pada saat melakukan filter untuk semua field dengan filter ‘OR’ lebih lama dibandingkan MYSQL. Untuk Service HTTP API Druid hanya mengalami Response size Error namun untuk query dengan jumlah data dibawah 1 Juta masih bisa dieksekusi dengan cepat.

Teknik Materialized View dengan Database MySQL
Apa itu Materialized View?
Materialzied View adalah Hasil fisik / table dari sekumpulan table yang dilakukan Query JOIN, berbeda dengan View dimana Hasil dari Query JOIN. Materialized View memiliki keuntungan dari segi normalisasi Performa database yang cepat, secepat kita GET data Table, sedangkan View untuk mengambil 1 Data dari sekumpulan Query JOIN sangat banyak dan dengan data yang sangat Banyak dari Table akan memakan Waktu. Permasalahan Utama kita kenapa menggunakan Material View adalah GET data dengan JOIN table yang sangat banyak.
Materialized View akan berfungsi dan dibutuhkan pada saat system Anda berjalan dan sudah banyak data yg berjalan serta system membutuhkan data yang Real Time, Apabila optimasi ini belum diterapkan akan lebih bijaknya Anda pertimbangkan untuk menggunakannya.
Beberapa Database Lain sudah support untuk Materialized View diantaranya:
- Oracle (Resource)
- MongoDB (Resource)
- Cassandra (Resource)
- PostgreSql (Resource)
- SQL Server (Biasa disebut Indexed View) (Resource)
Di artikel Ini kita akan membahas Materialized View di MYSQL, benar MYSQL tidak ada dalam list Database yang support untuk Materialized View, namun disini saya akan mencoba memberikan beberapa Teknik yang lumayan mudah untuk diterapkan Apabila System Anda menggunakan Database MYSQL. Berikut Gambaran dasar Materialized View secara garis Besar:

Berdasarkan Gambaran Diatas bisa akita lihat Hasil query dari beberapa table akan menghasilkan single table. Bagaimana caranya?
Berikut kita masuk ke topik utama yaitu Teknik Materialized View di Database MYSQL.
Sebagai Contoh disini saya membuat database untuk penjualan Rumah Makanan yang sederhana:
1. Table user
CREATE TABLE `user` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`name` VARCHAR(50) NULL DEFAULT NULL COLLATE ‘utf8mb4_general_ci’,
`phone` VARCHAR(50) NULL DEFAULT NULL COLLATE ‘utf8mb4_general_ci’,
`role_id` INT(11) NULL DEFAULT NULL,
`status` TINYINT(4) NULL DEFAULT ‘1’,
`created_at` DATETIME NOT NULL DEFAULT current_timestamp(),
`updated_at` DATETIME NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),
PRIMARY KEY (`id`) USING BTREE,
INDEX `role_id` (`role_id`) USING BTREE
)
COLLATE=‘utf8mb4_general_ci’
ENGINE=InnoDB
AUTO_INCREMENT=2;
2. Table role
CREATE TABLE `role` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`name` VARCHAR(50) NULL DEFAULT NULL COLLATE ‘utf8mb4_general_ci’,
`created_at` DATETIME NOT NULL DEFAULT current_timestamp(),
`updated_at` DATETIME NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),
PRIMARY KEY (`id`) USING BTREE
)
COLLATE=‘utf8mb4_general_ci’
ENGINE=InnoDB
AUTO_INCREMENT=4;
3. Table menu (menu makanan)
CREATE TABLE `menu` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`name` VARCHAR(50) NULL DEFAULT NULL COLLATE ‘utf8mb4_general_ci’,
`price` DOUBLE(22,0) NULL DEFAULT NULL,
`status` TINYINT(4) NULL DEFAULT NULL,
`created_at` DATETIME NOT NULL DEFAULT current_timestamp(),
`updated_at` DATETIME NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),
PRIMARY KEY (`id`) USING BTREE
)
COLLATE=‘utf8mb4_general_ci’
ENGINE=InnoDB
AUTO_INCREMENT=6;
4. Table Invoice
CREATE TABLE `invoice` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`user_id` INT(11) NULL DEFAULT NULL,
`created_at` DATETIME NOT NULL DEFAULT current_timestamp(),
`updated_at` DATETIME NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),
PRIMARY KEY (`id`) USING BTREE,
INDEX `user_id` (`user_id`) USING BTREE
)
COLLATE=‘utf8mb4_general_ci’
ENGINE=InnoDB
AUTO_INCREMENT=2;
5. Table invoice_detail
CREATE TABLE `invoice_detail` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`invoice_id` INT(11) NULL DEFAULT NULL,
`menu_id` INT(11) NULL DEFAULT NULL,
`price` DOUBLE(22,0) NULL DEFAULT NULL,
`quantity` INT(11) NULL DEFAULT NULL,
`created_at` DATETIME NOT NULL DEFAULT current_timestamp(),
`updated_at` DATETIME NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),
PRIMARY KEY (`id`) USING BTREE,
INDEX `menu_id` (`menu_id`) USING BTREE,
INDEX `invoice_id` (`invoice_id`) USING BTREE
)
COLLATE=‘utf8mb4_general_ci’
ENGINE=InnoDB
AUTO_INCREMENT=2;
6. View invoice_report_list ini adalah view yang akan kita Materialized.
DROP TABLE IF EXISTS `invoice_report_list`;
CREATE ALGORITHM=UNDEFINED SQL SECURITY DEFINER VIEW `invoice_report_list` AS SELECT i.id,id.invoice_id, id.price, id.quantity, i.created_at AS sale_date, u.name AS cahsier, m.name AS menu_name, r.name AS role_name, r.id AS role_id FROM invoice_detail id JOIN invoice i ON (id.invoice_id = i.id) JOIN user u ON (i.user_id = u.id) JOIN menu m ON (id.menu_id = m.id) JOIN role r ON (u.role_id = r.id) ;
Berikut beberapa Teknik Materialized View:
1. Materialize View dengan Event Scheduller dan Store Routine (Tidak Real Time).
Event Scheduller digunakan untuk memanagement Eksekusi suatu event dalam Batabase MYSQL dan Task dijalankan secara barkala atau sesuai dengan penjadwalan. Event Scheduller dalam Materialized View ini digunakan sebagai perintah penjadwalan yang kemudian digunakan untuk eksekusi secara berkala sehingga hasil Materialized View akan terupdate berdasarkan Jadwal dari Event Scheduller. Disini selain menggunakan Event scheduler juga menggunakan Store Routine. Store Routine adalah semacam prosedur fungsi yang bisa digunakan di MYSQL. Dengan menggunakan DB Rumah makan diatas, Berikut Langkah Materialized View:
- Kita akan membuat Table dengan nama invoice_report_mv_event_sche sebagai Materialized View nya yang memiliki field sama dengan View invoice_report_list:
CREATE TABLE `invoice_report_mv_event_sche` (
`id` INT(11) NULL DEFAULT NULL,
`invoice_id` INT(11) NULL DEFAULT NULL,
`price` DOUBLE(22,0) NULL DEFAULT NULL,
`quantity` INT(11) NULL DEFAULT NULL,
`sale_date` DATETIME NULL DEFAULT NULL,
`chasier` VARCHAR(50) NULL DEFAULT NULL COLLATE ‘utf8mb4_general_ci’,
`menu_name` VARCHAR(50) NULL DEFAULT NULL COLLATE ‘utf8mb4_general_ci’,
`role_name` VARCHAR(50) NULL DEFAULT NULL COLLATE ‘utf8mb4_general_ci’,
`role_id` INT(11) NULL DEFAULT NULL
)
COLLATE=‘utf8mb4_general_ci’
ENGINE=InnoDB;
- Buat Store Routine yang digunakan untuk refresh Table invoice_report_mv_event_sche.
CREATE DEFINER=`root`@`localhost` PROCEDURE `store_routine_mv`(
IN `rc` INT
)
LANGUAGE SQL
NOT DETERMINISTIC
CONTAINS SQL
SQL SECURITY DEFINER
COMMENT ”
BEGIN
TRUNCATE TABLE invoice_report_mv_event_sche;
INSERT INTO invoice_report_mv_event_sche
select * from invoice_report_list;
SET rc = 0;
END
- Buat Event untuk melakukan penjadwalan refresh dari Store Routine yang telah kita buat tadi. Event disini saya buat akan dijadwalkan setiap 1 Jam akan dieksekusi
CREATE DEFINER=`root`@`localhost` EVENT `event_scheduller_mv`
ON SCHEDULE
EVERY 1 HOUR STARTS ‘2020-10-25 10:46:00’
ON COMPLETION NOT PRESERVE
ENABLE
COMMENT ”
DO BEGIN
CALL `store_routine_mv`(@rc);
END
- Untuk menjalankan Event Scheduller di system dengan menggunakan command berikut:
SET GLOBAL event_scheduler = ON;
- Apabila semua step diatas sudah dilaksanakan maka table invoice_report_mv_event_sche akan ter refresh setiap 1 Jam.
2. Materialized View dengan Trigger (Real Time)
Materialized View dengan Trigger ini digunakan untuk setiap perubahan 1 data akan menambah data dari Table Material View sehingga akan terlihat Real Time. Jadi INSERT, UPDATE, DELETE akan mempengaruhi Tabel dari material view khusus untuk hanya 1 (INSERT, UPDATE, DELETE) data row saja. Berikut Langkah untuk Materialized View untuk INSERT dengan Trigger:
- Buat Table Materialized View dengan nama invoice_report_mv_trigger
CREATE TABLE `invoice_report_mv_trigger` (
`id` INT(11) NULL DEFAULT NULL,
`invoice_id` INT(11) NULL DEFAULT NULL,
`price` DOUBLE(22,0) NULL DEFAULT NULL,
`quantity` INT(11) NULL DEFAULT NULL,
`sale_date` DATETIME NULL DEFAULT NULL,
`chasier` VARCHAR(50) NULL DEFAULT NULL COLLATE ‘utf8mb4_general_ci’,
`menu_name` VARCHAR(50) NULL DEFAULT NULL COLLATE ‘utf8mb4_general_ci’,
`role_name` VARCHAR(50) NULL DEFAULT NULL COLLATE ‘utf8mb4_general_ci’,
`role_id` INT(11) NULL DEFAULT NULL
)
COLLATE=‘utf8mb4_general_ci’
ENGINE=InnoDB
ROW_FORMAT=DYNAMIC;
- Buat Trigger yang akan update setiap ada penambahan di table invoice_detail kemudian insert ke table Materialized View.
CREATE DEFINER=`root`@`localhost` TRIGGER `trigger_invoice_detail_mv` AFTER INSERT ON `invoice_detail` FOR EACH ROW BEGIN
INSERT INTO invoice_report_mv_trigger SELECT * FROM invoice_report_list WHERE id = NEW.id;
END
Apabila step sudah dilakukan maka data di table Materialized View invoice_report_mv_trigger akan terupdate dan bisa dikatakan Real Time.
3. Materialized View dengan Easy Script
Easy Script disini kita tinggal panggil query SQL setiap ada perubahan dari table utama kemudian kita update hasil View ke Materialized View, car aini hamper sama dengan MV Trigger, ini tergantung dengan logic yang Anda gunakan apaah bisa digunakan atau tidak, tapi tentunya bisa digunakan sesuai dengan alur scripting Anda. Untuk report Rumah Makan kita akan memperhatikan perubahan dari table invoice_detail, untuk setiap penambahan id dari invoice_detail maka akan kita update row di table Materialized View invoice_report_mv_trigger. Untuk query terserah Anda sesuai kreasi Anda namun di Report Rumah Makan ini saya hanya akan menggunakan query INSERT berikut untuk mengupdate:
INSERT INTO invoice_report_mv_trigger SELECT * FROM invoice_report_list WHERE id = $id_invoice_detail
Silahkan menggunakan File SQL Berikut Untuk Mencoba Sendiri Teknik Materialized View di Database MYSQL : Download
Materialized View akan terasa gunanya pada waktunya namun sebaiknya anda impementasikan diawal saat pembuatan system apabila menggunakan MYSQL, ditakutkan apabila diimplementasikan ditengah tengah program berjalan akan mempengaruhi performa dan kestabilan jalannya program apabila tidak berhati hati.
Semoga Bermanfaat
Wassalamualaikum

Mengenal Phoenix Web Framework
Sebelum Masuk ke Phoenix Framework kita mengenal dulu Elixir functional language, Elixir adalah bahasa pemrograman functional yang di build berdasarkan VM dari Erlang. Dan dibuat untuk memenuhi kebutuhan developing scalable system dan maintainable system.
Jika kamu ingin mengembangkan aplikasi yang selalu ada dan tersedia (high-availability), maka Elixir bisa menjadi pilihan yang bagus. Sebagai referensi, Erlang Virtual Machine masuk dalam nine nines reability yang membuat downtime-nya sangat rendah. Downtime-nya tidak sampai satu detik dalam setahun! Hampir tidak pernah crash. Sedari awal, Elixir dibangun dengan fitur toleran-kesalahan (fault-tolerance) yang memungkinkan menjalankan ulang proses yang mengalami kegagalan dalam ketika dijalankan. Setiap kode berjalan pada sebuah lightweight thread terisolasi yang disebut sebagai proses (process) dan berkomunikasi menggunakan pesan (messages). Resource: https://medium.com/phoenixir/kenapa-memilih-elixir-c628dabddc3b

Elixir memiliki Framework bernama Phoenix Framework untuk pengembangan Web, masih jarang yang menggunakan Phoenix Framework terutama di Indonesia namun Apabila anda mencari reability, Aplikasi Web Interaktif dengan less code, dan Real Time data. Maka Phoenix bisa menyajikan dengan sangat Baik.
Kelebihan yang diberikan Phoenix Framework:
1. Real Time
Interaksi dengan berbagai User yang dibuild dengan Phoenix dan tanpa ada kompleksitas untuk develop dari client side.
2. Di build dengan MVC yang rapi
MVC dibuld semudah mungkin dan dengan mudah untukdi maintainace.
3. Scalability
Phoenix menyediakan VM Erlang yang mana untuk membuat realtime data bisa dengan mudah tanpa harus menggunakan pihak ketiga.
Cara penggunaan:
Silahkan Buka Laman untuk versi Phoenix yang terbaru : https://hexdocs.pm/phoenix/Phoenix.html
Dalam Dokumentasi Phoenix memiliki struktur Modul yang rapi dan menurut saya lengkap diantaranya:
- Modul MVC
- Testing
- Adapter dan Plugin
- Socket dan Transport
- Templating
- Exception
Beberapa Contoh Penggunaan Phoenix Web Framework:
1. Build a real-time Twitter clone
Dalam Video ini akan menjelaskan langkah dan cara membuat Real Time Tweets Clone dengan menggunakan Phoenix Framework. Resource : Link
2. Realtime Chat

Realtime Chat sederhana Anda bisa melihat contoh berikut:
Phoenix Web Framework untuk komunitas masih belum sebesar Bahar bahas pemrogramn yang lain, namun Framework ini memiliki feature dan modul yang lengkap dilihat dari segi framework. Silahakan Anda coba mempelajari Phoenix Framework ini nanti Anda akan menumakn dimana simplenya Phoenix Web Framework. Berikut Link Utama Phoenix Framework: Link
Semoga Bermanfaat
Wassalamualaikum

Mengenal Bahasa Pemrograman Elm
Bahasa Pemrograman Elm adalah Bahasa pemrograman fungsional untuk Frontend atau User Interface yang kaya akan fungsi Visualisasi yang bersifat Deklaratif. Elm dibuat untuk pengguna Web Apps dengan fungsionalitas untuk 3D Graphic dan Data Visualisation. Dilihat dari Fungsi dan kinerja Elm sangat berguna untuk membuat Game atau Game Dev berbasis Web Apps yang sangat Interaktif. Elm sendiri rilis versi stabilnya pada 21 Oktober 2019 Elm V 0.19 .1 namun pengguna sudah banyak. Sebelum lebih lanjut ke Elm tentunya kita harus tahu dasar dari Html dan CSS ya karena di Elm akan diintegrasikan dengan HTML dan CSS agar lebih cantik, tenang HTML dan CSS hanya pemanis karena Elm sendiri sudah Manis. Belajar Elm sangat mudah apabila Anda sudah memahami Pemrograman Dasar.
Beberapa kelebihan Elm Sebagai Berikut:
1. No Runtime Exceptions.

2. Great Performance

3. Enforced Sematic Versioning

4. Small Assets

5. Javascript Interop

Beberapa Contoh Game Dibuat dari Elm
Snake
- Elm 0.19
- MartinSnyder/elm-snake – Implementation of classic game “Snake”. [play]
- amarantedaniel/snek – Another implementation of Snake. [play]
Previous Elm versions
- Elm 0.18
- remyferre/snake-elm – Snake game.
- rkrupinski/elm-snake – Snake game. [play]
- nwjlyons/snake – Classic game Snake. [play]
- ktonon/word-snake – Asynchronous word search game. [play]
- freiguy1/elm-snake – Snake game. [play]
- tibastral/elm-snake – Snake in WebGL and Html. [play]
- Elm 0.17
- remyyounes/elm-snake – Snake game. [play]
- bobobobo/elm-game-lab – Snake game. [play]
- remyyounes/elm-snake – Snake game. [play]
- Elm 0.16
- tatut/elmato – Snake Game. [play]
- rikukissa/elm-snake – Snake game. [play]
- franklsf95/smart-snake – Play the snake game or watch AI control the perfect snake.
- Elm 0.15
- liubko/elm-snake [doc] – A Snake game for the web browser. [play]
- Elm 0.14
- Chapter 14 Snake Revisited – Part of the elm-by-example book.
- Dead http://www.elmfiddle.io/view/ciohidiwb0000ittvijce7hy5
Tetris
- Elm 0.19
- TobiasWen/3DelmTRIS – 3D Tetris utilizing WebGL. [play]
- brandly/elm-dr-mario – A Dr. Mario Clone. [play]
- w0rm/elm-flatris – A Flatris clone. [play]
- Elm 0.18
- stil4m/elm-tetris – Tetris game.
- vishalgautamm/tetris-elm – Classic Tetris game.
- hoelzro/elm-tetris – A quick ‘n’ dirty implementation of Tetris.
- marcospri/elmtris – Basic implementation of tetris. [play]
- Elm 0.12
- jcollard/elmtris – A Tetris game for the web browser.
Breakout
- Elm 0.18
- granmoe/elm-brick-breaker – A stripped down brick breaker game. [play]
- Dobiasd/Breakout – A clone of the classical game for your browser. [play]
- hoelzro/elm-breakout – An implementation of Breakout.
- robbethencourt/elm-breakout – Atari 2600 Breakout clone. [play]
- Elm 0.17
- griffinmichl/elm-brickbreaker – Breakout Clone.
- Elm 0.12
Pong
Elm 0.19
- magopian/elm-pong – making of – [play]
- ukikagi/making-pong-in-elm – Pong based on the example from the Elm-lang website
Previous Elm versions
Elm 0.18
- pristap/pong – Pong written in Elm using Elmo-8. [play]
- davydog187/elm-pong – Pong based on the example from the Elm-lang website, with some additional features.
Elm 0.17
- pdamoc/Pong.elm – Pong Example.
Elm 0.16
Elm 0.13
- sonnym/elm-expressway_pong – Multiplayer pong using Node.js and Elm.
Making Pong Tutorial [doc] – Outdated (from 2012).
rmies/fp-ams-elm – Outdated (from 2015).
mitchellwrosen/elm-pong – Outdated (from 2013)
Mario
- Elm 0.18
- avh4/elm-mario – The Elm Mario example from the Elm-lang website. [play]
- Elm 0.17
- pdamoc/Mario.elm – Mario Example.
- Elm 0.13
- dackerman/elm-mario-2 – Modified mario game based on Evan’s Mario.elm example.
- Elm 0.12
- Evan’s Mario Example [resources] – Original example for mario in elm.
Tic Tac Toe
- Elm 0.19
- pwadsworth/TicTacElm – Simple Tic Tac Toe to test-drive Elm language features.
- jjst/ultimate-tictactoe – Tic Tac Toe Clone. An implementation of ultimate tic-tac-toe in Elm.
- multiple authors – [play]
- brslv/elm-ttt – Tic Tac Toe with video of the creation process https://www.youtube.com/watch?v=XSTtUjPjJzg
- Elm 0.18
- AllanNozomu/TicTacToe – Tic Tac Toe Clone.
- franckverrot/tictactoe-elm – Tic Tac Toe game. [play]
- vishaltelangre/elm-tic-tac-toe – Tic Tac Toe game. [play]
- ZeusTheTrueGod/elm-tictactoe – Tic Tac Toe Clone. [play]
- Elm 0.17
- davefancher/ElmTicTacToe – A simple tic tac toe game.
- jah2488/elm-ttt – Tic Tac Toe Clone. [play]
- pel-daniel/elm-tictactoe – Tic Tac Toe Clone. [play]
- davydog187/elm-tic-tac-toe – Tic Tac Toe Clone.
- amcsi/elm-tic-tac-toe – Tic Tac Toe Clone.
- Elm 0.16
- localshred/tic-tac-toe – Tic Tac Toe Clone.
- Chapter 12 Tic Tac Toe – Part of the elm-by-example book. Outdated (from 2015).
Space Invaders
- Elm 0.19
- gege251/space_invaders – Space Invaders game in Elm.
- Elm 0.18
- Genetic Space Invaders game – A functional game written in Elm about classic space invaders game evolved with a genetic algorithm. [play]
- Elm 0.16
- ohanhi/elmvaders – Simple Space Invaders inspired game. [play]
- Elm 0.13
- Pew Pew – A space shooter game.
Memory
- Elm 0.18
- alpacaaa/elm-memory-game – Memory game. [doc]
- DaZzz/melmory-game – Memory game.
- Magic Match – Memory game. [play]
- Pairs.one – A neat multiplayer online memory/concentration game. [play]
- Elm 0.16
- simonewebdesign/elm-memory-game – Memory Game.
- simonewebdesign/elm-simon – Memory Game.
- Elm 0.15
- Nazanin1369/elm-memoryGame – Memmory Game. Memory game using Elm. [play]
- Cape Match – A little web game written in Elm (with some Haskell). [play]
Asteroid
- Elm 0.17
- Elmsteroids – A non-trivial Asteroids clone. [play]
- Elm 0.16
- AppSynergy/asteroids – The classic asteroids game.
- Destroid – A space shooter based on the classic Asteroids.
Pac Man
- Elm 0.18
- abadi199/elman – Pac Man Clone. [play]
- duckmole/elm-pacman – Coding-Dojo : Pacman in ELM.
Minesweeper
- Elm 0.19
- SidneyNemzer/casual-minesweeper – Minesweeper with an undo button. [play]
- Elm 0.18
- CarstenKoenig/ElmSweeper – minesweeper game. [play]
- lydell/elm-minesweeper – The classic game MineSweeper. [play]
- roSievers/elm-sweeper – Elm Sweeper aims to reimplement the puzzle mechanics of Hexcells as a web application. [play]
- brandly/elm-minesweeper – Classic Minesweeper. [play]
- Elm 0.16
- mikegehard/elm-minesweeper – A minesweeper game. [play]
Roguelike
- Elm 0.19
- Dig Dig Boom – Roguelike with breakable walls. [play]
- Elm 0.18
- mordrax/cotwelm – Remake of Castle of the Winds in Elm. [play]
- Elm 0.13
- deadfoxygrandpa/Roguelike – A roguelike.
- sindikat/roguelike – Roguelike draft for testing Elm’s Graphics.Collage performance.
Classic Card & Board Game
- Elm 0.19
- kburton/elm-yahtzee – An implementation of the dice game Yahtzee written in elm. [play]
- RobStallion/chess-elm – Trying to create a chess game in elm.
- Elm 0.18
- Depths – Casual, single-player strategy game.
- topher6345/blackjack-elm Blackjack Card Game. [play]
- arielger/elm-bingo – Bingo Game. [play]
- seandavidross/elm-haggis – A climbing card game.
- Lattyware/massivedecks – A Cards Against Humanity clone. [play]
- alpacaaa/elm-mastermind – Mastermind game written in Elm. [doc]
- Doubleheader – A multiplayer web version of the popular German card game “Doppelkopf”.
- Ring of Worlds – Ring of Worlds: Multiplayer card game written in Haskell and Elm. [play]
- girishso/indian-chess – Multiplayer 18th Century chess like game. [play]
- jinjor/elm-reversi – Reversi Clone. [play]
- cbenz/elm-bridge-game – Experimentations in Elm around Bridge card game using French standard. [play]
- Elm 0.17
- vanwagonet/elm-chess – Chess Game.
- CarstenKoenig/ElmOthello – Reversi Clone. [play]
- inderps/reversi-game-in-elm – Reversi Game.
- Diamondback Railroad – Demonstrates a game engine for a visually-pleasing 2-D game. [play]
- bigardone/phoenix-elm-battleship – battleship clone built with Elixir, Phoenix, and Elm. [play]
- Elm 0.16
- infeo/elm-ninemensmorris – Nine men’s morris Clone.
- Elm 0.15
- Kalevala – A tile-laying game for two players inspired by the board game Völuspá by Scott Caputo. [play]
- Checkerboard Grid Tutorial – Tutorial on Container Components in Elm.
- Elm 0.13
- grzegorzbalcerek/chess-elm – The game of Chess written in Elm.
Real-Time Strategy
- Elm 0.19
- Herzog Drei – RTS game based on Herzog Zwei. [play]
- DRTS Game [play]
Puzzle Games
- Elm 0.19
- m-masataka/elm-puyo – An implementation of the Puyo Puyo [play]
- stepheneb/elm-2048 – 2048 Clone [play]
- darrensiegel/elm-chess – Human vs computer chess game.
- lieberkind/sokoban – An implementation of the Sokoban game from Windows 3.x. [play]
- brian-watkins/mindmaster – Code Breaking Game in Elm.
- Seeds Game – A connect the dots game with seeds. [play]
- battermann/elm-samegame – SameGame clone. [play]
- johncrane/perfect-flood – Drag and drop flood fill game. [play]
- jwbrew/elm-puzzler – puzzle framework, there’s a naieve implmentation of noughts and crosses
- vViktorPL/is-it-my-cow – “Is it my cow?” – find your cow by it’s unique patches pattern. [play]
- Janiczek/river-crossing – River Crossing – Wolf, goat and cabbage … [play]
- O-O-Balance/pairs – Pairs – matching animals [play]
- Elm 0.18
- dam5s/mastermind – Mastermind Clone.
- maorleger/mastermind – Interactive Mastermind solver algorithm. [play]
- girishso/elm-lights-out – Light out clone. [play]
- Juzley/elm-net – Puzzle Game. This is an implementation of the Net puzzle game. [play]
- Drug Wars – arbitrage game. [play]
- campezzi/elm-fifteen – 15 Puzzle Clone. – [play]
- ufocoder/sokoban – Sokoban game.[play]
- ipavelpetrov/elm-floodit – Flood It Game. [play]
- G4BB3R/SokobanElm – Remake of the classical game Sokoban in Elm.
- zindel/game2048elm – 2048 Clone.
- w0rm/elm-cubik – This is an implementation of the Rubik’s cube puzzle in the Elm language using WebGL. [doc] [play]
- jeanettehead/lady-boggle – Boggle Clone. [play]
- Sokoban Player – Sokoban Player provides best experience to play any sokoban level you want! [play]
- w0rm/elm-nim – A live-coded implementation of the Nim game in Elm as done at Berlin Frontend Meetup. [doc]
- ssimono/hexliterate – Multi-player game where one can test their ability to guess a color hex code. [play]
- Elm 0.17
- marcosh/elm-hanoi – Hanoi tower Clone.
- ElmLive/lights-out – Light’s Out Clone. [doc]
- Elm 0.16
- erich-9/elm-sudoku – Sudoku. [play]
- Paint The Town Red – Coloring game. [play]
- Elm 0.15
- adzeitor/tis-100 – tis-100 sandbox clone. [play]
- gdeb/elm-sokoban – Sokoban Clone.
- Elm 0.12
- maxsnew/Scramble – Word Scramble Game. [play]
Racing Game
- Elm 0.18
Tools
- Elm 0.18
- hex grid pathfinding package – A hex-grid package for elm.
- Elm 0.17
- tile editor – A tilemap editor built with elm.
Miscellaneous
- Elm 0.19
- harbingerr/Elm-Game – 2D logic board game [play demo]
- danneu/elm-mmo – MMO RPG Game. MUD-like multiplayer game over websockets.
- mpizenberg/elm-videoball – Videoball clone. Minimalist elm implementation of the game videoball. [play]
- anicholson/elm-hangman – A hangman game.
- Vim Adventures in Elm – Dungeon Crawler. Vim Adventures game in Elm. [play]
- NuAshworld – MMO RPG Game. A game in the vein of the (not playable anymore) Fallout-themed PBBG “Ashworld”. [play]
- Bike-Wars – Tron clone. Bike Wars is a two-player local multiplayer game where each player controls a Light Bike (like the ones in Tron) and tries to survive the longest.
- Mogee – Platformer game. A WebGL platformer that fits into 64x64px screen. [doc] [play]
- sonnym/scorched – Turn-based artillery game. A clone of Scorched Earth.
- JordyMoos/elm-pixel-boulder-game – Boulder Dash Clone. A bit “out-of-hand” experiment to write a game in a pure functional language. [play]
- wolfadex/slime-buddy – get new slime, feed it and play with it. [play]
- lwiedema/kalah-game-elm – Kalah: Two-Player Board Game. [play]
- BKSpurgeon/numberCounter Number Counter: A search and click game: [play]
- w0rm/elm-garden-of-eels – Garden of Eels: Help eels to eat the right kind of plankton: [play]
- JoelQ/ecosystem – Ecosystem: Attempt to balance an ecoystem: [play]
- hasuya1120/forest_maze – Forest maze: escape randomly generated labyrinth [play]
- tnyo43/kirin-rhythm – kirin rhythm: Feed your giraffe at the tempo of fallen leaves! [play]
- robvandenbogaard/giraffe – Giraffe [play]
- jlengrand/sheepgame – The Sheepgame [play]
- miyanokomiya/the-defence-force-19 – The Defence Force 19 [play]
- negiboudu/roly-poly – roly-poly [play]
- Elm 0.18
- listrophy/space_elm – Spaceship Game.
- Fedreg/elmkc-simon – Simon Says Clone. [play] [play]
- Wordy – Spelling Game. A clone of an iOS game called Worder.
- Obscura – Simulation. You are a ghost in a dark universe governed by math and peopled by dullards. [play]
- Village – incremental game. [play]
- lucashm/elmstroyer – Spaceship Game.
- sd0s/elm-gallows – Hangman Game. Elm UI for Hangman game.
- naymspace/elm-bowling-game-kata – This is an adaption of Uncle Bob’s Bowling Game Kata.
- Retrorace – Racing Game. A multiplayer game where the aim is to be the first to reach the top of the screen. [play]
- cjen07/gobblet-gobblers – Gobblet Gobblers Clone. [play]
- The Adventures of Jack O’Lantern – Platform game.
- Constellations – Planarity-inspired Game. [play]
- damien-theuveny/whack-a-fraudster – Whack a Mole Clone.
- xyc0562/editor-maze – Maze Game.
- crazymykl/elm-drench – Drench Clone. [play]
- xpilot.io – Spaceship Game. a simple xpilot-like game. [play]
- billstclair/mineplace – Maze Game. A simple networked 2.5D maze game. [play]
- Boxuuume – Platformer Game. A school project. [play]
- Janiczek/dwarves – Minimal Dwarf Fortress-like behaviour in Elm. [play]
- alpacaaa/elm-star-dodge – Dodge Game. A simple star dodge game clone.
- puemos/elm-hangman – Hangman Clone. The game of Hangman. [play]
- jamonholmgren/rocket-elm – Spaceship Game. A small game where you pilot a rocket ship around.
- stephenbalaban/Gravity – Physic Simulation. An orbital simulation game written in Elm. [play]
- joelchelliah/elm-rex – Chrome’s offline T-rex game written in Elm. [play]
- WeAreWizards/elm-rocket-lander– Rocket lander Game. A simple rocket lander game written in Elm
- Sweet Sweet Friction – Arcade Game. A Gimme Friction Baby clone. [play]
- Elm Street 404 – Pathing Game. Deliver all the fashion to all the customers. [play]
- Safe Tea – Tower Defense. Pirate-themed tower defense game for the Feb 2018 Elm Game Jam. [play]
- eniac314/elmGol – Celluar Automata. Conway’s Game of Life.
- fbonetti/elm-game-of-life – Celluar Automata. Conway’s Game of Life.
- jamonholmgren/rocket-elm – Spaceship Game. A small game where you pilot a rocket ship around.
- bahalperin/planeshift
- rommsen/elm-dots-and-boxes Multiplayer Dots and Boxes. [play]
- stefankreitmayer/elm-joust Fighting game. A minimalistic action game. [play]
- tibastral/elm-koala
- brandly/elm-slime-volleyball – Gravity based game. try to beat the blue slime at volleyball. [play]
- Down the River – Frogger Clone. Roman mythology themed game with procedural generation. [play]
- https://github.com/wolfadex/dodge/ – A simple duck and dodge game, avoid the falling objects as long as possible. [play]
- elm-shooter – A side scrolling shooter game. [play]
- Elm 0.17
- alexspurling/simonsays – Simon Says Clone. [play]
- Bee – Top Down Game. [play]
- Hexagons – Top Down Game.
- ryannhg/seven-seas-elm – Sailing Game.
- gentoid/sea-battle-elm – Battleship Clone. “Sea Battle”.
- LetterSmash – Multiplayer Game. A multiplayer LetterPress game in Elixir, Phoenix and Elm. [play]
- iojichervo/Generic-Elm-Platform-Game – Platformer Game. [play]
- Elm Practice 11 – Space Ship Game. the user must collect resources orbiting a planet and overcome the difficulty of maintaining good orbits! [play]
- Jan – Rock Paper Scissors Clone. A rock paper scissors game written in Elixir and Elm. [play]
- Melted Synapse – Fighting Game. A turn-based game written in Elm that explores Frozen Synapse’s game mechanics [play]
- danneu/elm-space-arena – Space Shooter. A sloppy 2D spaceship shooter. [play]
- https://github.com/krisajenkins/transcodegame – Point&Click Adventure. A point & click adventure written. [play]
- cabaret/elm-supercrypt – Decryption Game. Elm implementation of SuperCrypt.
- krisajenkins/wireworld – Cellular automata. The WireWorld Cellular Automata.
- Elm 0.16
- kurtharriger/elm-battleship – Battleship Game.
- Grodan – Frog Game.
- rainbowbismuth/elm-turn-based-battle – A turn based browser game written in Elm.
- run-time/elm-ui-rocks – Rock Paper Scissors Game. Elm-UI Rock, Paper, Scissors game. [doc]
- Starsystem – spaceship game.
- robinpokorny/elm-hangman – Hangman clone. [play]
- Infinite Monkey Incremental – Incremental Game. An incremental game inspired by the Infinite Monkey Theorem [play]
- jvoigtlaender/labyrinth-elm – Arcade Game. A Pac-Man clone.[play]
- fbonetti/clicker-game – Incremental Game. Cookie clicker clone.
- Elm Plane – Autoscroller. A flappy bird clone written in elm. [play]
- Elm 0.15
- JoelQ/elm-platformer – Platformer Game. [play]
- robertjlooby/elm-bowling-game-kata – The bowling game kata.
- Salem – Sailing Game. [play]
- camspiers/elm-redchaser – Chasing Game. [play]
- celestia – Spaceship Game. Celestia is a two-dimensional cartoon space game. [play]
- avh4/wire-game – Network topology game.
- basti1302/elm-turing-machine-game – Turing machine game.
- krisajenkins/infinite-runner – Autoscroller. A 90 Minute Infinite-Runner hack. [play]
- krisajenkins/lunarlander – Rocket Lander Game. A Lunar Lander clone. [play]
- Elm 0.14
- Vessel – Autoscroller. A “tunnel” game. [play]
- bamboo/take-the-blue-pills – Item Collecting Game. Take the blue pills Elm tutorial.
- Elm 0.12
- GoranM/bluepill – A small avoider game, written in Elm.
- mgold/Sequence-Maze – Educational Game. A game for small children. Outdated (from 2014).
- Lopi/HackMan – Hacking Game. A game to teach users about security and penetration testing. Outdated (from 2015).
- sonnym/petrov – Red Button Game. Don’t press the button. [play]
- monsieurcactus/LearnElm A collection of one-file games.
- nyoronyoro A multi-player game in Elm play
Dilihat dari Contoh diatas bermacam macam game berbasis Web yang menggunaan Bahasa pemrograman Elm, tidak hanya untuk Game tentunya juga digunakan untuk landing page dll untuk mempercantik Website. Apabila Anda tertarik dengan Elm silahkan untuk mempelajari langsung di portal Web nya : Link. Akan banyak sekali contoh yang bisa Anda gunakan untuk belajar lebih lanjut.
Semoga Bermanfaat
Wassalamualaikum

Framework Performance untuk Developer
Performance adalah pilihan bagi pengguna framework, di artikel kali ini saya akan menyajikan beberapa pilihan yang mungkin bisa anda gunakan untuk menentukan framework yang akan anda gunakan.
Realworld adalah salah satu repository yang menyediakan perbandingan pengguna asli dari suatu framework. Realword sudah mendapat binta sebanya 45.2 K dan tentunya masih akan terus bertambah untuk meningkatkan performance sharing to sharing developer. Dari sini akan terlihat mana framework backend maupun frontend yang sering digunakan, juga tentunya bisa digunakan sebagai acuan untuk menentukan envorinment adalam suatu system.
Berikut Peringkat Pengguna asli Frontend.
Sorted by popularity on Sun Jul 19 2020
Berikut Peringkat asli engguna Backend
Sorted by popularity on Sun Jul 19 2020
Tentunya pengguna juga harus mengetahui patokan dalam menentukan ekosistem yang akan dibuat disni kita bandingkan adalah Framework.
1. Performance
Performance dilihat dari seberapa banyak orang atau End User menggunakan Aplikasi dan di build dari framework tertentu dan seberapa bagus feedback dari enduser.

Untuk nilai diatas 90 akan terasa perbedaan dengan yang dibawahnya.
2. Size
Transfer Size bisa di analitik menggunakan inspect element di browser dengan melihat Network dengan melihat GZIPed transfer response dan lama Deliver dari server.
Walaupun semakin banyak library yang digunakan bisa menjadi semakin lama load size nya, namun semakin baik coding maka seharunya library yang tidak berguna tidak boleh di load.

Semakin kecil ukuran file maka semakin cepat download page.
Kesimpulan
Semakin kecil load file coding maka semakin cepat. Svelte menjadi nomor satu karena memiliki Langkah yang keren load tanpa virtual DOM jadi sangat cepat
3. Line Code
Lone Code menunjukkan betapa ringkasnya library / framework / bahasa yang diberikan. Berapa banyak baris kode yang Anda perlukan untuk diterapkan di aplikasi yang sama.

Kesimpulan
Pada dasarnya semua framework bagus, namun didunia kerja kecepatan pengerjaan sangat menentukan. Jadi adanya framework sangatlah membantu, beberapa refrensi diatas saya harap bisa membantu anda para pembaca agar lebih eksplor lagi dan belajar lagi sehingga bisa mengatahui framework terbaik apa yang cocok untuk system Anda.
Wassalamualaikum

Otentikasi praktis dengan Passport JS
Otentikasi pasti digunakan di aplikasi berbasis Web, membuat otentikasi harus ada fungsi sendiri untuk login. di artikel ini akan saya kenalkan otentikasi praktis dengan menggunaan Passport JS. tentunya sebelum lebih dalam silakan pelajari Node JS dan Express JS terlebih dahulu untuk menggunakan Passport JS. Passport JS di GIT sudah mendapatkan 17 Ribu lebih bintang dan sudah digunakan banyak devloper, tentunya sudah sangat stabil unutuk digunakan dalam sebuah projek atau produk baru.
Apa itu Passport JS?
Passport JS adalah otentikasi middleware untuk Node.js. Sangat fleksibel dan modular, Passport dapat dengan mudah digunakan untuk aplikasi web berbasis framework Express JS. Seperangkat strategi komprehensif mendukung otentikasi menggunakan Username dan Password, Facebook, Twitter, dan lainnya.
Security Token dengan JSON Web Token (JWT)
JSON Web Token (JWT) adalah sebuah token berbentuk string panjang yang sangat random yang gunanya sendiri untuk melakukan sistem Autentikasi dan Pertukaran Informasi. Umumnya untuk melakukan login tidak seperti pada aplikasi website biasa dimana kita menggunakan session untuk mengingat siapa yang sedang Login. untuk informasi lebih lengkapnya silakan kunjungi link berikut jwt.io.
Ada banyak modul yangbisa digunakan untuk Otentikasi di Passport JS namun yang akan kita bahas kali ini hanya modul yang paling banyak digunakan.
1. Modul Otentikasi Local
Modul otentikasi Local adalah mekanisme yang sering digunakan yaitu dengan Username dan Password.
Berikut cara menggunakannya:
Install
$ npm install passport-local
Konfigurasi
var passport = require('passport')
, LocalStrategy = require('passport-local').Strategy;
passport.use(new LocalStrategy(
function(username, password, done) {
User.findOne({ username: username }, function(err, user) {
if (err) { return done(err); }
if (!user) {
return done(null, false, { message: 'Incorrect username.' });
}
if (!user.validPassword(password)) {
return done(null, false, { message: 'Incorrect password.' });
}
return done(null, user);
});
}
));
Konfigurasi untuk argument Usernam dan password callback yang mana di submit menggunakan form submit.
Form
<form action="/login" method="post">
<div>
<label>Username:</label>
<input type="text" name="username"/>
</div>
<div>
<label>Password:</label>
<input type="password" name="password"/>
</div>
<div>
<input type="submit" value="Log In"/>
</div>
</form>
Route
Route untuk handle form submit dari form dengan metode POST. Menggunakan class authenticate() dari modul passport-local.
app.post('/login',
passport.authenticate('local', { successRedirect: '/',
failureRedirect: '/login',
failureFlash: true })
);
Setting redirect apabila sukes maka successRedirect,apabila gagal login maka failureRedirect, dana apabila error flash maka set flashfailure ke true.
2. Modul Otentikasi OpenID
OpenID adalah standar otentikasi gabungan dengan seubah situs website. Saat mengunjungi situs web, pengguna bisa menggabungkan cara login dengan OpenID mereka untuk login. Pengguna kemudian mengautentikasi dengan penyedia OpenID yang mereka pilih, yang mengeluarkan pernyataan atau izin untuk mengonfirmasi identitas pengguna. Situs web akan memverifikasi pernyataan ini untuk login user.
Install
$ npm install passport-openid
Konfigurasi
Ada 2 parameter di OpenID yang harus dipahami yaitu reuturnURL dan realm. returnURL adalah URL yang akan diarahkan dari provider OpenID dan digunaan untuk otentikasi. Realm adalah redirect dari website kia sendiri apabila success untuk login menggunakan OpenID.
var passport = require('passport')
, OpenIDStrategy = require('passport-openid').Strategy;
passport.use(new OpenIDStrategy({
returnURL: 'http://www.example.com/auth/openid/return',
realm: 'http://www.example.com/'
},
function(identifier, done) {
User.findOrCreate({ openId: identifier }, function(err, user) {
done(err, user);
});
}
));
Parameter Identifier adalah indentifikasi apakah user memberi izin untuk informasi diri digunakana untuk webtie yang digunakan untuk login.
Form
Form yang digunakan untuk OpenID dan login di web page.
<form action="/auth/openid" method="post">
<div>
<label>OpenID:</label>
<input type="text" name="openid_identifier"/><br/>
</div>
<div>
<input type="submit" value="Sign In"/>
</div>
</form>
Route
Route untuk OpenID ada 2 yaitu untuk cek OpenID dari provider dan untuk redirect OpenID login dengan web route dari website yang ingin kita untuk login.
// Accept the OpenID identifier and redirect the user to their OpenID
// provider for authentication. When complete, the provider will redirect
// the user back to the application at:
// /auth/openid/return
app.post('/auth/openid', passport.authenticate('openid'));
// The OpenID provider has redirected the user back to the application.
// Finish the authentication process by verifying the assertion. If valid,
// the user will be logged in. Otherwise, authentication has failed.
app.get('/auth/openid/return',
passport.authenticate('openid', { successRedirect: '/',
failureRedirect: '/login' }));
Profile Exchange
OpenID menyediakan profile exchange dimana website provider bisa menyediakan profile pengguna untuk website lain. Profile exchange bisa diaktifkan dengan sett parameter ptofile ke true.
passport.use(new OpenIDStrategy({
returnURL: 'http://www.example.com/auth/openid/return',
realm: 'http://www.example.com/',
profile: true
},
function(identifier, profile, done) {
// ...
}
));
3. Modul Otentikasi Oauth
Oauth adalah protocol authorize yang digunakan untuk akses API dari pihak ketiga yang bisa digunakan untuk login di berbagai platrform. Untuk lebih lengkap silakan pelajari di https://oauth.net/.
Install
$ npm install passport-oauth
Konfigurasi
Dalam Oauth terdapat informasi yang harus dipenuhi diantaranya token, accessToken, authorize, key, secret, dan callback. Tentunya Oath juga bisa berbagi User Profile sesuai dengan izin dair provider dengan mengakifkan parameter profile.
var passport = require('passport')
, OAuthStrategy = require('passport-oauth').OAuthStrategy;passport.use('provider', new OAuthStrategy({
requestTokenURL: 'https://www.provider.com/oauth/request_token',
accessTokenURL: 'https://www.provider.com/oauth/access_token',
userAuthorizationURL: 'https://www.provider.com/oauth/authorize',
consumerKey: '123-456-789',
consumerSecret: 'shhh-its-a-secret'
callbackURL: 'https://www.example.com/auth/provider/callback'
},
function(token, tokenSecret, profile, done) {
User.findOrCreate(..., function(err, user) {
done(err, user);
});
}
));
Route
Route untuk Oauth ada 2 yaitu untuk Provider dan untuk websisete pengguna Oauth. Yang pertama untuk trasaksi denga provider sendangkan yang kedua untuk menyediakan data untuk website pengguna Oauth.
// Redirect the user to the OAuth provider for authentication. When
// complete, the provider will redirect the user back to the application at
// /auth/provider/callback
app.get('/auth/provider', passport.authenticate('provider'));// The OAuth provider has redirected the user back to the application.
// Finish the authentication process by attempting to obtain an access
// token. If authorization was granted, the user will be logged in.
// Otherwise, authentication has failed.
app.get('/auth/provider/callback',
passport.authenticate('provider', { successRedirect: '/',
failureRedirect: '/login' }));
Link Oauth.
Di web page harus ada button utuk proses Oauth berikut contoh link yang bisa digunakan:
<a href="/auth/provider">Log In with OAuth Provider</a>
Kesimpulan
Masih banyak modul atau srategi yang bis digunakan Passport JS diantaranya yang banyak digunakan ada alah: Modul Otentikasi Oauth 2.0, Modul Otentikasi Oauth Profile FB, Modul Otentikasi Oauth Twitter dan Modul Otentikasi Oauth Google. Otentikasi dapat digunakan secara praktis dan tentunya aman dan juga pengerjaan akn lebih cepat dengan adanya modul Otentikasi yang mudah dimengerti. untuk mempelajari lebih dalam lagi silakan explore Jode JS, Express JS dan Passport JS.
Berikut Link untuk belajar Pasport JS: Klik Disini
Semoga Bermanfaat
Wassalamualaikum

Menganal OpenStack untuk Cloud Computing
Salah satu integrasi Open Stack yang pernah
saya buat ada dengan CRM (Customer Relationship Management) dimana Openstack
mengatur Cloud Computing yang berhubungan dengan penjualan atau yang sering
disebut dengan Cloud VPS, Cloud Hosting, Rack location dan RackSpace, integrasi
ini saya buat dalam bentuk Admin Dashboard yang bisa digunakan untuk mengatur
Cloud Computing dan Penjualan. Open stack memiliki fitur yang lengkap untuk
semua kebutuhan IAAS.

Apa itu OpenStack?
OpenStack merupakan project open source untuk platform cloud computing. sebagian besar digunakan sebagai Infrastructure as a Service (IaaS), di mana server virtual dan sumber daya lain tersedia untuk pelanggan.Platform perangkat lunak terdiri dari komponen-komponen yang saling terkait yang mengendalikan beragam perangkat keras multi-vendor yang meliputi pengolahan, penyimpanan dan sumber daya jaringan di seluruh data center. Pengguna dapat mengelolanya melalui dasbor berbasis web, hingga command-line tools, atau REST layanan web (wikipedia).
OpenStack menyediakan solusi IaaS (Infrastructure ad a Service) dengan berbagai layanan yang berhubungan. Masing-masing layanan/service menyediakan API (Application Programming Interface) yang memfasilitasi integrasi. Layanan-layanan atau service-service ini dapat kita instal sesuai kebutuhan kita. Dimana API ini bisa digunakan untuk integrasi sesuai kebutuhan Anda, saya pernah membuat untuk kebutuhan CRM.
Service di Arsitektur OpenStack sebagai Berikut:
Dashboard / Horizon
Dashboard menyediakan tampilan web yang berinteraksi dengan layanan OpenStack seperti meluncurkan instance, memberikan IP address dan mengkonfigurasi akses control untuk Nova, Neutron, Swift dll.
Compute / Nova
Compute/ Nva menyediakan manajemen instan dari Compute yang ada pada lingkungan OpenStack sebagai contoh Compute di Virtual Server. Nova / Compute memiliki fitur untuk managemen dalam Virtual Machine, baremetal servers dan system contaners. Nova / Compute adalah daemon yang berjalan di linux server.
Networking / Neutron
Neoutorn memiliki fungsi untuk mempermudah kita memahami layanan Networking sebagai layanan yang membuat jaringan secara virtual tentunya. Memiliki plugin yang mendukung berbagai jaringan dari vendor dan teknologi.
Object Storage / Swift
Swift Pada Object storage ini akan menympan dan menambil object data melalui RESTful, API berbasis HTTP.
Block Storage / Cinder
Cinder sebagai Object Storage menyediakan persistent block storage untuk menjalankan instance. Kita dapat melakukan manajemen block storage devices.
Identity service / Keystone
Keystone menyediakan manajemen otorisasi layanan.
Image service / Glance
Glance adalah untuk pengelolaan image terutama untuk menyimpan dan meluncurkan VM disk images. OpenStack compute menggunakan hal ini selama provision.
Telemetry / Ceilometer
Ceilometer akan memantau billing, benchmarking, scalability dan tujuan statistik.
Orchestration / Heat
Heat berfungsi untuk menggabungkan beberapa aplikasi cloud.
Database service / Trove
Trove Meydiakan layanan Cloud database-as-a-Service.
Data processing service
Menyediakan kemampuan provision untuk Hadoop clusters.
Kesimpulan
OpenStack adalah open source yang memili resource yan besar sehingga bisa digunakan stakeholder untuk membangun usaha atau bisnis maupun hanya untuk IOT. Namun apabila penggunaannya sebagai bisnis maka akan berguna , bayangkan apabila harus secara manual atau hanya dalam bentuk Insfrastruktur tanpa Service instan dari Open Stack, akan sangat merepotkan. Pada inti nya dengan Open Stack semua Insfrastruktur bisa tertata dan semua service bisa dijalankan dengan cepat dan Mudah. Untuk belajar lebih dalam silahkan dipijak disini.
Semoga Bermanfaat.
Wassalamualaikum.

Efisiensi proses fetching data dengan GraphQl
Apa itu GraphQl?
GraphQl adalah query pemrosesan data untuk memanipulasi API. GraphQl dikembangkan secara internal oleh Facebook pada tahun 2012 dan di publikasikan pada tahun 2015 namun untuk rilis stabilnya pada tahun 2018. GraphQl memiliki posisi diantara Client dan Server dimana menjembatani aliran data. GraphQl hamper sama seperti REST dimana ada proses CRUD bedanya GraphQl ini memerlukan skema untuk proses fetching data yang diinginkan sehingga tidak ada proses berulang dari client dan server. Salah satu tujuan pengembangan bahasa query ini adalah untuk mempermudah komunikasi data antara server dan Client.

GraphQl dapat diimplementasikan di berbagai bahasa sisi client seperti react, vue, svelte dll. Apapun jenis framework nya selama dapat mengakses data dengan API. dan karena GraphQl ini hanya penerjemah (query language) dan runtime saja maka tidak tergantung pada bahasa pemograman sisi server dan database apapun.
Kegunaa Utama?

1. Handle untuk Permintaan Ganda.
GraphQl memiliki proses dimana fetching data setelah diproses dari server maka akan dimanipulasi lagi sehingga smeua yang client butuhkan bisa didapatkan. proses berulang seperti di REST tidak akan terjadi karena data yang diinginkan sudah diload oleh GraphQl dan hanya perlu mengambil ulang dari schema yang di buat GraphQl.
2. Efisiensi Data dan Konsistensi.
Asumsinya kita semua sudah mengenal REST endpoint jadi tidak perlu dijelaskan apa itu REST. Setiap endpoint mewakili satu entitas dan memiliki beberapa metode seperti GET, POST, PUT dan DELETE. Ketika mengakses endpoint dengan metode GET akan menampilkan data dari entitas tersebut. Data yang ditampilkan bersifat tetap, maksudnya kita akan menerima semua data meskipun kita tidak membutuhkan data itu. Konsistensi data karena data kita sendiri yang atur atau yg menjembatani antara API yang ada dengan data yang akan kita berikan ke client.
Seklias penggunaan GraphQl untuk Argument

Perbedaan dengan graphQl dengan REST API
Pada dasarnya GraphQl dan REST API tidak terlalu berbeda namun sesuai dengan penggunaannya, GraphQl digunakan untuk data yang besar dimana didapat API dari pihak ketiga yang kemudian akan di deliver ke client sedangkan REST API proses data yang diingin kan sudah disiapkan oleh programmernya sehingga telihat pakem.
Kesimpulan
GraphQl memiliki efisiensi, konsistensi dan kemapampuna untuk handle data yang ganda. GraphQl dibutuhkan pada saat data dari sebuah aplikasi semakin besar dan dari segi development akan sangat lama apabila menggunakan RESTful API langsung ke client, jadi GraphQl akan memilah data mana saja yang akan tampil dan digunakan oleh client. Meski bitupun GraphQl bisa digunakan di aplikasi dengan skala kecil.
Semoga Bermanfaat
Wassalamualaikum