CategoriesProgrammingUX Design

Meningkatkan Kolaborasi antara Designer dan Developer

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

CategoriesProgramming

Fast Track Jadi Mobile Developer

Halo teman-teman! Terimakasih sudah membuka artikel ini 😊

So, artikel ini saya tulis sebagai media literasi dan dokumentasi dari event webinar yang diadakan oleh Kopertip Indonesia pada tanggal 14 Juni 2020.

Jadi, Bagaimana cara cepat untuk berkarir sebagai Mobile Developer? Sebelum menjawab hal tersebut, saya akan menjelaskan kenapa harus berkarir sebagai Mobile Developer. Saya menghighlight beberapa hal penting yang terdapat pada profesi ini, yaitu:

[SATU]: Trend Statistic

Saat ini total dari perusahaan terdaftar pada sensus ekonomi 2016 berjumlah lebih dari 23 juta perusahaan yang terdiri dari UMK dan UMB. Selain itu juga terjadi pertambahan sekitar lebih dari 2000 perusahaan baru setiap tahunya. Perubahan pola administrasi dan bisnis pada perusahaan juga akan berubah seiring berjalanya waktu. Untuk mengubah pola tersebut Indonesia memerlukan sumber daya manusia yang banyak.

Untuk memenuhi target tersebut, saat ini pemerintah dan berbagai perusahaan swasta menyelengarakan berbagai program untuk memenuhi kebutuhan mobile programmer di Indonesia. Diantara program tersebut adalah menyelenggarakan bootcamp scholarship, workshop, online course scholarship, dan berbagai program lain. Seperti contoh: Program Digitalent by Kominfo, IDCamp by Indoosat Ooredo, Sholarship Internship by Apple Developer Academy.

[DUA]: Salary

Payscale merangkum beberapa hasil survey terhadap gaji developer, berikut hasil survey untuk rata-rata gaji dari android developer dan iOS developer di Indonesia.

resource: www.payscale.com

Angka tersebut belum menjelaskan angka pasti nilai gaji di seluruh wilayah Indonesia. Teman-teman bisa mengecek lebih detail pada qr code yang telah saya cantumkan atau pada link berikut:

Survey Android Survey iOS

[TIGA]: Interest

Saya pribadi menerapkan konsep Ikigai yang berkaitan dengan beberapa aspek pada hidup. Hal tersebut mendukung saya agar dapat mendalami lebih dalam tentang apa yang saya suka, apa yang saya bisa, apa yang dunia butuhkan, dan apa yang dunia mau membayar untuk mendapatkan hal tersebut.

resource: Ikigai, Hector Gracia and Francesc Miralles

Saya mendapatkan bahwa Mobile Developer menjadi profesi yang menarik saya untuk lebih mendalaminya.

[EMPAT]: Learning Path

Selain beberapa hal diatas, ada juga hal penting yang dapat mempercepat proses kita untuk menjadi Mobile Developer yaitu mengikuti Learning Path atau Roadmap yang dibutuhkan. Dengan memiliki learning path tersebut akan mempermudah dan mempercepat kita untuk mempelajari hal-hal yang dibutuhkan di dunia industri sebagai Mobile Developer.

Berikut saya bagikan learning path yang juga saya gunakan dalam proses saya untuk menjadi Mobile Developer.

LEARNING PATH ANDROID by Ana Coimbra dan Diego Cabral

LEARNING PATH IOS by Bohdan Orlov

[TIPS]

Sebagai developer tentunya kita harus dapat memecahkan sebuah masalah yang kita alami, nah untuk memecahkan masalah tersebut kita memerlukan proses pembelajaran dan best-practice untuk menyelesaikanya. Berikut beberapa tips yang dapat teman-teman terapkan untuk mendukung teman-teman menjadi Mobile Developer:

  1. Be Stackoverflow buddy!
  2. Join Bootcamp or Courses
  3. Find match Community!
  4. Remember, 10.000 hours rules

Berikut saya bagikan beberapa bootcamp dan course yang dapat membantu teman-teman dalam belajar sebagai Mobile Developer:

Jika kalian membutuhkan bantuan untuk belajar menjadi Mobile Developer. Feel free untuk menghubungi saya di @nandamochammad

That's All! See you on the next line!

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

Bikin HTTP Request lebih cepat dengan Generic Class!

