Bekerja dengan banyak orang dalam satu projek kadang memiliki dilema tersendiri. Apalagi kalau tugas kita memiliki ketergantungan dengan hasil pekerjaan dari orang lain. Bisa dianggap tidak kerja apabila dalam posisi tersebut.

Seperti tugas [Front-end Developer][WkFrontEndDev] yang merupakan bagian yang berinteraksi dengan pengguna dan juga _Back-end_. Dan lebih panjang lagi kalau bagian _Back-end Web/API_-nya juga terpisah dari _Back-end Middleware_ dan _Back-end database_. [Front-end][WkFrontEndDev] mesti tunggu _Back-end_ menyelesaikan sampai pada level tertentu agar bisa memulai pekerjaannya.

### json-server

Mungkin dari desain _Model_ aplikasinya, kita bisa berandai-andai akan seperti apa data yang akan digunakan. Tapi kita tidak bisa memulai sampai _Back-end_ menyelesaikan antarmuka _API_-nya. Menyelesaikan antarmuka itu memerlukan waktu yang tidak sedikit juga dan waktu terus berjalan yang membuat kita menyelesaikan dan menyempurnakan pekerjaan kita makin sempit. Urusan [Front-end][WkFrontEndDev] dengan pengguna kadang bukan masalah teknik saja, tapi selera.

Oleh karena kita perlu mencari cara agar kita bisa memulai pekerjaan kita secepat mungkin. Salah satu caranya kita bisa membuat semacam  antarmuka bayangan. Kalau kita buat itu akan jadi mubazir juga, mengingat sudah ada yang mengerjakannya dan itu juga bukan tugas kita.

Mengingat jaman sekarang membuat aplikasi [Front-end][WkFrontEndDev] sangat bergantung dengan [Node.js][NodeJs]. Kenapa kita tidak menggunakan itu juga, karena kita bisa menggunakan [json-server][GhJsonSvr] sebagai antarmuka bayangan.

Cukup dengan _install_ dengan perintah `npm install -g json-server` dan kita sudah bisa menggunakannya. Untuk [Node.js][NodeJs] bisa lihat beberapa tulisan di [CodePolitan][] pada referensi di bawah.

![alt text][i-npm-json-server]

[json-server][GhJsonSvr] mudah sekali penggunaannya, yang penting kita sediakan _json file_ seperti dibawah atau disesuaikan dengan _Model_ pada aplikasinya. Contoh di sini kita ada _**'resources'**_ (_posts_, _comments_ dan _profile_) yang akan dijadikan [REST API][REST].

`< db.json >`

```` json
{
    "posts": [{"id": 1, "title": "json-server", "author": "typicode"}],
    "comments": [{"id": 1, "body": "some comment", "postId": 1}],
    "profile": {"name": "typicode"}
}
````

Kita tinggal menjalankan [json-server][GhJsonSvr] dengan perintah `json-server --watch db.json`. Opsi _watch_ bisa tidak digunakan. Setelah itu kita akan melihat _db.json_ tadi dibaca dan terjemahkan menjadi _**'resources'**_. `db.json` itu akan dimasukkan kedalam _memory_ dan bertindak seperti database, maksudnya bisa melakukan operasi _**C**reate_ - _**R**ead_ - _**U**pdate_ - _**D**elete_ (CRUD) tapi itu hanya didalam _memory_ komputer pada saat itu saja.

![alt text][i-json-server-cli]

Kalau kita ke `localhost:3000`, maka dibuatkan juga _index.html_-nya dengan informasi tentang [REST API][REST] yang ada.

![alt text][i-json-server-index]

### Postman

Sekarang kita ingin mencoba apakah [json-server][GhJsonSvr] bekerja dengan baik. Untuk itu kita butuh [REST Client][REST], pada kesempatan ini kita akan menggunakan [Postman][]. [Postman][] merupakan _extensions_ dari _browser chrome_, jadi cukup dipasang lewat _webstrore_-nya.

#### GET

Pada antarmuka [Postman][], pilih _**GET**_ dengan alamat `localhost:3000/posts` untuk _**R**ead_. Cukup kita tekan _Send_ dan kita akan mendapatkan data seperti yang ada di `db.json` untuk _array posts_.

![alt text][i-postman-get]

#### POST

_**GET**_ sukses, sekarang kita akan mencoba _**C**reate_ data di _**resource** posts_. Pada [Postman][] pilih _**POST**_ dengan _url_ yang sama dan disini kita melihat ada _tab Body_ dan kita pilih _raw_ dan _JSON (application/json)_. Dan jangan lupa pada masukkan data yang hendak ditambahkan.

Pada saat kita tekan _Send_, [json-server][GhJsonSvr] akan mengembalikan data yang sama kalau berhasil (lihat status `201 Created`)

![alt text][i-postman-post]

