Algostudio Community – Page 12 – Berbagi Ilmu, Menebar Kebaikan

Mengenal Phoenix Web Framework

Posted on 23 October 2020by Dhendik Dwi Prasetyo

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

Hasil dari Contoh Realtime chat dengan Phoenix Framework

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

Linux

Cara instalasi DreamFactory 2.14.2

Posted on 3 September 2020by Mahendra Data

Setahun yang lalu, terjadi perubahan besar pada salah satu open source project favorit, DreamFactory. Pada versi setelah 2.14.2, developer DreamFactory menghapus dua fungsi yang paling populer digunakan oleh komunitas open source community, yaitu fungsi untuk menghubungkan DreamFactory dengan MySQL server dan fungsi untuk membuat script.

Dalam artikel ini saya tidak akan menceritakan permasalahan tersebut dengan panjang lebar. Bila tertarik untuk mengetahui akar permasalahannya, ada dapat membaca website berikut ini. Dalam artikel ini kita akan fokus tentang bagaimana mengatasi permasalahan tersebut dengan melakukan instalasi versi terdahulu dari DreamFactory sebelum terjadi perubahan tersebut, yaitu DreamFactory versi 2.14.2.

Server yang saya gunakan berbasis Linux Ubuntu 20.04 dengan web server NGINX, PHP, dan database MySQL. Sekarang mari kita bahas langkah-langkah instalasi DreamFactory.

Instalasi NGINX

Update apt repository dan lakukan instalasi NGINX dengan perintah

$ sudo apt update
$ sudo apt install nginx

Instalasi MySQL Server

Lakukan instalasi database server MySQL

$ sudo apt install mysql-server

Perintah ini optional, namun berguna untuk meningkatkan keamanan database server.

$ sudo mysql_secure_installation

Sekarang kita perlu membuat satu MySQL user untuk DreamFactory. Jalankan perintah berikut untuk membuat database df dengan user df dan password rahasia.

$ sudo mysql
mysql> CREATE DATABASE df;
mysql> CREATE USER 'df'@'localhost' IDENTIFIED BY 'rahasia';
mysql> GRANT ALL PRIVILEGES ON df.* TO 'df'@'localhost';
mysql> FLUSH PRIVILEGES;
mysql> EXIT;

Instalasi PHP-FPM

Versi PHP yang kita gunakan adalah versi 7.2 karena versi ini yang telah saya coba dan berhasil digunakan untuk DreamFactory versi 2.14.2. Berikut langkah instalasi PHP-FPM.

$ sudo apt install software-properties-common
$ sudo add-apt-repository ppa:ondrej/php
$ sudo apt update
$ sudo apt install php7.2-fpm \
    php7.2-mbstring \
    php7.2-xml \
    php7.2-curl \
    php7.2-mysql
$ sudo systemctl restart php7.2-fpm.service

Instalasi Composer

Lakukan instalasi composer dengan perintah berikut.

$ cd ~
$ php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
$ sudo php composer-setup.php --install-dir=/usr/local/bin --filename=composer
$ php -r "unlink('composer-setup.php');"

Instalasi Git Client

Secara default, git client sudah terpasang pada Linux Ubuntu 20.04. Namun bila belum ada, maka lakukan instalasi dengan perintah

$ sudo apt install git

Konfigurasi NGINX

Kita perlu melakukan konfigurasi NGINX agar dapat digunakan sebagai web server untuk DreamFactory. Bukalah file /etc/nginx/sites-available/default lalu ubah konfigurasinya seperti pada contoh berikut

server {
  listen [::]:80 default_server;
  server_name _;
  root /var/www/html/public;
  charset utf-8;
  index index.php index.html index.htm index.nginx-debian.html;
  location / {
    try_files $uri $uri/ /index.php?$query_string;
  }
  error_page 404 /index.php;
  location ~ \.php$ {
    include snippets/fastcgi-php.conf;
    fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
  }
}

Restart service NGINX dengan perintah

$ sudo systemctl restart nginx.service

Instalasi DreamFactory

Sekarang masuk ke bagian inti dari tulisan ini, yaitu cara instalasi DreamFactory. Langkah pertama masuklah ke dalam root directory web server /var/www/html.

$ cd /var/www/html

Clone source code DreamFactory versi 2.14.2.

$ git clone --branch 2.14.2-release --single-branch https://github.com/dreamfactorysoftware/dreamfactory.git .