Halo teman-teman! Saya menulis artikel ini untuk membantu developer iOS lain yang pada artikel lalu sempat bertanya langsung ke saya cara membuat Generic Class untuk HTTP Request 😉.

Sedikit Disclaimer❗️, Generic Class bukan hanya ditujukan untuk membuat HTTP Request / Networking saja. Tapi bisa untuk semua fungsi dengan input yang generic/umum. Silakan baca dokumentasi lebih lengkap disini.

Generics — The Swift Programming Language (Swift 5.2)

Networking sudah menjadi sesuatu yang paling sering dilakukan pada Mobile Apps, khususnya pada iOS Developement. Ya, you know right gimana Mobile Apps tanpa ada networking.

Menggunakan Generic Class ini gambaran umumnya adalah membuat box yang dapat menyimpan dan menjaga semua inputnya. Dengan batasan sesuai dengan ukuran box nya dan tidak merusak komposisi box. Bagaimana? Sedikit lebih jelas bukan.

So, Let’s see how the code works!

Untuk networking akan menggunakan Alamofire😁, untuk kalian pengguna Moya atau URLSession bisa menyesuaikan .

  • Pada dasarnya ini mirip class dengan function seperti biasa

Yang membuat berbeda adalah simbol <T>. simbol tersebut adalah simbol generic yang mengindikasikan bahwa fungsi tersebut merupakan fungsi generic.

  • Selanjutnya, tuliskan kode request seperti biasa
  • And yes! fungsi generic kita selesai! sangat mudah kan? Eits, jangan lupa untuk merubah fungsi menjadi static function agar fungsi dapat diakses tanpa pembuatan objek kelas terlebih dahulu.
  • Bagaimana cara menggunakan kelas ini? cara menggunakan nya cukup mudah

Yap! Hanya seperti itu cara menggunakan nya. Kalian tidak perlu baris kode untuk setiap kali request. Dengan menggunakan Generic Class untuk networking, dapat memangkas kode request hingga 30% . Tentunya sangat membantu untuk proses development kalian.

Tapi, jika kalian membutuhkan bantuan untuk pembuatan fungsinya. Feel free untuk menghubungi saya di @nandamochammad

That's All! See you on the next line!
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

CategoriesProgramming

Daftar Akun Apple Developer? Mudah!

Halo teman-teman, terimakasih telah membuka artikel ini. Well, kenapa saya menulis cara mendaftar akun Apple Developer ini karena saya baru memperbarui akun developer saya dan selain itu akun developer adalah syarat sah agar kita bisa belajar Apple Development lebih deep lagi 🔥.

Mungkin banyak yang bertanya, emang kenapa harus mendaftar akun developer? Berbeda dengan pemrograman mobile sebelah yang semua fitur developmentnya dapat diakses, Apple sangat selektif untuk aplikasi yang di publish begitu juga dengan developernya 😎. Dengan akun developer kemudahan yang paling bisa dengan mudah rasakan selain dapat mempublish di Apps Store adalah kebebasan akses di semua development support apple seperti notification, CloudKit, CoreML, ARKit, HealthKit, SiriKit, dan semua development stuff milik apple. Sehingga dalam satu environment kita cukup menggunakan produk apple saja.

Jadi, bagaimana cara mendaftar nya?

Oh iya, saya akan menuliskan cara mendaftar untuk Individual Account ya, bukan untuk company 😉 hanya membutuhkan kartu debit/kredit (untuk payment) dan kartu identitas (hanya jika diminta)

  • [SATU]: Silakan buka registration page pada halaman ini: https://developer.apple.com/enroll. Jika kamu sudah memiliki Apple ID silakan langsung Sign In seperti dibawah ini
  • [DUA]: Periksa Agreement Apple, centang kotak yang mengonfirmasi bahwa kalian telah membacanya dan klik ‘Submit‘.
  • [TIGA]: Konfirmasikan bahwa semua informasi yang kalian masukkan sudah benar (email, nama, lokasi), lalu pilih entitas. Ingat! Kita mendaftar untuk Individual Account
  • [EMPAT]: Isi semua informasi yang diminta, biasanya membutuhkan waktu sekitar 10-15 menit untuk mengisinya, jadi yang sabar ya!
  • [LIMA]: Jangan lupa untuk membaca License Agreement pada halaman paling akhir! Jika setuju, jangan lupa mencentang box kecil dibawah License Agreement nya.
  • [ENAM]: Pilih “Purchase” untuk membayar akun developer kalian.