Kita coba _**GET**_ lagi dan hasilnya ada dua data disana.

![alt text][i-postman-post-get]

#### PUT

Untuk _**U**pdate_, kita gunakan _**PUT**_. Yang berbeda di alamatnya (`localhost:3000/posts/2`) adalah penambahan angka 2, ini adalah _id_ dari data yang akan diubah. Sama seperti _**POST**_ opsi _tab Body_-nya, yang berbeda adalah _json_ yang dikirim. Ia tidak berisi _id_, hanya berisi data yang akan dirubah. Dalam kesempatan ini kita coba rubah _title_-nya, dari _Front-end_ menjadi _Front-end Dev_

![alt text][i-postman-put]

Buktinya sudah _**U**pdate_ ya kita _**GET**_ lagi. Hasilnya seperti yang diharapkan.

![alt text][i-postman-put-get]

#### DELETE

_**D**elete_ tidak berbeda dengan _**PUT**_, alamatnya sama dan hanya kita ganti jadi _**DELETE**_ (isi yang ada di _tab Body_ tidak akan digunakan walaupun ada isinya).

![alt text][i-postman-delete]

Dengan [Postman][] kita bisa menyakinkan bahwa _service_ dari [json-server][GhJsonSvr] bisa digunakan sebagai antarmuka bayangan (sebagai [REST API][REST]) untuk membantu kita bekerja sebagai [Front-end][WkFrontEndDev].

### Front-end Development

Sudah ada [REST API][REST] dari [json-server][GhJsonSvr] maka kita bisa coba mensimulasikan bekerja sebagai [Front-end][WkFrontEndDev]. Ceritanya kita akan membuat _CRUD_ aplikasi untuk _**resource** posts_.

#### crudtable.js

Untuk menyingkat tulisan ini, kita tidak membuat dari awal. Kita gunakan saja [crudtable][GhCrudtable]. Aplikasi ini merupakan contoh aplikasi yang dibuat dengan [vue.js][VueJs]. Di [GitHub curdtable][GhCrudtable]-nya kita ambil _file_ [crudtable.js][GhCrudtable].

![alt text][i-crud-table-dist]

#### sweetalert.js

[crudtable][GhCrudtable] menggunakan [sweetalert.js][GhSweetAlert]. Oleh karena itu kita perlu [CSS][]-nya. Kita ambil langsung di [GitHub sweetalert][GhSweetAlert], _file_ `sweetalert.css` saja.

![alt text][i-sweetalert-dist]

#### App

Kita kumpulan kedua file diatas dalam satu _folder_. Setelah itu kita buat _html_-nya. Dalam `index.html` digunakan [Bootstrap][] dan [jQuery][] (karena [bootstrap.js][Bootstrap] memerlukannya). Sedangkan [vue.js][VueJs], [sweetalert.js][GhSweetAlert] dan beberapa _library_ pendukungnya sudah ter-_bundle_ dalam [crudtable.js][GhCrudtable].

`< index.html >`

```` html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Vue CRUD Test</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="sweetalert.css">
        <style>
            html {position: relative;min-height: 100%;}
            body {margin-bottom: 60px;}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="page-header">
                <h1>Vue CRUD Test</h1>
            </div>
            <div id="crudsection">
                <crud-table endpoint="http://localhost:3000/posts" columns="[{"label":"id","type":"text","required":true},{"label":"title","type":"text","required":true},{"label":"author","type":"text","required":true}]"></crud-table>
            </div> 
        </div>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <script src="crudtable.js"></script>
    </body>
</html>
````

Ini hasil akhir dari aplikasi ini. Sederhana bukan.

![alt text][i-crud-layout]

## http-server

Lalu bagaimana kita bisa menjalankan aplikasi ini. Sedangkan [json-server][GhJsonSvr] adalah [REST API][REST], tidak mungkin kita taruh disana. Oleh karena itu kita perlu [http-server][GhHttpSvr] sebagai _web-server_ untuk aplikasi ini.

Lewat [NPM][] kita pasang dengan perintah `npm install -g http-server`.

![alt text][i-npm-http-server]

Untuk menjalankannya mudah saja. Pada _folder_ aplikasi, kita jalankan perintah `http-server -o -c -1`.

![alt text][i-http-server-cli]

Dengan opsi `-o`, maka _browser_ akan terbuka dengan alamat `127.0.0.1:8080`. Operasi _CRUD_ tetap dapat dilakukan seperti dengan [Postman][], bedanya ini dengan antarmuka yang merupakan tugas dari [Front-end][WkFrontEndDev].

![alt text][i-http-server-index]

### Penutup

[Front-end Developer][WkFrontEndDev] akan banyak terbantu dengan [json-server][GhJsonSvr] untuk ketersediaan data dengan [REST API][REST] dan [http-server][GhHttpSvr] sebagai _web-server_. Dengan begitu bisa memulai perkerjaan lebih awal dan akan lebih mudah melakukan penyesuaian ketika _Back-end_-nya sudah siap.

