Source Code Audit dengan SAST Tools (Tutorial)

by | Jun 11, 2019

Aplikasi yang berkualitas dimulai dari source code atau kode sumber yang berkualitas pula. Bila kode sumber yang dihasilkan oleh pemrogram (programmer) masih terdapat kesalahan atau bug, tidak mengikuti standar pemrograman yang baik atau masih menyisakan berbagai lubang keamanan, maka akan memberikan dampak yang negatif bagi jalannya aplikasi pada saat digunakan. Para peretas (hacker) akan mampu melakukan eksploitasi terhadap berbagai kerentanan yang terdapat di aplikasi tersebut sehingga dapat menyebabkan kerugian yang besar bagi perusahaan atau organisasi.

Untuk meminimalisir kerentanan yang bisa terdapat dalam aplikasi, maka perlu dilakukan pengujian atau audit terhadap aplikasi tersebut. Ada 2 (dua) pendekatan dalam melakukan pengujian atau audit terhadap aplikasi, yaitu Static Application Security Testing (SAST) dan Dynamic Application Security Testing (DAST).

SAST, juga dikenal sebagai white box testing, dapat menemukan berbagai kerentanan dan lubang keamanan dalam kode sumber aplikasi secara lebih awal dalam siklus hidup pengembangan aplikasi. Ini juga memastikan kesesuaian dengan pedoman dan standar pemrograman tanpa perlu melakukan eksekusi aplikasinya. SAST hanya murni melakukan analisis terhadap kode sumber untuk menemukan berbagai bug, ketidaksesuaian pemrograman dengan standar serta lubang keamanan yang masih terdapat dalam aplikasi.

DAST, juga dikenal sebagai black box testing, dapat menemukan berbagai kerentanan dan kelemahan keamanan dalam aplikasi yang sedang berjalan. DAST menggunakan teknik injeksi kesalahan pada aplikasi, seperti melakukan input data berbahaya ke aplikasi, untuk mengidentifikasi kerentanan keamanan umum seperti injeksi SQL (SQL injection) dan skrip lintas situs (cross-site scripting). DAST juga dapat menunjukkan masalah runtime yang tidak dapat diidentifikasi dengan SAST, misalnya masalah otentikasi dan konfigurasi server serta kerentanan yang hanya terlihat ketika pengguna melakukan login dan memasukkan data.

Salah satu alat bantu atau tool SAST yang dapat digunakan oleh seorang auditor saat melakukan pemeriksaan terhadap kode sumber dengan bahasa pemrograman Java adalah FindBugs. FindBugs merupakan suatu aplikasi gratis berbasis Open Source berlisensi LGPL atau Lesser GNU Public License yang menggunakan teknik analisis statis terhadap kode sumber Java untuk menemukan berbagai kesalahan pemrograman, lubang keamanan, serta ketidaksesuaian terhadap standar pemrograman yang baik dan benar. Situs web untuk FindBugs ada di http://findbugs.sourceforge.net/

Seorang pemrogram biasanya menggunakan tool IDE (Integrated Development Environment) saat mengembangkan aplikasi. Sebagai contoh untuk pengembangan aplikasi Java, pemrogram dapat menggunakan Eclipse atau NetBeans IDE yang memiliki berbagai fitur sehingga memudahkan dan mempercepat kerja pemrograman. Telah terdapat plugin FindBugs baik untuk Eclipse maupun NetBeans IDE sehingga fitur FindBugs dapat diintegrasikan dengan kedua tool IDE tersebut untuk melakukan teknik SAST terhadap kode sumber Java.

Berikut adalah cara menggunakan FindBugs dengan NetBeans IDE versi 8.2 yang telah terintegrasi. Pertama, pastikan telah membuat atau membuka project Java di NetBeans IDE serta telah membuka file yang berisikan kode sumber Java. Selanjutnya, untuk menjalankan FindBugs yang telah terintegrasi di NetBeans IDE sehingga dapat melakukan audit kode sumber Java tersebut, pilihlah menu Source dan kemudian Inspect seperti berikut:

Source Code Audit dengan SAST Tools (Tutorial) 1

 

Pada dialog Inspect yang muncul, pilih FindBugs di bagian combo box Configuration untuk menjalankan FindBugs sebagai berikut:

Source Code Audit dengan SAST Tools (Tutorial) 2

 

Bila belum pernah menjalankan FindBugs di NetBeans IDE sebelumnya, maka perlu melakukan instalasi terlebih dahulu. Pastikan sudah terkoneksi ke Internet sebelum klik pada tombol Install karena NetBeans IDE akan secara otomatis melakukan download dan instalasi plugin FindBugs sehingga terintegrasi dengan NetBeans IDE:

Source Code Audit dengan SAST Tools (Tutorial) 3

 

Setelah klik tombol Install maka akan muncul dialog untuk instalasi plugin FindBugs. Klik pada tombol Next hingga selesai, dan bila muncul License Agreement maka pilihlah “I accept” sebelum melanjutkan instalasi. Download plugin FindBugs akan dimulai secara otomatis setelah menyetujui License Agreement. Setelah download selesai maka akan muncul dialog konfirmasi untuk instalasi plugin FindBugs. Klik pada tombol Continue untuk melanjutkan instalasi hingga selesai, dan terakhir klik pada tombol Finish untuk mengakhiri instalasi FindBugs di NetBeans IDE. Akhirnya untuk menjalankan FindBugs, klik pada tombol Inspect sehingga muncul daftar temuan (bila ada) dari hasil teknik SAST seperti contoh berikut:

Source Code Audit dengan SAST Tools (Tutorial) 4

 

Panel Inspector pada bagian bawah menampilkan daftar temuan berbagai bug, ketidaksesuaian standar pemrograman dan lubang keamanan yang terdapat pada kode sumber. Bila melakukan double-click pada suatu temuan, maka NetBeans IDE akan langsung menunjukkan baris kode sumber yang bermasalah beserta penjelasan tentang masalah tersebut. Sebagai contoh, berikut adalah temuan adanya kerentanan cross-site scripting pada kode sumbernya:

Source Code Audit dengan SAST Tools (Tutorial) 5

 

Sayangnya aplikasi FindBugs memang hanya bisa digunakan untuk kode sumber dengan bahasa pemrograman Java saja, namun ada juga berbagai tool SAST lain yang dapat mendukung berbagai bahasa pemrograman. Salah satunya adalah SonarQube yang mampu menerapkan SAST terhadap kode sumber dari 25 lebih bahasa pemrograman seperti PHP, JavaScript, Kotlin, Swift, C#, Python dan ABAP.

Dengan demikian, seorang auditor akan mampu melakukan audit terhadap kode sumber secara cepat dan efektif melalui penggunaan teknik dan aplikasi alat bantu SAST seperti FindBugs dan SonarQube. Harapan auditor adalah bahwa daftar temuan yang didapatkannya tersebut akan dijadikan sebagai masukan bagi pemrogram agar melakukan tindakan korektif untuk memperbaiki serta meningkatkan kualitas dari kode sumber yang dibuat olehnya sehingga aplikasi menjadi lebih aman, handal, dan berkualitas.

Selamat belajar dan mencoba!

 

 

Konten tutorial ini ditulis oleh:

Andrian The

 

 

8 Situs Freelancing yang Direkomendasikan Untuk Programmer

by | May 6, 2019

Beberapa bulan yang lalu, kami sempat menulis artikel tentang tips menjadi programmer freelance. Setelah sekian lama, sebuah pertanyaan lalu muncul yang kemudian menjadi beban pikiran kami “bagaimana jika ada dari pembaca yang benar-benar resign dari pekerjaannya dan memutuskan menjadi programmer freelance?”

Seketika tim penulis Inixindo Jogja memiliki perasaan yang campur aduk, ada yang merasa bertanggung jawab, ada yang merasa bersalah, bahkan ada yang khawatir setengah mati bagaimana jika pembaca yang nekat tersebut diceraikan pasangannya, dihukum orang tuanya, atau jadi bahan obrolan tetangga gara-gara status ‘kerja serabutan’. Walaupun sebenarnya ada juga di antara kami yang cuek dan masih asik makan bubur kacang ijo di pantry, tapi kami sepakat untuk membantu pembaca yang nekat dalam mencari pekerjaan serabutan sebagai programmer atau developer lepas.

Biasanya karena sibuk coding, para programmer freelance kurang bersosialisasi dengan orang yang berpotensi menjadi klien mereka. Memang ada yang suka berkumpul atau ‘nongkrong bareng’ tapi itu pun biasanya dengan rekan seprofesi yang notabene adalah kompetitor mereka. Solusi untuk masalah ‘kurang main’ programmer freelance sebenarnya sudah ada sejak beberapa tahun yang lalu dengan hadirnya situs-situs cari kerja lepas.

Mirip dengan marketplace produk, situs-situs freelance dibuat untuk mempertemukan orang yang mencari pekerja dengan orang yang membutuhkan kerja tentu saja dalam konteks freelance yang berarti kontrak pekerjaannya per project. Dalam situs ini, kita sebagai freelancer harus bersaing dengan freelancer lain yang menawarkan jasa dengan skill tertentu. Si pemberi kerja biasanya memilih berdasarkan preferensinya sendiri-sendiri, ada yang menilai berdasarkan kualitas portfolio, pengalaman, popularitas, dan yang paling sering adalah harga.

Ya! Kami mengetahui betapa sakitnya freelancer yang handal dan memiliki jam terbang yang tinggi harus mengalah kepada fresh graduate atau juga mahasiswa yang memasang rate jauh lebih murah dibanding harga pasaran. Tapi bagaimanapun juga mereka tidak bisa disalahkan karena kita pernah mengalami betapa sulitnya membangun portfolio pada saat awal kita terjun di dunia freelancing.