Edit file composer.json dan hapus baris ini karena kita tidak menggunakan mongodb.

"dreamfactory/df-mongodb" : "~0.15.1",

Kemudian jalankan perintah berikut

$ sudo composer update
$ sudo composer install --no-dev
$ sudo php artisan df:env
$ sudo php artisan df:setup

Dalam proses instalasi tersebut, Anda akan diminta memasukkan beberapa data seperti MySQL password, user, dll. Silahkan masukkan data yang diminta sesuai dengan proses instalasi yang telah kita lakukan sebelumnya.

Langkah terakhir adalah melakukan update file permission dengan perintah.

$ sudo chown -R www-data storage/ bootstrap/cache/
$ sudo find . -type f -exec chmod 644 {} \;
$ sudo find . -type d -exec chmod 755 {} \;
$ sudo find storage/ -type d -exec chmod 2775 {} \;
$ sudo find storage/ -type f -exec chmod 664 {} \;
$ sudo find bootstrap/cache/ -type d -exec chmod 2775 {} \;
$ sudo find bootstrap/cache/ -type f -exec chmod 664 {} \;

Proses instalasi selesai, sekarang anda dapat membuka hasil instalasi tersebut melalui web browser misalnya dengan alamat http://localhost atau sesuai dengan domain server Anda.

Semoga bermanfaat.

Programming

Mengenal Bahasa Pemrograman Elm

Posted on 22 August 2020by Dhendik Dwi Prasetyo

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.

Elm menggunakan metode inferensi untuk mendeteksi error dan memberikan petunjuk yang jelas. Untuk lebih jelasnya silakah pelajari di link berikut : Detail

Berikut Contoh untuk Runtime Exception:

Pada saat Error akan muncul hints atau petunjuka yang jelas

2. Great Performance

Elm memiliki Virtual DOM sendiri yang di desain untuk kemudahan dan kecepatan. Semua funsional tidak bisa dirubah di Elm dan tolak ukur yang digunakan membuat code javascript yang cepat.

Perbandingan dengan beberapa Framework terkenal untuk frontend lain, semakin kecil semakin bagus

3. Enforced Sematic Versioning

Elm memiliki Package yang digunakan sesuai dengan kegunaan. berikut link untuk packeage: Detail

tau bisa menggunakan comandline seperti gambar berikut:

4. Small Assets

Dibandingkan dengan React, angular dan Vue Assets Elm lebih kecil sehingga otomatis load akan cepat, elm memiliki cara endiri untuk meminimalisir assets silahkan baca di link berikut: Detail

Perbedaan ukuran / Size Asset dibandingkan dengan Vue, Angular dan React

5. Javascript Interop

Elm dapat digunakan di suatu node yang aktif, dan dapat disisipkan di suatu project tanpa menggangu.

Elm Bisa disispkan di project dengan javascript

Bahasa Pemrogram Elm sering digunakan untuk Desain Grafis atau Game Dev. Berikut Contoh Penggunaan Bahasa Pemrograman silahkan Anda Explore :

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
- kbaba1001/elm-breakout

Pong

github search
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
- r00k/elm-pong
Elm 0.13
- sonnym/elm-expressway_pong – Multiplayer pong using Node.js and Elm.
Making Pong Tutorial [doc] – Outdated (from 2012).
Dead https://github.com/bado22/elm-pong
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
- Tacks – Real-time multiplayer sailing game [play]
- Retrorace – Retrorace is a multiplayer game where the aim is to be the first to reach the top of the screen. [play]

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
  - dead https://blog.wearewizards.io/rocket-lander-in-elm-extra/ship.html
  - dead https://blog.wearewizards.io/experience-report-rocket-lander-in-elm
  - https://news.ycombinator.com/item?id=9068685
- 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]
  - older version (Elm 0.16)
- 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

Programming

Framework Performance untuk Developer

Posted on 9 August 2020by Dhendik Dwi Prasetyo

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

🥇	🥈	🥉
React / Redux	Angular	Vue
Elm	React / MobX	Svelte / Sapper
PureScript + Halogen	AngularJS	ClojureScript + re-frame
Angular + ngrx + nx	Aurelia	Ember.js
Rust + Yew + WebAssembly	AppRun	Next.js
Vanilla JS Web Components	ClojureScript + Keechma	Stencil.js
Hyperapp 1	Dojo 2	Ember Octane
San	Riot.js v4	neo.mjs
Imba	Crizmas MVC	Bridge.Spaf
Riot.js v3	Riot.js + Universal + Effector