Perlu diketahui akun ini bersifat subscription per tahun.

Sehingga jangan salah untuk harga $99 tersebut harus kalian bayar kan setiap tahun ya. Jangan khawatir ada Auto Renewal jika kalian ingin untuk otomatis pembayaran subscriptionnya.

So, that’s the steps! Cukup mudah kan?

Tapi, jika kalian membutuhkan bantuan untuk pendaftaran akun developer. Feel free untuk menghubungi saya di media sosial saya di @nandamochammad

That's All! See you on the next line!
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

Coding IOS Lebih Cepat Dari Biasanya!

Selamat datang teman – teman, artikel ini merupakan materi sharing dari event KMM Webinar yang dilaksanakan pada tanggal 25 April 2020. Selamat membaca 🙂

Jadi, sesuai dengan judul cara coding iOS agar lebih cepat dari biasanya adalah pastinya dengan sudah menyiapkan kode-kode yang mungkin akan dipakai. Dalam software development kita mengenal Library atau Dependency atau Third Party.

Berikut beberapa library yang bisa membantu kita mempercepat proses develoment iOS:

1. Alamofire

Alamofire ini menyiapkan banyak function yang bisa digunakan untuk mempercepat proses development teman – teman. Diantaranya seperti pada dokumentasi diatas, function yang ditawarkan meliputi:

  • URL / JSON Parameter Encoding
  •  Upload File / Data / Stream / MultipartFormData
  •  Download File using Request or Resume Data

Untuk Alamofire yang berfungsi sebagai HTTP Request, secara native Swift sudah memiliki fitur untuk HTTP Request, yaitu URLSession

2. SwiftyJSON

SwiftyJSON digunakan untuk handle JSON result dari method request. Swifty JSON dapat di implement pada variasi library ios seperti Cocoapods, Carthage, dan Swift Package Manager. Seperti pada dokumentasi, function yang bisa digunakan pada SwiftyJSON meliputi Merge JSON, Looping, dan Literal Convertibles.

Untuk SwiftyJSON yang berfungsi sebagai JSON Handling, secara native Swift sudah memiliki fitur serupa yaitu JSONSerialization, yang dapat digunakan sebagai media convert untuk JSON model tujuan.

3. SDWebImage

SDWebImage merupakan library yang dapat digunakan untuk request image secara asyncronous. Penggunaan SDWebImage lebih sering diterapkan pada request image pada link image dari hasil request. Seperti pada Carrousel, Katalog, atau List.

4. MBProgressHUD

MBProgressHUD banyak dipakai untuk menggantikan activity indicator yang sudah ada natively pada Swift. Hal itu dikarenakan MBProgressHUD memiliki banyak varian progress yang interaktif dan deskriptif, akan tetapi masih sesuai dengan Human Interface Guidelines (HIG) Apple.

5. SnapKit

SnapKit merupakan cara ringkas untuk membuat programmatically autolayout pada iOS. Keunggulan yang sangat terlihat adalah keringkasan pada baris kode yang dibutuhkan untuk membuat layout pada satu objek.

Pada Webinar lalu, juga dilakukan live coding untuk pembuatan reusable function untuk generic network request, silakan di cek pada git yang ada dibawah ini

Link Demo Project : https://github.com/NandaMocha/LibraryDemo

Tentunya masih banyak library lain yang dapat digunakan untuk mempercepat iOS Development. Seperti FBLoginSDK, Firebase, dan GoogleLoginSDK.

So, because of that, saya invite teman – teman juga untuk berbagi library yang sering dipakai dengan comment pada artikel ini nama library yang dipakai, link dokumentasi, dan tujuan implementasinya. Hopefully, artikel ini akan bermanfaat bagi developer iOS lain.

Terimakasih all 🙂

CategoriesProgramming

Menggunakan OData dengan ASP .Net Core API

OData Atau Open Data Protocol merupakan salah satu best practice untuk membangun atau menggunakan sebuah web api, OData sendiri dapat digunakan secara optional untuk membantu memanipulasi atau mengimplementasikan data secara khusus, kita dapat menggunakan query dalam protokol OData melalui endpointnya,  Odata dalam Asp .Net Sendiri dapat diakses secara optional misalkan data yang ada di web api endpoint default kita tidak akan diubah seluruhnya ke OData, sehingga data tersebut masih dapat diakses secara default. berikut merupakan langkah untuk konfigurasinya