Meskipun begitu, kita tak boleh menyerah begitu saja. Saatnya melebarkan sayap demi meningkatkan reach dari personal brand kita dengan memasang lapak di setiap situs freelancing yang ada di muka bumi! Yup, itu usulan dari digital marketing kami. Agak berlebihan memang, tapi paling tidak inilah delapan situs baik dari luar maupun dalam negeri yang bisa kalian coba agar kesempatan mendapatkan klien semakin besar.

 

  1. Sribulancer
    Jika kalian belum seberapa percaya diri untuk memiliki klien dari luar negeri, kalian bisa mencoba situs dalam negeri ini. ‘Act locally’ kata pepatah. Selain berkomunikasi dengan klien lokal lebih mudah, saingan kalian juga tak sebanyak situs internasional yang datang dari berbagai penjuru dunia untuk memperebutkan satu gelar yaitu deal dengan klien. Kekurangan dari situs ini adalah rate yang sudah ditetapkan oleh situs tersebut.  
  2. Freelancer
    Walaupun bukan berasal dari Indonesia, situs dari Australia ini memiliki basis pengguna yang kuat di Indonesia dan juga di seluruh dunia. Situs ini juga merupakan salah satu pionir situs freelancing.  
  3. Upwork
    Situs ini adalah paling populer di antara para developer walaupun sebenarnya situs ini menyediakan berbagai pilihan jenis pekerjaan. Sempat beken 2 tahun lalu, Upwork banyak menuai kritikan karena customer support yang buruk padahal Upwork mengambil komisi yang cukup besar yaitu sebesar 20%.  
  4. Fivver
    Situs ini sebenarnya lebih cocok untuk para freelancer di bidang kreatif seperti desain, animasi, dan musik. Meski begitu, situs ini juga menyediakan tempat bagi para freelancer di bidang teknologi seperti web & app development sampai ke database. Aura kreatif memang sengaja diciptakan oleh situsini dengan menyebut suatu pekerjaan dengan kata ‘gig’.  
  5. Gigster
    Kelebihan Gigster yang mungkin bisa menjadi panutan bagi situs freelancing lainnya adalah milestone pekerjaan yang telah ditentukan oleh Gigster. Milestone ini sangat realistis jika dibandingkan freelancer di situs lain yang menawarkan web development dalam satu hari saja (walaupun kita tahu itu hanya memasukkan data ke dalam template saja).  
  6. Toptal
    Salah satu unique selling proposition yang ditawarkan Toptal adalah kualitas dari freelancer. Website ini mengklaim bahwa mereka menawarkan developer pilihan top 3% yang artinya jika ada 100 developer dengan rate dan keahlian yang sama maka yang ditawarkan 3 developer peringkat teratas. Sampai artikel ini terpublikasi, kami masih belum mengetahui bagaimana proses screening yang dilakukan oleh Toptal.  
  7. Stack Overflow
    Kiblat untuk copy paste kode pemrograman ini juga menyediakan fitur marketplace pekerjaan. Sebagian besar project yang ditawarkan di sini bersifat long term jadi bagi yang gemar akan stabilitas ketahanan dompet tentu situs ini dapat dijadikan pilihan.  
  8. Hired
    Sistem yang digunakan Hired ini mirip seperti Tinder. Maksudnya, klien yang akan menghubungi programmer freelance hanyalah yang berstatus ‘match’ saja di mana kecocokan antara kebutuhan klien dan skill freelancer. Walaupun terlihat praktis, baik klien maupun freelancer harus melewati proses yang cukup panjang (sekitar 90 menit termasuk tes untuk freelancer). Karena proses yang agak rumit ini, kebanyakan project yang ditawarkan bersifat jangka panjang.

***

Itu tadi 8 situs yang dapat kalian jadikan referensi untuk mendapatkan gigs/project. Serta jangan lupa bahwa kebanyakan situs di atas mengambil komisi antara 10-30% dari rate yang kita tawarkan. Jadi perlu hitung-hitung lagi tentang neraca pengeluaran dan pendapatan kita untuk kebutuhan sehari-hari. Selamat mencoba dan terus belajar!

Container VS Virtual Machine

by | May 3, 2019

 

Salah satu kendala yang paling awal saat dihadapi oleh tim developer pada saat melakukan pengembangan app adalah kekhawatiran jika aplikasi yang mereka kembangkan tidak berjalan secara sempurna ketika ketika dideploy. Perbedaan konfigurasi di environment milik seorang developer dengan server atau dengan developer yang lain merupakan penyebab utamanya. Hal ini juga sering dirasakan oleh sysadmin ketika mereka hendak mengupdate kernel. Ada beberapa app dalam server mereka jadi bermasalah karena belum mendukung kernel terbaru.

Sebenarnya solusi untuk permasalahan ini sudah ada sejak lama dengan hadirnya teknologi virtualisasi. Ada dua macam teknologi virtualisasi yaitu virtual machine dan container. Apa saja perbedaan dua teknologi virtualisasi ini? Mari kita kupas satu per satu dari teknologi virtualisasi tersebut.

 

Apa itu Virtual Machine

Virtual machine (VM) adalah sebuah emulasi dari sebuah sistem komputer. Secara sederhana, virtual machine membuat kita bisa membagi resource hardware dari satu hardware fisik menjadi beberapa sistem komputer.

Sebagai contoh, kita memiliki satu PC yang memiliki prosesor dengan 4 core, RAM sebesar 8 GB serta harddisk 500GB misalnya. Tanpa VM tentu kita hanya bisa menginstall 1 OS atau beberapa OS tapi tak bisa berjalan bersamaan. Dengan VM, kita bisa membagi sistem komputer menjadi dua masing-masing memiliki prosesor 2 core,  RAM 4GB, serta harddisk 250GB dan tentu saja pembagian resource hardware tidak harus sama rata. Dengan ini, maka kita dapat menginstall OS di setiap sistem komputer dan dapat menjalankannya secara bersamaan sehingga kita seolah memiliki 2 PC yang berbeda.

Teknologi ini sering digunakan untuk server dan memunculkan istilah Virtual Private Server (VPS) tapi sedikit pula digunakan oleh app developer karena project yang sedang dikerjakannya memiliki platform yang berbeda dengan platform yang dimiliki.

 

Keunggulan VM

  • Resource hardware yang eksklusif sehingga tidak terganggu jika ada apps yang lain tiba-tiba membutuhkan resource yang tinggi
  • Memiliki management tools dan security tools yang sudah matang
  • Secara umum memiliki tingkat keamanan sedikit lebih tinggi bila dibandingkan dengan container

 

 

