Ketika kita membuat web, sudah pasti kita harus memahami bagaimana sebuah web bekerja pada browser. Supaya saat kita ingin mengambil data dari API dan menampilkannya pada client, semuanya bisa sesuai.

Segala property yang kita inginkan dari web bisa kita ambil dari bagaimana sebuah web berkomunikasi. Web berkomunikasi menggunakan konsep request dan response

Apa Itu Request Dan Response?

Setiap kita melihat tampilan web sebenarnya kita menerima hasil dari response web. Yang mana sebelum kita melihatnya, kita duharuskan memasukkan url, disebut request

Mari kita perhatikan flow cara kerja request dan respons dibawah

Setelah kita memahami bagaimana web dan browser berkomunikasi menggunakan request dan response, kita bisa memanfaatkan segala property dan data yang dibawah oleh request maupun response

Seperti ketika kita ingin menampilkan isi web untuk url tertentu maka kita bisa mengambil property url pada req.url. Berarti setiap kali client mengetikkan url seperti /api/products maka isi web akan menampilkan data yang dimaksudkan oleh url. Selain /api/products maka akan menampilkan isi yang lain

Selain req.url, ada juga req.method dimana segala method masukkan seperti GET, POST, dan DELETE akan diproses sesuai method tersebut

Untuk mengaturnya kita menggunakan prinsip conditional if. 

 

Perbedaan Request & Response Secara Praktek?

Di tengah tengah menulis kode, pasti terbesit dipikiran bahwa request dan response ini mengapa mirip sekali yaa? Lalu apa yang membedakan

Mungkin ini terjadi karena saat mengisi response statusCode (misalnya) kita mengisinya secara manual

Padahal bukan kita sebagai user yang memintanya demikian, namun kita hanya menanamkan nilai default untuk rancangan web kita

res.writeHead(200, { "Content-Type": "application/json" }); res.end(JSON.stringify(products));

Sedangkan request kita memang literally meminta web untuk menampilkan segala hal yang kita inginkan. Misalnya memasukkan alamat web. yasyaindra.com

Tanpa disadari menuliskan yasyaindra.com pada kolom url browser itu merupakan request kita sebagai user pada web server (yang ada di US tentunya). Atau kita saat kita mengujinya pada aplikasi Postman

Web memberikan response berupa data Json saat kita mengirimkan request url dengan method GET

Tapi saya jarang kok menuliskan URL seperti itu. Saya lebih suka mengklik link yang orang orang bagikan

Nah, sebenarnya tanpa disadari saat kita mengklik sebuah link, link itu berisi url yang ditulis oleh para author dengan cara mempastekannya begitu saja. Selain itu, url atau link yang sangat panjang sehingga kita tak mungkin menghafalkannya

Kesimpulan

Memang saat kita menulis kode program request dan response akan terlihat persis. padahal berbeda. Saat kita menuliskan res.send() misalnya. Ini berarti kita menanamkan response default untuk menampilkan apapun yang kita inginkan, bisa tampilan web. Namun saat kita menulis req.url, misalnya. Kita berharap saat browser menerima url /api/products (misalnya) dari client. Maka ia akan menampilkan response tertentu seperti status kode 200 yang menandakan request telah berhasil

Dalam membangun sistem backend kita mengetahui bahwa segala proses data yang diambil dari API, dari query database, atau bahkan membuat middleware itu harus ditangani di dalam sistem backend

Dan di dalamnya kita juga terkadang membutuhkan beberapa method seperti GET untuk mengambil data, POST untuk mengirimkan data, PUT untuk  merubah data, dan DELETE untuk menghapus data

Ada beberapa kaidah atau konsep yang harus sesuai dengan pembuatan arsitektur backend ini, yang biasanya kita sebut dengan Restful API

Apa Itu Restful API

RESTful API biasa disebut REST API yang memiliki kepanjangan Representational State Transfer Application Programing Interface. Disebut RESTful apabila sebuah aplikasi memiliki sifat layaknya REST yaitu bisa merepresentasikan data yang didapat dari API tertentu, bisa berupa public atau server

Menurut website Redhat, Restful API (atau bisa juga disebut REST API) adalah antar muka aplikasi untuk mengatur batas dan mengijinkan interaksi API dari Web Service

Dalam membuat RESTful API maka kita harus memenuhi Architectural Constraint

Apa Itu Architectural Contstraint?

Architectural Constraint adalah prinsip dasar yang harus dipenuhi oleh RESTful API yang kita buat. Sebenarnya bisa saja sebuah API tidak memenuhi standard Architectural Constraint, aplikasi tetap berjalan, namun agar bisa bekerja lebih optimal maka prinsip AC harus dipenuhi

• Client-server

Prinsip dimana server dan client tidak memiliki ketergantungan dependency dan harus bisa bekerja sama secara masing masing. Client hanya cukup mengetahu URI yang server kirimkan

• Stateless

Artinya segala request bisa diterima oleh server dari client manapun, berapapun jumlahnya. Tanpa adanya ketergantungan request dari request lain