Konfigurasi OData di ASP .Net Core 3.1

Pertama, Tambahkan “Microsoft.AspNetCore.OData” reference di NuGet Packages ke project kita

Buka file Startup.cs pada project kita,

Tambahkan “services.AddOData();” di dalam Method ConfigureServices untuk mengenalkan aplikasi kita tentang OData

 public void ConfigureServices(IServiceCollection services)
 {
     services.AddControllers();
     services.AddOData();
 }

jangan lupa untuk menambahkan reference pada file startup.cs juga

using Microsoft.AspNet.OData.Extensions;

Kemudian kita perlu menambahkan dependency Injection pada method Configure di file yang sama pada UseMvcnya, dan juga tambahkan funsi query -query yang akan kita gunakan untuk memanipulasi data kita nantinya.

 public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            app.UseHttpsRedirection();
            app.UseRouting();
            app.UseMvc(routeBuilder =>
            {
                routeBuilder.EnableDependencyInjection();
                routeBuilder.Expand().Select().Filter().Count().OrderBy();
            });
            app.UseAuthorization();
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
            });
        }

Hal yg perlu dilakukan selanjutnya adalah membuat route untuk mengakses ke format ODatanya sendiri sehingga data dalam endpoint kita masih bisa di akses dalam format default.

Buat method baru pada file startup.cs untuk menentukan Entity data model untuk ODatanya

IEdmModel GetEdmModel()
 {
     var odataBuilder = new ODataConventionModelBuilder();
     odataBuilder.EntitySet<BDFEntitlement>("IniPegawai");

return odataBuilder.GetEdmModel();
}

Tambahkan reference pada file startup.cs

using Microsoft.OData.Edm;
using Microsoft.AspNet.OData.Builder;

nb: dalam code diatas “BDFEntitlement” adalah model yang akan menjadi format result dari data kita, “IniPegawai” adalah web api controller kita. jadi kita dapat menambahkan Entityset seperlu kita.

Kemudian Kembali ke Method Configure untuk comment fungsi UseEndpointsnya karena kita akan menggunakan route dari ODatanya.

sama seperti alasan diatas, pada UseMvc kita perlu menambahkan

routeBuilder.MapODataServiceRoute("odata", "odata", GetEdmModel());

Kemudian karena kita menggunakan mvc di sini perlu untuk mendisable EndpointRoutingnya di method ConfigureServices pada service “AddController”, Rubah seperti dibawah ini.

services.AddControllers(mvcOptions => mvcOptions.EnableEndpointRouting = false);

Dengan ini konfigurasi di file startup.cs sudah selesai, dan dapat dilanjutkan ke webapi controllernya

langkah terakhir, hanya perlu menambahkan configurasi di setiap atas method controller yang akan kita gunakan dengan bersama OData seperti

// GET: api/IniPegawai
  [HttpGet]
  [EnableQuery()]
  public IEnumerable Get()
  {
      return _context.BDFEntitlement.AsNoTracking().ToList();
  }

Tambah reference pada controller Anda

using Microsoft.AspNet.OData;


Implementasi sederhana menggunakan OData

1. tanpa OData dengan endpoint

https://localhost:44383/api/inipegawai

2. Dengan OData dan mencoba querying pada endpoint nya

https://localhost:44383/odata/inipegawai?$Select=ProgramName,Remark,id&$filter=ProgramName eq 'Program Algostudio A'


Konklusi :

OData bisa berguna untuk membantu kita memanipulasi data sesuai yang kita butuhkan tanpa harus membuat endpoint lain, selain itu banyak query-query OData yang berguna misalkan expand yang memiliki fungsi untuk dapat menggabungkan lebih dari 1 data di endpoint berbeda dan banyak lainnya. mudahnya memanipulasi di data dari resultnya ini yang menurut Saya menjadikan Entity Framework yang menggunakan OData lebih fleksibel dari Entity Framework yang tidak menggunakan OData, untuk pembahasan lebih perbandingannya mungkin akan ada di artikel selanjutnya.

Terima kasih & Semoga artikel ini bermanfaat.