Apa Itu Container

Berbeda dari VM, container adalah sebuah virtualisasi OS yang dapat membungkus suatu aplikasi beserta dependency dan environment-nya. Setiap container ini memiliki process yang terisolir sehingga tidak mengganggu host OS ataupun container yang lain. Prinsip container ini mirip dengan kontainer yang ada di kapal kargo di mana kapal kargo tersebut diibaratkan sebagai sistem komputer.

Jika dibandingkan dengan VM, secara pengaturan kontainer lebih mudah. Hal ini disebabkan karena konsep berbagi resource hardware dari container lebih fleksibel bila dibandingkan VM. Sebagai contoh, tadi disebutkan bahwa kita mempunyai 1 PC dengan 4 Core, RAM 8 GB, dan storage sebesar 500GB. Katakanlah kita mempunyai 2 container dengan kebutuhan RAM berbeda. Beberapa apps dalam container A membutuhkan RAM 5GB sedangkan apps dalam container B membutuhkan RAM 2GB. Dengan container, kita tak perlu menset kebutuhan hardware resource setiap container karena berada dalam satu sistem komputer. Sementara jika kita memakai VM dengan hardware resource yang sudah kita bagi sama rata seperti disebutkan di contoh sebelumnya, kita tidak mungkin memasang apps di container A di salah satu sistem komputer karena RAM maksimal yang bisa kita pakai hanyalah 4GB.

Faktor portabilitas juga menjadi kelebihan yang dimiliki oleh container. Para developer bisa membagikan container dengan format ISO image ke setiap perangkat yang dia pakai ataupun ke developer lain.

 

Platform Container

Linux Containers (LXC)

Platform ini merupakan cikal bakal lahirnya container. Linux Containers (LXC) ini adalah virtualisasi OS yang memungkinkan kita menjalankan beberapa sistem Linux di dalam satu sistem komputer secara bersamaan. Tentu saja platform ini hanya berlaku untuk Linux saja.

Docker

Pada awalnya, project pertama Docker adalah membangun single app LXC container, mengenalkan beberapa perubahan pada LXC sehingga lebih portabel dan fleksibel. Lama-kelamaan Docker berkembang hingga memiliki container runtime sendiri.

 

Keunggulan Container

  • Fleksibel dan scalable
  • Mengurangi resource yang dibutuhkan dalam IT Management
  • Waktu yang dibutuhkan untuk mengemas dan memasang app dalam container lebih cepat bila dibandingkan dengan VM

 

 

VM vs Container (Final Round)

Secara singkat, perbedaan antara VM dan Docker dapat dijabarkan dalam tabel berikut :

 

Virtual Machine

Container

Berat

Ringan

Performa terbatas pada konfigurasi VM

Performa maksimum tergantung pada hardware fisik

Virtualisasi pada level hardware

Virtualisasi pada level OS

Waktu start up dalam hitungan menit

Waktu start up dalam hitungan detik

Terisolasi penuh pada level hardware sehingga lebih aman

Terisolasi pada level proses

 

Tentu jika melihat rangkuman perbedaan antara VM dan Docker pada tabel di atas kita tahu bahwa VM dan container memiliki fungsi masing-masing. Untuk project yang bersifat monolitik di mana setiap apps yang kita kembangkan membutuhkan environment dan dependencies yang tidak terlalu berbeda maka menggunakan VM lebih bijak. Akan tetapi jika kita menggunakan arsitektur microservices dalam pengembangan software, penggunaan container lebih dianjurkan.

***

Jika Anda tertarik dalam pengembangan software dengan arsitektur microservice menggunakan Docker dan Kubernetes, Anda dapat mengikuti workshop cloud native di Inixindo Jogja.

 

Mengenal Headless CMS

by | Apr 9, 2019

 

Siapa yang tak tahu tentang CMS? Mungkin semua akan sepakat bahwa mulai dari web developer hardcore yang harus menulis kode di mana pun dan kapan pun sampai ke penulis blog romantis yang harus minum kopi di saat senja dan turun hujan saat menuangkan idenya dalam tulisan membutuhkan content management system dalam mengelola suatu website. Terima kasih kepada WordPress sebagai platform CMS open source yang mempopulerkan blogging kepada siapa saja.

CMS dan Content Management System adalah sebuah sistem yang dibuat untuk mendukung penerbitan (dalam hal ini penerbitan di web) mulai dari penulisan, editing, modifikasi, dan publikasi konten. Tujuan CMS dibuat sebenarnya adalah untuk memudahkan penulis dalam mempublikasikan artikelnya. CMS juga mendukung iklim kolaboratif sehingga satu media bisa memiliki beberapa koresponden sekaligus yang bisa mengunggah artikelnya di mana saja dan kapan saja karena umumnya CMS dibuat dengan memanfaatkan teknologi Web.

 

CMS Tradisional

Sebelum kita membahas tentang headless CMS, mari kita mengingat kembali tentang karakteristik dan metode dari CMS tradisional seperti WordPress atau Joomla. Pada CMS tradisional, seorang user (dalam hal ini kreator konten) menulis konten di dalam sebuah editor baik WYSIWYG (What You See Is What You Get) di mana tampilan yang dituliskan hampir menyerupai tampilan ketika konten terpublikasi di halaman web, walaupun ada beberapa CMS yang hanya memiliki HTML editor di mana penulis harus memiliki pengetahuan tentang kode HTML. Konten yang ditulis ini kemudian disimpan dalam database dan kemudian disajikan oleh template tampilan yang dimiliki oleh CMS tersebut menjadi sebuah halaman web. Untuk lebih jelasnya dapat dilihat dari gambar berikut.

 