• Cacheable

 Setiap client memiliki local storagenya sendiri atau cookies sebagai penyimpanan sementara dari setiap yang ia load di browser, seumpama data yang ia simpan masih merupakan data yang sama

• Uniform Interface

Client tidak perlu mengerti betapa ribetnya sistem server, namun client hanya cukup menerima data yang sudah dirender, diproses oleh server dan diusahakan menggunakan bahasa pemograman yang sama antar server dan client. Semua supaya seragam (uniform)

• Layered System

Jika kita sudah menerapkan Uniform Interface, maka seharusnya kita sudah menjalankan Layered System dimana proses server dan client berjalan masing masing, dan berbeda

• Code on Demand

Terkadang server mengirimkan data berupa XML dan JSON, dan kita bebas menentukan apapun di dalamnya, bisa berupa function atau baris kode lainnya. Sehingga Code on Demand merupakan optional saja dan tak wajib 

Kesimpulan

Menerapkan AC diatas tidak berarti RESTful API kita tak work atau error. Namun ini merupakan konsep bahwa REST API yang kita buat benar benar Restful.

Sumber: restfulapi

 

Ada beberapa cara kita mengupload file gambar untuk website kita. Ada yang menyimpan/menyalin file yang disimpan ke dalam direktori local, ada juga cara yang langsung menyimpannya ke dalam cloud

Salah satu cloud yang bisa kita manfaatkan untuk mengupload file dan foto adalah Cloudinary

Apa Itu Cloudinary?

Cloudinary adalah cloud yang mampu mengelola segala media, gambar, suara, dan video tanpa sakit kepala. Iya, tanpa kepala. Setidaknya itu yang tertulis di dalam halaman About Us mereka

Cloudinary sangat bermanfaat jika kamu ingin mencari cloud yang gratis, sederhana yang hanya digunakan untuk penyimpanan media media sederhana

Saya menggunakan Cloudinary untuk project saya, Petmee. Sebuah sosial media yang diperuntukan untuk hewan peliharaan.

 

Postingan ini akan membahas cara cara/langkah langkah untuk menggunakan teknologi cloud ini. Syukur syukur bisa menjadi jalan pintas kalian di kala stuck dalam mengerjakan project kalian

Pertama. Buat akun di Cloudinary

 

Kedua. Klik Dashboard, dan terlihat beberapa detail cloud yang kita dimiliki. Mulai dari Cloud Name, dan API Base URL

 

Beberapa detail ini akan kita manfaatkan dan masukkan kedalam kode kita, kedalam class FormData() yang sudah kita inisiasi

 

fetch(" https://api.cloudinary.com/v1_1/dftukfg0i/image/upload", {
      method: "POST",
      body: data,
    })

Kode diatas didapat dari detail cloud yang kita miliki

Untuk mendapatkan socialpet atau preset upload yang kita inginkan, kita bisa membuka Setting, lalu Upload dan cari Upload Preset

Apa Itu Upload Preset?

Upload Preset adalah pengaturan dimana ia mengijinkan perilaku upload secara default. Dibanding mengaturnya sendiri dengan parameter upload dari kode yang kita miliki

Di dalam Upload Preset kalian bisa mengatur beberapa hal tergantung jenis media yang kita inginkan

Upload Preset Name. Isi dengan nama sesuka hati kalian, bisa sesuatu yang dekat dengan project yang kalian inginkan

Disallow Public ID. Matikan

Unique filename. Nyalakan

Use filename or externally defined public ID. Nyalakan

Delivery Type. Pilih Upload

Acces Mode. Pilih Public

 

Jika kode sudah berhasil dan tanpa error. Maka kita coba untuk upload beberapa gambar

Maka proses upload berhasil

 

Ada berbagai macam stack teknologi di luaran sana. Salah satu yang paling populer saat ini adalah MERN.

Apa Itu MERN?

MERN merupakan singkatan dari MongoDB, ExpressJS, ReactJS dan NodeJS. Alasan kenapa stack ini disingkat demikian karena tenologi ini memang sudah selazimnya saling berdampingan.

Seumpama kita ingin menggabungkannya dengan Python atau Java pun, sebenarnya bisa bisa saja. Namun, biasanya kita akan menjumpai kendala karena mungkin ada beberapa tool yang belum tersedia. Sehingga langkah terbaik adalah dengan menggunakan stack teknologi yang populer dan komunitasnya juga masih hidup hingga sekarang

flow teknologi MERN

 

Seperti gambar di atas ReactJS sebagai framework yang memiliki tugas untuk memproses segala tampilan web, lalu ExpressJS akan memberikan hasil proses, bisa masukkan (POST) atau tampilan (GET), jika kita menghendakinya untuk disimpan ke dalam database MongoDB maka kita membutuhkan Mongoose sebagai jembatan antar NodeJS dan MongoDB

Baik kita akan membahas satu persatu stack teknologi MERN ini

ReactJS

React merupakan library yang berisi alat alat untuk membangun user interface. React adalah framework yang canggih dan hingga saat ini menjadi favorit bagi para programmer. React menjunjung tiga sifat yang menjadi alasan kenapa ia sering digunakan