Berikut Peringkat asli engguna Backend

Sorted by popularity on Sun Jul 19 2020

🥇	🥈	🥉
Node / Express	Go + Gin	ASP.NET Core
Django	NestJS + TypeORM/Prisma	Laravel
Elixir + Phoenix	Flask	Spring
Rails	Slim	Rust / Rocket
Kotlin / Spring	Rust	Go Clean Architecture
Go / Echo	Koa / Knex	Clojure / Polylith
Serverless AWS Lambda DynamoDB	Haskell / Yesod	Scala & Play Framework
GCP Cloud Functions + Datastore	CakePHP	Functional ASP.NET Core
Kotlin + Javalin + Exposed	Moleculer	F#
Hapi.js	Kotlin + http4k	Java Quarkus
Node / hapi pal	Crystal (Onyx)	Express w/ Bookshelf.js
Kotlin + Ktor	Ruby & Colmena	Feathers
Akka HTTP	QEWD.js	AWS Lambda Go + DynamoDB
Eclipse Vert.x	Spincast

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.

Semoga Bermanfaat
Wassalamualaikum

Programming

Otentikasi praktis dengan Passport JS

Posted on 25 July 2020by Dhendik Dwi Prasetyo

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

Programming

Pemetaan obyek dengan AutoMapper pada ASP .Net Core 3.1

Posted on 4 July 2020by Andhika K Aufa

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.

Internet Linux Programming

Menganal OpenStack untuk Cloud Computing

Posted on 24 June 2020by Dhendik Dwi Prasetyo

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.

Programming

Efisiensi proses fetching data dengan GraphQl

Posted on 24 June 2020by Dhendik Dwi Prasetyo

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

Argument Pada saat fetching data menggunakan GraphQl

Argument ini menunjukan get data dari API akan dioleh oleh query GraphQl sesuai dengan kebutuhan client sehingga tidak semua data dari API akan muncul di Client. Untuk lebih jelasnya silahkan bermeditasi disini: graphql

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

Programming UX Design

Meningkatkan Kolaborasi antara Designer dan Developer

Posted on 22 June 2020by Andra Febriant

Latar Belakang Masalah

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.

Perbedaan Designer dan Developer

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.

Bagaimana Caranya?

Key Discussion

Pertama-tama sebelum designer memulai fase perancangan design dengan tools XD, Figma, atau Sketch, bertanyalah kepada developer beberapa pertanyaan kunci.

Tools Apa yang Digunakan?

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.

Apakah Framework / Library yang Digunakan?

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.

Fase Design Seharusnya Tidak Pernah Selesai

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.

Membuat Guideline yang Memudahkan 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.

Akses ke Code Base

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.

Mempelajari “Bahasa” Satu Sama Lain

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.

Kesimpulan

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.

Referensi

UI Design UX Design

Fenomena Trend Design Neumorphism dan Bagaimana Cara Membuatnya

Posted on 15 June 2020by Andra Febriant

Sejarah Terciptanya Neumorphism

Saat ini, Neumorphism menjadi style design yang digandrungi oleh komunitas designer dan banyak ditemukan pada Dribbble, Behance, Instagram dan forum-forum lain. Neumorphism merupakan turunan dari skeumorphism. Untuk lebih mudah membedakannya, skeumorphism merupakan istilah yang digunakan pada user interface untuk membuat suatu komponen layaknya komponen real di dunia nyata. Salah satu contoh pengaplikasian skeumorphism adalah pada icon shortcut recycle bin di OS windows. Skeumorphism pertama diimplementasi pada era awal smartphone touchscreen yang diperkenalkan oleh Apple iOS. iOS sangat mengerti bahwa dengan mengaplikasikan skeumorphism, user yang awal mulnya tidak paham bagaimana cara kerja touchscreen, bisa beradaptasi lebih cepat. Contohnya button dengan efek glossy, foto dengan border putih seperti foto real di dunia nyata, dan masih banyak lagi. Design ini lalu dengan cepat menyebar sehingga tidak luput diaplikasikan pada platform lain.

Is skeuomorphism really dead? - Popicon — Skeumorphism VS Flat Design