Mengenal Headless CMS 6

 

Jika kita menggunakan CMS, dalam mengubah tampilan akhir web yang bisa kita lakukan hanyalah mengganti template yang sudah disediakan oleh platform CMS tersebut. Lalu bagaimana jika ingin melakukan kustomisasi pada tampilan tampilan akhir halaman web? Ada dua cara yaitu menginstall plugin web builder pada CMS kita dan yang kedua adalah membuat mengedit file template yang ada di dalam CMS. Kedua solusi ini sama-sama mendatangkan problem baru. Website builder plugin dapat membuat performa web kita menurun karena banyak sekali proses yang berjalan sebelum halaman web berhasil ditampilkan. Sedangkan, jika kita memilih untuk mengedit sendiri file template yang berada di dalam CMS dapat dibayangkan berapa banyak waktu yang harus diperlukan untuk mempelajari ribuan baris kode yang dimiliki CMS tersebut dan tentu saja kita juga harus berada dalam batasan logic dari CMS tersebut.

Kekurangan dari CMS tradisional adalah banyak front-end developer yang tidak bisa mengembangkan bakat terpendamnya karena biasanya klien sebagai user dari CMS ingin sesuatu yang mudah digunakan dan sang back-end juga agaknya keberatan jika harus membuat CMS sendiri dengan deadline yang alakadarnya.

 

Headless CMS

Berbeda dari CMS tradisional memiliki komponen yang bisa langsung menyajikan tampilan front-end ke audience, headless CMS sama sekali tidak bisa men-generate halaman web secara otomatis. Inilah mengapa model CMS ini kemudian disebut ‘headless’ atau tanpa kepala yang berarti tak memiliki wajah. Kami sempat penasaran kenapa tidak disebut faceless saja agar tidak menimbulkan aura horor dan masih belum menemukan jawabannya.

Headless CMS tidak memliki sistem front-end secara default seperti CMS tradisional sehingga CMS ini sering disebut dengan front-end agnostic. Headless CMS menyajikan konten secara mentah melalui API. Hal ini menjadikan headless CMS dapat digunakan di berbagai macam framework. Untuk perbedaan lebih jelasnya bisa dilihat di gambar berikut.

 

Mengenal Headless CMS 7

 

Banyak dari developer headless CMS ini menyebut produknya sebagai CaaS (Content as a Service) hasil dari modifikasi SaaS (Software as a Service). Jika sebelumnya developer CMS versi komersial tradisional menjual secara bundling (domain, platform CMS, dan hosting). Untuk developer headless CMS komersial biasanya menerapkan tarif sesuai dengan besarnya konten. Tapi jangan khawatir dulu, banyak juga headless CMS open source gratis yang bisa kita deploy sendiri di cloud VPS milik kita.

Hadirnya headless CMS ini tidak langsung serta-merta menyelesaikan masalah yang dibahas dalam CMS tradisional sebelumnya. Sama seperti sistem-sistem yang lain, headless CMS ini memiliki pro dan kontra.

Pro

Inilah beberapa kelebihan headless CMS bila dibandingkan dengan CMS tradisional:

  • Front-end agnostic
    Ini merupakan alasan kenapa headless CMS diciptakan. Konten yang berada dalam headless CMS dapat disesuaikan dengan platform framework front-end seperti React, Vue, atau Angular.
  • API
    Headless CMS menggunakan API sebagai penghubung antara back-end dan front-end yang pada dasarnya merupakan dua sistem yang terpisah dan juga memungkinkan berada dalam 2 server yang berbeda. Hal ini berarti menurunkan resiko kehilangan seluruh konten jika ada yang berhasil menembus keamanan web server kita.
  • Future proof
    Karena headless CMS pada dasarnya hanya menyajikan data mentah, jika ada inovasi teknologi baru maka konten-konten yang ada di dalam CMS ini dapat dengan cepat disesuaikan. Sebagai contoh, jika ada platform voice assistant baru di device tanpa layar seperti smartwatch atau smart speaker maka kita akan dengan mudah memasukkan konten kita di platform tersebut.

Kontra

Selain kelebihan-kelebihan di atas, headless CMS juga memiliki beberapa kekurangan sebagai berikut :

  • Tidak Untuk Semua Orang
    Sebagian besar orang yang menggunakan CMS tradisional seperti WordPress tidak memiliki pengetahuan tentang pemrograman. Sementara headless CMS ini menuntut seseorang untuk memiliki pengetahuan tentang pemrograman web. Hal ini membuat para blogger dan pemasar digital enggan menggunakan headless CMS.
  • Memiliki 2 Stack Yang Terpisah
    Selain jadi kelebihan yang sudah terlebih dahulu dibahas, memiliki 2 stack terpisah antara front-end dan back-end juga bisa menjadi kekurangan bagi headless CMS. Bayangkan berapa besar effort maupun waktu yang kita butuhkan untuk membuat dua stack yang terpisah demi membuat blog pribadi.
  • Tidak Ada Preview
    Para kreator konten selaku pengguna sebuah CMS sering mem-preview konten yang mereka buat agar sesuai dengan yang mereka inginkan. Masalahnya, di dalam headless CMS tidak ada preview terlebih dahulu kecuali kita memisahkan antara fase staging dan production yang mana akan lebih menghabiskan waktu dan effort.

 