### Referensi

* [Node.js][NodeJs]
* [Postman][]
* [GitHub: json-server][GhJsonSvr]
* [GitHub: http-server][GhHttpSvr]
* [GitHub: crudtable][GhCrudtable]
* [GitHub: sweetalert][GhSweetAlert]
* [Codepolitan: Mengenal Node.js][CpNodeJs]
* [Codepolitan: Cara Install Node.js][CpNodeJsInstall]
* [Codepolitan: Mengenal RESTful Web Services][CpRESTful]

[CpRESTful]: https://www.codepolitan.com/mengenal-restful-web-services "Codepolitan: Mengenal RESTful Web Services"
[CpNodeJs]: https://www.codepolitan.com/mengenal-nodejs-5880234fe9ae3 "Codepolitan: Mengenal Node.js"
[CpNodeJsInstall]: https://www.codepolitan.com/cara-install-nodejs "Codepolitan: Cara Install Node.js"

[WkFrontEndDev]: https://en.wikipedia.org/wiki/Front-end_web_development "Wikipedia: Front-end web development"
[REST]: https://en.wikipedia.org/wiki/Representational_state_transfer "Wikipedia: Representational state transfer (REST)"
[CSS]: https://en.wikipedia.org/wiki/Cascading_Style_Sheets "Wikipedia: Cascading Style Sheets (CSS)"

[Postman]: https://www.getpostman.com/ "Postman Website"
[VueJs]: https://vuejs.org/ "Vue.js Website"
[jQuery]: https://jquery.com/ "jQuery Website"
[Bootstrap]: http://getbootstrap.com/getting-started/ "Bootstrap Website"
[NodeJs]: https://nodejs.org/ "Node.js Website"
[NPM]: https://en.wikipedia.org/wiki/Npm_(software) "Wikipedia: NPM"

[GhJsonSvr]: https://github.com/typicode/json-server "GitHub: typicode/json-server"
[GhHttpSvr]: https://github.com/indexzero/http-server "GitHub: indexzero/http-server"
[GhCrudtable]: https://github.com/heruujoko/crudtable "GitHub: heruujoko/crudtable"
[GhSweetAlert]: https://github.com/t4t5/sweetalert "GitHub: t4t5/sweetalert"

[CodePolitan]: https://www.codepolitan.com/ "CodePolitan"

[i-crud-layout]: https://dede.gitlab.io/a/i/p/nodejs-front-end/crud-layout.png "crud files"

[i-npm-json-server]: https://dede.gitlab.io/a/i/p/nodejs-front-end/npm-json-server.png "NPM json-server"
[i-json-server-cli]: https://dede.gitlab.io/a/i/p/nodejs-front-end/json-server-cli.png "json-server CLI"
[i-json-server-index]: https://dede.gitlab.io/a/i/p/nodejs-front-end/json-server-index.png "json-server default index"

[i-npm-http-server]: https://dede.gitlab.io/a/i/p/nodejs-front-end/npm-http-server.png "NPM http-server"
[i-http-server-cli]: https://dede.gitlab.io/a/i/p/nodejs-front-end/http-server-cli.png "http-server CLI"
[i-http-server-index]: https://dede.gitlab.io/a/i/p/nodejs-front-end/http-server-index.png "http-server default index"

[i-crud-table-dist]: https://dede.gitlab.io/a/i/p/nodejs-front-end/crud-table-dist.png "crudtable Dist"
[i-sweetalert-dist]: https://dede.gitlab.io/a/i/p/nodejs-front-end/sweetalert-dist.png "sweetalert Dist"

[i-postman-get]: https://dede.gitlab.io/a/i/p/nodejs-front-end/postman-get.png "Postman GET"
[i-postman-post]: https://dede.gitlab.io/a/i/p/nodejs-front-end/postman-post.png "Postman POST"
[i-postman-post-get]: https://dede.gitlab.io/a/i/p/nodejs-front-end/postman-post-get.png "Postman POST -> GET"
[i-postman-put]: https://dede.gitlab.io/a/i/p/nodejs-front-end/postman-put.png "Postman PUT"
[i-postman-put-get]: https://dede.gitlab.io/a/i/p/nodejs-front-end/postman-put-get.png "Postman PUT -> GET"
[i-postman-delete]: https://dede.gitlab.io/a/i/p/nodejs-front-end/postman-delete.png "Postman DELETE"


Front-end Development dengan Node.js

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Front-end Development dengan Node.js

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

IBM Swift Sandbox, Belajar dan Tes Kode Program Swift Online

T-SQL : Greatest Function di SQL Server

WinForm: Cross-Thread

Implementasi Math Summation

PeachPie, PHP compiler untuk .NET

UrhoSharp Game-Engine dari Xamarin