CategoriesProgramming

Mengenal Bahasa Pemrograman Elm

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

Beberapa kelebihan Elm Sebagai Berikut:

1. No Runtime Exceptions.

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:
Command line untuk Install Package Elm

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

Previous Elm versions

Tetris

Breakout

Pong

Mario

Tic Tac Toe

Space Invaders

Memory

Asteroid

Pac Man

Minesweeper

Roguelike

Classic Card & Board Game

Real-Time Strategy

Puzzle Games

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

Miscellaneous

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

 
CategoriesProgramming

Framework Performance untuk Developer

Performance adalah pilihan bagi pengguna framework, di artikel kali ini saya akan menyajikan beberapa pilihan yang mungkin bisa anda gunakan untuk menentukan framework yang akan anda gunakan.

Realworld adalah salah satu repository yang menyediakan perbandingan pengguna asli dari suatu framework. Realword sudah mendapat binta sebanya 45.2 K dan tentunya masih akan terus bertambah untuk meningkatkan performance sharing to sharing developer. Dari sini akan terlihat mana framework backend maupun frontend yang sering digunakan, juga tentunya bisa digunakan sebagai acuan untuk menentukan envorinment adalam suatu system.

Berikut Peringkat Pengguna asli Frontend.

Sorted by popularity on Sun Jul 19 2020

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

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.

Semakin Tinggi Semakin Bagus

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 Semakin Bagus

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.

Semakin Kecil Semakin Bagus

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
CategoriesInternetLinuxProgramming

Menganal OpenStack untuk Cloud Computing

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

Gambaran Service dari OpenStack

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.

CategoriesProgramming

Efisiensi proses fetching data dengan GraphQl

Apa itu GraphQl?

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

Alur poses penggunaan Schema GraphQl

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?

Pandangan alur proses data di GraphQl
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

CategoriesProgramming

Memahami Synchronous dan Asynchronous dalam Pemrograman

         Pertama kali saya terjun di dunia kerja langsung menghadapi banyak materi yang asing. Namun materi pertama dan selalu saya gunakan sampai sekarang adalah suatu proses menjalankan aplikasi dan proses jalannya secara client dan server side, hal utama yang menurut saya perlu dipelajari adalah  Synchronus dan Asynchronus. Materi ini menurut saya sangat diperlukan untuk dasar pemrograman (walaupun saat kuliah tidak pernah ada :3). Walaupun secara tidak langsung hampir semua Web Developers  menggunakannya namun perlu Pengetahuan lebih dalam karena proses ini sederhana dan berdampak ke semua aspek kehidupan program Anda.

Apakah yang di maksud dengan Synchronouse?

Synchronous adalah proses jalannya program secara sequential , disini yang dimaksud sequential ada berdasarkan antrian ekseskusi program. Pada dasarnya semua Bahasa pemrograman menggunakan Asynchronouse terutama PHP.

Cotoh Synchronous di Bahasa Perograman PHP:

beri nama file synchronous.php
<?php
$now = date(‘Y-m-d’);
// antrian 1
echo $now.‘ |’;
$yesterday = date(‘Y-m-d’,strtotime(‘-1 days’));
// antrian 2
echo $yesterday.‘ |’;
$week = date(‘Y-m-d’,strtotime(‘-1 week’));
// antrian 3
echo $week.‘ |’;
?>
Hasil Eksekusi:
Hasil eksekusi file php sync
Penjelasan: Pada saat file synchronouse.php dieksekusi maka proses nya adalah membaca antrian 1 terlebih dahulu kemudian antrian 2 dan terakhir adalah antrian 3.

Apakah yang dimaksud dengan Asynchronous?

Asynchronous adalah proses jalannya program bisa dilakukan secara bersamaan tanpa harus menunggu proses antrian. Synchronous merupakan bagian dari Asynchronous (1 antrian) dimana proses akan dieksekusi secara bersamaan dan untuk hasil tergantung lama proses suatu fungsi synchronous . Asynchronouse hampir disemua Bahasa pemrograman ada namun untuk PHP masih belum ada. PHP sebagai server side hanya menyediakan synchronous namun bisanya di WEB Developers tetap digunakan namun menggunakan AJAX (Asynchronous Javascript And XML) untuk proses Asynchronouse.