***

 

Bagaimana? Sudah mempertimbangkan apakah headless CMS merupakan solusi yang tepat untuk kalian? Jika kalian adalah seorang yang sudah terbiasa membuat website dan sudah cinta mati dengan yang namanya headless CMS, kalian bisa tunggu artikel kami selanjutnya yang akan membandingkan satu per satu platform headless CMS seperti Directus, Strapi, ataupun Butter.

Tutorial Membuat Mobile App Menggunakan React Native (Part 1 – Environment Setup)

by | Mar 28, 2019

Perangkat mobile atau smartphone pada saat sekarang ini sudah menjadi benda wajib yang selalu ada di saku atau tas masing-masing. Jumlah orang yang memiliki smartphone tentunya jauh lebih besar dibandingkan orang yang memiliki laptop atau desktop. Hal inilah yang menyebabkan aplikasi mobile laris dan terpasang pada perangkat masing-masing bagaikan pisang goreng di saat hujan di sore hari. Sebagai hukum sebab akibat yang sudah dirumuskan pepatah zaman dulu yaitu ‘ada gula ada semut’, yang bila diartikan menjadi ada ‘konsumen pisang goreng berarti ada yang jualan pisang goreng’, atau agar lebih pas bila disesuaikan dengan bahasan kita berarti ‘ada mobile user tentunya ada mobile developer’. Kondisi inilah yang menyebabkan semua kalangan mulai dari perusahaan, software house, media, dan bahkan anak magang beramai-ramai menciptakan dan mengembangkan mobile app.

Kekhawatiran muncul dari penjual es krim yang sekali lagi jika disesuaikan dengan bahasan kita berarti ‘web developer’ yang rata-rata secara natural hanya menguasai bahasa markup yaitu HTML & CSS, bahasa pemrograman seperti Javascript & PHP, dan bahasa query yaitu SQL. Padahal, pengembangan mobile apps saat ini dikuasai oleh dua bahasa pemrograman yaitu Java (untuk Android) dan Swift (untuk iOS). Masalah ini ditambah dengan keinginan agar apps dapat hadir dan berjalan di dua platform tersebut. Tentu saja ini semakin membuat kompleksitas pengembangan mobile app semakin meningkat.

Solusi untuk permasalahan ini sebenarnya sudah ada pada tahun 2011 sejak hadirnya Cordova (berganti nama menjadi PhoneGap setelah diakuisisi oleh Adobe) sebagai framework pengembangan hybrid app di mana dengan menggunakan HTML, CSS, dan Javascript kita dapat meng-compile mobile app di dua platform Android dan iOS. Sampai sekarang Cordova/PhoneGap masih dijadikan solusi tercepat untuk membangun aplikasi mobile bagi para developer web.

Tapi jangan senang dulu, Alejandro! Aplikasi hybrid yang dibuat dengan Cordova/PhoneGap ini memiliki performa yang jauh lebih rendah bila dibandingkan mobile app yang dikembangkan secara native. Hal ini membuat para developer menjadi malas-malasan untuk menggunakan Cordova/Phonegap karena resikonya besar yaitu mereka harus mengorbankan user experience. Walaupun begitu dengan berkembangnya teknologi, hadir React Native sebagai solusi dalam pengembangan aplikasi mobile.

Mirip dengan dengan Cordova/PhoneGap, React Native membuat developer dapat mengembangkan aplikasi mobile dengan menggunakan Javascript yang tentu saja telah dikuasai oleh mayoritas web developer dan bila dibandingkan secara performa, React Native jauh mengungguli Cordova/Phonegap walaupun masih berada sedikit di bawah aplikasi native dari masing-masing platform.

Kita cukupkan saja cerita panjang tentang latar belakang native mobile app, hybrid app, dan pisang goreng ini. Pada kesempatan kali ini, kami akan membagikan langkah-langkah dalam membuat native mobile app dengan menggunakan React Native. Tutorial ini akan di bagi menjadi beberapa part. Pada part 1 ini kita akan mempersiapkan environment-nya terlebih dahulu.

 

Tools of Trade

Dalam tutorial kali ini beberapa tools yang akan kita gunakan adalah:

  1. NodeJs (download di sini)
  2. Android Studio
  3. SDK Manager
  4. JDK
  5. Python2

Setting Up Tools

Setelah semua tools kita dapatkan, langkah selanjutnya adalah men-setup semua peralatan tadi ke dalam perangkat yang kita gunakan. Dalam tutorial ini kita akan menggunakan Windows 10 sebagai sistem operasi dalam environment pengembangan kita.

 

1. Extract nodejs yang telah didownload,
semisal di D:\node-v10.15.0-win-x64 Anda harus mengingat lokasi tersebut, karena nanti akan kita tambahkan lokasi tersebut ke dalam path variable.

2. Install Android Studio beserta SDK Manager-nya.
Step ini membutuhkan koneksi internet dan membutuhkan waktu yang cukup panjang. Jangan lupa catat dimana lokasi Android Studio dan SDK Managernya. Kita akan menggunakanya di step selanjutnya karena Android Studio ketika diinstal otomatis akan menginstal versi SDK terakhir maka proses instalasi SDK otomatis telah dilakukan. Yang perlu dilakukan adalah mencatat lokasi SDK manager.

