Kumpulan Catatan Riza Fahmi (Full)

Fondasi Agentic Coding - Integrasi LLM

2026-02-08T00:00:00Z

Seri Agentic Coding

Fondasi Agentic Coding - Apa itu Agent?
➡️ Fondasi Agentic Coding - Integrasi LLM

Setelah membedah konsep AI Agent di bagian pertama, kini saatnya kita mempraktikkan teori dalam barisan kode. Kita akan membangun mbb, sebuah aplikasi CLI fungsional menggunakan Elixir, bahasa yang sangat ideal untuk Agentic AI karena kemampuan konkurensi dan fault tolerance. Kita akan belajar langkah demi langkah cara memanggil LLM melalui REST API dan menterjemahkan responsnya agar bisa dipahami oleh pengguna.

Sedikit demi sedikit kita akan mengembangkan mbb mulai nol sampai menjadi agentic coding sederhana.

"Perjalanan membangun AI agent dimulai dengan satu API call."

Berikut adalah cuplikan aplikasi yang akan kita kembangkan di artikel ini. Setelah membaca artikel ini, kita akan sama-sama belajar bagaimana memanggil LLM lewat REST API dan menterjemahkan respons.

Persiapan Proyek

Kita akan membangun aplikasi mbb ini dengan Elixir. Elixir adalah bahasa pemrograman fungsional yang elegan. Jika teman-teman ingin melihat implementasi dengan bahasa lain boleh tulis di kolom komentar.

Pertama, buat proyeknya dulu dengan mix dan jalankan mix test untuk memastikan semuanya berjalan sesuai harapan.

$ mix new mbb
$ cd mbb
$ mix test

Compiling 1 file (.ex)
Generated mbb app
..

Finished in 0.03 seconds (0.03s async, 0.00s sync)
1 doctest, 1 test, 0 failures

Konfigurasi aplikasi CLI dengan Escript

Agar aplikasi kita bisa dijalankan dari command line, kita akan mengemasnya sebagai escript. Tambahkan konfigurasi escript di dalam mix.exs. Escript melakukan kompilasi seluruh kode Elixir beserta pustaka tambahan menjadi satu file binary mandiri. Ini memudahkan distribusi aplikasi. Pengguna hanya memerlukan Erlang Runtime (ERTS) di sistem mereka tanpa harus mengunduh source code atau menjalankan mix secara manual.

`mix.exs`

# kode lainnya...
def project do
  [
    # kode lainnya...
    escript: [main_module: Mbb]
  ]
end
# kode lainnya...
end

Di kode ini kita mengarahkan escript untuk menggunakan modul Mbb sebagai pintu masuk utama aplikasi kita. Nantinya, fungsi main/1 di dalam modul Mbb akan otomatis dieksekusi saat kita menjalankan file escript yang sudah dibangun.

Berikutnya, kita akan menulis fungsi main/1 di dalam modul Mbb untuk menampilkan pesan legendaris "Hello, world!" saat aplikasi dijalankan dari command line.

Menampilkan pesan legendaris

Sekarang kita akan menambahkan fungsi main/1 di dalam modul Mbb untuk menampilkan pesan legendaris "Hello, world!" saat aplikasi dijalankan dari command line.

`lib/mbb.ex`

defmodule Mbb do
  def main(_args) do
    IO.puts("Hello, world!")
  end
end

Jalankan perintah berikut untuk membangun escript dan menjalankannya.

$ mix escript.build
$ ./mbb

Tentu saja akan muncul pesan "Hello, world!" di terminal.

Hello, world!

Berhubung kita akan kita akan menggunakan argumen untuk mengirim instruksi ke LLM nanti, ubah sedikit fungsi main/1 agar menampilkan argumen yang diterima. Dan apabila tidak ada argumen, tampilkan cara penggunaan aplikasi.

`lib/mbb.ex`

defmodule Mbb do
  def main([question]) do
    IO.puts("Hello, #{question}!")
  end

  def main([]) do
    IO.puts("Usage: ./mbb \"<your question>\"")
  end
end

Kode diatas mendemonstrasikan penggunaan pattern matching di Elixir, salah satu fitur menarik dari bahasa ini. Meski memiliki nama yang sama, fungsi main/1 memiliki dua definisi fungsi yang berbeda. Elixir akan otomatis memilih definisi mana yang cocok berdasarkan struktur argumen yang diterima. Jika argumen berupa list/array dengan satu elemen [question], definisi pertama yang akan dieksekusi. Jika list kosong [], definisi kedua dipanggil. Ini membuat kode lebih deklaratif dibanding menggunakan if/else.

Jalankan kembali escript-nya dengan argumen.

$ mix escript.build
$ ./mbb "Elixir"

Hasilnya, tentu saja akan menampilkan:

Hello, Elixir!

Sedangkan apabila program dijalankan tanpa memberikan argumen tambahan, maka akan menampilkan pesan penggunaan.

$ ./mbb

Usage: ./mbb "<your question>"

Berikutnya kita akan mengganti pesan "Hello, !" dengan respons dari LLM. Tapi sebelum itu, kita perlu menambahkan pustaka HTTP client untuk memanggil REST API terlebih dahulu.

Memanggil LLM dengan REST API

Menambahkan Pustaka Req

Untuk berinteraksi dengan LLM, kita akan menggunakan pendekatan REST API. Selain lebih familiar bagi sebagian besar teman-teman developer, cara ini bersifat lebih agnostik dan tidak mengikat kita dibandingkan menggunakan pustak atau SDK pihak ketiga tertentu. Hari ini Gemini, besok bisa Claude atau GPT-5 dengan perubahan minimal.

Untuk menangani pemanggilan REST API, kita akan menggunakan pustaka Req. Req adalah HTTP client Elixir modern dengan penggunaan yang lebih sederhana. Alternatif lain ada HTTPoison yang lebih mature tapi verbose atau Finch yang lebih low-level. Req cocok untuk proyek ini karena sederhana penggunaannya dibandingkan pustaka lain. Req juga mendukung retry otomatis, konfigurasi timeout, dan sudah dilengkapi dengan penanganan format JSON, yang akan berguna sepanjang pengembangan aplikasi.

Buka mix.exs dan tambahkan :req di dalam daftar dependensi.

`mix.exs`

# kode lainnya...

defp deps do
  [
    {:req, ">= 0.0.0"}
  ]
end

Kode diatas memberitahu Elixir bahwa kita ingin menggunakan pustaka Req dengan versi berapa pun yang tersedia.

Setelah itu jalankan mix deps.get untuk mengunduh dependensi yang baru ditambahkan. Dan kita siap untuk memanggil LLM lewat REST API.

$ mix deps.get

Resolving Hex dependencies...
Resolution completed in 0.05s
New:
  req 0.5.0
* Getting req (Hex package)

Membuat Panggilan API Perdana

Kali ini kita akan menggunakan model Gemini dari Google. Tenang saja, semua konsep yang kita bahas di sini bisa diterapkan ke model lain seperti Claude, GPT-5, atau lainnya. Hanya berbeda di endpoint, data yang dikirim dan data yang diterima.

Sebelum kita mengirim permintaan ke API, kita perlu mendapatkan API key dari penyedia layanan LLM. Saya contohkan menggunakan AIStudio dari Google. Silakan daftar dan dapatkan API key-nya. Tenang saja, ada free tier-nya kok sehingga tidak perlu mengeluarkan biaya.

Setelah mendapatkan API key, simpan di file .env.

`.env`

$ export API_KEY="sk-..."

Lalu aktivasi dengan menjalankan:

$ source .env

Perintah diatas akan menambahkan variabel API_KEY ke dalam environment sehingga bisa diakses oleh aplikasi kita. Tidak semua sistem operasi dapat menjalankan perintah source, jadi pastikan untuk menyesuaikan dengan sistem operasi yang digunakan. Sistem operasi Linux dan macOS biasanya mendukung perintah source, sedangkan di Windows, Anda mungkin perlu menggunakan set atau setx untuk mengatur environment variable.

Jangan lupa untuk menambahkan file .env ke dalam .gitignore untuk mencegah kebocoran data rahasia ke repositori publik.

Sekarang bagian yang seru. Ubah file lib/mbb.ex.

`lib/mbb.ex`

defmodule Mbb do
  @model "gemini-3-flash-preview"
  @system_prompt "You are a helpful assistant."

  def main([question]) do
    {:ok, response} = call(question)
    IO.puts(response)
  end

  def main([]) do
    IO.puts("Usage: ./mbb \"<your question>\"")
  end

  def call(message) do
    api_key = System.fetch_env!("API_KEY")
    url = api_url(api_key)

    body = %{
      system_instruction: %{parts: [%{text: @system_prompt}]},
      contents: [%{role: "user", parts: [%{text: message}]}],
      generationConfig: %{
        maxOutputTokens: 1_000,
        temperature: 0.0,
        thinkingConfig: %{
          thinkingLevel: "MEDIUM"
        }
      }
    }

    case Req.post(url, json: body) do
      {:ok, %{status: 200, body: body}} ->
        parse_response(body)

      {:ok, %{status: status, body: body}} ->
        {:error, "API error #{status}: #{inspect(body)}"}

      {:error, reason} ->
        {:error, "Request failed: #{inspect(reason)}"}
    end
  end

  defp api_url(api_key) do
    "https://generativelanguage.googleapis.com/v1beta/models/#{@model}:generateContent?key=#{api_key}"
  end

  defp parse_response(%{"candidates" => [%{"content" => %{"parts" => [%{"text" => text}]}} | _]}) do
    {:ok, text}
  end

  defp parse_response(body) do
    {:error, "Unexpected response format: #{inspect(body)}"}
  end
end

Fungsi call/1 di atas bertanggung jawab untuk membangun permintaan API, mengirimkannya, dan menangani respons yang diterima. Kita menggunakan Req.post/2 untuk mengirim permintaan POST ke endpoint API Gemini dengan payload yang sudah kita siapkan. Jika permintaan berhasil, kita akan memanggil fungsi parse_response/1 untuk mengekstrak teks jawaban dari respons API. Jika terjadi kesalahan, kita akan mengembalikan pesan kesalahan.

Sedangkan untuk konfigurasi LLM, kita mengatur thinkingLevel menjadi "MEDIUM" yang memungkinkan model melakukan penalaran internal sebelum memberikan jawaban. Ini bisa membantu menghasilkan jawaban yang lebih baik untuk pertanyaan yang kompleks. temperature diatur ke 0.0 untuk memastikan jawaban yang lebih konsisten. Sedangkan maxOutputTokens diatur ke 1.000 untuk memberikan ruang yang cukup bagi model untuk menghasilkan jawaban yang panjang jika diperlukan. Teman-teman bebas mengubah konfigurasi ini sesuai kebutuhan. Konfigurasi yang saya gunakan hanya sebagai contoh untuk memulai.

Lakukan kompilasi ulang dan coba jalankan programnya.

$ mix escript.build
$ ./mbb "Tanggal dan jam berapa sekarang?"

Sekarang adalah hari **Rabu, 22 Mei 2024**.
Waktu saat ini menunjukkan pukul **08:44**.

Seperti model bahasa besar lainnya, Gemini masih mengalami halusinasi jika ditanya sesuatu yang sifatnya data terkini. Lain halnya jika pertanyaan berkaitan dengan pengetahuan umum yang sudah masuk ke dalam data latihannya.

$ ./mbb "Mengapa bahasa fungsional lebih unggul dibandingkan paradigma lain?"

Menyebut bahasa fungsional (seperti Haskell, Elixir, Scala, atau Clojure) "lebih unggul" mungkin subjektif, namun paradigma **Functional Programming (FP)** memang memiliki keunggulan teknis yang sangat signifikan dibandingkan paradigma **Imperatif** atau **Object-Oriented (OO)**, terutama dalam konteks pengembangan perangkat lunak modern yang kompleks.
Berikut adalah alasan mengapa paradigma fungsional dianggap lebih unggul dalam banyak aspek:

### 1. Immutability (Kekekalan Data)
Dalam FP, data bersifat *immutable* (tidak dapat diubah setelah dibuat). Jika Anda ingin mengubah nilai, Anda membuat data baru, bukan memodifikasi yang lama.
*   **Keunggulan:** Ini menghilangkan bug yang disebabkan oleh perubahan status (*state*) yang tidak terduga. Anda tidak perlu khawatir variabel "A" tiba-tiba berubah nilainya di tengah eksekusi karena dipengaruhi oleh fungsi lain.

### 2. Pure Functions (Fungsi Murni)
Fungsi murni adalah fungsi yang:
1. Menghasilkan output yang sama untuk input yang sama.
2. Tidak memiliki **Side Effects** (tidak mengubah variabel global, tidak menulis ke database, dll. secara tersembunyi).
*   **Keunggulan:** Kode menjadi sangat mudah diprediksi, diuji (*unit testing*), dan di-*debug*. Anda cukup melihat input dan output tanpa harus melacak status seluruh aplikasi.

### 3. Kemudahan Concurrency dan Parallelism
Ini adalah alasan utama mengapa FP populer di era prosesor multi-core. Dalam paradigma OO, menjalankan banyak *thread* secara bersamaan sangat sulit karena adanya "Shared State" (data yang diakses bersama), yang sering menyebabkan *race conditions*.
*   **Keunggulan:** Karena data dalam FP bersifat *immutable*, tidak ada risiko dua *thread* mengubah data yang

Selamat! Kita sudah berhasil memanggil API pertama ke Gemini. Berikutnya kita akan mengintip sedikit ke dalam respons API untuk memahami data apa saja yang kita dapatkan selain jawaban teks sehingga nantinya bisa kita manfaatkan untuk mengembangkan program kita lebih lanjut.

Anatomi Respons API

Biasanya LLM seperti Gemini tidak hanya mengirimkan jawaban teks. API biasanya juga menyertakan metadata penting, seperti jumlah token dan alasan mengapa model berhenti menghasilkan teks, yang krusial untuk pemantauan biaya serta performa aplikasi.

{
  "candidates": [
    {
      "content": {
        "parts": [
          {
            "text": "Saat ini adalah hari **Kamis, 23 Mei 2024**. \nWaktu menunjukkan pukul **08:14** WIB (Waktu Indonesia Barat).",
            "thoughtSignature": "EswHCskHAb..."
          }
        ],
        "role": "model"
      },
      "finishReason": "STOP",
      "index": 0
    }
  ],
  "usageMetadata": {
    "promptTokenCount": 7,
    "candidatesTokenCount": 38,
    "totalTokenCount": 329,
    "promptTokensDetails": [
      {
        "modality": "TEXT",
        "tokenCount": 7
      }
    ],
    "thoughtsTokenCount": 284
  },
  "modelVersion": "gemini-3-flash-preview",
  "responseId": "DR-PaZOINuX94-EPjqGjuQg"
}

Memahami struktur JSON ini krusial untuk pengembangan lebih lanjut:

content: Objek yang berisi array. Ada respons dari LLM, tool_use untuk dibahas artikel berikutnya.
finishReason: Alasan model berhenti. STOP berarti selesai secara normal, sementara MAX_TOKEN menandakan jawaban terpotong karena rate limit.
totalTokenCount: Total konsumsi token keseluruhan, input dan output. Perhatikan bagian thoughtsTokenCount karena kita mengaktifkan thinkingLevel: "MEDIUM" di konfigurasi, yang memungkinkan model melakukan penalaran internal sebelum menjawab.

Setelah kita memahami apa yang API kirimkan, mari kita pastikan aplikasi kita handle error dengan graceful ketika sesuatu tidak berjalan sesuai rencana."

Bagian berikutnya kita akan menangani lebih lanjut kesalahan yang mungkin terjadi saat memanggil API, seperti API_KEY yang tidak ditemukan, input yang tidak valid, atau error dari sisi server penyedia LLM.

Menangani Kesalahan

Validasi `API_KEY`

Meskipun kode awal sudah memiliki penanganan kesalahan dasar, aplikasi yang kokoh membutuhkan respons yang lebih informatif. Mari kita tingkatkan pengalaman pengguna dengan membuat pesan kesalahan yang lebih "manusiawi", terutama saat variabel API_KEY belum ditemukan.

** (System.EnvError) could not fetch environment variable "API_KEY" because it is not set
    (elixir 1.18.4) lib/system.ex:705: System.fetch_env!/1
    (mbb 0.1.0) lib/mbb.ex:17: Mbb.call/1
    (mbb 0.1.0) lib/mbb.ex:6: Mbb.main/1
    (elixir 1.18.4) lib/kernel/cli.ex:137: anonymous fn/3 in Kernel.CLI.exec_fun/2

Kita akan ganti dengan pesan kurang lebih seperti berikut:

API_KEY tidak ditemukan. Jalankan: export API_KEY=\"AIsKantT...\" terlebih dahulu sebelum menjalankan ./mbb.

`lib/mbb.ex`

defmodule Mbb do
   @model "gemini-3-flash-preview"
   @system_prompt "You are a helpful assistant."

   def main([question]) do
-    {:ok, response} = call(question)
-    IO.puts(response)
+    case call(question) do
+      {:ok, response} ->
+        IO.puts(response)
+
+      {:error, reason} ->
+        IO.puts(reason)
+    end
   end
 
   def main([]) do
     IO.puts("Usage: ./mbb \"<your question>\"")
   end
 
   def call(message) do
-    api_key = System.fetch_env!("API_KEY")
+    api_key = System.get_env("API_KEY")
+
+    cond do
+      is_nil(api_key) or api_key == "" ->
+        {:error,
+         "API_KEY tidak ditemukan. Jalankan: export API_KEY=\"AIsKantT...\" terlebih dahulu sebelum menjalankan ./mbb."}
+
+      true ->
+        do_call(api_key, message)
+    end
+  end
+
+  defp do_call(api_key, message) do
    url = api_url(api_key)

    body = %{
      system_instruction: %{parts: [%{text: @system_prompt}]},
      contents: [%{role: "user", parts: [%{text: message}]}],
      generationConfig: %{
        maxOutputTokens: 1_000,
        temperature: 0.0,
        thinkingConfig: %{
          thinkingLevel: "MEDIUM"
        }
      }
    }

    case Req.post(url, json: body) do
      {:ok, %{status: 200, body: body}} ->
        parse_response(body)

      {:ok, %{status: status, body: body}} ->
        {:error, "API error #{status}: #{inspect(body)}"}

      {:error, reason} ->
        {:error, "Request failed: #{inspect(reason)}"}
    end
  end

  # Kode lainnya...

end

Kita mengganti penggunaan System.fetch_env!/1 dengan System.get_env/1 yang tidak akan melempar error jika environment variable tidak ditemukan. Sebagai gantinya, kita melakukan pengecekan manual untuk memastikan API_KEY ada dan tidak kosong. Jika tidak ditemukan, kita mengembalikan format {:error, reason} lalu menampilkan pesan kesalahan yang lebih informatif kepada pengguna.

Sekarang apabila dijalankan tanpa setup API_KEY terlebih dahulu, akan menghasilkan pesan kesalahan seperti berikut:

$ mix escript.build
$ ./mbb "Tanggal dan jam berapa sekarang?"

API_KEY tidak ditemukan. Jalankan: export API_KEY="AIsKantT..." terlebih dahulu sebelum menjalankan ./mbb.

Validasi input

Berikutnya kita akan menangani input dari pengguna. Jika instruksi atau pertanyaan kosong atau hanya berisi spasi, sebaiknya tidak perlu dikirimkan ke LLM. Selain tidak ada gunanya, juga bisa menghemat token.

`lib/mbb.ex`

 defmodule Mbb do
   @model "gemini-3-flash-preview"
   @system_prompt "You are a helpful assistant."
+  @help_message "Usage: ./mbb \"<your question>\""
 
   def main([question]) do
     case call(question) do
       {:ok, response} ->
         IO.puts(response)

       {:error, reason} ->
         IO.puts(reason)
     end
   end
 
   def main([]) do
-    IO.puts("Usage: ./mbb \"<your question>\"")
+    IO.puts(@help_message)
   end
 
   def call(message) do
     api_key = System.get_env("API_KEY")

     cond do
       is_nil(api_key) or api_key == "" ->
         {:error,
          "API_KEY tidak ditemukan. Jalankan: export API_KEY=\"AIsKantT...\" terlebih dahulu sebelum menjalankan ./mbb."}
+      String.trim(message) == "" ->
+        {:error, @help_message}
       true ->
         do_call(api_key, message)
     end
   end
 
   # Kode lainnya...
 end

Pertama, kita menambahkan variabel @help_message untuk menyimpan pesan bantuan yang akan ditampilkan kepada pengguna sehingga dapat dipanggil berkali-kali tanpa harus menulis ulang string pesan bantuan. Kemudian, di dalam fungsi call/1, kita menambahkan kondisi untuk memeriksa apakah input message hanya berisi spasi atau kosong setelah dibersihkan dengan String.trim/1. Jika kondisi ini terjadi, kita mengembalikan format {:error, @help_message} yang akan menampilkan pesan bantuan kepada pengguna.

Validasi HTTP Error

Kita juga akan menangani beberapa HTTP error seperti 401 jika API_KEY keliru, 429 jika kena rate limit, 500 jika kesalahan terjadi di sisi server penyedia LLM, dan juga penanganan jika koneksi lambat, terputus dsb.

`lib/mbb.ex`

 defmodule Mbb do
   @model "gemini-3-flash-preview"
   @system_prompt "You are a helpful assistant."
   @help_message "Usage: ./mbb \"<your question>\""
   
   # Kode lainnya...
 
   defp do_call(api_key, message) do
     url = api_url(api_key)
 
     body = %{
       system_instruction: %{parts: [%{text: @system_prompt}]},
       contents: [%{role: "user", parts: [%{text: message}]}],
       generationConfig: %{
         maxOutputTokens: 1_000,
         temperature: 0.0,
         thinkingConfig: %{
           thinkingLevel: "MEDIUM"
         }
       }
     }
 
     case Req.post(url, json: body) do
       {:ok, %{status: 200, body: body}} ->
         parse_response(body)
 
+      {:ok, %{status: 401}} ->
+        {:error, "401 Unauthorized: Periksa kembali API_KEY anda."}
+
+      {:ok, %{status: 429}} ->
+        {:error, "429 Rate Limit Exceeded: Tunggu beberapa menit, lalu coba lagi."}
+
+      {:ok, %{status: 500}} ->
+        {:error, "500 Server Error: Masalah di sisi LLM provider. Coba lagi dalam beberapa menit."}
+
       {:ok, %{status: status, body: body}} ->
-        {:error, "API error #{status}: #{inspect(body)}"}
+        {:error, "API Error #{status}: #{get_error_message(body)}"}
+
+      {:error, %{reason: :timeout}} ->
+        {:error, "Request timeout. Koneksi lambat atau terputus."}
 
       {:error, reason} ->
         {:error, "Request failed: #{inspect(reason)}"}
     end
   end
 
+  defp get_error_message(%{"error" => %{"message" => msg}}), do: msg
+  defp get_error_message(body), do: inspect(body)

   defp api_url(api_key) do
     "https://generativelanguage.googleapis.com/v1beta/models/#{@model}:generateContent?key=#{api_key}"
   end

Pada potongan kode di atas, kita menambahkan beberapa pola pencocokan untuk menangani status HTTP yang umum terjadi saat memanggil API. Untuk setiap status error yang kita tangani, kita mengembalikan pesan kesalahan yang lebih spesifik dan informatif kepada pengguna. Selain itu, kita juga menambahkan penanganan untuk kasus timeout yang mungkin terjadi jika koneksi internet lambat atau terputus. Tentunya kita juga akan menampilkan pesan kesalahan lain yang tidak secara spesifik ditangani oleh kode kita.

Bagian berikutnya kita akan menambahkan indikator status "Berpikir..." saat menunggu respons dari LLM, serta memberikan warna pada output untuk membedakan antara respons sukses dan pesan kesalahan.

Status Indikator

Sekarang kita akan menambahkan indikator "Berpikir..." supaya pengguna tidak kebingungan. Tambahkan warna juga sebagai indikator kesuksesan atau kesalahan.

`lib/mbb.ex`

 defmodule Mbb do
   @model "gemini-3-flash-preview"
   @system_prompt "You are a helpful assistant."
-  @help_message "Usage: ./mbb \"<your question>\""
+
+  # ANSI color codes
+  @green "\e[32m"
+  @red "\e[31m"
+  @cyan "\e[36m"
+  @reset "\e[0m"
 
   def main([question]) do
+    print_thinking()
+
     case call(question) do
-      {:ok, response} ->
-        IO.puts(response)
+      {:ok, text} ->
+        print_response(text)
 
       {:error, reason} ->
-        IO.puts(reason)
+        print_error(reason)
     end
   end
 
   def main([]) do
-    IO.puts(@help_message)
+    IO.puts(help_message())
   end
 
 def call(message) do
     api_key = System.get_env("API_KEY")
 
     cond do
       is_nil(api_key) or api_key == "" ->
         {:error,
          "API_KEY tidak ditemukan. Jalankan: export API_KEY=\"AIsKantT...\" terlebih dahulu sebelum menjalankan ./mbb."} 

       String.trim(message) == "" ->
-        {:error, @help_message}
+        {:error, help_message()}
 
       true ->
         do_call(api_key, message)
     end
   end

   # Kode lainnya...
 
+  defp print_thinking() do
+    IO.write("#{@cyan}🤖 Sedang berpikir...#{@reset}\r")
+  end
+
+  defp print_response(text) do
+    IO.write("\e[2K")
+    IO.puts("#{@green}#{text}#{@reset}")
+  end
+
+  defp print_error(reason) do
+    IO.write("\e[2K")
+    IO.puts("#{@red}❌ #{reason}#{@reset}")
+  end
+
+  defp help_message() do
+    """
+    #{@cyan}mbb#{@reset} - AI Coding Agent
+
+    Usage:
+      ./mbb "pertanyaan atau instruksi"
+
+    Examples:
+      ./mbb "Apa itu recursion?"
+      ./mbb "Jelaskan pattern matching di Elixir"
+    """
+  end
+
   defp get_error_message(%{"error" => %{"message" => msg}}), do: msg
   defp get_error_message(body), do: inspect(body)
   
   # Kode lainnya...
 end

Potongan kode di atas menambahkan beberapa fungsi baru agar pengalaman pengguna menjadi lebih baik. Fungsi print_thinking/0 akan menampilkan indikator "Berpikir..." dengan warna cyan saat aplikasi sedang menunggu respons dari LLM. Fungsi print_response/1 akan menampilkan respons sukses dengan warna hijau, sedangkan fungsi print_error/1 akan menampilkan pesan kesalahan dengan warna merah. Selain itu, kita juga memperbarui fungsi main/1 untuk memanggil fungsi-fungsi baru ini sesuai dengan hasil yang diterima dari fungsi call/1. Terakhir, kita memperbarui pesan bantuan di dalam fungsi help_message/0 agar lebih informatif dan menarik.

Demo error

Demo indikator

Demo berhasil

Kesimpulan

Kita mulai pengembangan aplikasi dari awal dengan program sederhana yang mencetak "Hello, world!". Sekarang, 100-an baris kode kemudian, kita punya program yang bisa:

✅ Berkomunikasi dengan LLM Gemini lewat REST API
✅ Parsing JSON response dengan pattern matching
✅ Menangani 5 jenis error berbeda (API_KEY, validation, HTTP errors, timeout, malformed response)
✅ Memberikan feedback visual dengan status indicator dan color coding

Pattern matching Elixir membuat kode kita deklaratif dan mudah dipahami. Error handling yang tadinya bisa menjadi potensial if/else bercabang, dapat ditangani dengan lebih elegan.

Tapi ini baru fondasi awal.

Aplikasi kita saat ini stateless. Setiap pertanyaan adalah fresh start. LLM tidak "mengingat" apa yang baru saja kita tanyakan. Akan kita lanjut di artikel berikutnya.

Eksperimen mandiri

Clone repository lengkap di https://github.com/rizafahmi/mbb
Eksperimen dengan konfigurasi: naikkan temperature ke 0.7 untuk respons kreatif, atau ubah thinkingLevel ke "HIGH" untuk reasoning yang lebih dalam
Coba tanyakan pertanyaan pemrograman kompleks dan lihat bagaimana model merespons

Tulis di kolom komentar jika menemukan bug atau punya ide fitur baru.

Fondasi Agentic Coding - Apa itu Agent?

2026-02-06T00:00:00Z

Seri Agentic Coding

➡︎ Fondasi Agentic Coding - Apa itu Agent?
Fondasi Agentic Coding - Integrasi LLM

Bayangkan teman-teman cukup menulis dan memberi perintah 'Buatkan aplikasi untuk mencatat pengeluaran', lalu tiba-tiba file baru muncul, terminal berjalan sendiri, dan beberapa menit berselang aplikasi sudah siap untuk digunakan. Apakah ini sihir? Bukan, ini Agentic Coding.

Agentic coding tool seperti Claude Code, Codex, Cursor atau yang lainnya, memang rasanya seperti sihir. Sedikit sulit dipercaya, apalagi yang belum merasakan manfaatnya. Bagi yang belum menggunakan, silakan dicoba dalam jangka beberapa waktu. Cepat atau lambat teman-teman akan merasakan daya magisnya.

Tapi di balik layar, semua itu bukanlah sihir. Melainkan sebuah pola yang disebut agentic coding. Di artikel ini, kita tidak hanya akan mengintip ke balik tirai, kita akan belajar bagaimana cara kerjanya dan mempelajari polanya.

Paham cara kerjanya tentu akan membantu kita menggunakan agentic coding dengan lebih efektif dan efisien. Semoga setelah membaca tulisan ini teman-teman bisa mendapat gambaran yang lebih jelas tentang apa itu agent dan apa yang membedakan AI agent dengan AI yang bukan agent.

Sebelum itu, mari kita lihat bagaimana perjalanan asisten ngoding dari awal hingga sekarang.

Dari Tukang Ketik ke Mandor Proyek

Perkakas ngoding dengan AI ini telah melewati evolusi yang cukup cepat. Mulai dari chatbot , autocomplete , coding assistant, hingga sekarang kita memasuki eranya agentic coding.

Chatbot umumnya menggunakan antarmuka web. Ketika butuh bantuan, kita membuka chatgpt.com, claude.ai, gemini.google, dsb. Bertanya tentang topik pemrograman (atau topik apapun), si chatbot memberikan potongan kode yang dibutuhkan. Lalu kita sebagai developer menyalin kode tersebut dan melanjutkan proses pengembangan aplikasi. Dan begitu seterusnya.

Chatbot web

Berikutnya muncul fitur autocomplete. Diawali oleh munculnya GitHub Copilot yang diusung oleh Visual Studio Code. Biasanya kita mengetik sesuatu di editor kode lalu AI akan mencoba "menebak" kita maunya apa. Atau autocomplete bisa dipantik dengan menulis komentar kita ingin melakukan apa, lalu AI akan memberikan tebakan terbaiknya.

Fitur autocomplete

Kemudian berkembang lagi. Dengan kemunculan code editor baru, Cursor, asisten ngoding semakin populer. Sederhananya, ini adalah chatbot yang tadinya diakses dengan web browser sekarang ada langsung di editor kode. Dengan tambahan konteks file yang sedang dibuka sehingga kita tidak perlu copas lagi. Dan beberapa fitur menarik lainnya seperti inline chat, hingga fitur yang mampu memahami proyek secara keseluruhan dengan berbagai metodenya seperti indexing code, repomap dan sebagainya.

Setiap kode yang ditambahkan, tetap ada peran kita sebagai manusia yang melakukan perubahan. Menyimpan perubahan file misalnya. Meskipun biasanya editor kita set untuk melakukan auto save. File baru pun harus kita yang buat.

Coding assistant

Terakhir, tibalah kita ke era agentic. Jika menggunakan agen, semuanya serba otomatis. Bikin file baru, baca, tulis dan ubah file, menjalankan perintah terminal dan sebagainya bisa dilakukan oleh LLM. Dimulai dari Cursor dan dipopulerkan oleh Claude Code.

Salah satu ciri khas agentic coding ketika diberi perintah, LLM akan merencanakan, membuat langkah demi langkah untuk menyelesaikan perintah terus menerus sampai perintah dianggap sudah selesai. Jadi si agen ini bukan hanya berusaha menyelesaikan perintah tapi seolah ia berpikir, berencana baru mengeksekusi hingga selesai.

Agentic coding

Cara ini cocok sekali untuk tugas yang kompleks dan sulit dikerjakan dalam sekali tembak. Kok bisa ya tiba-tiba ada LLM yang bisa "mikir", buat rencana lalu eksekusi?

Pola Agentic

Agent atau Agentic berasal dari kata agency. Agency secara harfiah berarti kemampuan untuk bertindak, bukan cuma berpikir atau memberi saran. Atau dengan kata lain punya inisiatif.

LLM tanpa agen layaknya AI dalam tempurung. Jago ngomong, pengetahuan luas, walaupun terbatas (cut off). Meski pintar menjawab pertanyaan kita, tapi LLM tidak bisa berbuat apa-apa, tidak bisa mengingat apapun dan tidak mampu memutuskan jika diberi pilihan. Tidak bisa membaca file, menulis file bahkan tidak tahu tanggal dan jam berapa saat ini.

Ilustrasi LLM: AI dalam tempurung

LLM adalah mesin prediksi token. Berusaha menyelesaikan teks dengan probabilitas tertinggi. Termasuk juga autocomplete kode, yang adalah teks. Kemampuan dasar LLM adalah menghasilkan teks, tidak dapat mengetahui apa yang terjadi disekitarnya. Tidak tahu tanggal dan jam saat ini, baca dan tulis file, bahkan percakapan terdahulu pun LLM tidak ingat. Kecuali diberi akses untuk mendapatkan informasi tanggal dan jam saat ini, akses untuk baca dan tulis file atau menyertakan percakapan terdahulu.

Jadi sebenarnya LLM itu bukan kurang pintar, cuma kurang diberi akses saja.

LLM + Tools

Jadi gimana caranya supaya LLM punya inisiatif? Persenjatai LLM dengan perkakas atau tools. Mulai dari yang sederhana seperti kasih akses untuk ngecek jam dan tanggal, ngecek kurs atau cuaca hingga memberikan akses untuk baca dan tulis file.

LLM dengan perkakas ini, ditambah perkakas untuk menyimpan percakapan dan kemampuan untuk menentukan pilihan perkakas mana yang cocok, dan berjalan terus-menerus hingga tugas selesai itulah yang disebut sebagai AI Agent.

Agentic looping

Dengan kata lain, LLM disebut sebagai agen atau agentic jika LLM berjalan terus-menerus (loop) yang dapat melakukan observasi apa yang sedang dikerjakan, disediakan perkakas untuk bekerja dan punya kemampuan untuk memutuskan kapan sebuah pekerjaan dinyatakan selesai.

Tiga Komponen Utama

Ada tiga komponen utama dalam Agentic AI, yaitu: perkakas, memori dan reasoning loop. Mari kita bahas satu-per-satu.

Perkakas

Memberikan kemampuan kepada LLM. Misalnya kemampuan mendapatkan informasi tanggal dan jam saat ini, cuaca di sebuah kota, harga emas terkini, hingga mengoperasikan file seperti baca dan tulis bahkan kita bisa memberikan kemampuan untuk menjalankan perintah bash.

Memori

Memberikan daya ingat, jangka panjang ataupun jangka pendek akan membuat LLM semakin terlihat "pintar". LLM bisa paham siapa yang sedang berbicara, tugas apa yang ingin diselesaikan karena setiap percakapan baru ditambahkan ke dalam memori. Mulai dari yang paling sederhana, menambahkan ke struktur data array dan mengirimkan kembali histori percakapan hingga yang canggih seperti database eksternal.

Kita bisa saja setiap kali ingin mengirimkan perintah selalu menyertakan percakapan terdahulu. Namun dalam jangka panjang hal ini menjadi melelahkan dan membuat LLM menjadi terlihat "bodoh". Atau bahkan membuat LLM bingung karena kebanyakan konteks.

Hal ini terjadi karena LLM memiliki batasan pandangan yang disebut Context Window. Bayangkan context window seperti meja kerja. Memori adalah lemari arsip yang penuh dengan dokumen. Kita tidak bisa menumpuk semua isi lemari ke atas meja sekaligus karena mejanya akan penuh, berantakan, dan kita malah tidak bisa bekerja.

Ilustrasi meja yang penuh dokumen. Dibuat oleh AI.

Di sinilah Context Engineering berperan. Jika memori adalah tentang apa yang disimpan, maka context engineering adalah tentang bagaimana kita memilih dan menyusun informasi tersebut agar LLM tetap fokus. Tanpa pengelolaan konteks yang baik, LLM akan kehilangan arah, bingung lalu mulai mengabaikan instruksi yang berada di tengah-tengah percakapan yang terlalu panjang.

Reasoning Loop

Dan yang tidak kalah penting adalah kemampuan LLM dalam menentukan dan memilih perkakas yang mana yang cocok digunakan ketika ada permintaan dari pengguna. Misalnya, ketika pengguna bertanya tentang jam berapa, LLM dapat memutuskan untuk menggunakan perkakas jam dan tanggal, bukan malah baca atau tulis file.

Dan LLM juga punya kemampuan untuk terus menerus berusaha untuk menyelesaikan pekerjaannya. Hal inilah yang menjadi pembeda. Sebelum model Sonnet versi 3.7, LLM sulit sekali diajak looping. Meskipun sudah diinstruksikan secara eksplisit kadang LLM memutuskan berhenti sebelum tuntas.

Proses berpikir ini sering disebut sebagai Chain of Thought. LLM diinstruksikan untuk berpikir dan ngomong sendiri untuk merencanakan langkah-langkah untuk menyelesaikan sebuah tugas. Ketika digabung dengan perkakas lainnya, bisa menjelma menjadi sebuah framework seperti ReAct (Reason + Act) yang lebih powerful. Reasoning loop ini adalah "nyawa" dari agentic coding.

Proses berpikir ala LLM

Praktek Membuat Agentic Coding Tool

Mari kita praktekkan langkah demi langkah. Berhubung LLM chatbot saat ini sudah dilengkapi oleh banyak perkakas, kita bisa bertanya tanggal dan jam saat ini dan LLM mampu menjawab dengan akurat. Karena itu kita akan membuat LLM chatbot dari awal dengan menggunakan REST API.

Bertanya tentang jam dan tanggal.

Untuk itu, kita akan mengirimkan data langsung ke penyedia jasa LLM melalui REST API seperti Google, Anthropic, OpenAI dan sebagainya. Untuk contoh disini akan menggunakan Google dan Gemini 3 Flash sebagai pilihan modelnya. Silakan ganti URL, model dan variable API_KEY jika ingin menggunakan penyedia jasa LLM lain.

$ export API_KEY=-AI...
$ curl -X POST "https://generativelanguage.googleapis.com/v1beta/models/gemini-3-flash-preview:generateContent?key=${API_KEY}" \
    -H "Content-Type: application/json" \
    -d '{
        "contents": [
          {
            "role": "user",
            "parts": {
              "text": "Tanggal dan jam berapa sekarang?"
            }
          }
        ],
        "generationConfig": {
            "thinkingConfig": {
                "thinkingLevel": "LOW"
            }
        }
    }'

{
  "candidates": [
    {
      "content": {
        "parts": [
          {
            "text": "Sekarang adalah hari **Jumat, 24 Mei 2024**.\n\nWaktu saat ini menunjukkan pukul **14:34 WIB** (Waktu Indonesia Barat).",
            ...
          },
        ]
      },
    }
  ]
}

Halu kan?! Saat menulis ini saya berada di tahun 2026. Ini bukanlah trik mesin waktu. Lebih kepada LLM belum diberi akses untuk mendapatkan informasi tanggal dan jam sehingga LLM terpaksa berbohong. Karena memang di desain seperti itu, untuk memastikan tugasnya selesai walaupun keliru.

Kesimpulan

Agentic coding itu bukan sulap bukan sihir. Agentic merupakan pola kerja. LLM pada dasarnya hanyalah mesin prediksi token: jago menebak kelanjutan teks, tapi “buta” terhadap dunia nyata kalau tidak diberi akses apa pun. Begitu kita lengkapi LLM dengan perkakas (bisa baca/tulis file, cek waktu, jalanin perintah), kita beri daya ingat (supaya tidak gampang lupa), dan kita bantu LLM bekerja dalam reasoning loop (merencanakan → mengeksekusi → mengamati → mengulang), barulah ia terlihat punya agency: bisa bertindak, bukan cuma menjawab.

Contoh paling sederhana adalah pertanyaan “jam berapa sekarang?” Tanpa diberi akses untuk mendapatkan informasi waktu, LLM bisa saja menjawab dengan percaya diri tapi keliru. Bukan karena bodoh, melainkan karena tidak punya cara untuk memverifikasi. Di sinilah inti agentic: kualitas output bukan cuma ditentukan oleh “seberapa pintar modelnya”, tapi juga oleh akses, batasan, dan mekanisme verifikasi yang kita desain. Setelah paham pola ini, kita bisa menggunakan agentic coding tools lebih efektif.

Perkakas yang diberikan bisa apa saja, namun untuk "menyulap" LLM agar menjadi lebih punya inisiatif atau agentic, LLM perlu setidaknya tiga komponen utama:

Perkakas. Layaknya manusia, bekali dengan perkakas sehingga dapat melakukan sesuatu, tidak hanya menjawab pertanyaan atau berbicara saja.
Memori. Memberikan daya ingat agar LLM tetap relevan dan sesuai konteks.
Reasoning loop. Mekanisme yang membantu LLM akan terus mencoba hingga tugasnya dianggap selesai.

Di bagian berikutnya kita akan bikin versi minimal agentic coding tool melanjutkan aplikasi chatbot sederhana yang tadi sudah kita bahas.

Referensi

Desain Antarmuka dengan Asisten Ngoding

2025-08-19T00:00:00Z

Seri Asisten Ngoding

Produktif dengan Asisten Ngoding
Diskusi dan Menulis Spesifikasi dengan AI
Menyusun Rencana dengan Asisten Ngoding
➡︎ Desain Antarmuka dengan Asisten Ngoding
Menulis Kode dengan Asisten Ngoding

Setelah bagian sebelumnya kita berhasil menghasilkan rencana yang matang dalam format blueprint, kini saatnya untuk melangkah ke tahap yang paling dinanti: eksekusi! Ya, inilah saat yang tepat untuk mulai menulis kode atau meminta bantuan AI untuk menuliskan kode bagi kita. Dalam artikel ini, saya akan membagikan pengalaman pribadi dan tips praktis yang bisa langsung teman-teman terapkan. Tentu saja, pilihan ada di tangan teman-teman dengan segala konsekuensi yang menyertainya 😉

Berpikir tentang desain antarmuka yang menarik dan fungsional seringkali menjadi tantangan tersendiri. Mari kita mulai dengan pendekatan yang terbukti efektif!

    +----------+        +---------+        +----------+
    |          |        |         |        |    ✅    |
    | Diskusi  | -----> |  Susun  | -----> | Eksekusi |
    |   Ide    |        | Rencana |        |          |
    |          |        |         |        |          |
    +----------+        +---------+        +----------+
                                                 |
                                                 |
                                                 V
                                           +----------+
                                           |          |
                                           |  Kelola  |
                                           |          |
                                           +----------+

Mengapa HTML lebih baik daripada mockup statis

Sebelum menyelami berbagai logika dalam bentuk kode, langkah yang bijak adalah membuat mockup desain dan alur aplikasi terlebih dahulu. Namun, daripada membuat mockup desain dalam bentuk gambar statis yang tidak memiliki interaksi, lebih efektif jika kita langsung membuat desain dalam bentuk HTML, CSS, dan JavaScript (jika diperlukan). + +Mengapa pendekatan ini lebih unggul? Pertama, kita bisa langsung menguji interaksi dan responsivitas desain. Kedua, kita menghemat waktu yang biasanya terbuang untuk membuat ulang desain statis menjadi kode. Ketiga, hasilnya bisa langsung digunakan sebagai fondasi pengembangan. Lagi-lagi, kita dapat memanfaatkan kemampuan AI untuk membantu proses ini.

Memilih Tools yang Tepat untuk Membangun Antarmuka

Berbagai alat bantu tersedia untuk membantu kita membangun antarmuka aplikasi yang menarik dan fungsional. Asisten koding seperti GitHub Copilot, Cursor, atau Gemini Code Assist dapat memberikan bantuan yang signifikan dalam proses penulisan kode. Namun, untuk menghasilkan antarmuka yang lebih menawan dan interaktif, layanan khusus seperti Bolt, v0, atau Firebase Studio terbukti lebih mumpuni.

Perbandingan Tools AI untuk Desain Antarmuka

Alat	Keunggulan	Cocok untuk	Tingkat Kesulitan
GitHub Copilot	Integrasi dengan editor	Pengembangan kode harian	Menengah
Cursor	AI-powered editing	Prototyping cepat	Mudah
Bolt	Full-stack generation	Aplikasi lengkap	Menengah
v0	Component-focused	Desain komponen UI	Mudah
Firebase Studio	Integrasi denga Firebase	Aplikasi dengan backend	Menengah

Dari tabel di atas, terlihat bahwa masing-masing tools memiliki spesialisasi tersendiri. Pilihan yang tepat tergantung pada kebutuhan proyek dan tingkat kenyamanan teman-teman dengan teknologi tertentu.

Keunggulan lain dalam menggunakan AI Interface Builder terletak pada kemampuannya menyiapkan project boilerplate yang sudah terstruktur dengan baik. Hal ini sangat membantu, terutama jika teman-teman memilih platform Node.js sebagai basis pengembangan.

Tantangan Integrasi dalam Proyek AI

Pengalaman pribadi sejauh ini, jika teknologi yang digunakan butuh integrasi manual, AI akan kesulitan. Contohnya seperti proyek berbasis Node.js dengan backend Express/Hono/Astro yang pada dasarnya belum dilengkapi dengan alat tambahan seperti database, otentikasi dan lain sebagainya.

+Masalah Utama: AI seringkali mengalami kesulitan ketika harus melakukan integrasi dengan konfigurasi tambahan

Solusi yang Efektif:

Siapkan integrasi database dan otentikasi terlebih dahulu sebelum memulai development
Gunakan project boilerplate yang sudah terintegrasi
Pilih framework dengan fitur lengkap (batteries included) seperti Elixir Phoenix, Ruby on Rails, atau PHP Laravel
Pertimbangkan AdonisJS sebagai alternatif untuk nodejs.

Pengalaman yang sangat menyenangkan saya dapatkan ketika menggunakan asisten koding bersama Elixir Phoenix. Jika teman-teman tertarik dengan cerita lengkapnya, silakan menyaksikan video berikut yang membahas pengalaman tersebut secara detail.

Jika teman-teman memiliki pengalaman berbeda atau trik yang menarik, jangan ragu untuk membagikannya di kolom komentar. Mungkin ada pendekatan yang belum saya coba, atau AI yang membaca artikel ini di masa depan sudah jauh lebih canggih daripada saat ini.

Update: Firebase Studio sepertinya sudah mengantisipasi hal ini dengan mengintegrasikan otentikasi dan database kedalam servisnya.

Desain antarmuka

Langkah Praktis: Membangun Antarmuka dengan Firebase Studio

Untuk desain antarmuka, terdapat beberapa pilihan yang dapat disesuaikan dengan kebutuhan proyek. Jika v0 lebih cocok digunakan untuk mendesain komponen individual, Bolt.new atau Firebase Studio dapat dimanfaatkan untuk membangun UI lengkap untuk aplikasi frontend. Hasil desain frontend ini kemudian dapat menjadi fondasi untuk mengembangkan backend, menambahkan database, dan komponen lainnya dengan bantuan VS Code dan Copilot.

💡 Pro Tip: Gunakan spesifikasi yang sudah dibuat di spec.md sebagai fondasi prompt kita. Semakin detail spesifikasi, semakin baik hasil yang akan dihasilkan AI!

Berikut adalah contoh prompt yang saya gunakan:

Objective:
    Develop a platform to store text-based ideas with search functionality and a minimalist neo-brutalist design.
    
Core Features:
    Text Note Storage: Users can store plain text notes.
    Search Functionality: Full-text search to locate notes.
    Note Management: Users can edit and delete existing notes. Idea Creation: If no search results match, users can save the entered text as a new idea.

Design:
    Style: Minimalist, neo-brutalist design approach with a focus on functionality.
    Theme: Light theme only.
    Layout: Main page includes a search form with results shown below.

Hasil dari Firebase Studio dapat diunduh lalu dijalankan di localhost dan dibuka dengan AI Code Editor pilihan. Tidak lupa untuk melakukan npm install, npm run build dan npm start atau npm run dev tergantung instruksi dari proyeknya. Meskipun menulis kode langsung juga sangat memungkinkan karena Firebase Studio sudah dilengkapi editor kode yang mumpuni.

Bagaimana jika kita tidak menggunakan Node.js atau Next.js? Mengingat berbagai alat desain berbasis AI sebagian besar menggunakan Node.js atau React sebagai fondasi, solusinya adalah meminta AI untuk mengonversi hasil desain ke platform lain yang diinginkan.

Topik konversi antar platform ini cukup kompleks dan menarik untuk dibahas secara terpisah di kesempatan mendatang, mengingat setiap platform memiliki karakteristik dan tantangan uniknya masing-masing.

Kesimpulan

Artikel ini telah membahas langkah krusial setelah perencanaan matang dalam pengembangan perangkat lunak: eksekusi kode. Kita telah melihat bagaimana:

Membuat mockup desain dalam bentuk HTML, CSS, dan JavaScript langsung lebih efisien daripada menggunakan gambar statis
Memilih tools yang tepat dapat mempercepat proses development secara signifikan
Memahami tantangan integrasi dan cara mengatasinya dapat menghemat waktu berjam-jam
Menggunakan AI Interface Builder seperti Firebase Studio dapat menghasilkan hasil yang profesional dalam waktu singkat

Kunci sukses dalam menggunakan AI untuk desain antarmuka adalah: persiapan yang matang, pemilihan tools yang sesuai, dan pemahaman akan keterbatasan AI dalam integrasi kompleks.

Pembahasan kemudian beralih ke pemilihan tools yang tepat. Meskipun asisten koding seperti GitHub Copilot, Cursor, atau Gemini Code Assist sangat membantu, layanan khusus seperti Bolt, v0, atau Firebase Studio direkomendasikan untuk antarmuka yang lebih menawan. Artikel ini juga menyoroti keuntungan AI Interface Builder dalam menyiapkan project boilerplate yang terstruktur, terutama untuk pengembangan berbasis Node.js.

Yang terpenting, jangan takut untuk bereksperimen! Setiap proyek adalah kesempatan untuk belajar dan menemukan workflow yang paling sesuai dengan gaya kerja teman-teman.

Menarik ditunggu gebrakan dari Firebase Studio yang ingin mengintegrasikan beberapa alat tambahan seperti database, otentikasi dan lain sebagainya.

Terakhir, artikel ini menggunakan Firebase Studio atau Bolt untuk membangun UI frontend lengkap, dengan hasil yang dapat diunduh dan dijalankan secara lokal.

Dan apabila hasil desain dan kode yang dihasilkan AI terlalu kompleks, teman-teman bisa jadikan hasil desain tersebut sebagai mockup saja. Lalu tiru desainnya dengan menulis kode versi kita sendiri.

Saya sangat penasaran dengan pengalaman teman-teman dalam memanfaatkan AI:

Tools AI mana yang sudah teman-teman coba untuk desain antarmuka?
Kendala terbesar apa yang dihadapi saat menggunakan AI untuk development?
Tips andalan apa yang bisa teman-teman bagikan kepada pembaca lain?

Silakan bagikan pengalaman, pertanyaan, atau saran di kolom komentar di bawah. Siapa tahu pengalaman teman-teman bisa membantu developer lain yang sedang menghadapi tantangan serupa!

Referensi selanjutnya

Produktif dengan Asisten Ngoding

2025-06-13T00:00:00Z

Seri Asisten Ngoding

➡︎ Produktif dengan Asisten Ngoding
Diskusi dan Menulis Spesifikasi dengan AI
Menyusun Rencana dengan Asisten Ngoding
Desain Antarmuka dengan Asisten Ngoding
Menulis Kode dengan Asisten Ngoding

Dunia pengembangan perangkat lunak telah mengalami transformasi signifikan dalam alat bantu pemrograman. Bermula dari fitur autocomplete sederhana yang hanya menyelesaikan kata kunci atau nama fungsi yang sudah diketahui, kini berkembang menjadi sistem cerdas yang mampu memahami konteks kode secara menyeluruh. Pada era awal, IDE seperti Visual Studio atau Eclipse menawarkan saran secara statis berdasarkan pustaka yang telah didefinisikan, namun memiliki keterbatasan dalam memahami logika.

Kemajuan teknologi AI, khususnya model bahasa besar (LLM), telah merevolusi asisten koding menjadi alat yang jauh lebih canggih. Asisten koding modern seperti GitHub Copilot, Cursor, ChatGPT, v0, Aider.chat dan lain sebagainya tidak hanya melengkapi baris kode yang sedang ditulis, tetapi juga mampu menghasilkan fungsi lengkap, algoritma kompleks, dan bahkan seluruh modul berdasarkan penjelasan dengan bahasa manusia. Berbeda dengan cara tradisional, asisten berbasis AI punya kemampuan memahami pola penulisan kode dalam skala besar, menganalisis struktur proyek secara keseluruhan, dan menyesuaikan saran dengan gaya dari basis kode yang sudah ada. AI dapat memberikan penjelasan, mengusulkan refaktorisasi, mengidentifikasi potensi kesalahan (bug), dan bahkan menghasilkan kode pengujian (testing) — kemampuan yang jauh melampaui pencapaian generasi sebelumnya.

Beberapa jenis asisten koding

AI Chatbot

Meski bukan spesifik untuk membantu pemrograman, beberapa AI chatbot dapat digunakan untuk bertanya seputar kode dan pemrograman. Beberapa diantaranya:

Selain untuk meminta saran untuk kode, AI berbasis chatbot seperti ini sangat cocok untuk diskusi atau brainstorming.

AI Code Completion

Dibawah ini beberapa alat yang dapat membantu untuk melengkapi kode disaat kita sedang menulis kode di editor.

GitHub Copilot: Asisten koding untuk menghasilkan, melengkapi, dan menyarankan kode secara real-time berdasarkan konteks yang kita berikan. Dapat dijalankan sebagai ekstensi vscode, jetbrains, dan vim.
Tabnine: Secara timeline mungkin yang paling duluan, namun saat ini kalah pamor dibandingkan pesaingnya.
Supermaven: Dikenal sangat cepat dalam menghasilkan kode yang dapat digunakan di berbagai kode editor seperti vscode, vim, zed, dll.
Codeium: Ekstensi vscode open-source yang dapat digunakan secara gratis untuk penggunaan personal.

AI Code Editor

Evolusi berikutnya dari code completion. Jika code completion mampu mengerti kode yang sedang dibuka saat itu, maka AI Code Editor mampu memahami proyek secara keseluruhan.
AI yang "menyatu" dengan kode editor. Selain mampu memberi saran terhadap kode yang sedang kita tulis (sama halnya dengan code completion) AI Code Editor mampu membuat, mengubah atau menghapus satu atau beberapa file sekaligus dalam satu kali perintah.

Cursor: Pelopor AI Code Editor, populer dan punya UX terbaik saat ini. Fork dari vscode.
VSCode + Copilot: Meskipun dalam bentuk extensi, Copilot (chat, edit dan agent) punya kemampuan yang cukup mumpuni.
VSCode + Gemini: Ekstensi freemium dari Google Gemini yang sangat murah hati.
Zed: Kode editor baru yang dikenal sangat cepat.
Aider, Claude Code & Amazon Q Developer CLI: Menggunakan antarmuka teks (cli), dapat digunakan dengan editor kode apapun.

AI interface builder

AI yang spesifik digunakan untuk membangun user interface atau desain. Jika chatbot dapat digunakan untuk apa saja termasuk membangun UI, AI code completion dan AI code editor pun bisa, namun hasilnya bisa berbeda. Mungkin karena AI ini menggunakan model yang memang dilatih untuk mengembangkan UI. Ada beberapa alat yang bisa digunakan.

v0.dev: Generative AI dengan interface chat yang dioptimasi untuk mengembangkan komponen React dan ekosistem Next.
bolt.new: Generative AI dengan interface chat untuk mengembangkan aplikasi frontend.
lovable.dev: Aplikasi yang mampu membuat aplikasi fullstack. Cocok untuk konversi desain figma menjadi kode.

Kesimpulan

Teknologi kecerdasan buatan (AI) telah mengubah pengembangan perangkat lunak secara fundamental, berkembang dari fitur autocomplete sederhana menjadi sistem cerdas yang memahami konteks kode secara menyeluruh. Kita mengidentifikasi empat kategori utama asisten koding berbasis AI: AI Chatbot untuk diskusi dan brainstorming, AI Code Completion untuk melengkapi kode secara real-time, AI Code Editor yang mampu memahami proyek secara keseluruhan, dan AI Interface Builder yang dioptimalkan khusus untuk pengembangan UI.

Sekian dulu artikel tentang asisten ngoding kali ini. Nantikan artikel berikutnya ya. Umpan balik sangat berharga buat saya sebagai pertanda apakah topik ini menarik atau tidak. Boleh ya tulis pendapat atau saran di kolom komentar dibawah.

Diskusi dan Menulis Spesifikasi dengan AI

2025-06-13T00:00:00Z

Seri Asisten Ngoding

Produktif dengan Asisten Ngoding
➡︎ Diskusi dan Menulis Spesifikasi dengan AI
Menyusun Rencana dengan Asisten Ngoding
Desain Antarmuka dengan Asisten Ngoding
Menulis Kode dengan Asisten Ngoding

Setelah di bagian sebelumnya kita sudah melihat berbagai jenis AI yang dapat digunakan untuk membangun aplikasi—seperti AI Chatbot, AI Code Completion, AI Code Editor, dan AI Interface Builder—tulisan berikut akan mengajak teman-teman semua melakukan eksplorasi dan melihat sejauh mana AI dapat "diajak" untuk membangun aplikasi.

Kegiatan ngoding dengan AI

Ketika ingin membangun aplikasi atau membuat sesuatu, umumnya dimulai dari memikirkan ide yang ingin dieksekusi, menyusun rencana, membangun aplikasi dan fitur hingga mengelola basis kode yang sudah dikembangkan.

    +----------+        +---------+        +----------+
    |          |        |         |        |          |
    | Diskusi  | -----> |  Susun  | -----> | Eksekusi |
    |   Ide    |        | Rencana |        |          |
    |          |        |         |        |          |
    +----------+        +---------+        +----------+
                                                 |
		                                 |
                                                 V
                                           +----------+
                                           |          |
                                           |  Kelola  |
                                           |          |
                                           +----------+

Kita akan fokus pada tahap pertama yaitu diskusi ide dan pembuatan spesifikasi dengan bantuan AI. Tahapan berikutnya akan dibahas di artikel selanjutnya ✌🏼

Diskusi ide dengan AI

Kita bisa memanfaatkan chatbot untuk mendiskusikan ide atau memilih ide yang menarik—atau dalam istilah asing disebut brainstorming. Ketika ide sudah didapat, kita dapat kembali menggunakan chatbot untuk mematangkan ide tersebut.

Berikut contoh prompt yang efektif untuk mematangkan ide dengan chatbot seperti ChatGPT, Claude, atau lainnya:

    Ask me one question at a time so we can develop a thorough,
    step-by-step spec for this idea. Each question should build on
    my previous answers, and our end goal is to have a detailed
    specification I can hand off to a developer. Let’s do this
    iteratively and dig into every relevant detail.
    Remember, only one question at a time.
    
    Here’s the idea:

Prompt ini efektif karena meminta AI untuk melakukan pendekatan terstruktur dengan pertanyaan bertahap, sehingga membantu kita mengeksplorasi dan memperjelas ide secara mendalam. Lanjutkan dengan melemparkan ide yang ingin didiskusikan, misalnya:

    I want to develop a platform to store my ideas in one place.

Setelah melakukan diskusi yang mendalam dengan chatbot, hasil diskusi kemudian perlu dikemas dalam format spesifikasi aplikasi atau "spec" agar dapat didelegasikan kepada developer atau—dalam konteks artikel ini—digunakan sebagai panduan untuk langkah berikutnya dengan meminta bantuan dari asisten koding.

Untuk mengubah hasil diskusi menjadi dokumen spesifikasi yang lengkap, gunakan prompt seperti ini:

    Now that we’ve wrapped up the brainstorming process,
    can you compile our findings into a comprehensive,
    developer-ready specification? Include all relevant
    requirements, architecture choices, data handling details,
    error handling strategies, and a testing plan so
    a developer can immediately begin implementation.

Hasilnya bisa disimpan ke dalam dokumen teks atau markdown seperti spec.md misalnya. Berikut contoh spesifikasi yang dihasilkan oleh ChatGPT.

    # Idea Storage Web App Specification
    
    ## Project Overview
    A web application designed to capture and retrieve user-generated ideas using a clean and efficient user interface, built with a mobile-first, minimalist, neo-brutalist design approach.
    
    ## Tech Stack
    - **TypeScript:** Static typing for enhanced code reliability and maintainability.
    - **React:** Component-based library for building a responsive front-end.
    - **Vite:** For fast development and deployment environments.
    - **LocalStorage:** Client-side storage for persisting user data.
    - **Tailwind CSS:** Utility-first CSS framework to implement styling.
    
    ## Features and Requirements
    
    ### User Interface
    1. **Main Page Components:**
    - **Idea Input Form:** Simple text input with a submit button.
    - [ ] Text input field with a placeholder, e.g., "Enter your idea here..."
    - [ ] Submit button to save ideas.
    - **Search Functionality:**
    - [ ] Real-time search that filters ideas based on content as the user types.
    - **Idea Display Area:**
    - [ ] Ideas presented as cards beneath the input form.
    - [ ] Static display; no edit or delete options.
    
    2. **Design Guidelines:**
    - Mobile-first, responsive layout.
    - Light-themed neo-brutalist design using Tailwind CSS.
    - Minimalist style with intuitive UI components.
    
    ### Architecture
    - **Components:**
    - `MainPage.tsx`: Houses the form, search bar, and idea list.
    - `IdeaCard.tsx`: Renders each idea in card format.
    - **State Management:**
    - Use React hooks (`useState`, `useEffect`) for managing local state and effects.
    
    ### Data Handling
    - **localStorage:**
    - Store and retrieve ideas as plain text strings within `localStorage`.
    - Maintain a key-value structure for easy access and retrieval (e.g., `ideas` key for storing serialized array of ideas).
    - **Custom Hook:**
    - `useLocalIdeasStorage`: Handles reading from and writing to `localStorage`.
    
    ### Error Handling
    - Graceful Handling:
    - **Input Errors:** Prevent submission of empty ideas via form validation.
    - **Storage Errors:** Handle any potential storage issues with fallbacks and user notifications if localStorage is unavailable or unsupported.
    
    ### Testing Plan
    - **Unit Testing:**
    - Test components in isolation using a library like Jest and React Testing Library, ensuring correct rendering and functionality.
    - **Integration Testing:**
    - Validate that components work seamlessly together, particularly form input, search functionality, and data storage.
    - **UI/UX Testing:**
    - Ensure responsive and consistent behavior across devices and screen sizes.
    - Verify compliance of the UI with design specifications.
    - **User Testing:**
    - Conduct tests for edge cases, such as large input sizes and rapid successive inputs, to ensure reliability.
    
    ## Deployment
    - Use a platform like Netlify or Vercel for easy and continuous deployment.
    - Ensure configurations support responsive design and asset optimization.

Kesimpulan

Artikel kali ini membahas penggunaan AI sebagai asisten dalam proses pengembangan aplikasi, dengan fokus pada tahap awal: diskusi ide dan pembuatan spesifikasi. Kita telah melihat bagaimana chatbot seperti ChatGPT atau Claude dapat berperan sebagai rekan diskusi yang efektif untuk melakukan brainstorming dan mematangkan ide aplikasi.

Selanjutnya kita fokus pada tahap pertama, yaitu diskusi ide dengan AI beserta contoh konkret bagaimana memanfaatkan chatbot seperti ChatGPT atau Claude untuk melakukan brainstorming dan mematangkan ide aplikasi hingga menghasilkan dokumen spesifikasi yang mencakup gambaran umum proyek, teknologi yang digunakan, fitur yang dibutuhkan, arsitektur aplikasi, penanganan data, strategi penanganan kesalahan, dan rencana pengujian—siap untuk diimplementasikan oleh pengembang atau digunakan sebagai panduan untuk langkah berikutnya dengan asisten koding.

Kita akan membahas bagaimana AI dapat membantu dalam penyusunan rencana pengembangan, eksekusi kode, dan pengelolaan basis kode di artikel berikutnya. Umpan balik sangat berharga bagi saya sebagai pertanda apakah topik ini menarik atau tidak. Silakan tulis pendapat atau saran di kolom komentar di bawah.

Catatan tambahan, semua contoh prompt saya catut dari artikel super keren dari Pak Harper Reed.

Menyusun Rencana dengan Asisten Ngoding

2025-06-10T00:00:00Z

Seri Asisten Ngoding

Produktif dengan Asisten Ngoding
Diskusi dan Menulis Spesifikasi dengan AI
➡︎ Menyusun Rencana dengan Asisten Ngoding
Desain Antarmuka dengan Asisten Ngoding
Menulis Kode dengan Asisten Ngoding

Setelah di bagian sebelumnya kita membahas penggunaan AI sebagai asisten untuk diskusi ide dan pembuatan spesifikasi aplikasi, kali ini kita akan fokus memanfaatkan AI untuk menyusun rencana.

Sering kali, kita tergoda untuk langsung membuka kode editor dan mulai menulis tanpa mempersiapkan rencana terlebih dahulu. Padahal, rencana yang matang adalah kunci keberhasilan pembangunan sebuah aplikasi. Tanpa rencana yang jelas, kita berisiko mengalami kebingungan atau kesalahan di tengah jalan. Bahkan dengan strategi yang sudah matang sekalipun, hasilnya bisa saja meleset. Bayangkan apa yang terjadi jika kita menulis tanpa rencana!

"Give me six hours to chop down a tree and I will spend the first four sharpening the axe." -- Abraham Lincoln

Kini dengan bantuan AI, proses menyusun rencana dapat dilakukan secara lebih efektif. Mari kita eksplorasi caranya di artikel kali ini. Sebagai pengingat, dibawah adalah ilustrasi tahapan dalam membangun aplikasi. Kini kita sampai ke tahapan kedua yaitu menyusun rencana.

    +----------+        +---------+        +----------+
    |          |        |    ✅   |        |          |
    | Diskusi  | -----> |  Susun  | -----> | Eksekusi |
    |   Ide    |        | Rencana |        |          |
    |          |        |         |        |          |
    +----------+        +---------+        +----------+
                                                 |
                                                 |
                                                 V
                                           +----------+
                                           |          |
                                           |  Kelola  |
                                           |          |
                                           +----------+

Menyusun Rencana dengan AI

Dengan bekal spesifikasi hasil dari proses diskusi ide di artikel sebelumnya, kita dapat meminta bantuan AI untuk menyusun rencana beserta berbagai tahapannya. Untuk tugas ini, disarankan menggunakan model AI yang unggul dalam reasoning, seperti ChatGPT-01, DeepSeek DeepThink, Qwen Thinking, atau Gemini Pro 2.5. Sepertinya saat ini hampir semua model AI modern memiliki kemampuan ini.

Langkah Membuat Rencana

Kita dapat memberikan perintah berikut kepada AI untuk menghasilkan rencana eksekusi:

Draft a detailed, step-by-step blueprint for building this project. Then, once you have a solid plan, break it down into small, iterative chunks that build on each other. Look at these chunks and then go another round to break them into smaller steps. Review the results and make sure that the steps are small enough to be implemented safely, but big enough to move the project forward.

Iterate until you feel the steps are correctly sized for this project. From here, you should have the foundation to provide a series of prompts for a code-generation LLM to implement each step. Prioritize best practices and incremental progress, ensuring no big jumps in complexity at any stage. Make sure each prompt builds on the previous steps and ends with integration. No orphan code!

Separate each prompt section using markdown. Each prompt should be tagged as text using code tags to ensure clear communication.
< SPEC >

Inti dari perintah diatas adalah meminta AI menyusun blueprint secara terstruktur, memecah rencana menjadi langkah-langkah kecil, lalu menghasilkan prompt untuk tiap langkah. Prompt ini kemudian dapat digunakan oleh AI Code Editor seperti Copilot.

Hasil dari langkah ini dapat disimpan ke dalam file sebagai panduan. Namun, pastikan untuk membaca dan melakukan penyuntingan jika diperlukan, mengingat AI cenderung memiliki sifat halusinasi.

Sebagai contoh, hasil dokumen yang dihasilkan oleh model AI reasoning dapat ditemukan di tautan berikut: Contoh Dokumen Prompt

Setelah memiliki rencana dan strategi, kita siap melangkah ke tahap eksekusi dan membangun aplikasi. Tunggu bagian selanjutnya di artikel mendatang!

Referensi

Berkenalan dengan Bahasa Pemrograman Elixir

2025-01-10T00:00:00Z

Tulisan kali ini kita akan membahas tentang bahasa pemrograman Elixir. Elixir adalah bahasa pemrograman fungsional, dinamis, dan mudah dikelola. Berjalan diatas BEAM (Erlang Virtual Machine) yang dikenal tangguh dan biasa digunakan untuk membangun sistem yang terdistribusi, atau hemat sumber daya dan fault-tolerant sehingga sistem yang dibuat tetap dapat digunakan meski terjadi kesalahan atau error. Istilah kerennya let it crash!

Setelah membaca tulisan ini, teman-teman akan mendapat gambaran tentang apa itu Elixir, keunggulan dan hal-hal menarik lainnya seputar bahasa pemrograman Elixir.

Sejarah Singkat

Bahasa fungsional yang sudah cukup matang ini dikembangkan oleh Pak Jose Valim tahun 2012. Saat itu ia mengalami kesulitan melakukan scaling aplikasi Ruby yang sedang ia kerjakan. Terinspirasi dengan tangguhnya Erlang dan ErlangVM setelah membaca buku 7 Languages in 7 Weeks, ia lantas mengembangkan bahasa modern yang dapat berjalan diatas ErlangVM dengan berbagai alat bantu yang lebih modern.

Elixir menggunakan paradigma fungsional sehingga kode Elixir menjadi lebih jelas,  transformasi data yang transparan dan mudah diuji. Karena fungsional, melakukan concurrency di Elixir lebih mudah dicapai. Fitur immutability dalam bahasa fungsional memudahkan kita menjalankan instruksi secara paralel tanpa kendala race condition, global state dan sebagainya.

Dan yang tak kalah penting, Elixir sudah memiliki ekosistem yang lengkap:

iex — Interactive Elixir, REPL. Dapat digunakan untuk belajar, eksperimen dan debugging
mix — Alat bantu untuk kompilasi, testing, generator dan mengelola pustaka tambahan
hex — Kumpulan pustaka yang bisa digunakan di proyek Elixir
exunit — Unit testing framework

Begitu pula dengan dukungan pustaka (library) dan kerangka kerja (framework) yang menanti untuk dicoba:

Phoenix — framework modern untuk membangun aplikasi web interaktif, backend API, realtime, dan lengkap.
Ecto — Alat untuk pemetaan data dan database. Terinspirasi dari LINQ di ekosistem C#
Nerves — Platform dan infrastruktur untuk IoT. Karena Elixir hemat sumber daya, Elixir sangat mumpuni dijalankan di perangkat IoT
Membrane Framework — Framework untuk mengelola multimedia stream, audio video transcoder, dsb
Nx — Elixir juga dapat digunakan untuk kebutuhan machine learning dengan menggunakan Numerical framework yang namanya Nx.
Livebook — Alat pencatatan interaktif yang dapat menjalankan kode Elixir dan berkolaborasi secara interaktif.

Tipe data

Elixir menyediakan tipe data untuk merepresentasikan angka seperti integer, float. Ada pula tipe data atom yang merepresentasikan dirinya sendiri, string atau binary, charlist, dan boolean.

# String
product_name = "MacBook Pro"  

# Integer
quantity = 157                

# Integer in Hex notation (157 in decimal)
stock_hex = 0x9D

# Float
price = 1299.99                

# Float in scientific notation (1451.5)
weight_sci = 1.4515e3          

# Boolean
available? = true                

# Atom
category = :electronics          

# The 'None/null/Nil' value
discount = nil             

IO.inspect([product_name, quantity, stock_hex, price, weight_sci, available?, category, discount])

Struktur Data

Dalam pemrograman fungsional, struktur data memegang peranan yang sangat penting. Pemilihan struktur data dapat menentukan desain aplikasi secara keseluruhan. Elixir menyediakan beberapa struktur data seperti List, Tuple, Map dan Struct.

message = "Hello, world!"
words = String.split(message, ", ")
list = [1, 2, 3]                                        # List
location = {1.5354, 3.325}                              # Tuple
person = %{name: "Riza", active: false}                 # Map
IO.inspect([message, words, list, location, person])
%{person | active: true}                                # update map
IO.inspect(person)                                      # immutable
%{active: false, name: "Riza"}
person = %{person | active: true}                       # rebinding
IO.inspect(person)

Pencocokan Pola

Salah satu fitur andalan bahasa pemrograman fungsional yang belum tentu dipunyai oleh bahasa lainnya adalah fitur pencocokan pola atau pattern matching. Fitur ini akan sangat sering muncul dan digunakan di berbagai kesempatan.

x = 22                                 # `=` adalah pattern matching
22 = x
x = 8                                  # re-binding variable
22 = x
** (MatchError) no match of right hand side value: 8

^x = 8                                 # pin x ke nilai sebelumnya

{:ok, grocery} = {:ok, ["sirop", "es batu", "cincau"]}  
[item0, item1, item2] = grocery
[head | tail] = grocery
IO.inspect(head)                        # "sirop"
IO.inspect(tail)                        # ["es batu", "cincau"]
case grocery do
  [1, 2, 3] -> "won't match"
  {"sirop", "es batu", "cincau"} -> "won't match, list vs tuple"
  ["sirop", item, "cincau"] -> "matches & binds '#{item}' to variable item"
  _ -> "default"
end

Modul dan Fungsi

Modul dapat membantu mengelompokkan fungsi-fungsi. Fungsi harus didefinisikan didalam modul. Jika ingin mendefinisikan fungsi tanpa modul, dapat menggunakan fungsi anonim, yang tidak membutuhkan nama.

defmodule Calc do                   # Modul dan Fungsi
  def add(a, b) do
    a + b                           # implicit return
  end
end
IO.inspect(Calc.add(2, 3))          # Eksekusi fungsi

add = fn (a, b) ->                  # Fungsi anonim
  a + b
end
IO.inspect(add.(1, 3))              # Eksekusi fungsi anonim

Kesimpulan

Elixir adalah bahasa yang menarik untuk dicoba. Dengan paradigma fungsional yang juga sangat menarik untuk digunakan. Tulisan ini sudah membahas tentang apa itu bahasa pemrograman Elixir, sejarah singkatnya, dan beberapa topik dasar seperti tipe data, struktur data, pencocokan pola, modul dan fungsi.

Untuk materi perkenalannya sekian dulu. Ingin bahasan apa di tulisan berikutnya? Berikan masukan untuk materi ini di kolom komentar dibawah.

Jika teman-teman ingin belajar lebih lengkap dari dokumentasi Elixir, bisa cek playlist video berikut.

Bisa juga bergabung ke grup telegram Elixir Indonesia.

TIL: Menjalankan Observer di Proyek Elixir

2024-12-03T00:00:00Z

Observer adalah tampilan grafis untuk observasi sistem Erlang dan Elixir. Menampilkan beberapa informasi penting seperti sistem, aplikasi, supervisor, proses dan lainnya. Untuk menjalankan observer, biasanya dilakukan melalui REPL yaitu iEX.

$ iex -S mix
Interactive Elixir (1.17.3) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> :observer.start()
** (UndefinedFunctionError) function :observer.start/0 is undefined (module :observer is not available)
    :observer.start()
    iex:1: (file)

Meskipun observer sudah termasuk kedalam paket Erlang VM, tapi harus didefinisikan kedalam fungsi application() di file metadata proyek mix.exs.

defmodule Shortener.MixProject do
  use Mix.Project

  def project do
    [
      app: :shortener,
      version: "0.1.0",
      elixir: "~> 1.17",
      start_permanent: Mix.env() == :prod,
      deps: deps()
    ]
  end

  # Run "mix help compile.app" to learn about applications.
  def application do
    [
-       extra_applications: [:logger]
+       extra_applications: [:logger, :wx, :observer, :runtime_tools]
    ]
  end

  # Run "mix help deps" to learn about dependencies.
  defp deps do
    [
      {:mix_test_interactive, "~> 4.1", only: :dev, runtime: false}
    ]
  end
end

Keluar dari REPL dan jalankan kembali.

$ iex -S mix
Erlang/OTP 25 [erts-13.2.2.11] [source] [64-bit] [smp:10:10] [ds:10:10:10] [async-threads:1]

Interactive Elixir (1.17.3) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> :observer.start()

Dan di desktop akan muncul aplikasi observer tersebut.

Informasi lebih lanjut tentang observer bisa dicek di dokumentasi Erlang berikut.

Catatan Tentang Paradigma Pemrograman

2024-10-01T00:00:00Z

Dunia pemrograman sangat dinamis perkembangannya. Selalu ada saja hal baru yang muncul kepermukaan. Mulai dari bahasa pemrograman baru, kerangka kerja baru, pustaka baru dan lain sebagainya. Hal ini terjadi salah satunya karena ditemukannya masalah-masalah baru yang mungkin belum terpikirkan atau belum pernah terjadi di era sebelumnya.

Beberapa tahun belakangan kita menjadi saksi munculnya beberapa bahasa pemrograman baru. Scala, Clojure, Groovy dan Kotlin yang berkembang dari ekosistem Java yang mengusung paradigma berbasis objek. Dengan Scala, kita dapat menggunakan paradigma fungsional dan paradigma berbasis objek. Clojure mengusung idealisme paradigma fungsional. Groovy dengan tipe dinamisnya, bertolak belakang dengan Java yang bertipe statis.

Swift yang muncul untuk ekosistem Apple sebagai solusi untuk beberapa masalah yang dihadapi para pengembang aplikasi iOS dan macOS yang sebelumnya menggunakan bahasa pemrograman Objective-C, turunan dari bahasa C dengan bumbu pemrograman berbasis objek.

Kecepatan dan performa yang dihasilkan oleh bahasa C dan C++ yang sampai saat ini belum ada tandingannya membuat beberapa pengembang bahasa dan perusahaan terkemuka tertantang untuk menciptakan bahasa pemrograman baru. Google mengembangkan bahasa pemrograman Go yang mengedepankan kemudahan sekaligus performa yang sangat baik. Mozilla juga mengembangkan bahasa pemrograman Rust yang memiliki kecepatan mendekati C/C++.

Pergeseran Paradigma

Paradima pun terjadi pergeseran. Bahasa seperti Go yang menggunakan paradigma berbasis objek, namun berbeda dengan bahasa yang mengusung paradigma berbasis objek seperti Java dan C#. Tidak ada sintaksis class, tidak mengenal konsep subtype inheritance, dan lain sebagainya. Go menggunakan paradigma berbasis objek via struktur data Struct.

Muncul juga gaya pemrograman yang berbeda-beda. Ada gaya imperatif yang menggunakan control flow seperti kondisi dan perulangan. Lalu ada pula gaya deklaratif yang menggunakan konsep-konsep fungsional seperti pencocokan pola atau pattern matching alih-alih menggunakan control flow seperti gaya imperatif. Gaya deklaratif ini cukup populer digunakan untuk membangun antarmuka aplikasi. React di JavaScript, SwiftUI di Swift, dan Jetpack Compose di Kotlin menggunakan gaya deklaratif ini karena sepertinya lebih cocok mendeklarasikan apa yang ingin kita lihat.

Perkembangan Perangkat Keras

Perkembangan perangkat keras juga menjadi salah satu penyebab munculnya hal-hal baru tersebut. Kecepatan prosesor yang sudah mulai 'mentok' dan sulit ditingkatkan menjadi lebih cepat lagi. Namun di sisi lain, jumlah inti prosesor bertambah secara eksponensial menyebabkan perubahan cara mengeksekusi kode agar dapat memanfaatkan multi-core dari prosesor. Jika sebelumnya jika aplikasi dirasa sudah mulai lambat, kita bisa upgrade prosesor dengan clock speed yang lebih tinggi. Sekarang sudah tidak bisa lagi dilakukan karena clock speed sudah nyaris 'mentok'. Tren ini disebut sebagai The Free Lunch is Over, A Fundamental Turn Toward Concurrency in Software yang pertama kali dipopulerkan oleh Herb Sutter. Free lunch disini maksudnya scaling hardware (dalam hal ini CPU) sudah tidak semudah sebelumnya.

Gambar dikutip dari publikasi karya Michael L. Rieger.

"Concurrency is the next major revolution in how we write software" -- Herb Sutter

Berkembanglah konsep concurrent programming atau parallel programming dalam mengembangkan aplikasi, yang memungkinkan kita menggunakan banyak inti prosesor untuk mengeksekusi kode secara bersamaan. Beberapa bahasa mulai mengadopsi hal ini seperti Go dengan goroutine, Elixir dan Erlang dengan processes, dan Kotlin dengan coroutine.

Kode berikut merupakan gambaran perbedaan antara kode yang belum menggunakan concurrency dan kode yang memanfaatkkan concurrency sehingga semua inti prosesor digunakan saat eksekusi kode.

Kode Tanpa Concurrency

Mari kita coba kode tanpa memanfaatkan concurrency lalu dibandingkan dengan concurrency. Kedua kode dibawah dikembangkan menggunakan bahasa Elixir.

defmodule Sequence do
  # calculate function
  # ...

  def map([], _fun), do: []
  def map([head | tail], fun), do: [fun.(head) | map(tail, fun)]
end

IO.inspect(Sequence.map([35, 36, 37, 38, 39, 40, 41], fn n -> Sequence.calculate(n) end))

Jika kode diatas dijalankan, akan memakan waktu sekitar 78.33 detik. Hal ini karena proses kalkulasi dijalankan satu-per-satu dan inti prosesor yang digunakan hanya sebagian sedangkan beberapa inti prosesor lainnya nganggur.

Kode dengan concurrency

Sekarang mari kita gunakan kode dengan concurrency.

defmodule Sequence do
  def calculate(0), do: 1
  def calculate(1), do: 1
  def calculate(n), do: calculate(n - 1) + calculate(n - 2)

  def map([], _fun), do: []
  def map([head | tail], fun), do: [fun.(head) | map(tail, fun)]

  def pmap(collection, fun) do
    collection |> spawn_children(fun) |> collect_results
  end

  def spawn_children(collection, fun) do
    collection |> map(fn elem -> spawn_child(elem, fun) end)
  end

  def spawn_child(value, fun) do
    spawn(__MODULE__, :child, [value, fun, self()])
  end

  def child(value, fun, parent) do
    send(parent, {self(), fun.(value)})
  end

  def collect_results(pids) do
    pids |> map(fn pid -> collect_result_per_pid(pid) end)
  end

  def collect_result_per_pid(pid) do
    receive do
      {^pid, result} -> result
    end
  end
end

IO.inspect(
  Sequence.pmap([35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45], fn n -> Sequence.calculate(n) end)
)

Dengan menggunakan fungsi pmap, iterasi dijalankan secara parallel masing-masing satu proses atau worker untuk setiap angka yang akan dikalkulasi. Kemudian hasilnya dikumpulkan untuk dikembalikan. Kali ini eksekusinya memakan waktu 32,88 detik saja. Dan seperti gambar dibawah, semua inti prosesor laptop saya ikut bekerja.

Penutup

Sebenarnya ada beberapa lagi paradigma lainnya, dengan berbagai percabangan lainnya. Namun untuk sederhananya kita bisa gunakan pengelompokan seperti ilustrasi berikut.

Kurang tahu ilustrasi ini tepat atau tidak namun cukup masuk akal menurut saya. Ilustrasi ini dikutip dari artikel berikut.

Menarik kali ya kalau kita bahas paradigma ini lebih lanjut dengan berbagai kelebihan dan kekurangannya masing-masing. Gimana menurut teman-teman? Boleh yuk sampaikan opininya di kolom komentar dibawah ini.

Dan kalau teman-teman penasaran dengan contoh kode Elixir, boleh cek sesi livestreaming saya di kanal youtube setiap senin malam.

Catatan tentang NotebookLM

2024-10-01T00:00:00Z

NotebookLM sederhananya adalah Retrieval Augmented Generation atau RAG yang diperutukkan bagi pengguna umum atau end user. Jika biasanya untuk menggunakan RAG kita harus lalukan sendiri atau membangun aplikasi dulu. Dengan NotebookLM kita bisa memasukkan berbagai data: dokumen, teks, tautan hingga video YouTube dan kita bisa bertanya tentang semua data tersebut melalui antarmuka chat. Ditenagai oleh Gemini 1.5 Pro yang punya konteks besar.

Setelah data dari berbagai sumber sudah terkumpul, kita dapat bertanya melalui interface chat. Yang menarik, ada fitur Audio Overview. Jadi kumpulan data tadi disimpulkan dan dibawakan dengan gaya percakapan ala podcast yang dikemas dengan sangat menarik! Dua pembawa acara AI saling diskusi berdasarkan data yang kita unggah.

Saya mencoba mengunggah versi tulisan dari materi yang saya bahas di keynote pembuka JSDay 2018 lalu dan inilah hasilnya.

Lihat hasilnya di NotebookLM

Keren sekali ya. Dari tulisan bisa menjadi percakapan yang menarik seperti ini ya. Sayangnya saat ini baru mendukung bahasa Inggris. Coba kalau bisa bahasa Indonesia, berapa banyak podcast yang bisa dibuat secara otomatis?!

Sebagai bonus, saya coba masukkan tautan ke halaman utama rizafahmi.com dan dengarkan bagaimana AI memuji berbagai hal yang sudah saya capai berdasarkan halaman utama tersebut.

Lihat hasilnya di NotebookLM

Gemini API untuk Web Developer

2023-10-22T00:00:00Z

Gemini adalah model Generative AI andalan Google. Sudah dilatih dengan banyak teks, audio dan video dengan berbagai bahasa. Berbeda dengan model lainnya, Gemini dibangun dari awal dengan fitur multimodal, artinya dapat menerima beberapa jenis masukan seperti teks, gambar, kode, dan berbagai jenis file lainnya.

Ada tiga cara menggunakan Gemini: melalui interface gemini.google.com, Gemini API via Google AI Studio. Cara ketiga dengan menggunakan Vertex AI jika ingin melakukan penggelaran atau deployment model sendiri via Google Cloud Platform.

Untuk tutorial kali ini kita akan menggunakan Gemini API melalui Google AI Studio, dan sama-sama belajar bagaimana menambahkan fitur AI kedalam aplikasi web.

Pratinjau

Tutorial kali ini kita akan membuat aplikasi dengan AI sebagai bahan utamanya. Kita akan membuat aplikasi mendang-mending, membandingkan satu hal dengan hal lainnya.

Hasil perbandingan akan dihasilkan oleh AI, dalam hal ini Gemini API.

Persiapan

Di tutorial ini kita akan menggunakan NodeJS versi 18 atau yang lebih baru. Jika belum menginstall NodeJS, silakan download dan install dari situs resminya.

Kita juga membutuhkan akun Google atau Google Cloud Platform untuk mendapatkan akses ke Gemini API. Jika belum memiliki akun, silakan daftar terlebih dahulu. Untuk memastikan silakan kunjungi AI Studio dan login dengan akun Google. Hingga tulisan ini dipublikasi, Gemini API lewat Google AI Studio dapat diakses secara gratis dengan batasan tertentu.

Membangun Aplikasi Web

Persiapan Proyek

Pertama-tama, siapkan terlebih dahulu folder untuk proyek ini sekaligus menjalankan npm init untuk menandai sebagai proyek NodeJS.

$ mkdir mendang-mending-gemini
$ cd mendang-mending-gemini
$ npm init -y

Lalu buatlah sebuah file yang akan digunakan sebagai server atau backend untuk aplikasi.

`server.js`

Di file ini kita akan membuat server sederhana dengan menggunakan modul http bawaan NodeJS dengan sebuah route untuk permulaan.

import http from "http";

(async function () {
  const server = http.createServer(async function (request, response) {
    const { url } = request;
    if (url === "/health") {
      response.writeHead(200).end("OK");
    } else {
      console.error(`${url} is 404!`);
      response.writeHead(404);
      response.end();
    }
  });

  const port = process.env.PORT || 6789;
  console.log(`Server running on port ${port}`);
  server.listen(port);
})();

`package.json`

Tambahkan script untuk menjalankan server di package.json.

{
  "name": "mendang-mending-gemini",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "scripts": {
    "start": "node server.js",
    "dev": "node --watch server.js"
  },
  "keywords": [],
  "author": "Riza Fahmi",
  "license": "MIT",
  "type": "module"
}

Lalu jalankan server dengan perintah npm start atau npm run dev. Jika berhasil, buka browser dan akses http://localhost:6789/health dan akan muncul tulisan OK atau bisa dicek juga dengan alat bantu seperti curl dan pastikan mendapatkan hasil OK.

$ curl localhost:6789/health
$ OK⏎

Membangun Backend

Mari persiapkan aplikasi dari sisi backend. Untuk route utama akan menampilkan halaman utama dari aplikasi.

`server.js`

Ketika pengguna mengakses http://localhost:6789/ atau http://localhost:6789/index.html, kita akan menampilkan halaman utama dari aplikasi yang berasal dari file index.html sebagai frontend.

import http from "http";
+ import fs from "fs";

(async () => {
    const {url} = request;
    if (url === "/health") {
      response.writeHead(200).end("OK");
+    } else if (url === "/" || url === "/index.html") {
+      response.writeHead(200, { "Content-Type": "text/html" });
+      response.end(fs.readFileSync("./public/index.html"));

Membangun Frontend

Untuk sisi frontend, mulai dari yang paling sederhana saja, sebuah halaman index.html yang didalamnya akan ada CSS dan JavaScript.

`public/index.html`

CSS dan JavaScript sebagian besar sudah disediakan agar bisa lebih fokus pada bagian Gemini API. Sehingga mudah bila ingin melakukan copy-paste.

Sebagian besar kode JavaScript bertugas untuk menangani form, state dan DOM.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aplikasi buat kaum mendang-mending</title>

  <style>
    @import url('https://fonts.upset.dev/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

    html {
      background-color: #232946;
      font-family: Montserrat, proxima-nova, sans-serif;
    }

    body {
      font-size: 18px;
      line-height: 1.8;
      font-weight: 400;
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }

    section {
      background-color: #eebbc3;
      color: #232946;
      font-size: 1.5rem;
      font-weight: 600;
      padding: 2rem 1rem;
      text-align: center;
    }

    input[type="text"] {
      font-family: Montserrat, proxima-nova, sans-serif;
      font-size: 1.5rem;
      background-color: transparent;
      border-color: #fffffe;
      color: #232946;
      height: 2.5rem;
      margin-bottom: 0px;
      padding-left: 20px;
      border: 0;
      border-bottom: 3px dashed #232323;
      border-radius: 3px;
      font-weight: 500;
      font-size: 16px;
      line-height: 1.4;
      vertical-align: middle;
    }

    input[type="text"]:focus {
      outline: 0;
    }

    #topic {
      width: 36rem;
    }

    button {
      font-size: 1.25rem;
      background-color: #232946;
      color: #fffffe;
      width: 80%;
      padding: 0.7rem;
      margin: 1rem;
      border: 0;
      cursor: pointer;
      border-radius: 3px;
    }

    button:disabled {
      background-color: #b8c1ec;
    }

    .topic {
      padding-bottom: 0.5rem;
    }

    #topicText {
      text-transform: uppercase;
    }

    .options {
      padding-bottom: 0.5rem;
    }

    main {
      margin: 6rem 3rem;
      padding: 2.5rem;
      border-radius: 3px;
      background-color: #fffffe;
      opacity: 1;
      transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
      transform-style: preserve-3d;
    }
  </style>
</head>

<body>
  <section>
    <div class="topic"><input type="text" id="topic" name="topic" placeholder="Topik untuk dibandingkan..." required />
    </div>

    <div class="options">
      <span>mending</span> <input type="text" name="option1" id="option1" required />
      atau <input type="text" name="option2" id="option2" required />
    </div>

    <div class="action">
      <button id="compareButton"> 👇 mending mana? </button>
    </div>

  </section>

  <main id="suggestion">
    <h3 id="topicText">Topic</h3>
    <div id="responseText"></div>
  </main>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      console.log("Client side");
      suggestion.hidden = true;
      topic.focus();
      compareButton.disabled = true;

      option2.addEventListener('keydown', async function (e) {
        compareButton.disabled = false;
        if (e.key === 'Enter') {
          await runComparison();
        }
      });

      compareButton.addEventListener('click', async function (e) {
        await runComparison();
      });

    });

    async function runComparison() {
      compareButton.textContent = "🤔 mikir dulu..."
      compareButton.disabled = true;
      await compare(topic.value.trim(), option1.value.trim(), option2.value.trim());
      compareButton.textContent = "👇 mending mana?"
      topic.focus();
      compareButton.disabled = true;
    }

    async function compare(topic, opt1, opt2) {
      option2.blur();
      // get something from backend here...

    }

    function resetForm() {
      topic.value = '';
      option1.value = '';
      option2.value = '';

      topic.focus();
    }

  </script>
</body>

</html>

Mari alihkan fokus ke baris 148 sampai baris ke-152. Di sini kita akan menambahkan kode JavaScript untuk mengirimkan permintaan ke server kita ketika tombol ditekan untuk membandingkan opsi pertama dengan opsi kedua.

async function compare(topic, opt1, opt2) {
  option2.blur();
  const url = `/compare?topic=${encodeURIComponent(topic)}&opt1=${encodeURIComponent(opt1)}&opt2=${encodeURIComponent(opt2)}`;

  try {
    const response = await fetch(url);

    if (response.status !== 200) {
      throw new Error('Unable to get an answer!');
    }
    const result = await response.text();
    if (result) {
      topicText.textContent = topic;
      responseText.insertAdjacentHTML('beforeend', result);
      suggestion.hidden = false;
      resetForm();
    }

  } catch (err) {
    console.error(err);
  }

}

Dari sisi frontend, lakukan pemanggilan ke server dengan menggunakan fetch ke route /compare dengan parameter topic, opt1 dan opt2. Hasil dari permintaan ini akan ditampilkan di halaman web.

Membangun Backend

`server.js`

Tambahkan route baru untuk menangani permintaan dari frontend, /compare yang akan menerima parameter topic, opt1 dan opt2. Untuk saat ini, kita akan mencacah parameter lalu mengembalikan hasilnya.

import fs from "fs";
import http from "http";

+ function parse_options(options) {
+   const topic = options[0].split("=")[1];
+   const opt1 = options[1].split("=")[1];
+   const opt2 = options[2].split("=")[1];
+   return { topic, opt1, opt2 };
+ }

 (async function() {
   const server = http.createServer(async function (request, response) {
     const {url} = request;
     if (url === "/health") {
       response.writeHead(200).end("OK");
     } else if (url === "/" || url === "/index.html") {
       response.writeHead(200, {"Content-Type": "text/html"});
       response.end(fs.readFileSync("./public/index.html"));
+    } else if (url.startsWith("/compare")) {
+      const parsedUrl = new URL(`http://localhost/${url}`);
+      const {search} = parsedUrl;
+      const options = decodeURIComponent(search.substring(1)).split("&");
+      const {topic, opt1, opt2} = parse_options(options);
+
+      console.log({ topic, opt1, opt2 });
+      response.writeHead(200).end(JSON.stringify({ topic, opt1, opt2 }));
    } else {
      console.error(`${url} is 404!`);
      response.writeHead(404);
      response.end();
    }
  });

  const port = process.env.PORT || 6789;
  console.log(`Server running on port ${port}`);
  server.listen(port);
})();

Gemini API

Untuk mulai menggunakan silakan login dengan akun GCP terlebih dahulu ke https://aistudio.google.com/ lalu menuju ke https://aistudio.google.com/app/apikey atau pilih menu "Get API Key" untuk membuat API Key baru yang akan kita gunakan di kode nantinya.

Lalu pilih "Create API Key" dan pilih proyek dari GCP sebelumnya. Dan salin API Key untuk nantinya akan dimasukkan kedalam environment variable atau file .env

`.env`

API_KEY=ApiKEYDariAIStudio

Agar API_KEY bisa terbaca di kode server.js kita perlu mengubah sedikit npm script yang ada.

`package.json`

{
  "name": "mendang-mending-gemini",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "scripts": {
    "start": "node server.js",
-     "dev": "NODE_ENV=dev node --watch server.js"
+     "dev": "NODE_ENV=dev node --watch --env-file=.env server.js"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "type": "module"
}

Untuk memastikan API_KEY sudah dapat dibaca oleh kode backend, mari menjajalnya dengan mencetak API_KEY di sisi server.

`server.js`

import fs from "fs";
import http from "http";

+ console.log(`API_KEY: ${process.env.API_KEY}`);

function parse_options(options) {
  const topic = options[0].split("=")[1];
  const opt1 = options[1].split("=")[1];
  const opt2 = options[2].split("=")[1];
  return { topic, opt1, opt2 };
}

Jalankan npm run dev dan pastikan API_KEY sudah tercetak di terminal.

$ npm run dev

$ > mendang-mending-gemini@1.0.0 dev
$ > NODE_ENV=dev node --watch --env-file=.env server.js

$ (node:97065) ExperimentalWarning: Watch mode is an experimental feature and might change at any time
$ (Use `node --trace-warnings ...` to show where the warning was created)
$ API_KEY: ApiKEYDariAIStudio
$ Server running on port 6789

Selanjutnya lakukan instalasi pustaka generative-ai dari Google melalui npm.

$ npm i @google/generative-ai

`server.js`

Hal pertama yang perlu dilakukan adalah import beberapa fungsi dari pustaka generative-ai yang baru saja diinstal. Lalu tambahkan fungsi compare yang akan menerima tiga parameter, yaitu topic, opt1, dan opt2 dan akan menghasilkan saran dari Gemini API. Terakhir, eksekusi fungsi compare ketika permintaan dari frontend diterima.

import fs from "fs";
import http from "http";
+ import {
+   GoogleGenerativeAI,
+   HarmCategory,
+   HarmBlockThreshold
+ } from '@google/generative-ai';

+ async function compare(topic, opt1, opt2) {
+   // Generate suggestion
+   const MODEL_NAME = 'gemini-1.0-pro';
+   const { API_KEY } = process.env;
+   if (!API_KEY) {
+     console.error('Please provide the API_KEY..');
+     return;
+   }
+   const genAI = new GoogleGenerativeAI(API_KEY);
+   const model = genAI.getGenerativeModel({ model: MODEL_NAME });
+   const generationConfig = {
+     temperature: 0.9,
+     topK: 1,
+     topP: 1,
+     maxOutputTokens: 2048,
+   };

+   const safetySettings = [
+     {
+       category: HarmCategory.HARM_CATEGORY_HARASSMENT,
+       threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
+     },
+     {
+       category: HarmCategory.HARM_CATEGORY_HATE_SPEECH,
+       threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
+     },
+     {
+       category: HarmCategory.HARM_CATEGORY_SEXUALLY_EXPLICIT,
+       threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
+     },
+     {
+       category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT,
+       threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
+     },
+   ];

+   const parts = [
+     {text: `Please choose your answer given by user delimited by triple dash below and give short reason why. You will answer in Bahasa Indonesia.\n\nExample:\nUser: Mending laptop atau rakit pc?\nAsisten: Mending merakit PC, karena:\n\n* Lebih hemat biaya\n* Lebih fleksibel dalam memilih komponen\n* Dapat di-upgrade dengan mudah\n* Lebih cocok untuk kebutuhan spesifik\n\n\n\n---\n\nUser: ${topic} mending ${opt1} atau ${opt2}?`},
+   ];

+   const result = await model.generateContent({
+     contents: [{role: 'user', parts}],
+     generationConfig,
+     safetySettings
+   });

+   const { response } = result;
+   return response.text();
+ }


function parse_options(options) {
  const topic = options[0].split("=")[1];
  const opt1 = options[1].split("=")[1];
  const opt2 = options[2].split("=")[1];
  return {topic, opt1, opt2};
}

(async function() {
  const server = http.createServer(async function(request, response) {
    const {url} = request;
    if (url === "/health") {
      response.writeHead(200).end("OK");
    } else if (url === "/" || url === "/index.html") {
      response.writeHead(200, {"Content-Type": "text/html"});
      response.end(fs.readFileSync("./public/index.html"));
    } else if (url.startsWith("/compare")) {
      const parsedUrl = new URL(`http://localhost/${url}`);
      const {search} = parsedUrl;
      const options = decodeURIComponent(search.substring(1)).split("&");
      const {topic, opt1, opt2} = parse_options(options);

-       console.log({topic, opt1, opt2});
+       const suggestion = await compare(topic, opt1, opt2);
-       response.writeHead(200).end(JSON.stringify({topic, opt1, opt2}));
+       response.writeHead(200).end(suggestion);
    } else {
      console.error(`${url} is 404!`);
      response.writeHead(404);
      response.end();
    }
  });

  const port = process.env.PORT || 6789;
  console.log(`Server running on por ${port}`);
  server.listen(port);
})();

Mari kita bahas beberapa bagian penting dari kode diatas satu-per-satu.

Import `@google/generative-ai`

import {
  GoogleGenerativeAI,
  HarmCategory,
  HarmBlockThreshold,
} from "@google/generative-ai";

Fungsi `compare`

async function compare(topic, opt1, opt2) {
  // Generate suggestion
  const MODEL_NAME = 'gemini-1.0-pro';
  const { API_KEY } = process.env;
  if (!API_KEY) {
    console.error('Please provide the API_KEY..');
    return;
  }
  const genAI = new GoogleGenerativeAI(API_KEY);
  const model = genAI.getGenerativeModel({ model: MODEL_NAME });
  const generationConfig = {
    temperature: 0.9,
    topK: 1,
    topP: 1,
    maxOutputTokens: 2048,
  };

  const safetySettings = [
    {
      category: HarmCategory.HARM_CATEGORY_HARASSMENT,
      threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
    },
    {
      category: HarmCategory.HARM_CATEGORY_HATE_SPEECH,
      threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
    },
    {
      category: HarmCategory.HARM_CATEGORY_SEXUALLY_EXPLICIT,
      threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
    },
    {
      category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT,
      threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
    },
  ];

  let prompt = `Please choose your answer given by user delimited by triple dash below and give short reason why. You will answer in Bahasa Indonesia.\n\nExample:\nUser: Mending laptop atau rakit pc?\nAsisten: Mending merakit PC, karena:\n\n* Lebih hemat biaya\n* Lebih fleksibel dalam memilih komponen\n* Dapat di-upgrade dengan mudah\n* Lebih cocok untuk kebutuhan spesifik\n\n\n\n---\n\nUser: ${topic} mending belajar ${opt1} atau ${opt2}?`;

  const parts = [
      { text: prompt },
  ];

  const result = await model.generateContent({
    contents: [{role: 'user', parts}],
    generationConfig,
    safetySettings
  });

  const { response } = result;
  return response.text();
}

Berikut langkah-langkah yang dilakukan oleh fungsi compare:

Pertama, inisiasi objek genAI dari GoogleGenerativeAI class dengan API_KEY yang sudah disediakan seperti yang dapat dilihat di baris ke-9.
Tentukan model yang ingin digunakan. Per tulisan ini dipublikasi, pilihan model yang tersedia melalui API adalah gemini-1.0-pro.
Buat file untuk menampung konfigurasi seperti temperature, topK, topP, maxOutputTokens dan juga konfigurasi keamanan di baris ke-11 hingga baris ke-35.
Lalu di baris ke-37 hingga baris ke-41 untuk mempersiapkan teks yang akan dikirim ke Gemini API dengan instruksi spesifik untuk membandingkan dua hal disertai dengan contoh. Salah satu cara efektif untuk prompting dengan memberikan contoh keluarang yang diinginkan.
Di baris ke-43 hingga baris ke-47, eksekusi fungsi generateContent dengan berbagai parameter yang sudah disiapkan dan hasilnya dikembalikan ke frontend.

Menampilkan Hasil sebagai HTML

Pabila dijalankan akan menghasilkan seperti ilustrasi diatas. Teks yang dihasilkan Gemini API mengikuti format dengan tanda * list dan tidak diikuti dengan baris baru. Hal ini bisa diakalin dengan menganggap teks yang dihasilkan sebagai markdown dan konversi ke HTML. Mari kita coba dengan melakukan instalasi pustaka marked.

$ npm i marked

Gunakan pustaka marked untuk mengkonversi teks yang dihasilkan oleh Gemini API menjadi HTML.

import fs from "fs";
import http from "http";
import {
  GoogleGenerativeAI,
  HarmCategory,
  HarmBlockThreshold
} from "@google/generative-ai";
+ import { parse } from 'marked';

async function compare(topic, opt1, opt2) {
  // Generate suggestion
  const MODEL_NAME = "gemini-1.0-pro";
  const {API_KEY} = process.env;
  if (!API_KEY) {
    console.error("Please provide the API_KEY..");
    return;
  }
  const genAI = new GoogleGenerativeAI(API_KEY);
  const model = genAI.getGenerativeModel({model: MODEL_NAME});
  const generationConfig = {
    temperature: 0.9,
    topK: 1,
    topP: 1,
    maxOutputTokens: 2048
  };

  const safetySettings = [
    {
      category: HarmCategory.HARM_CATEGORY_HARASSMENT,
      threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE
    },
    {
      category: HarmCategory.HARM_CATEGORY_HATE_SPEECH,
      threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE
    },
    {
      category: HarmCategory.HARM_CATEGORY_SEXUALLY_EXPLICIT,
      threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE
    },
    {
      category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT,
      threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE
    }
  ];

  const parts = [
    {
      text: `Please choose your answer given by user delimited by triple dash below and give short reason why. You will answer in Bahasa Indonesia.\n\nExample:\nUser: Mending laptop atau rakit pc?\nAsisten: Mending merakit PC, karena:\n\n* Lebih hemat biaya\n* Lebih fleksibel dalam memilih komponen\n* Dapat di-upgrade dengan mudah\n* Lebih cocok untuk kebutuhan spesifik\n\n\n\n---\n\nUser: ${topic} mending belajar ${opt1} atau ${opt2}?`
    }
  ];

  const result = await model.generateContent({
    contents: [{role: "user", parts}],
    generationConfig,
    safetySettings
  });

  const {response} = result;
  return response.text();
}

function parse_options(options) {
  const topic = options[0].split("=")[1];
  const opt1 = options[1].split("=")[1];
  const opt2 = options[2].split("=")[1];
  return {topic, opt1, opt2};
}

(async function() {
  const server = http.createServer(async function(request, response) {
    const {url} = request;
    if (url === "/health") {
      response.writeHead(200).end("OK");
    } else if (url === "/" || url === "/index.html") {
      response.writeHead(200, {"Content-Type": "text/html"});
      response.end(fs.readFileSync("./public/index.html"));
    } else if (url.startsWith("/compare")) {
      const parsedUrl = new URL(`http://localhost/${url}`);
      const {search} = parsedUrl;
      const options = decodeURIComponent(search.substring(1)).split("&");
      const {topic, opt1, opt2} = parse_options(options);

      const suggestion = await compare(topic, opt1, opt2);
-       response.writeHead(200).end(suggestion);
+       response.writeHead(200).end(parse(suggestion));
    } else {
      console.error(`${url} is 404!`);
      response.writeHead(404);
      response.end();
    }
  });

  const port = process.env.PORT || 6789;
  console.log(`Server running on por ${port}`);
  server.listen(port);
})();

Jauh lebih baik, kan?! Dan aplikasi kita pun selesai.

Penutup

Tutorial kali ini memperlihatkan cara mengintegrasikan Gemini API kedalam sebuah aplikasi web. Berikut langkah-langkah yang dilakukan:

Menyiapkan proyek NodeJS.
Membuat server dengan modul http.
Membuat route untuk menampilkan halaman utama.
Mempersiapkan aplikasi di sisi frontend.
Membuat route baru untuk menangani permintaan dari frontend.

Sedangkan untuk integrasi Gemini API, kita melakukan langkah-langkah berikut:

Mendapatkan API Key dari Google AI Studio.
Instalasi pustaka @google/generative-ai.
Import fungsi yang dibutuhkan dari pustaka tersebut.
Inisiasi dengan GenerativeAI.
Pilih model dan berbagai konfigurasi lainnya.
Eksekusi fungsi generateContent dengan parameter yang sudah disiapkan.

Kode lengkapnya tersedia di https://github.com/rizafahmi/gemini-for-web-dev.

Sekian tutorial penggunaan Gemini API khususnya untuk web developer. Kira-kira kita bikin apalagi ya? Silakan berikan masukan dan saran di kolom komentar. Terima kasih sudah mampir!

Membuat PaaS Sendiri dengan Dokku

2023-10-22T00:00:00Z

Ini adalah artikel dari materi yang dibawakan di acara Cloud Day Indonesia 2023 beberapa waktu yang lalu.

Platform as a Service

Platform-as-a-service (PaaS) adalah sebuah servis yang menyediakan infrastruktur komputasi awan atau cloud namun dikelola sepenuhnya untuk mengembangkan, dan mengelola aplikasi web. Dengan PaaS, pengembang aplikasi dapat lebih fokus untuk mengembangkan produk dan fitur tanpa perlu mengurus infrastruktur fisik seperti server, jaringan, ataupun basis data atau database.

Dengan PaaS, kita bisa fokus mengembangkan produk dan berbagai fitur dan mengutamakan produktivitas pengembang aplikasi. Dengan beberapa tahap, aplikasi yang tadinya berjalan di mesin lokal dapat dinikmati pengguna di seluruh belahan dunia.

Tentang Dokku

Dokku adalah sebuah proyek sumber terbuka atau open-source yang dapat digunakan untuk membangun PaaS kita sendiri tanpa tergantung kepada pihak tertentu. Kita dapat melakukan instalasi Dokku di berbagai penyedia jasa komputasi awan hingga server fisik sekalipun!

Dikembangkan diatas teknologi kontainer Docker dan http proxy nginx, pengguna dapat dengan mudah mengelola, mengkonfigurasi, dan melakukan penggelaran atau deployment aplikasi web dengan lebih cepat dan efisien. Selain itu, Dokku juga mendukung auto-scaling, kompatibel dengan buildpacks yang juga digunakan Heroku, serta integrasi dengan layanan komputasi awan seperti AWS, DigitalOcean, GCP dan yang lainnya.

Karena terbuka, Dokku mewariskan sifat fleksibilitas bila dibutuhkan kita bisa mengganti arsitektur semau kita. Misalkan, kita ingin mengganti nginx dengan HAproxy ataupun Traefik.

Ekosistem Dokku pun terbilang sudah cukup lengkap dengan dukungan add-ons. Kita bisa memanfaatkan add-ons untuk menambahkan basis data, caching, messaging queue, auth dan banyak lagi.

Menjajal Dokku

Untuk menjajal Dokku kita bisa siapkan sebuah mesin virtual seperti EC2 dari AWS ataupun servis serupa. Lalu akses server via ssh dan jangan lupa lakukan update dan upgrade sebelum instalasi Dokku.

$ # Contoh jika menggunakan linux ubuntu/debian
$ sudo apt update
$ sudo apt upgrade

Selanjutnya lakukan instalasi Dokku seperti yang tertera di dokumentasinya.

$ wget -NP . https://dokku.com/install/v0.31.1/bootstrap.sh
$ sudo DOKKU_TAG=v0.31.1 bash bootstrap.sh

Lakukan sedikit konfigurasi untuk otorisasi via ssh. Dan Dokku siap digunakan.

$ sudo su # act as super user
$ %> cat /home/admin/.ssh/authorized_keys | dokku ssh-keys:add admin

Demo deployment dengan Dokku

Sekarang Dokku sudah dapat dijalankan dengan menulis perintah dokku{.shell}

$ dokku

Usage: dokku [--quiet|--trace|--force] COMMAND <app> [command-specific-options]

Primary help options, type "dokku COMMAND:help" for more details, or dokku help --all to see all commands.

Commands:

    app-json                 Manage app-json settings for an app
    apps                     Manage apps
    builder                  Manage builder settings for an app
    builder-dockerfile       Manage the dockerfile builder integration for an app
    builder-lambda           Manage the lambda builder integration for an app
    builder-null             No-op builder plugin
    builder-pack             Manage the pack builder integration for an app
    buildpacks               Manage buildpack settings for an app
    caddy                    Manage the caddy proxy integration
    certs                    Manage SSL (TLS) certs
    checks                   Manage zero-downtime settings
    cleanup                  Cleans up exited/dead Docker containers and removes dangling images
    config                   Manage global and app-specific config vars
    cron                     Manage scheduled cron tasks
    docker-options           Manage docker options for an app
    domains                  Manage domains used by the proxy
    enter                    Enter running app containers
    events                   Manage event logging
    git                      Manage app deploys via git
    haproxy                  Manage the haproxy proxy integration
    help                     Print the list of commands
    logs                     Manage log integration for an app
    network                  Manage network settings for an app
    nginx                    Manage the nginx proxy
    openresty                Manage the openresty proxy integration
    plugin                   Manage installed plugins
    ports                    Manage ports for an app
    proxy                    Manage the proxy integration for an app
    ps                       Manage app processes
    registry                 Manage registry settings for an app
    repo                     Manage the app's repo
    resource                 Manage resource settings for an app
    run                      Run a one-off process inside a container
    scheduler                Manage scheduler settings for an app
    scheduler-docker-local   Manage the docker-local scheduler integration for an app
    scheduler-null           No-op scheduler plugin
    shell                    Interactive dokku prompt
    ssh-keys                 Manage public ssh keys used for deployment
    storage                  Manage mounted volumes
    trace                    Manage trace mode
    traefik                  Manage the traefik proxy integration
    url                      Show the first URL for an application (compatibility)
    urls                     Show all URLs for an application
    version                  Print dokku's version

Menyiapkan Dokku untuk penggelaran aplikasi

Langkah pertama untuk menyiapkan Dokku untuk penggelaran adalah untuk membuat aplikasi via perintah dokku.

$ dokku apps:help

Usage: dokku apps[:COMMAND]

Manage apps

Additional commands:
    apps:clone <old-app> <new-app>   Clones an app
    apps:create <app>                Create a new app
    apps:destroy <app>               Permanently destroy an app
    apps:exists <app>                Checks if an app exists
    apps:list                        List your apps
    apps:lock <app>                  Locks an app for deployment
    apps:locked <app>                Checks if an app is locked for deployment
    apps:rename <old-app> <new-app>  Rename an app
    apps:report [<app>] [<flag>]     Display report about an app
    apps:unlock <app>                Unlocks an app for deployment

Jalankan perintah berikut di server.

$ dokku apps:create dokku_express

-----> Creating dokku_express…
=====> Global server virtual host not set, disabling app host…

dokku app:list
=====> My Apps
dokku_express

Menggelar Aplikasi web

Dengan asumsi sudah memiliki aplikasi yang siap digelar, dalam contoh ini adalah sebuah aplikasi Node.js sederhana.

Mengirimkan kode ke Dokku

Kirimkan kode yang ingin digelar ke server Dokku via git.

$ git remote add dokku dokku@<ip.addr>:landing
$ git push dokku main

Dan, bukan sulap bukan sihir secara otomatis Dokku dapat mendeteksi aplikasi kita, yang dibangun dengan NodeJS dan menyiapkan platform untuk penggelaran lengkap dengan versi dan dependencies yang sesuai.

Konfigurasi Domain/subdomain

Kembali ke Dokku server, mari sekarang kita konfigurasi domain/subdomain agar aplikasi yang baru digelar dapat diakses dengan domain yang sudah disiapkan.

Jika teman-teman memiliki domain bisa lakukan konfigurasi via Route 53. Dan jika belum memiliki domain aplikasi dapat diakses via public ip address yang bisa didapat di EC2.

$ dokku domains:report

=====> landing domains information
       Domains app enabled: false
       Domains app vhosts:
       Domains global enabled: false
       Domains global vhosts:

$ dokku domains:add-global <ip.addr>

-----> Added <ip.addr>

$ dokku domains:add dokku_express <ip.addr>

-----> Added <ip.addr> to dokku_express
-----> Configuring <ip.addr>… (using build-in template)
-----> Creating http nginx.conf
       Reloading nginx

$ dokku domains:report

=====> dokku_express domains information
       Domains app enabled: true
       Domains app vhosts: <ip.addr>
       Domains global enabled: true
       Domains global vhosts: <ip.addr>

Dan sekarang aplikasi kita sudah dapat diakses via public ip address 🎉

Subdomain

Aplikasi yang digelar ke Dokku bisa lebih dari satu tentunya. Kita bisa memanfaatkan konfigurasi subdomain untuk mengarahkan satu aplikasi ke subdomain tertentu. Misalnya kita ingin mengarahkan aplikasi dokku_express kita ke subdomain https://express.wiraku.dev. Tentunya kita harus memiliki domain wiraku.dev terlebih dahulu.

Dengan bantuan Route 53 dari AWS kita bisa mengarahkan domain yang kita miliki ke ip address di EC2 tempat dimana servis Dokku berada. Lalu kita bisa melakukan konfigurasi domain dan subdomain via perintah dokku.

Lakukan langkah berikut untuk mengembalikan konfigurasi domain ke awal lagi.

$ dokku domains:clear-global

-----> Clearing global domains

$ dokku domains:clear dokku_express

=====> Global server virtual host not set, disabling vhosts...
-----> No port set, setting to random open high port
-----> Random port 40211
-----> Creating http nginx.conf
       Reloading nginx
-----> Cleared domains in dokku_express

$ dokku domains:report

=====> landing domains information
       Domains app enabled:    false
       Domains app vhosts:
       Domains global enabled: false
       Domains global vhosts:

Kemudian lakukan konfigurasi kembali untuk domain dan subdomain pilihan.

$ dokku domains:set-global wiraku.dev

-----> Added wiraku.dev

$ dokku domains:set dokku_express express.wiraku.dev

-----> Set wiraku.dev for dokku_express
-----> Configuring dokku_express.wiraku.dev... (using template)
-----> Creating http nginx.conf
       Reloading nginx

$ dokku domains:report

=====> dokku_express domains information
       Domains app enabled:    true
       Domains app vhosts:     express.wiraku.dev
       Domains global enabled: true
       Domains global vhosts:  wiraku.dev

Karena satu dan lain hal, untuk mengakses halaman web dengan domain sekarang kudu aman, kita harus menyediakan ssl certificate atau via https. Sebelum itu, mari pastikan subdomain sudah sesuai dengan bantuan curl.

$ curl http://express.wiraku.dev

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Deploy with dokku</title>
</head>
<body>

  <h1>Deploy with dokku</h1>
  <p>App version: 0.0.3</p>

</body>
</html>

Tapi tenang saja, Dokku punya solusinya dengan bantuan plugin letsencrypt yang merupakan salah satu plugin resmi yang dikembangkan langsung oleh tim Dokku.

$ sudo su
$ dokku plugin:install https://github.com/dokku/dokku-letsencrypt.git

Cloning into 'letsencrypt'...
remote: Enumerating objects: 1103, done.
remote: Counting objects: 100% (434/434), done.
...
Resolving deltas: 100% (703/703), done.
-----> Plugin letsencrypt enabled
...
Adding user dokku to group adm

$ exit

Dan sekarang plugin letsencrypt sudah siap digunakan. Pekerjaan yang cukup menjengkelkan memang untuk melakukan ini semua secara manual. Belum lagi untuk proses memperpanjang sertifikat. Dengan plugin ini, bahkan kita bisa lakukan perpanjangan secara otomatis!

$ dokku letsencrypt:help

Usage: dokku letsencrypt[:COMMAND]

Manage the letsencrypt integration
Additional commands:
    letsencrypt:active <app>                     Verify if letsencrypt is active for an app
    letsencrypt:auto-renew [<app>]               Auto-renew app if renewal is necessary
    letsencrypt:cleanup <app>                    Remove stale certificate directories for app
    letsencrypt:cron-job [--add --remove]        Add or remove a cron job that periodically calls auto-renew.
    letsencrypt:disable <app>                    Disable letsencrypt for an app
    letsencrypt:enable <app>                     Enable or renew letsencrypt for an app
    letsencrypt:help                             Display letsencrypt help
    letsencrypt:list                             List letsencrypt-secured apps with certificate expiry times
    letsencrypt:revoke <app>                     Revoke letsencrypt certificate for app
    letsencrypt:set <app> <property> (<value>)   Set or clear a letsencrypt property for an app

Jalankan perintah dokku letsencrypt:enable untuk mengizinkan subdomain express dijalankan via https.

$ dokku letsencrypt:set --global email <email@domain.com>

=====> Setting email to <email@domain.com>

dokku letsencrypt:enable express
=====> Enabling letsencrypt for express
-----> Enabling ACME proxy for express...
-----> Getting letsencrypt certificate for express via HTTP-01
         - Domain 'express.wiraku.dev'
No key found for account <email@domain.com>. Generating a P256 key.
Saved key to /certs/accounts/acme-v02.api.letsencrypt.org/<email@domain.com>/keys...
[INFO] acme: Registering account for <email@domain.com>
...
-----> Certificate retrieved successfully.
-----> Installing let's encrypt certificates
-----> Configuring express.wiraku.dev
-----> Done

Fitur ekstra

Ada banyak lagi fitur tambahan dari Dokku, baik plugin resmi yang dikembangkan tim Dokku langsung ataupun yang dikembangkan oleh komunitas. Sebut saja basis data seperti postgresql, caching seperti redis, hingga alat seperti Grafana pun sudah tersedia.

Ada juga fitur tambahan seperti antarmuka berbasis web sehingga proses administrasi yang tadinya kita jalankan via terminal dapat dilakukan via antarmuka web.

Kesimpulan

Di artikel ini kita sudah membahas tentang apa itu PaaS, tentang Dokku dan bagaimana cara instalasi Dokku di server AWS, melakukan konfigurasi dan demo singkat penggelaran dengan Dokku. Kita juga sudah melakukan konfigurasi domain dan subdomain yang ternyata cukup sederhana.

Dengan adanya Dokku dan beberapa servis serupa, kita dapat membangun Platform-as-a-Service (PaaS) sendiri baik untuk digunakan untuk keperluan pribadi ataupun untuk meraup keuntungan.

Referensi

Membangun Tampilan Web dengan HTML, CSS & JS

2023-05-26T00:00:00Z

Berikut adalah materi tertulis untuk acara workshop di Surabaya yang diselenggarakan Mei 2023.

Prasarat

Untuk mengikuti materi ini, teman-teman membutuhkan beberapa alat berikut:

NodeJS versi 18 atau yang lebih baru
Kode editor seperti VS Code, Sublime dll
Web browser seperti Chrome, Firefox, dll

Persiapan

$ cd /Users/riza/playground/webscrape-tutorial
$ npm run dev
$ ngrok http 8080

Ujicoba dulu...

$ curl localhost:8080/followers

Pengantar

Kesempatan kali ini kita akan membangun halaman web dengan HTML, CSS dan JavaScript. Dimuai dari tanpa menggunakan framework hingga bertahap diubah dengan memperkenalkan framework. Di akhir sesi diharapkan teman-teman yang mengikuti sesi ini sudah dapat melakukan:

Mempersiapkan proyek
Mempersiapkan halaman HTML
Menambahkan CSS
Menambahkan beberapa fungsi dengan JavaScript
Bonus: Rewrite ke framework

Persiapan Proyek

$ mkdir webapp
$ cd webapp
$ code .

Halaman HTML

`index.html`

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Web App</title>
  </head>

  <body>
    <header>
      <h1>Web Dashboard</h1>
    </header>
    <main>
      <div class="media">
        <div class="media-name">Twitter</div>
        <h2 class="media-followers">5,320</h2>
        <span class="media-label">followers</span>
      </div>
    </main>
    <footer>&copy; 2023 HACKTIV8 🦊</footer>
  </body>
</html>

$ npx live-server

Menambahkan CSS

`style.css`

:root {
  --bg_main: #0a1f44;
  --text_light: #fff;
  --text_med: #53627c;
  --text_dark: #1e2432;
  --red: #ff1e42;
  --darkred: #c3112d;
  --orange: #ff8c00;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: normal;
}

body {
  font:
    1rem/1.3 "Roboto",
    sans-serif;
  background: var(--bg_main);
  color: var(--text_dark);
  padding: 50px;
}

header > h1 {
  font-weight: bold;
  font-size: 4rem;
  letter-spacing: 0.02em;
  padding: 0 0 30px 0;
  color: var(--text_light);
}

.media {
  position: relative;
  padding: 40px 10%;
  border-radius: 20px;
  background: var(--text_light);
  color: var(--text_med);
  width: 35%;
}

.media-name {
  font-size: 1.5rem;
}

.media-followers {
  font-size: 2rem;
  font-weight: bold;
}

.media-label {
  color: var(--text_med);
}

footer {
  text-align: center;
  font-size: 1rem;
  color: var(--text_light);
  margin-top: 40px;
}

footer span {
  color: var(--red);
}

Menambahkan JavaScript

`index.html`

 <!DOCTYPE html>
 <html lang="en">

 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
   <title>Web App</title>
 </head>

 <body>
   <header>
     <h1>Web Dashboard</h1>
   </header>
   <main>
     <div class="media">
       <div class="media-name">Twitter</div>
       <h2 class="media-followers">5,320</h2>
       <span class="media-label">followers</span>
     </div>
   </main>
   <footer>&copy; 2023 HACKTIV8 🦊</footer>
+   <script src="app.js"></script>
 </body>

 </html>

`app.js`

async function getData() {
  const response = await fetch("https://blabla.ngrok.io/followers");
  const { followers } = await response.json();
  return followers;
}

async function main() {
  try {
    const followers = await getData();
    render(followers);
  } catch (error) {
    console.log(error);
  }
}

main();

function render(followers) {
  const followersEl = document.querySelector(".media-followers");
  followersEl.textContent = formatNumber(followers[0].count);
}

function formatNumber(num) {
  const formatter = new Intl.NumberFormat("id-ID");
  return formatter.format(num);
}

Backend

$ npm init -y
$ npm install express@5.0.0-beta.1

`package.json`

{
  "name": "webapp-tutorial",
  "version": "0.0.1",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "keywords": [],
  "author": "Riza Fahmi <rizafahmi@gmail.com> (https://rizafahmi.com/)",
  "license": "MIT",
  "dependencies": {
    "express": "5.0.0-beta.1"
  },
  "type": "module"
}

`server.js`

import express from "express";
import path from "path";

const app = express();

app.get("/", function (req, res) {
  res.sendFile(path.resolve("index.html"));
});

app.listen(3000, function () {
  console.log("Example app listening on port 3000!");
});

Refactor Folder

$ .
$ ├── public
$ │   ├── app.js
$ │   ├── index.html
$ │   └── style.css
$ ├── package.json
$ ├── pnpm-lock.yaml
$ └── server.js

`server.js`

import express from 'express';
import path from 'path';

const app = express();

+ app.use(express.static('public'));

app.get('/', function (req, res) {
- res.sendFile(path.resolve('index.html'));
+ res.sendFile(path.resolve('public/index.html'));
});

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

Menambahkan Media Sosial Lainnya

Statis/Hardcoded/manual: `app.js`

function render(followers) {
  const mainEl = document.querySelector("main");
  const mediaEl = document.createElement("div");
  mediaEl.className = "media";

  const nameEl = document.createElement("div");
  nameEl.className = "media-name";
  nameEl.textContent = followers[0].media;
  mediaEl.append(nameEl);

  const followerEl = document.createElement("h2");
  followerEl.className = "media-followers";
  followerEl.textContent = formatNumber(followers[0].count);
  mediaEl.append(followerEl);

  const labelEl = document.createElement("span");
  labelEl.className = "media-label";
  labelEl.textContent = "followers";
  mediaEl.append(labelEl);

  mainEl.append(mediaEl);
}

`index.html`

 <!DOCTYPE html>
 <html lang="en">

 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
   <title>Web App</title>
 </head>

 <body>
   <header>
     <h1>Web Dashboard</h1>
   </header>
   <main>
-     <div class="media">
-       <div class="media-name">Twitter</div>
-       <h2 class="media-followers">5,320</h2>
-       <span class="media-label">followers</span>
-     </div>
   </main>
   <footer>&copy; 2023 HACKTIV8 🦊</footer>
 </body>

 </html>

`style.css`

 :root {
   --bg_main: #0a1f44;
   --text_light: #fff;
   --text_med: #53627c;
   --text_dark: #1e2432;
   --red: #ff1e42;
   --darkred: #c3112d;
   --orange: #ff8c00;
 }

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-weight: normal;
 }

 body {
   font: 1rem/1.3 'Roboto', sans-serif;
   background: var(--bg_main);
   color: var(--text_dark);
   padding: 50px;
 }

 header > h1 {
   font-weight: bold;
   font-size: 4rem;
   letter-spacing: 0.02em;
   padding: 0 0 30px 0;
   color: var(--text_light);
 }

 .media {
   position: relative;
   padding: 40px 10%;
   border-radius: 20px;
   background: var(--text_light);
   color: var(--text_med);
   width: 35%;
 }

 .media-name {
   font-size: 1.5rem;
+   text-transform: capitalize;
 }

 .media-followers {
   font-size: 2rem;
   font-weight: bold;
 }

 .media-label {
   color: var(--text_med);
 }

 footer {
   text-align: center;
   font-size: 1rem;
   color: var(--text_light);
   margin-top: 40px;
 }

 footer span {
   color: var(--red);
 }

Dinamis: `app.js`

function render(followers) {
  const mainEl = document.querySelector("main");

  for (let i = 0; i < followers.length; i += 1) {
    const mediaEl = document.createElement("div");
    mediaEl.className = "media";

    const nameEl = document.createElement("div");
    nameEl.className = "media-name";
    nameEl.textContent = followers[i].media;
    mediaEl.append(nameEl);

    const followerEl = document.createElement("h2");
    followerEl.className = "media-followers";
    followerEl.textContent = formatNumber(followers[i].count);
    mediaEl.append(followerEl);

    const labelEl = document.createElement("span");
    labelEl.className = "media-label";
    labelEl.textContent = "followers";
    mediaEl.append(labelEl);

    mainEl.append(mediaEl);
  }
}

`style.css`

 :root {
   --bg_main: #0a1f44;
   --text_light: #fff;
   --text_med: #53627c;
   --text_dark: #1e2432;
   --red: #ff1e42;
   --darkred: #c3112d;
   --orange: #ff8c00;
 }

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-weight: normal;
 }

 body {
   font: 1rem/1.3 'Roboto', sans-serif;
   background: var(--bg_main);
   color: var(--text_dark);
   padding: 50px;
 }

 header > h1 {
   font-weight: bold;
   font-size: 4rem;
   letter-spacing: 0.02em;
   padding: 0 0 30px 0;
   color: var(--text_light);
 }

+ main {
+   display: flex;
+   flex-wrap: wrap;
+   gap: 24px;
+ }

 .media {
   position: relative;
   padding: 40px 10%;
   border-radius: 20px;
   background: var(--text_light);
   color: var(--text_med);
   width: 35%;
 }

 .media-name {
   font-size: 1.5rem;
   text-transform: capitalize;
 }

 .media-followers {
   font-size: 2rem;
   font-weight: bold;
 }

 .media-label {
   color: var(--text_med);
 }

 footer {
   text-align: center;
   font-size: 1rem;
   color: var(--text_light);
   margin-top: 40px;
 }

 footer span {
   color: var(--red);
 }

Menggunakan Framework

Rewrite ke Web Components

Pengantar

Adalah framework native yang didukung hampir semua browser modern. Kode dapat lebih modular dan komponen yang dibuat dapat digunakan berkali-kali. Performa tentu yang paling bagus karena sudah didukung web browser secara native tanpa perlu menambahkan pustaka atau kerangka kerja tambahan lagi. Terdiri dari empat teknologi utama: ES Module, Custom Elements, Shadow DOM, dan HTML Template.

Web Components Pertama

Custom Components: `footer-component.js`

class FooterComponent extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<footer>&copy; 2023 HACKTIV8 🦊</footer>`;
  }
}
customElements.define("footer-component", FooterComponent);

`index.html`

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Web App</title>
  </head>

  <body>
    <header>
      <h1>Web Dashboard</h1>
    </header>
    <main>
      <div class="media">
        <div class="media-name">Twitter</div>
        <h2 class="media-followers" id="followers">5,320</h2>
        <span class="media-label">followers</span>
      </div>
    </main>
    <footer-component></footer-component>

    <script src="app.js"></script>
    <script src="footer-component.js"></script>
  </body>
</html>

Demo Web Component

ES Module: `index.html`

 <!DOCTYPE html>
 <html lang="en">

 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css">
     <title>Web App</title>
 </head>

 <body>
     <header>
         <h1>Web Dashboard</h1>
     </header>
     <div id="root">
+         <followers-count></followers-count>
     </div>

     <footer-component></footer-component>

-     <script src="app.js"></script>
+     <script src="app.js" type="module"></script>
     <script src="footer-component.js" type="module"></script>
 </body>

 </html>

`followers-count.js`

export class FollowersCount extends HTMLElement {
  constructor() {
    super();
    this.data = [];
  }

  set socials(value) {
    this.data = value;
    this.render();
  }

  render() {
    this.innerHTML = `
				  	  <main>
				  	      ${this.data.map(function (social) {
                    return `
				                  <div class="media">
				                  <div class="media-name">${social.media}</div>
				                  <h2 class="media-followers">${social.count}</h2>
				                  <span class="media-label">followers</span>
				                  </div>
				                `;
                  })}
				  	  </main>
				      `;
  }
}

customElements.define("followers-count", FollowersCount);

`app.js`

 import './followers-count.js';

 async function getData() {
   const response = await fetch('http://localhost:8080/followers');
   const { followers } = await response.json();
   return followers;
 }

- function render() {
-   // ...
- }

 function formatNumber(num) {
   const formatter = new Intl.NumberFormat('id-ID');
   return formatter.format(num);
 }

 async function main() {
   const followers = await getData();
+   const followersEl = document.querySelector('followers-count');
+   followersEl.socials = followers;
-	render(render);
 }

 main();

Bonus: Rewrite ke Framework lainnya

React
Vue
Svelte
Astro
Qwik
Lit

Kesimpulan

Membangun aplikasi web membutuhkan HTML, CSS dan JavaScript
HTML dapat digunakan untuk menyusun kerangka aplikasi
CSS digunakan untuk tampilan visual
JavaScript digunakan untuk interaktivitas
Pustaka/framework dibutuhkan ketika aplikasi berkembang menjadi semakin kompleks

Web Scraping dengan Node

2023-05-25T00:00:00Z

Berikut adalah materi tertulis untuk acara workshop di Surabaya yang diselenggarakan Mei 2023.

Prasarat

Untuk mengikuti materi ini, teman-teman membutuhkan beberapa alat berikut:

NodeJS versi 18 atau yang lebih baru
Kode editor seperti VS Code, Sublime dll
Web browser seperti Chrome, Firefox, dll

Pengantar

Web scraping adalah sebuah teknik untuk ekstraksi data dari sebuah halaman web. Seperti yang kita ketahui bersama halaman web adalah sebuah dokumen yang biasanya digunakan untuk menampikan data dalam bentuk tulisan, gambar dan sebagainya. Data tersebut dapat diambil bagian tertentu dengan teknik web scraping.

Selain menggunakan API seperti REST API yang disediakan, teknik web scraping seringkali digunakan untuk mendapatkan dan menapilkan data dalam bentuk atau format yang berbeda. Layaknya membuat majalah dinding atau mading.

Kesempatan kali ini kita akan belajar cara melakukan web scraping dengan JavaScript dan Node sebagai platform dasarnya. Di akhir sesi diharapkan teman-teman yang mengikuti sesi ini sudah dapat melakukan:

Mempersiapkan proyek node dan instalasi alat bantu
Melakukan request/pemanggilan/download halaman web yang ingin diambil datanya
Melakukan ekstraksi (parsing) halaman HTML
Menampilkan kembali data dalam format berbeda
Bonus: Simpan ke database

Bagian 1: Persiapan Proyek

$ mkdir webscraping
$ cd webscraping
$ npm init -y

Instalasi alat bantu

Cheerio adalah pustaka yang dapat mempermudah kita melakukan ekstraksi dan manipulasi dokumen HTML, XML dan bahasa sejenis. Salah satu keunggulan Cheerio dibandingkan pustaka lain adalah API yang sederhana penggunaannya terutama untuk membaca, memanipulasi dan ekstraksi data dari halaman web.

$ npm install cheerio

Bagian 2: Web Scraping Dasar

`app.js`

import * as cheerio from "cheerio";

// Sediakan dokumen HTML
const html = '<h2 class="title">Halo Surabaya</h2>';

// Muat(load) dokumen HTML ke Cheerio
const $ = cheerio.load(html);
console.log($);

// Uraikan dokumen HTML dengan cheerio

// Ekstraksi data

Coba dijalankan, dan error…

$ node app.js

(node:55175) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/Users/riza/playground/webscrape-tutorial/app.js:1
import * as cheerio from 'cheerio';
^^^^^^
SyntaxError: Cannot use import statement outside a module
	at Object.compileFunction (node:vm:352:18)
	at wrapSafe (node:internal/modules/cjs/loader:1033:15)
	at Module._compile (node:internal/modules/cjs/loader:1069:27)
	at Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
	at Module.load (node:internal/modules/cjs/loader:981:32)
	at Module._load (node:internal/modules/cjs/loader:827:12)
	at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
	at node:internal/main/run_main_module:17:47
Node.js v18.3.0

Node secara default masih menggunakan format require. Agar lebih ‘modern’ mari kita tambahkan opsi dengan tipe modul yang berbeda.

`package.json`

{
	"name": "webscrape-tutorial",
	"version": "0.0.1",
	"description": "",
	"main": "index.js",
	"scripts": {
		"test": "echo \\"Error: no test specified\\" && exit 1"
	},
	"keywords": [],
	"author": "Riza Fahmi <rizafahmi@gmail.com> (<https://rizafahmi.com/>)",
	"license": "MIT",
	"dependencies": {
		"cheerio": "1.0.0-rc.12"
	},
	"type": "module"
}

$ node app.js

	[Function: initialize] {
		contains: [Function: contains],
		html: [Function: html],
		merge: [Function: merge],
		parseHTML: [Function: parseHTML],
		root: [Function: root],
		text: [Function: text],
		xml: [Function: xml],
		load: [Function: load],
		_root: Document {
			parent: null,
			prev: null,
			next: null,
			startIndex: null,
			endIndex: null,
			children: [ [Element] ],
			type: 'root',
			'x-mode': 'quirks'
		},
		_options: { xml: false, decodeEntities: true },
		fn: Cheerio {}
	}

Memilih elemen

Ketika data sudah dimuat, kita bisa memilih(select), menelusuri(traversing), dan memanipulasi dokumen html.

`app.js`

import * as cheerio from "cheerio";

// Sediakan dokumen HTML
const html = '<h2 class="title">Halo Surabaya</h2>';

// Muat(load) dokumen HTML ke Cheerio
const $ = cheerio.load(html);

// Uraikan dokumen HTML dengan cheerio
text = $("h2.title").text();
console.log(text);

// Ekstraksi data

Mari gunakan halaman html beneran untuk mempelajari teknik scraping dengan lebih baik

Mengunduh halaman web

Unduh sebuah halaman web untuk kemudian beberapa bagian akan diambil datanya dengan Cheerio. Untuk mengunduh halaman web, bisa menggunakan fetch() yang sudah disediakan oleh NodeJS

`app.js`

import * as cheerio from "cheerio";

async function getHtml(url) {
  try {
    const response = await fetch(url);
    const html = await response.text();
    return html;
  } catch (error) {
    console.log(error);
    return;
  }
}

const html = await getHtml("https://rizafahmi.com");

const $ = cheerio.load(html);

const text = $("h1").text();
console.log(text);

const footer = $("p");
console.log(footer.attr());
console.log(footer.text());

Mencari & Menelusuri elemen

List artikel

`app.js`

import * as cheerio from 'cheerio';

async function getHtml(url) {
	try {
		const response = await fetch(url)
		const html = await response.text();
		return html
	} catch (error) {
		console.log(error)
	}
}

- const html = await getHtml('https://rizafahmi.com');
+ const html = await getHtml('https://rizafahmi.com/articles');

const $ = cheerio.load(html);

- const text = $('h1').text();
- console.log(text);

- const footer = $('p')
- console.log(footer.attr())
- console.log(footer.text())

+ const articles = $('ul').find('li').find('a')

+ for (let i = 0; i < articles.length; i += 1) {
+   console.log(`${i + 1} - ${articles[i].children[0].data}`)
+ }

Misalnya kita ingin mencari daftar artikel di https://rizafahmi.com/2021/09/12/tentang-friction-log/.

`app.js`

import * as cheerio from "cheerio";

async function getHtml(url) {
  try {
    const response = await fetch(url);
    const html = await response.text();
    return html;
  } catch (error) {
    console.log(error);
  }
}

const html = await getHtml(
  "https://rizafahmi.com/2021/09/12/tentang-friction-log/",
);

const $ = cheerio.load(html);

const footer = $("footer").find("a");
console.log(footer.length); // 10
for (let i = 0; i < footer.length; i += 1) {
  console.log(footer[i].children[0].data);
}

Mencari keatas

`app.js`

import * as cheerio from "cheerio";

async function getHtml(url) {
  try {
    const response = await fetch(url);
    const html = await response.text();
    return html;
  } catch (error) {
    console.log(error);
  }
}

const html = await getHtml(
  "https://rizafahmi.com/2021/09/12/tentang-friction-log/",
);

const $ = cheerio.load(html);

const header5 = $("h5");
console.log(header5.parent().prop("tagName")); // Footer
console.log(header5.parent().parent().prop("tagName")); // Body

Mencari berikutnya/sebelumnya

`app.js`

import * as cheerio from "cheerio";

async function getHtml(url) {
  try {
    const response = await fetch(url);
    const html = await response.text();
    return html;
  } catch (error) {
    console.log(error);
  }
}

const html = await getHtml("https://rizafahmi.com/articles");

const $ = cheerio.load(html);

const first_article = $("li:first");
console.log(first_article.text());

const second_article = first_article.next();
console.log(second_article.text());

const third_article = second_article.next();
console.log(third_article.text());

console.log(third_article.prev().text());

Bagian 3: Client-side Scraping

Mari scrape instagram, dan ambil data jumlah follower

`app.js`

import * as cheerio from "cheerio";

async function getHtml(url) {
  try {
    const response = await fetch(url);
    const html = await response.text();
    return html;
  } catch (error) {
    console.log(error);
  }
}

const html = await getHtml("https://instagram.com/rizafahmi");

const $ = cheerio.load(html);
const followers = $(".css-901oao");
console.log(followers.length); // 0

Karena dokumen di-render di sisi klien (web browser) Kita butuh pustaka lain: puppeteer

$ npm i puppeteer

`app.js`

import puppeteer from "puppeteer";

async function getHtml(url) {
  try {
    const browser = await puppeteer.launch({ headless: "new" });
    const page = await browser.newPage();
    await page.goto(url);
    await page.waitForNetworkIdle();
    // await page.screenshot({ path: 'screenshot.png' })
    const data = await page.evaluate(function () {
      const followers = document.querySelectorAll('a[role="link"]>span>span')[2]
        .innerText;
      return followers;
    });

    await browser.close();

    return data;
  } catch (error) {
    console.log(error);
  }
}

const followers = await getHtml("https://twitter.com/rizafahmi22");

console.log(`Followers: ${followers}`);

Bagian 4: Simpan ke database

Backend/webservice

$ npm i express
$ npm i -D nodemon

`server.js`

import express from "express";

const app = express();

app.get("/ping", function (req, res) {
  res.json({ status: "OK" });
});

app.get("/followers", function (req, res) {
  res.json({
    status: "OK",
    followers: [{ media: "twitter", count: 5629 }],
  });
});

app.listen(3000, function () {
  console.log("Server is listening on port 3000");
});

`package.json`

collapsed:: true

{
  "name": "webscrape-tutorial",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
+     "dev": "nodemon server.js"
  },
  "keywords": [],
  "author": "Riza Fahmi <rizafahmi@gmail.com> (https://rizafahmi.com/)",
  "license": "MIT",
  "dependencies": {
    "cheerio": "1.0.0-rc.12",
+     "express": "5.0.0-beta.1",
    "puppeteer": "20.2.1"
  },
  "type": "module",
+   "devDependencies": {
+     "nodemon": "2.0.22"
+   }
}

`server.js`

import express from 'express';
+ import { getHtml } from './app.js';
+ import { getDB, initDB } from './db.js'

const app = express();

app.get('/ping', function(req, res) {
  res.json({ status: 'OK' });
});

app.get('/followers', function(req, res) {
  res.json({
    status: 'OK',
    followers: [
      {media: "twitter", count: 5629}
    ]
  })
});

+ app.get('/sync', async function(req, res) {
+   initDB();
+   try {
+     const followers = await getHtml('https://twitter.com/rizafahmi22');

+     const db = getDB();
+     const sql = `INSERT INTO followers (followers) VALUES (${parseInt(followers.replace(/,/g, ''))});`;
+     db.run(sql);
+     res.json({ status: "ok" });
+   } catch (error) {
+     res.json({ status: error });
+   }
+ })

app.listen(3000, function() {
  console.log('Server is listening on port 3000');
});

$ npm i sqlite3

`db.js`

import sqlite3 from "sqlite3";

export function getDB() {
  return new sqlite3.Database("./followers.db");
}

export async function initDB() {
  const db = getDB();
  try {
    const sql = `CREATE TABLE IF NOT EXISTS followers (
			        id INTEGER PRIMARY KEY AUTOINCREMENT,
			        followers INTEGER,
			        last_updated DATETIME DEFAULT CURRENT_TIMESTAMP);
			        `;

    return db.run(sql);
  } catch (error) {
    console.log(error);
    return;
  }
}

Kesimpulan

Web scraping adalah sebuah teknik untuk ekstraksi data dari sebuah halaman web
Ada dua metode web scraping yang bisa dilakukan: server-side dan client-side
Melakukan web scraping dengan JavaScript/Node dapat dilakukan dengan pustaka seperti Cheerio
Juga bisa menggunakan pustaka seperti Puppeeter apabila web menggunakan metode client-side rendering atau single-page app
Menggunakan metode kedua dengan Puppeeter lebih berat secara performa karena mengemulasi pengguna dengan web browser

Tentang Friction Log

2021-09-12T00:00:00Z

Friction log adalah sebuah cara untuk mengevaluasi sebuah produk, atau meluncurkan fitur baru. Tujuannya untuk merekam pengalaman dalam menggunakan fitur atau produk tersebut.

Friction log biasanya berdasarkan skenario nyata. Misalnya bagaimana proses deployment aplikasi Django di Heroku.

Biasanya setiap pengalaman yang didapat dikategorikan menjadi tiga jenis:

Pengalaman yang menyenangkan dilambangkan dengan warna hijau 🟢
Pengalaman yang kurang menyenangkan, membingungkan, atau bikin frustrasi dilambangkan dengan warna orange 🟠
Pengalaman yang buruk dilambangkan dengan warna merah 🔴

Kegunaa Friction Log

Friction log dapat juga digunakan untuk proses onboarding anggota tim baru. Friction log sebaiknya dilakukan secara manual oleh manusia dan ditujukan untuk mendapatkan masukan secara mendetil bukan (hanya) untuk mencari bugs 🐛. Friction log juga dapat dibuat sembari membuat tutorial, demo, dan lain sebagainya.

Kapan Dibutuhkan Friction Log?

Friction log biasanya dibuat saat sebelum meluncurkan produk baru atau fitur baru. Juga bisa digunakan untuk memperkenalkan produk kepada anggota tim baru. Biasanya friction log juga dapat dibuat ketika ada komplain atau masukan dari pengguna yang dikirimkan melalui email, media sosial, atau media lainnya.

Setelah menulis Friction Log

Setelah friction log dibuat, kita bisa mendiskusikan hasilnya dengan tim produk, bagikan hasilnya dengan menulis blog dan sebagainya.

Contoh Friction Log

Saya sempat mencontohkan cara membuat friciton log dari awal di beberapa sesi livestreaming. Dan ternyata tanpa disadari saya juga sudah melakukan friction log beberapa kali walaupun belum didokumentasikan. Untungnya saya melakukannya di sesi livestreaming sehingga dapat diputar ulang dan dibuat dokumentasi tertulisnya.

Sesi Belajar Friction Log

Sesi Qore dan Next.js

Menjajal Fitur Baru KaryaKarsa

Referensi

Panduan Menulis Artikel Pemrograman

2021-01-28T00:00:00Z

Berikut adalah panduan singkat dalam menulis artikel pemrograman. Jika teman-teman memiliki pengalaman atau pengetahuan tertentu mengenai pemrograman dan ingin membagikannya untuk teman-teman lainnya, teman-teman dapat merumuskan pengalaman tersebut kedalam sebuah tulisan. Dengan demikian pengetahuan ataupun pengalaman tersebut akan lebih berguna.

Artikel ini disadur dari talk yang dibawakan oleh Rachel Nabors.

Pemilihan Topik

Pertanyaan paling sering muncul biasanya ketika ingin menulis, mengisi acara, talk, meetup, konferensi dan lain sebagainya adalah bagaimana memilih topik yang tepat.

Disaat kita baru belajar sebuah topik dan seolah kita sangat bersemangat untuk membangikan apa yang baru kita pelajari kepada banyak orang biasanya dapat menjadi sumber inspirasi untuk menulis sebuah artikel.

Inspirasi berikutnya yang tidak kalah menarik adalah ketika kita melakukan kesalahan dalam pekerjaan dan juga dapat dibungkus menjadi sebuah topik. Dilengkapi dengan solusi bagaimana menyelesaikan masalah tersebut tentunya.

Atau kamu baru saja berhasil menyelesaikan masalah tertentu di kantor. Pengalaman menyenangkan tersebut juga dapat menjadi topik pilihan.

Atau mungkin ketika googling ataupun membaca sebuah tutorial, kita seringkali berharap ada yang membahas sebuah topik dengan pendekatan yang berbeda, atau dengan studi kasus yang berbeda.

Nah ini kesempatan buat kita untuk membuatnya menjadi bentuk artikel atau tulisan. Buatlah tutorial yang diharapkan ada namun belum ada yang membuatnya.

Mungkin saja artikel ini sudah tersedia dalam bahasa selain bahasa Indonesia, kita bisa membuat versi bahasa Indonesia-nya. Namun jangan hanya melakukan translasi. Modifikasi juga agar sesuai dengan kebutuhan dan dengan bahasa kita sendiri.

Target Pembaca

Sebaiknya tentukan target pembaca ketika menulis sebuah artikel. Sehingga kita bisa berasumsi bahwa pembaca sudah mengenal terminologi atau konsep yang akan kita bahas. Sehingga sekiranya kita memperkenalkan konsep yang masih asing, kita bisa membahasnya lebih mendalam untuk target pembaca tersebut.

Dan tentunya pemilihan bahasa yang nyaman untuk digunakan atau dibaca oleh calon pembaca kita sesuai dengan targetnya. Jika artikel ditujukan untuk pembaca dari Indonesia, cobalah untuk menyajikan dengan Bahasa Indonesia. Jika artikel atau tutorial ditujukan untuk semua kalangan, menggunakan bahasa Inggris adalah ide yang baik.

Gunakan Struktur Yang Umum Digunakan

Artikel yang baik memiliki struktur yang jelas. Disadari atau tidak, ada tiga bagian utama: pembuka, inti, dan penutup atau kesimpulan.

Bagian Pembuka

Bagian pembuka sangat penting karena akan menentukan artikel kita menarik untuk dibaca atau tidak. Bagian pembuka yang baik biasanya dapat menjawab pertanyaan tentang: apa, kenapa, siapa, kapan, dimana dan bagaimana. Hal ini lazim disebut dengan istilah 5W & 1H.

Contohnya teman-teman bisa menulis tentang siapa target pembaca, apa saja yang akan dipelajari, kenapa topik ini penting, kapan topik ini akan berguna, dimana akan digunakan dan bagaimana implementasi diluar contoh tutorial ini.

Bagian Utama

Inti dari artikel juga butuh struktur yang kokoh. Strukturnya terdiri dari tiga bagian:

Pengenalan konsep baru,
Contoh kode,
Penjelasan rinci dari beberapa baris kode yang dicontohkan
Ulangi hingga artikel selesai

Bagian Penutup

Bagian yang tidak kalah penting adalah bagian penutup atau kesimpulan. Di bagian ini kita akan menjabarkan apa saja yang sudah kita bahas sebagai pengingat. Bisa juga ditambahkan artikel terkait jika pembaca ingin menggali lebih dalam tentang materi pembahasan.

Contoh Interaktif

Apabila memungkinkan gunakan contoh kode yang interaktif. Teman-teman bisa menggunakan servis seperti codesandbox, codepen, expo snack dan lain sebagainya sehingga pembaca dapat menjalankan contoh kode dan dapat melihat hasilnya.

Gunakan Ilustrasi

Menurut Dr. Lynell Burmark, kata-kata diproses oleh short-term memory yang hanya dapat bertahan kurang-lebih dua menit saya. Sedangkan ilustrasi atau gambar langsung masuk ke long-term memory dan dapat lebih lama untuk diingat oleh otak kita.

Jadi gunakanlah ilustrasi sesering mungkin. Tidak perlu terlalu artistik dan harus membayar ilustrator untuk artikel kita, bisa gunakan servis seperti excalidraw, draw.io dan lain sebagainya untuk menggambarkan konsep yang ingin kita bahas.

Kesimpulan

Demikian panduan untuk menulis artikel pemrograman. Kita sudah membahas tentang bagaimana memilih topik, menentukan target pembaca, menyusun struktur, menggunakan contoh yang interaktif, dan juga ilustrasi agar artikel atau tutorial lebih menarik.

Berikut checklist untuk membuat artikel:

Pilih topik
Tentukan target pembaca
Struktur Umum digunakan
- Bagian pembuka
- Bagian utama
- Bagian penutup
Gunakan contoh yang interaktif
Gunakan ilustrasi

Rekursi: Fungsi Yang Memanggil Dirinya Sendiri

2020-03-26T00:00:00Z

Di artikel ini kita akan mempelajari salah satu dari konsep fundamental dari ilmu komputer, rekursi atau recursion. Rekursi sederhananya adalah fungsi yang memanggil fungsi tersebut atau dirinya sendiri. Namun tidak berhenti disitu saja, ada beberapa aspek yang harus dibahas sebelum kita menggunakan rekursi di kode kita.

Menurut saya pribadi, rekursi ini penting dan tidak penting. Penting karena kita bisa menciptakan solusi yang elegan untuk menerapkan D.R.Y atau (don't repeat yourself). Selain itu, rekursi adalah salah satu pengetahuan fundamental yang sangat diharapkan dikuasai oleh kita sebagai developer. Dan yang tidak kalah penting adalah banyak sekali algoritma diluar sana yang menggunakan rekursi sehingga dengan memahaminya, secara tidak langsung kita bisa mengerti algoritma yang menggunakan rekursi.

Namun sebenarnya pun tanpa rekursi pun kita bisa saja menggunakan perulangan untuk menciptakan solusi yang sama, namun dengan cara yang kurang elegan. Kembali menurut saya, setidaknya mengerti cara kerja rekursi adalah hal yang sangat krusial meskipun kita masih jarang menggunakannya.

Mari kita buat sebuah fungsi penghitung mundur. Tentu fungsi ini dapat dengan mudah kita buat dengan menggunakan perulangan, nanum untuk keperluan pembelajaran kita akan membuat versi rekursinya.

function countdown(i) {
  console.log(i);
  countdown(i - 1);
}

countdown(10);

Jika dijalankan, maka akan menghasilkan keluaran sebagai berikut.

10
9
8
7
6
5
4
3
2
1
0
-1
-2
-3
-4
-5
-6
-7
-8
-9
-10
-11
-12
-13
-14
-15
-16
-17
....

RangeError: Maximum call stack size exceeded

Fungsi rekursi diatas akan menghasilkan infinite loop hingga sumber daya komputer kita habis dan berhenti. Mengapa hal ini bisa terjadi? Karena kita berasumsi bahwa proses menghitung mundur akan berhenti jika mencapai angka 0 kan? Salah besar, karena contoh diatas akan terus berjalan menuju angka negatif.

Ada dua aspek yang harus dimiliki oleh fungsi rekursi. Sebuah fungsi rekursi harus mengetahui kapan harus berhenti dan kapan harus memanggil dirinya kembali. Fungsi countdown() diatas sudah memanggil dirinya sendiri berulang kali hingga tak terhingga. Namun masih kurang aspek kapan harus berhenti. Sekarang kita akan menambahkan kondisi kapan fungsi countdown() ini harus berhenti.

function countdown(i) {
  console.log(i);
  if (i <= 0) {
    return;
  } else {
    countdown(i - 1);
  }
}
countdown(10);

Dan jika kita eksekusi maka hasilnya akan sesuai keinginan kita.

$ node countdown.js
10
9
8
7
6
5
4
3
2
1
0

Contoh Penggunaan Rekursi

Fungsi Faktorial

Sekarang kita akan melihat salah satu contoh populer penggunaan rekursi, yaitu faktorial. Faktorial adalah sebuah fungsi permutasi dari bilangan bulat positif yang menggunakan notasi n!. Faktorial akan mengalikan bilangan dengan bilangan berikutnya hingga terakhir dikalikan angka 1. Faktorial mengikuti rumus berkikut.

n! = n * (n-1) * (n-2) * (n-3) * ... * 3 * 2 * 1

Contoh, jika kita ingin mendapatkan faktorial dari 5.

5! = 5 * 4 * 3 * 2 * 1 = 120

Mari kita buat sebuah algoritma faktorial dengan perulangan terlebih dahulu.

function computeFactorial(num) {
  let results = 1;

  for (let i = 2; i <= num; i++) {
    results = results * i;
  }

  return results;
}

console.log(computeFactorial(5));

Hasilnya tentu saja 120 apabila dijalankan. Dan sekarang mari kita membuat sebuah algoritma faktorial dengan menggunakan rekursi.

function calculateFactorial(num) {
  if (num === 1) {
    return 1;
  } else {
    return num * calculateFactorial(num - 1);
  }
}

console.log(calculateFactorial(5));

Mari kita review penggunaan rekuris dari fungsi faktorial diatas. Fungsi rekursi yang kita buat memiliki fungsi yang memanggil dirinya sendiri di baris ke-5 tepatnya dan juga fungsi juga mengetahui kapan harus berhenti, tepatnya ada di baris ke-3.

Sayangnya JavaScript sebagai bahasa belum memiliki fitur semacam pencocokan pola atau pattern matching layaknya bahasa pemrograman fungsional. Jika punya, kode diatas dapat kita buat menjadi lebih elegan 😎 seperti contoh dibawah ini dengan menggunakan bahasa pemrograman Elixir yang merupakan bahasa pemrograman fungsional.

defmodule Factorial do
  def calculate(1) do
    1
  end

  def calculate(num) when num > 1 do
    num * calculate(num - 1)
  end
end

IO.inspect(Factorial.calculate(5))

Fungsi Memutarbalikkan Array

Sebagai latihan, kita akan membuat sebuah fungsi yang menerima sebuah array dan membalikkan isinya dari akhir ke awal dengan rekursi tentu saja. Misalkan saya memiliki sebuah array [1, 2, 3, 4, 5, 6] dan akan menghasilkan [6, 5, 4, 3, 2, 1]. Untuk memudahkan proses pembuatan algoritma, saya akan menulis testing terlebih dahulu.

// reverse.test.js

const reverse = require("./reverse.js");

test("reverse array items, recursively", () => {
  expect(reverse([1, 2, 3, 4, 5, 6])).toEqual([6, 5, 4, 3, 2, 1]);
});

Dan sekarang kita akan menulis kode implementasinya seperti berikut.

// reverse.js

function reverse(arr, newArr = []) {
  newArr.push(arr[arr.length - newArr.length - 1]);
  if (newArr.length === arr.length) {
    return newArr;
  }
  return reverse(arr, newArr);
}

module.exports = reverse;

Kode implementasi diatas bukanlah cara satu-satunya untuk menyelesaikan masalah memutarbalikkan isi dari array. Ada banyak cara lainnya. Ini adalah cara yang kepikiran aja saat artikel ini ditulis 😃.

Kesimpulan

Rekursi adalah sebuah cara elegan untuk menyelesaikan beberapa masalah dalam pemrograman. Rekursi juga merupakan salah satu kemampuan fundamental yang diharapkan sudah dikuasai oleh teman-teman yang ingin terjun ke dunia pemrograman. Maka tak heran jika beberapa pertanyaan terkait rekursi akan muncul ketika kita melakukan coding interview di perusahaan teknologi.

Beberapa konsep struktur data pun seringkali menggunakan rekursi. Hal ini akan kita bahas lain waktu.

Selamat belajar!

Referensi

Notasi O Besar atau Big-O Notation

2020-03-21T00:00:00Z

Ketika kita memikirkan apakah barisan kode yang kita ciptakan sudah cukup "cepat" atau efisien dalam memecahkan masalah yang ingin kita pecahkan, maka kita butuh sebuah metodologi untuk menghitungnya. Salah satu alat bantu yang bisa kita gunakan adalah notasi O besar atau Big-O Notation.

Ini juga berarti kita ingin menghitung kompleksitas dari sebuah kode. Ada dua dimensi dalam menghitung kompleksitas kode. Pertama adalah kompleksitas ruang atau space complexity yang berkaitan dengan berapa banyak ruang yang digunakan seperti memori ataupun harddisk komputer. Kedua adalah kompleksitas waktu atau time complexity yang berkaitan berapa lama baris kode dijalankan.

Kenapa dibutuhkan sebuah metode untuk menghitung efisiensi kode? Karena kita tidak bisa hanya mengatakan bahwa kumpulan kode ini dapat dijalankan selama lima detik. Padahal sangat banyak faktor penentu lainnya seperti jumlah datanya, koneksi, latensi, jumlah memori, kecepatan prosesor dan masih banyak yang lainnya.

Karena itu kita butuh alat ukur untuk menghitung efisiensi kode secara relatif seperti notasi O besar ini.

Sekilas Tentang Notasi O Besar

Notasi O besar atau yang lazim disebut dengan Big-O Notation adalah sebuah cara atau metode untuk melakukan analisa terhadap sebuah algoritma pemrograman terhadap waktu eksekusi. Tentang seberapa efisien dan kompleksitas barisan kode dalam dimensi waktu.

Di dalam sebuah program komputer pada umumnya, kita sudah lazim dengan istilah masukan-proses-keluaran.

Notasi O besar merupakan skenario terburuk dari sebuah algoritma, dan biasanya terdapat notasi n yang merepresentasikan jumlah masukan. Berikut adalah diagram notasi O besar dengan masukan yang dimulai dari 0 hingga tak terhingga.

Dari diagram diatas dapat kita lihat beberapa notasi yang kerap muncul, yaitu: O₍₁₎, O_{(log n)}, O_(n), O_(n²) atau O_(nⁿ). Untuk membahasnya, mari kita berandai-andai membangun sebuah aplikasi travel. Dan kita diminta untuk membuat fitur baru yang menampilkan daftar kisaran harga dari hotel-hotel yang berada di area tertentu.

Untuk membuat fitur tersebut, sederhananya kita mencari harga terendah (min) dan harga tertinggi (max) dari daftar hotel. Tentunya semakin banyak datanya, akan semakin lama pula proses untuk mencari harga terendah dan tertinggi.

Dan berikut versi sederhana dari representasi data yang akan kita gunakan. Kita akan menggunakan JavaScript sebagai contoh. Dapat juga diaplikasikan ke bahasa pemrograman lain.

const hotels = [
{ price: 180, brand: "Hotel Tugu Lombok" },
{ price: 78, brand: "Sheraton Senggigi Beach Resort" },
...
...
{ price: 317, brand: "The Oberio" }
]

Pengulangan di Dalam Pengulangan: O_(N²)

Sekarang, bagaimana caranya mencari harga terendah dan tertinggi? Cara yang paling naif adalah dengan membandingkan harga satu-per-satu. Berikut potongan kode sebagai ilustrasi.

for (let i = 0; i < hotels.length; i++) {
  for (let j = 0; j < hotels.length; j++) {
    // kode untuk membandingkan satu harga dengan harga lainnya...
  }
}

Mari kita simulasikan ketika jumlah data semakin banyak.

n	3	5	10	100
Jumlah Operasi	9	25	100	10000

Lihat tabel diatas, antara 3 dan 5 cukup dekat perbedaannya hanya dua. Namun jumlah operasi yang dijalankan sangat signifikan bedanya. Semakin banyak datanya semakin signifikan jumlah operasi yang dijalankan.

Dengan kata lain kita membutuhkan n² dan untuk mencari harga terendah (min) dan harga tertinggi (max). Itulah sebabnya kita menyebutnya dengan notasi O_(n²). Algoritma seperti ini sangatlah lambat dan tidak optimal.

Pengulangan Dari Sebuah Set: O_(N)

Jika solusi pertama tidak optimal, adakah solusi lain? Tentu. Misalnya kita bisa mencari apakah harga adalah yang terendah atau tertinggi dalam satu kali pengulangan saja seperti ilustrasi kode berikut.

for (let i = 0; i < hotels.length; i++) {
  // cari harga paling kecil...
  // cari harga paling besar...
}

Ketika kita membutuhkan proses "pengulangan untuk setiap item", merupakan notasi O_(N).

Hanya Satu Operasi: O₍₁₎

Jika dengan asumsi bahwa data hotels sudah diurutkan berdasarkan harga terendah ke harga tertinggi, maka pencarian harga terendah dan tertinggi menjadi semakin efisien.

const hotels = [
  { price: 78, brand: "Sheraton Senggigi Beach Resort" },
  { price: 180, brand: "Hotel Tugu Lombok" },
  ...
  ...
  { price: 317, brand: "The Oberio" }
]

Untuk mendapatkan harga terendah, kita tinggal memanggil hotels[0].price. Sementara untuk harga tertinggi kita bisa menggunakan hotels[hotels.length-1].price. Selain lebih mudah, eksekusi baris kode juga menjadi lebih cepat dan efisien.

Ketika kode menjalankan sebuah operasi, misalkan: baris kode untuk mencari item barang teratas atau mendapatkan nilai sebuah array dengan indeks ke-5. Operasi seperti ini kita bisa sebut sebagai notasi O₍₁₎.

Tidak masalah sebanyak apapun isi dari sebuah array atau sebanyak apapun jumlah baris di basis data, untuk mengambil nilai array dengan mengakses indeks maka algoritma berjalan secara konstan atau constant time.

Kita sudah melihat beberapa contoh algoritma untuk menampilkan kisaran harga dari yang terendah hingga tertinggi dan hasilnya sebagai berikut.

Notasi O	Istilah Lain	Jumlah Operasi	Algoritma
O_(n²)	Quadratic	n²	Komparasi seluruh harga. Pengulangan dalam pengulangan
O_(n)	Linear	2n	Mencari harga terendah dan tertinggi. 1 kali pengulangan
O₍₁₎	Constant	2	Asumsi sudah diurut berdasarkan harga, tinggal mencari elemen pertama dan elemen terakhir

Dan secara umum berikut urutan dari notasi O besar diurutkan dari yang tercepat hingga yang terpelan.

<--- Super Cepat --------------------------------------- Super Lambat --------->

Nama	Constant	Logaritmic	Linear	Quadratic	Exponential
Notasi	O₍₁₎	O_{(log n)}	O_(n)	O_(n²)	O_(nⁿ)

Beberapa Contoh Notasi O Besar

Mari kita melihat contoh notasi O besar dari fungsi, ekspresi dan operasi JavaScript yang sederhana.

1. Array.push()

push() merupakan sebuah metode untuk menambahkan item baru kedalam sebuah array. Item yang ditambahkan akan berada diakhir array tersebut. Contoh penggunaan dapat dilihat sebagai berikut.

const animals = ["ants", "goats", "cows"];
animals.push("fish");
console.log(animals); // ['ants', 'goats', 'cows', 'fish']

Apakah notasi yang tepat untuk baris kode animals.push('fish');? Karena metode push() tidak peduli dengan seberapa banyak atau sedikit jumlah item yang ada, artinya operasi yang berjalan tetap sama, maka metode push() ini dapat diwakilkan dengan notasi O₍₁₎ atau konstan.

2. Array.pop()

pop() merupakan sebuah metode yang mengambil item terakhir dari array sehingga jumlah item yang ada di array akan berkurang satu. Berikut contoh penggunaannya.

const plants = ["broccoli", "cauliflower", "cabbage", "tomato"];
plants.pop();
console.log(plants); // ["broccoli", "cauliflower", "cabbage"]

Apakah notasi yang tepat untuk baris kode plants.pop();? Mirip seperti metode push() diatas, metode pop() juga tidak mempermasalahkan jumlah item yang ada, artinya operasi yang berjalan tetap sama, maka metode pop() ini juga dapat diwakilkan dengan notasi O₍₁₎ atau konstan.

3. Array.unshift()

unshift() adalah sebuah metode untuk menambahkan satu atau beberapa item ke bagian awal dari sebuah array. Contoh penggunaannya sebagai berikut.

const array1 = [1, 2, 3];
array1.unshift(4, 5);
console.log(array1); // [4, 5, 1, 2, 3]

Sekilas operasi unshift() ini terlihat seperti operasi yang konstan seperti push() dan pop() namun jika kita melakukan implementasi ulang metode ini, maka akan terlihat notasi yang sebenarnya. Berikut kira-kira implementasi dari unshift(), implementasi naif tentunya sekedar gambaran.

function unshift(arr, newItem) {
  let newArr = [];
  newArr[0] = newItem;
  for (let i = 1; i < arr.length + 1; i++) {
    newArr[i] = arr[i - 1];
  }
  return newArr;
}

Hal yang menambah kompleksitas adalah ketika kita harus mengubah indeks dari array karena kita akan menempatkan item baru di indeks ke-0. Secara otomatis indeks akan bergeser sebanyak satu langkah. Dan karena itu kita menggunakan pengulangan for hingga menjadikan operasi unshift() dapat diwakilkan oleh notasi linear atau O_(n). Kita harus menyadari apa yang dilakukan oleh sebuah fungsi, operasi ataupun pustaka sehingga kita dapat memprediksi kira-kira seberapa tingkat kompleksitasnya.

Menghitung Total Kompleksitas Kode

Setelah sebelumnya kita sudah menghitung kompleksitas satu baris kode, sekarang kita akan menghitung total keseluruhan untuk beberapa baris kode. Kita akan mulai dari contoh sederhana terlebih dahulu.

for (let i = 0; i < 10; i++) {
  // O(n)
  for (let j = 0; j < 10; j++) {
    // O(n)
    console.log(i); // O(1)
    console.log(j); // O(1)
  }
}

Kompleksitas potongan kode diatas dapat dihitung dengan mengalikan notasi-notasi setiap baris. Karena terdapat pengulangan bersarang, maka operasi yang digunakan adalah perkalian. Artinya hasil dari pengulangan bersarang tersebut adalah: O(n) * O(n) = O_(n²).

Jika perintah yang berada di level yang sama seperti:

console.log(i); // O(1)
console.log(j); // O(1)

Maka operasi yang akan kita lakukan adalah menjumlahkan. Sehingga untuk kedua perintah diatas hasilnya adalah O₍₁₎ + O₍₁₎ = O₍₂₎. Jika digabungkan hasilnya menjadi O_(n²) O₍₂₎. Namun biasanya untuk jenis kode diatas cukup dilambangkan dengan O_(n²) _ O₍₂₎ karena O₍₂₎ tidak signifikan perbedaannya.

Mari kita lihat contoh kode berikutnya.

for (let i = 0; i < 10; i++) {
  // O(n)
  console.log(i);
}

for (let j = 0; j < 10; j++) {
  // O(n)
  console.log(j);
}

Potongan kode deiatas dapat dilambangkan sebagai O_(n) ditambah dengan O_(n) sehingga menjadi O_(2n).

Kesimpulan

Sebagai kesimpulan, notasi O besar atau Big-O Notation merupakan metode untuk menghitung kompleksitas dari potongan kode yang kita buat. Sehingga dapat menumbuhkan kesadaran kita untuk mencari alternatif yang lebih baik sebelum data semakin besar dan berdampak kepada performa aplikasi yang kita buat.

Notasi O besar inipun tidak hanya semata berlaku di bagian kode yang kita tulis, namun di database pun berlaku. Jadi proses pengambilan data di database dengan sintaksis SQL yang dapat dianggap sebagai proses perulangan akan sangat tidak efektif jika di bagian algoritma kode kita kembali menggunakan perulangan. Maka proses tersebut akan menjadi O_(n²) karena akan terdapat perulangan didalam perulangan.

Begitu juga halnya jika kita mengambil data dengan tabel yang sudah diindeks. Secara otomatis notasinya akan berubah dari O_(n) menjadi O_{(log n)}.

Tanpa menggunakan indeks database melakukan yang disebut dengan "Sequential Scan". Beberapa yang lain menyebutnya dengan istilah "Full Table Scan" yang kurang-lebih melakukan perulangan setiap barisnya dan membandingkan dengan argumen query yang kita tentukan.

Dengan kata lain operasi sequential seperti contoh diatas dapat kita beri notasi O_(n). Seiring bertambahnya jumlah data, efisiensi akan semakin menurun.

Hal termudah untuk mengangkat performa untuk kasus ini adalah dengan menambahkan indeks di tabel terkait dan kita dapat melihat perbedaan yang cukup signifikan terutama ketika data sudah semakin banyak.

Sehingga operasi diatas berubah notasinya menjadi O_(log
n).

Hal yang menarik lainnya, Redis sebuah in-memory database menyertakan notasi kompleksitas waktu di setiap perintah yang ada di dokumentasinya. Contohnya dapat dilihat seperti perintah append, del, lpush, dan masih banyak lagi yang lainnya.

Sebagai penutup, berikut daftar kompleksitas kode dari operasi-operasi yang umum kita jumpai.

Kompleksitas	Operasi
O₍₁₎	Menjalankan sebuah perintah
O₍₁₎	Mendapatkan sebuah item dari array, objek atau variabel
O_{(log n)}	Pengulangan yang berkurang setengahnya setiap iterasi
O_(n²)	Pengulangan dalam pengulangan
O_(n³)	Pengulangan dalam pengulangan dalam pengulangan

Referensi

Ekosistem JavaScript Di Indonesia

2020-02-03T00:00:00Z

This article also available in Engilish .

Artikel ini akan membahas tentang bagaimana perkembangan ekosistem JavaScript di Indonesia. Namun sebelum kita masuk ke pembahasan utama, mari kita bahas dulu tentang definisi ekosistem di konteks artikel ini. Topik ini merupakan materi yang saya bawakan ketika mengisi keynote di JSDay 2019 .

Riza is delivering keynote at #jsdayid. First JavaScript conference in Indonesia. @rizafahmi22 pic.twitter.com/yxXKm1cNxM
— Jecelyn Yeen (@JecelynYeen) September 28, 2019

Tentang Ekosistem JavaScript

“An ecosystem is a community of living organisms and their interactions with their abiotic (non-living) environment.” — Ecology of ecosystems

Yang dimaksud ekosistem disini diantaranya adalah komunitas, grup dan diskusi sekitar sebuah tools, alat bantu, framework dan JavaScript secara umum. Dalam konteks ini kita akan membahas empat elemen berikut:

Sumber belajar seperti artikel, buku, video tutorial dan lain sebagainya
Kelengkapan alat bantu seperti pustaka, boilerplate, contoh aplikasi dan lain-lain
Dukungan komunitas di sekitar alat bantu dan juga lingkungan sekitar
Pembahasan akan fokus di frontend karena JavaScript di sisi backend cukup straightforward.

Sudut Pandang Pembahasan

Artikel ini akan membagi pembahasan kepada tiga sudut pandang. Sudut pandang pertama ditujukan untuk yang baru mulai belajar, kita sebut saja pemula. Kita akan mencoba menjawab beberapa pertanyaan yang sering muncul di benak pemula ketika ingin belajar JavaScript. Kemudian kita juga akan membahas JavaScript dari sudut pandang teman-teman yang sudah pernah membuat aplikasi dan ingin belajar hal baru terutama teknologi web. Kita sebut saja sebagai profesional. Sudut pandang terakhir diperuntukkan kepada para pengambil keputusan seperti Vice President, Chief Technology Officer, Team Lead dan lain sebagainya. Kita menyebutnya sebagai sudut pandang master.

Sudut Pandang Pemula

Sudut pandang ini diperuntukkan kepada teman-teman fresh graduate, developer profesional dengan pengalaman setahun atau kurang, dan yang 'terjebak'. Terjebak sudah terlebih dahulu masuk ke sebuah perusahaan yang ternyata sudah menggunakan pustaka atau framework tertentu. Kita akan menjawab pertanyaan-pertanyaan yang seringkali muncul di benak seorang pemula.

Mulai Dari Mana?

Biasanya pertanyaan yang pertama kali muncul kalau mau mulai belajar, mulainya dari mana? Dan berikut adalah beberapa pertanyaan terkait memulai belajar pustaka atau framework JavaScript. Namun sebelum itu pastikan teman-teman sudah menguasai JavaScript itu sendiri beserta HTML dan sedikit CSS. Jika merasa belum terlalu menguasai, teman-teman bisa mulai belajar dari hal-hal tersebut.

Berikutnya kita akan membahas beberapa pertanyaan berikut:

Sebaiknya belajar framework apa ya?
Lingkungan sekitar banyak menggunakan yang mana? Hal ini cukup penting terutama buat yang baru belajar
Kemudian kita juga akan melihat seberapa banyak artikel, buku yang tersedia untuk mendukung proses belajar
Dan tentunya kita juga akan mengeksplorasi seberapa banyak kursus video online yang ada

Belajar Framework Apa?

Framework JavaScript banyak sekali pilihannya. Terkadang untuk yang mulai belajar, pemilihan framework menjadi sesuatu yang cukup sulit. Ada yang bilang framework ini bagus. Opini lain mengatakan framework lain lebih cepat dan lain sebagainya. Untuk itu saya memilihkan enam opsi yang dapat dipilih. Keenam framework ini memiliki karakteristik yang cukup berbeda yang menurut saya mewakili framework lain yang tersedia.

Untuk framework dengan fitur lengkap diwakili oleh Angular dan Ember, yang cukup lengkap ada React dan Vue, pustaka untuk memanipulasi DOM dan cukup terkenal di masanya, jQuery. Dan terakhir ada framework yang melakukan kompilasi ke JavaScript vanilla yang mungkin akan menjadi tren kedepan yaitu Svelte.

Salfok sama slide presentasi dari om @rizafahmi22 😹 #JSDayID pic.twitter.com/W5XnrDEits
— FarahLuthfiOktarina (@FarahOktarina) September 28, 2019

Dari keenam framework dan pustaka diatas, mari kita lihat bagaimana ekosistemnya dengan melihat komunitas disekitar framework dan pustaka tersebut. Peran komunitas ini penting untuk mendukung kita belajar terutama untuk mempercepat proses belajar. Berikut adalah gambaran komunitas JavaScript secara umum di berbagai kota yang datanya berhasil saya dapatkan. Masih banyak kota-kota lain yang memiliki komunitas JavaScript sebenarnya.

Seperti yang dapat dilihat, komunitas MedanJS memiliki total 334 anggota meskipun saat ini sedang vakum. BaliJS ada 474 anggota, SurabayaJS ada 510, JogjaJS 545. Sedangkan jumlah anggota terbanyak masih berada di kota Bandung dengan 2.500 anggota dan Jakarta yang nyaris mencapai 4.000 anggota.

Dan berikut adalah komunitas untuk beberapa framework yang berhasil saya dapatkan datanya. Saya berhasil mendapatkan tiga komunitas framework, yaitu: Vue, Angular dan juga React.

Ternyata untuk komunitas per framework masih didominasi oleh React dan Angular. Sedangkan komunitas Vue agak jauh perbedaannya dibandingkan React dan Angular.

Data berikutnya yang akan kita lihat adalah grup facebook dari tiap-tiap framework atau pustaka yang berhasil saya dapatkan. Semua grup ini spesifik yang berbahasa Indonesia saja. Saya juga menambahkan informasi jumlah anggota, umur dari grup dan juga percakapan yang terjadi per tahunnya.

Hasilnya cukup menarik. Anggota yang paling banyak tentu saja grup jQuery, karena memang termasuk pustaka yang paling lama senior. jQuery sendiri sudah menemani developer JavaScript sejak tahun 2006 sehingga tidak heran jumlah anggotanya yang paling banyak.

Sedangkan grup yang paling aktif bukanlah jQuery ternyata. Grup React, Angular dan Vue tercatat memiliki anggota yang paling aktif.

Sedangkan untuk grup Svelte dan Ember memiliki anggota yang paling sedikit dibandingkan framework atau pustaka lainnya. Svelte tentu saja karena merupakan framework yang tergolong baru. Sedangkan Ember anggotanya masih sedikit, meskipun umur grupnya sudah 4 tahun.

Satu data lagi terkait komunitas, yaitu grup di platform Telegram yang lumayan menarik terutama untuk yang mulai serius belajar pemrograman.

Di Telegram, saya juga baru berhasil mendapatkan tiga komunitas yaitu Angular, Vue dan React. Data ini didapat dengan bantuan carikbot . Saya berhasil mendapatkan informasi jumlah anggota dan percakapan yang terjadi sepanjang agustus sampai pertengahan september 2019.

Yang paling aktif dan paling banyak anggotanya, React disusul Vue dan disusul Angular.

Literatur atau Buku Tersedia

Dan dibagian ini kita akan membahas tentang ketersediaan literatur, dalam hal ini adalah buku. Pertanyaannya apakah buku masih relevan sebagai sumber belajar? Terutama buku berbahasa Indonesia. Untuk saya pribadi sih jawabannya masih relevan. Apalagi buat teman-teman mahasiswa yang ingin belajar dan menggunakan framework atau pustaka tertentu di tugas akhirnya. Kan keren kalau ada buku yang bisa dijadikan referensi belajar dan bisa dikutip juga untuk skripsi atau tugas akhir.

Mungkin sebagian besar dari kita sudah bisa menebak hasilnya. Cukup menyedihkan karena jumlah buku yang tersedia masih sangat sedikit. Ini khusus buku berbahasa Indonesia. Untuk mendapatkan data ini saya melakukan pencarian dari gramedia online dan juga google. Untuk buku fisik yang tersedia, jQuery merupakan pustaka yang paling banyak sumber bacaannya. Sedangkan framework lainnya terhitung masih sangat sedikit.

Tidak puas dengan buku fisik, saya juga melakukan pencarian buku elektronik berbahasa Indonesia yang sebenarnya cukup menarik. Untuk format buku elektronik, Angular ada dua buku, namun masih membahas tentang Angular versi 1 yang cukup jauh berbeda dengan Angular versi terbaru saat ini. Buku elektronik tentang Vue dan React juga hanya tersedia sedikit.

@rizafahmi22 kick off #JSDayID with a talk about JavaScript ecosystem. There's still very few technical book in Bahasa Indonesia. But that means we still have lots of opportunity 😉 pic.twitter.com/JCU23Surj2
— Kiki ✈️ (@kelimuttu) September 28, 2019

Kursus Video Online

Berikutnya kita akan bahas tentang kursus video online. Disini saya batasi khusus untuk kursus video online yang cukup lengkap dan ada learning path. Bukan sembarang video tutorial berbahasa Indonesia yang ada di Youtube.

Ada beberapa platform kursus video online yang membahas tentang pemrograman, lebih spesifiknya tentang JavaScript dan berbagai frameworknya. Ada malescast, dumbways, idrails, sekolah koding dan juga kode.id.

Seperti yang sama-sama bisa kita lihat, yang paling produktif menghasilkan kursus video online terkait JavaScript adalah sekolah koding karena memang sudah berdiri sejak lama, 2016. Dumbways lebih banyak menghasilkan materi seputar framework React. Sedangkan malescast lebih fokus menghasilkan materi tentang vue. Sedangkan idrails memiliki materi seputar vue dan react.

Selanjutnya kita akan melihat jumlah viewer dikelompokkan berdasarkan pustaka dan framework.

Ternyata jQuery merajai jumlah view dari kursus video online dengan angka nyaris seratus ribu. Kontribusi terbesar dari sekolah koding yang memang sudah memproduksi video course dari 2016. Diikuti vue dengan angka sekitar tuju puluh ribuan dan disusul react dengan lima puluh ribuan.

Sudut Pandang Profesional

Kita masuk ke sudut pandang yang kedua. Kita akan melihat dari sudut pandang seseorang yang memiliki pengalaman lebih banyak dibandingkan sudut pandang pertama. Yang masuk kategori ini adalah teman-teman yang setidaknya sudah pernah merasakan bagaimana mengembangkan sebuah aplikasi, aplikasi web misalnya. Di sudut pandang ini, kita tidak lagi bertanya bagaimana cara memulai, tapi lebih ke bagaimana cara belajar yang efektif. Kita akan menjawab beberapa pertanyaan terkait bagaimana cara belajar sesuatu. Cara belajar merupakan topik yang subjektif. Masing-masing individu memiliki cara belajar yang berbeda-beda. Jadi kita akan mencoba menjawab beberapa pertanyaan umum tentang cara belajar, seperti berikut:

Buat yang suka dengan cara belajar melihat contoh, kita akan melihat berapa banyak contoh aplikasi yang tersedia untuk masing-masing pustaka atau framework.
Kemudian kita akan melihat ketersediaan tutorial berbahasa Indonesia untuk masing-masing kandidat pustaka dan juga framework.
Kemudian kita akan melihat beberapa alat bantu dan boilerplate yang bisa kita gunakan untuk membuat project baru.
Terakhir kita akan melihat bagaimana cara penggunaan masing-masing pustaka dan framework. Kita akan membuat aplikasi hello world satu per satu.

Contoh Aplikasi

Sekarang kita akan melihat berapa banyak contoh aplikasi yang bisa kita lihat sebagai referensi dan panduan. Saya mencoba melakukan pencarian di berbagai servis seperti glitch.com, codepen namun tidak ada informasi pasti jumlah contoh aplikasi untuk keenam pustaka dan framework tadi.

sebuah slide yang sangat ciamik dari mas @rizafahmi22 ntah berapa lama buatnya 😅😅 pic.twitter.com/kAbOiUmMdI
— Adib Firman (@dibfirman) September 28, 2019

Satu-satunya yang bisa mendapatkan total jumlah aplikasi per framework atau pustaka adalah dari codesandbox. Dan disini sangat jauh perbedaan antar framework. React mendominasi dengan nyaris ada 2 juta contoh aplikasi. Sangat jau dibandingkan vue yang hanya dua ratus ribuan.

Data dari codesandbox ini agak bias, karena codesandbox awalnya hanya mendukung React cukup lama. Baru kemudian setelah beberapa lama mendukung framework lain. Itulah sebabnya React sangat mendominasi.

Tutorial Berbahasa Indonesia

Untuk mendapatkan jumlah tutorial berbahasa Indonesia, saya melakukan pencarian via google dengan kata kunci “nama framework tutorial indonesia” dan buka tautannya satu per satu sampai halaman ketiga dan memastikan bahwa tutorial tersebut benar-benar valid dikategorikan sebagai tutorial dan berbahasa Indonesia. Dan berikut hasilnya.

Disini Angular, jQuery, React dan Vue jumlahnya nyaris sama berkisar antara 10 hingga 15. Sedangkan Svelte dan Ember agak susah dicari tutorial berbahasa Indonesia. Sebenarnya secara umum jumlah artikel berbahasa Indonesia ini jumlahnya masih terbilang sedikit. Sama halnya dengan literatur dalam format buku. Ini sebenarnya peluang buat teman-teman yang ingin membuat konten spesifik berbahasa Indonesia.

Alat Bantu dan Boilerplate

Berikutnya kita akan membahas tentang alat bantu dan boilerplate yang tersedia. Framework, apalagi pustaka umumnya dikelilingi oleh berbagai alat bantu dan juga boilerplate yang tujuannya adalah memudahkan kita untuk menggunakan framework atau pustaka tersebut.

Kita akan melihat beberapa alatbantu seperti ketersediaan di Content Delivery Network atau CDN. Adanya CDN memudahkan jika teman-teman tidak ingin menggunakan command line interface atau CLI. Jadi semudah metambahkan link script via CDN.

Tentu kita juga akan melihat dukungan berupa CLI, apakah sudah tersedia fitur seperti routing, state, alat bantu pengembangan atau devtools dan juga CLI untuk generator yang dapat meningkatkan produktifitas kita sebagai developer.

Seperti bagan diatas terlihat bedanya pustaka dengan framework. Angular dan Ember secara fitur sangat lengkap. Sementara Svelte, vue dan React cukup lengkap, sedangkan jQuery jauh dari lengkap karena memang jQuery pada dasarnya hanyalah pustaka untuk manipulasi DOM.

Yang menarik dari bagan diatas ada satu pustaka atau framework yang tidak mendukung CDN yaitu Svelte. Hal ini dikarenakan Svelte adalah framework yang melakukan kompilasi JavaScript sehingga menjadi Vanilla JavaScript.

Mulai Menggunakan

Sekarang kita akan melihat bagaimana cara menggunakan masing-masing framework dan pustaka dengan cara yang paling mudah diikuti berdasarkan langkah-langkah yang disediakan oleh dokumentasi resmi. Ada beberapa framework yang menyarankan menggunakan CLI, dan ada beberapa yang lain tidak.

Angular

Untuk Angular, pertama kita instal alat bantu CLI dengan npm. Kemudian CLI kita gunakan untuk men-generate proyek Angular baru. Serve untuk kemudian dibuka di browser.

$ npm install -g @angular/cli
$ ng new jsday
$ cd jsday
$ ng serve --open

Kemudian kita akan membuat hello world, dengan komponen dengan membuat file baru jsday.component.ts.

// src/app/jsday.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "jsday",
  template: "<h2>JSDay 2019!!!</h2>",
})
export class JSDayComponent {}

Pertama kita buat file baru di src/app/jsday.component.ts. Nah disini angular menyarankan kita menggunakan TypeScript sedari awal. Buat yang belum tahu, TypeScript adalah subset dari JavaScript yang menambahkan salah satunya type system kedalam JavaScript.

Selanjutnya kita import component dari angular core. Lalu kita gunakan decorator component dengan nama selector atau tag yaitu jsday, dengan isinya header level 2. Jangan lupa kemudian juga di eksport komponen-nya.

// src/app/app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { JSDayComponent } from "./jsday.component";

@NgModule({
  declarations: [AppComponent, JSDayComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Kemudian kita akan menggunakan komponen jsday di file utama app.module.ts. Import dan deklarasikan di decorator NgModule. Langkah terakhir, tinggal menggunakan komponen jsday di app.component.html misalnya.

<!-- src/app/app.component.html -->

<jsday></jsday>

Ember

Langkah-langkahnya hampir mirip dengan Angular, pertama kita lakukan instalasi alat bantu CLI. Kemudian kita Ggunakan CLI untuk men-generate proyek baru. Masuk ke direktor dan jalankan ember serve.

$ npm install -g ember-cli
$ ember new jsday
$ cd jsday
$ ember serve

Kita mulai dengan membuat komponen baru di file baru di app/components/jsday.js. Import component dari pustaka ember/component, dan kemudian di extend untuk membuat komponen baru.

// app/components/jsday.js

import Component from "@ember/component";

export default Component.extend({
  componentMessage: "JSDay 2019!!!",
});

Dan kita buat sebuah file template dengan format handlebars dan menampilkan message didalam tag header level 2.

<!-- app/templates/components/jsday.hbs -->

<h2></h2>

Dan sekarang kita dapat menggunakan komponen jsday di template seperti ini.

<!-- app/templates/application.hbs -->

jQuery

Untuk jQuery cukup straigthforward penggunaannya, buat sebuah folder dan sebuah file.

$ mkdir jsday
$ cd jsday

Kemudian tambahkan CDN jQuery dan dapat segera digunakan.

<!-- index.html -->

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JSDay 2019!!</title>
    <script
      type="text/javascript"
      src="https://code.jquery.com/jquery-3.4.1.min.js"
    ></script>
  </head>
  <body>
    <div id="app"></div>
    <script src="app.js"></script>
  </body>
</html>

Di file dengan ekstensi JavaScript, app.js kita tambahkan header level 2 dengan pesan jsday 2019 didalamnya.

// app.js

$(document).ready(function () {
  $("#app").html("<h2>JSDay 2019!!!</h2>");
});

React

Bagaimana dengan React? Karena di tutorial resminya menggunakan CDN, maka kita akan menggunakan CDN. Langkah-langkahnya mirip dengan jQuery sebenarnya. Dimulai dengan membuat folder dan file html.

$ mkdir jsday
$ cd jsday

Gunakan CDN untuk pustaka react dan react-dom didalam file index.html. Kodenya sendiri kita akan tulis di file terpisah app.js.

<!-- index.html -->

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JSDay 2019</title>
    <script
      src="https://unpkg.com/react@16/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
      crossorigin
    ></script>
  </head>
  <body>
    <div id="root"></div>
    <script src="app.js"></script>
  </body>
</html>

Di app.js kita juga tidak menggunakan babel ataupun jsx. Komponen menggunakan sintaksis class, me-render sebuah komponen header leel 2 dengan teks JSDay 2019. Lalu kemudian kita render dengan ReactDOM dan di cemplungin ke div dengan id root.

// app.js

"use strict";

class App extends React.Component {
  render() {
    return React.createElement("h2", {}, "JSDay 2019!!!");
  }
}
ReactDOM.render(React.createElement(App), document.getElementById("root"));

Svelte

Sekarang kita masuk ke framework berikutnya, Svelte. Svelte memang tidak memiliki CLI bawaan seperti halnya Angular atau Ember. Tapi di dokumentasinya kita disarankan menggunakan tools yang namanya degit. Sederhananya degit ini melakukan clone template yang sudah disiapkan di git atau github untuk proyek svelte ataupun proyek lainnya secara umum. Setelah menjalankan degit dengan npx kita jalankan npm install dan jalankan dengan npm run dev.

$ npx degit sveltejs/template jsday
$ cd jsday
$ npm install
$ npm run dev

Selanjutnya kita buat komponen baru dengan header level 2 dengan nama jsday.svelte.

<!-- src/JSDay.svelte -->

<h2>JSDay 2019!!!</h2>

Dan kita tinggal gunakan komponen JSDay. Jangan lupa diimport agar dapat digunakan di komponen atau file lain.

<!-- src/App.svelte -->

<script>
  import JSDay from "./JSDay.svelte";
</script>

<style></style>

<div>
  <JSDay />
</div>

Vue

Kita masuk ke framework terakhir yaitu Vue. Vue juga di awal tutorialnya menyarankan menggunakan CDN sama halnya seperti React dan jQuery. Jadi tinggal buat sebuah folder dan buat sebuah file html.

$ mkdir jsday
$ cd jsday

Kemudian load vue dari CDN. Dan tulis kode vue di bagian script dibawah atau di file terpisah.

<!-- index.html -->

<!doctype html>
<html>
  <head>
    <title>JSDay 2019</title>
    <script src="https://unpkg.com/vue"></script>
  </head>
  <body>
    <div id="app">
      <h2></h2>
    </div>

    <script>
      var app = new Vue({
        el: "#app",
        data: {
          message: "JSDay 2019!!!",
        },
      });
    </script>
  </body>
</html>

Dukungan Komunitas

Yang tidak kalah penting adalah dukungan komunitas di sekitar kita. Ketika kita belajar kita butuh dukungan komunitas. Kita butuh teman belajar. Proses belajar tentu akan lebih cepat.

Tadi di bagian pertama kita sudah membahas tentang meetup, grup di facebook dan grup telegram. Nah sekarang kita akan fokus gimana kalau kita kesulitan dan butuh mencari solusi jika menemukan masalah. Sayangnya belum ada forum tanya jawab **di Indonesia atau yang berbahasa Indonesia. Sehingga data diambil dari stackoverflow.

Disini jquery sangat jauh mengungguli jumlah pertanyaan karena memang yang paling senior, otomatis pertanyaan juga yang paling banyak. Kemudian diikuti Angular, React, Vue, Ember dan terakhir Svelte.

Jika kita kelompokkan, ada empat kelompok. Kelompok pertama adalah jQuery yang sangat jauh berbeda. Kelompok kedua ada React dan Angular. Vue dan ember ada di kelompok ketiga. Svelte menjadi kelompok terakhir.

Pertanyaan terkait Angular dan React banyak sekali, sementara dibandingkan kelompok kedua, vue dan Ember yang bisa dibilang hanya 1/4 nya saja. Ember dan Angular bisa diasumsikan umurnya mendekati jika dihitung dari angular versi pertama. React dan Vue lahirnya juga hampir bersamaan.

Data berikutnya, sedikit seru-seruan, mari kita bandingkan pengikut masing-masing akun resmi tiap framework dan pustaka di twitter.

React dan Angular cukup jauh meninggalkan teman-teman yang lainnya dari sisi pengikut atau follower yang mencapai tiga ratus ribuan. Vue dan Ember juga cukup jauh sekitar seratus ribuan. Yang menarik jQuery pengikutnya paling sedikit. Bahkan sudah dilewati Svelte yang umurnya paling muda.

Statistik berikutnya yang akan kita lihat adalah dari repositori GitHub.

Nah kalo di repositori GitHub, Vue cukup merajai. Disini seperti ada tiga kelompok:

Vue dan React,
Angular dan jQuery,
Svelte dan Ember

Untuk jumlah watches React merupakan pustaka yang paling banyak jumlah 'pengintainya'.

Masih dari repositori GitHub, beberapa statistik menarik lainnya, yaitu jumlah commit, jumlah kontributor dan umurnya di GitHub.

Beberapa hal menarik disini pertama tentang Svelte. Dengan umur yang baru dua tahun bisa mengalahkan vue dari sisi jumlah commit. Padahal jumlah kontributornya tidak terlalu jauh berbeda. Apakah artinya kontributorSsvelte menerapkan strategi commit often?

Disini juga dapat dilihat framework seperti Angular, React, dan Ember memiliki kontributor yang sangat banyak dibandingkan framework atau pustaka lainnya.

Pustaka Pendukung

Cepat atau lambat sebuah pustaka dan framework membutuhkan bantuan tambahan dalam bentuk pustaka atau library, terutama untuk framework yang minimalis. Framework seperti Svelte atau pustaka jquery apalagi, pasti akan butuh pustaka tambahan. Nah disini saya melakukan pencarian dari npm dengan tag angular, ember, jquery, react, svlete dan vue.

Terlihat React melesat sendirian dengan jumlah pustaka terbanyak, nyaris lima puluh ribu. Disini terlihat jelas perbedaannya, React dipasarkan sebagai pustaka bukan framework, makanya banyak pustaka tambahan bermunculan. Bahkan beberapa pustaka de facto seperti redux, react router, create react app muncul sebagai pustaka yang dikembangkan oleh komunitas. Meskipun React dikembangkan oleh Facebook.

Kemudian framework seperti Angular dan Ember yang memang tidak terlalu membutuhkan pustaka tambahan karena memang secara fitur sudah cukup lengkap.

Sedangkan Svelte jumlahnya sedikit, wajar karena masih baru. Namun ada yang menarik, meskipun bentuknya pustaka, jQuery pustaka tambahan sedikit sekali ada di npm. Mungkin karena diawal, jQuery hidupnya bukan di npm. jQuery lahir lebih dulu sebelum ada npm.

Performa

Nah sekarang kita masuk ke pembahasan yang cukup menarik dibahas, yaitu performa. Salah satu konsiderasi developer senior adalah seberapa cepat sebuah framework memanjakan penggunanya dalam hal kecepatan.

Disini saya tidak menggunakan metode benchmark yang kadang ‘menyesatkan’ dan subjektif, namun saya akan menggunakan metode yang sebenarnya cukup subjektif, yaitu Chrome UX Report. Chrome UX Report adalah data yang secara anonymous didapat dari pengguna browser chrome. Jadi disini pengguna browser lain tidak dihitung. Data diambil dari 2014 hingga awal september 2019.

Dari Chrome UX Report saya bisa mendapatkan informasi jumlah pengguna yang mengakses website. Dari situ kemudian dipilah lagi website yang diakses menggunakan framework apa.

Hasilnya, ternyata penggunaan pustaka dan framework dunia masih dikuasai secara dominan oleh jQuery. Hanya 10 persen sisanya dibagi-bagi ke framework dan pustaka lainnya.

Untuk performanya sendiri. Kita akan lihat dua metrik: first contentful paint dan first input delay. First Contentful Paint atau FCP adalah saat pertama kali konten atau isi dari sebuah web atau dicetak ke browser. FCP bergantung pada performa server rendered, dan seberapa efektif sebuah framework melakukan proses rendering.

Sedangkan First Input Delay atau FID adalah seberapa lama waktu yang dibutuhkan agar pengguna dapat berinteraksi dengan aplikasi web kita, seperti scroll, klik, ketik dan lain sebagainya. FID biasanya bergantung ke ukuran aplikasi atau ukuran pustaka atau framework itu sendiri.

Dan secara umum yang memiliki performa tercepat adalah Ember. Svelte sendiri memiliki kemampuan FID tercepat karena memang JavaScript yang dihasilkan termasuk yang paling kecil.

Lowongan Pekerjaan

Setelah belajar framework baru, dan sudah mendapatkan gambaran performa untuk masing-masing pustaka atau framework, sekarang kita akan mencoba menjawab kira-kira dari daftar framework ini prospek nya gimana saat ini dan kedepannya.

Pertama kita lihat jumlah lowongan pekerjaan tersedia di dunia. Disini saya melakukan pencarian data di stackoverflow jobs dan upwork untuk pekerjaan lepas atau freelance dan juga remote working. Sengaja saya tampilkan data seluruh dunia supaya bisa dikomparasi juga dengan perkembangan di Indonesia. Untuk stackoverflow jobs sendiri, talenta jQuery terlihat sudah mulai menurun. Lowongan React paling banyak, diikuti Angular, jQuery, Vue dan Ember.

Dan untuk data dari upwork, jQuery masih merajai. Jauh sekali dibandingkan React, Angular, Vue, Ember dan diikuti dengan Svelte.

Bagaimana dengan lowongan pekerjaan di Indonesia? Disini saya menyajikan data dari dua sumber: LinkedIn dan juga Urbanhire.

Dan ternyata masih banyak sekali yang mencari developer yang bisa jQuery, nyaris mencapai tiga ribu lowongan. Sementara lowongan rReact dan yang lainnya berkisar di enam ratus atau lebih rendah. Data dari Linkedin ini sedikit bias karena saya melakukan proses pencarian di LinkedIn pribadi. Kemungkinan besar di lingkaran saya masih banyak yang membuka lowongan yang membutuhkan kemampuan jQuery.

Saya juga melakukan pencarian data lowongan di Urbanhire yang mungkin lebih objektif dan tidak bias. Di platform pencarian lowongan pekerjaan di Indonesia ini, ternyata jumlah lowongan React lebih banyak dari jQuery dan yang lainnya meski tidak terlalu signifikan perbedaannya. Cukup berimbang.

Sudut Pandang Master

Dan di bagian ini kita akan menjawab pertanyaan-pertanyaan dari golongan yang termasuk kedalam pengambil keputusan seperti team lead, arsitek, Vice President of Engineering hingga Chief Technology Officer atau CTO. Dan kita akan melihat beberapa hal seperti: jumlah talenta tersedia dan tingkat maturity dari sebuah framework atau pustaka.

Talenta Tersedia

Disini saya kembali menggunakan fitur pencarian di LinkedIn untuk mencari banyaknya talenta untuk setiap framework dan pustaka.

Dan ternyata yang menguasai jQuery masih sangat banyak baik di Indonesia ataupun di dunia. Dan jaraknya masih cukup jauh antara jQuery dengan framework lainnya.

Dan berikut data yang ada di database geekhunter . Seperti yang bisa dilihat, jQuery masih merupakan pustaka yang paling banyak dikuasai.

Tingkat Maturity

Dibagian ini kita akan membahas tentang kedewasaan framework atau maturity. Disini kita akan melihat hal-hal seperti release cycle, jumlah pengelola, issues, pull request dan juga testing.

Disini data saya dapatkan dari GitHub dan terlihat ada beberapa insight menarik. Pertama yang menarik adalah Svelte. Framework termuda disini rilis per tahunnya paling tinggi. Wajar karena masih baru, jadi jangan kaget kalau masih sering terjadi perubahan API atau belum stabil. Bandingkan dengan jQuery yang secara umur adalah yang paling tua. Rilis per tahunnya paling kecil karena sudah berumur 10 tahun.

Repositori yang paling produktif adalah Angular dalam hal jumlah commit. Nyaris empat ribu commit per tahun. Dan Angular memiliki release cycle cukup tinggi dibandingkan framework lain, mungkin karena umurnya tergolong lebih muda. Disini saya hanya menggunakan repositori Angular versi kedua atau yang lebih baru, bukan Angular versi pertama. Sedangkan Ember adalah satu-satunya framework yang menggunakan metode release cycle secara konsisten. Menghasilkan rilis baru setiap 6 minggu.

React sendiri meskipun disini umurnya 6 tahun namun React sudah dikembangkan dan digunakan jauh sebelum itu. Angka 6 tahun disini adalah umur saat kodenya menjadi sumber terbuka atau open source.

Berikutnya kita melihat jumlah issue di GitHub. Issue github ini merupakan salah satu metrik untuk menilai apakah sebuah proyek open source itu sehat atau tidak.

Disini Angular adalah pemilik issues terbanyak baik yang sudah selesai atau closed maupun yang masih belum diselesaikan atau open. Perbedaannya cukup signifikan. Hal ini mungkin disebabkan karena Angular punya banyak fitur yang harus dikembangkan dan dikelola. Namun Ember dengan fitur yang cukup lengkap juga jumlah issue-nya tidak sebanyak Angular, bahkan lebih sedikit jika dibandingkan React dan Vue.

Svelte adalah satu-satunya framework yangjumlah open issue-nya lebih banyak daripada yang closed. Mungkin karena mereka sedang heavy development.

Berikutnya kita melihat seberapa banyak pull request atau PR yang terjadi.

jQuery sudah tidak terlalu banyak pull request yang open karena mungkin sudah cukup mature atau sudah tidak terlalu banyak fitur yang dikembangkan. Atau juga sudah tidak memiliki banyak bugs. Sedangkan kontributor Angular ternyata adalah yang paling produktif mengirimkan pull request sementara Vue memiliki jumlah pull request yang paling sedikit.

Selanjutnya kita akan melihat sebeapa banyak testing yang dilakukan oleh masing-masing framework dibandingkan dengan jumlah baris kode.

Angular memiliki baris kode yang paling banyak dengan jumlah test case juga yang paling banyak. Yang agak mengejutkan disini adalah Ember ternyata jumlah baris kodenya hampir sama dengan Vue tapi dengan jumlah test case yang lebih banyak bahkan lebih banyak dibandingkan React. Svelte juga jumlah test case-nya cukup banyak jika dibandingkan dengan jumlah baris kodenya, secara rasio.

Maksud saya menampilkan data ini bukan untuk adu siapa yang paling banyak jumlah test, tapi lebih melihat gambaran framework mana yang peduli dengan testing. Dan data ini bisa jadi bereleasi dengan seberapa mudah aplikasi kita di test nantinya.

Kesimpulan

Masa-masa saat ini adalah masa yang sangat menyenangkan dan exciting terutama untuk developer JavaScript. Ekosistem pendukung semakin matang, pilihan untuk belajar sangat banyak, begitu juga media dan pilihan cara belajar. Bisa belajar dari artikel, buku hingga format video. Ada pustaka atau framework yang sangat developer friendly, dengan beberapa langkah kita sudah bisa membuat aplikasi. Ada juga yang sangat user friendly dalam artian mungkin untuk development butuh waktu yang agak panjang dan tidak semudah yang lain, namun hasil akhirnya sangat memanjakan. Aplikasinya cepat dan ringan tidak memberatkan pengguna.

Teman-teman bisa jadikan statistik-statistik ini sebagai bahan untuk learning path. Baru belajar? Mulai dari sudut pandang pertama: junior. Buat yang ingin belajar hal baru bisa dilihat dari sudut pandang kedua: senior. Mau bikin produk atau membangun tim? Konsiderasi hal-hal yang kita bahas di sudut pandang ketiga.

Apapun piilihan teman-teman, yang penting semua itu bisa membantu teman-teman dalam berkarya, baik karya yang sederhana hingga karya yang luar biasa.

Untuk sudut pandang pengambil keputusan, meskipun memilih teknologi berdasarkan hype atau tren bukanlah hal yang salah, tapi perlu dikonsiderasi juga talenta tersedia dan jika saya diperbolehkan menambahkan opini pribadi, kadang kita perlu melawan arus, melakukan apa yang tidak dilakukan orang lain, anti mainstream.

Ada yg namanya python paradox dimana kita sengaja pilih teknologi yang jarang digunakan agar memikat talenta-talenta yang memang tertarik dengan teknologi tersebut sekaligus tidak perlu bersaing dengan para unicorn untuk merekrut developer. Ada juga yang mengambil jalur untuk memilih teknologi yang sudah matang, obvious, teknologi yang sudah membosankan, boring technology club.

Tujuan disajikannya data ini bukan untuk melihat framework atau pustaka mana yang paling bagus, tapi lebih kepada framework atau pustaka mana yang cocok buat kita dari ketiga sudut pandang tadi.

PS: Terimakasih banyak saya ucapkan kepada beberapa teman yang sudah membantu menyusun materi ini. Orang pertama yang saya hubungi ketika mulai menyusun topik ini adalah Yohan Totting. Dari awal brainstorm materi sampai hari h di mentorin oleh beliau.

Helping @rizafahmi22 to prepare his keynote for #JSDayID pic.twitter.com/miuEfuqNzz
— Yohan Totting (@tyohan) August 14, 2019

Terimakasih juga buat Herlambang, Rizqi dan Hisma alias Mamaz yang juga ikut brainstorming dari awal. Terimakasih juga untuk Jecelyn Yeen yang menghubungkan saya dengan salah satu kontributor Angular. Tak lupa terimakasih untuk om Luri Darmawan yang sudah membagikan data terkait percakapan di telegram via carikbot dan juga Ken Ratri dari geekhunter yang udah bagi data talenta di Indonesia.

Memahami Sistem Konkurensi BEAM Melalui Elixir

2019-04-29T00:00:00Z

Salah satu kontribusi besar Joe Armstrong yang ketika tulisan ini dibuat baru saja meninggal dunia adalah bahasa pemrograman Erlang beserta BEAM, atau yang lebih dikenal dengan Erlang Virtual Machine. Erlang VM cukup terkenal kehebatannya terutama ketika mampu menangani 2 juta koneksi per server di aplikasi chat WhatsApp! Di artikel ini kita akan membedah mekanisme dibalik kemampuan konkurensi yang dimiliki BEAM dengan bahasa pemrograman Elixir. Meskipun demikian, semua yang akan dilakukan di artikel ini dapat pula diimplementasikan di bahasa pemrograman lain yang juga berjalan di BEAM atau Erlang VM seperti Erlang, LFE, Alpaca, Gleam dan lain-lain.

Mekanisme Konkurensi di BEAM

Ide utama dari BEAM berpusat di sesuatu yang disebut dengan proses atau process. Proses sederhananya adalah program yang berjalan secara sekuensial, baris-per-baris dan tidak dapat berjalan secara paralel atau menjalankan pola konkurensi.

Untuk membuatnya menjadi konkuren, kita harus menjalankan proses lebih dari satu. Di Elixir, hal ini bisa kita lakukan dengan fungsi spawn. Dan ketika kita melakukan spawn, aplikasi kita akan memiliki dua proses yang berjalan bersamaan. Proses disini bukanlah proses di level sistem operasi. Proses di BEAM sangat ringan, hanya beberapa kilobytes saja dan kita dapat memiliki proses sebanyak yang kita mau. Satu mesin bisa memiliki hingga 268 juta proses!

Sebenarnya kita akan memiliki dua program independen yang berjalan terpisah satu dengan yang lainnya. Mereka tidak berbagi state atau apapun, dan tidak memiliki kesamaan sama sekali. Berada di memori, stack, heap yang berbeda, dan juga garbage collector sendiri-sendiri dan tidak saling mengganggu.

Dan satu-satunya cara untuk membuat kedua proses yang berbeda tadi untuk dapat bekerjasama adalah dengan saling berkirim pesan. Hal ini juga dikenal dengan pola konkurensi melalui berkirim pesan (message passing concurrency) atau lebih dikenal dengan actor model. Pola ini mirip dengan ide mircoservice dimana setiap service terpisah satu dengan yang lain dan saling berhubungan dengan protokol HTTP.

Misalkan proses pertama mengirimkan pesan ke proses kedua. Proses pertama mengirimkan pesan dengan fungsi send dan proses kedua menerima fungsi dengan blok receive dan kemudian menangani permintaan dari proses pertama.

Ketika aplikasi dijalankan, yang terjadi adalah sebuah proses di sistem operasi akan muncul. Yap, hanya satu proses di level sistem operasi. Di dalam proses inilah semua proses yang kita spawn akan berjalan. Proses-proses yang berjalan secara sekuensial, independen, dan ringan.

Proses disini bukanlah proses di level sistem operasi. Proses di BEAM sangat ringan, hanya beberapa kilobytes saja dan kita dapat memiliki proses sebanyak yang kita mau. Satu mesin bisa memiliki hingga 268 juta proses!

BEAM secara internal kemudian menjalankan threads yang diberi nama penjadwal atau scheduler. Satu penjadwal untu satu inti dari CPU. Jika kita memiliki CPU dengan empat inti, maka penjadwalnya ada empat.

Penjadwal ini yang bertanggungjawab mengeksekusi proses-proses. Sederhananya, proses akan mengantri di satu jalur dan setiap penjadwal akan bergiliran mengambil satu proses dan kemudian mengeksekusinya hingga proses tersebut selesai dan akan mengambil proses di antrian berikutnya. Begitu seterusnya.

Praktek Menggunakan Konkurensi BEAM

Sekarang pertanyaannya, bagaimana cara kita melakukan implementasi pola proses di aplikasi atau sistem yang kita kembangkan? Bagaimana caranya kita memisahkan tugas-tugas sehingga menjadi proses-proses kecil dan independen? Mari kita lihat demo aplikasi berikut ini.

Jobs adalah proses yang melakukan infinite loop. Didalam loop ada tugas yang dapat menyebabkan CPU bound untuk melakukan simulasi tugas yang cukup berat. Selanjutnya setiap proses yang ditelurkan (spawn), pada ilustrasi diatas terdapat 10.000 proses. Setelah proses selesai mengerjakan tugasnya, ia akan mengirimkan pesan ke proses lain yang tugasnya melakukan pencatatan bahwa proses berhasil dieksekusi atau tidak berhasil. Proses-proses yang melakukan tugas berat kemudian ditidurkan (sleep) selama satu detik dan hidup kembali. Begitu seterusnya.

Di demo ini kita hanya menggunakan satu penjadwal (scheduler) saja, bukan empat meskipun memiliki empat inti CPU. Tujuannya agar memudahkan saja untuk membuat sibuk CPU.

Kemudian di halaman yang dapat diakses pengguna, aplikasinya cukup sederhana namun sudah cukup mewakili aplikasi web secara umum. Ada sebuah input teks yang dapat menerima bilangan bulat positif dan ketika disubmit aplikasi akan menghitung jumlah dari angka tersebut berurutan dari angka satu. Misalnya kita memasukkan angka 3 maka hasilnya menjadi 1 + 2 + 3 yaitu 6 atau jika kita memasukkan angka 4 maka hasilnya menjadi 10 dan seterusnya. Berikut cuplikan kode dari proses kalkulasinya.

defp calc_sum(n), do: calc_sum(1, n, 0)
defp calc_sum(from, from, sum), do: sum + from
defp calc_sum(from, to, acc_sum), do: calc_sum(from + 1, to, acc_sum + from)

Setiap ada yang membuka halaman ini koneksi akan terbentuk antara klien dan server atau sistem. Dan ketika pengguna memasukkan angka 3 maka sistem akan melakukan perhitungan dan mengembalikan hasilnya dalam hal ini angka 6.

Dan misalkan ada tiga pengguna yang mengakses secara bersamaan, maka akan ada tiga koneksi. Satu untuk setiap pengguna atau setiap sesi (session). Begitu pula jika ada 1000 orang, akan ada 1000 koneksi yang terjadi antar proses dan begitu seterusnya.

"We do not have one web server handling 2 millions sessions. We have 2 millions web servers handling one session each." -- Joe Armstrong

Proses kalkulasinya sendiri terjadi di proses yang berbeda. Koneksi menelurkan (spawn) proses baru, kita sebut saja sebagai calculation. Proses calculation melakukan kalkulasi dan mengirimkan hasilnya kembali ke proses server untuk seterusnya diteruskan ke proses client. Kemudian proses calculation berhenti dan mati karena sudah menyelesaikan pekerjaannya.

Pola seperti ini dibentuk dengan harapan sistem akan menjadi fault-tolerant dan high availability untuk menghasilkan servis yang tetap berjalan meski terjadi masalah di production.

Situasi yang umum ditemui di production, misalnya ada kesalahan, yang akan menghasilkan kesalahan yang belum ditangani (unhandled exception) seperti division by zero atau undefined is not a function. Coba masukkan angka keberuntungan: 13! Terjadi kesalahan dan pesan kesalahan muncul di server.

Namun menariknya, sistem tetap berjalan normal. Kita tetap bisa memasukkan angka lain selain angka 13 dan sistem tetap memberikan hasil yang tepat. Hanya satu proses calculation angka 13 saja yang bermasalah dan mati.

Catatan penting: Sampai tahapan ini kita berhasil memisahkan kesalahan-kesalahan (failures) dengan cara mendelegasikannya kedalam proses-proses kecil.

Praktek Sistem Latensi

Mari kita coba memasukkan angka yang cukup besar agar sistem bisa menghitung lebih lama seperti angka 999999999. Otomatis load di dasbor pun meningkat. Meski demikian, sistem tetap reaktif menerima angka lain sambil menunggu hasil dari 999999999! Hal ini karena yang sibuk menghitung hanyalah satu proses saja. Proses lainnya dapat berjalan normal seperti tidak terjadi apa-apa. Buat saya, ini adalah definisi dari high availability.

Simulasi Kesalahan Yang Lebih Fatal

Sekarang kita akan melihat kesalahan yang lebih berbahaya. Kita akan memasukkan angka negatif, misalnya -1 yang akan menyebabkan CPU menjadi 100% karena sistem yang dikembangkan sebenarnya hanya menerima bilangan bulat negatif. Namun kita lupa untuk menangani jika pengguna memasukkan angka negatif. Hal yang biasa terjadi kan?!

Dan benar saja, ketika -1 diinput, yang terjadi adalah CPU langsung 100% dalam waktu yang cukup lama, bahkan terus menerus karena proses kalkulasi terus terjadi dan tidak dapat berhenti. Meski demikian, sistem tetap jalan, dan kita tetap bisa menggunakan aplikasi dan sistem tetap dapat digunakan seperti biasa.

Masalah semakin rumit ketika tidak ada informasi apapun di catatan (log) sistem. Seolah tidak terjadi apa-apa. Yang kita dapatkan adalah CPU 100% terus menerus.

Bug Fixing di Production

Mari sekarang kita telusuri dan mencari tahu apa yang terjadi. Ceritanya kita mendapatkan notifikasi bahwa sistem mencapai CPU 100% dalam waktu yang lama meski proses lainnya bekerja seperti biasa. Dapat dipastikan dari dasbor terlihat sepuluh ribu tugas yang kita instruksikan tetap berjalan dan memiliki tingkat kesuksesan nyaris 100%.

Mari kita ssh ke server dan melihat apa yang terjadi. Ternyata tidak ada informasi apapun dari catatan sistem (log).

Berhubung hanya ada satu proses di level sistem operasi, kita tidak bisa membunuh proses tersebut di level sistem operasi dengan menggunakan manajemen tugas (task manager) misalnya. Apabila hal ini kita lakukan, seluruh sistem akan berhenti. Untuk itu kita harus masuk kedalam sistem.

Kita bisa melakukannya dengan perintah _build/prod/rel/system/bin/system remote_console dari direktori aplikasi berada untuk masuk ke sesi IEx dengan konteks sistem yang sedang berjalan dan kita bisa melakukan investigasi disana. IEx adalah REPL Elixir dan dengan menggunakan perintah diatas, kita akan mendapatkan sesi IEx didalam sistem berjalan dan konteks sistem yang sedang berjalan sehingga kita bisa melakukan investigasi.

Di sesi IEx kita bisa melakukan apapun yang biasa kita lakukan. Misalnya 1 + 2. Kita bisa melihat daftar proses yang sedang berjalan dengan fungsi Process.list().

Dan kita bisa mendapatkan informasi dari sebuah proses dengan fungsi Process.info().

Dan kita bisa mendapatkan informasi proses mana yang membuat CPU load yang tinggi dengan melakukan agregasi dari informasi yang didapat dari Process.info(). Di sistem sudah disiapkan sebuah fungsi untuk agregasi dengan menjalankan Runtime.top().

Jalankan fungsi ini beberapa kali untuk memastikan id proses (PID) dengan CPU tertinggi adalah id proses yang sama. Dan kita sudah bisa menyimpulkan bahwa id proses yang bermasalah adalah #PID<0.12507.0>. Kita simpan informasi id proses kedalam sebuah variable untuk mendapatkan informasi lebih rinci dengan Process.info(). Dan kita bisa mendapatkan informasi seperti current_stacktrace. Dan disana kita dapat melihat sistem menjalankan modul ExampleSystem.Math dan fungsi calc_sum dengan jumlah argumen 3 dengan kode sumber berada di lib/example_system/math.ex dibaris ke-20.

Dan kita bisa membunuh proses tersebut dengan fungsi Process.kill() dan sistem kembali cool down. Dan di sisi klien akhirnya setelah sekian lama, pesan kesalahan akhirnya muncul.

Setelah sistem mereda, langkah selanjutnya yang biasa kita lakukan adalah memperbaiki kesalahan tersebut. Kita sebelumnya sudah mendapatkan informasi bahwa terakhir kali dieksekusi adalah baris ke-20 dari file lib/example_system/math.ex. Mari kita lihat kodenya.

defp calc_sum(n), do: calc_sum(1, n, 0)
defp calc_sum(from, from, sum), do: sum + from
defp calc_sum(from, to, acc_sum), do: calc_sum(from + 1, to, acc_sum + from)

Dan fungsi calc_sum ini dipanggil dari lib/example_system_web/math/sum.ex. Dan benar saja, nilai negatif belum ditangani. Memperbaikinya cukup mudah, tinggal tambahkan satu kasus dimana input lebih kecil dari 0 dan kita nyatakan input yang tidak valid.

defp start_sum(socket, str_input) do
  operation =
      case Integer.parse(str_input) do
      :error ->
          %{pid: nil, input: str_input, result: "invalid input"}

      {_input, remaining} when byte_size(remaining) > 0 ->
          %{pid: nil, input: str_input, result: "invalid input"}

+     {input, ""} when input <= 0 ->
+         %{pid: nil, input: input, result: "invalid input"}

      {input, ""} ->
          do_start_sum(input)
      end

  socket |> update(:operations, &[operation | &1]) |> assign(:data, data())
end

Namun jika diperhatikan , fungsi calcsum kita juga terdapat beberapa kesalahan. Pertama, penanganan input 13 yang memang sengaja dibuat _error. Dan proses kalkulasinya kurang optimal. Dengan kekuatan googling dan stackoverflow, saya mendapatkan perhitungan yang lebih optimal.

-defp calc_sum(n), do: calc_sum(1, n, 0)
-defp calc_sum(from, from, sum), do: sum + from
-defp calc_sum(from, to, acc_sum), do: calc_sum(from + 1, to, acc_sum + from)
+defp calc_sum(n), do: div(n * (n + 1), 2)

Setelah kesalahan diperbaiki, jalankan test untuk memastikan bahwa semua sudah sesuai ekspektasi. Lalu, moment of truth! Kita bisa melakukan peluncuran ulang (deployment) dengan zero downtime dengan perintah mix system.upgrade! Ini terbukti dengan aplikasi dasbor yang tetap menyala.

Dan sekarang kita bisa mencoba kembali kesalahan-kesalahan yang tadi kita lakukan bahkan tanpa menghentikan sistem secara keseluruhan. Dan karena perhitungan sudah lebih optimal, perhitungan yang tadinya berjalan cukup lama, sekarang sudah jauh lebih cepat tanpa memberatkan CPU sama sekali.

Catatan penting: Jangan lakukan hal ini di sistem lain. Hanya di Elixir dan bahasa-bahasa yang berjalan diatas BEAM yang bisa 😃. Hal ini juga dapat dibuktikan dengan Erlang yang digunakan di sistem telekomunikasi Ericsson yang ketika kode baru diluncurkan ketika kita sedang melakukan percakapan di telepon, telepon tidak terputus.

Kode dapat dilihat di https://github.com/rizafahmi/demo_system. Untuk belajar lebih lanjut tentang Elixir dan BEAM silakan baca buku Elixir in Action karya Sasa Juric dan Little Elixir & OTP Guidebook karya Ben Tan Wei Hao.

Menjadi GDE dan Pengalaman Pertama Menghadiri Chrome Dev Summit

2018-12-22T00:00:00Z

Berikut cerita pengalaman pertama saya menghadiri Chrome Dev Summit 2018 atas undangan Google untuk para Google Developers Expert yang fokus di Web Technologies. Setelah sehari sebelumnya, di tanggal 10–11 November 2018 juga ada perhelatan akbar Developers Experts Summit dimana GDE atau Google Developers Experts seluruh dunia berkumpul dan ber-summit-ria.

Sebelum mengulas acara yang diselenggarakan di Yerba Buena Center for the Arts, San Francisco pada tanggal 12–13 November 2018 saya ingin menceritakan bagaimana saya bisa menjadi Google Developers Experts terlebih dahulu agar konteksnya sesuai.

Menjadi Google Developers Experts

Suatu sore, saya ngobrol dengan Mas Yohan Totting dan dia ingin saya menjadi GDE, awalnya saya terkejut dan penasaran. Saya yakin masih banyak diluar sana orang yang lebih expert dibanding saya. Karena penasaran, saya kemudian menanyakan apa itu GDE dan apa tugasnya.

Yohan Totting — Developer Advocate, Web Developer Relations at Google

Saya masih ingat banget jawaban Mas Yohan saat itu: “Lo lakukan apa yang selama ini sudah lo kerjakan. Tulis artikel, screencast, podcast, dan talks.” Bedanya sekarang semua itu di support Google. Jadi kalau saya diundang menjadi pembicara diluar Jakarta dan di sekitar Asia Tenggara, Google akan memberikan dukungan dalam bentuk tiket pesawat dan penginapan.

Dalam hati, seru juga ya karena memang hal tersebut yang saya lakukan beberapa tahun terakhir dalam skala kecil. Singkat cerita, saya memberanikan diri untuk apply dengan mindset nothing to lose. Banyak tahapan yang harus dilewati, mulai dari screening awal, interview dengan GDE dan terakhir, kalau lulus, akan diinterview oleh Googler! Lumayan kan, menambah pengalaman.

Setelah melewati proses screening, saya akhirnya dapat kesempatan diinterview oleh GDE. Saya anggap ini sebagai kesempatan saya meyakinkan diri apakah GDE pantas saya perjuangkan, karena praktis akan banyak waktu dan juga biaya yang akan keluar. Saya berkesempatan diinterview oleh Warat Wongmaneekit, GDE asal Thailand.

Warat Wongmaneekit (kanan).

Di interview ini saya banyak ‘menjual’ konsep randomscreencast, video screencast yang saya produksi. Saya menceritakan konsep randomness, topik yang random, dan di-publish di tanggal dan jam yang random pula. Kemudian saya juga banyak bercerita tentang beberapa komunitas yang saya inisiasi dan kelola, seperti Meteor Jakarta, React Indonesia dan JakartaJS tentunya.

Dan ternyata saya lanjut! Meskipun ada beberapa pertanyaan teknis yang menurut saya jawabannya sulit dan juga pilihan spesialisasi juga cukup sulit. Saya diminta memilih spesialisasi di Progressive Web Apps, Angular atau Web Components/Polymer. Dan saya akhirnya memilih PWA.

Jeff Posnick — Developer Platform Engineer at Google

Karena memilih PWA, maka saya akan diinterview oleh Googler yang berhubungan dengan PWA. Googler tersebut tak lain adalah yang bikin library service worker, salah satu bagian penting dari PWA, workbox nama library-nya. Namanya Jeff Posnick, yang adalah Developer Platform Engineer di Google.

Singkat cerita, saya akhirnya menjadi Google Developers Experts di Web Technologies fokusnya Progressive Web Apps. Tidak terbayang sebelumnya saya bisa berada di satu lingkaran dengan GDE lain seperti Shirley Wu yang mengajarkan saya tentang D3js melalui video course, Kent C. Dodds yang mengajarkan saya React dan testing, Ryan Chenkie yang mengajarkan saya GraphQL melalui video course dan experts lainnya diseluruh dunia!

Berada satu lingkaran dengan para experts.

Ketika apa yang saya produksi selama ini diakui oleh seorang Web Developer Relations sekelas Mas Yohan dan diapresiasi oleh Google kebahagiaan yang hakiki buat saya. Jadi buat teman-teman yang ingin mengundang saya untuk berbagi silakan kontak saya, transportasi dan akomodasi akan ditanggung oleh Google (syarat dan ketentuan berlaku).

Tentang Acara Chrome Dev Summit

Sehari sebelum acara Chrome Dev Summit, saya bertemu dengan Mas Ariya Hidayat yang memang domisili di San Jose, dekat dengan lokasi hotel dan venue Experts Summit. Dan saya diberi bocoran bahwa Chrome Dev Summit itu serunya adalah bagian networking-nya karena untuk sesi talks-nya dapat dinikmati secara live-streaming via youtube. Dan itulah yang saya lakukan!

Bersama sang Legenda, Ariya Hidayat

Pastinya banyak developer kelas dunia berseliweran disana, sebagian besar karyawan Google sih, beberapa idola saya. Jadi sekalian berburu selfie atau sekedar say hi. Setelah nonton beberapa sesi, terutama sesi yang dibawakan oleh pak Paul Irish tentang performa dan tools lighthouse.. eh, ternyata pak Paul malah nongkrong jaga stand lighthouse. Ngga kebayang sih, orang sepenting beliau masih sempat ikutan jaga stand. Ya mumpung beliau idola saya sejak HTML5 Boilerplate, say hi dan foto bareng tentunya.

Paul Irish — Performance Engineer at Google

Saat dulu diminta untuk membawakan materi tentang Progressive Web Apps di TechInAsia Product Development Conference 2017 saya banyak belajar topik tersebut dari online course ini. Instrukturnya Pete LePage yang sangat, sangat lucu dan membawakan materi dengan menarik. Jauh dari kata boring. Saya yakin beberapa teman-teman di Indonesia pernah bertemu atau melihat bapak Pete ini karena beliau pernah datang ke Indonesia untuk mengisi materi workshop PWA. Di hari kedua CDS sekilas saya melihat sosok tersebut. Awalnya saya lupa namanya sampai harus googling dulu supaya ingat namanya.

*Pete LePage — *Dev Advocate at google**

Akhirnya saya berhasil mencegat dia, ngobrol dan foto bareng tentunya. Berterimakasih karena dia yang mengajarkan saya PWA pertama kali dan dari hal tersebut akhirnya membawa saya menjadi GDE. Tak lupa saya tanya rahasia gimana bisa seluwes itu didepan kamera. Saya pernah berada didepan kamera dan sumpah, susah banget membawakan materi dengan lancar dan luwes ketika berhadapan dengan kamera. Sederhananya, ngga ada rahasia karena he’s a natural. Memang aslinya dia lucu aja. Berikut cuplikan video Pak Pete buat yang penasaran.

Kemudian tentu, saya bertemu dengan Jeff Posnick yang menginterview saya dan meloloskan saya menjadi GDE. Menariknya, saya sempat bertemu pak Jeff ini dihari pertama, tapi saya ngga *ngeh *kalo itu dia. Beda banget tampilannya di video call dengan aslinya, jadi pangling saya. Ketika ngobrol dengan Mas Yohan saya bilang pengen ketemu pak Jeff, dia kaget. “Lah, yang kemaren sebelah gue itu Jeff.”

Akhirnya di hari kedua saya cari dia dan akhirnya ketemu. Pas ketemu saya nge-blank sampe lupa namanya: “Hey man, my name is Riza. I’m totally blank right now and suddenly forgot your name.” Untungnya dia dengan baik hati membalas: “My name is Jeff, nice to meet you!” Setelah itu percakapan berjalan cukup lancar. Tak lupa saya ucapkan terimakasih karena telah menerima saya menjadi GDE dan tak lupa selfie!

Akhirnya bisa bertemu Pak Jeff secara langsung

Lalu secara tidak sengaja saya berpapasan dengan seseorang dengan tshirt yang menarik perhatian saya. Tulisannya momentum beserta logonya. Oh, saya tahu momentum, sebuah chrome extension yang menampilkan foto-foto indah ketika kita buka tab baru. Tentu setelah itu fiturnya bertambah sebagai salah satu productivity tools dengan penambahan todo list dan lain sebagainya.

Ketika berpapasan, saya cuma nyeletuk: “Nice shirt!”. Gayung bersambut, dia lantas bertanya: “You knew momentum?!” dan pembicaraan berlanjut. Dia minta kontak linkedin saya (entah buat apa), dan menawarkan apakah saya mau stiker. Tentu saja saya terima dengan tangan terbuka 🤗

Tidak lupa saya bertanya tentang strategi monetisasi dari momentum. Saya tidak bisa membayangkan bagaimana mereka bisa menemukan cara untuk monetisasi dari sebuah produk sederhana seperti momentum ini. Ternyata mereka benar-benar ingin menjadi sebuah produk yang membantu orang untuk fokus dan produktif. Mereka menyasar corporate untuk memberikan best practice dan tools berbayar dalam rangkan meningkatkan produktifitas karyawannya. Keren juga ya…

Jason Waterman — Co-founder, CTO Momentum

Lalu di hari kedua atau hari terakhir, malam harinya saya diundang oleh tim Chrome untuk penataran tambahan. Tidak semua orang diundang ternyata. Selain dapat makan malam, saya bisa bertemu developer heroes seperti pak Ben Galbraith, pak Dion Almaer, ibu Elizabeth Sweeny, bang Addy Osmani dan om Alex Russell!

Saya dan om Alex ngobrol cukup banyak tentang PWA dan betapa bloated-nya framework-framework JavaScript yang ada sekarang. Ternyata om yang satu ini cukup old school yang lebih memilih menulis kode dengan vanilla JavaScript saja. Saya ingat banget dia bilang gini: “Once you initialize new project with create-react-app, it’s already bloated!” Benar juga ya, point taken! Itu bahkan belum kita apa-apain, belum install *redux, routes *dan library lainnya.

Alex Russell — Senior Engineer at Google

Oh iya, buat yang belum kenal dengan om Alex Russell, dia adalah Senior Engineer yang mengerjakan Blink engine Chrome, dojo, App Cache, Service Worker, web component, anggota ECMA TC39, anggota W3C Technical Architecture Group dan masih banyak lagi. Sangking serunya percakapan kami, acara selesai dan saya tidak sempat say hi dengan Addy Osmani, damn! Maybe next time.

Tentang Sesi Chrome Dev Summit

Meskipun sesi networking adalah sesi yang paling seru, bukan artinya sesi talks tidak seru. Banyak sekali pelajaran penting yang saya dapatkan. Mulai dari melihat bagaimana panitia menciptakan alur cerita dan kondisi agar penonton tetap engage dan terhibur, topik, cara presentasi, hingga kegagalan pembicara kala membawakan sesi* live code* dan bagaimana mereka mengatasinya. Meskipun tidak semua sesi dapat saya tonton karena ramai dan beberapa kali tidak kebagian tempat. Dilain kesempatan saya dapat tempat dan secara spontan tertidur dan terbangun ketika sesi berakhir. Apalagi semua video tersedia di youtube, jadi saya bisa nonton video-video menarik setelah pulang saja. Berikut beberapa hal yang menarik perhatian saya.

Keynote Hari Pertama

Tahun 2018 ternyata merupakan ulang tahun Google Chrome yang ke-10. Tidak hanya itu saja, Android pun berulangtahun yang ke-10 di tahun ini. Begitupula dengan V8, engine JavaScript yang digunakan Chrome, umurnya juga 10 tahun. Lebih jauh, di tahun 2018 ini Google sudah berumur 20 tahun saja!

Peningkatan Fitur Modern JavaScript di V8

V8 sudah banyak sekali melakukan optimisasi. Teraktual, mereka berhasil meningkatkan kinerja garbage collector menjadi lebih cepat 100 kali lipat! Kemudian mereka juga mengoptimalkan beberapa fitur JavaScript modern seperti promise, async/await, array destructuring dan masih banyak optimisasi lainnya. Dan V8 sekarang sudah mendukung webassembly. Tentang webassembly akan kita bahas di bagian tersendiri nanti.

Performance bugdet juga merupakan salah satu topik yang sangat sering muncul di berbagai sesi dan secara umum tema dari Summit kali ini memang didominasi oleh topik seputar performa.

Kemudian hadir pembicaraan tentang Service Worker dan juga Porgressive Web Apps. Jika teman-teman tertarik untuk belajar Service Worker dengan cara yang menyenangkan, bisa main game serviceworkies.com.

Untuk lebih detailnya, bisa cek video keynote hari pertama berikut.

Keynote Hari Kedua

Hari berikutnya cukup menarik terutama keynote hari kedua. Hal yang cukup menggelitik adalah ketika mbak Nicole Sullivan mengatakan bahwa framework terkadang membuat aplikasi kita lambat. Tapi framework juga harapan utama kita untuk membuat aplikasi kita menjadi lebih cepat. Karena itu duet mbak Nicole dan juga mas Malte Ubl menggarisbawahi beberapa perubahan yang dilakukan framework-framework untuk membuat performa aplikasi menjadi lebih optimal.

Pertama ada React yang sudah menerapkan code splitting dan melakukan proses render lebih optimal dengan memecahnya menjadi bagian kecil. Kemudian React juga memperkenalkan lazy mode, suspense dan juga konkurensi.

Selanjutnya ada Angular yang memasukkan performance budget kedalam angular-cli, beberapa polyfill dibuang dan memperkenalkan Ivy, sebuah kompiler baru untuk membuat Angular view menjadi lebih cepat.

Framework berikutnya, Vue yang memperkenalkan modern mode untuk men-deliver aplikasi web kita ke modern browser saja. Hal ini dapat menghapus beberapa polyfill yang digunakan dalam rangka mengakomodasi browser jadul. Vue juga telah melakukan preloading dan prefetching secara default.

Polymer, akan bertransformasi menjadi lit-element dalam rangka menerapkan web component yang sangat slim. Dan, kabar gembiranya, web component sekarang sudah didukung secara native di firefox!

Kompatibilitas Web Components. Dikutip dari https://www.webcomponents.org/](/assets/images/cds/1_YFeztoPNMcKP-Q808mgZQg.png)Kompatibilitas Web Components. Dikutip dari https://www.webcomponents.org/

Svelte, sebuah framework tanpa framework, sebuah konsep yang sangat menarik buat saya pribadi. Disini Svelte di-highlight sebagai sebuah framework yang pada dasarnya sudah sangat cepat, tanpa harus ada optimisasi lebih lanjut. Sederhananya, kita men-develop aplikasi web dengan framework Svelte, mungkin ditambah beberapa library seperti state management, routes, dan lain sebagainya. Yang menarik, kemudian kita melakukan kompilasi dengan tools yang disediakan sehingga hasil akhirnya berupa html, css dan vanilla JavaScript yang bisa berjalan bahkan di browser yang tidak terlalu modern. Dan ukuran yang dihasilkan sangat kecil dan optimal!

Terakhir Ember, yang menghapus jQuery dari *boilerplate default-*nya. Meskipun bisa ditambahkan jika perlu. Dengan menghapus jQuery, Ember mampu mengurangi ukurannya sebanyak 20% saja! Selain menghapus jQuery, Ember juga melakukan optimasi di bagian rendering-nya.

Untuk lebih lengkapnya, berikut video keynote hari kedua.

Actor Model Untuk Web

Actor model adalah sebuah konsep yang berkembang dikalangan komputasi konkurensi yang muncul pertama kali ditahun 1973. Actor model yang paling terkenal diterapkan di bahasa pemrograman Erlang, dan kemudian dilanjutkan oleh Elixir. Kita juga dapat menerapkan konsep ini di bahasa seperti scala dengan memanfaatkan framework seperti Akka.

Ternyata di web actor model ini juga cocok diterapkan di web. Mas Surma dan mas Paul Lewis dalam sesi yang diberi judul “*Architecting Web Apps — lights, camera, action!” *mendemokan actor model yang diterapkan disisi web. Misalnya sebuah aplikasi web mempunyai actor: UI, state, storage dan juga broadcaster. Cukup familiar kan dengan konsep seperti ini? Kalau dipikir-pikir ada sedikit kemiripan dengan Redux. Well, teman-teman bisa cek langsung reponya disini.

Houdini CSS

Sesi berikutnya yang menurut saya menarik adalah tentang Houdini. Houdini adalah sebuah inisiasi yang isinya sekelompok orang yang ditunjuk oleh konsorsium w3c untuk mengembangkan CSS berikutnya. Mereka menciptakan tools untuk membuat fitur-fitur CSS baru yang saat ini belum diterapkan browser.

Secara sederhana, Houdini adalah low-level API JavaScript untuk kebutuhan rendering. Artinya kita bisa mengajari HTML untuk me-render sesuatu yang belum bisa dilakukan oleh CSS. Memang untuk saat ini belum semua API dan browser mendukung Houdini, tapi kita sudah bisa menggunakan paint API-nya di Chrome dan Opera, paling tidak.

Contohnya ketika kita ingin membuat lingkaran sebagai background dari textarea, kita bisa ‘mengajari’ browser untuk melakukannya.

Contoh mengajari browser menggambar lingkaran di textarea.

Kemudian kita definisikan bagaimana cara membuat lingkaran di circle.js.

Contoh menggambar lingkaran denga JavaScript

Nah, sekarang kita bisa menggunakan circle tadi di file CSS dengan paint API yang sudah tersedia di beberapa browser modern.

Memanggil circle di CSS

Hasilnya kita bisa menjadikan circle sebagai background dari textarea.

Gimana, seru ya?! Bayangkan banyak hal yang bisa kita buat dengan Houdini ini. Untuk lebih jelasnya bisa simak video-nya dibawah ini yang kembali dibawakan oleh abang Surma.

Sesi WebAssembly

Sebenarnya sesi tentang WebAssembly ada juga di hari pertama, tapi saya gabungkan saja supaya lebih jelas juga. Saya juga tidak akan terlalu banyak membahas sesinya. Bisa nonton sendiri nanti. Tapi pembahasan saya akan banyak kepada WebAssembly itu sendiri.

WebAssembly adalah bahasa baru untuk web. Sekarang ini bahasa pemrograman lain dapat menargetkan untuk dikompilasi dan dieksekusi di web dengan bantuan format bahasa wasm atau WebAssembly. Otomatis banyak yang khawatir, gimana nasib JavaScript. Tenang saja, WebAssembly tidak akan menggantikan JavaScript. Justru wasm dan JavaScript akan berjalan beriringan.

Dengan bantuan wasm, aplikasi berat seperti Autocad, Google Earth ataupun Figma dapat berjalan di web. Ambil contoh Autocad, sebuah aplikasi yang cukup berat yang ditulis dengan C++ sebagai aplikasi desktop. Tanpa banyak perubahan, kode lama dapat dengan mudah dikompilasi ke format wasm dan viola! Autocad sudah bisa digunakan di web dengan performa yang sama bagusnya dengan versi desktopnya.

Beberapa bahasa yang sudah bisa dikompilasi ke wasm diantaranya ada C, C++, Rust, dan Lua. Sedangkan Golang, C#, Java, Ruby, Python dan lainnya akan segera menyusul. Dan dukungan dari browser pun sudah mumpuni jadi kita sudah bisa mulai belajar dari sekarang.

Kesimpulan

Perhelatan yang diselenggarakan oleh Google ini sangat seru. Sesi networking-nya dengan bertemu developer tingkat dewa yang beberapa adalah idola saya merupakan hal yang buat saya membangkitkan semangat untuk bekerja lebih giat mengejar ketertinggalan dan lebih semangat lagi untuk berbagi ilmu dengan developer di Indonesia. Sesi talks-nya pun tidak kalah seru yang tentunya bisa kita nikmati bersama-sama melalui video.

Bonus: Swaaaagggg!!

Artikel ini pertama kali dipublikasikan di Medium WWWID.

Perkenalan ReasonML, Sintaks Baru untuk OCaml

2018-12-10T00:00:00Z

ReasonML adalah bahasa sintaks, ekstensi dan toolchain yang berada diatas sebuah bahasa jadul OCaml. Selain dapat dikompilasi ke JavaScript dengan bantuan BuckleScript, Reason juga dapat dikompilasi menjadi aplikasi native melalui OCaml. Daripada membuat bahasa baru dari awal, tim Facebook memutuskan untuk membuat sintaks baru dan memperkaya environment OCaml sehingga menjadi lebih modern dan kekinian. OCaml sendiri sudah digunakan lebih dari 20 tahun dan sudah teruji oleh industri sejak tahun 90-an.

Jika melihat sintaks Reason saat ini sudah mirip dan menyerupai ES6. Lihat perbandingan dibawah ini antara sintaks OCaml, Reason versi awal dan Reason terbaru. Semakin baru, sintaks nya semaki mirip ES6 atau JavaScript modern.

Perbandingan sintaks OCaml, Reason lama, dan Reason terbaru.

Kenapa Menggunakan Reason

Ada beberapa alasan kenapa teman-teman perlu mempertimbangkan Reason sebagai platform yang layak untuk dipelajari. Selain proses kompilasi yang cepat dan sintaks yang familiar, ada beberapa keunggulan lainnya. Berikut beberapa diantaranya.

Type System dan Type Inference

Seperti yang kita ketahui bersama, JavaScript bukanlah bahasa pemrograman yang memiliki type system. Dan semakin besar basis kode yang kita miliki akan semakin butuh kita akan type system. Makanya muncul beberapa solusi seperti TypeScript dan juga Flow.

TypeScript adalah sebuah bahasa pemrograman dari Microsoft yang merupakan subset dari JavaScript dengan menambahkan type system. Jadi kita sebenarnya tetap bisa menulis JavaScript didalam file-file TypeScript.

Begitu juga dengan Flow, sebuah static type checker untuk JavaScript yang juga berasal dari Facebook. Flow bertindak sebagai anotasi untuk kode JavaScript yang sudah ada. Uniknya, Flow dikembangkan menggunakan OCaml.

Dibandingkan dengan Reason? Pertama, Reason bukanlah sintaks baru untuk JavaScript. Reason adalah sintaks baru untuk OCaml, baru kemudian dari OCaml dikompilasi ke JavaScript. Kedua, fitur Reason lebih lengkap dan utamanya type system jauh lebih solid berkat OCaml.

Dan yang bikin Reason lebih keren lagi adalah fitur type inference-nya. Reason dapat menebak type dari kodingan kita tanpa harus mendefinisikan type-nya satu-per-satu. Dan fitur ini belum dapat ditandingi oleh TypeScript ataupun Flow. Mari kita lihat contohnya di rtop, REPL untuk Reason.

Fungsi add menerima dua buah parameter integer dan fungsi add akan me-return integer juga.

Seperti bisa dilihat, kita membuat sebuah fungsi dengan nama add yang memiliki parameter a dan b dan menghasilkan penjumlahan a dengan b . Ketika mendeklarasikan fungsi add tersebut, kita tidak sama sekali mendefinisikan tipe data dari a, b dan juga hasil dari fungsi add. Akan tetapi setelah dievaluasi, menghasilkan kode berikut ini: let add: (int, int) => int = <fun>;. Artinya Reason dapat menebak bahwa tipe data a, b dan juga hasil dari add adalah integer.

Mari kita lihat satu contoh type inference lagi yang lebih keren dengan menggunakan struktur data records.

Reason mampu menebak tipe records sesuai properti yang terkandung didalamnya.

Ketika kita mendefinisikan sebuah record, disarankan untuk memberi anotasi atau catatan untuk mengarahkan sebuah variable kepada tipenya. Misalnya let kuririn : person = { age: 31, name: "Kuririn" };. Disini kita mendefinisikan record baru dengan tipe person seperti yang sudah kita definisikan sebelumnya. Tetapi sebenarnya kita tidak perlu melakukannya, seperti variable chiChi dan piccolo, kita tidak mendefinisikan sebagai tipe person, Reason dapat membedakan tipenya berdasarkan properti yang didefinisikan. Karena chiChi tidak memiliki properti species, maka chiChi dikategorikan sebagai person. Sementara piccolo karena memiliki properti species, maka ia termasuk nonPerson.

Pesan Kesalahan yang Manusiawi

Dan karena type system yang solid, Reason dapat menampilkan pesan kesalahan yang cukup detil dan manusiawi. Kita kembali ke contoh fungsi add sebelumnya yang menerima dua parameter integer. Bagaimana jika kita memanggil fungsi tersebut dengan parameter integer dan string?

Pesan kesalahan yang detil dan manusiawi.

Dari pesan kesalahan diatas sudah cukup jelas bahwa string “7” merupakan sumber kesalahan, karena diharapkan integer bukan string.

Jika kita menggunakan JavaScript fungsi tersebut akan dieksekusi dengan baik, meskipun hasilnya salah, yaitu menjadi “67”.

Bukan pesan kesalahan yang kita dapatkan, akan tetapi bug yang akan muncul jika di JavaScript

Hal ini cukup berbahaya, JavaScript dapat mengeksekusi pemanggilan fungsi diatas tanpa masalah, akan tetapi hasilnya nge-bug. Sebagai tambahan, Reason juga dapat mendeteksi typo atau kesalahan pengetikan. Bayangkan berapa banyak bugs dan typo yang dapat dihindari.

Mendeteksi Typo.

Alat Bantu Yang Kompit

Meskipun tergolong baru, Reason sudah dilengkapi dengan alat bantu yang tergolong komplit. Hal ini juga terbantu dengan keputusan untuk menggunakan beberapa alat bantu yang sudah ada seperti yarn/npm, babel, create-react-app dan webpack. Sehingga selain melengkapi alat bantu lain, developer yang sudah terbiasa menggunakan yarn/npm dan webpack menjadi lebih mudah mempelajari Reason.

Reason ‘meminjam’ beberapa alat bantu yang sudah ada di ekosistem JavaScript

Kemudahan Adopsi dan Kemudahan Untuk Dikelola

Reason berada di sweet spot antara kemudahan adopsi dan kemudahan untuk dikelola. Dengan sintaks yang lebih familiar, terutama bagi modern JavaScript developer, mempelajari Reason akan menjadi lebih lancar. Dan dengan bantuan Type System dan fitur-fitur lainnya, kemudahan maintenance pun dapat dicapai. Terutama dalam menghindari bugs dan kesalahan yang umum terjadi ketika runtime dipindah ke compile time sehingga pengguna tidak terkena dampaknya. Ketika kode Reason berhasil dikompilasi, artinya kode kita sudah terbebas dari *silly mistakes *seperti typo dan lain sebagainya. Jika tidak, maka proses kompilasi gagal.

_Grid yang diadaptasi dari talk Jared Forsyth ([https://jaredforsyth.com/](https://jaredforsyth.com/))_

Seperti yang dapat dilihat dari ilustrasi diatas, JavaScript dan ES6 sangat mudah dipelajari. Lain halnya jika kita berbicara *maintenance *kode kita karena JavaScript tidak memiliki type system dan rentan bugs dan kesalahan. TypeScript masih cenderung mudah dipelajari dan diadopsi. Proses maintenance kodenya sendiri memang jauh lebih baik daripada JavaScript.

Dari sisi yang berbeda, maintenance kode di Haskell sangatlah mudah, bahkan jika sudah berjalan, kemungkinan besar kode Haskell tidak perlu dikelola lagi. Akan tetapi Haskell terkenal dengan bahasa yang sulit dimengerti dan dipelajari. Elm adalah versi mainstream dari Haskell yang juga merupakan bahasa pemrograman yang dapat dikompilasi ke JavaScript.

Reason berada diposisi yang cukup strategis dimana kemudahan adopsi masih bisa ditoleransi dan kemudahan maintenance juga masih tergolong cukup baik.

Interopabilitas Dengan JavaScript

Seperti yang sudah dijelaskan sebelumnya, Reason menggunakan beberapa alat bantu yang juga digunakan oleh JavaScript seperti yarn/npm dan juga webpack. Sehingga ‘jarak’ dengan JavaScript terbilang masih cukup dekat apabila dibandingkan dengan Elm, misalnya.

Elm, menggunakan ekosistem dan packages sendiri sehingga cukup menyulitkan apabila kita ingin memanfaatkan library yang sudah tersedia di npm. Sementara dengan Reason menggunakan library JavaScript masih sangat memungkinkan.

Interopabilitas Reason dengan JavaScript masih cukup dekat.

Komunitas Kecil Tapi Hangat

Karena memang masih tergolong baru, komunitas Reason masih cukup kecil untuk ukuran kuantitas, akan tetapi sangat hangat dan fokus.

“The community is small but very focused on delivering a better experience for developers.” Wojciech Bilicki

Ngga percaya, berikut saya sertakan buktinya. Seorang teman di Facebook mem-post foto ini. Identitas disamarkan, tentunya.

Disapa oleh Leader Komunitas ketika baru join grup discord.

Bayangkan, seorang Cheng Lou, yang me-lead project Reason punya waktu untuk say hi kepada seseorang yang baru join komunitas adalah sebuah sentuhan yang hangat.

Bahasa Fungsional Yang Permisif

Reason termasuk kedalam kategori bahasa fungsional nan deklaratif. Namun ia tidak melarang ketika kita ‘terpaksa’ menggunakan beberapa sintaks yang imperatif. Ketika kita kesulitan mendeklarasikan baris kode, kita masih dapat menggunakan for loop yang imperatif atau bahkan variable pun dapat kita buat mutable.

Penggunaan mutable variable dan imperative loop.

Jadi misalnya kita sedang belajar functional programming tetapi belum menguasai sepenuhnya, Reason tidak akan menghentikanmu menulis kode yang imperatif seperti diatas, sehingga produktifitas tetap terjaga.

Memulai Reason

Untuk mulai menggunakan Reason, ada beberapa package yang kita butuhkan. Pertama, kita butuh reason-cli . Karena kita akan membuat aplikasi JavaScript di sisi client, kita juga butuh BuckleScript untuk melakukan kompilasi Reason atau OCaml ke JavaScript. Kedua package tersebut dapat kita install menggunakan yarn atau npm.

$ yarn global add reason-cli
$ yarn global add bs-platform

Untuk membuat aplikasi sederhana, kita sekarang bisa menggunakan perintah:

$ bsb -init nama-app -theme basic-reason
$ cd nama-app
$ tree

./reason-demo/
├── src
│   └── Demo.re
├── .gitignore
├── README.md
├── bsconfig.json
└── package.json

Mari kita bahas satu-per-satu. Pertama ada folder src yang berisi kode Reason kita. Kemudian ada package.json yang merupakan daftar dependencies sama seperti project JavaScript ataupun NodeJS.

Isi file package.json

Yang berbeda adalah bsconfig.json yang berisi *dependencies *dan konfigurasi untuk Reason dan BuckleScript seperti definisi source direktori, pengaturan penamaan dan lain sebagainya.

Isi file bsconfig.json

Sekarang mari kita coba buka file src/Demo.re . Isinya kodenya cukup sederhana, sebuah pesan Hello World.

Placeholder kode Demo.re

Sekedar informasi, semua modul yang menggunakan Js.* berasal dari BuckleScript. Contohnya Js.log, Js.Promise, Js.then_ dan lain sebagainya. Dan untuk melakukan kompilasi dari Reason menjadi JavaScript, kita tinggal menjalankan perintah berikut.

$ yarn build
$ tree .

    .
    ├── lib
    │   └── bs
    ├── src
    │   ├── Demo.bs.js
    │   └── Demo.re
    ├── .gitignore
    ├── .merlin
    ├── README.md
    ├── bsconfig.json
    └── package.json

Dan sekarang sudah ada sebuah file baru, Demo.bs.js . Mari kita lihat isinya.

Hasil kompilasi BuckleScript

Seperti yang sudah bisa kita tebak, hasilnya adalah console.log . Script ini kemudian dapat kita gabungkan dengan file html, misalnya seperti ini.

Load JavaScript file ke HTML

Dan kita buka file tersebut di browser dan jangan lupa buka chrome console untuk melihat hasilnya.

Dijalankan di browser

Mari sekarang kita belajar sintaks Reason dengan membuat aplikasi perhitungan sederhana. Sekarang coba kita buat file baru src/Calc.re untuk membuat modul baru dengan nama Calc yang akan kita panggil nantinya dari src/Demo.re. Di Reason, file baru secara otomatis menjadi modul sendiri tanpa perlu export dan import. Mari lihat demonya.

Mendeklarasikan Variable dan Fungsi

Untuk mendeklarasikan fungsi di Reason, mirip sekali dengan notasi yang biasa kita lihat di JavaScript modern. Dengan menggunakan sintaks let diikuti dengan nama fungsinya, notasi = lalu kemudian diikuti dengan pendefinisian argumen atau parameter dan dilanjutkan dengan tanda arrow => terakhir diikuti dengan isi fungsinya. Jika isi fungsinya lebih dari satu baris, harus berada didalam scope dengan {}. Jika hanya satu baris tidak perlu menggunakan scope {}.

Fungsi add di modul Calc

Untuk memanggil fungsi add dari file Demo.re kita bisa lakukan dengan cukup mudah. Kita bisa menggunakan notasi titik atau dot. Reason secara otomatis memahami bahwa fungsi add berada didalam file Calc.re ketika kita memanggil dengan cara Calc.add().

Dan semua proses deklarasi variable menggunakan let . Lebih luas, let di Reason juga digunakan untuk scoping, mendeklarasikan fungsi, *pattern matching *dan banyak lagi.

Memanggil modul Calc dan fungsi add dari modul Demo.

Untuk menjalankannya kita bisa lakukan perintah yarn build terlebih dahulu untuk konversi Reason ke JavaScript baru kemudian file JavaScript-nya kita eksekusi atau buka di file index.html yang sebelumnya sudah kita buat.

Opps, error!

Wah, ada error di file Demo.bs.js di baris ke-empat. Mari kita lihat hasil konversinya.

Error require di file Demo.bs.js

Terjadi kesalahan di sintaks require. Hal ini terjadi karena browser belum mengerti sintaks exports dan juga require. Kita butuh bantuan bundler seperti webpack, rollup ataupun parcel agar browser dapat mengeksekusinya. Jika Demo.bs.js kita eksekusi di sisi backend dengan NodeJS, semua bisa berjalan normal karena NodeJS sudah mendukung sintaks require dan juga exports. Mari kita lihat.

Di NodeJS aplikasi berjalan normal

Karena kita ingin eksekusi di browser, mari kita buat project baru dan kita gunakan parcel sebagai bundler. Alasannya, karena parcel menerapkan zero-configuration dibandingkan webpack yang harus melakukan konfigurasi terlebih dahulu. Jika belum, mari kita install parcel terlebih dahulu secara global dengan yarn atau npm. Kemudian kita akan buat folder baru untuk project kita dan buat file index.html.

$ yarn global add parcel-bundler $ mkdir reason-parcel $ cd reason-parcel

File index.html

Buat juga file src/index.re dengan isi hello world terlebih dahulu untuk memastikan parcel berjalan sebagaimana mestinya. Kemudian untuk menjalankan, kita tinggal memanggil perintah parcel index.html.

Placeholder index.re

Dan kita juga butuh file bsconfig.json sebagai penanda bahwa folder ini adalah project Reason. Kita samakan saja dengan konfigurasi di project sebelumnya.

Konfigurasi bsconfig.json

Coba jalankan lagi perintah parcel index.html dan kemungkinan besar akan terjadi error karena project tidak mengetahui keberadaan package bs-platform yang kita install secara global sebelumnya. Dan dari pesan kesalahan seharusnya sudah cukup jelas apa yang harus kita lakukan selanjutnya.

Package bs-platform tidak ditemukan

Kita tinggal menjalankan perintah npm link bs-platform sehingga npm akan me-link project ini ke package bs-platform yang sudah kita install secara global sebelumnya.

$ npm link bs-platform

Jalankan lagi perintah parcel index.html dan aplikasi kita sudah berjalan di http://localhost:1234 dan sudah dapat dibuka di browser dan mendapatkan pesan “Hello, world!” di browser console.

Parcel sudah berhasil menjalankan project Reason!

Sip! Sekarang mari kita buat modul Calc seperti sebelumnya untuk memastikan dapat dieksekusi di browser dengan parcel. Agar berbeda dengan modul Calc sebelumnya, kali ini kita tambahkan type annotation biar lebih jelas dan akan berguna sebagai dokumentasi juga.

Modul Calc dengan fungsi add, dengan type annotation

Sekarang, mari kita panggil fungsi add tersebut di file index.re sebelumnya. Secara otomatis ketika kita membuat file baru, Reason akan menjadikan file Calc sebagai modul sehingga pemanggilannya dapat dilakukan dengan notasi titik atau dot.

Melakukan pemanggilan Modul Calc dan fungsi add.

Hasilnya dapat kita nikmati di console browser seperti berikut.

Hasil pemanggilan fungsi add.

Sekarang mari kita belajar tentang variant dan pattern matching.

Variant, Record dan Pattern Matching

Variant ini adalah salah satu fitur yang tidak semua bahasa pemrograman punya. JavaScript tidak memiliki fitur ini. Sederhananya, kita bisa membuat struktur data sendiri dengan menggunakan variant. Misalnya kita ingin membuat struktur data spesies yang muncul di komik Dragon Ball.

Definisi spesies DragonBall

Kemudian jika kita ingin menciptakan karakter baru dengan spesies tertentu, kita bisa definisikan bentuknya dengan struktur data Record. Record ini mirip object di JavaScript dengan beberapa perbedaan: lebih ringan, cepat, immutable, bentuk dan jumlah field yang baku, harus mendefinisikan tipe datanya.

Jadi untuk menggunakan record kita harus mendefinisikan tipe data dan bentuknya seperti berikut.

Tipe Record characters.

Setelah didefinisikan bentuk dan tipe datanya barulah kita dapat menggunakan record.

Menggunakan record Bejita dengan tipe record characters.

Dan pattern matching adalah fitur yang sangat powerful. Misalnya untuk contoh diatas, kita ingin mencocokkan apakah karakter yang kita definisikan seorang Namek, Saiya, ataupun yang lain.

Mencocokkan berdasarkan species.

Namun, jika kita lihat di editor, misalnya VS Code atau vim ada peringatan bahwa pattern matching masih ada yang kurang, atau pattern matching is not exhaustive enough. Hal seperti ini memang diizinkan di bahasa seperti JavaScript. Tapi bahasa dengan strongly typed biasanya tidak memperbolehkannya. Solusinya kita harus menulis kasus untuk semua spesies. Atau, kita bisa menggunakan notasi underscore untuk menyatakan else atau spesies selain Saiyan atau Namekian.

Support Other species

Binding dan Interop

Seperti yang sudah dijabarkan sebelumnya, interopabilitas Reason dengan JavaScript sangat mudah. Kita bahkan bisa menuliskan sintaks JavaScript dengan bantuan bs.raw().

Interopabilitas dengan bs.raw

Kita juga bisa menulis sintaks JavaScript yang setelah dievaluasi kemudian di binding ke variable Reason.

Dari JavaScript di binding ke Reason

Atau yang lebih mantap, kita bisa menggunakan fungsi di JavaScript dan kemudian di binding atau di mapping ke variable Reason.

Menggunakan fungsi Math.PI JavaScript dan digunakan di Reason.

Kesimpulan

Reason merupakan pilihan menarik karena sintaks-nya yang modern dan pilihan alat bantu yang lengkap. Keunggulan utamanya dari Reason adalah type system yang sangat powerful serta bantuan type inference sehingga kita tidak perlu mendefinisikan semua tipe data. Hal ini sangat membantu teman-teman yang baru belajar sehingga porsi ketikan menjadi lebih sedikit.

Reason dapat dikompilasi menjadi JavaScript dengan optimal dan hasilnya pun mudah dibaca, namun juga dapat dikompilasi ke bytecode. Proses kompilasinya cepat dan apabila terjadi kesalahan, pesan kesalahan sangat detil dan “manusiawi”.

Jadi, tunggu apalagi?! Tidak ada alasan lagi kan untuk tidak memilih Reason?!

Cara Belajar Pemrograman Yang Cepat dan Efisien

2018-09-17T00:00:00Z

Artikel ini akan memaparkan beberapa tips buat teman-teman yang ingin belajar pemorgraman dengan efisien. Seluruh tips disini murni adalah pengalaman pribadi saya, baik yang saya alami sendiri dan juga hasil diskusi dan obrolan dengan teman sesama developer.

“I think everybody in this country should learn how to program a computer because it teaches you how to think.” — Steve Jobs dari Apple Inc.

Kenapa Belajar Pemrograman

Sebelum kita bahas tentang bagaimana cara belajar, alangkah lebih baik jika kita membahas tentang alasan atau motivasi untuk belajar pemrograman. Teman-teman harus menemukan motivasinya sendiri-sendiri terlebih dahulu agar proses belajar bisa lebih lancar dan efisien. Motivasi adalah elemen penting yang seringkali tidak ditemukan ketika ingin belajar pemrograman.

“Masih ada yang ngibul dengan bilang belajar ngoding itu gampang? Percayalah, tidak akan pernah mudah tapi bukan berarti mustahil. — Agung Setiawan dari idrails

Kenapa penting? Karena pemrograman itu adalah hal yang tidak mudah. Dan ketika kita mengalami kesulitan dan bertemu rintangan yang sangat tinggi untuk dilewati, motivasilah yang dapat membantu kita untuk tetap melaju.

Nah buat teman-teman yang sudah dapat motivasi untuk belajar pemrograman, apapun itu bagus. Artinya langkah pertama sudah terlewati. Namun buat teman-teman yang belum menemukan alasan dan motivasi dan kesulitan menemukannya, berikut beberapa hal yang bisa dijadikan motivasi.

Pemrograman Itu Sulit Dipelajari

Kalau belajar pemrograman itu sulit, terus kenapa kita harus belajar pemrograman? Kenapa tidak?! Justru karena susah itu dapat menjadikan alasan kita belajar pemrograman. Jika mudah, semua orang saat ini sudah ngoding dan jadi developer. Karena susah, itulah sebabnya masih banyak kesempatan dan tantangan buat kita untuk menguasai pemrograman.

Pemrograman Melatih Logika Dan Problem Solving

Pemrograman melatih kita mencari masalah dan menemukan solusi atas masalah tersebut. Jika teman-teman ingin mengasah* skill problem solving* yang sangat dibutuhkan di dunia wirausaha atau entrepreneurship, maka belajar pemrograman merupakan langkah yang tepat. Karena pemrograman esensinya adalah proses menemukan solusi atas masalah yang ditemukan.

“Carilah masalah! Ini adalah hal menarik yang harus dilakukan semua orang. Itulah kerjaan gue, mencari masalah. TAPI, tidak berhenti sampai di masalah, kita juga harus mencari solusi atas masalah tersebut. “— Sofian Hadiwijaya dari Warung Pintar.

Otomasi Pekerjaan

Jika teman-teman punya pekerjaan yang boring, berulang dan itu-itu saja, kita bisa meminta bantuan kepada komputer untuk mengerjakannya untuk kita, dengan bantuan pemrograman tentunya. Membersihkan data yang kurang berguna, generate laporan, blast email dan banyak lagi yang bisa kita lakukan dengan bantuan skill programming yang kita miliki sehingga dapat membuat pekerjaan kita menjadi lebih ringan.

Melatih Kerjasama Tim

Cepat atau lambat, suka atau tidak suka di satu titik kita harus berhubungan dengan orang lain. Baik itu teman setim, rekan kerja, atasan, bawahan hingga orang lain yang kita hire untuk melakukan pekerjaan untuk kita. Percaya atau tidak, belajar pemrograman dapat melatih kita bagaimana cara bekerjasama dengan orang lain, terutama bekerja dengan developer lain. Dengan belajar pemrograman kita jadi dapat setidaknya mengetahui bagaimana pola pikir developer sehingga salah persepsi dan miskomunikasi dapat diminimalisir. Misalnya teman-teman punya ide produk atau startup dan ingin meminta pihak ketiga untuk membuat aplikasi untuk kita, akan tetapi kita buta teknologi dan tidak tahu banyak tentang pemrograman harus berhati-hati karena bisa-bisa kita tertipu karena tidak mengetahui teknis, scope pekerjaan dan juga estimasi biaya yang diminta.

Membuat Produk atau Startup Sendiri

Developer adalah sosok yang unik. Kita, developer mampu membuat sesuatu yang tidak terbayangkan dari nol. Istilah kerennya, we can make something out of nothing. Tidak sedikit orang-orang belajar pemrograman hanya untuk menggapai mimpinya memiliki produk sendiri. Jadi berbahagialah kita yang sudah jadi developer, kita sudah memiliki kemampuan membuat sesuatu. Jadi tunggu apalagi?! Buatlah sesuatu dan tunjukkan kepada dunia :)

“…I went through 3–4 years thinking I was going to meet some magical engineer who would build all the stuff I was thinking about. But I never met that person, so I taught myself ASP and MS Access out of a book and got to work just hacking stuff together. I’m still a really shitty programmer but I know enough to hack a prototype together.” — Dennis Crowley, co-founder dari Foursquare dan Dodgeball.

Dan buat yang bercita-cita ingin punya produk atau startup sendiri, segeralah belajar pemrograman.

Masa Depan Cerah

Dunia pemrograman dan software atau aplikasi sedang dalam masa-masa yang menyenangkan. Software menjadi elemen penting dan krusial di segala sisi kehidupan kita. Mulai dari hiburan dengan smart tv, pendidikan dengan online learning, hingga berbagai aplikasi mobile yang kita konsumsi sehari-hari semuanya bergantung kepada *sofware *atau aplikasi yang dibangun oleh developer. Sehingga secara tidak langsung developer jadi *‘kecipratan’, *memiliki nilai ekstra karena kemampuannya membuat sesuatu.

“Software is eating the world, in all sectors. In the future every company will become a software company.” — Mark Andreessen dari Andreessen-Horowitz VC

Selain itu, kemampuan programming dapat juga kita gunakan untuk mencari pekerjaan *freelance *dengan memanfaatkan platform seperti UpWork, Freelancer dan masih banyak lagi. Kesempatan terbuka luas karena seluruh dunia membutuhkan developer.

Bagaimana Cara Belajar Pemrograman

Ok sekarang kita masuk ke pokok pembicaraan. Saya akan memberikan langkah-langkah yang sebaiknya ditempuh untuk belajar pemrograman dan beberapa contoh implementasinya.

Cari Tahu Gaya Belajar Kamu

Ini langkah awal yang sangat penting. Teman-teman harus tahu gaya belajar yang bagaimana yang cocok untuk masing-masing individu. Tidak ada cara yang salah atau benar. Yang salah adalah meniru cara belajar orang lain yang ternyata tidak sesuai dengan gaya belajar kita. Semua orang punya cara belajar masing-masing. Ada yang belajar sangat efektif dengan membaca baik itu membaca buku, dokumentasi, artikel atau bahkan membaca source code orang.

Kemudian untuk teman-teman yang punya gaya belajar visual bisa belajar dari video online course seperti Udacity, Udemy atau bahkan video di youtube yang resource-nya berlimpah baik yang gratisan atau yang berbayar. Yang perlu diingat ketika sebuah video atau online course rasanya ngga nyambung, jangan dipaksakan. Gaya penyampaian di video pun bervariasi. Ada yang menggunakan pendekatan praktikal, teoritikal, menggunakan studi kasus dan lain sebagainya. Cari saja yang paling cocok dan nyambung dengan kita.

Bagaimana dengan teman-teman yang audio? Tentu saja bisa. Teman-teman bisa belajar dari audio books atau podcast. Saya adalah salah satu orang yang suka sekali mendengarkan podcast terutama ketika sedang dalam perjalanan dari dan ke kantor. Makanya saya juga memproduksi podcast https://ceritanyadeveloper.com.

Sekali lagi, tidak ada yang salah dengan cara belajar kita. Dan yang membuat lebih menarik adalah kita juga bisa kombinasikan gaya diatas sehingga learning experience yang kita dapatkan semakin ‘kaya’. Dan hal ini yang biasa saya lakukan ketika ingin belajar hal baru. Saya biasanya mulai dengan video lessons ditambah dengan mendengarkan podcast ketika perjalanan dari dan ke kantor. Saya mendengarkan podcast yang berkaitan dengan topik yang ingin saya pelajari. Tidak harus langsung mengerti, yang penting dikonsumsi saja semua dulu. Dan ketika ingin menggali lebih dalam, baru saya mencari dan membaca buku ataupun dokumentasi.

Belajar Skill Dasar atau Fundamental

Saya adalah tipe orang yang sangat praktikal dan sangat senang belajar dengan cara yang praktikal pula seperti belajar dari studi kasus ataupun belajar hal baru sambil mengerjakan proyek. Dan apabila teman-teman juga punya gaya yang sama, belajarlah sesuatu sambil memperkuat skill fundamental kita.

Carilah library atau framework yang tidak hanya bagus untuk dipelajari, tetapi juga mampu mengasah skill fundamental kita. Misalnya saja React membantu saya memperkuat fundamental JavaScript saya. Saya jadi belajar hal-hal menarik seperti filter, map, reduce, binding, arrow function hingga scoping saat saya mendalami React. Dan saya jadi lebih tertarik kepada functional programming gara-gara React dan Redux.

Begitu juga dengan web framework Flask. Pertama kali belajar Python, saya menggunakan Django sebagai web framework pilihan. Tapi karena fundamental Python saya masih kurang, saya merasa bingung dan kurang mengerti cara kerja Django, it’s just works! Kemudian saya coba belajar framework lain, Pyramid dan akhirnya bertemu yang cocok di framework Flask. Fundamental saya sangat terasah dengan framework Flask karena Flask adalah framework yang isinya sangat minimal. Banyak hal-hal yang harus diurus dan dikerjakan sendiri. Sehingga membantu saya mengerti banyak hal tentang Python itu sendiri. Mungkin banyak orang yang kurang menyukai sebuah framework minimal seperti Flask atau Express karena banyak hal yang harus dikerjakan sendiri, akan tetapi karena tujuan saya sambil belajar Python hal-hal yang dikerjakan sendiri justru membuat saya jadi lebih mengerti Python dan cara kerja framework tersebut.

Jadi carilah framework atau library yang selain ok juga mampu mengasah skill dasar kita sebagai developer. Buat saya React dan Flask, buat teman-teman tentu saja bisa berbeda dengan pilihan saya.

Super Fokus

Nah hal ini yang kadang-kadang luput dari perhatian. Ketika belajar hal baru, sebaiknya kita fokus kepada satu hal di satu waktu, one step at a time. Jangan langsung belajar semua sekaligus. Misalnya ingin belajar React, ya fokus belajar React saja, ngga usah belajar React Router, Redux dan teman-temannya. Mau belajar Redux, ya fokus belajar Redux-nya saja, bahkan sebisa mungkin belajar Redux tanpa React dulu. Ketika sudah mengerti baru deh digabungkan sehingga learning curve-nya jadi lebih ringan.

Begitu juga di sisi backend. Belajar web framework terlebih dahulu, tanpa database. Setelah dirasa kompeten barulah belajar database dan koneksikan ke web framework tersebut. Intinya jangan belajar banyak hal sekaligus. Satu per satu.

Coding setiap hari

Langkah berikutnya ya tinggal ngoding aja sesering mungkin. Tidak masalah bahasa pemrogramannya atau menggunakan framework apa. Sempatkan untuk coding setiap hari.

Dengan melakukan latihan coding setiap hari, kita menjaga momentum, *flow *dan disiplin. Layaknya latihan yang diberikan oleh Mr. Miyagi dalam film Karate Kid.

Wax on wax off

Awalnya berat memang. Jika terasa berat, ingat-ingat lagi motivasi kita belajar. Dan teman-teman bisa lihat bagaimana semua orang, bahkan expert sekalipun pernah mengalaminya.

I failed to learn programming at least 5 times
— Denny Britz (@dennybritz) August 21, 2017

Everyone is a noob, and if they're not a noob, they're a specialist, so they're just a noob at everything else
— TJ Holowaychuk 🙃 (@tjholowaychuk) August 21, 2017

If you're going to sit there and tell me you never struggled as a programmer, and that you always just got it, I'm calling BS.
— Preethi Kasireddy (@iam_preethi) August 21, 2017

Intinya, maju terus, ngoding terus. Jika masih belum berhasil ulangi lagi dari awal. Ngoding aja, tidak perlu mencari best practice untuk tahapan ini. Buat sesuatu, apapun itu. Yang penting teruslah ngoding.

Berikan Kesempatan Diri

Berikan kesempatan diri kita untuk menjadi bodoh, *give yourself permission to suck*. Tidak masalah kita bodoh dan merasa bodoh, justru kita harus merasa bodoh agar menjadi tidak bodoh lagi di masa depan. Kita akan tetap bodoh hingga kita menjadi bisa dan tidak bodoh lagi :) Dan menjadi bodoh bukanlah masalah. Jangan tanggapi pendapat orang lain.

Belajar Secara Imersif

Jika kamu belajar sebuah bahasa, coba gunakan bahasa tersebut untuk melakukan apapun. Sulit pasti, terutama diawal tapi ini adalah cara tercepat untuk menguasai sesuatu. Sama saja seperti kita belajar bahasa Inggris misalnya. Akan jauh lebih cepat apabila setiap hari kita menggunakan bahasa Inggris, apalagi jika kita berkesempatan mengunjungi negara yang menggunakan bahasa Inggris.

Gunakan media belajar sebanyak mungkin, tonton video tutorial, mendengarkan podcast, baca artikel terkait dan lihat bagaimana expert melakukannya sehingga kita juga mendapatkan tambahan motivasi dan inspirasi.

Manfaatkan Deadline

“A goal is a dream with a deadline” — Napoleon Hill

Tips ini adalah favorit saya. Karena saya bekerja dan belajar sangat efektif dengan deadline. Ada yang bilang SKS atau sistem kebut semalam adalah hal yang buruk. Buat saya tidak :) Saya adalah procastination sejati ;) Jadi saya butuh deadline untuk pressure. Apabila saya tidak menetapkan deadline, saya tidak akan pernah selesai belajar atau menyelesaikan pekerjaan saya. Saya akan menunda hingga mendekati deadline. Itulah sebabnya buat saya deadline itu penting.

Misalnya ketika skripsi yang seharusnya kita kerjakan selama enam bulan atau satu semester. Bisakah kita kerjakan selama dua bulan atau bahkan dua minggu?! Pasti jawabannya tidak. Tapi ketika kita akan mengerjakannya, biasanya kita menganggap enteng, “Ah, masih enam bulan lagi, santai lah.”. Selang dua bulan “Masih ada empat bulan kok, nge-game dulu aja, nanti setelah itu baru mulai ngerjain skripsi.”. Sisa dua bulan, baru deh panik dan mulai mengerjakan.

Jadi deadline dapat membantu kita menambah motivasi dan juga fokus. Motivasi jika skripsi tidak kita selesaikan, kita harus menunda rencana wisuda, dan harus membayar uang semester dan lain sebagainya. Sehingga memaksa kita untuk menyelesaikannya apapun yang terjadi, harus selesai. Saya menyebut fenomena ini sebagai The Power of Kepepet.

Begitu juga dengan belajar. Buatlah sebuah deadline yang jika tidak kita selesaikan pada waktunya ada semacam hukuman atau punishment. Misalnya apabila saya tidak bisa menguasai React, project yang sedang saya kerjakan tidak akan selesai, dan mengakibatkan uang proyek tidak cair dan lain sebagainya. The Power of Kepepet.

Jadi untuk belajar pemrograman, tidak ada cara yang benar atau yang salah. Yang ada, cara belajar yang efektif dan tidak efektif. Beberapa hal yang harus diperhatikan ketika akan belajar pemrograman adalah motivasi, carilah cara belajar yang efisien dan efektif versi kamu, belajar hal fundamental, fokus dan terus belajar. Terakhir, jangan lupa set deadline agar kamu mendapatkan motivasi tambahan dan menjadi super s̵a̵i̵y̵a̵ developer.

Jika teman-teman punya cara atau gaya belajar pemrograman yang menarik dan belum di-mention di artikel ini, share dong di kolom komentar. Pasti akan berguna untuk teman-teman yang lain juga.

Machine Learning for Web Developers

2018-08-20T00:00:00Z

Berikut adalah cuplikan video sesi yang saya bawakan di event Product Development Conference TechInAsia 2018 di Juli 2018 yang lalu. Kali ini saya membawakan topik yang sedang happening, tentang Machine Learning.

Sebenarnya kepikiran membawakan topik ini karena pas diundang Facebook ke acara F8 Developer Conference beberapa bulan yang lalu. Disana saya bertemu idola saya Eric Nakagawa dan dia menyarankan saya dan developer di Indonesia untuk segera belajar tentang Machine Learning. Karena menurutnya, Artificial Intelligence dan Machine Learning adalah masa depan.

Untuk cerita lengkapnya bisa baca artikel medium yang saya tulis dalam bentuk serial (bagian 1, bagian 2, bagian 3 dan bagian 4).

Tujuan utama dari sesi ini sebenarnya adalah untuk mengajak teman-teman semua belajar bareng sebenarnya :) Saya juga baru mulai belajar Machine Learning dan akan sangat membantu sekali jika ada teman-teman yang kebetulan membaca artikel ini juga tertarik untuk belajar. Karena belajar bareng lebih keren dan lebih efektif. Jadi kalau teman-teman tertarik belajar Machine Learning dan Artificial Intelligence, kirim email ke saya dan mari kita belajar bersama :)

Slide: Slideshare

Repo: GitHub

Referensi

Artikel ini dirangkum dari episode ke-19 RandomScreencast.

Tutorial Singkat Tentang Tensorflow.js

2018-07-25T00:00:00Z

Tensorflow.js adalah sebuah library yang dibangun diatas deeplearn.js untuk membuat modul deep learninglangsung dari web browser! Deep learning sendiri adalah sebuah cabang dari machine learning dan juga artificial intelligence. Dengan Tensorflow.js kita dapat membuat implementasi Convolutional Neural Network (CNN), Recurrent Neural Network (RNN) dan lain sebagainya.

Tensorflow sendiri merupakan library yang ditulis dengan bahasa C++ dan biasanya digunakan dengan bahasa pemrograman Python. Dengan adanya tensorflow.js, kita sekarang sudah bisa menggunakan beberapa fitur tensorflow di sisi web browser tanpa harus dibebani oleh instalasi yang cukup ‘menantang’. Dengan Tensorflow.js kita tinggal melakukan instalasi dengan npm install @tensorflow/tfjs ataupun juga dengan menggunakan CDN.

Berikut ini adalah cuplikan kode untuk memprediksi harga rumah berdasarkan luas tanah/luas bangunan.

import * as tf from "@tensorflow/tfjs";

// Define a model for linear regression.
const model = tf.sequential();
model.add(tf.layers.dense({ units: 1, inputShape: [1] }));

// Prepare the model for training: Specify the loss and the optimizer.
model.compile({ loss: "meanSquaredError", optimizer: "sgd" });

// Provide some housing data
const xs = tf.tensor1d([7.9, 8.1, 8.3, 8.5, 8.6, 8.4]);
const ys = tf.tensor1d([738967, 742371, 750984, 759598, 763905, 755291]);

// Train the model using the data provided
model.fit(xs, ys).then(() => {
  const form = document.getElementById("myform");
  const inputText = document.getElementById("inputText");
  const predictPlaceholder = document.getElementById("predict");

  form.addEventListener("submit", (e) => {
    e.preventDefault();
    // Use the model to predict or to inference
    const output = model.predict(
      tf.tensor2d([parseFloat(inputText.value) / 10], [1, 1]),
    );
    predictPlaceholder.innerHTML = formatting(Array.from(output.dataSync())[0]);
  });
});

const formatting = (num) => {
  num *= 1000;
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
};

Untuk mengetahui lebih lanjut silakan simak video berikut ini.

Repo: GitHub

Referensi

Artikel ini dirangkum dari episode ke-18 randomscreencast.com.

Rangkuman Acara Developer Circles Jakarta Build Day 2018

2018-07-12T00:00:00Z

Meetup DeveloperCircles Jakarta Build Day 2018

Di awal bulan juli ini DevC Jakarta baru saja selesai mengadakan meetup yang secara regular dilakukan setiap bulannya. Berbeda dengan meetup di bulan sebelumnya, meetup kali ini cukup spesial. Ya, DevC Jakarta menggelar sebuah event global namanya Build Day 2018 . DevC diseluruh dunia sudah dan akan menggelar perhelatan serupa.

Build Day sendiri merupakan inisiasi dari. Facebook dalam rangka ‘merangsang’ dan menantang developer dan makers untuk membuat sebuah karya dengan tema community building. Seperti yang disampaikan di F8 Developer Conference beberapa waktu yang lalu.

Dan karena ini adalah momen spesial, DevC Jakarta melakukannya dengan cara yang spesial pula. Jika meetup bulanan dilakukan satu hari, kali ini kita melakukannya dua hari berturut-turut! Hari pertama kita menggelar acara TechTalk untuk memberi inspirasi dan aspirasi disusul dengan acara Ideation untuk memformulasikan ide menjadi sebuah produk yang siap untuk dikembangkan. Tujuan akhirnya adalah mengajak teman-teman developer dan maker untuk mengikuti Build Day yang diikuti oleh ribuan orang diseluruh dunia.

Lebih spesial lagi, TechTalk kali ini mendatangkan dua orang pembicara keren. Mereka berdua adalah developer Facebook yang berasal dari Indonesia! TechTalk dibuka oleh Mas Ziyad Bazed yang berbagi insight tentang bagaimana Facebook membangun aplikasi yang secure. Dilanjutkan dengan Mas Riandy yang memberikan tips dan trik mengembangkan chatbot terutama untuk platform Messenger.

Insight Menarik Dari Dua Engineer Facebook Asal Indonesia

Mas Ziyad memulai presentasi dengan memperkenalkan dirinya sebagai Engineer yang sudah berkarya selama kurang lebih empat tahun di Facebook dan juga memperlihatkan screenshot dari aplikasi Facebook Lite, sebuah aplikasi Facebook versi ringan untuk mengakomodir user dengan keterbatasan data dan device. Kelebihan dari Facebook Lite ini adalah mampu menghemat data dan lebih ramah terutama dalam penggunaan memori handphone.

Saya jadi teringat bagaimana Mas Ziyad berbagi ilmu ketika mengisi acara serupa tahun 2017 silam. Saat itu Mas Ziyad berbicara tentang teknologi dibelakang Facebook Lite dan seputar development aplikasi di platform Android.

Sesi Ziyad Bazed

Masuk ke topik utama, Mas Ziyad memaparkan beberapa hal terkait kultur pengembangan aplikasi di internal Facebook seperti kultur code review, continuous delivery, monorepo dan mono branch hingga perjalanan dari perkembangan library/framework yang digunakan oleh facebook dari awal hingga saat ini. Seperti yang kita ketahui bersama, Facebook berawal dari sebuah media sosial online hingga sekarang memiliki berbagai produk lainnya seperti Instagram, Oculus, WhatsApp, Messenger dan lain sebagainya. Berikut beberapa hal-hal menarik yang saya dapatkan:

Facebook menerapkan code review (tentu saja)
Facebook juga melakukan crowdsourcing untuk membasmi bugs (bountyhunter) dan mengeluarkan sekitar 6 juta dolar untuk itu
Facebook menerapkan* open codebase* dan monorepo sehingga semua code dari seluruh produk facebook dapat diakses oleh seluruh karyawan facebook dan tentunya dapat berkontribusi kepada produk yang diinginkan.
Facebook juga menerapkan mono branch. Hanya branch master. Sedikit mengejutkan karena biasanya untuk best practice ada beberapa branch yang digunakan seperti devel atau development branch. Dengan menerapkan mono branch, proses code review dan merge harus benar-benar ‘rapi’ sehingga kemungkinan yang dapat merusak branch master harus diminimalisir.
Seluruh produk Facebook menggunakan stack yang minimal. Produk yang menggunakan konsep microservice atau micro frontend dengan teknologi yang berbeda hampir tidak ada. Stack yang digunakan cukup straightforward dan no brainer.
Seperti yang kita ketahui bersama, Facebook menggunakan PHP saat pengembangan awal. Setelah beberapa waktu, Facebook kemudian mengembangkan sebuah bahasa baru, HackLang yang merupakan pengembangan lebih lengkap dari PHP, terutama beberapa fitur yang dibutuhkan Facebook dan belum tersedia di PHP saat itu dan juga ditambah dengan beberapa tweak sehingga mampu mencapai performa yang diinginkan oleh Facebook.
Sudah seperti rahasia umum di kalangan developer Facebook, ketika ada indikasi bahwa yang mereka lakukan adalah hal berbahaya biasanya para developer ini menandainya dengan membuat variable yang menunjukkan hal tersebut. Misalnya saja dangerouslySetInnerHTML, UNSAFE_componentWillMount dan lain sebagainya.
Tim engineering Facebook tidak memiliki tim tester atau QA. Engineer sendiri yang bertanggungjawab melakukan testing terhadap code-nya.

Building Your Chatbot on Messenger

Sesi TechTalk kemudian dilanjutkan oleh Mas Riandy yang membawakan topik tentang bagaimana dan mengapa membuat messenger bot. Ada lima langkah mudah dalam membuat messenger bot:

Generate access token
Menerima data dengan webhooks
Mengirimkan data ke Graph API. Bisa menggunakan template seperti button, generic, receipt, carousel, dll.
Buat bot kamu semakin mudah ditemukan dengan:
Plugin “send to messenger”
Shortlink seperti m.me/CNN
Messenger code, yang lebih keren dari qr code
Persenjatai bot kamu dengan kemampuan bahasa dengan wit.ai

Sesi Mas Riandy

Mas Riandy juga membahas. beberapa fitur keren dari Messenger seperti card, user’s identity, kemampuan menampilkan web dengan webview, qr code yang keren dan beda, dll.

Kemudian Mas Riandy juga membahas tentang bagaimana sebuah bot sebenarnya bekerja di belakang layar. Secara sederhana, sebenarnya hanya menggunakan dua API, yaitu send dan receive.

Dan untuk membuat sebuah bot lebih menarik, bot messenger juga dapat dipersenjatai dengan teknik Natural Language Processing atau NLP dengan bantuan wit.ai ataupun produk sejenis seperti dialogflow, dan lain sebagainya.

Hari kedua

Beberapa hari sebelum acara dimulai, para peserta yang sudah memiliki ide atau yang belum diminta untuk mengisi form pendaftaran. Dari 105 pendaftar, ada 40 peserta terpilih yang berkesempatan mengikuti acara di hari kedua yang kita namakan Ideathon. Konsepnya mirip dengan hackathon, bedanya adalah ini baru tahap formulasi ide jadi belum ada proses development aplikasi di tahapan ini.

Sesi mentoring Ideathon

Tujuan Ideathon ini adalah untuk melatih kreatifitas sekaligus mendorong teman-teman developer dan maker untuk mengikuti Build Day yang diadakan secara global oleh Facebook.

Dan agar kesempatan menang lebih tinggi, Ideathon juga menghadirkan mentor-mentor dan juri ternama. Berikut beberapa diantaranya:

Russel Siregar, Product Manager at Quipper
Rosidi Pratama, Product Manager at Kumparan
Rian Agustama, Product Manager at Bukalapak
Bima Arafah, Head of Product at Kumparan
I Gede Agastya Darma Laksana, Engineer at Kumparan
Winner Manurung, Product Manager at Blibli.com
Irvan Adhitya, Engineer at Style Theory
Willy Anderson, Product Manager at Blibli.com
Rizki Ridha, UX Researcher at Blibli.com
Irfan Maulana, Engineer at bizzy
Alfandio Greshaldi, UX Researcher at Blibli.com
Abdurrachman Mappuji, Engineer at MidTrans

Mentor-mentor kemudian dibagi kedalam grup-grup dan memberikan insight terhadap ide awal peserta hingga mengarahkan mereka untuk memikirkan fitur-fitur dari berbagai sisi baik itu produk, UI/UX hingga teknologi yang digunakan.

Ideathon ditutup dengan presentasi dari seluruh kelompok dan ada dua yang mendapatkan award: Best Idea dan Favorite Idea pilihan komunitas.

Berikut adalah ketujuh ide yang masuk babak penjurian:

Termentori — https://m.facebook.com/groups/313087542449350?view=permalink&id=468718680219568
Taninesia — https://m.facebook.com/groups/313087542449350?view=permalink&id=468719696886133
Goyong — https://m.facebook.com/groups/313087542449350?view=permalink&id=468749936883109
Traveasy — https://m.facebook.com/groups/313087542449350?view=permalink&id=468743473550422
Doktersiaga — https://www.facebook.com/groups/DevCJakarta/permalink/468747403550029/
Vigibot — https://m.facebook.com/groups/313087542449350?view=permalink&id=468722373552532
Educare — https://m.facebook.com/groups/313087542449350?view=permalink&id=468721536885949

Dan pemenang best idea adalah DoktorSiaga, tim yang beranggotakan tiga orang: Fatah Iskandar Akbar, Fadelli Yahya Polosoro, dan Erwin RA.

Sedangkan ide favorit jatuh kepada tim Taninesia berdasarkan jumlah like dan komentar yang berhasil mereka kumpulkan di Facebook. Tim Taninesia sendiri, yang beranggotakan enam orang, memiliki fokus pada para petani Indonesia. Mirip dengan DoktorSiaga, Taninesia juga merupakan chatbot.

Selamat buat tim yang menang. Yang belum berhasil tetap bisa mengikuti Facebook Community Challenge 2018 yang deadline-nya tanggal 26 Juli 2018. Hadiah 30 ribu US dolar menunggu!

Sebagai informasi tambahan, produk buatan teman-teman dari bandung dengan nama BurhanBot berhasil mendapatkan peringkat ketiga di perhelatan yang sama di tahun lalu.

Ditunggu kehadirannya di even DeveloperCircles berikutnya dan buat teman-teman yang tertarik untuk bergabung dengan komunitas DeveloperCircles Jakarta, silakan gabung di grup kita di https://www.facebook.com/groups/DevCJakarta/.

F8 Silicon Valley Trip Day 3–4

2018-05-28T00:00:00Z

Ini adalah cerita berseri tentang perjalanan saya dan teman-teman Facebook Developer Circle Leads ke Silicon Valley dalam rangka mengikuti Facebook F8 Developer Conference. Ini adalah bagian terakhir dari rangkaian cerita perjalanan yang seru ini. Ikuti dari bagian 0 , bagian 1 dan bagian 2 supaya mendapatkan jalan ceritanya secara keseluruhan.

Perhelatan F8 Conference telah usai. Tapi cerita tidak usai sampai disini karena semua leads dari Indonesia sepakat untuk extend sampai hari sabtu. Saya dan empat leads lainnya menetap di Bay Area sementara sisanya melalangbuana ke Los Angeles.

Ngapain di Bay Area? Kita berencana mau keliling kantor-kantor tech startup ternama seperti Google, ~~Apple, Intel, Nasa~~, GitHub, Dropbox, Zynga, Airbnb, Pinterest, Heroku dan lain sebagainya.

Tapi sebelum itu, kita harus checkout dulu dari hotel masing-masing karena Facebook cuma meng-cover biaya kita sampai hari ketiga saja. Karena itu kita berlima checkout dan order rumah besar dipuncak Alum Rock via Airbnb 😃.

Mansion at Alum Rock

Menuju Mountain View

Rencana utama tur hari pertama ini adalah mengunjungi Intel, Nasa dan Google tentunya. Di Intel kabarnya ada museum komputer yang keren banget. Nasa juga punya museum yang bisa dikunjungi Nasa AMES Research Center namanya. Apple juga punya Apple Park Visitor Center yang layak dikunjungi. Karena keterbatasan waktu dan lokasi kita putuskan ingin mengunjungi museum Nasa dan Googleplex saja.

Tram, kereta lambat.

Sayangnya ngga keburu juga, museum Nasa sudah keburu tutup. Mungkin karena kita naik tram dan sempat salah turun (my bad). Kita naik tram dari Alum Rock menuju Downtown Mountain View sebelum bergerak ke Googleplex, kantor Google.

Dari Alum Rock(kiri) ke Mountain View

Ditengah perjalanan kita sempat melewati kantor Samsung dan ketika ganti tram di stasiun, kita sempatkan berfoto-ria.

Didepan Kantor Samsung

Downtown Mountain View

Sesampainya di Downtown Mountain View, perut sudah terasa lapar. Jalanlah kita menyusuri downtown mencari secercah tempat makan halal. Downtown Mountain View ini unik sekali. Beberapa sudut seperti di film-film Hollywood.

Sudut ini mengingatkan saya kepada satu scene di film Spiderman.

Downtown Mountain View

Kita tidak terlalu banyak melestarikan momen kita disana karena perut sudah semakin lapar. Hingga akhirnya kita menemukan sebuah cafe menarik, namanya Cafe Baklava. Cafe ini menyuguhi makanan khas mediterania, khususnya Turki. Meskipun panas terik, (kita disana sekitar jam 6–7 malam, disana matahari mulai tenggelam jam 9-an) kita putuskan untuk memilih tempat duduk yang diluar. Keputusan yang salah, pastinya.

Panas cuy!

Setelah bingung memilih makanan, melihat menu dan di-sort by harga, kita memilih Lamb Pizza. Setelah menunggu cukup lama akhirnya dan beberapa kali refill air putih, akhirnya makananannya datang juga. Ada yang aneh, kita pesan pizza kok yang muncul roti ya?

Roti makanan pembuka

Karena sudah lapar, apapun yang ada didepan mata kita lahap saja. Rotinya ada kandungan lamb-nya, rasa-rasanya. Setelah makanan lenyap sekejap mata, dan karena sudah mulai kepanasan, kita langsung beranjak dan bergegas ke Googleplex. Setelah bayar (terimakasih Om Luri sudah mentraktir kita-kita) kita dikagetkan oleh waitress yang mengabari bahwa pizza yang kita pesan masih dalam proses pembuatan dan dia juga meminta maaf karena sedikit lama. Loh?! Jadi yang tadi kita makan apa dong?!

Lamb Pizza yang sebenarnya

Ternyata yang tadi kita kira roti pizza dengan aroma kambing adalah roti biasa sebagai makanan pembuka! Dan sebenarnya roti itu ngga ada rasa kambingnya sama sekali. Itu murni hanya halusinasi kita saja. Kenyanglah kita tertawa ngakak tiada henti. Dan setelah kenyang (tertawa), dan juga melahap habis pizza-nya, kita bergegas menuju Googleplex.

Di Kawasan Googleplex

Sesampainya di Googleplex, kita langsung menaiki sepeda yang disediakan Google untuk berkeliling area Googleplex yang super luas! Sepeda ini memang disediakan sebagai kendaraan untuk karyawan Google berkeliling Googleplex. Kabarnya sepeda ini hanya boleh dinaiki oleh karyawan Google. Tapi kita cuek aja dan ternyata ngga ada satpam yang mengejar kita, untungnya.

Sulitnya mengendari sepeda sambil selfie.

Seperti biasa, kita sempatkan untuk melesarikan momen ini dengan foto-foto. A lot of photos! Soalnya Googleplex ini cukup instagramable. Kita foto di patung Android terbaru Oreo (saat artikel ini dipublish mungkin sudah ganti Android P). Dan juga kita foto-foto di kuburan Android, sebuah tempat dimana patung Android yang sudah lewat masanya seperti Donut, Eclair, Jellybean, dll ditempatkan. Sayangnya toko suvenir sudah tutup juga jadi ngga bisa belanja swag.

Bersama maskot Android Oreo

Google Merchandise Store

Android Lawn Statues

Jika teman-teman ingin tur kedalam kantornya Google, kita harus punya kontak karyawan Google dan setiap karyawan punya hak untuk memberikan tur hingga kedalam kantor Google. Kebetulan saya mengenal beberapa karyawan Google. Hanya sayangnya pada saat itu para personel Google sedang sibuk mempersiapkan Google I/O sehingga mereka tidak bisa ‘menjamu’ kita untuk tur kedalam kantornya.

Email dari salah satu karyawan Google

Setelah puas berkeliling Googleplex, kita kemudian menuju ke tempat makan sebelum kembali pulang ke penginapan.

Golden Gate Bridge

Besok paginya kita memulai lagi petualangan kita di Bay Area. Destinasi pertama yang dikunjungi adalah Golden Gate Bridge, itu loh jembatan merah yang terkenal itu.

Adegan golden gate bridge di film x-men.

Golden Gate saat itu sedang berkabut

Setelah puas foto-foto dan membeli beberapa merchendise, kemudian kita bergerak menuju San Francisco untuk mengunjungi beberapa kantor-kantor tech company ternama.

Tour de San Francisco

Rencana ini agak gambling sebenarnya. Kalau ngga punya contact person di tech company tersebut ngga mungkin bisa masuk ke kantornya. Berhubung sudah terlanjur, ya show must go on. Jadilah kita menuju ke area perkantoran para startup tersebut.

Setelah sampai, kita langsung menuju ke kantor GitHub. Sayang banget karena tur ke kantor GitHub untuk publik sudah ditiadakan. Ya sudah, kita foto-foto didepan pintunya aja.

Didepan kantor GitHub

Jika ada yang beruntung dapat tur masuk kedalam kantornya, berikut kira-kira gambaran bagian dalamnya.

Foto diambil dari officelovin.com

Setelah dari GitHub, saatnya mengisi perut. Kita kembali mencari tempat makan di sekitar area perkantoran ini. Sambil mencari kita juga melewati kantor Ubisoft. Perusahaan game asal London ini ternyata punya kantor juga di San Francisco.

Di Depan Kantor Ubisoft

Dan berikut tampak dalam kantor Ubisoft seperti yang dirangkum oleh dynamitedigital.com.

Dan juga melewati sebuah stadion yang cukup megah, AT&T Park. Kandang bagi tim Major League Baseball San Francisco Giants.

Kemudian kita melipir dan makan di Umami Burger. Kali ini makanannya cukup straightforward, jadi tidak ada kejadian lucu seperti yang terjadi di Cafe Baklava kemarin. Sambil makan kita juga merencakanan ulang rute perjalanan kita supaya optimal. Karena kita jalan kaki, jadi rute harus super optimal :)

Kemudian petualangan pun dilanjutkan kembali. First stop, Dropbox. Kantor Dropbox agak sedikit berbeda karena gedungnya cukup besar dan ada beberapa gedung dalam satu kompleks.

Foto kompleks perkantoran Dropbox diambil dari Google Maps

Kita melihat sepertinya ada sekelompok orang yang baru selesai tur, karena itu kita memberanikan diri untuk bertanya tentang tur ke resepsionis. Ternyata memang tur tidak dilakukan untuk publik. Mungkin mereka adalah sekawanan mahasiswa fresh graduate atau calon intern.

Tapi kita tidak patah arang, kita tetap diperbolehkan foto didepan kantor yang ada logonya. Fair enough.

Penasaran dengan tampak dalamnya? Bisa dicek di tautan berikut.

Foto diambil dari situs officelovin.com

Selanjutnya kita menuju ke kantor Pinterest. Kita sudah mencoba menembus barikade front office-nya dengan pura-pura kebelet dan mau ke toilet. Tapi belum berhasil, alhasil kita cukup foto-foto dari luar kantornya. Oh iya, di San Francisco Pinterest punya dua kantor yang terpisah 2–3 blok.

Foto dari luar kantor Pinterest

Foto didalam kantor Pinterest. Diambil dari officelovin.com

Kemudian kita berjalan lagi menyusuri kawasan tech company di San Francisco dan sampailah kita di kantor Heroku. Agak sepi apa mungkin sudah pindah atau memang sudah jam bubaran kantor?! Masih menjadi misteri.

Apakah benar ini kantor Heroku?!

Jika teman-teman penasaran ingin tahu bagaimana nuansa kantornya, bisa lihat di link berikut.

Seperti ini kantor Heroku dari dalam. Foto diambil dari officelovin.com

Perjalanan kita lanjutkan hingga secara tidak sengaja bertemu dengan sebuah gedung yang ditutupi logo anjing lucu. Ya, kita ternyata melewati kantor perusahaan game Zynga! Ternyata itu adalah bagian belakang dari gedung kantornya.

Bagian belakang kantor Zynga.

Dan selang beberapa langkah kita akhirnya sampai di depan kantornya.

Tampak depan kantor Zynga.

Kalau teman-teman masuk kedalamnya, wah dijamin keren banget! Mau tahu isi dalemannya seperti apa? Nih bisa diintip disini.

Dan persinggahan terakhir kita di tur tech company kali ini adalah Airbnb. Untungnya kantor Airbnb punya lobby yang dibuka untuk umum, jadi lumayan bisa ngelempengin kaki disana.

Ngaso di lobby Airbnb

Lucunya, kantor Airbnb ini ngga ada logonya atau tanda-tanda bahwa ini adalah kantor Airbnb. Tapi ini bener kok kantor Airbnb, kita (Firdaus) sempat ngobrol dengan salah satu data scientist Airbnb yang ternyata berasal dari negeri tetangga, Malaysia. Dan dia juga baru sadar kantornya ngga ada logonya.

Dan selesai sudah tur tech company kita. Tapi sebelum pulang ke penginapan, kita menyempatkan untuk mengunjungi daerah pantai San Francisco, Pier 39 dan Fisherman’s Wharf.

Pier 39 dan Fisherman’s Wharf

Pier 39 ini seperti ‘ancol’-nya San Francisco. Cukup ramai pengunjung, salah satu daya tariknya adalah pemandangan yang sangat indah. Kita bisa melihat sisi lain kota San Francisco dari sini.

Sisi lain San Francisco

Kita juga bisa menyaksikan sebuah penjara ditengah pulau, Alcatraz. Penggemar film x-men pasti tahu penjara seperti apa Alcatraz itu. Bahkan kita bisa mengunjungi pulau tersebut dengan menggunakan kapal feri dari Pier 39 ini.

Alcatraz dari kejauhan

Dan pemandangan terakhir yang bisa kita saksikan adalah singa laut yang sedang berjemur jika musim panas tiba.

Setelah bergaya menjadi model dadakan disekitar sini, karena memang pemandangannya sangat, sangat indah, kemudian kita sempatkan juga mencari suvenir buat oleh-oleh sebelum akhirnya pulang ke penginapan.

Sampai dirumah, istirahat dan waktunya mengisi perut. Setelah berjalan-jalan ditempat yang cukup fancy dan makan siang ditempat yang fancy juga. Coba tebak makan malam kita apa? Buat yang penasaran, bisa cek video berikut hasil rekaman Pak Bambang Wahyudi.

Your browser does not support video.

Dengan demikian berakhir sudah perjalanan ke Silicon Valley kali ini. Kritik dan saran silakan dikirimkan via merpati pos 🕊️. Jika ingin mendengarkan laporan perjalanan saya ke kota-kota lainnya, silakan sponsori saya untuk tiket pesawat dengan segala akomodasinya 😈. Sampai bertemu di lain kesempatan.

Terimakasih banyak saya ucapkan untuk komunitas facebook DevC Jakarta karena tanpa kalian kita para leads tidak akan mendapatkan kesempatan langka ini. Terimakasih juga untuk Facebook yang sudah mensponsori kita untuk tiket, akomodasi dan acara-acara keren selama disana. Dan tak lupa juga terimakasih banyak Hacktiv8 untuk waktu dan uang sakunya :)

F8 Silicon Valley Trip Day 2

2018-05-21T00:00:00Z

Ini adalah cerita berseri tentang perjalanan saya dan teman-teman Facebook Developer Circle Leads ke Silicon Valley dalam rangka mengikuti Facebook F8 Developer Conference. Ikuti dari bagian 0 , dan bagian 1 supaya mendapatkan jalan ceritanya secara keseluruhan.

Tidak mau salah strategi lagi, F8 hari kedua saya fokuskan untuk menyaksikan berbagai talk yang menarik. Satu hal menarik yang saya perhatikan dari conference ini adalah setiap habis sesi talk, speaker mojok disisi kiri atau kanan panggung dan menantikan beberapa audience yang mau bertegur sapa dan bertanya. Ini hal baru buat saya, terutama conference di Indonesia belum pernah saya melihat hal seperti ini dilakukan. Dan audience juga cukup sopan untuk antri dan bergantian menyapa para pembicara.

Keynote Hari Kedua

Kembali, jet lag menyerang. Banyak momen terlewat karena tidak tahan menahan kantuk. Untungnya ngga sampai ngorok seperti orang yang berada dua row dari saya 😈. Untuk hari kedua ini keynote dibawakan oleh Chief Technology Officer Facebook, Mike Schroepfer dan beberapa petinggi Facebook lainnya memaparkan tentang teknologi dan inovasi terkini yang dilakukan Facebook.

Talk by CTO Facebook Mike Schroepfer

Berbeda dengan hari pertama, kali ini saya duduk agak dibelakang karena sedikit telat pada saat masuk ke arena. Dari talk Mike diatas saya baru tersadar bahwa di Facebook, AI sudah digunakan dimana-mana. AI is everywhere! Ya ampun, saya yang sempat memilih mata kuliah AI dulu waktu di Binus menyia-nyiakan ilmu yang sebenarnya sudah saya ketahui dari dulu, dari tahun 2002-2003. Selaras yang dikatakan Eric Nakagawa yang saya jabarkan di artikel sebelumnya. Saya harus segera upgrade ilmu nih!

Beberapa catatan penting lainnya:

PyTorch, sebuah library Machine Learning rilis versi 1.0.
Caffe2, sebuah library deep learning juga dirilis.
ONNX, sebuah open platform untuk deep learning model juga dirilis. Hal ini memungkinkan beberapa platform sepert Amazon AWS, Microsoft Azure dan yang lainnya bisa saling berkolaborasi menghasilkan model yang lebih powerful.
Sebuah web juga dirilis, khusus untuk pengembang AI https://facebook.ai/developers.

Secara umum visi Facebook sepuluh tahun kedepan adalah AI, Connectivity, VR dan AR. Berikut link videonya.

Beberapa Talk Menarik

Sehari sebelumnya saya sudah planning untuk menyaksikan talk-talk berikut:

Duckling: An Overview of the Open Source Probabilistic Parser
~~Using Natural Language Processing to Enhance Your Messenger Conversations~~
~~Build Your First Messenger Instant Game~~
How React Native Helps Companies Build Better Mobile Apps
Building with React Native and React VR: Insights from Instagram and Oculus
~~How Camera Effects Helped Us to Grow Our Business~~
~~Audio and Speech Understanding System~~
Investing in Innovators Through Developer Programs

Tapi tidak semua akhirnya bisa saya hadiri karena satu dan lain hal. Talk pertama yang saya hadiri adalah tentang library Duckling. Sebuah library Haskell yang bisa mem-parsing text menjadi data yang lebih terstruktur seperti tanggal dan lainnya. Sayangnya pace-nya agak cepat sehingga saya ketinggalan. Dan juga karena koneksi internet yang cukup mengecewakan sehingga keinginan belajar Haskell berhenti ketika gagal menginstal package haskell-stack. Haha, alasan aja ini mah 😏.

Install Haskell Stack gagal

React Native Panel Discussion

Kemudian saya menghadiri diskusi panel tentang React Native yang di moderatori oleh Eric Nakagawa. Panel terdiri dari Gina Trapani Director of Engineering at Postlight, Sophie Alpert Engineering Manager at Facebok, Brian Leonard CTO at TaskRabbit, Adrian Potra Engineering Manager at Skype, dan Kenton Jacobsen Director of Engineering at Vogue.

ReactNative Discussion Panel

Seperti yang sudah bisa ditebak, Postlight, Facebook, TaskRabbit, Skype dan Vogue semua menggunakan ReactNative di production. Berikut beberapa catatan yang saya dapat dari diskusi panel ini:

Skype mengunakan ReactNative dengan TypeScript. Mereka menggunakan React dan ReactNative untuk solve cross-platform issue. Mereka juga menggunakan ReactXP. Untuk hiring, mereka lebih fokus kepada orang-orang dengan tipe generalis.
TaskRabbit pertama kali menggunakan ReactNative di aplikasi Tasker mereka. Yang tadinya tim mobile disemua platform ada enam orang, setelah menggunakan ReactNative, timnya bisa dipangkas menjadi 2 orang saja!
Vogue menggunakan ReactNative dan GraphQL. Di Backend Vogue menggunakan NodeJS.
Facebook menggunakan ReactNative dimana-mana. Yang paling besar salah satunya di Facebook Marketplace yang diakses 800 juta orang per bulannya.
PostLight menggunakan React sangat intensif di web dan mereka hanya punya 1 orang iOS engineer. Dan memilih ReactNative merupakan pilihan yang no brainer buat PostLight. Terutama karena mereka juga banyak bekerjasama dengan instansi-instansi non-profit dengan budget minimal

Setelah diskusi selesai, saya melihat semua narasumber turun dari panggung dan menunggu di sisi panggung untuk disamperin audience. Dan audience juga membentuk antrian yang rapi dan bergantian bertanya atau sekedar say hi. Karena kemaren sudah berbincang banyak dengan Eric, saya memutuskan untuk say hi ke Gina Trapani. Buat yang belum tahu, Gina ini cukup populer dimasanya. Dia pembuat aplikasi todo.txt, ex-founder lifehacker, pengisi acara di twit.tv, dan masih banyak lagi.

With Gina Trapani

ReactNative Dan ReactVR di Instagram dan Oculus

Talk selanjutnya yang saya hadiri berjudul “Building with React Native and React VR: Insights from Instagram and Oculus”. Dibawakan duet oleh Brian Rosenfeld dari Instagram dan Mike Armstrong dari Oculus, mereka share apa dan bagaiman ReactNative dan ReactVR digunakan di perusahaan masing-masing.

Inti dari sesi ini adalah meskipun Instagram dan Oculus berasal dari dunia yang berbeda, yang satu adalah aplikasi mobile dan web dan lainnya mengembangkan platform virtual reality, tapi mereka menggunakan framework yang sama, React (padahal katanya React bukan framework ya, ya sudahlah).

Di sesi ini sebenarnya mereka ‘jualan’ React sih dengan menjelaskan apa itu React, apa itu ReactNative dan ReactVR. Dan buat saya yang sudah menggunakan React, saya tidak perlu di-convince lagi sih. Tapi presentasinya cukup menghibur dan mendapatkan insight tambahan kenapa React itu keren!

Sesi ReactNative dan ReactVR

Investing in Innovators Through Developer Programs

Dan sesi terakhir yang saya hadiri adalah sesi Developer Programs. Disini Kunbi Adeyemo dari Facebook sharing tentang bagaimana program Developer Circles mengubah hidup banyak orang. Salah satunya, Nila DevC Lead asal Surabaya. Tuh, slide-nya saya foto! Merinding episode kedua 😃.

Nila on the slide

Luar biasa ya kontingen Indonesia banyak di-highlight. Dan satu hal lagi yang baru saya tahu ternyata salah satu founder aplikasi belajar coding SoloLearn, Yeva Hyusyan juga hasil ‘didikan’ Developer Program di Armenia.

Dan selesai sudah sesi-sesi talk dan sekaligus F8 ditutup dengan Happy Hour sekaligus pengumuman pemenang Hackathon. Karena saya ngga ikutan, saya dan beberapa leads memutuskan pulang ke hotel untuk isitirahat sejenak karena malamnya ada acara khusus untuk leads. Seperti acara pembubaran panitia gitu deh.

Happy Hour For DevC Leads

Nah, another great moment came at this event. Setelah makan, minum, saling bertegur sapa, dan foto-foto (sumpah, para leads disini banyak banget yang hobi selfie!) saya mendapatkan momen yang sangat berharga meski sebentar.

Maaf, saya kurang bisa wefie.

With Leads, mother of Leads (Elisha) and Mother of mother of Leads (Alice).

Moment of truth, atas inisiasi bro Firdaus, DevC Lead Surabaya saya dikenalkan oleh orang yang keren parah! Dia sangat terkenal di dunia p̶e̶r̶s̶i̶l̶a̶t̶a̶n̶ ReactNative. Tapi karena orangnya low profile dan super geek, ngga banyak orang yang tahu. Namanya Farid Safi, DevC Lead Paris. Dia ini master-nya ReactNative. Kalo tahu ReactNative pasti tahu Gifted Chat, salah satu project ReactNative yang jadi panduan banyak orang saat belajar. Dan yang Farid ini adalah orang yang buat Gifted Chat. Ya ampun, kenapa baru sempat ngobrol sekarang ya….

Dan yang lebih kerennya lagi adalah Farid ini juga membangun coding bootcamp di Paris. NamanyaLe Reacteur, sebuah coding bootcamp fullstack JavaScript yang berdurasi 10 minggu. Jadilah kita saling sharing tentang bagaimana suka-duka menjalankan bootcamp. Termasuk saya juga bertanya tentang bootcamp lainnya yang saya tahu dan sepertinya lebih populer: Le Wagon. Dan memang benar dugaan saya, mereka kompetitor. Dan saya bisa merasakan gimana rasanya punya kompetitor 😃.

With Farid

Sayangnya waktu kita terbatas, jadi cuma sempat ngobrol sebentar. Tapi tenang saja, kita bisa ngobrol online kan ya. Yang penting kontak sudah didapat 🎉.

Dan usai sudah perhelatan F8 Conference. Mungkin artikel selanjutnya saya akan share sedikit tentang pengalaman saya dan teman-teman leads mengelilingi Silicon Valley dalam rangka tur ke kantor-kantor startup ternama.

Kalau mau dengar penuturan langsung dari kami yang berangkat, silakan join grup facebook DevC Jakarta. Kita akan mengadakan meetup khusus membahas tentang pengalaman kita di F8.

F8 Silicon Valley Trip Day 1

2018-05-14T00:00:00Z

Ini adalah cerita berseri tentang perjalanan saya dan teman-teman Facebook Developer Circle Leads ke Silicon Valley dalam rangka mengikuti Facebook F8 Developer Conference. Ikuti dari bagian 0 supaya mendapatkan jalan ceritanya secara keseluruhan.

Sampailah kita di acara utama F8 Conference day 1! Di hari pertama ini cukup banyak yang bisa di-highlight. Meskipun agak salah strategi sehingga di hari pertama ini banyak sekali melewatkan talk-talk keren, salah satunya talk tentang Jest yang dibawakan oleh Aaron Abramov . Entah siapanya Dan Abramov si Aaron ini.

Keynote By Mark Zukerberg

Setelah mengantri cukup panjang untuk masuk ke auditorium, akhirnya bisa dapat tempat duduk yang cukup strategis.

Ngantri with om Bambang dan Firdaus

DAN bisa foto dan naik panggung sebelum Mark muncul! Walaupun setelah itu dikejar-kejar satpam :)

DevC Asia Pacific foto-foto di depan stage sebelum Mark tampil.

With DevC Jakarta: Om Luri (paling kiri) dan Anne.

Ok, masuk ke catatan keynote. Saya ngga akan me-review secara detil ya disini. Silakan baca atau nonton videonya kalo mau lebih detil. Saya hanya akan me-review dari sudut pandang saya dan ada beberapa momen yang mungkin terlewat karena saya tertidur karena jet lag :)

Terlepas dari masalah yang dihadapi akhir-akhir ini, Mark terlihat segar dan cukup ceria. Mengusung tagline “We will keep building”, Mark membawakannya dengan semangat yang tinggi sehingga saya yang mendengarkan juga bisa ikut merasakan semangatnya. Sangking semangatnya hingga tertidur di tengah-tengah talk 😉.

Berikut beberapa catatan dari keynote Mark Zuckerberg terkati Facebook:

App review kembali dibuka.
Sempat mengangkat isu privasi dan privasi data meski porsinya tidak terlalu banyak.
Facebook akan fokus memberantas berita hoax, spam, dan akun palsu. Mungkin untuk konten berbahasa Indonesia bisa pakai engine yang dibuat alumni HACKTIV8 😉.
Beberapa tambahan fitur untuk grup dan komunitas.
Facebook akan mengeluarkan fitur kencan ala tinder.
Akan ada marketplace, jadi bisa jualan di Facebook. Mark bilang hal ini terinspirasi dari Indonesia yang sudah menggunakan Facebook sebagai tempat jualan.
Akan ada up vote dan down vote.

Untuk instagram sendiri ada beberapa fitur yang akan ditambahkan:

Instagram akan memperbarui halaman explore.
Akan ada juga fitur video chat.
Tambahan Augmented Reality Camera Effect. Jadi bisa nambahin efek AR di foto.

Sementara untuk WhatsApp, ada beberapa update juga:

Shout out dan tepuk tangan dari Mark untuk co-founder WhatsApp yang memutuskan keluar.
Akan hadir fitur group video calling.
WhatsApp for Business akan segera open to public.

Dan sebagai catatan penutup, Oculus meluncurkan produk barunya yaitu Oculus Go dan harganya $199 dan semua yang ikutan F8 mendapatkannya secara gratis!

Oculus Go sudah ditangan

Hunting Swag

Kegiatan berikutnya adalah hunting swag! 😈 Dapat cukup banyak sampai-sampai koper nyaris tidak muat. Hampir semua booth memanjakan pengunjung dengan berbagai swag keren. Booth-booth yang ada semuanya adalah produk Facebook. Mulai dari Oculus, Messenger, Analytics, Video, PyTorch, Ads, Instagram, dan banyak yang lainnya. Hasilnya… Cukup menggembirakan!

Hunted!

Dan yang menjadi favorit booth buat saya adalah booth Open Source! Sangking kerennya, booth ini layak mendapat porsi pembahasan tersendiri.

Open Source Booth

Kenapa booth ini menjadi favorit? Karena dikasih segepok stiker buat dibagi-bagi ke komunitas di Jakarta. Alasan kedua karena bisa bertemu dengan influencer di dunia open source dan tech scene secara umum. Booth ini dijaga oleh Joel Marcey, Developer Advocate Facebook. Saya sempat berinteraksi dengan Joel ketika mencoba kontribusi ke salah satu project open source Docusaurus. Dan bisa bertemu dan diskusi langsung adalah hal yang sangat menyenangkan.

With Joel

Dan ada satu orang lagi yang menjaga booth open source adalah Eric Nakagawa! Dia adalah orang yang bertanggung jawab terhadap semua project open source yang ada di Facebook! Sebenarnya ada kesempatan bertemu kemaren pas acara DevC Leadership tapi saya missed karena sedang ngobrol dengan Emeka Afigbo. Silakan baca artikel sebelumnya.

With Eric Nakagawa

Dengan Eric diskusi cukup banyak. Yang saya baru tahu adalah Eric sempat mencoba menjadi podcaster. Dia sempat menjalankan podcast dengan format yang, well, mirip dengan Ceritanya Developer, podcast yang sedang jalankan. Dia melakukan interview dengan teman-temannya yang adalah developer juga. Namanya Potluck Podcast dan sudah berhenti di episode 6. Sudah tidak bisa di download dan didengarkan, sayangnya.

Kemudian giliran saya yang bercerita. Saya sampaikan bahwa saya juga baru saja me-launch sebuah podcast setelah podcast lama saya berhenti. Saya juga sempat memperlihatkan statistik dua episode awal: episode teaser/coming soon dan episode pertama. Dia cukup kaget dan bilang “Impressive! You’re doing much better than me!!”. Terimakasih banyak pendengar Ceritanya Developer Podcast. Karena kalian, saya jadi bisa sedikit pamer didepan sosok prolific seperti Eric 😈.

Kemudian Eric juga memperingatkan saya supaya menjaga momentum dan jangan sampai burnout. Dia menyebutkan bahwa dia melakukan podcast sambil membuat tools untuk podcast. Agak kepo dan ingin melakukan analisa terhadap pendengarnya, Eric memutuskan membuat sendiri analytic tools yang bisa melihat behavior pendengar secara realtime. Hal itulah yang akhirnya membuat dia burnout dan memutuskan berhenti nge-podcast.

Eric juga sempat share best practice untuk podcast. Katanya yang paling optimal adalah publish seminggu sekali. Atau paling tidak dua minggu sekali. Karena kalau lebih lama, misalnya sebulan sekali maka pendengar akan bertanya-tanya dan sudah nagih episode baru di dua minggu pertama. Tapi challenge-nya melakukan podcast seminggu sekali adalah burnout dan kehabisan narasumber kalau formatnya interview. Format seminggu sekali mungkin cocok untuk podcast dengan format self talk kali ya.

Saya kemudian juga share ke Eric bahwa saya menggunakan format yang sedikit berbeda. Saya menggunakan format season seperti TV Series untuk podcast Ceritanya Developer. Jadi dalam setahun saya nyetok delapan interview dan akan saya publish setiap bulan. Dan kalo responnya ok baru saya lanjut ke season berikutnya. Dan menurut dia format seperti ini cukup menarik dan cukup bagus. Let see…

Setelah selesai curhat seputar podcast, saya mulai bertanya insight tentang development dan teknologi kepada Eric. Dia menyebutkan artificial intelligence atau AI adalah masa depan. Dan menyarankan kita, developer, untuk segera belajar AI. Untuk memulai belajar AI, Eric menyarankan belajar dari fast.ai karya Jeremy Howard. Saya sempat tanya, gimana dengan course Andrew NG yang ada di Coursera? Menurut Eric, punya Andrew NG bagus untuk mempelajari teori yang lebih mendalam sementara course Jeremy Howard lebih practical. Di lesson pertama saja kita sudah bisa membuat image classification yang membedakan gambar kucing dengan gambar anjing.

Jadi mari segera belajar AI.

Anne On The Stage

Setelah bertemu Eric dan Joel dan mendapatkan insight yang super useful saya dan teman-teman sangat merasa puas. Saya bisa tidur nyenyak nih nanti malam 😃. Tapi ada satu lagi momen dimana saya merinding. Bukan (hanya) karena kedinginan, tapi karena menjadi saksi dan menyaksikan teman seperjuangan, Anne berdiri dan talk didepan audience F8! Bangga lah pasti sebagai teman dan co-lead. Meski bukan panggung utama, tapi tetap aja!!

Anne on the stage

Topik yang diangkat adalah tentang komunitas dan female developer. Sampai saat ini belum ada videonya, semoga ada rekamannya jadi teman-teman bisa nonton juga.

Itu dia keseruan di hari pertama. Secara umum saya banyak melakukan networking dan ngobrol di hari pertaman ini. Bayangkan orang-orang hebat sekelas Eric Nakagawa jaga stand dan bisa diajak diskusi, kapan lagi coba kesempatan itu muncul?! Gara-gara kebanyakan diskusi jadi porsi nonton talk jadi minimun.

Nantikan keseruan di hari kedua. Untuk hari kedua saya fokus melihat beberapa talk-talk keren. Kalau mau dengar penuturan langsung dari kami yang berangkat, silakan join grup facebook DevC Jakarta. Kita akan mengadakan meetup khusus membahas tentang pengalaman kita di F8.

F8 Silicon Valley Trip Day 0

2018-05-08T00:00:00Z

Berikut adalah rekap perjalanan saya ketika diundang menghadiri F8 Developer Conference sebagai salah satu Facebook Developer Circle yang beruntung.

Di H-1 sebagai leads dari berbagai kota di belahan dunia, kita semua diminta untuk gathering di Facebook HQ untuk mengikuti beberapa acara menarik. Berikut ceritanya.

Ketemu Simon CTO Praekelt asal Belanda

Duduk sebelahan di bis dari Hotel Marriot San Jose ke Facebook HQ di Menlo Park. Lokasi cukup jauh, sekitar 1 jam perjalanan jadi bisa diskusi cukup panjang. Bukan diskusi sebenarnya, lebih ke interview karena mostly saya yang banyak nanya :)

Simon de Haan

Percakapan dimulai dari pekerjaan kemudian diskusi kita lanjutkan ke bahasa pemrograman Python yang menjadi favoritnya, bahasa yang sehari-hari ia dan timnya gunakan. Simon menggunakan Python karena elegansi dari syntaks-nya, bahasa yang sudah mature dan well crafted, menurutnya. Saya baru sadar, mungkin ada unsur nasionalisme juga karena Guido sang pembuat Python juga berasal dari negara yang sama, Belanda.

Kemudian pertanyaan saya lanjutkan ke pemilihan web framework dan Simon menuturkan bahwa mereka menggunakan Twisted sebuah web framework yang sifatnya event-driven. Untungnya saya pernah riset tentang Twisted sebelumnya, jadi lumayan mengerti :) Pertanyaan saya lanjutkan kenapa Twisted kok kurang populer. Menurut Simon karena memang susah, dan tidak straightforward penggunaannya. Dokumentasinya pun kurang mendukung. Untuk event-driven dan callback, NodeJS did it better.

Kemudian bahasan kita lanjutkan ke bahasa pemrograman lain. Tidak disangka ternyata dia juga menggunakan Elixir khusus untuk beberapa project yang butuh concurrency. Alasan dipilihnya Elixir karena WhatsApp menggunakan Erlang dan Erlang VM memungkinkan WhatsApp scale hingga mampu menangani 2 juta koneksi secara berbarengan. Awalnya Simon mencoba Erlang, tapi ternyata dia ngga begitu suka sintaks-nya dan ketika Elixir muncul, tanpa pikir panjang Simon langsung mengadaptasinya kedalam project yang sedang ia tangani.

Obrolan kita berlanjut, saya kembali bertanya kok sekarang functional programming kembali hyped. Padahal paradigma ini kan cukup jadul dan sudah lama ada. Bahkan sudah ada sebelum paradigma OOP muncul. Menurutnya, tools, requirement dan aplikasi semakin berkembang dan developer terus mencari solusi yang lebih sederhana untuk mengembangkan aplikasi, terutama proses development yang lebih terprediksi dan saat ini tren sedang menuju kepada tools yang memberikan developer rasa aman. Misalnya saja paradigma functional programming, static typed sekarang sedang digemari seperti Haskell, TypeScript, Elm dan lain sebagainya. Oh iya, dia juga menggunakan Elm, React dan Redux. Dia juga tertarik ke ReasonML, meski belum pernah menggunakan.

Percakapan ditutup ketika Simon bercerita bahwa selain menjadi CTO, saat ini dia juga sedang menggagas sebuah startup bersama seorang temannya. Masih di area healthcare. Luar biasa ya, pagi jadi CTO malam jadi co-founder.

Linkedin-nya Simon.

Meet and Greet Developer Circle Around The World

Tidak bisa saya jabarkan satu-per-satu sih. Di sebuah ruangan seluruh leads dari Developer Circle seluruh dunia berkumpul. Dan itu saja sudah membuat saya merinding.

Sean Liu

Sempat ngobrol dengan sebagian kecil dari mereka, ada Sean Liu lead DevC Taiwan yang sangat ingin sekali mengenalkan co-lead-nya ke saya, entah kenapa :) Sean adalah developer yang fokus kepada teknologi chatbot.

Ada juga Edwin yang sangat membenci kalau ada orang yang mojok sendirian, pasti dia samperin dan diajak ngumpul ke grup.

Edwin (paling kiri)

Bonnie juga salah satu dari 3 co-lead DevC Gutemala. Menariknya Bonnie punya passion yang cukup besar di akademika dan lecturing. Coba dia mau ke Indonesia, pasti akan saya hire untuk jadi instruktur ;)

With Bonnie (paling kanan)

Sempat ngobrol juga dengan DevC lead Bangkok Pondd dan share tentang insight tech scene di Bangkok seperti apa. Katanya, di Bangkok lagi demam blockchain. Semua teknologi maunya di blockchain-kan :) Dan ternyata dia juga temannya om Rendra Toro .

Oh iya, ada satu percakapan menarik lagi yang harus di-mention. Saya sempat berbincang sebentar dengan Emeka Afigbo Manager Developer Programs di Facebook. Waktu kenalan dan begitu tahu saya Riza dari Jakarta dia bilang gini: “I’ve heard a lot of good things about you!”. Terus saya kaget, dan saya tanya balik: “About me or about DevC Jakarta?”. Kalo tentang DevC Jakarta saya ngga kaget, karena co-lead saya keren-keren. Dan dengan yakin dia menjawab: “No, You!”. Saya langsung terharu dan tidak bisa berkata-kata. Entah apa maksudnya good things about me itu. Dan saya tidak punya keberanian untuk bertanya lebih lanjut. Dan saya juga tidak berani ngajak foto bareng :)

Video Emeka (paling kanan) di stage F8 2018. Link: https://developers.facebook.com/videos/f8-2018/partner-panel-how-to-grow-your-business-with-facebook/

Banyak lagi obrolan singkat nan menarik dengan leads di berbagai kota. Tidak bisa saya jabarkan disini satu-per-satu.

Bertemu Developer Asal Indonesia Yang Bekerja Di Facebook

Jauh sebelum hari H, kita sudah diinformasikan apabila ingin bertemu dengan engineer Facebook, yang dikenal tentunya, silakan request biar bisa ketemu.

Saya kenal seorang engineer asal Indonesia yang bekerja di Facebook. Namanya Kevin Gozali. Orang inilah yang bertanggung jawab memperkenalkan saya dengan React :) Kita pernah ketemu di akhir tahun 2015 dan saya minta diajari React pada saat itu.

Dan ternyata kebetulan pada hari itu dia sedang cuti 😢. Tapi karena tahu ada kontingen Indonesia yang sedang berada di Facebook HQ, dia sempatkan untuk datang dari rumahnya, yang katanya ngga terlalu jauh dari kantor Facebook. Thanks Kevin!

With Kevin

Pada waktu pertama ketemu, Kevin masuk dalam tim Ads-nya Facebook dan karena kontribusinya ke React dan React Native sekarang ia 8fulltime8 ngurusin React Native bersama 10 orang yang ada di Facebook. Lebih lanjut diskusi teknis tentang React dan React Native nanti dibagian Happy Hour.

Facebook HQ Tour

Setelah acara Leadership Sessions DevC selesai, kita pun diajak tour keliling kantor Facebook. Kantornya keren banget pastinya.

Salah satu sisi kantor facebook

Fakta unik dari kantor facebook ini adalah dulunya ini adalah kantor Sun Microsystem. Bahkan plang di depan kantornya pun masih terdapat sisa-sisa kejayaan Sun.

Sisi depan

Foto diatas tampak depan, sementara dibelakangnya seperti ini.

Sisa-sisa kejayaan Sun microsytem

Happy Hour: Ketemu Hack Reactor

Setelah acara di kantor Facebook selesai, kita kembali ke Marriot untuk menukar badge buat besok (biar ngga ngantri) dan diundang ke acara Happy Hour.

Badge F8

Saya sempat berencana mau mengunjungi kampus Hack Reactor karena dulu saya pengen banget ikutan bootcamp itu. Malah sekarang jadi bikin bootcamp sendiri :)

Nah, di even happy hour ini ternyata ada booth Hack Reactor! Saya tanya kira-kira saya bisa ikut tour ke kampusnya apa ngga ya? Dia bilang bisa, justru dia adalah orang yang in charge di campus tour. Namanya Andrew, tim Admission and Partnership. Tapi karena dia sibuk ngurusin even F8, tour ditiadakan seminggu. Tapi ngga masalah bisa bertemu dan ngobrol walau sebentar dengan salah satu tim dari Hack Reactor sudah cukup mengobatinya.

With Andrew Hack Reactor

Tak lama kemudian, Kevin datang lagi. Memang sudah janjian sih, karena kita mau nanya banyak hal.

Kontingen Indonesia berebutan mau nanya ke Kevin tentang Facebook, React dan React Native! Diskusi berlanjut hingga larut malam.

Kevin dibanjiri pertanyaan

Diskusi Mendalam Tentang React dan React Native

Diskusi kita dengan Kevin terus berlanjut. Saya telat join diskusinya karena satu dan lain hal. Saya sempat bertanya pendapatnya tentang Flutter, haha. Dan saya tidak menemukan jawaban yang menarik dari dia :)

Yang menarik dari pembicaraan ini adalah fakta bahwa yang menangani library React Native di Facebook ada 10 orang dan butuh kontribusi banyak dari teman-teman. React Native adalah sebuah library besar dan kedepannya React Native akan dipecah kedalam library-library yang lebih kecil agar lebih mudah di-maintain dan lebih kecil kemungkinan untuk breaking changes.

Diskusi ditutup tentan React Native Navigation dan sedikit insight tentang masa depan library-library navigation untuk React Native.

Ini facebook-nya Kevin. Go add him and say thank you for his contributions and inspiration!

Indonesia DevC Leads with Kevin

Demikianlah keseruan di H-1 F8. Tunggu cerita keseruan berikutnya ya :) Kalau mau dengar penuturan langsung dari kami yang berangkat, silakan join grup facebook DevC Jakarta. Kita akan mengadakan meetup khusus membahas tentang pengalaman kita di F8.

Kenapa Edukasi Yang Bagus Itu Tidak Murah Harganya

2018-04-06T00:00:00Z

Paradigma Bisnis Publishing VS Paradigma Bisnis Edukasi

Dalam dunia produksi konten, ada dua paradigma bisnis industri konten: paradigma penerbit atau istilah kerennya publishing dan paradigma edukasi. Keduanya memiliki pasar dan ceruknya masing-masing. Akan tetapi ada yang menganggap keduanya adalah suatu hal yang sama dibawah payung edukasi. Meskipun mirip, kedua paradigma ini sebenarnya tidaklah sama. Artikel ini akan membahas tentang persamaan dan perbedaan keduanya.

Paradigma Bisnis Produksi Konten

Pernah membaca kisah tentang seorang bernama Nate Berkopec yang berhasil menjual course (buku dan video) yang berjudul The Complete Guide to Rails Performance? Di artikel ini dia berkisah bahwa dia berhasi menjual course tersebut sebanyak 500 copy dan mendapatkan keuntungan sebesar $70,714.20. Tujuh puluh ribu dollar, man! Siapa coba yang tidak terinspirasi dan tertarik mencoba.

Banyak lagi cerita sukses dari para produser konten baik itu buku, buku elektronik, dan video course yang berhasil membuat kita berdecak kagum. Istilah information product atau produk informasi biasanya berkaitan dengan konten edukasi seperti buku, ebook, newsletter, blog, audio, video atau juga kombinasinya. Biasanya produk informasi ini dijual secara digital dan dijual via internet.

Distribusi Masif

Sisi positifnya harga dari sumber ilmu tersebut, baik itu buku, video course, blog, podcast dan lain sebagainya menjadi terjangkau. Bahkan tidak jarang dibagikan secara gratis untuk tujuan satu atau lain hal. Kenapa produk-produk informasi bisa murah atau terjangkau? Salah satu alasannya karena produk-produk informasi tersebut dapat didistribusikan secara masif.

Biaya produksi produk informasi seperti video, podcast, ataupun buku sebenarnya tidak murah. Akan tetapi karena dapat didistribusikan secara masif lintas daerah bahkan lintas negara, maka harganya dapat didistribusikan pula. Dosen saya pernah berkata: “Harganya memang murah, tapi faktor pengalinya yang banyak!”.

Hal ini juga didukung oleh perubahan kiblat yang terjadi di dunia digital pada umumnya. Kalau dulu kita menjual aplikasi atau game dengan harga ratusan ribu rupiah, saat ini sebuah game premium dapat kita ‘tebus’ dengan harga sepulu ribuan saja!

Dampak Terhadap Kehidupan

Namun produk informasi ini juga memiliki kekurangan dari sisi pembeli. Seseorang membeli produk informasi ataupun mengikuti kegiatan workshop dan aneka sajian edukasi lainnya adalah bertujuan untuk meningkatkan skill dan kemampuannya. Dampak atau impact yang didapat ketika kita membeli produk informasi hasilnya beragam. Ada yang berhasil, tentu. Akan tetapi tidak sedikit yang tidak berdampak apa-apa terhadap kehidupannya. Semua tergantung si pembeli itu sendiri.

Ketika seseorang membeli sebuah produk informasi seperti buku, tanggung jawab si penerbit dan author hanya sampai disitu. Mau bukunya dibaca, ataupun tidak, itu urusan si pemilik buku. Apakah bukunya dijadikan ganjalan pintu atau tatakan monitor juga tidak ada yang melarang. Tidak ada kewajiban dari pihak penulis ataupun penerbit untuk memastikan bahwa impact terhadap perubahan hidup seseorang itu sesuai ekspektasinya. Tanggungjawab apakah ia sukses ataupun tidak hanya tergantung kepada si pembeli saja dalam hal ini.

Sekarang mari kita lihat sisi yang lain, yaitu bisnis edukasi.

Semoga artikel ini dapat membantu kamu yang bertanya-tanya kenapa edukasi seperti bootcamp kok harganya tidak murah jika dibandingkan alternatif lain seperti buku, atau online course.

Paradigma Bisnis Edukasi

Coding bootcamp sedang menjamur, baik diluar maupun didalam negeri. Keinginan seseorang untuk mentransformasi hidupnya dengan cepat menjadi salah satu alasan yang sering terdengar mengapa ia memilih mengikuti bootcamp, kursus, dan sejenisnya. Padahal biaya dan waktu yang dikeluarkan tidaklah sedikit.

Apa yang menjadi pembeda antara bisnis produk informasi dengan bisnis edukasi seperti coding bootcamp? Dan kenapa perbedaan harganya cukup jomplang?

Biaya Operasional Yang Tinggi

Yang pasti perbedaan terbesar adalah modal yang dibutuhkan untuk membangun dan menjalankan bisnis edukasi tidaklah kecil. Bayangkan, kita harus memiliki atau menyewa tempat, memiliki lab komputer yang mumpuni, karyawan untuk segala hal dan yang tak kalah pentingya, adalah merekrut instruktur atau tenaga pengajar.

Bisnis Edukasi Bertanggungjawab Terhadap Hasil

Berbeda dengan produk informasi, bisnis edukasi ikut serta bertanggungjawab dalam memberikan dampak kepada kehidupan si pembeli. Dengan kata lain, tanggung jawab dibebankan kepada dua pihak: seorang yang mau belajar, dan pihak penyedia edukasi tersebut. Tentu si siswa yang ingin belajar harus punya niat dan motivasi untuk mengejar mimpinya (apapun itu), bangun pagi, datang tepat waktu dan belajar dengan sepenuh hati. Tapi di lain sisi, ada pihak penyedia edukasi yang juga mempunyai tanggungjawab untuk memastikan siswa sukses melewati berbagai rintangan pelajaran dengan memberikan rambu-rambu, mengingatkan, mengarahkan hingga siswa dapat belajar dengan baik. Itulah sebabnya universitas atau bahkan sekolah biayanya jauh lebih mahal dari buku atau online course. Mereka harus membayar sewa gedung, operasional, mengurus akreditasi dan yang terpenting, PENGAJAR!

Contoh yang cukup jelas misalnya, untuk menjadi seorang dokter dibutuhkan biaya dan waktu studi yang panjang dan lama. Untuk menjadi dokter kita HARUS kuliah dan kerja praktek. Tidak bisa semata hanya dengan membeli beberapa buku kedokteran, serta-merta kemudian kita menjadi dokter. Tentu, buku tersebut sangat berguna dan ilmunya sangat banyak yang bisa kita dapatkan, tapi juga kita tentu tidak bisa membuka praktek dokter umum setelah membaca buku-buku itu, kan?!

Kesimpulan

Cara dan media belajar saat ini sudah begitu banyak. Baik itu yang berupa produk informasi seperti online course, buku, video tutorial, artikel blog dan lain sebagainya hingga lembaga kursus, bootcamp, sekolah tinggi hingga kampus. Kembali lagi ke diri kita masing-masing mau memilih yang mana yang sesuai dengan keinginan, kemampuan dan cara belajar kita.

Apabila kamu adalah seorang self learner dan tidak butuh motivasi eksternal, silakan belajar sendiri dengan buku, online course dan lain sebagainya. Namun apabila kamu butuh bantuan untuk memotivasi, menjaga kamu agar tetap di jalur yang diinginkan serta dikelilingi oleh orang-orang yang sama-sama ingin sukses, maka pilihan seperti bootcamp, kursus ataupun kuliah bisa menjadi pilihan. Selamat belajar!

Artikel ini pertama kali di-publish di https://blog.hacktiv8.com/edukasi-yang-bagus/

5 Kebiasaan Coding Yang Menjadikan Kamu Super Developer

2017-05-11T00:00:00Z

"Genius is 1% talent and 99% percent hard work…" — Albert Einstein

Untuk menjadi developer handal tidak ada cara yang lebih baik daripada berlatih dan berlatih setiap hari.

Berikut beberapa tips singkat berlatih coding setiap hari menyulap kamu menjadi developer yang lebih baik dirangkum dari beberapa artikel.

Coding setiap hari

Sempatkan untuk coding setiap hari. Tidak masalah bahasa pemrogramannya apa atau project-nya apa. Yang penting usahakan untuk coding setiap hari.

Hal ini juga saya rasakan ketika saya tidak coding dalam rentang waktu beberapa lama, terkadang ketika kembali coding terasa sedikit lemot, seperti jetlag dan harus beradaptasi kembali dengan berbagai hal.

Dengan melakukan latihan coding setiap hari, kita menjaga momentum, flow dan disiplin. Layaknya latihan yang diberikan oleh Mr. Miyagi dalam film Karate Kid.

Pada awalnya latihan yang diberikan Mr. Miyagi dirasa tidak berguna oleh Daniel yang ingin segera belajar jurus dan ogah belajar fundamental. Tetapi dengan berlatih hal fundamental secara terus menerus melatih reflek dan naluri saat bertarung nantinya.

Pro tip: Gunakan GitHub agar profil kamu menjadi lebih keren!

Cobalah sesuatu yang baru

Setiap beberapa bulan sekali, cobalah sesuatu yang baru. Bisa berupa bahasa pemrograman baru, editor baru, OS baru atau apapun.

Cobalah sesuatu yang kamu bahkan tidak yakin kamu akan sukai. Tantang diri kamu dan keluar dari zona nyaman. Katakanlah kamu tidak menyukai Microsoft, cobalah menggunakan C#, TypeScript atau produk Microsoft lainnya. Atau tidak suka Apple? Cobalah Swift ataupun Objective-C. Kamu fans VIM? Cobalah Emacs :)

Latihan ini akan membuat kita belajar berfikir out-of-the-box dengan cara memantang dirimu setiap kesempatan. Pasti ada sesuatu yang dapat kita pelajari dari berbagai bahasa ataupun platform yang berbeda.

Hal ini juga pernah saya alami. Ketika pertama kali belajar bahasa pemrograman fungsional Erlang, saya merasa pusing, mual dan ingin muntah :) Tetapi setelah beberapa waktu, setelah belajar Elixir sekarang code Erlang tidak lagi begitu menyeramkan.

Ikuti dan terapkan paradigma di setiap bahasa atau platform

Masih berkaitan dengan tips sebelumnya, ketika mencoba bahasa, paradigma atau platform baru, gunakanlah se-idiomatic mungkin. Kita mencoba sesuatu yang baru tujuannya untuk belajar dan dengan belajar idiom baru, kita juga dapat lebih mengerti mengapa bahasa pemrograman satu berbeda dengan bahasa pemrograman lainnya.

Sebagai contoh, cobalah untuk se-object-oriented mungkin ketika mencoba Java atau Kotlin karena memang naturalnya seperti itu.

Flow

Setelah beberapa lama, kembali lakukan eksperimen. Gunakan sebuah bahasa dengan cara yang berbeda. Misalnya hindari penggunaan for loop di Ruby dan gunakan metode rekursif untuk melatih mindset functional programming. Berkreasilah!

Manfaat belajar paradigma baru

Ada beberapa kalangan yang percaya belajar functional programming akan mengubah kamu menjadi developer yang lebih rapi dalam menulis* code*. Kenapa? Karena di dalam functional programming kita ‘dipaksa’ berpikir bagaimana mengubah sebuah data yang di input ke sebuah fungsi dan me return hasilnya.

Cara-cara atau trik di functional programming tentu dapat digunakan di paradigma lainnya dan akan bermanfaat membuat code yang lebih baik ketika kamu menulis code di bahasa pemrograman yang kamu gunakan sehari-hari.

Contoh lain misalnya dengan belajar declarative programming dapat meningkatkan pemahaman kita terhadap immutability dan lain sebagainya.

Banyak pula praktek-praktek OOP yang bisa digunakan di functional programming maupun paradigma-paradigma lainnya.

Contohnya video singkat nan lucu berikut yang berjudul “Advanced OOP in Elixir” oleh Wojtek Mach di ElixirConfEU 2016 yang lalu. Sangat out-of-the-box!

Latihan repetisi dengan Code Katas

Istilah katas adalah ungkapan bahasa Jepang yang artinya melatih gerakan dalam konteks bela diri. Code katas adalah latihan coding untuk mengasah skill programming kamu melalui latihan dan repetisi.

Repetisi penting untuk melatih otot memori kita agar dapat secara cepat dan melatih ‘reflek’ kita dalam programming. Repetisi sangat dibutuhkan untuk menguasai sesuatu. Seperti analogi Mr. Miyagi diatas.

Berikut adalah quote dari salah satu tokoh idola saya, David Kadavy tentang repetisi yang dikutip dari artikel yang berjudul The Powerful Power of Repetition.

The Powerful Power of Repetition https://t.co/Wlzi2Pgb8o pic.twitter.com/XFtdxCnbHS
— David Kadavy (@kadavy) April 5, 2016

Beberapa coding bootcamp seperti HackReactor dan Hacktiv8 pun menyarankan students-nya untuk berlatih code katas setiap hari. Bahkan beberapa perusahaan saat ini menggunakan soal-soal dan website code katas sebagai referensi.

Beberapa website yang dapat kamu gunakan diantaranya:

Bahkan website HackerRank mengadakan tantangan 30 days of code yang bisa kita ikuti untuk melakukan kegiatan #alwaysBeCoding.

Kumpulan Catatan Riza Fahmi (Full)

Fondasi Agentic Coding - Integrasi LLM

Persiapan Proyek

Konfigurasi aplikasi CLI dengan Escript

mix.exs

Menampilkan pesan legendaris

lib/mbb.ex

lib/mbb.ex

Memanggil LLM dengan REST API

Menambahkan Pustaka Req

mix.exs

Membuat Panggilan API Perdana

.env

lib/mbb.ex

Anatomi Respons API

Menangani Kesalahan

Validasi API_KEY

lib/mbb.ex

Validasi input

lib/mbb.ex

Validasi HTTP Error

lib/mbb.ex

Status Indikator

lib/mbb.ex

Kesimpulan

Fondasi Agentic Coding - Apa itu Agent?

Dari Tukang Ketik ke Mandor Proyek

Pola Agentic

Tiga Komponen Utama

Perkakas

Memori

Reasoning Loop

Praktek Membuat Agentic Coding Tool

Kesimpulan

Referensi

Desain Antarmuka dengan Asisten Ngoding

Mengapa HTML lebih baik daripada mockup statis

Memilih Tools yang Tepat untuk Membangun Antarmuka

Perbandingan Tools AI untuk Desain Antarmuka

Tantangan Integrasi dalam Proyek AI

Desain antarmuka

Langkah Praktis: Membangun Antarmuka dengan Firebase Studio

Kesimpulan

Referensi selanjutnya

Produktif dengan Asisten Ngoding

Beberapa jenis asisten koding

AI Chatbot

AI Code Completion

AI Code Editor

AI interface builder

Kesimpulan

Diskusi dan Menulis Spesifikasi dengan AI

Kegiatan ngoding dengan AI

Diskusi ide dengan AI

Kesimpulan

Menyusun Rencana dengan Asisten Ngoding

Menyusun Rencana dengan AI

Langkah Membuat Rencana

Referensi

Berkenalan dengan Bahasa Pemrograman Elixir

Sejarah Singkat

Tipe data

Struktur Data

Pencocokan Pola

Modul dan Fungsi

Kesimpulan

TIL: Menjalankan Observer di Proyek Elixir

Catatan Tentang Paradigma Pemrograman

Pergeseran Paradigma

Perkembangan Perangkat Keras

Kode Tanpa Concurrency

Kode dengan concurrency

Penutup

Catatan tentang NotebookLM

Gemini API untuk Web Developer

Pratinjau

Persiapan

Membangun Aplikasi Web

Persiapan Proyek

server.js

`mix.exs`

`lib/mbb.ex`

`lib/mbb.ex`

`mix.exs`

`.env`

`lib/mbb.ex`

Validasi `API_KEY`

`lib/mbb.ex`

`lib/mbb.ex`

`lib/mbb.ex`

`lib/mbb.ex`

`server.js`

`package.json`

`server.js`

`public/index.html`

`server.js`

`.env`

`package.json`

`server.js`

`server.js`

Import `@google/generative-ai`

Fungsi `compare`

`index.html`

`style.css`

`index.html`

`app.js`

`package.json`

`server.js`

`server.js`

Statis/Hardcoded/manual: `app.js`

`index.html`

`style.css`

Dinamis: `app.js`

`style.css`

Custom Components: `footer-component.js`

`index.html`

ES Module: `index.html`

`followers-count.js`

`app.js`