Contoh Asynchronouse PHP + AJAX

Buat file HTML+CSS+AJAX dengan nama test.html

<style type=“text/css”>
  #sync
{
  width100px;
  height100px;
  backgroundred;
  -moz-border-radius50px;
  -webkit-border-radius50px;
  border-radius50px;
  float:left;
  margin:5px;
}
.one
{
  line-height100px;
  color:white;
  margin-left:30px;
  font-size:25px;
}
.two
{
  line-height100px;
  color:white;
  margin-left:30px;
  font-size:25px;
}
</style>
<div id=“sync”><span class=“one”>0</span></div>
<div id=“sync”><span class=“two”>0</span></div>
<br />
<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js” 
type=“text/javascript”></script>
<script type=“text/javascript”>
  $.ajax({
        url: ‘syncronous.php?1’,
        type: “GET”,
        success: function(result)
        {
          $(‘.one’).html(result);
          $(‘.one’).each(function () {
              $(this).prop(‘Counter’,0).animate({
                  Counter: $(this).text()
              }, {
                  duration: 4000,
                  easing: ‘swing’,
                  step: function (now) {
                      $(this).text(Math.ceil(now));
                  }
              });
          });
        }
      });
  $.ajax({
        url: ‘syncronous.php?2’,
        type: “GET”,
        success: function(result)
        {
          $(‘.two’).html(result);
          $(‘.two’).each(function () {
              $(this).prop(‘Counter’,0).animate({
                  Counter: $(this).text()
              }, {
                  duration: 4000,
                  easing: ‘swing’,
                  step: function (now) {
                      $(this).text(Math.ceil(now));
                  }
              });
          });
        }
      });
  