Tutorial Membuat Mobile App Menggunakan React Native (Part 1 - Environment Setup) 8

3. Menginstall JDK 
Jangan lupa catat lokasi JDK terinstall biasanya default lokasi JDK bisa ditemukan di C:\Program Files\Java\jdk1.8.0_162\

 

4. Menginstall Python
Setelah menginstal jangan lupa catat lokasi nya karena nanti kita harus menambahkanya ke dalam system path variable.

 

5. Menambahkan JAVA_HOME Environment Variable
Java home adalah lokasi di mana JDK diinstall. Secara default JDK terinstal di C:\Program Files\Java\jdk1.8.0_162\

Tutorial Membuat Mobile App Menggunakan React Native (Part 1 - Environment Setup) 9

6. Menambahkan ANDROID_HOME Environment Variable

Tutorial Membuat Mobile App Menggunakan React Native (Part 1 - Environment Setup) 10

7. Menambahkan beberapa lokasi di bawah ini kedalam System Path variable
Yang perlu ditambahkan adalah lokasi folder berikut:

    1. Nodejs
    2. Java/bin
    3. Gradle/bin
    4. SDK/platform-tools
    5. SDK/tools
    6. Python
Tutorial Membuat Mobile App Menggunakan React Native (Part 1 - Environment Setup) 11

 

React Native Installation

Setelah ke enam langkah di atas dilakukan dengan benar maka seharusnya saat ini anda telah siap untuk memasang React Native ke komputer Anda. Langkah-langkah untuk memasang React Native dapat dilakukan melalui step-step dibawah ini :

1. Buka command prompt
(bisa dilakukan dengan menekan kombinasi keyboard windows + ‘r’ dan ketikkan cmd lalu klik ‘OK’)

Tutorial Membuat Mobile App Menggunakan React Native (Part 1 - Environment Setup) 12

2. Ketikkan perintah pada command line:

npm install -g react-native-cli

Tunggu sampai selesai! Proses ini membutuhkan koneksi internet

Tutorial Membuat Mobile App Menggunakan React Native (Part 1 - Environment Setup) 13

3. Membuat project baru
Sebelum membuat project baru ada baiknya kita membuat folder khusus untuk project kita. Saya sarankan untuk membuat folder dengan nama yang singkat dan tidak terdapat spasi untuk menghindari error. Di bawah ini urutan perintah untuk memulai project baru:

D:
mkdir labReactNative
react-native init AwesomeProject

Tunggu hingga proses selesai!

Tutorial Membuat Mobile App Menggunakan React Native (Part 1 - Environment Setup) 14

 

4. Membuat android virtual device (AVD)

 

5. Jalankan project yang telah kita buat
Untuk menjankan project yang telah kita buat dapat menggunakan perintah dibawah ini:

cd AwesomeProject
react-native run-android

Tutorial Membuat Mobile App Menggunakan React Native (Part 1 - Environment Setup) 15

 

 

Itu tadi langkah-langkah dalam menginstal dan men-setup environment dalam membuat mobile app dengan menggunakan React Native. Ikuti terus update terbaru dari Inixindo Jogja agar tidak ketinggalan Tutorial React Native part selanjutnya!

 

 

 

Step by step tutorial from:

Arindra Saktiawan
Instructor of Inixindo Jogja

Teknologi Web Yang Akan Menjadi Tren di Tahun 2019

by | Mar 15, 2019

 

Beberapa waktu yang lalu, kami sempat mempos di media sosial tentang tingkat popularitas bahasa pemrograman di tahun 2018 lalu. Dalam pos tersebut, kita dapat melihat bahwa Javascript (yang seharusnya secara resmi disebut ECMAScript) sebagai bahasa pemrograman web mengalami peningkatan, sementara bahasa pemrograman Java yang digunakan dalam pengembangan aplikasi Android justru menurun. Padahal, saat ini hampir semua orang memiliki smartphone di mana Android menguasai sistem operasi perangkat mobile jika dilihat jumlah penggunanya.

Jika kita menilik kembali 5 tahun belakangan ini, perkembangan teknologi web semakin cepat bila dibandingkan dengan tahun-tahun sebelumnya. Framework-framewok pengembangan aplikasi web pun tumbuh cepat apalagi sejak hadirnya node.js di mana Javascript dapat digunakan sebagai bahasa pemrograman back-end. Belum lagi Google perusahaan teknologi yang memang dulunya lahir sebagai aplikasi web menambahkan banyak fitur dalam Chrome agar para pengembang web dapat mendobrak batasan-batasan dalam aplikasi web.

Beberapa tahun yang lalu kita juga mengenal istilah responsive design yang sering dibawa-bawa oleh pengembang web dalam menawarkan jasanya. Responsive design waktu itu memang suatu yang sebaiknya dimiliki oleh website. Sekarang? Website bisa dikatakan ketinggalan jaman, jadul, atau bahkan bisa disangka artefak jika desainnya tidak responsif. Di tahun 2019 tren teknologi web sudah beralih ke teknologi yang lebih canggih dari sekedar desain yang responsif. Berikut ini adalah tren teknologi web yang bisa Anda bangga-banggakan dalam portfolio Anda sebagai pengembang web.

 

Progressive Web App

Progressive Web App mungkin adalah teknologi yang paling berpengaruh dalam pengembangan aplikasi web. Secara singkat, Progressive Web App (PWA) adalah aplikasi web yang memiliki experience layaknya aplikasi native baik mobile atau desktop. Experience ini dapat berupa push notification, dapat dibuka secara offline, serta akses terhadap hardware yang ada di device seperti GPS, kamera, dan sensor-sensor yang lain.