Untuk saat ini, sudah sangat jarang ditemukan design dengan style skeumorphism karena hampir seluruh manusia di dunia sudah mengenal media digital mulai dari smartphone hingga desktop. Maka, penggunaan skeumorphism yang terlalu banyak detail, akan menjadi useless karena user sudah bisa menginterpretasikan suatu komponen dengan cepat meskipun tidak menyerupai komponen di dunia nyata. Ketika mendekati perilisan iOS7, Apple mengumumkan bahwa mereka akan meninggalkan style tradisional (Skeumorphism) dan beralih ke style yang lebih simple yaitu flat design. Saat ini, hampir semua platform mengimplementasi flat design. Namun dalam beberapa waku belakangan (2018-2019), flat design murni juga sepertinya mengalami dark period seiring berumunculan flat design yang dikembangkan dengan gaya flat illustratif.

Reinkarnasi Yang Bangkit

Skeuomorphism / Neumorphism UI Trend - SKEUOMORPH MOBILE BANKING BY ALEXANDER PLYUTO — Neumorphism Mobile Banking by Alexander Plyuto

Neumorphism lahir dari hasil kombinasi antara skeumorphism dengan flat design. Sehingga menghasilkan design yang 3D, bertekstur namun tetap soft dan simple. Output seperti itu bisa dihasilkan dengan racikan yang tepat atas bentuk, gradien, warna background, highlights, dan permainan shadow. Secara kasat mata, mungkin Anda berpikir bahwa Anda memerlukan aplikasi 3D rendering. Tetapi sebenarnya Anda hanya perlu aplikasi design standar yang biasa Anda gunakan seperti XD, Figma, Sketch dan sejenisnya dengan sedikit sentuhan “magis” dalam pembuatannya.

Anda bisa melihat panduan di bawah untuk membuat design neumorphism.

Mendesign Style Neumorphism

Panduan untuk Designer

Pada panduan kali ini, saya memberikan contoh bagaimana membuat design neumorphism secara simple menggunakan Adobe XD.

Popping Up

Disini, Anda akan membuat efek timbul neumorphism. Pertama-tama, Anda harus memilih warna yang smooth (biasanya saturasi rendah). Lalu implementasikan warna tersebut di artboard anda.

Setelah itu, buat square shape dengan ukuran bebas. Dalam contoh saya, saya menggunakan ukuran 100px X 100px. Set warna menyamakan dengan warna background. Lalu berilah efek black shadow dengan X=6, Y=6, B=10 dan opacity 20%. Anda bisa mengatur shadow sesuai dengan preferensi Anda.

Buat lagi square shape dengan ukuran yang sama, namun berilah efek white shadow dengan X=-6, Y=-6, B=10 dan opacity 80%.

Gabungkan kedua square secara tumpang tindih. Berikut adalah hasilnya.

Popping Down

Disini, Anda akan membuat efek rongga (ketika di tekan) neumorphism. Pertama-tama, buat square bernama layer “dark” dengan ukuran yang sama seperti cara sebelumnya. Set fill color transparent, border black, object blur seperti gambar di bawah.

Buat square ke-dua bernama layer “light” dengan ukuran yang sama. Set fill color transparent, border white, object blur seperti gambar di bawah.

Lalu buat square ke-tiga bernama layer “mask” dengan ukuran yang sama. Set atribut fill color transparent dan border dengan warna mencolok.

Lalu posisikan ketiga square tersebut secara tumpang tindih dengan susunan layer dari atas ke bawah: mask – light – dark.

Ubah ukuran square dark menjadi 120px X 120px dan geser beberapa pixel ke kanan dan ke bawah. Ubah pula ukuran square light menjadi 120px X 120px dan geser beberapa pixel ke kiri dan ke atas. Usahakan efek blur dari kedua square tersebut masih tercakup di dalam square mask.

Posisi Setelah Ukuran Square Dark dan Light Dirubah

Langkah terakhir, select ketiga object tersebut, klik kanan > Mask With Shape. Dan jadilah efek rongga (popping down) neumorphism.

Implementasi Neumorphism

Setiap design memiliki sisi baik dan buruknya. Sisi baiknya, neumorphism bisa memberi nuansa yang baru, fresh, dan terasa unik. Ketika dilihat oleh mata, membuat siapapun usernya ingin untuk memainkan komponen yang ada (termasuk saya) sehingga unsur gamification secara tidak langsung bisa dirasakan. Yang jadi pertanyaan adalah, mengapa saat ini kita masih belum melihat aktivitas masif implementasi neumorphism ini pada produk real? Meskipun neumorphism membawa efek visual yang bagus, ternyata mengandung kelemahan yang krusial yaitu usability.

