[{"data":1,"prerenderedAt":823},["ShallowReactive",2],{"tag-labels":3,"site-header":4,"article-menggunakan-typescript-dengan-node-js-dan-express-id":72},{},{"featuredPost":5,"navigations":29},{"id":6,"title":7,"title_en":8,"slug":9,"excerpt":10,"excerpt_en":11,"has_translation":12,"published_at":13,"reading_time":14,"hidden_from_listing":15,"tags":16,"thumbnail_image":21,"og_image":22,"series":23,"authors":28},110,"Ketika Pilih Framework Cuma Biar Kelihatan Beda","When You Pick a Framework Just to Look Different","ketika-pilih-framework-cuma-biar-kelihatan-beda","Terakhir kali kamu milih framework atau library baru, itu karena masalahmu butuh alat itu, atau karena alatnya kedengaran keren dan belum banyak yang pakai? Pertanyaan ini nggak enak dijawab. Soalnya keputusan teknologi sering diambil dengan alasan yang nggak pernah ditulis di dokumen teknis mana pun.","The last time you chose a new framework or library, was it because your problem needed that tool, or because it sounded cool and few people around you were using it? That question is uncomfortable. Technology decisions are often made for reasons that never appear in any technical document.",true,"2026-10-06T15:25:21.000Z",5,false,[17,18,19,20],"karier","framework","opini","pengalaman",null,"\u002Fog\u002Fketika-pilih-framework-cuma-biar-kelihatan-beda.png",{"id":24,"title":25,"title_en":26,"slug":27},9,"Artikel","Articles","all",[],[30,46,67],{"collection":31,"item":32},"series",{"__typename":31,"title":25,"title_en":26,"slug":27,"children_series":33},[34,38,42],{"title":35,"title_en":36,"slug":37},"Kecerdasan Artifisial","Artificial Intelligence","kecerdasan-artifisial",{"title":39,"title_en":40,"slug":41},"Konsep Dasar Pemrograman","Programming Fundamentals","konsep-dasar-pemrograman",{"title":43,"title_en":44,"slug":45},"Algoritma dan Struktur Data","Algorithms and Data Structures","algoritma-struktur-data",{"collection":31,"item":47},{"__typename":31,"title":48,"title_en":48,"slug":49,"children_series":50},"Tutorial","tutorial",[51,55,59,63],{"title":52,"title_en":53,"slug":54},"Belajar Python","Learning Python","belajar-python",{"title":56,"title_en":57,"slug":58},"Belajar Golang","Learning Go","belajar-golang",{"title":60,"title_en":61,"slug":62},"Belajar Java","Learning Java","belajar-java",{"title":64,"title_en":65,"slug":66},"Belajar Pascal","Learning Pascal","belajar-pascal",{"collection":31,"item":68},{"__typename":31,"title":69,"title_en":69,"slug":70,"children_series":71},"Lab","lab",[],{"article":73,"renderedBody":705,"renderedTakeaway":706,"latestArticles":707,"toc":804},{"id":74,"title":75,"title_en":76,"slug":77,"excerpt":78,"excerpt_en":79,"has_translation":12,"published_at":80,"reading_time":14,"hidden_from_listing":15,"tags":81,"thumbnail_image":21,"og_image":86,"series":87,"authors":699,"body_locale":700,"available_locales":701,"body":703,"takeway":704,"prerequisite":21},16,"Menggunakan TypeScript dengan Node.js dan Express","Using TypeScript with Node.js and Express","menggunakan-typescript-dengan-node-js-dan-express","Pengen bikin server Express di Node.js tapi pakai fitur-fitur keren TypeScript? Yuk, intip cara setup lengkapnya dari nol di sini!","Want to build an Express server on Node.js but use TypeScript's nicer features? Here's the complete setup from scratch.","2026-06-15T02:38:30.735Z",[82,83,84,85],"javascript","nodejs","express","typescript","\u002Fog\u002Fmenggunakan-typescript-dengan-node-js-dan-express.png",{"id":24,"title":25,"title_en":26,"slug":27,"description":21,"description_en":88,"articles":89,"children_series":692,"parent_series":21},"Everything that isn't a tutorial or a lab: explainers, opinions, and notes from building things.",[90,104,119,133,146,149,164,178,193,207,219,234,258,276,296,314,332,352,368,385,403,418,433,449,464,479,493,509,527,546,561,580,597,609,613,629,643,658,674],{"id":91,"title":92,"title_en":93,"slug":94,"excerpt":95,"excerpt_en":96,"has_translation":12,"published_at":97,"reading_time":14,"hidden_from_listing":15,"tags":98,"thumbnail_image":21,"og_image":101,"series":102,"authors":103},11,"Apa Kabar JavaScript? Rilis State of JS 2022","How's JavaScript Doing? The State of JS 2022 Results Are In","apa-kabar-javascript-rilis-state-of-js-2022","Survei State of JS 2022 resmi dirilis dengan lonjakan responden yang luar biasa! Framework dan build tool apa saja yang berhasil mencuri perhatian tahun ini?","The State of JS 2022 survey is out, and the respondent count jumped hard. Which frameworks and build tools actually stole the year?","2026-06-15T02:36:30.205Z",[82,99,100],"web","news","\u002Fog\u002Fapa-kabar-javascript-rilis-state-of-js-2022.png",{"id":24,"title":25,"title_en":26,"slug":27},[],{"id":105,"title":106,"title_en":107,"slug":108,"excerpt":109,"excerpt_en":110,"has_translation":12,"published_at":111,"reading_time":14,"hidden_from_listing":15,"tags":112,"thumbnail_image":21,"og_image":116,"series":117,"authors":118},12,"Buat PowerShell Lebih Berwarna dengan Starship","Make PowerShell More Colorful with Starship","buat-powershell-lebih-berwarna-dengan-starship","Bosen sama tampilan PowerShell yang hitam putih dan kaku? Yuk, sulap terminalmu jadi lebih interaktif, estetik, dan berwarna pakai Starship!","Tired of PowerShell looking black, white, and stiff? Turn your terminal into something interactive, aesthetic, and colorful with Starship!","2026-06-15T02:37:24.143Z",[113,114,115],"shell","windows","powershell","\u002Fog\u002Fbuat-powershell-lebih-berwarna-dengan-starship.png",{"id":24,"title":25,"title_en":26,"slug":27},[],{"id":120,"title":121,"title_en":122,"slug":123,"excerpt":124,"excerpt_en":125,"has_translation":12,"published_at":126,"reading_time":14,"hidden_from_listing":15,"tags":127,"thumbnail_image":21,"og_image":130,"series":131,"authors":132},13,"Hal yang Perlu Diperhatikan Sebelum Pindah ke Linux","Things to Consider Before Switching to Linux","hal-yang-perlu-diperhatikan-sebelum-pindah-ke-linux","Tertarik migrasi dari Windows ke Linux tapi masih ragu? Yuk, pelajari kelebihan, kekurangan, dan persiapan penting sebelum kamu benar-benar pindah!","Tempted to migrate from Windows to Linux but still unsure? Learn the upsides, the downsides, and the prep you need before you actually switch.","2026-06-15T02:37:24.570Z",[128,114,129],"linux","foss","\u002Fog\u002Fhal-yang-perlu-diperhatikan-sebelum-pindah-ke-linux.png",{"id":24,"title":25,"title_en":26,"slug":27},[],{"id":134,"title":135,"title_en":136,"slug":137,"excerpt":138,"excerpt_en":139,"has_translation":12,"published_at":140,"reading_time":14,"hidden_from_listing":15,"tags":141,"thumbnail_image":21,"og_image":143,"series":144,"authors":145},15,"Kenapa Ada Banyak Sekali Distro Linux?","Why Are There So Many Linux Distros?","kenapa-ada-banyak-sekali-distro-linux","Pernah bingung pas mau install Linux tapi malah disuguhi puluhan pilihan distro? Tenang, kalian nggak sendirian. Yuk, cari tahu kenapa distro Linux bisa sebanyak itu dan apa bedanya!","Were you confused when installing Linux handed you dozens of distro options? You're not alone. Here's why there are so many, and what actually differs.","2026-06-15T02:38:14.569Z",[128,142],"distro","\u002Fog\u002Fkenapa-ada-banyak-sekali-distro-linux.png",{"id":24,"title":25,"title_en":26,"slug":27},[],{"id":74,"title":75,"title_en":76,"slug":77,"excerpt":78,"excerpt_en":79,"has_translation":12,"published_at":80,"reading_time":14,"hidden_from_listing":15,"tags":81,"thumbnail_image":21,"og_image":86,"series":147,"authors":148},{"id":24,"title":25,"title_en":26,"slug":27},[],{"id":150,"title":151,"title_en":152,"slug":153,"excerpt":154,"excerpt_en":155,"has_translation":12,"published_at":156,"reading_time":14,"hidden_from_listing":15,"tags":157,"thumbnail_image":21,"og_image":161,"series":162,"authors":163},17,"Pemrograman Asynchronous vs Multithreading, Apa Sih Bedanya?","Asynchronous Programming vs Multithreading: What's the Real Difference?","pemrograman-asynchronous-dan-multithreading-apa-bedanya","Sering dengar istilah asynchronous dan multithreading pas ngoding tapi masih bingung bedanya? Yuk, kita bedah perbedaannya lewat analogi bikin mi instan yang gampang dipahami!","You keep hearing asynchronous and multithreading while coding, but the difference stays fuzzy? Let's take it apart with an instant-noodle analogy you can follow.","2026-06-15T02:38:31.093Z",[158,159,160],"pemrograman","concurrency","tips-coding","\u002Fog\u002Fpemrograman-asynchronous-dan-multithreading-apa-bedanya.png",{"id":24,"title":25,"title_en":26,"slug":27},[],{"id":165,"title":166,"title_en":167,"slug":168,"excerpt":169,"excerpt_en":170,"has_translation":12,"published_at":171,"reading_time":14,"hidden_from_listing":15,"tags":172,"thumbnail_image":21,"og_image":175,"series":176,"authors":177},18,"React, Angular, atau Vue: Pilih Framework yang Mana?","React, Angular, or Vue: Which Framework Should You Pick?","react-angular-vue-pilih-framework-yang-mana","Bingung menentukan pilihan di antara React, Angular, dan Vue untuk proyek web kalian berikutnya? Tenang, yuk kita bandingkan kelebihan masing-masing di sini!","Stuck choosing between React, Angular, and Vue for your next web project? Here's a side-by-side look at what each one actually does well.","2026-06-15T02:38:31.431Z",[173,174,18],"web-development","frontend","\u002Fog\u002Freact-angular-vue-pilih-framework-yang-mana.png",{"id":24,"title":25,"title_en":26,"slug":27},[],{"id":179,"title":180,"title_en":181,"slug":182,"excerpt":183,"excerpt_en":184,"has_translation":12,"published_at":185,"reading_time":14,"hidden_from_listing":15,"tags":186,"thumbnail_image":21,"og_image":190,"series":191,"authors":192},19,"Static Typing dan Dynamic Typing: Apa Bedanya?","Static Typing vs Dynamic Typing: What's the Difference?","static-typing-dan-dynamic-typing-apa-bedanya","Pernah bingung kenapa di Java tipe data harus dideklarasikan, sementara di Python tinggal pakai aja? Yuk, cari tahu perbedaan static typing dan dynamic typing di sini!","Ever wondered why Java makes you declare a type while Python just takes the value? Here's the difference between static typing and dynamic typing.","2026-06-15T02:39:15.869Z",[187,188,189],"programming","types","comparison","\u002Fog\u002Fstatic-typing-dan-dynamic-typing-apa-bedanya.png",{"id":24,"title":25,"title_en":26,"slug":27},[],{"id":194,"title":195,"title_en":196,"slug":197,"excerpt":198,"excerpt_en":199,"has_translation":12,"published_at":200,"reading_time":14,"hidden_from_listing":15,"tags":201,"thumbnail_image":21,"og_image":204,"series":205,"authors":206},20,"Tailwind v3.0 Rilis: Ada JIT, Arbitrary Values, dan Banyak Lagi!","Tailwind v3.0 Is Out: JIT, Arbitrary Values, and Plenty More","tailwind-v3-0-rilis-jit-arbitrary-dan-banyak-lagi","Tailwind CSS v3.0 resmi dirilis dengan segudang peningkatan performa yang bikin proses coding makin asyik. Apa aja sih fitur andalan yang wajib dicoba?","Tailwind CSS v3.0 shipped with a pile of performance upgrades that make styling more fun. Which features are worth trying first?","2026-06-15T02:39:25.372Z",[202,203,173],"tailwind-css","css-framework","\u002Fog\u002Ftailwind-v3-0-rilis-jit-arbitrary-dan-banyak-lagi.png",{"id":24,"title":25,"title_en":26,"slug":27},[],{"id":208,"title":209,"title_en":210,"slug":211,"excerpt":212,"excerpt_en":213,"has_translation":12,"published_at":214,"reading_time":14,"hidden_from_listing":15,"tags":215,"thumbnail_image":21,"og_image":216,"series":217,"authors":218},21,"TypeScript: JavaScript dengan Gaya dan Tipe Data Statis","TypeScript: JavaScript with Style and Static Types","typescript-javascript-dengan-gaya","Pernah pusing gara-gara runtime error di JavaScript? Yuk, kenalan dengan TypeScript yang bawa fitur static typing biar kode kalian makin rapi dan aman!","Tired of runtime errors in JavaScript? Meet TypeScript, which brings static typing so your code stays tidier and safer.","2026-06-15T02:39:25.712Z",[85,82,173],"\u002Fog\u002Ftypescript-javascript-dengan-gaya.png",{"id":24,"title":25,"title_en":26,"slug":27},[],{"id":220,"title":221,"title_en":222,"slug":223,"excerpt":224,"excerpt_en":225,"has_translation":12,"published_at":226,"reading_time":14,"hidden_from_listing":15,"tags":227,"thumbnail_image":21,"og_image":231,"series":232,"authors":233},22,"Yang Baru di Nuxt 3: Nitro Engine, Vite, dan Fitur Keren Lainnya","What's New in Nuxt 3: Nitro Engine, Vite, and Other Sharp Features","yang-baru-di-nuxt-3-nitro-vite-dan-banyak-lagi","Nuxt 3 hadir membawa perubahan arsitektur besar-besaran untuk menyelaraskan dengan Vue 3. Penasaran apa saja peningkatan performa dan fitur barunya?","Nuxt 3 brings a sweeping architecture change to line up with Vue 3. Here's what got faster and which new features are worth trying.","2026-06-15T02:39:26.086Z",[228,229,230],"nuxt-3","vue-3","frontend-framework","\u002Fog\u002Fyang-baru-di-nuxt-3-nitro-vite-dan-banyak-lagi.png",{"id":24,"title":25,"title_en":26,"slug":27},[],{"id":235,"title":236,"title_en":237,"slug":238,"excerpt":239,"excerpt_en":240,"has_translation":12,"published_at":241,"reading_time":242,"hidden_from_listing":15,"tags":243,"thumbnail_image":21,"og_image":249,"series":250,"authors":251},23,"Kenapa Pakai FastAPI dan Kenapa Dia Kenceng Banget?","Why Use FastAPI, and Why Is It So Fast?","kenapa-pakai-fastapi-dan-kenapa-dia-kenceng-banget","Sering dengar FastAPI tapi masih bingung kenapa dia bisa ngebut kayak NodeJS dan Go? Yuk, kita bedah bareng rahasia ASGI, sihir Pydantic, sampai dokumentasi otomatisnya!","You keep hearing about FastAPI but still wonder how it can keep pace with NodeJS and Go? Let's take apart ASGI, the Pydantic magic, and the automatic docs.","2026-08-16T13:22:46.956Z",4,[244,245,246,247,248],"fastapi","python","backend","asgi","pydantic","\u002Fog\u002Fkenapa-pakai-fastapi-dan-kenapa-dia-kenceng-banget.png",{"id":24,"title":25,"title_en":26,"slug":27},[252],{"authors_id":253},{"id":254,"name":255,"slug":256,"role":257,"profile_picture":21},2,"Inva","inva","Writer",{"id":259,"title":260,"title_en":261,"slug":262,"excerpt":263,"excerpt_en":264,"has_translation":12,"published_at":265,"reading_time":242,"hidden_from_listing":15,"tags":266,"thumbnail_image":21,"og_image":271,"series":272,"authors":273},24,"Kenapa Butuh Rate Limiting?","Why Do You Need Rate Limiting?","kenapa-butuh-rate-limiting","Pernah nggak sih endpoint login kalian diserbu bot yang nyoba nembak ribuan password cuma dalam semenit? Yuk, kita bahas kenapa Rate Limiting itu wajib, plus cara masangnya di FastAPI!","Has your login endpoint ever been hammered by a bot trying thousands of passwords in a single minute? Here is why rate limiting is mandatory, and how to wire it into FastAPI.","2026-08-17T04:00:27.728Z",[246,267,268,269,270,244],"rate-limiting","system-design","api","redis","\u002Fog\u002Fkenapa-butuh-rate-limiting.png",{"id":24,"title":25,"title_en":26,"slug":27},[274],{"authors_id":275},{"id":254,"name":255,"slug":256,"role":257,"profile_picture":21},{"id":277,"title":278,"title_en":279,"slug":280,"excerpt":281,"excerpt_en":282,"has_translation":12,"published_at":283,"reading_time":14,"hidden_from_listing":15,"tags":284,"thumbnail_image":21,"og_image":288,"series":289,"authors":290},25,"Kenapa Event Queue Bikin Backend Kalian Nggak Gampang Tumbang?","Why an Event Queue Keeps Your Backend From Collapsing","kenapa-event-queue-bikin-backend-kamu-nggak-gampang-tumbang","Pernah klik tombol Beli Sekarang dan notifikasi suksesnya muncul dalam sekejap, padahal di belakang layar ada invoice, email, sampai push notification yang harus dibuat? Rahasianya Event Queue. Yuk, kita bedah!","You hit Buy Now and the success notice appears instantly, while an invoice, an email, and a push notification still have to be built behind the scenes. The secret is the event queue.","2026-08-17T04:11:23.685Z",[246,268,285,286,287],"event-queue","message-broker","architecture","\u002Fog\u002Fkenapa-event-queue-bikin-backend-kamu-nggak-gampang-tumbang.png",{"id":24,"title":25,"title_en":26,"slug":27},[291],{"authors_id":292},{"id":293,"name":294,"slug":295,"role":257,"profile_picture":21},1,"Daffa Izzuddin","izzudd",{"id":297,"title":298,"title_en":299,"slug":300,"excerpt":301,"excerpt_en":302,"has_translation":12,"published_at":303,"reading_time":14,"hidden_from_listing":15,"tags":304,"thumbnail_image":21,"og_image":309,"series":310,"authors":311},26,"REST API vs gRPC: Kapan Sebaiknya Mulai Pindah dari JSON?","REST API vs gRPC: When Should You Start Moving Off JSON?","rest-api-vs-grpc-kapan-sebaiknya-pindah-dari-json","Pernah nggak sih sistem mikroservis kalian mulai kerasa berat padahal cuma tuker-tukeran data internal? Belum tentu masalah servernya. Yuk, kita bahas kapan REST + JSON masih juara dan kapan gRPC jadi jawabannya!","Has your microservice system started feeling heavy even though it only shuffles internal data? The server may not be the problem. Here is when REST + JSON still wins, and when gRPC is the answer.","2026-08-17T04:26:10.249Z",[246,305,306,307,308,268],"grpc","rest-api","microservices","protobuf","\u002Fog\u002Frest-api-vs-grpc-kapan-sebaiknya-pindah-dari-json.png",{"id":24,"title":25,"title_en":26,"slug":27},[312],{"authors_id":313},{"id":254,"name":255,"slug":256,"role":257,"profile_picture":21},{"id":315,"title":316,"title_en":317,"slug":318,"excerpt":319,"excerpt_en":320,"has_translation":12,"published_at":321,"reading_time":14,"hidden_from_listing":15,"tags":322,"thumbnail_image":21,"og_image":327,"series":328,"authors":329},27,"Background Worker & Task Queue: Jangan Jalankan Proses Berat di Request HTTP!","Background Workers & Task Queues: Don't Run Heavy Work Inside an HTTP Request","background-worker-task-queue-jangan-jalankan-proses-berat-di-http","Pernah nggak sih kalian klik Daftar Akun lalu halaman loading muter sampai 15 detik tanpa kepastian? Penyebabnya klasik banget. Yuk, kita bahas kenapa proses berat nggak boleh dijalanin di request HTTP!","You tap Create Account and the loading page spins for 15 seconds with no answer? The cause is classic. Here is why heavy work does not belong in an HTTP request.","2026-08-17T04:26:10.284Z",[246,323,324,244,325,270,326],"task-queue","celery","rabbitmq","async","\u002Fog\u002Fbackground-worker-task-queue-jangan-jalankan-proses-berat-di-http.png",{"id":24,"title":25,"title_en":26,"slug":27},[330],{"authors_id":331},{"id":293,"name":294,"slug":295,"role":257,"profile_picture":21},{"id":333,"title":334,"title_en":335,"slug":336,"excerpt":337,"excerpt_en":338,"has_translation":12,"published_at":339,"reading_time":14,"hidden_from_listing":15,"tags":340,"thumbnail_image":21,"og_image":347,"series":348,"authors":349},28,"Mengatasi N+1 Query Problem: Musuh Tersembunyi Performa Backend","Taming the N+1 Query Problem: The Hidden Enemy of Backend Performance","mengatasi-n-plus-1-query-problem-musuh-tersembunyi-backend","Pernah bikin endpoint yang cuma nampilin 50 postingan beserta nama penulisnya, tapi response-nya lambat banget? Bisa jadi kalian kena N+1 Query. Yuk, kita bedah penyebabnya dan cara memberantasnya!","You built an endpoint that only lists 50 posts with their author names, and the response takes 2-3 seconds? You may have hit N+1 Query. Here is the cause, and the cure.","2026-08-17T04:26:10.309Z",[341,342,343,344,345,346,246],"database","sql","orm","sqlalchemy","django","performance","\u002Fog\u002Fmengatasi-n-plus-1-query-problem-musuh-tersembunyi-backend.png",{"id":24,"title":25,"title_en":26,"slug":27},[350],{"authors_id":351},{"id":293,"name":294,"slug":295,"role":257,"profile_picture":21},{"id":353,"title":354,"title_en":355,"slug":356,"excerpt":357,"excerpt_en":358,"has_translation":12,"published_at":359,"reading_time":242,"hidden_from_listing":15,"tags":360,"thumbnail_image":21,"og_image":363,"series":364,"authors":365},29,"Memahami Database Indexing: Rahasia Query Super Cepat","Understanding Database Indexing: The Secret to Very Fast Queries","memahami-database-indexing-rahasia-query-super-cepat","Query kalian mulai lelet padahal data baru nembus jutaan baris? Sebelum buru-buru *upgrade* server, yuk cek dulu *index*-nya. Yuk, kita bedah gimana *database indexing* sebenernya kerja!","Your queries have gone sluggish even though the data only just crossed a million rows? Before you rush to upgrade the server, check the indexes. Here is how database indexing actually works.","2026-08-17T04:26:10.325Z",[341,342,361,362,346,246],"postgresql","indexing","\u002Fog\u002Fmemahami-database-indexing-rahasia-query-super-cepat.png",{"id":24,"title":25,"title_en":26,"slug":27},[366],{"authors_id":367},{"id":293,"name":294,"slug":295,"role":257,"profile_picture":21},{"id":369,"title":370,"title_en":371,"slug":372,"excerpt":373,"excerpt_en":374,"has_translation":12,"published_at":375,"reading_time":242,"hidden_from_listing":15,"tags":376,"thumbnail_image":21,"og_image":380,"series":381,"authors":382},31,"Mengenal Redis: Lebih dari Sekadar In-Memory Cache","Getting to Know Redis: More Than Just an In-Memory Cache","mengenal-redis-lebih-dari-sekadar-in-memory-cache","Masih nganggep Redis cuma buat caching? Padahal dia bisa jadi leaderboard, message broker, sampai rate limiter lho. Yuk, kita bedah semua kemampuannya!","Still treating Redis as nothing but a cache? It can be a leaderboard, a message broker, even a rate limiter. Let's take apart everything it can do.","2026-08-17T04:26:10.360Z",[270,246,377,378,379,245],"cache","nosql","in-memory","\u002Fog\u002Fmengenal-redis-lebih-dari-sekadar-in-memory-cache.png",{"id":24,"title":25,"title_en":26,"slug":27},[383],{"authors_id":384},{"id":293,"name":294,"slug":295,"role":257,"profile_picture":21},{"id":386,"title":387,"title_en":388,"slug":389,"excerpt":390,"excerpt_en":391,"has_translation":12,"published_at":392,"reading_time":242,"hidden_from_listing":15,"tags":393,"thumbnail_image":21,"og_image":398,"series":399,"authors":400},32,"Docker Compose untuk Developer Santai: Satu Perintah Buat Jalankan Semua Service","Docker Compose for the Relaxed Developer: One Command to Run Every Service","docker-compose-untuk-developer-santai","Pernah nggak kalian ngulang-ngulang perintah `docker run` cuma buat nyalain web, database, dan cache satu-satu? Capek, kan? Yuk, kita rapikan semuanya jadi satu file dan satu perintah!","Do you keep retyping `docker run` just to bring up the web app, the database, and the cache one at a time? Here is how to fold all of them into one file and one command.","2026-08-17T04:26:10.375Z",[394,395,396,397,246],"docker","docker-compose","devops","containers","\u002Fog\u002Fdocker-compose-untuk-developer-santai.png",{"id":24,"title":25,"title_en":26,"slug":27},[401],{"authors_id":402},{"id":293,"name":294,"slug":295,"role":257,"profile_picture":21},{"id":404,"title":405,"title_en":406,"slug":407,"excerpt":408,"excerpt_en":409,"has_translation":12,"published_at":410,"reading_time":242,"hidden_from_listing":15,"tags":411,"thumbnail_image":21,"og_image":413,"series":414,"authors":415},33,"Berkenalan dengan RabbitMQ: Si Kurir Pesan Serba Bisa","Meet RabbitMQ: The Versatile Message Courier","berkenalan-dengan-rabbitmq-si-kurir-pesan-serba-bisa","Pernah nggak sih kalian klik Bayar Sekarang dan notifikasi suksesnya muncul seketika, padahal email konfirmasi baru nyampe beberapa detik kemudian? Rahasianya ada di satu kurir tak terlihat. Yuk, kita kenalan sama RabbitMQ!","You tap Pay Now and the success notice appears instantly, while the confirmation email only lands a few seconds later? The secret is one invisible courier. Meet RabbitMQ.","2026-08-17T04:26:10.388Z",[325,286,246,307,326,412],"queue","\u002Fog\u002Fberkenalan-dengan-rabbitmq-si-kurir-pesan-serba-bisa.png",{"id":24,"title":25,"title_en":26,"slug":27},[416],{"authors_id":417},{"id":254,"name":255,"slug":256,"role":257,"profile_picture":21},{"id":419,"title":420,"title_en":421,"slug":422,"excerpt":423,"excerpt_en":424,"has_translation":12,"published_at":425,"reading_time":242,"hidden_from_listing":15,"tags":426,"thumbnail_image":21,"og_image":428,"series":429,"authors":430},34,"Kenapa Backend Butuh Database Connection Pooling?","Why Does a Backend Need Database Connection Pooling?","kenapa-backend-butuh-database-connection-pooling","Pernah kena error Too many connections padahal CPU server masih santai di angka 30%? Masalahnya bukan di query kalian, tapi di cara aplikasi ngobrol sama database. Yuk, kenalan sama Connection Pooling!","Ever hit Too many connections while server CPU is still lounging at 30%? The problem is not your queries, it is how the application talks to the database. Meet connection pooling.","2026-08-24T06:06:47.088Z",[246,341,361,427,268,346],"connection-pooling","\u002Fog\u002Fkenapa-backend-butuh-database-connection-pooling.png",{"id":24,"title":25,"title_en":26,"slug":27},[431],{"authors_id":432},{"id":254,"name":255,"slug":256,"role":257,"profile_picture":21},{"id":434,"title":435,"title_en":436,"slug":437,"excerpt":438,"excerpt_en":439,"has_translation":12,"published_at":440,"reading_time":14,"hidden_from_listing":15,"tags":441,"thumbnail_image":21,"og_image":444,"series":445,"authors":446},35,"Mengenal Idempotency Key: Rahasia Anti-Double Charge di API Pembayaran","Idempotency Keys: The Secret to No Double Charges in Payment APIs","mengenal-idempotency-key-rahasia-anti-double-charge-di-api-pembayaran","Pernah internet kalian ngadat pas lagi nekan tombol Bayar, terus panik ngekliknya tiga kali? Kalau endpoint-nya nggak idempotent, saldo bisa kepotong berkali-kali. Yuk, kenalan sama Idempotency Key!","Ever had your connection stall right as you hit Pay, then panic-clicked three times? If the endpoint is not idempotent, the balance can be cut more than once. Meet the idempotency key.","2026-08-24T06:09:11.645Z",[246,269,442,268,443,244,270],"idempotency","payment","\u002Fog\u002Fmengenal-idempotency-key-rahasia-anti-double-charge-di-api-pembayaran.png",{"id":24,"title":25,"title_en":26,"slug":27},[447],{"authors_id":448},{"id":254,"name":255,"slug":256,"role":257,"profile_picture":21},{"id":450,"title":451,"title_en":452,"slug":453,"excerpt":454,"excerpt_en":455,"has_translation":12,"published_at":456,"reading_time":14,"hidden_from_listing":15,"tags":457,"thumbnail_image":21,"og_image":459,"series":460,"authors":461},36,"Mencegah Efek Domino di Mikroservis dengan Circuit Breaker Pattern","Stopping the Domino Effect in Microservices With the Circuit Breaker Pattern","mencegah-efek-domino-di-mikroservis-dengan-circuit-breaker-pattern","Pernah nggak sih, satu fitur minor di aplikasi kalian mendadak lelet, eh malah bikin halaman checkout dan login ikut down total? Itu namanya *cascading failure*. Yuk, kita bahas gimana *circuit breaker pattern* (pemutus arus) nyelametin arsitektur kalian!","Ever had one minor feature go slow and take the checkout page and login down with it? That is a cascading failure. Here is how the circuit breaker pattern saves your architecture.","2026-08-24T06:13:36.734Z",[246,307,458,268,287],"circuit-breaker","\u002Fog\u002Fmencegah-efek-domino-di-mikroservis-dengan-circuit-breaker-pattern.png",{"id":24,"title":25,"title_en":26,"slug":27},[462],{"authors_id":463},{"id":254,"name":255,"slug":256,"role":257,"profile_picture":21},{"id":465,"title":466,"title_en":467,"slug":468,"excerpt":469,"excerpt_en":470,"has_translation":12,"published_at":471,"reading_time":14,"hidden_from_listing":15,"tags":472,"thumbnail_image":21,"og_image":474,"series":475,"authors":476},37,"Kenapa Backend Butuh Graceful Shutdown? Jangan Asal Cabut Kabel Server!","Why Does a Backend Need Graceful Shutdown? Don't Yank the Server Cable","kenapa-backend-butuh-graceful-shutdown-jangan-asal-cabut-kabel-server","Pernah nggak sih, abis kalian nge-*deploy* backend, beberapa detik kemudian monitoring malah banjir *alert* **502 Bad Gateway** dari pengguna? Saldo udah kepotong tapi status order belum keburu ter-*update* di *database*. Yuk, kita bahas kenapa *graceful shutdown* itu wajib banget!","You deploy the backend and seconds later monitoring floods with 502 Bad Gateway alerts. The balance was cut but the order status never reached the database. Here is why graceful shutdown is mandatory.","2026-08-24T06:15:59.150Z",[246,396,244,394,473,268,287],"kubernetes","\u002Fog\u002Fkenapa-backend-butuh-graceful-shutdown-jangan-asal-cabut-kabel-server.png",{"id":24,"title":25,"title_en":26,"slug":27},[477],{"authors_id":478},{"id":254,"name":255,"slug":256,"role":257,"profile_picture":21},{"id":480,"title":481,"title_en":482,"slug":483,"excerpt":484,"excerpt_en":485,"has_translation":12,"published_at":486,"reading_time":14,"hidden_from_listing":15,"tags":487,"thumbnail_image":21,"og_image":488,"series":489,"authors":490},38,"Optimistic vs Pessimistic Locking: Mengatasi Rebutan Data di Database","Optimistic vs Pessimistic Locking: Handling the Data Fight in a Database","optimistic-vs-pessimistic-locking-mengatasi-rebutan-data-di-database","Seribu orang ngeklik \"Beli Sekarang\" di detik yang sama buat rebutan 1 tiket terakhir. Kira-kira apa yang bakal terjadi di server kalian? Yuk, kita banding *pessimistic* sama *optimistic locking*!","A thousand people tap Buy Now in the same second, fighting over the last ticket. What happens on your server? Here is pessimistic against optimistic locking.","2026-08-24T06:16:37.198Z",[246,341,159,361,268,287,342],"\u002Fog\u002Foptimistic-vs-pessimistic-locking-mengatasi-rebutan-data-di-database.png",{"id":24,"title":25,"title_en":26,"slug":27},[491],{"authors_id":492},{"id":254,"name":255,"slug":256,"role":257,"profile_picture":21},{"id":494,"title":495,"title_en":496,"slug":497,"excerpt":498,"excerpt_en":499,"has_translation":12,"published_at":500,"reading_time":14,"hidden_from_listing":15,"tags":501,"thumbnail_image":21,"og_image":504,"series":505,"authors":506},39,"Database Sharding vs Partitioning: Kapan Data Perlu Dipecah?","Database Sharding vs Partitioning: When Does Data Need Splitting?","database-sharding-vs-partitioning-kapan-data-perlu-dipecah","Tabel transaksi kalian udah nembus miliaran baris dan tiap *query* laporan bikin *CPU* melonjak 100%? Sebelum asal pecah data, yuk kita pahami dulu beda *sharding* sama *partitioning*!","Your transaction table has crossed a billion rows and every report query spikes CPU to 100%? Before splitting data blindly, understand the difference between sharding and partitioning.","2026-08-24T06:17:10.104Z",[246,341,361,268,287,502,503],"sharding","scaling","\u002Fog\u002Fdatabase-sharding-vs-partitioning-kapan-data-perlu-dipecah.png",{"id":24,"title":25,"title_en":26,"slug":27},[507],{"authors_id":508},{"id":254,"name":255,"slug":256,"role":257,"profile_picture":21},{"id":510,"title":511,"title_en":512,"slug":513,"excerpt":514,"excerpt_en":515,"has_translation":12,"published_at":516,"reading_time":14,"hidden_from_listing":15,"tags":517,"thumbnail_image":21,"og_image":522,"series":523,"authors":524},40,"Menyelami Distributed Tracing: Melacak Jejak Request di Balik Keruwetan Microservices","Inside Distributed Tracing: Following a Request Through Microservice Chaos","menyelami-distributed-tracing-melacak-jejak-request-microservices","Satu klik Checkout di backend kalian bisa memicu puluhan network call antar-service, tapi pas ada yang lambat, service mana sebenernya yang salah? Log aja nggak cukup buat njawab itu. Yuk, kita bedah Distributed Tracing!","One Checkout click in your backend can trigger dozens of network calls between services, but when one is slow, which service is at fault? Logs alone cannot answer that. Here is distributed tracing.","2026-08-31T02:33:31.602Z",[246,518,519,520,307,287,521],"distributed-systems","observability","open-telemetry","tracing","\u002Fog\u002Fmenyelami-distributed-tracing-melacak-jejak-request-microservices.png",{"id":24,"title":25,"title_en":26,"slug":27},[525],{"authors_id":526},{"id":254,"name":255,"slug":256,"role":257,"profile_picture":21},{"id":528,"title":529,"title_en":530,"slug":531,"excerpt":532,"excerpt_en":533,"has_translation":12,"published_at":534,"reading_time":14,"hidden_from_listing":15,"tags":535,"thumbnail_image":21,"og_image":541,"series":542,"authors":543},41,"Log Aggregation Modern dengan Grafana Loki dan Vector: Hemat Storage Tanpa Indeks Raksasa","Modern Log Aggregation With Grafana Loki and Vector: Save Storage Without a Giant Index","log-aggregation-modern-grafana-loki-vector-hemat-storage","Klaster Elasticsearch kalian rakus RAM dan boros storage, ya? Padahal nggak semua kata di log perlu diindeks, lho. Yuk, kita kenalan sama duet Grafana Loki dan Vector yang jauh lebih ramah kantong!","Your Elasticsearch cluster is greedy for RAM and wasteful with storage? Not every word in a log needs indexing. Meet the duo of Grafana Loki and Vector, far kinder to your wallet.","2026-09-01T15:45:01.066Z",[246,536,537,538,539,540,396,268],"observa","logging","grafana","loki","vector","\u002Fog\u002Flog-aggregation-modern-grafana-loki-vector-hemat-storage.png",{"id":24,"title":25,"title_en":26,"slug":27},[544],{"authors_id":545},{"id":254,"name":255,"slug":256,"role":257,"profile_picture":21},{"id":547,"title":548,"title_en":548,"slug":549,"excerpt":550,"excerpt_en":551,"has_translation":12,"published_at":552,"reading_time":14,"hidden_from_listing":15,"tags":553,"thumbnail_image":21,"og_image":556,"series":557,"authors":558},45,"Rate Limiting Algorithms: Token Bucket vs Leaky Bucket vs Sliding Window","rate-limiting-algorithms-token-bucket-leaky-bucket-sliding-window","Udah tahu kenapa *rate limiting* itu wajib, tapi masih bingung beda Token Bucket, Leaky Bucket, Fixed Window, dan Sliding Window? Yuk, kita adu empat algoritma ini bareng-bareng dan cari tahu mana yang paling pas buat API kalian!","You already know why *rate limiting* is mandatory, but the difference between Token Bucket, Leaky Bucket, Fixed Window, and Sliding Window is still fuzzy. Let's put all four algorithms side by side and find the one that fits your API.","2026-09-09T01:57:55.886Z",[246,268,267,270,554,287,555],"api-gateway","traffict-management","\u002Fog\u002Frate-limiting-algorithms-token-bucket-leaky-bucket-sliding-window.png",{"id":24,"title":25,"title_en":26,"slug":27},[559],{"authors_id":560},{"id":254,"name":255,"slug":256,"role":257,"profile_picture":21},{"id":562,"title":563,"title_en":564,"slug":565,"excerpt":566,"excerpt_en":567,"has_translation":12,"published_at":568,"reading_time":14,"hidden_from_listing":15,"tags":569,"thumbnail_image":21,"og_image":575,"series":576,"authors":577},46,"Mengapa C Mulai Ditinggalkan: Duel Filosofi Keamanan Rust vs Kesederhanaan Zig","Why C Is Being Left Behind: Rust's Safety Philosophy vs Zig's Simplicity","mengapa-c-mulai-ditinggalkan-duel-filosofi-rust-vs-zig","Pernah denger kalau sekitar 70% celah keamanan kritis software modern itu asalnya dari bahasa C? Iya, bahasa yang udah jadi fondasi internet ini 😅. Yuk, kita bedah duel filosofi Rust vs Zig dan cari tahu mana yang pas buat proyek kalian!","Have you heard that around 70% of critical security holes in modern software come from C? Yes, the language the internet is built on. Let's unpack the philosophy duel between Rust and Zig and see which one fits your project.","2026-09-09T02:19:05.266Z",[570,571,572,573,574],"system-programming","rust","zig","c","memory-safety","\u002Fog\u002Fmengapa-c-mulai-ditinggalkan-duel-filosofi-rust-vs-zig.png",{"id":24,"title":25,"title_en":26,"slug":27},[578],{"authors_id":579},{"id":254,"name":255,"slug":256,"role":257,"profile_picture":21},{"id":581,"title":582,"title_en":583,"slug":584,"excerpt":585,"excerpt_en":586,"has_translation":12,"published_at":587,"reading_time":588,"hidden_from_listing":15,"tags":589,"thumbnail_image":21,"og_image":594,"series":595,"authors":596},107,"Cara kamu pakai AI lebih menentukan daripada apakah kamu pakai AI","How You Use AI Matters More Than Whether You Use AI","cara-pakai-ai-menentukan-pemahaman-kode","Fiturnya selesai, test-nya hijau, dan dua hari kemudian kamu baca kodenya kayak kode orang lain. Ternyata ada satu cara pakai AI yang bikin kamu paham lebih baik daripada nggak pakai AI sama sekali. Yuk lihat datanya.","The feature is done, the tests are green, and two days later you read the code like a stranger wrote it. It turns out one way of using AI leaves you understanding more than not using AI at all. Here is the data.","2026-10-10T11:08:29.000Z",7,[590,591,592,593],"ai","belajar","kognitif","ai-assisted-coding","\u002Fog\u002Fcara-pakai-ai-menentukan-pemahaman-kode.png",{"id":24,"title":25,"title_en":26,"slug":27},[],{"id":598,"title":599,"title_en":600,"slug":601,"excerpt":602,"excerpt_en":603,"has_translation":12,"published_at":13,"reading_time":14,"hidden_from_listing":15,"tags":604,"thumbnail_image":21,"og_image":606,"series":607,"authors":608},109,"State of JS 2025 Bilang Developer Cuma Pakai 2,6 Framework Sepanjang Karier","State of JS 2025 Says Developers Use Only 2.6 Frameworks in a Whole Career","state-of-js-2025-developer-cuma-pakai-2-6-framework","Coba hitung semua framework yang pernah kamu coba, lalu potong jadi yang beneran dipakai buat kerjaan. Daftarnya jauh lebih pendek dari dugaan. State of JS 2025 nanya ke 13.002 developer, dan rata-ratanya cuma 2,6. Yuk, lihat angkanya bareng-bareng!","Try counting every framework you have ever touched, then cut the list down to what you actually used for work. It comes out far shorter than you would guess. State of JS 2025 asked 13,002 developers, and the average is only 2.6.",[82,605,18,17],"survei","\u002Fog\u002Fstate-of-js-2025-developer-cuma-pakai-2-6-framework.png",{"id":24,"title":25,"title_en":26,"slug":27},[],{"id":6,"title":7,"title_en":8,"slug":9,"excerpt":10,"excerpt_en":11,"has_translation":12,"published_at":13,"reading_time":14,"hidden_from_listing":15,"tags":610,"thumbnail_image":21,"og_image":22,"series":611,"authors":612},[17,18,19,20],{"id":24,"title":25,"title_en":26,"slug":27},[],{"id":614,"title":615,"title_en":616,"slug":617,"excerpt":618,"excerpt_en":619,"has_translation":12,"published_at":620,"reading_time":621,"hidden_from_listing":15,"tags":622,"thumbnail_image":21,"og_image":624,"series":625,"authors":626},111,"Rust Masuk Kernel Linux: Revolusi Nyata atau Cuma Euforia RIIR?","Rust Enters the Linux Kernel: A Real Revolution or Just RIIR Euphoria?","rust-di-kernel-linux-revolusi-atau-cuma-hype","Selama lebih dari 30 tahun kernel Linux cuma mau bahasa C, lalu tiba-tiba Rust resmi masuk di Linux 6.1. Itu revolusi beneran atau cuma kebawa euforia meme Rewrite It In Rust? Yuk lihat datanya, bukan cuma opininya.","For more than 30 years the Linux kernel only wanted C, then Rust officially landed in Linux 6.1. Is that a real revolution, or just the pull of the Rewrite It In Rust meme? Let's look at the data, not the opinions.","2026-10-07T03:40:24.000Z",6,[571,128,623,570,574],"kernel","\u002Fog\u002Frust-di-kernel-linux-revolusi-atau-cuma-hype.png",{"id":24,"title":25,"title_en":26,"slug":27},[627],{"authors_id":628},{"id":293,"name":294,"slug":295,"role":257,"profile_picture":21},{"id":630,"title":631,"title_en":632,"slug":633,"excerpt":634,"excerpt_en":635,"has_translation":12,"published_at":636,"reading_time":14,"hidden_from_listing":15,"tags":637,"thumbnail_image":21,"og_image":640,"series":641,"authors":642},112,"Aplikasimu lambat, dan kamu udah kepikiran ganti bahasa. Tunggu dulu","Your App Is Slow, and You're Already Thinking About Changing Languages. Wait.","aplikasimu-lambat-dan-kamu-udah-kepikiran-ganti-bahasa-tunggu-dulu","Ada endpoint yang grafiknya spike tiap beberapa menit, dan kepikiran buat pindah dari Go ke Rust? Discord dan Cloudflare beneran melakukannya — tapi cuma setelah kehabisan cara lain dan punya datanya. Yuk, bedah gejala mana yang beneran butuh rewrite, dan mana yang cuma butuh profiling. 🤔","An endpoint spikes every few minutes, and you are thinking of moving from Go to Rust? Discord and Cloudflare really did it, but only after running out of other options and having the data. Let's sort out which symptoms need a rewrite and which only need a profiler.","2026-10-08T09:40:00.000Z",[246,346,638,571,268,639],"golang","profiling","\u002Fog\u002Faplikasimu-lambat-dan-kamu-udah-kepikiran-ganti-bahasa-tunggu-dulu.png",{"id":24,"title":25,"title_en":26,"slug":27},[],{"id":644,"title":645,"title_en":646,"slug":647,"excerpt":648,"excerpt_en":649,"has_translation":12,"published_at":650,"reading_time":588,"hidden_from_listing":15,"tags":651,"thumbnail_image":21,"og_image":655,"series":656,"authors":657},113,"Garbage Collector dituduh bikin aplikasi lemot. Seberapa adil tuduhan itu?","The Garbage Collector Gets Blamed for Slow Apps. How Fair Is That?","garbage-collector-dituduh-bikin-aplikasi-lemot","GC sering jadi tersangka utama tiap aplikasi melambat, dan banyak yang percaya dia jalan pakai timer tiap beberapa detik. Dua-duanya nggak sepenuhnya benar. Yuk bedah cara kerja GC dari dalam, plus satu pengecualian yang bikin Discord kesakitan tiap 2 menit. 🤔","GC is always the prime suspect when an app slows down, and many people believe it runs on a timer every few seconds. Both beliefs are only partly right. Let's open up how GC works inside, plus one exception that made Discord hurt every 2 minutes.","2026-10-09T01:34:00.000Z",[246,346,638,652,653,654],"jvm","garbage-collector","memory","\u002Fog\u002Fgarbage-collector-dituduh-bikin-aplikasi-lemot.png",{"id":24,"title":25,"title_en":26,"slug":27},[],{"id":659,"title":660,"title_en":661,"slug":662,"excerpt":663,"excerpt_en":664,"has_translation":12,"published_at":665,"reading_time":14,"hidden_from_listing":15,"tags":666,"thumbnail_image":21,"og_image":669,"series":670,"authors":671},118,"Belajar Idempotency dari Stok yang Keburu Kebeli","Learning Idempotency from Stock That Got Bought Too Soon","pub-sub-sendiri-lalu-belajar-idempotency","Tugas pertama saya di kerjaan pertama: sistem yang kewalahan menerima webhook. Saya putuskan membangun pub\u002Fsub sendiri dari nol, dan pelajaran yang akhirnya datang bukan dari situ — tapi dari stok gudang yang keburu kebeli orang.","My first task at my first job was a system drowning in webhooks. I decided to build my own pub\u002Fsub from scratch, and the lesson that finally landed came from somewhere else: warehouse stock that got bought before the count caught up.","2026-10-10T14:03:00.000Z",[442,667,324,325,668],"event-driven","post-mortem","\u002Fog\u002Fpub-sub-sendiri-lalu-belajar-idempotency.png",{"id":24,"title":25,"title_en":26,"slug":27},[672],{"authors_id":673},{"id":293,"name":294,"slug":295,"role":257,"profile_picture":21},{"id":675,"title":676,"title_en":677,"slug":678,"excerpt":679,"excerpt_en":680,"has_translation":12,"published_at":681,"reading_time":621,"hidden_from_listing":15,"tags":682,"thumbnail_image":21,"og_image":685,"series":686,"authors":687},124,"Rahasia Zero-Cost Abstraction di Rust, Dibedah dari Assembly","The Secret of Zero-Cost Abstractions in Rust, Opened Up from the Assembly","rahasia-zero-cost-abstraction-di-rust","\"Abstraksi tinggi selalu lebih lambat\" itu anggapan lama. Iterator Rust bisa menyamai loop manual, dan assembly-nya bisa kita baca sendiri. Yuk, kita bongkar!","\"Higher abstractions are always slower\" is an old assumption. Rust iterators can match a hand-written loop, and the assembly is there for you to read. Let's take it apart.","2026-10-13T05:19:00.000Z",[571,346,570,683,684],"compiler","optimasi","\u002Fog\u002Frahasia-zero-cost-abstraction-di-rust.png",{"id":24,"title":25,"title_en":26,"slug":27},[688,690],{"authors_id":689},{"id":293,"name":294,"slug":295,"role":257,"profile_picture":21},{"authors_id":691},{"id":293,"name":294,"slug":295,"role":257,"profile_picture":21},[693,695,697],{"id":694,"title":35,"slug":37,"description":21,"cover_image":21},8,{"id":105,"title":39,"slug":41,"description":696,"cover_image":21},"Mengenal konsep dasar pemrograman. Pada seri ini kita akan membahas tentang bagaimana cara berkutat dengan variabel, mengatur alur program dengan struktur kontrol, me-reuse kode dengan fungsi, dan aturan sintaks pada bahasa pemrograman. Konsep-konsep ini pastinya akan sangat berguna ketika kita mulai mengkoding ceria.",{"id":134,"title":43,"slug":45,"description":698,"cover_image":21},"Algoritma dan struktur data adalah konsep fundamental dalam dunia pemrograman. Keduanya sangat penting dalam menyelesaikan masalah yang kompleks dengan efisien dan efektif. Dalam seri ini kita akan membahas berbagai macam struktur data dan algoritma yang harapannya bisa bikin kode kita lebih efektif dan efisien. Yuk belajar ASD bareng Inva! 👋",[],"id",[702,700],"en","Kebanyakan *framework front-end* populer kayak *Nuxt* atau *Angular* biasanya udah otomatis menyediakan opsi buat pakai *TypeScript* pas kita pertama kali *install*.\n\nTapi, gimana ceritanya kalau di bagian *back-end*? Misalnya, kalian pengen bikin *server* menggunakan *Express* yang berjalan di atas *Node.js*, tapi lebih sreg pakai *TypeScript* biar kodenya lebih terstruktur dan minim *bug*.\n\nMau *nggak* mau, kita harus melakukan *setup* sendiri dari awal. Nah, di artikel kali ini, kita bakal kupas tuntas cara melakukan *setup TypeScript* bareng *Node.js* dan *Express* dengan cara yang santai dan gampang diikuti. Yuk, langsung aja kita mulai! 🚀\n\n## Persiapan\n\n**`Node.js` + `TypeScript` + `Express` = 🤩**\n\nSebelum lanjut koding, pastikan dulu beberapa program ini udah terpasang di komputer kalian:\n\n* *Node.js*\n* *npm* atau [yarn](https:\u002F\u002Fyarnpkg.com\u002Fgetting-started\u002Finstall)\n\nKalau belum punya, kalian bisa langsung mampir ke panduan [install Node.js](https:\u002F\u002Fdocs.npmjs.com\u002Fdownloading-and-installing-node-js-and-npm) buat pasang dulu.\n\nBiar makin yakin kalau semuanya udah terpasang dengan bener, coba jalankan perintah ini di terminal untuk mengecek versinya.\n\nMengecek versi *Node.js*:\n\n```bash\n$ node -v\nv14.16.0\n```\n\nMengecek versi *npm*:\n\n```bash\n$ npm -v\n7.15.0\n```\n\nKalau terminal udah menampilkan nomor versi kayak di atas, berarti kalian udah aman buat lanjut ke langkah berikutnya.\n\n## Inisialisasi Proyek Node.js\n\nPertama-tama, buka terminal kalian terus bikin folder baru khusus buat proyek ini, lalu langsung masuk ke dalamnya.\n\n```shell\nmkdir typenode && cd typenode\n```\n\nSetelah itu, kita inisialisasi file `package.json` menggunakan perintah `npm init`.\n\n```shell\nnpm init -y\n```\n\nSekarang, mari kita buat *server* sederhana menggunakan *Express* versi *JavaScript* biasa dulu buat memastikan semuanya berjalan normal. Buat sebuah file baru bernama `main.js` di dalam direktori utama proyek, lalu tulis kode berikut (boleh langsung disalin aja biar cepet, hehe):\n\n```javascript\nconst express = require(\"express\");\n\nfunction main(){\n  const app = express();\n  const port = 8080;\n\n  \u002F\u002F endpoint sederhana untuk menampilkan teks 'Hello Express Node.js'\n  app.get(\"\u002F\", (req, res) => res.send(\"Hello Express Node.js\"));\n\n  \u002F\u002F mulai server express\n  app.listen(port, () => {\n    console.log(`[server] server dimulai di http:\u002F\u002Flocalhost:${port} ⚡`);\n  });\n}\n\nmain();\n```\n\nSebelum kodenya dijalankan, tentu kita harus memasang *library* `express` terlebih dahulu agar tidak terjadi *error*.\n\n```shell\n# dengan npm\nnpm install express\n\n# dengan yarn\nyarn add express\n```\n\nSetelah proses instalasi selesai, sekarang saatnya kita jalankan *server* tersebut.\n\n```shell\nnode main.js\n```\n\nJika sukses tanpa kendala, kalian bakal melihat pesan sukses di terminal kalian:\n\n```\n[server] server dimulai di http:\u002F\u002Flocalhost:8080 ⚡\n```\n\nKalian bisa membuka *browser* kesayangan lalu kunjungi `http:\u002F\u002Flocalhost:8080` buat melihat hasilnya langsung. Kalau udah muncul teksnya, selamat! Selanjutnya kita bakal mulai meracik bagian *TypeScript*-nya.\n\n## Menambahkan TypeScript ke Proyek\n\nUntuk mulai menggunakan *TypeScript*, kita butuh dua dependensi utama tambahan:\n\n* `typescript`: Ini adalah *library* inti yang bertugas mengubah (melakukan kompilasi) kode *TypeScript* menjadi kode *JavaScript* standar yang dipahami oleh *Node.js*.\n* `ts-node`: Alat bantu yang super berguna agar kita bisa langsung menjalankan file *TypeScript* di lingkungan *Node.js* tanpa perlu melakukan kompilasi secara manual pas masa pengembangan (*development*).\n\nSilakan jalankan perintah berikut di terminal buat memasang keduanya:\n\n```shell\n# dengan npm\nnpm install typescript ts-node --save-dev\n\n# dengan yarn\nyarn add -D typescript ts-node\n```\n\nSebagai catatan, bendera `--save-dev` pada *npm* atau `-D` pada *yarn* digunakan untuk memasukkan dependensi ini ke bagian `devDependencies` di file `package.json`. Soalnya, kita cuma butuh *tools* ini pas masa *development* aja, *nggak* usah dibawa ke lingkungan *production*.\n\nSetelah proses *install* selesai, kita perlu membuat file konfigurasi untuk *compiler TypeScript*-nya. Buatlah file bernama `tsconfig.json` di *root directory* proyek kalian, lalu isi dengan konfigurasi di bawah ini:\n\n```json\n{\n    \"compilerOptions\": {\n        \"module\": \"commonjs\",\n        \"esModuleInterop\": true,\n        \"target\": \"es5\",\n        \"outDir\": \"build\",\n        \"rootDir\": \"src\",\n        \"baseUrl\": \".\",\n        \"strict\": true\n    }\n}\n```\n\nBiar *nggak* bingung, ini sedikit penjelasan tentang opsi-opsi konfigurasi di atas:\n\n* `module`: Menentukan format modul hasil kompilasi. Buat aplikasi *server* atau *back-end*, format `commonjs` adalah pilihan standar yang paling aman.\n* `target`: Menentukan versi *JavaScript* keluaran hasil kompilasi. Di sini kita pilih `es5` agar kompatibel dengan lingkungan *runtime* yang lebih lama.\n* `outDir`: Folder tujuan untuk menampung file-file *JavaScript* hasil kompilasi. Kita arahkan ke folder `build`.\n* `rootDir`: Folder utama tempat kita menyimpan semua file sumber *TypeScript* kita. Kita atur ke folder `src`.\n* `baseUrl`: Path dasar yang digunakan buat menyelesaikan impor modul *non-relative*.\n\nUntuk dokumentasi lengkap mengenai opsi konfigurasi lainnya, kalian bisa langsung meluncur ke [dokumentasi resmi tsconfig](https:\u002F\u002Fwww.typescriptlang.org\u002Ftsconfig).\n\nSelanjutnya, kita perlu memperbarui bagian `scripts` di dalam file `package.json` agar mempermudah proses menjalankan dan membangun aplikasi. Ubah isinya menjadi seperti ini:\n\n```json\n{\n  \"name\": \"typenode\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n    \"build\": \"tsc\",\n    \"serve\": \"node .\u002Fbuild\u002Fmain.js\",\n    \"dev\": \"ts-node .\u002Fsrc\u002Fmain.ts\"\n  },\n  \"keywords\": [],\n  \"author\": \"\",\n  \"license\": \"ISC\",\n  \"dependencies\": {\n    \"express\": \"^4.17.1\"\n  },\n  \"devDependencies\": {\n    \"typescript\": \"^4.3.2\",\n    \"ts-node\": \"^10.0.0\"\n  }\n}\n```\n\n## Membuat Server dengan TypeScript\n\nLangkah konfigurasi udah hampir selesai, nih! Tapi sebelum mulai memindahkan kode, kita butuh dua paket lagi yang berisi definisi tipe (*type definitions*):\n\n* `@types\u002Fnode`: Menyediakan definisi tipe untuk objek bawaan *Node.js*.\n* `@types\u002Fexpress`: Menyediakan definisi tipe untuk *Express*.\n\nJalankan perintah ini di terminal buat memasangnya:\n\n```shell\n# dengan npm\nnpm install @types\u002Fnode @types\u002Fexpress --save-dev\n\n# dengan yarn\nyarn add -D @types\u002Fnode @types\u002Fexpress\n```\n\nKarena *TypeScript* menggunakan sistem tipe statis (*static typing*), paket-paket tipe ini penting banget biar *compiler* tahu tipe data apa saja yang sah digunakan pada tiap objek. Menariknya, kalau kalian pakai *Visual Studio Code*, paket tipe ini bakal mengaktifkan fitur *code completion* dan *IntelliSense* yang canggih banget. Menulis kode jadi lebih terbantu dan cepat! 😎\n\nSekarang, mari kita rapikan struktur direktori kita. Buat sebuah folder baru bernama `src` untuk menampung seluruh kode *TypeScript* yang akan kita buat.\n\n```shell\nmkdir src\n```\n\nSetelah foldernya dibuat, pindahkan file `main.js` yang kita buat tadi ke dalam folder `src`, lalu ubah ekstensinya menjadi `main.ts`.\n\n```shell\nmv main.js src\u002Fmain.ts\n```\n\nSekarang, struktur direktori proyek kalian bakal terlihat rapi kayak gini:\n\n```\n.\n├── tsconfig.json\n├── src\n│   └── main.ts\n├── node_modules\n├── package.json\n└── package-lock.json\n```\n\nBuka file `src\u002Fmain.ts` di editor kalian, lalu ubah kodenya menggunakan sintaks *TypeScript* modern kayak di bawah ini:\n\n```typescript\nimport express from \"express\";\n\nfunction main(){\n  const app = express();\n  const port = 8080;\n\n  \u002F\u002F endpoint sederhana untuk menampilkan teks 'Hello Express TS'\n  app.get(\"\u002F\", (req, res) => res.send(\"Express + Typescript + NodeJS = 😍\"));\n\n  \u002F\u002F mulai server express\n  app.listen(port, () => {\n    console.log(`[server] server dimulai di http:\u002F\u002Flocalhost:${port} ⚡`);\n  });\n}\n\nmain();\n```\n\nNah, sekarang saatnya kita coba jalankan aplikasi *TypeScript* ini. Cukup jalankan perintah berikut di terminal:\n\n```shell\nnpm run dev\n```\n\nJika konfigurasinya udah bener, kalian bakal melihat output sukses yang sama seperti sebelumnya. Sekarang *server* kalian udah berjalan lancar menggunakan *TypeScript* di latar belakang! Ingat ya, ke depannya selalu simpan file baru kalian di dalam folder `src`.\n\n## Kompilasi TypeScript ke JavaScript\n\nSetelah asyik koding pakai *TypeScript*, ada satu langkah penting sebelum kalian mempublikasikan aplikasi ini ke lingkungan produksi (*production*), yaitu kompilasi.\n\n*Node.js* secara bawaan *nggak* bisa menjalankan file *TypeScript* secara langsung. Makanya kita perlu mengubah semua file di folder `src` menjadi kode *JavaScript* biasa agar kinerjanya tetap cepat dan optimal.\n\nUntuk melakukan proses kompilasi ini, jalankan perintah:\n\n```shell\nnpm run build\n```\n\nSetelah perintah selesai berjalan, kalian bakal menemukan folder baru bernama `build` yang berisi file `main.js`. Isi file hasil kompilasi tersebut bakal terlihat seperti ini:\n\n```javascript\n\"use strict\";\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar express_1 = __importDefault(require(\"express\"));\nfunction main() {\n    var app = express_1.default();\n    var port = 8080;\n    \u002F\u002F endpoint sederhana untuk menampilkan teks\n    app.get(\"\u002F\", function (req, res) { return res.send(\"Express + Typescript + NodeJS = 😍\"); });\n    \u002F\u002F mulai server express\n    app.listen(port, function () {\n        console.log(\"[server] server dimulai di http:\u002F\u002Flocalhost:\" + port + \" ⚡\");\n    });\n}\nmain();\n```\n\nBisa kalian lihat, semua sintaks modern kayak *arrow functions* telah diubah menjadi fungsi biasa (*anonymous function*) dan variabel diubah menjadi `var`. Hal ini dikarenakan target compiler kita atur ke `es5` di file `tsconfig.json`. Kalau kalian pengen hasil yang lebih modern, kalian bisa mengubah nilai `target` tersebut ke `es6` atau versi yang lebih baru.\n\nTerakhir, buat menjalankan kode versi *production* yang udah dicompile tadi, jalankan perintah berikut:\n\n```shell\nnpm run serve\n```\n\n## Versi Cepat (TL;DR)\n\nBuat kalian yang lagi buru-buru atau pengen langsung melihat hasil jadinya tanpa perlu mengetik satu-satu dari awal, tenang aja. Kalian bisa langsung clone atau salin kode lengkapnya dari repositori [GitHub](https:\u002F\u002Fgithub.com\u002Fizzudd\u002Fkode-kode-invasikode\u002Ftree\u002Fmain\u002Ftypescript-node-express).\n\nSetelah disalin, kalian tinggal jalankan perintah `npm install` di terminal komputer kalian buat memasang semua dependensinya, dan proyek pun siap dijalankan!\n\nCatatan kecil, file `package-lock.json` *nggak* perlu ikut disalin ya.\n\nSelamat mencoba dan bereksperimen dengan *TypeScript*! Semoga sukses kodingnya! 😁\n","- TypeScript memberikan fitur static typing dan autocompletion yang membuat penulisan kode di Node.js jadi lebih aman dan minim bug.\n- Package ts-node mempermudah kita menjalankan file TypeScript secara langsung tanpa perlu dicompile manual selama masa development.\n- Untuk production, file TypeScript wajib dicompile ke JavaScript biasa agar kinerjanya optimal dan kompatibel dengan Node.js.","\u003Cp>Kebanyakan \u003Cem>framework front-end\u003C\u002Fem> populer kayak \u003Cem>Nuxt\u003C\u002Fem> atau \u003Cem>Angular\u003C\u002Fem> biasanya udah otomatis menyediakan opsi buat pakai \u003Cem>TypeScript\u003C\u002Fem> pas kita pertama kali \u003Cem>install\u003C\u002Fem>.\u003C\u002Fp>\n\u003Cp>Tapi, gimana ceritanya kalau di bagian \u003Cem>back-end\u003C\u002Fem>? Misalnya, kalian pengen bikin \u003Cem>server\u003C\u002Fem> menggunakan \u003Cem>Express\u003C\u002Fem> yang berjalan di atas \u003Cem>Node.js\u003C\u002Fem>, tapi lebih sreg pakai \u003Cem>TypeScript\u003C\u002Fem> biar kodenya lebih terstruktur dan minim \u003Cem>bug\u003C\u002Fem>.\u003C\u002Fp>\n\u003Cp>Mau \u003Cem>nggak\u003C\u002Fem> mau, kita harus melakukan \u003Cem>setup\u003C\u002Fem> sendiri dari awal. Nah, di artikel kali ini, kita bakal kupas tuntas cara melakukan \u003Cem>setup TypeScript\u003C\u002Fem> bareng \u003Cem>Node.js\u003C\u002Fem> dan \u003Cem>Express\u003C\u002Fem> dengan cara yang santai dan gampang diikuti. Yuk, langsung aja kita mulai! 🚀\u003C\u002Fp>\n\u003Ch2 id=\"persiapan\">Persiapan\u003C\u002Fh2>\n\u003Cp>\u003Cstrong>\u003Ccode>Node.js\u003C\u002Fcode> + \u003Ccode>TypeScript\u003C\u002Fcode> + \u003Ccode>Express\u003C\u002Fcode> = 🤩\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>Sebelum lanjut koding, pastikan dulu beberapa program ini udah terpasang di komputer kalian:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cem>Node.js\u003C\u002Fem>\u003C\u002Fli>\n\u003Cli>\u003Cem>npm\u003C\u002Fem> atau \u003Ca href=\"https:\u002F\u002Fyarnpkg.com\u002Fgetting-started\u002Finstall\">yarn\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Kalau belum punya, kalian bisa langsung mampir ke panduan \u003Ca href=\"https:\u002F\u002Fdocs.npmjs.com\u002Fdownloading-and-installing-node-js-and-npm\">install Node.js\u003C\u002Fa> buat pasang dulu.\u003C\u002Fp>\n\u003Cp>Biar makin yakin kalau semuanya udah terpasang dengan bener, coba jalankan perintah ini di terminal untuk mengecek versinya.\u003C\u002Fp>\n\u003Cp>Mengecek versi \u003Cem>Node.js\u003C\u002Fem>:\u003C\u002Fp>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">BASH\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"%24%20node%20-v%0Av14.16.0\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C\u002Fpath>\n      \u003C\u002Fsvg>\n      \u003Cspan class=\"copy-text\">Copy\u003C\u002Fspan>\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">$\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> node\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> -v\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">v14.16.0\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003Cp>Mengecek versi \u003Cem>npm\u003C\u002Fem>:\u003C\u002Fp>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">BASH\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"%24%20npm%20-v%0A7.15.0\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C\u002Fpath>\n      \u003C\u002Fsvg>\n      \u003Cspan class=\"copy-text\">Copy\u003C\u002Fspan>\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">$\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> npm\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> -v\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">7.15.0\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003Cp>Kalau terminal udah menampilkan nomor versi kayak di atas, berarti kalian udah aman buat lanjut ke langkah berikutnya.\u003C\u002Fp>\n\u003Ch2 id=\"inisialisasi-proyek-node-js\">Inisialisasi Proyek Node.js\u003C\u002Fh2>\n\u003Cp>Pertama-tama, buka terminal kalian terus bikin folder baru khusus buat proyek ini, lalu langsung masuk ke dalamnya.\u003C\u002Fp>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">SHELL\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"mkdir%20typenode%20%26%26%20cd%20typenode\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C\u002Fpath>\n      \u003C\u002Fsvg>\n      \u003Cspan class=\"copy-text\">Copy\u003C\u002Fspan>\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">mkdir\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> typenode\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> && \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">cd\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> typenode\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003Cp>Setelah itu, kita inisialisasi file \u003Ccode>package.json\u003C\u002Fcode> menggunakan perintah \u003Ccode>npm init\u003C\u002Fcode>.\u003C\u002Fp>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">SHELL\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"npm%20init%20-y\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C\u002Fpath>\n      \u003C\u002Fsvg>\n      \u003Cspan class=\"copy-text\">Copy\u003C\u002Fspan>\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> init\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> -y\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003Cp>Sekarang, mari kita buat \u003Cem>server\u003C\u002Fem> sederhana menggunakan \u003Cem>Express\u003C\u002Fem> versi \u003Cem>JavaScript\u003C\u002Fem> biasa dulu buat memastikan semuanya berjalan normal. Buat sebuah file baru bernama \u003Ccode>main.js\u003C\u002Fcode> di dalam direktori utama proyek, lalu tulis kode berikut (boleh langsung disalin aja biar cepet, hehe):\u003C\u002Fp>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">JAVASCRIPT\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"const%20express%20%3D%20require(%22express%22)%3B%0A%0Afunction%20main()%7B%0A%20%20const%20app%20%3D%20express()%3B%0A%20%20const%20port%20%3D%208080%3B%0A%0A%20%20%2F%2F%20endpoint%20sederhana%20untuk%20menampilkan%20teks%20'Hello%20Express%20Node.js'%0A%20%20app.get(%22%2F%22%2C%20(req%2C%20res)%20%3D%3E%20res.send(%22Hello%20Express%20Node.js%22))%3B%0A%0A%20%20%2F%2F%20mulai%20server%20express%0A%20%20app.listen(port%2C%20()%20%3D%3E%20%7B%0A%20%20%20%20console.log(%60%5Bserver%5D%20server%20dimulai%20di%20http%3A%2F%2Flocalhost%3A%24%7Bport%7D%20%E2%9A%A1%60)%3B%0A%20%20%7D)%3B%0A%7D%0A%0Amain()%3B\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C\u002Fpath>\n      \u003C\u002Fsvg>\n      \u003Cspan class=\"copy-text\">Copy\u003C\u002Fspan>\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> express\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> require\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"express\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> main\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(){\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> app\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> express\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> port\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> 8080\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">  \u002F\u002F endpoint sederhana untuk menampilkan teks 'Hello Express Node.js'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  app.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">get\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"\u002F\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, (\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">req\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">res\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> res.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">send\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"Hello Express Node.js\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">  \u002F\u002F mulai server express\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  app.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">listen\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(port, () \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    console.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">log\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">`[server] server dimulai di http:\u002F\u002Flocalhost:${\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">port\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">} ⚡`\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">main\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">();\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003Cp>Sebelum kodenya dijalankan, tentu kita harus memasang \u003Cem>library\u003C\u002Fem> \u003Ccode>express\u003C\u002Fcode> terlebih dahulu agar tidak terjadi \u003Cem>error\u003C\u002Fem>.\u003C\u002Fp>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">SHELL\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"%23%20dengan%20npm%0Anpm%20install%20express%0A%0A%23%20dengan%20yarn%0Ayarn%20add%20express\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C\u002Fpath>\n      \u003C\u002Fsvg>\n      \u003Cspan class=\"copy-text\">Copy\u003C\u002Fspan>\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># dengan npm\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> install\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> express\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># dengan yarn\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">yarn\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> add\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> express\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003Cp>Setelah proses instalasi selesai, sekarang saatnya kita jalankan \u003Cem>server\u003C\u002Fem> tersebut.\u003C\u002Fp>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">SHELL\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"node%20main.js\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C\u002Fpath>\n      \u003C\u002Fsvg>\n      \u003Cspan class=\"copy-text\">Copy\u003C\u002Fspan>\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">node\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> main.js\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003Cp>Jika sukses tanpa kendala, kalian bakal melihat pesan sukses di terminal kalian:\u003C\u002Fp>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">TEXT\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"%5Bserver%5D%20server%20dimulai%20di%20http%3A%2F%2Flocalhost%3A8080%20%E2%9A%A1\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C\u002Fpath>\n      \u003C\u002Fsvg>\n      \u003Cspan class=\"copy-text\">Copy\u003C\u002Fspan>\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\">\u003Ccode>[server] server dimulai di http:\u002F\u002Flocalhost:8080 ⚡\u003C\u002Fcode>\u003C\u002Fpre>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003Cp>Kalian bisa membuka \u003Cem>browser\u003C\u002Fem> kesayangan lalu kunjungi \u003Ccode>http:\u002F\u002Flocalhost:8080\u003C\u002Fcode> buat melihat hasilnya langsung. Kalau udah muncul teksnya, selamat! Selanjutnya kita bakal mulai meracik bagian \u003Cem>TypeScript\u003C\u002Fem>-nya.\u003C\u002Fp>\n\u003Ch2 id=\"menambahkan-typescript-ke-proyek\">Menambahkan TypeScript ke Proyek\u003C\u002Fh2>\n\u003Cp>Untuk mulai menggunakan \u003Cem>TypeScript\u003C\u002Fem>, kita butuh dua dependensi utama tambahan:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>typescript\u003C\u002Fcode>: Ini adalah \u003Cem>library\u003C\u002Fem> inti yang bertugas mengubah (melakukan kompilasi) kode \u003Cem>TypeScript\u003C\u002Fem> menjadi kode \u003Cem>JavaScript\u003C\u002Fem> standar yang dipahami oleh \u003Cem>Node.js\u003C\u002Fem>.\u003C\u002Fli>\n\u003Cli>\u003Ccode>ts-node\u003C\u002Fcode>: Alat bantu yang super berguna agar kita bisa langsung menjalankan file \u003Cem>TypeScript\u003C\u002Fem> di lingkungan \u003Cem>Node.js\u003C\u002Fem> tanpa perlu melakukan kompilasi secara manual pas masa pengembangan (\u003Cem>development\u003C\u002Fem>).\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Silakan jalankan perintah berikut di terminal buat memasang keduanya:\u003C\u002Fp>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">SHELL\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"%23%20dengan%20npm%0Anpm%20install%20typescript%20ts-node%20--save-dev%0A%0A%23%20dengan%20yarn%0Ayarn%20add%20-D%20typescript%20ts-node\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C\u002Fpath>\n      \u003C\u002Fsvg>\n      \u003Cspan class=\"copy-text\">Copy\u003C\u002Fspan>\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># dengan npm\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> install\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> typescript\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> ts-node\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> --save-dev\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># dengan yarn\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">yarn\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> add\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> -D\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> typescript\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> ts-node\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003Cp>Sebagai catatan, bendera \u003Ccode>--save-dev\u003C\u002Fcode> pada \u003Cem>npm\u003C\u002Fem> atau \u003Ccode>-D\u003C\u002Fcode> pada \u003Cem>yarn\u003C\u002Fem> digunakan untuk memasukkan dependensi ini ke bagian \u003Ccode>devDependencies\u003C\u002Fcode> di file \u003Ccode>package.json\u003C\u002Fcode>. Soalnya, kita cuma butuh \u003Cem>tools\u003C\u002Fem> ini pas masa \u003Cem>development\u003C\u002Fem> aja, \u003Cem>nggak\u003C\u002Fem> usah dibawa ke lingkungan \u003Cem>production\u003C\u002Fem>.\u003C\u002Fp>\n\u003Cp>Setelah proses \u003Cem>install\u003C\u002Fem> selesai, kita perlu membuat file konfigurasi untuk \u003Cem>compiler TypeScript\u003C\u002Fem>-nya. Buatlah file bernama \u003Ccode>tsconfig.json\u003C\u002Fcode> di \u003Cem>root directory\u003C\u002Fem> proyek kalian, lalu isi dengan konfigurasi di bawah ini:\u003C\u002Fp>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">JSON\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"%7B%0A%20%20%20%20%22compilerOptions%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22module%22%3A%20%22commonjs%22%2C%0A%20%20%20%20%20%20%20%20%22esModuleInterop%22%3A%20true%2C%0A%20%20%20%20%20%20%20%20%22target%22%3A%20%22es5%22%2C%0A%20%20%20%20%20%20%20%20%22outDir%22%3A%20%22build%22%2C%0A%20%20%20%20%20%20%20%20%22rootDir%22%3A%20%22src%22%2C%0A%20%20%20%20%20%20%20%20%22baseUrl%22%3A%20%22.%22%2C%0A%20%20%20%20%20%20%20%20%22strict%22%3A%20true%0A%20%20%20%20%7D%0A%7D\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C\u002Fpath>\n      \u003C\u002Fsvg>\n      \u003Cspan class=\"copy-text\">Copy\u003C\u002Fspan>\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"compilerOptions\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        \"module\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"commonjs\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        \"esModuleInterop\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        \"target\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"es5\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        \"outDir\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"build\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        \"rootDir\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"src\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        \"baseUrl\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\".\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">        \"strict\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">true\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003Cp>Biar \u003Cem>nggak\u003C\u002Fem> bingung, ini sedikit penjelasan tentang opsi-opsi konfigurasi di atas:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>module\u003C\u002Fcode>: Menentukan format modul hasil kompilasi. Buat aplikasi \u003Cem>server\u003C\u002Fem> atau \u003Cem>back-end\u003C\u002Fem>, format \u003Ccode>commonjs\u003C\u002Fcode> adalah pilihan standar yang paling aman.\u003C\u002Fli>\n\u003Cli>\u003Ccode>target\u003C\u002Fcode>: Menentukan versi \u003Cem>JavaScript\u003C\u002Fem> keluaran hasil kompilasi. Di sini kita pilih \u003Ccode>es5\u003C\u002Fcode> agar kompatibel dengan lingkungan \u003Cem>runtime\u003C\u002Fem> yang lebih lama.\u003C\u002Fli>\n\u003Cli>\u003Ccode>outDir\u003C\u002Fcode>: Folder tujuan untuk menampung file-file \u003Cem>JavaScript\u003C\u002Fem> hasil kompilasi. Kita arahkan ke folder \u003Ccode>build\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>\u003Ccode>rootDir\u003C\u002Fcode>: Folder utama tempat kita menyimpan semua file sumber \u003Cem>TypeScript\u003C\u002Fem> kita. Kita atur ke folder \u003Ccode>src\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>\u003Ccode>baseUrl\u003C\u002Fcode>: Path dasar yang digunakan buat menyelesaikan impor modul \u003Cem>non-relative\u003C\u002Fem>.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Untuk dokumentasi lengkap mengenai opsi konfigurasi lainnya, kalian bisa langsung meluncur ke \u003Ca href=\"https:\u002F\u002Fwww.typescriptlang.org\u002Ftsconfig\">dokumentasi resmi tsconfig\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>Selanjutnya, kita perlu memperbarui bagian \u003Ccode>scripts\u003C\u002Fcode> di dalam file \u003Ccode>package.json\u003C\u002Fcode> agar mempermudah proses menjalankan dan membangun aplikasi. Ubah isinya menjadi seperti ini:\u003C\u002Fp>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">JSON\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"%7B%0A%20%20%22name%22%3A%20%22typenode%22%2C%0A%20%20%22version%22%3A%20%221.0.0%22%2C%0A%20%20%22description%22%3A%20%22%22%2C%0A%20%20%22main%22%3A%20%22index.js%22%2C%0A%20%20%22scripts%22%3A%20%7B%0A%20%20%20%20%22test%22%3A%20%22echo%20%5C%22Error%3A%20no%20test%20specified%5C%22%20%26%26%20exit%201%22%2C%0A%20%20%20%20%22build%22%3A%20%22tsc%22%2C%0A%20%20%20%20%22serve%22%3A%20%22node%20.%2Fbuild%2Fmain.js%22%2C%0A%20%20%20%20%22dev%22%3A%20%22ts-node%20.%2Fsrc%2Fmain.ts%22%0A%20%20%7D%2C%0A%20%20%22keywords%22%3A%20%5B%5D%2C%0A%20%20%22author%22%3A%20%22%22%2C%0A%20%20%22license%22%3A%20%22ISC%22%2C%0A%20%20%22dependencies%22%3A%20%7B%0A%20%20%20%20%22express%22%3A%20%22%5E4.17.1%22%0A%20%20%7D%2C%0A%20%20%22devDependencies%22%3A%20%7B%0A%20%20%20%20%22typescript%22%3A%20%22%5E4.3.2%22%2C%0A%20%20%20%20%22ts-node%22%3A%20%22%5E10.0.0%22%0A%20%20%7D%0A%7D\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C\u002Fpath>\n      \u003C\u002Fsvg>\n      \u003Cspan class=\"copy-text\">Copy\u003C\u002Fspan>\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">{\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">  \"name\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"typenode\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">  \"version\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"1.0.0\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">  \"description\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">  \"main\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"index.js\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">  \"scripts\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"test\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"echo \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">\\\"\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">Error: no test specified\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">\\\"\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> && exit 1\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"build\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"tsc\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"serve\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"node .\u002Fbuild\u002Fmain.js\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"dev\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"ts-node .\u002Fsrc\u002Fmain.ts\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">  \"keywords\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: [],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">  \"author\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">  \"license\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"ISC\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">  \"dependencies\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"express\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"^4.17.1\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">  \"devDependencies\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"typescript\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"^4.3.2\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#79B8FF\">    \"ts-node\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"^10.0.0\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003Ch2 id=\"membuat-server-dengan-typescript\">Membuat Server dengan TypeScript\u003C\u002Fh2>\n\u003Cp>Langkah konfigurasi udah hampir selesai, nih! Tapi sebelum mulai memindahkan kode, kita butuh dua paket lagi yang berisi definisi tipe (\u003Cem>type definitions\u003C\u002Fem>):\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>@types\u002Fnode\u003C\u002Fcode>: Menyediakan definisi tipe untuk objek bawaan \u003Cem>Node.js\u003C\u002Fem>.\u003C\u002Fli>\n\u003Cli>\u003Ccode>@types\u002Fexpress\u003C\u002Fcode>: Menyediakan definisi tipe untuk \u003Cem>Express\u003C\u002Fem>.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Jalankan perintah ini di terminal buat memasangnya:\u003C\u002Fp>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">SHELL\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"%23%20dengan%20npm%0Anpm%20install%20%40types%2Fnode%20%40types%2Fexpress%20--save-dev%0A%0A%23%20dengan%20yarn%0Ayarn%20add%20-D%20%40types%2Fnode%20%40types%2Fexpress\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C\u002Fpath>\n      \u003C\u002Fsvg>\n      \u003Cspan class=\"copy-text\">Copy\u003C\u002Fspan>\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># dengan npm\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> install\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> @types\u002Fnode\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> @types\u002Fexpress\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> --save-dev\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\"># dengan yarn\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">yarn\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> add\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> -D\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> @types\u002Fnode\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> @types\u002Fexpress\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003Cp>Karena \u003Cem>TypeScript\u003C\u002Fem> menggunakan sistem tipe statis (\u003Cem>static typing\u003C\u002Fem>), paket-paket tipe ini penting banget biar \u003Cem>compiler\u003C\u002Fem> tahu tipe data apa saja yang sah digunakan pada tiap objek. Menariknya, kalau kalian pakai \u003Cem>Visual Studio Code\u003C\u002Fem>, paket tipe ini bakal mengaktifkan fitur \u003Cem>code completion\u003C\u002Fem> dan \u003Cem>IntelliSense\u003C\u002Fem> yang canggih banget. Menulis kode jadi lebih terbantu dan cepat! 😎\u003C\u002Fp>\n\u003Cp>Sekarang, mari kita rapikan struktur direktori kita. Buat sebuah folder baru bernama \u003Ccode>src\u003C\u002Fcode> untuk menampung seluruh kode \u003Cem>TypeScript\u003C\u002Fem> yang akan kita buat.\u003C\u002Fp>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">SHELL\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"mkdir%20src\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C\u002Fpath>\n      \u003C\u002Fsvg>\n      \u003Cspan class=\"copy-text\">Copy\u003C\u002Fspan>\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">mkdir\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> src\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003Cp>Setelah foldernya dibuat, pindahkan file \u003Ccode>main.js\u003C\u002Fcode> yang kita buat tadi ke dalam folder \u003Ccode>src\u003C\u002Fcode>, lalu ubah ekstensinya menjadi \u003Ccode>main.ts\u003C\u002Fcode>.\u003C\u002Fp>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">SHELL\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"mv%20main.js%20src%2Fmain.ts\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C\u002Fpath>\n      \u003C\u002Fsvg>\n      \u003Cspan class=\"copy-text\">Copy\u003C\u002Fspan>\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">mv\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> main.js\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> src\u002Fmain.ts\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003Cp>Sekarang, struktur direktori proyek kalian bakal terlihat rapi kayak gini:\u003C\u002Fp>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">TEXT\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\".%0A%E2%94%9C%E2%94%80%E2%94%80%20tsconfig.json%0A%E2%94%9C%E2%94%80%E2%94%80%20src%0A%E2%94%82%20%20%20%E2%94%94%E2%94%80%E2%94%80%20main.ts%0A%E2%94%9C%E2%94%80%E2%94%80%20node_modules%0A%E2%94%9C%E2%94%80%E2%94%80%20package.json%0A%E2%94%94%E2%94%80%E2%94%80%20package-lock.json\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C\u002Fpath>\n      \u003C\u002Fsvg>\n      \u003Cspan class=\"copy-text\">Copy\u003C\u002Fspan>\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\">\u003Ccode>.\n├── tsconfig.json\n├── src\n│   └── main.ts\n├── node_modules\n├── package.json\n└── package-lock.json\u003C\u002Fcode>\u003C\u002Fpre>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003Cp>Buka file \u003Ccode>src\u002Fmain.ts\u003C\u002Fcode> di editor kalian, lalu ubah kodenya menggunakan sintaks \u003Cem>TypeScript\u003C\u002Fem> modern kayak di bawah ini:\u003C\u002Fp>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">TYPESCRIPT\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"import%20express%20from%20%22express%22%3B%0A%0Afunction%20main()%7B%0A%20%20const%20app%20%3D%20express()%3B%0A%20%20const%20port%20%3D%208080%3B%0A%0A%20%20%2F%2F%20endpoint%20sederhana%20untuk%20menampilkan%20teks%20'Hello%20Express%20TS'%0A%20%20app.get(%22%2F%22%2C%20(req%2C%20res)%20%3D%3E%20res.send(%22Express%20%2B%20Typescript%20%2B%20NodeJS%20%3D%20%F0%9F%98%8D%22))%3B%0A%0A%20%20%2F%2F%20mulai%20server%20express%0A%20%20app.listen(port%2C%20()%20%3D%3E%20%7B%0A%20%20%20%20console.log(%60%5Bserver%5D%20server%20dimulai%20di%20http%3A%2F%2Flocalhost%3A%24%7Bport%7D%20%E2%9A%A1%60)%3B%0A%20%20%7D)%3B%0A%7D%0A%0Amain()%3B\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C\u002Fpath>\n      \u003C\u002Fsvg>\n      \u003Cspan class=\"copy-text\">Copy\u003C\u002Fspan>\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> express \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> \"express\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> main\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(){\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> app\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> express\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> port\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> 8080\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">  \u002F\u002F endpoint sederhana untuk menampilkan teks 'Hello Express TS'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  app.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">get\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"\u002F\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, (\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">req\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">res\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">) \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> res.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">send\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"Express + Typescript + NodeJS = 😍\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">  \u002F\u002F mulai server express\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  app.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">listen\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(port, () \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    console.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">log\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">`[server] server dimulai di http:\u002F\u002Flocalhost:${\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">port\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">} ⚡`\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">  });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">main\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">();\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003Cp>Nah, sekarang saatnya kita coba jalankan aplikasi \u003Cem>TypeScript\u003C\u002Fem> ini. Cukup jalankan perintah berikut di terminal:\u003C\u002Fp>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">SHELL\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"npm%20run%20dev\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C\u002Fpath>\n      \u003C\u002Fsvg>\n      \u003Cspan class=\"copy-text\">Copy\u003C\u002Fspan>\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> run\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> dev\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003Cp>Jika konfigurasinya udah bener, kalian bakal melihat output sukses yang sama seperti sebelumnya. Sekarang \u003Cem>server\u003C\u002Fem> kalian udah berjalan lancar menggunakan \u003Cem>TypeScript\u003C\u002Fem> di latar belakang! Ingat ya, ke depannya selalu simpan file baru kalian di dalam folder \u003Ccode>src\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch2 id=\"kompilasi-typescript-ke-javascript\">Kompilasi TypeScript ke JavaScript\u003C\u002Fh2>\n\u003Cp>Setelah asyik koding pakai \u003Cem>TypeScript\u003C\u002Fem>, ada satu langkah penting sebelum kalian mempublikasikan aplikasi ini ke lingkungan produksi (\u003Cem>production\u003C\u002Fem>), yaitu kompilasi.\u003C\u002Fp>\n\u003Cp>\u003Cem>Node.js\u003C\u002Fem> secara bawaan \u003Cem>nggak\u003C\u002Fem> bisa menjalankan file \u003Cem>TypeScript\u003C\u002Fem> secara langsung. Makanya kita perlu mengubah semua file di folder \u003Ccode>src\u003C\u002Fcode> menjadi kode \u003Cem>JavaScript\u003C\u002Fem> biasa agar kinerjanya tetap cepat dan optimal.\u003C\u002Fp>\n\u003Cp>Untuk melakukan proses kompilasi ini, jalankan perintah:\u003C\u002Fp>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">SHELL\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"npm%20run%20build\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C\u002Fpath>\n      \u003C\u002Fsvg>\n      \u003Cspan class=\"copy-text\">Copy\u003C\u002Fspan>\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> run\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> build\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003Cp>Setelah perintah selesai berjalan, kalian bakal menemukan folder baru bernama \u003Ccode>build\u003C\u002Fcode> yang berisi file \u003Ccode>main.js\u003C\u002Fcode>. Isi file hasil kompilasi tersebut bakal terlihat seperti ini:\u003C\u002Fp>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">JAVASCRIPT\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"%22use%20strict%22%3B%0Avar%20__importDefault%20%3D%20(this%20%26%26%20this.__importDefault)%20%7C%7C%20function%20(mod)%20%7B%0A%20%20%20%20return%20(mod%20%26%26%20mod.__esModule)%20%3F%20mod%20%3A%20%7B%20%22default%22%3A%20mod%20%7D%3B%0A%7D%3B%0AObject.defineProperty(exports%2C%20%22__esModule%22%2C%20%7B%20value%3A%20true%20%7D)%3B%0Avar%20express_1%20%3D%20__importDefault(require(%22express%22))%3B%0Afunction%20main()%20%7B%0A%20%20%20%20var%20app%20%3D%20express_1.default()%3B%0A%20%20%20%20var%20port%20%3D%208080%3B%0A%20%20%20%20%2F%2F%20endpoint%20sederhana%20untuk%20menampilkan%20teks%0A%20%20%20%20app.get(%22%2F%22%2C%20function%20(req%2C%20res)%20%7B%20return%20res.send(%22Express%20%2B%20Typescript%20%2B%20NodeJS%20%3D%20%F0%9F%98%8D%22)%3B%20%7D)%3B%0A%20%20%20%20%2F%2F%20mulai%20server%20express%0A%20%20%20%20app.listen(port%2C%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20console.log(%22%5Bserver%5D%20server%20dimulai%20di%20http%3A%2F%2Flocalhost%3A%22%20%2B%20port%20%2B%20%22%20%E2%9A%A1%22)%3B%0A%20%20%20%20%7D)%3B%0A%7D%0Amain()%3B\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C\u002Fpath>\n      \u003C\u002Fsvg>\n      \u003Cspan class=\"copy-text\">Copy\u003C\u002Fspan>\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#9ECBFF\">\"use strict\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">var\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> __importDefault \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">this\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> &&\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> this\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">.__importDefault) \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">||\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> function\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">mod\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    return\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> (mod \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">&&\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> mod.__esModule) \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">?\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> mod \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">:\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> { \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"default\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">: mod };\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">Object.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">defineProperty\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">exports\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"__esModule\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, { value: \u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">var\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> express_1 \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> __importDefault\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">require\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"express\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">));\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\"> main\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    var\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> app \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> express_1.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">default\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">();\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#F97583\">    var\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> port \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"color:#79B8FF\"> 8080\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">    \u002F\u002F endpoint sederhana untuk menampilkan teks\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    app.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">get\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"\u002F\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">req\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"color:#FFAB70\">res\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">) { \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">return\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> res.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">send\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"Express + Typescript + NodeJS = 😍\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">); });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#6A737D\">    \u002F\u002F mulai server express\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    app.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">listen\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(port, \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> () {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">        console.\u003C\u002Fspan>\u003Cspan style=\"color:#B392F0\">log\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">(\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\">\"[server] server dimulai di http:\u002F\u002Flocalhost:\"\u003C\u002Fspan>\u003Cspan style=\"color:#F97583\"> +\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\"> port \u003C\u002Fspan>\u003Cspan style=\"color:#F97583\">+\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> \" ⚡\"\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">    });\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">main\u003C\u002Fspan>\u003Cspan style=\"color:#E1E4E8\">();\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003Cp>Bisa kalian lihat, semua sintaks modern kayak \u003Cem>arrow functions\u003C\u002Fem> telah diubah menjadi fungsi biasa (\u003Cem>anonymous function\u003C\u002Fem>) dan variabel diubah menjadi \u003Ccode>var\u003C\u002Fcode>. Hal ini dikarenakan target compiler kita atur ke \u003Ccode>es5\u003C\u002Fcode> di file \u003Ccode>tsconfig.json\u003C\u002Fcode>. Kalau kalian pengen hasil yang lebih modern, kalian bisa mengubah nilai \u003Ccode>target\u003C\u002Fcode> tersebut ke \u003Ccode>es6\u003C\u002Fcode> atau versi yang lebih baru.\u003C\u002Fp>\n\u003Cp>Terakhir, buat menjalankan kode versi \u003Cem>production\u003C\u002Fem> yang udah dicompile tadi, jalankan perintah berikut:\u003C\u002Fp>\n\n\u003Cdiv class=\"code-block-wrapper my-6 not-prose rounded-xl border-2 border-black dark:border-gray-600 shadow-neo overflow-hidden bg-[#24292e] text-[#e1e4e8] transition-all\">\n  \u003Cdiv class=\"code-block-header flex items-center justify-between px-4 py-2.5 bg-[#1f2428] border-b-2 border-black dark:border-gray-600 font-mono text-xs font-bold text-gray-300 select-none\">\n    \u003Cdiv class=\"flex items-center gap-2\">\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ff5f56] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#ffbd2e] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"w-3 h-3 rounded-full bg-[#27c93f] border border-black\u002F40 inline-block\">\u003C\u002Fspan>\n      \u003Cspan class=\"ml-2 font-mono font-bold text-xs uppercase tracking-wider text-gray-300\">SHELL\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n    \u003Cbutton type=\"button\" class=\"copy-code-btn flex items-center gap-1.5 px-3 py-1 text-xs font-bold bg-[#2f363d] text-gray-200 border-2 border-black dark:border-gray-500 rounded-lg shadow-neo-sm hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none hover:bg-gray-700 transition-all cursor-pointer\" data-code=\"npm%20run%20serve\" title=\"Salin kode\">\n      \u003Csvg class=\"w-3.5 h-3.5 copy-icon-svg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n        \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\">\u003C\u002Fpath>\n      \u003C\u002Fsvg>\n      \u003Cspan class=\"copy-text\">Copy\u003C\u002Fspan>\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"code-block-content p-4 overflow-x-auto text-sm font-mono leading-relaxed bg-[#24292e]\">\n    \u003Cpre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"color:#B392F0\">npm\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> run\u003C\u002Fspan>\u003Cspan style=\"color:#9ECBFF\"> serve\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\u003Ch2 id=\"versi-cepat-tl-dr\">Versi Cepat (TL;DR)\u003C\u002Fh2>\n\u003Cp>Buat kalian yang lagi buru-buru atau pengen langsung melihat hasil jadinya tanpa perlu mengetik satu-satu dari awal, tenang aja. Kalian bisa langsung clone atau salin kode lengkapnya dari repositori \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fizzudd\u002Fkode-kode-invasikode\u002Ftree\u002Fmain\u002Ftypescript-node-express\">GitHub\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>Setelah disalin, kalian tinggal jalankan perintah \u003Ccode>npm install\u003C\u002Fcode> di terminal komputer kalian buat memasang semua dependensinya, dan proyek pun siap dijalankan!\u003C\u002Fp>\n\u003Cp>Catatan kecil, file \u003Ccode>package-lock.json\u003C\u002Fcode> \u003Cem>nggak\u003C\u002Fem> perlu ikut disalin ya.\u003C\u002Fp>\n\u003Cp>Selamat mencoba dan bereksperimen dengan \u003Cem>TypeScript\u003C\u002Fem>! Semoga sukses kodingnya! 😁\u003C\u002Fp>\n","\u003Cul>\n\u003Cli>TypeScript memberikan fitur static typing dan autocompletion yang membuat penulisan kode di Node.js jadi lebih aman dan minim bug.\u003C\u002Fli>\n\u003Cli>Package ts-node mempermudah kita menjalankan file TypeScript secara langsung tanpa perlu dicompile manual selama masa development.\u003C\u002Fli>\n\u003Cli>Untuk production, file TypeScript wajib dicompile ke JavaScript biasa agar kinerjanya optimal dan kompatibel dengan Node.js.\u003C\u002Fli>\n\u003C\u002Ful>\n",[708,725,738,751,764,784],{"id":709,"title":710,"title_en":21,"slug":711,"excerpt":712,"excerpt_en":21,"has_translation":15,"published_at":713,"reading_time":621,"hidden_from_listing":15,"tags":714,"thumbnail_image":21,"og_image":716,"series":717,"authors":722},133,"Python Strings: the Badge That Only Worked for One Name","python-strings","The badge script printed the right name for the person who wrote it and the wrong name for everybody else. Slicing counts characters, and a name is words.","2026-10-28T13:00:00.000Z",[245,715],"string","\u002Fog\u002Fpython-strings.png",{"id":718,"title":719,"title_en":720,"slug":721},30,"Koleksi dan String","Collections and Strings","python-collections",[723],{"authors_id":724},{"id":293,"name":294,"slug":295,"role":257,"profile_picture":21},{"id":726,"title":727,"title_en":21,"slug":728,"excerpt":729,"excerpt_en":21,"has_translation":15,"published_at":730,"reading_time":621,"hidden_from_listing":15,"tags":731,"thumbnail_image":21,"og_image":733,"series":734,"authors":735},132,"Python Tuples: Why All Three Points Are the Same Point","python-tuples","Three points walk into a loop and come out identical. The list was never copied three times; the name was. A tuple makes that bug impossible.","2026-10-28T12:00:00.000Z",[245,732],"tuple","\u002Fog\u002Fpython-tuples.png",{"id":718,"title":719,"title_en":720,"slug":721},[736],{"authors_id":737},{"id":293,"name":294,"slug":295,"role":257,"profile_picture":21},{"id":739,"title":740,"title_en":21,"slug":741,"excerpt":742,"excerpt_en":21,"has_translation":15,"published_at":743,"reading_time":621,"hidden_from_listing":15,"tags":744,"thumbnail_image":21,"og_image":746,"series":747,"authors":748},131,"Python Sets: the Duplicate That Keeps Coming Back","python-sets","A de-duplication loop that works on clean data leaves four tags where there should be two. The bug is case, and the fix is a `set`.","2026-10-28T11:00:00.000Z",[245,745],"set","\u002Fog\u002Fpython-sets.png",{"id":718,"title":719,"title_en":720,"slug":721},[749],{"authors_id":750},{"id":293,"name":294,"slug":295,"role":257,"profile_picture":21},{"id":752,"title":753,"title_en":21,"slug":754,"excerpt":755,"excerpt_en":21,"has_translation":15,"published_at":756,"reading_time":621,"hidden_from_listing":15,"tags":757,"thumbnail_image":21,"og_image":759,"series":760,"authors":761},130,"Python Dictionaries: the Key That Isn't There","python-dictionary","A word counter dies the first time it meets a word twice. The fix is one line; what takes longer is knowing which of a dict's three lookups to reach for.","2026-10-28T10:00:00.000Z",[245,758],"dictionary","\u002Fog\u002Fpython-dictionary.png",{"id":718,"title":719,"title_en":720,"slug":721},[762],{"authors_id":763},{"id":293,"name":294,"slug":295,"role":257,"profile_picture":21},{"id":765,"title":766,"title_en":767,"slug":768,"excerpt":769,"excerpt_en":770,"has_translation":12,"published_at":771,"reading_time":14,"hidden_from_listing":15,"tags":772,"thumbnail_image":21,"og_image":779,"series":780,"authors":781},129,"Biar RAG nggak kena 504: pisahin jalur query dan ingestion","So Your RAG Stops Hitting 504: Split the Query Path From Ingestion","rag-pisah-jalur-query-dan-ingestion","Satu service RAG yang merangkap parsing dan menjawab kueri bakal tumbang pas ada yang upload PDF 200 halaman. Obatnya dua jalur dan satu queue.","One RAG service that both parses uploads and answers queries will fall over the moment someone uploads a 200-page PDF. The cure is two paths and one queue.","2026-10-22T01:30:00.000Z",[773,774,775,776,777,778],"rag","cloud-run","cloud-tasks","gcp","serverless","arsitektur","\u002Fog\u002Frag-pisah-jalur-query-dan-ingestion.png",{"id":694,"title":35,"title_en":36,"slug":37},[782],{"authors_id":783},{"id":293,"name":294,"slug":295,"role":257,"profile_picture":21},{"id":785,"title":786,"title_en":787,"slug":788,"excerpt":789,"excerpt_en":790,"has_translation":12,"published_at":791,"reading_time":621,"hidden_from_listing":15,"tags":792,"thumbnail_image":21,"og_image":799,"series":800,"authors":801},128,"Linear atau graf: cara mengatur banyak agent tanpa loop abadi","Linear or Graph: How to Run Many Agents Without an Eternal Loop","multi-agen-linear-atau-grafik","Satu agent dengan dua puluh tool gampang kacau. Begitu beberapa agent saling revisi, kamu butuh graf yang mendukung cycle dan angka yang membuatnya berhenti.","One agent with twenty tools gets messy fast. Once several agents revise each other, you need a graph that allows cycles and a number that makes it stop.","2026-10-21T16:05:00.000Z",[793,794,795,796,797,798],"multi-agent","langgraph","autogen","orkestrasi","checkpoint","llm","\u002Fog\u002Fmulti-agen-linear-atau-grafik.png",{"id":694,"title":35,"title_en":36,"slug":37},[802],{"authors_id":803},{"id":293,"name":294,"slug":295,"role":257,"profile_picture":21},[805,808,811,814,817,820],{"text":806,"depth":254,"id":807},"Persiapan","persiapan",{"text":809,"depth":254,"id":810},"Inisialisasi Proyek Node.js","inisialisasi-proyek-node-js",{"text":812,"depth":254,"id":813},"Menambahkan TypeScript ke Proyek","menambahkan-typescript-ke-proyek",{"text":815,"depth":254,"id":816},"Membuat Server dengan TypeScript","membuat-server-dengan-typescript",{"text":818,"depth":254,"id":819},"Kompilasi TypeScript ke JavaScript","kompilasi-typescript-ke-javascript",{"text":821,"depth":254,"id":822},"Versi Cepat (TL;DR)","versi-cepat-tl-dr",1793295834724]