Declarative

React menjadikan tampilan web kita menjadi lebih responsif, hal ini karena React merender segala perubahan yang terjadi dalam web kita menggunakan konsep state

Component-Based

Kita bisa membuat component component yang kita butuhkan dan memasangnya dimanapun yang kita inginkan. Misal, kita membuat tampilan Card, maka dengan sekali tulis kode yang diperlukan, kita bisa mengimportnya dimanapun

Learn Once, Write Anywhere

Yang lebih menarik lagi kita bisa mengembangkan React apapun stack teknologi yang kita kuasai

MongoDB

MongoDB merupakan database yang bersifat object-oriented dimana kita tak perlu mengatur skema database terlebih dahulu. Meskipun di beberapa kasus kita harus menggunakan skema, namun pada dasaranya menggunakan database kitas sama sekali bebas. Bebas memasukkan data yang diinginkan terlepas field dalam database tersebut tersedia atau tidak, bahkan bebas dari segi tipe data dan jumlah karakter yang diinginkan

ExpressJS

ExpressJS merupakan framework pada javascript yang bertugas untuk mengatur API. Kita bisa mengirim data dan menerima data menggunakan GET, POST, DELETE, PUT dan lain sebagainya, semua itu didukung dengan ExpressJS. Tak hanya itu dengan Express JS kita bisa menggunakan middleware, sebuah aplikasi sederhana berbentuk function yang mengolah data keluar masuk, request dan response dalam web

NodeJS

NodeJS berfungsi memberikan kemampuan pada kumpulan kode kita dengan adanya third-party package. Package ini akan membantu produktifitasan aplikasi kita, mulai dari memberikannya tampilan yang baik seperti MaterialUI, membuat sebuah routing sehingga halaman satu bisa pergi ke halaman lain dengan react-router-dom

Manfaat Mempelajari MERN

Tak dipungkiri bahwa stack teknologi ini sedang sangat dibutuhkan dimana mana, Setidaknya salah satu dari stack tersebut memang masih mendominasi lowongan lowongan pekerjaan dalam dunia IT. Jadi seandainya kita tidak mempelajari semuanya pun tak ada masalah. Dan seumpama ingin menjadikannya ahli pada salah satu juga tak ada masalah. 

Tak hanya itu, nyawa dari MERN ini adalah javascript, dan javascript diprediksi akan berumur sangat panjang, dan tak hanya itu javascript merupakan bahasa pemograman yang memungkinkan paa programmer bisa menciptakan apapun. Membuat API? Bisa. Membuat game? Bisa. Membuat web? Bisa. Membuat aplikasi mobile? Bisa. Mengembangkan kecerdasaan buatan (AI)? Bisa. Semuanya bisa.

 

Layaknya merancang aplikasi, merancang database juga perlu memperhatikan apa saja yang harus dibutuhkan ketika design tersebut sudah diimplementasikan.

Ada dua tipe design yang ada, ada Logical Design dan Psyhical Design

Apa perbedaannya?

Logical Design

 Logical design merupakan bentuk design database yang sifatnya abstrak dan sebenarnya tak perlu menentukan secara detail tentang tipe data, jumlah karakter, dan lain sebagainya

Namun hal yang paling kita pikirikan adalah bagaimana menentukan entity dan attribute. Entitity biasanya kita menyebutnya sebagai table.

Contohnya kita diperintahkan untuk membuat logical design dari data data penjualan mobil. Maka Mobil disini merupakan Entity dan harga, jumlah roda, jenis mesin itu merupakan Attribute

Biasanya kita harus menentukan dua table/dua entity. Yaitu, tabel fakta (fact table) dan tabel dimensi (dimension table).

Table Fakta biasanya berisi data data berupa numberik atau jumlah konret dari sebuag data

Sedangkan dimension biasanya berbentuk data data kualitatif, atau data yang mendeskripsikan pengelompokkan data

 

Psyhical Design

Psyhical Design lebih mengutamakan bagaimana database/dataset bisa diimplementasikan pada DBMS atau teknologi yang menujang data data ini dimanfaatkan seperti MySQL, MongoDB, atau PostgreSQL

Psyhical Design tak sesederhana Logical Design, Psyhical Design memerlukan detail lebih spesifik seperti primary key, foreign key dan beberapa karakteristik data yang ada. Seperti jumlah karakter, tipe data.

Bisa dibilang Psyhical Design adalah bentuk blueprint atau purwarupa dari database relasional yang ingin kita buat. Atau lebih modernnya bisa disebut sebagai scheme

 Kesimpulan

Hal yang mebedakan antara Logical Design dengan Psyhical Design adalah dari rincian dan kegunaannya saja. Logical Design menuntut kita menggambarkan dengan dua elemen saja, yaitu fakta dan dimensi, yang mana masing masing membutuhkan Attribute. Sedangkan Psyhical Design adalah sebuag rancangan database kita. Tentu detail dan rincian yang ditawarkan kedua design ini berbeda beda, tergantung kebutuhan kita