Teknologi ini diinisiasi oleh Google. Seperti yang kita ketahui bahwa selain Android, Google juga memiliki operating system yang dipakai di laptop dengan harga terjangkau yaitu Chrome OS. Pada dasarnya Chrome OS ini adalah sebuah browser yang dijadikan operating system dengan kernel Linux di dalamnya. Jadi agar environment Chrome OS ini tidak miskin aplikasi Google berusaha mendorong para web developer untuk menjadikan PWA sebagai standar aplikasi web. Selain itu, kabarnya Google juga sedang mengembangkan Fuchsia OS (sebuah operating system mirip Chrome OS tapi untuk perangkat mobile) yang disiapkan untuk menggantikan Android.

 

Teknologi Web Yang Akan Menjadi Tren di Tahun 2019 16

 

Contoh beberapa aplikasi terkenal yang sudah menggunakan teknologi PWA antara lain:

  • Alibaba
  • Twitter
  • The Washington Post

Anda bisa mengikuti Pelatihan Progressive Web App (PWA) dari Inixindo Jogja jika Anda ingin bisa mengembangkan web dengan teknologi ini.

Accelerated Mobile Pages

Siapa yang tak kenal Google News? Aplikasi milik Google yang tersedia di Android dan iOS ini memiliki fungsi membagikan berita ke pengguna sesuai dengan minat dari penggunanya. Konten yang dibagikan oleh Google News tersebut merupakan konten yang telah mendukung format Accelerated Mobile Pages (AMP). Accelerated Mobile Pages (AMP) adalah sebuah framework pengembangan web minimalis. Hanya HTML dan CSS saja dalam halaman web AMP tidak ada Javascript.

Misi dari AMP ini adalah me-load halaman web dalam waktu kurang dari dua detik. Oleh karena itu, penggunaan AMP cocok untuk halaman berita dan blog di mana konten artikel atau foto menjadi elemen utama. Selain itu, keuntungan sebuah halaman web yang mendukung format AMP adalah SERP. Ya! AMP ini sangat berpengaruh terhadap ranking halaman web di Google Search. Bukan rahasia lagi jika algoritma web crawler yang dimiliki Google sekarang lebih mengutamakan performa web sebuah eksternal link.

Anda bisa melihat dokumentasi dari AMP Project di sini.

 

Voice Search Optimization

Voice search memang fitur yang masih jarang dimanfaatkan oleh orang Indonesia. Home speaker pintar dari Amazon, Apple, atau Google bukan barang yang dicari. Memang fitur Google Assistant atau SIRI terpasang secara default di perangkat Android atau iPhone tapi karena terkendala oleh masalah bahasa masih jarang juga orang Indonesia yang memakai fitur ini. Walaupun begitu, seiring dengan berjalannya waktu, AI dari masing-masing voice assistant tentunya akan semakin pintar karena terus akan mempelajari bahasa selain Bahasa Inggris.

Voice search optimization merupakan metode optimasi halaman web agar pengguna dapat melakukan interaksi dengan halaman web tersebut melalui suara. Sebenarnya Voice Search Optimization memiliki tujuan yang mulia yaitu agar sebuah web dapat menjangkau siapa saja termasuk tuna netra. Dalam voice search API terdapat dua komponen yaitu speech recognition dan speech synthesis. Untuk melihat dokumentasinya Anda bisa klik di sini.

 

API First Development

Konektivitas antar aplikasi tentunya sudah menjadi suatu hal yang semestinya di jaman di mana hampir semua orang menggunakan aplikasi dalam aktivitas sehari-hari. Integrasi antar dua aplikasi atau lebih ini biasanya sering dimanfaatkan oleh website e-commerce dengan melakukan integrasi pembayaran, pengiriman, lokasi, ataupun kurs mata uang. Semuanya memanfaatkan teknologi yang disebut application programming interfaces (API).

API memang bukan teknologi baru yang baru di sini adalah development yang berbasis API. Apa bedanya? Biasanya pengembangan aplikasi atau web tidak terfokus pada API. Pengembangan API sering kali dianggap sebagai proyek sampingan yang tidak memiliki proses desain, pengembangan, dan testing yang baik.

Pada development tradisional proses yang biasanya terjadi adalah sebagai berikut:

  1. Tim R&D menciptakan desain aplikasi
  2. Tim back-end developers mengerjakan prototype sementara tim yang lain seperti QA dan front end menunggu.
  3. Setelah prototype jadi tim QA dan front-end mendapatkan akses dan langsung bekerja
  4. Jika terdapat bugs, penambahan fitur, atau pun improvement, siklus di atas akan berulang.

Teknologi Web Yang Akan Menjadi Tren di Tahun 2019 17

Sedangkan pada API first development, suatu tim tidak harus menunggu tim yang lain menyelesaikan sebuah pekerjaannya. API first development menggunakan API mocking (baca di sini untuk mengetahui apa itu API mocking) sehingga QA, back-end, dan front-end bisa bekerja secara simultan.

Teknologi Web Yang Akan Menjadi Tren di Tahun 2019 18

***

Itulah tadi teknologi web yang akan menjadi tren di 2019. Bagi kalian yang ingin membuat project web app tidak ada salahnya untuk belajar lebih dalam mengenai teknologi yang sudah disebutkan tadi.