</script>
Buat file PHP dengan nama syncronous.php
<?php
if(isset($_GET[“1”])){
    
    echo json_encode(20000);
if(isset($_GET[“2”])){
    
    echo json_encode(40000);
}
?>
 Hasil Eksekusi:
Nilai terus berjalan Secara bersamaan tanpa ada Antrian
Penjelasan: Counter Nilai terus berjalan tanpa  ada antrian.
Berikut Source Code Link Gitlab apabila anda ingin mencoba: Link

Contoh Asynchronous di NODE JS

Di artikel saya sebelumnya pernah membahas chat menggunakan Socket.io dimana basic dari Realtime Chat dengan socket.IO ada Synchronous. Silahkan lihat di Artikel saya berikut : Realtime Chat dengan Html, Javascript dan Socket.io

Note: Synchronous  dan Asynchronous saling berkisambungan jadi apabila anda ingin lebih detail bisa Anda pahami lebih dalam. Kegunakan juga sesuai kebutuhan.

Semangat Belajar!!
Wassalamualaikum..

CategoriesProgramming

Mengenal Svelte JS

         Beberapa minggu yang lalu saya mulai belajar Svelte JS. Mengapa saya belajar Svelte JS, ini dikarenakan saya kebiasaan hunting library atau framework baru  dan tolak ukur saya Fremework atau library yang mendapat bintang banyak di github maka dilihat dari segi ekosistemnya akan bagus pula. Svelte JS mendapat 33.7 Ribu  Bintang dalam kurun waktu 3 Tahun di thaun 2020 dan akan terus naik setiap harinya. Dari segi pengertian dan penggunaan Hampir sama dengan React dan Vue Js yang lebih dahulu rilis dengan usia 6 tahun di tahun 2020. Svelte JS memberikan warna Baru. Salah satu perbedaan jelas Svelte JS dengan React Js dan Vue JS adalah Tanpa menggunakan Virtual DOM. 

Tokopedia juga menggunaan Svelte JS untuk aplikasi yang mereka gunakan, ada beberapa alas an mengapa mereka menggunaan Svelte JS silakan baca Artikel berikut: http://shorturl.at/elrV4 .

Tokopedia tertera sebagai salah satu platform yang menggunakan Svelte

Mari kita explore Svelte JS:

1.  Apa itu Svelte JS.

Svelte adalah cara baru untuk membangun user interface dengan cepat. Sementara framework seperti React dan Vue melakukan semua task mereka di browser,   Namun Svelte melakukan Compile Step secara berkala sehingga tidak semua Task langsung di load di Browser.

2.  Menulis Kode Lebih Sedikit

Dari segi penulisan Svelte JS lebih pendek dibandingkan React dan Vue. Berikut contoh Aplikasi dan codenya:

Aplikasi yang dibuat akan tampil seperti berikut:

Aplikasi dari hasil code

Script code aplikasi tersebut di Svelte sebagai berikut:

Script Code Svelte

Script Code di React sebagai berikut:

Script code di React

Terakhir Script code di Vue sebagai berikut:

Script code di Vue

Terlihat bukan perbedaannya dari segi panjang Script Code yang dibuat untuk aplikasi sederhana tersebut, Svelte lebih seditkit dibandingkan dengan React dan Vue.

Untuk lebih jelasnya silakah Baca di link berikut: https://svelte.dev/blog/write-less-code

3. Tidak menggunakan Virtual DOM

DOM merupakan singkatan dari Document Object Model. Artinya, dokumen (HTML) yang dimodelkan dalam sebuah objek. Objek dari dokumen ini menyediakan sekumpulan fungsi dan atribut/data yang bisa kita manfaatkan dalam membuat program Javascript. Virtual DOM memang lebih cepat dari pada Real DOM. namun mengan Svelte dikatakan lebih cepat walau tanpa menggunakan DOM? silahkan baca di sini : https://svelte.dev/blog/virtual-dom-is-pure-overhead

4. Sangat Reaktif

Yang dimaksud dengan reactif adalah tidak diperlukan banyak library untuk proses di javascript. Kebalikannya Svelte klaim memudahkan fungsi dari javascript. Untuk lebih jelasnya silakan baca di : https://svelte.dev/blog/svelte-3-rethinking-reactivity

 

Lebih dalam lagi mari kita coba ulik2 untuk beberapa fungsionalitas namun disini saya akan membahas contoh script tentang : Declaration, Reactivity, Props, Logic, dan Event.

Dikarenakan ini masih awal saya akan membahas Script menggunakan REPL dari Svelte JS.

Declaration

Pendeklarasian varial dan pemanggilan variable di Svelte mudah seperti di Javascript namun ingat tanpa DOM atau menggunaan innerHTML sehingga script menjadi lebih Pendek. Berikut contohnya:

Contoh Deklarasi Svelte JS

Reactivity

Reactivity disini mengunakan huum aksi reaksi di javascript kita biasa menggunakan onclick=”myFunction()” berbeda dan lebih easy dan lebih pendek pendeklarasian onclick di Svelte. Silahkan lihat Contoh berikut:

Contoh Reactivity

Props

Props adalah property ata variable yang berasal dari luar class atau parent. Berikut contoh untuk props di Svelte:

Contoh untuk Props Svelte

Logic

Pada dasarnya semua logic sama namun perbedaan hanya di penulisan. Berikut penulisan Logic untuk Svelte:

Logic If

{#if args}
    <p>{content}</p>
{/if}

Logic If-Else

{#if args}
    <p>{content}</p>
{:else}
    <p>{content else}</p>
{/if}

Logic Else-If

 
 
{#if x > 10}   
 <p>{content}</p>
{:else if 5 > x}
    <p>{content}</p>
{:else}
    <p>{content}</p>
{/if}

Logic Looping

<script>
    let cats = [
        { id: ‘J—aiyznGQ’name: ‘Keyboard Cat’ },
        { id: ‘z_AbfPXTKms’name: ‘Maru’ },
        { id: ‘OUtn3pvWmpg’name: ‘Henri The Existential Cat’ }
    ];
</script>
{#each cats as { id, name }, i}
    <li><a target=“_blank” href=“https://www.youtube.com/watch?v={id}”>
        {i + 1}: {name}
    </a></li>
{/each}
 

Event

Event digunakan untuk melakukan suatu perintah. Event di Svelte dibuat cukup sederhana berikut contoh untuk onclick dan onMousemove:

Contoh Event Svelte

Sebenarnya masih banyak yang perlu dibahas atau dipelajari di Svelte JS ini namun menurut saya Artikel ini cukup untuk mengenal Svelte JS sesuai dengan judulnya. Untuk developer yang sudah bosan dengan React dan Vue saya sarankan mempelajari Svelte karena menurut saya pribadi cukup berguna untuk PWA (Progressive Web Apps) dan mudah untuk dipelajari. Karena usia masih 3 tahun di 2020 masih belum banyak yang mengetahui tentang Framework Svelte ini. Sejujurnya saat saya pelajari React dan Vue diawal lumayan kesulitan namun untuk Svelte ini lebih mudah dan memberikan perbandingan hasil yang cukup besar. Semoga bermanfaat. 

Wassalamualaikum

CategoriesInternetProgramming

Capture API Endpoint yang jalan di Aplikasi Smart Phone menggunakan Postman

API Endpoint hampir pasti digunakan di Aplikasi Android maupun IOS, tentunya misal pembaca adalah program akan penasaran apakah API yang dibuat kita aman dan apakah mungkin ter ekspose. Jawabannya iya sangat mungkin untuk di capture. Kali ini kita akan membahas tuntas salah satu cara untuk Capture atau sniffing API yang jalan di Aplikasi Smart Phone menggunakan Postman. Cara ini bisa dilakukan untuk Optimasi API yang kita Buat untuk menghindari data leaks. Di akhir akan saya jelaskan bagaimana cara untuk menghindari data leaks.

Berikut pengetahuan Dasar sebelum kita Bermain main lebih dalam:

1.  API Endpoint.

API(Application Programming Interface) merupakan sekumpulan (method, fungsi atau URL endpoint) yang digunakan untuk mengembangkan aplikasi lebih dari satu platform yang berbeda. Lalu apa kegunaan API ini? dengan menggunakan API maka kita dapat mengunakan sumber daya dari aplikasi lain tanpa perlu mengetahui bagaimana aplikasi itu dibuat. 

2. Postman.

POSTMAN adalah sebuah aplikasi (berupa plugin) untuk browser chrome, fungsinya adalah sebagai REST Client atau istilahnya adalah aplikasi yang digunakan untuk melakukan uji coba REST API yang telah kita buat. silakan download di link berikut: https://www.postman.com/downloads/

3. Proxy.

Proxy server (peladen proxy) adalah sebuah komputer server atau program komputer yang dapat bertindak sebagai komputer lainnya untuk melakukan request terhadap content dari Internet atau intranet. disini yang akan kita gunaan sebagai proxy server adalah PC.

 

Ayo kita Praktikan untuk lebih mudahnya:

Keterangan :  Pastikan menyiapkan PC dan Smart Phone.  PC dan Smart Phone harus dalam satu Jaringan. PC sebagai alat Capture sedangkan Smart Phone yang di Capture.

  1. Setting Postman klik tombol Capture Request and Cookies.
    Menu untuk Capture Request and Cookies
    Setting seperti Gambar berikut:
    Setting Capture requests an cookies Postman
  2.  Cek terlebih dahulu IP Address PC kita berapa, IP ini yang akan digunakan sebagai Hostname di proxy Smart Phone saya yaitu : 192.168.53.234
    IP Address PC
  3.   Setting Proxy di Smart Phone dengan menggunakan Hostname / IP PC kita dan masukan Port yang sudah kita setting di Postman(saya menggunakan Smart Phone Vivo Y31).
    Setting Proxy di Smart Phone
  4. Setting selesai. Sekarang waktunya Capture API, saya ingin Capture API dari Aplikasi KAI Access, buka aplikasi KAI access.
    Aplikasi KAI Access
  5.            Setelah dibuka dan melakukan beberapa proses di Aplikasi KAI Access, maka semua request akan ter Capture di Postman lengkap dengan URL, Header, Request dan response.

    Hasil Capture API saya taruh di History.
    Salah satu API Endpoint yang saya dapat dari Capturing.

Kesimpulan:

Ini adalah salah satu cara yang saya  gunakan untuk mencari celah / bug dari suatu aplikasi karena kebanyakan aplikasi API tidak ter bundle atau tidak double encrypt dan tidak ada ssl security sehingga sangat mudah data leaks atau rusak, tentu environment dasar dari sisi backend diperlukan untuk memperkuat suatu system. Salah satu cara preventif dasar adalah pastikan URL End Point API menggunakan ssl security dan pastikan data public dan private dibedakan dengan auth.

Semoga Bermanfaat

Wasallamualaikum.

CategoriesProgramming

Native REST API Sederhana menggunakan PHP untuk Email Real Checker

Email Real Checker adalah salah satu cara untuk menghindari apakah Email pengguna Real atau tidak sebelum kita kirim menggunakan Commercial Email provider. Salah satu masalah yang muncul apabila email yang kita kirim baik secara Transactional atau Campaign adalah Tidak ter Delivered dan Bouncing, sehingga kita sebagai pengguna akan terkena dampaknya yaitu suspend.  Kali ini kita akan membahas dan praktikkan Native REST API Email Checker menggunakan PHP. 

Berikut  Pengetahuan dasar sebelum kita coding:

1.       MX Record

           MX Record merupakan salah satu tipe record untuk menyatakan kemana dan bagaimana e-mail harus diarahkan. Untuk diarahkan tentu apabila suatu DNS atau hostname ter recrd maka akan vali dan sebaliknya. Apa Bisa Pointing MX Record menggunakan IP Address? Pointing mx record harus menggunakan hostname dan tidak bisa menggunakan ip address, tapi bagaimana caranya jika mx ingin dipointing ke ip tertentu? Caranya tentu saja harus membuat hostname dengan cara membuat record dns misalnya record mail dengan type A dan di pointing ke ip tersebut. Selanjutnya hostname yang telah didapatkan di test apakah sudah resolve ke ip yang tepat dan kemudian di setting pada mx recordnya.

           2. REST API

           REST (REpresentational State Transfer) merupakan standar arsitektur komunikasi berbasis web yang sering diterapkan dalam pengembangan layanan berbasis web. Umumnya menggunakan HTTP (Hypertext Transfer Protocol) sebagai protocol untuk komunikasi data. Pada arsitektur REST, REST server menyediakan resources (sumber daya/data) dan REST client mengakses dan menampilkan resource tersebut untuk penggunaan selanjutnya. Setiap resource diidentifikasi oleh URIs (Universal Resource Identifiers) atau global ID. Resource tersebut direpresentasikan dalam bentuk format teks, JSON atau XML.

 

Mari kita praktikan:

1. Buat Script dengan nama getStatusEmail.php dan simpan di directory XAMPP atau apache yg anda gunakan dan Run Apachenya. di script ada commant silahkan Anda pelajari script saya ini. :v

<?php
//Get Request untuk dari JSON rubah dahulu, disini tidak perlu api Key Dll karena takde auth
$request = (arrayjson_decode(file_get_contents(‘php://input’), TRUE);
//Function untuk Check email Domain apakah sudah terdaftar atau disebut dengan Mx Record.
function mxrecordValidate($email, $domain){
    $arr = dns_get_record($domain, DNS_MX);
    if(isset($arr[0]) && $arr[0][‘host’] == $domain && !empty($arr[0][‘target’])){
        return $arr[0][“target”];
    }
}
// Check GET Request sudah benar atau belum
if(isset($request[“resource”])){
    //Kita pecah dalam bentuk Array
    foreach($request[“resource”] as $k=>$item){
        //identifikasi Email
        $email =$request[“resource”][$k][“email”];
        //pecah domain dan email name
        $domain = substr(strrchr($email“@”),1);
        //proses apakah email Valid atau Invalid dengan menjalankan fungsi mxrecordValidate.
        if(mxrecordValidate($email$domain)){
            //check dns Record
            $data = dns_get_record($domain, DNS_MX);
            //masukan hasil ke Response
            foreach($data as $key1){
                $response[“resource”][$k][“host”]=$key1[‘host’] ;
                $response[“resource”][$k][“class”]=$key1[‘class’] ;
                $response[“resource”][$k][“ttl”]=$key1[‘ttl’] ;
                $response[“resource”][$k][“type”]=$key1[‘type’] ;
                $response[“resource”][$k][“pri”]=$key1[‘pri’] ;
                $response[“resource”][$k][“target”]=$key1[‘target’] ;
                $response[“resource”][$k][“target”]=gethostbyname($key1[‘target’]) ;
            }
            //Status untuk Valid
            $response[“resource”][$k][“email”] = $request[“resource”][$k][“email”];
            $response[“resource”][$k][“status”] = ‘Valid Email’;
        } else {
            //Status untuk Invalid
            $response[“resource”][$k][“email”] = $request[“resource”][$k][“email”];
            $response[“resource”][$k][“status”] = ‘Invalid Email’;
        }
    }
else {
    //Berikan Error untuk orang yang input sembarangan, dengan status 500 Internal Server 
Error.
    header(‘HTTP/1.1 500 Internal Server Error’);
    //Response untuk Error.
    $response[“message”] = “Error fix your Brain.”;
}

 

header(‘Content-Type: application/json’);
$json_string = json_encode($response, JSON_PRETTY_PRINT);
die($json_string);
?>

2.   Testing Setelah itu silakan menggunakan POSTMAN atau sebagai REST Client Lain yang familiar bagi Anda.

  • Pilih Method POST, input path http://localhost/Email%20Checker/getStatusEmail.php . Pakai header Content-Type => application/json.

  • Masukan Body Request atau email yang akan kita cek, jangan lupa pakai Body Request JSON.
  • Berikut Respon atau hasil dari Email Checker.

Untuk Code silakan clone Git Repository: https://gitlab.com/Sendok/php-native-rest-api-email-checker.git

NOTE: untuk Real Email Checker ini kemungkinan berhasil tidaklah Persen. Dikarenakan ini hanya akan check email Checker, untuk kemungkinan 100 Persennya masih dalam riset (selama ini masih harus PING domain dan harus ada allow dari host, apabila tidak ada allow maka akan failed berarti masih belum 100%).  Mungkin untuk Next Artikel bisa coba untuk PING Email menggunakan PHP.

Wasalamualaikum..

CategoriesProgramming

Realtime Chat dengan Html, Javascript dan Socket.io

Realtime Chat atau Realtime Data sering disebut dalam dunia programing adalah suatu hal akan sering digunakan dan sangat diperlukan. Dalam kesempatan ini kita akan membahas dan langsung mem praktik kan Realtime Data dengan Chat App.

Senjata yang akan kita gunakan adalah:

1. HTML

     Sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web. Platform umum yang sering digunakan sehingga akan mudah untuk di praktik kan.

2. Javascript

     Javascript adalah bahasa pemrograman tingkat tinggi dan dinamis. JavaScript biasanya digunakan untuk olah data secara Client ke server namun juga bisa sebagai server ke client. Disini Javascript akan berfungsi GET POST data dari client atau HTML.

3. Socket.io

Apa itu Socket.Io?
Socket.io ada suatu library dari Node.JS yang berfungsi untuk menjembatani realtime data, Namun jangan salah socket.io tidak hanya bisa digunakan di Node.js. Socket.io bisa digunakan di multiplatform dan yang Paling penting Gratis tanpa Batasan jumlah / Unlimited.

Silahkan Berkenalan dengan Socket.io Disini : https://socket.io/

Ayo kita praktikan secara langsung:

1. Buat file index.html.

2. Initialisasi dahulu package.json di terminal.

   $npm init

3. Install socket.io dalam depedencies

$ npm i socket.io

4. install nodemon dalam dependencies, nodemon berfungsi untuk menjalankan Server socket.io.

$npm i --save-dev nodemon

5. Set devStart di package.json untuk menjalankan server nodemon.

"devStart": "nodemon server.js"
{
  “name”“socket.io”,
  “version”“1.0.0”,
  “description”“”,
  “main”“index.js”,
  “scripts”: {
    “devStart”“nodemon server.js”
  },
  “author”“Dhendik”,
  “license”“ISC”,
  “dependencies”: {
    “socket.io”“^2.3.0”
  },
  “devDependencies”: {
    “nodemon”“^2.0.3”
  }
}

 

6. Coding script di Index.html.

<!DOCTYPE html>
<html lang=“en”>
<head>
  <meta charset=“UTF-8”>
  <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
  <meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
  <title>Realtime Chat</title>
  <script defer src=“http://localhost:3000/socket.io/socket.io.js”></script>
  <script defer src=“client.js”></script>
  <style>
    body {
      padding0;
      margin0;
      displayflex;
      justify-contentcenter;
    }
    #message-container {
      width80%;
      max-width1200px;
    }
    #message-container div {
      background-color#CCC;
      padding5px;
    }
    #message-container div:nth-child(2n) {
      background-color#FFF;
    }
    #send-container {
      positionfixed;
      padding-bottom30px;
      bottom0;
      background-colorwhite;
      max-width1200px;
      width80%;
      displayflex;
    }
    #message-input {
      flex-grow1;
    }
  </style>
</head>
<body>
  <div id=“message-container”></div>
  <form id=“send-container”>
    <input type=“text” id=“message-input”>
    <button type=“submit” id=“send-button”>Send</button>
  </form>
</body>
</html>

 

7. Buat Server dahulu server.js untuk initialisasi socket.io.

const io = require(‘socket.io’)(3000)
const users = {}
// Register User yang baru Masuk ke server dan melakukan Join
io.on(‘connection’socket => {
  socket.on(‘new-user’name => {
    users[socket.id] = name
    socket.broadcast.emit(‘user-connected’name)
  })
  socket.on(‘send-chat-message’message => {
    socket.broadcast.emit(‘chat-message’,
message: messagename: users[socket.id] })
  })
  socket.on(‘disconnect’, () => {
    socket.broadcast.emit(‘user-disconnected’users[socket.id])
    delete users[socket.id]
  })
})
 

 

8. Buat client dahulu client.js disini menggunakan Javascript untuk GET POST data di HTML.

const socket = io(‘http://localhost:3000’)
const messageContainer = document.getElementById(‘message-container’)
const messageForm = document.getElementById(‘send-container’)
const messageInput = document.getElementById(‘message-input’)
//Client script untuk register User Baru
const name = prompt(‘What is your name?’)
appendMessage(‘You joined’)
socket.emit(‘new-user’name)
//Chat message client / User
socket.on(‘chat-message’data => {
  appendMessage(`${data.name}${data.message}`)
})
//Chat message pertanda user baru join
socket.on(‘user-connected’name => {
  appendMessage(`${name} connected`)
})
//Chat Message pertanda User disconnected
socket.on(‘user-disconnected’name => {
  appendMessage(`${name} disconnected`)
})
//Event post untuk Submit Message
messageForm.addEventListener(‘submit’e => {
  e.preventDefault()
  const message = messageInput.value
  appendMessage(`You: ${message}`)
  socket.emit(‘send-chat-message’message)
  messageInput.value = 
})
//Event get misal ada message Baru dari User Lain 
function appendMessage(message) {
  const messageElement = document.createElement(‘div’)
  messageElement.innerText = message
  messageContainer.append(messageElement)
}

 

9. Jalankan Server socket.io

$npm run devStart

10. Berikut Hasilnya.  Gambar dibawah menunjukan simulasi chat dari 2 User yang berbeda dan bisa Realtime.

Gmbar ini menunjukan simulasi chat dari 2 User yang berbeda

Jika ingin mencoba sendiri Anda bisa Clone Git dan ikuti arahannya: https://gitlab.com/Sendok/realtimechat.git

Sekian artikel yg bisa dibuat semoga bermanfaat.

Wassalamualaikum.