Pandemi Covid-19 benar-benar mengubah kebiasaan masyarakat. Mulai dari sekolah sampai bekerja yang awalnya kegiatan dilakukan secara tatap muka, sekarang berubah menjadi serba online dengan memanfaatkan teknologi yang bernama Video Conference.
Video Conference memungkinkan kita berkomunikasi dengan lebih dari satu orang dalam waktu yang bersamaan. Kali ini kita akan mencoba membuat aplikasi Video Conference dengan menggunakan Flutter.
Continue readingMaterialzied 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:
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?
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:
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:
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;
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
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
SET GLOBAL event_scheduler = ON;
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:
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;
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.
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
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.
Interaksi dengan berbagai User yang dibuild dengan Phoenix dan tanpa ada kompleksitas untuk develop dari client side.
MVC dibuld semudah mungkin dan dengan mudah untukdi maintainace.
Phoenix menyediakan VM Erlang yang mana untuk membuat realtime data bisa dengan mudah tanpa harus menggunakan pihak ketiga.
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:
Dalam Video ini akan menjelaskan langkah dan cara membuat Real Time Tweets Clone dengan menggunakan Phoenix Framework. Resource : Link
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
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.
Elm 0.19
Elm 0.18
Elm 0.17
Elm 0.16
Elm 0.13
Making Pong Tutorial [doc] – Outdated (from 2012).
rmies/fp-ams-elm – Outdated (from 2015).
mitchellwrosen/elm-pong – Outdated (from 2013)
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
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.
Sorted by popularity on Sun Jul 19 2020
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.
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.
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
Lone Code menunjukkan betapa ringkasnya library / framework / bahasa yang diberikan. Berapa banyak baris kode yang Anda perlukan untuk diterapkan di aplikasi yang sama.
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.
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.
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.
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.
Modul otentikasi Local adalah mekanisme yang sering digunakan yaitu dengan Username dan Password.
Berikut cara menggunakannya:
$ npm install passport-local
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 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 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.
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.
$ npm install passport-openid
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 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 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' }));
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) {
// ...
}
));
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/.
$ npm install passport-oauth
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 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' }));
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>
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
AutoMapper adalah object to object mapper yang memetakan obyek A menjadi obyek B yang memiliki properti dan tipe yang berbeda. Seperti contoh kita perlu melakukan pemetaan Data Transfer Object ke object model. AutoMapper memudahkan proses pemetaan konvensional yang harus memetakan secara manual satu per satu.
Untuk menggunakan AutoMapper pada ASP .Net Core 3.1 terlebih dahulu harus menginstal AutoMapper melalui NuGet atau command pada NuGet Package Manager seperti ini.
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.
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 menyediakan tampilan web yang berinteraksi dengan layanan OpenStack seperti meluncurkan instance, memberikan IP address dan mengkonfigurasi akses control untuk Nova, Neutron, Swift dll.
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.
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.
Swift Pada Object storage ini akan menympan dan menambil object data melalui RESTful, API berbasis HTTP.
Cinder sebagai Object Storage menyediakan persistent block storage untuk menjalankan instance. Kita dapat melakukan manajemen block storage devices.
Keystone menyediakan manajemen otorisasi layanan.
Glance adalah untuk pengelolaan image terutama untuk menyimpan dan meluncurkan VM disk images. OpenStack compute menggunakan hal ini selama provision.
Ceilometer akan memantau billing, benchmarking, scalability dan tujuan statistik.
Heat berfungsi untuk menggabungkan beberapa aplikasi cloud.
Trove Meydiakan layanan Cloud database-as-a-Service.
Menyediakan kemampuan provision untuk Hadoop clusters.
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.
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.
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.
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.
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.
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
Beberapa waktu belakangan, kolaborasi designer – developer masih terasa individualistis. Contohnya bisa dilihat pada proses kerja mereka yang dimulai dari seorang designer (fase perancangan design hingga design selesai dalam bentuk mockup dan prototype), lalu design disimpan pada file lokal dan selanjutnya adalah tugas developer untuk melakukan review. Setelah mereview, barulah developer mengimplementasi design ke dalam bentuk kode. Apabila workflow semacam ini masih dilakukan, tentu berpeluang membuahkan hasil yang kurang optimal. Beberapa kekurangannya antara lain terjadinya miskomunikasi, tidak efektif dan efisien-nya kolaborasi, dan yang paling disayangkan adalah tidak beradaptasi menggunakan tools yang membantu kolaborasi antara designer – developer seperti XD, Figma, atau Sketch. Mengingat beberapa tools tersebut gratis.
Padahal hakikatnya designer dan developer adalah satu kesatuan yang tidak dapat dipisahkan pada era saat ini. Keterikatan tersebut bisa dibina mulai dari tahap perancangan design hingga selesainya sebuah system atau aplikasi. Jadi mindset kita pada artikel kali ini adalah bagaimana membuat kolaborasi antara designer – developer menjadi satu kesatuan, bukan tim yang terpisah. Dalam implementasinya, memang ada hal-hal yang patut diperhatikan supaya job description kedua pihak tersebut tidak tumpang tindih. Jika tidak ada batasan yang jelas, aspek yang tumpang tindih bisa mengakibatkan developer berpikir sebagai designer dan begitupun sebaliknya. Pada artikel ini akan dibahas mengenai beberapa saran agar kolaborasi designer – developer bisa lebih optimal dan menjadi satu kesatuan namun dibatasi dengan batasan yang jelas.
Sebenarnya designer dan developer memliki beberapa perbedaan yang jelas. Designer bisa diibaratkan sebagai arsitek dan developer adalah konstruktornya. Sehingga seorang designer harus melihat sesuatu secara menyeluruh. Sedangkan developer akan lebih nyaman untuk melakukan breakdown task menjadi beberapa langkah kecil dan membuat sesuatu secara cepat.
Ketika membicarakan perbedaan antara designer dan developer, maka kita juga perlu mengetahui proses berpikir mereka. Terdapat dua proses berpikir yang kita bahas disini yaitu empathize dan systemize. Kebanyakan developer berpikir secara systemize daripada empathize. Mereka mengandalkan logika di atas segalanya sehingga jarang kita dapati sisi emosional yang dominan seorang developer. Berbanding terbalik dengan developer, designer memiliki pola pikir empathize yang lebih mengandalkan perasaan dan emosi sehingga mentrigger kreatifitas pada otak kanan mereka.
Fokus dari kedua pihak pun berbeda, developer lebih berfokus kepada sistem sedangkan designer lebih berfokus ke end user. Kedua pihak tersebut harus berkomunikasi sedari awal fase perancangan dan mengenal satu sama lain sehingga bisa berkolaborasi secara terpadu. Ibarat otak manusia, ada otak kanan dan kiri. Inilah yang saya maksud dengan satu kesatuan karena manusia tidak akan bisa menjalankan hasrat hidupnya hanya menggunakan otak kiri saja atau otak kanan saja melainkan harus saling melengkapi, sama hal-nya dengan kesatuan designer – developer.
Pertama-tama sebelum designer memulai fase perancangan design dengan tools XD, Figma, atau Sketch, bertanyalah kepada developer beberapa pertanyaan kunci.
Tools seperti XD, Figma memiliki fitur yang memudahkan kolaborasi antara designer dengan developer. Ketika developer memilihi hak akses untuk melihat keseluruhan design beserta assetnya, maka designer bisa mengecek sedari awal kira-kira seperti apakah design yang akan diimplementasikan, memberikan komen, dan menyatukan persepsi antara designer dengan developer secara lebih mudah. Sehingga feedback bisa langsung diberikan oleh developer sebelum designer mengimplementasikannya lebih jauh.
Cobalah untuk mendiskusikan tools apa yang terbaik menyesuaikan dengan jenis project, preferensi tim, hingga preferensi perusahaan. Tools ini bisa disebut juga sebagai asset management yang memudahkan developer untuk mengakses sekaligus mengekspor assets pada layout yang telah di design oleh designer secara mandiri. Sehingga tidak ada lagi yang namanya developer meminta asset kepada designer. Semua sudah tersedia di satu tempat yang sama dan lebih terorganisir.
Penting sekali untuk menanyakan hal ini karena designer bisa menyesuaikan asset, icon, komponen, hingga grid supaya sesuai dengan apa yang akan diimplementasikan developer dan tidak memiliki gap yang terlalu jauh. Menjadi tidak baik apabila designer mementingkan ego untuk memberikan design dengan kompleksitas yang tinggi dan tidak memungkinkan untuk didevelop. Contohnya ketika mendesign untuk aplikasi android, maka designer alangkah lebih baik untuk memahami komponen yang digunakan dalam material design. Sama hal-nya ketika web developer mendevelop web dengan bootstrap 4, mau tidak mau, designer juga harus menyesuaikan design dengan guideline yang ada di bootstrap.
Terdapat miskonsepsi yang umum terjadi bahwa ketika designer selesai melakukan tugasnya (mendesign screen keseluruhan mockup serta prototype-nya), maka mereka merasa bahwa kerja mereka telah selesai. Konsep seperti ini sering ditemukan pada projek bertipe waterfall, bahkan pada beberapa project agile sekalipun. Sebenarnya ketika designer selesai mendesign mockup atau prototype, pekerjaan designer baru selesai setengahnya. Karena ketika design sampai di tangan developer, fokus tidak lagi berpusat pada screen tetapi lebih spesifik ke fitur. Fitur dikembangkan behind the screen sehingga beberapa perubahan akan sering terjadi. Maka designer harus bisa stand by kapan saja apabila sewaktu-waktu ada developer yang membutuhkan bantuan designer untuk menyesuaikan design-nya kembali.
Perlu diingat bahwa kerja designer adalah menyeluruh. Pekerjaan designer tidak boleh terbatas pada visual yang mengandung nilai estetik saja. Namun juga mencakup bagaimana keseluruhan sistem bisa mudah digunakan oleh user. Maka dari itu, designer juga sedikit banyak ikut bertanggung jawab pada produk final yang telah diimplementasikan oleh developer.
Developer sangat dominan menggunakan otak kiri. Maka dari itu, ketika design sudah di depan mata, tidak semua developer bisa menerjemahkan visual design ke dalam bentuk code. Ada beberapa developer yang mengerti komposisi design dan nilai estetik, ada pula developer yang kurang memahaminya. Maka designer harus lebih aware dalam hal ini. Setiap fase design yang dilakukan, jangan lupa membuat guidance yang simple namun mencakup keseluruhan aspek design. Guideline itu bisa mencakup palet warna, ukuran margin padding, white space, typeface dan font size, dan lain-lain. Biasanya developer tidak memberikan feedback apapun setelah melihat design guideline dari kita. Mereka mengaku paham mengenai guideline namun pegakuan ini seringkali bertolak belakang dengan yang diharapkan designer. Maka dari itu, kedua pihak harus saling supportive dan terbuka mengenai persepsi mereka masing-masing.
Mungkin banyak developer tidak setuju dan mempertanyakan untuk apa memberikan akses code kepada designer? Namun hal ini ternyata efektif dan solutif untuk menjawab masalah yang timbul ketika kolaborasi antara designer dan developer tidak berjalan lancar. Pada satu titik, kolaborasi tim ini memungkinkan untuk terjadi bottleneck dan muncul rasa ketidakpercayaan satu sama lain. Namun ketika designer memiliki akses kode, terjadi perubahan drastis yaitu munculnya rasa supportive dan kepercayaan.
Terdapat pro dan kontra di komunitas designer maupun developer mengenai designer yang memiliki akses code. Tetapi realitanya, sangat susah untuk mendapatkan chemistry untuk kolaborasi ketika ada tembok raksasa, tidak terlihat, dan hanya bisa di akses oleh satu pihak saja. Sehingga muncul istilah baru yang mengkombinasikan design dengan programming, yaitu fullstack design.
Ketika seorang designer dipercaya untuk mengakses kode program, berarti designer tersebut sudah memenuhi kriteria sebagai fullstack designer. Seorang fullstack designer harus memiliki pengetahuan dasar tentang git, git hub, dan penullisan kode khususnya di bagian client side.
Kembali lagi pada pokok permasalahan yaitu harus ada batasan pembagian jobdesc serta peraturan yang disetujui antara developer – designer supaya pekerjaan tidak tumpang tindih atau malah simpang siur karena cara ini bukanlah best practice yang bisa diimplementasikan pada mayoritas perusahaan.
Jika penjelasan sebelumnya lebih spesifik ke fullstack design, pembahasan kali ini akan mencakup developer – designer secara umum. Mempelajari “bahasa” satu sama lain bukan berarti designer harus bisa menulis kode atau developer harus bisa mendesign sesuatu. Yang dimaksud “bahasa” disini adalah istilah yang berkenaan dengan bidang ilmu masing masing. Kenapa harus mengerti “bahasa” satu sama lain? Karena ada istilah-istilah yang tidak mungkin diperjelas secara panjang lebar dan diterjemahkan menjadi bahasa orang awam karena kemungkinan besar justru mengakibatkan salah persepsi. Katakanlah seorang developer menanyakan “Kenapa fontsize-nya berubah-ubah?” Maka designer bisa menjawab “Karena dengan penggunaan fontsize dan weight yang berbeda, bisa membuat visual hierarchy yang baik sehingga meningkatkan usability”. Jika developer mengerti istilah yang dimaksud designer begitupun sebaliknya, akan sangat menguntungkan kedua pihak dari segi apapun.
Tidak ada cara yang selalu cocok dengan kondisi kolaborasi apapun. Hal itu kembali lagi dengan karakteristik masing-masing tim. Ketika satu sama lain saling memahami kebutuhan dan kondisi, barulah bisa mengaplikasikan beberapa cara yang disarankan di atas. Saran dari saya sendiri, mulailah pilih salah satu cara di atas, dan aplikasikan sesuai dengan kondisi kolaborasi tim. Jika memungkinkan, temukan beberapa orang dalam tim yang memiliki visi serupa untuk mewujudkan lingkungan kerja yang kolaboratif antara designer –developer. Buatlah tim kecil, berdiskusi sambil minum kopi dengan membahas mengenai apa yang harus dan tidak dilakukan demi kolaborasi yang lebih baik. Pada akhirnya, catat progress dari cara yang sudah disepakati sehingga Anda dan tim bisa mengukur dan melihat dengan harapan bahwa cara tersebut membawa dampak baik dan tidak lupa untuk terus mengevaluasinya.