Usability yang diusung oleh neumorphism sangat bergantung pada niche tertentu. Margin warna yang sangat kecil dan kontras membuat neumorphisme bekerja dengan tingkat saturasi yang rendah. Ditambah juga terlalu banyak shadow dan textur membuatnya tidak cocok untuk aplikasi yang tergolong kompleks. Sehingga ketika diaplikasikan pada contohnya, aplikasi bisnis, mengharuskan nuansa formal dan neumorphism gagal diimplementasi. Sepertinya neumorphisme hanya cocok untuk beberapa aplikasi yang memiliki idealisme yang berhubungan dengan kreatifitas, out of the box, dan simplicity.

Beberapa Issue

Button (tombol) adalah salah satu komponen terpenting dalam user interface. Tanpa adanya button, user akan kesulitan untuk melakukan aksi trigger aktivitas dalam aplikasi. Maka dari itu, suatu button harus terlihat mencolok dan mengandung sedikiti interaksi untuk memberitahu user perubahan status dari suatu button. Meskipun hanya sepersekian detik, perubahan status dan warna sangat krusial karena bersifat komunikatif kepada user. Ketika button menggunakan style neumorphisme, sulit untuk memberi perubahan status pada button karena terhalang dengan margin tipis dalam efek bayangan. Beberapa designer mencoba menjawab permasalahan dengan tetap memberikan style neumorphism hanya pada cards namun mengunakan tombol classic tanpa sentuhan neumorphism.

My Thoughts on Neumorphism - Frank Huang - Medium — Neumorphism Button

Hal ini berlaku pula dengan prinsip CTA (Call to action). Sebagaimana diketahui, bahwa CTA harus mengandung warna yang mencolok sehingga mempersuasi user untuk menekan button tersebut. Dengan neumorphism, lagi-lagi ada batasan warna sehingga user tidak bisa menemukan CTA dengan mudah.

NEUMORPHISM TUTORIAL by Julia Shagofferova on Dribbble — Contoh Implementasi CTA pada Neumorphism

Issue berikutnya berhubugan dengan aksesibilitas. Melanjutkan perihal implementasi neumorphism yang bergantung dengan niche, neumorphism menyulitkan beberapa pengguna yang memiliki gangguan penglihatan khsusunya pada beberapa orang dewasa dan telah berumur. Neumorphisme adalah tentang UI yang lembut tetapi jika digunakan secara berlebihan, membuat user mudah untuk terdistraksi. Ditambah lagi apabila user menggunakan layar kualitas rendah sehingga menghilangkan detail dari neumorphism itu sendiri.

neumorphism : UI_Design — Beberapa Pihak Tidak Setuju dengan Neumorphism

Kesimpulan

Komunitas pada Dribbble, instagram, medium, hingga reddit, beberapa menganggap bahwa neumorphism adalah pengganti flat design. Hal tersebut tidak sepenuhnya benar, karena lebih tepatnya adalah design yang bersifat tambahan saja. Sama seperti halnya trend gradient yang terjadi beberapa waktu belakangan. Banyak yang bereaksi dan menggadang-gadang bahwa gradient akan menggantikan flat design. Katika gradient diimplementasi sedemikian rupa dan diterapkan untuk mengcover seluruh layar, ternyata hasilnya sangat buruk. Pada akhirnya, gradient hanya sebagai pelengkap dan perfectly fits pada UI design yang spesifik pada beberapa komponen saja.

Gelombang neumorphism untuk saat ini masih fase permulaan. Komunitas designer terus bereksperimen untuk menghasilkan neumorphism yang benar-benar bisa cocok diaplikasikan pada real produk. Sebagai designer, Anda bisa ikut berkontribusi melakukan eksperimen. Sebagai non designer khususnya developer, tetap ikuti dan amati trend neumorphism ini karena telah banyak bermunculan tools generator untuk membuat neumorphism secara mudah. Walaupun dalam waktu mendatang neumorphism gagal untuk benar-benar diimplementasikan, kita semua tetap bisa mengambil pelajaran dan menjadi bagian dari fenomena ini.