DEV Community: Muhammad Mahib Arib

Cara Install Flutter di Mac dan Menjalankan di HP Android Tanpa Android Studio

Muhammad Mahib Arib — Mon, 17 Nov 2025 10:08:36 +0000

Buat kamu yang mau belajar Flutter tapi tidak mau install Android Studio full karena makan ruang puluhan GB, tenang saja. Kamu bisa pakai cara minimalis: install Flutter, Android SDK, ADB, dan Java SDK saja. Dengan cara ini, semua tetap bisa jalan di HP Android nyata, lebih ringan di Mac, dan tetap bisa build aplikasi tanpa ribet.

Apa itu Flutter

Flutter adalah framework open-source dari Google untuk bikin aplikasi mobile, web, dan desktop pakai satu kode dasar saja. Dengan Flutter, kamu bisa bikin aplikasi Android dan iOS sekaligus tanpa harus menulis ulang kode untuk tiap platform. Yang keren, Flutter pakai bahasa Dart, dan punya fitur hot reload, jadi setiap perubahan bisa langsung terlihat di aplikasi tanpa compile ulang panjang-panjang.

Cara Install Flutter di macOS

Unduh paket instalasi untuk mendapatkan versi stabil terbaru dari Flutter SDK di alamat web https://flutter.dev/docs/development/tools/sdk/releases, ambil versi terbaru pada stable channel sesuai sistem operasi yang digunakan.
Ekstrak berkas zip tersebut dan tempatkan folder flutter pada lokasi instalasi yang diinginkan untuk Flutter SDK.
Tambahkan Flutter Tools pada PATH Anda.

export PATH="$PATH:~/development/flutter/bin"

Cek instalasi

flutter doctor

Flutter doctor adalah perintah untuk mengecek kelengkapan framework flutter yang Anda gunakan, seperti versi flutter yang digunakan, Android SDK yang digunakan, iOS SDK yang digunakan (hanya pada MacOS), perangkat yang sudah terhubung, dan semacamnya.

Install Platform-tools (ADB) & Build Tools

brew install android-platform-tools

Install Java SDK

brew install openjdk@17
echo 'export PATH="/opt/homebrew/opt/openjdk@17/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

Download Android SDK Command-line Tools

Kunjungi Android Command-line Tools.
Download “Command line tools for Mac” lalu jalankan perintah berikut.

mkdir -p ~/Library/Android/sdk/cmdline-tools
unzip commandlinetools-mac-*_latest.zip
mv cmdline-tools ~/Library/Android/sdk/cmdline-tools/latest
echo 'export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk' >> ~/.zshrc
echo 'export PATH=$ANDROID_SDK_ROOT/cmdline-tools/latest/bin:$PATH' >> ~/.zshrc
echo 'export PATH=$ANDROID_SDK_ROOT/platform-tools:$PATH' >> ~/.zshrc
source ~/.zshrc
sdkmanager "platform-tools" "platforms;android-34" "build-tools;34.0.0"

Cara Jalankan Flutter di Android Device

Aktifkan Developer Mode & USB Debugging di HP Android.
Colok HP ke Mac via USB.
Cek device di Terminal dengan menjalankan flutter devices.

Apa itu Laravel Filament?

Muhammad Mahib Arib — Thu, 18 Jul 2024 07:00:08 +0000

Laravel Filament adalah package yang dirancang khusus untuk Laravel, yang memungkinkan developer untuk membuat dashboard dan panel admin dengan cepat dan mudah dengan menyediakan komponen-komponen siap pakai yang bisa langsung digunakan.

Instalasi Laravel Filament

Pertama, Anda perlu menginstal Laravel Filament pada proyek Laravel. Anda bisa melakukannya dengan perintah composer require filament/filament.

Setelah itu jalankan perintah berikut untuk membuat konfigurasi filament menjadi publik php artisan vendor:publish --tag=filament-config.

Lalu install Filament Panel Builder dengan menjalankan perintah php artisan filament:install --panels.

Buat akun admin pertama Anda dengan menjalankan perintah php artisan filament:user dan ikuti petunjuknya untuk memasukkan email dan kata sandi Anda.

Jalankan server dan akses url http://localhost:8000/admin/login. Anda juga bisa mengubah pada file web.php agar ketika mengakses url http://localhost:8000 langsung meredirect ke url http://localhost:8000/admin/login seperti berikut.



Route::get('/', function () {
    return redirect()->route('filament.admin.auth.login');
});

Silahkan login dengan email dan password yang sudah dibuat tadi.

Membuat Resource CRUD

Laravel Filament menyediakan generator CRUD yang memudahkan pembuatan operasi Create, Read, Update, dan Delete untuk model tertentu. Misalnya, Anda ingin membuat CRUD untuk model Category. Anda bisa menjalankan perintah php artisan make:filament-resource Category.

Perintah tersebut akan menghasilkan beberapa file, yaitu:



-- CategoryResources.php
-- CategoryResource
   -- Pages
      -- CreateCategory.php
      -- EditCategory.php
      -- ListCategory.php

Jika Anda lihat pada sidebar terdapat menu navigasi baru yaitu Categories. Jika Anda ingin mengganti nama menu tersebut, buka file CategoryResources.php dan tambahkan code berikut.



protected static ?string $navigationLabel = 'Manage Category';

Mengatur Resource

Setelah resource dibuat, Anda bisa mengatur kolom apa saja yang ingin ditampilkan.



public static function table(Table $table): Table
    {
        return $table
            ->columns([
                Tables\Columns\TextColumn::make('code'),
                Tables\Columns\TextColumn::make('name'),
                Tables\Columns\ImageColumn::make('image')->disk('public'),
            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ]);
    }

Menggunakan Form Builder

Selain menampilkan data, Anda juga bisa membuat formulir untuk menambah atau mengedit category. Filament menyediakan Form Builder yang memudahkan pembuatan formulir ini.



public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\TextInput::make(name: 'code')->required()->unique(table: Category::class),
                Forms\Components\TextInput::make(name: 'name')->required(),
                Forms\Components\FileUpload::make('image')->disk('public')->required()
            ]);
    }

Apa itu Laravel Blueprint?

Muhammad Mahib Arib — Wed, 17 Jul 2024 06:25:57 +0000

Laravel Blueprint adalah package untuk Laravel yang memudahkan pembuatan komponen aplikasi seperti model, controller, dan migration menggunakan file definisi sederhana. Dengan Blueprint, Anda bisa mendefinisikan struktur aplikasi dalam format YAML dan menghasilkan kode yang diperlukan secara otomatis.

Kita akan coba latihan dengan studi kasus membuat toko sepatu.

Lakukan instalasi package dengan menjalankan perintah composer require -W --dev laravel-shift/blueprint. Kemudian jalankan perintah php artisan blueprint:new. Perintah tersebut akan menghasilkan sebuah file draft.yaml.

Buka file draft.yaml kemudian isi sebagai berikut.

models:
  Category:
    code: string unique
    name: string
    img: string
    relationships:
      hasMany: Shoe

  Shoe:
    code: string unique
    name: string
    description: text
    price: integer
    stock: integer
    img: string
    category_id: foreign

controllers:
  CategoryController:
    index:
      query: all
      render: category.index
    show:
      find: id
      render: category.show
    create:
      render: category.create
    store:
      validate: code, name, img
      save: category
      redirect: category.index
    edit:
      find: id
      render: category.edit
    update:
      find: id
      validate: code, name, img
      update: category
      redirect: category.show
    destroy:
      find: id
      delete: category
      redirect: category.index

  ShoeController:
    index:
      query: all
      render: shoe.index
    show:
      find: id
      render: shoe.show
    create:
      render: shoe.create
    store:
      validate: code, name, description, price, stock, img
      save: shoe
      redirect: shoe.index
    edit:
      find: id
      render: shoe.edit
    update:
      find: id
      validate: code, name, description, price, stock, img
      update: shoe
      redirect: shoe.show
    destroy:
      find: id
      delete: shoe
      redirect: shoe.index

Penjelasan dari kode tersebut:

Category dan Shoe adalah nama model.
code, name, dan img adalah kolom-kolom tabel categories.
relationships hasMany menandakan bahwa tabel categories memiliki relasi one to many ke tabel shoes.
code, name, description, price, stock dan img adalah kolom-kolom tabel shoes.
category_id merupakan foreign key ke tabel categories.
CategoryController dan ShoeController adalah nama controller.
index, show, create, store, edit, update, destroy adalah metode-metode di controller.
query: all berarti metode index akan mengambil semua entri di tabel.
find: id berarti metode akan mencari entri berdasarkan ID.
validate akan memvalidasi input.
save, update, delete melakukan operasi pada model.
render mengarahkan ke view tertentu.
redirect mengarahkan ke route tertentu setelah operasi selesai.

Jika sudah selesai, jalankan perintah php artisan blueprint:build. Perintah ini akan menghasilkan:

Model Category dan Shoe.
Migration untuk membuat tabel categories dan shoes dengan kolom yang telah didefinisikan.
Factory dan Seeder.
Controller CategoryController dan ShoeController

Bagaimana jika kita memiliki perubahan pada file draft.yaml? Jalankan terlebih dahulu perintah php artisan blueprint:erase, perintah ini akan menghapus semua file yang sudah dibuat tadi. Kemudian jalankan kembali perintah php artisan blueprint:build.

Dengan menggunakan Laravel Blueprint, Anda bisa dengan cepat mendefinisikan dan menghasilkan struktur dasar aplikasi Anda tanpa menulis kode secara manual. Laravel Blueprint sangat berguna untuk mempercepat proses pengembangan awal dan menjaga konsistensi dalam kode yang dihasilkan.

Fetching Data Dengan Alpine JS

Muhammad Mahib Arib — Wed, 10 Jul 2024 12:57:26 +0000

Kali ini kita akan belajar fetching data dari API dengan menggunakan Alpine JS. Kita akan buat website yang menampilkan daftar klub sepak bola yang bermain di Liga Premier Inggris yang diambil dari API berikut.

Alpine JS merupakan sebuah lightweight framework Javascript yang dapat kita manfaatkan untuk membuat sebuah interaktif website tanpa harus menggunakan framework seperti React atau Vue. Ketika menggunakan Alpine JS kita dapat dengan mudah langsung menerapkan sifat Javascript ke dalam file HTML tanpa perlu menuliskannya secara terpisah.

Silahkan buat file HTML dengan nama index.html, kemudian sisipkan kode berikut.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Latihan Alpine JS</title>

    <!-- Import Alpine JS -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

    <!-- Import Tailwind -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"/>

    <style>
      * {
        font-family: "Roboto", sans-serif;
      }
    </style>
  </head>
  <body>

  </body>
</html>

Selanjutnya kita akan membuat komponen card menggunakan Tailwind CSS.

<div class="container px-4 py-12 mx-auto">
  <div class="flex flex-wrap">
    <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
      <img alt="logo" class="object-cover h-56 mx-auto" src="" />
      <div class="mt-4">
        <h2 class="text-gray-500 text-xs tracking-widest mb-1"></h2>
        <h1 class="text-gray-900 text-xl font-medium"></h1>
      </div>
    </div>
  </div>
</div>

Kemudian kita akan melakukan fetching data dan menampilkannya pada komponen card.

<div class="flex flex-wrap" x-data="{ teams: [] }" x-init="fetch('https://www.thesportsdb.com/api/v1/json/3/search_all_teams.php?l=English%20Premier%20League').then(response => response.json()).then(data => { teams = data.teams })">
  <template x-for="team in teams">
    <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
      <img x-bind:alt="team.idTeam" class="object-cover h-56 mx-auto" x-bind:src="team.strBadge" />
      <div class="mt-4">
        <h2 class="text-gray-500 text-xs tracking-widest mb-1" x-text="team.strLocation"></h2>
        <h1 class="text-gray-900 text-xl font-medium" x-text="team.strTeam"></h1>
      </div>
    </div>
  </template>
</div>

Selamat! Anda berhasil melakukan fetching API dengan menggunakan Alpine JS dan menampilkannya kepada pengguna, berikut ini adalah hasilnya.

Berikut ini penjelasan dari kode yang dibuat.

x-data berfungsi untuk menampung data logic Javascript agar berjalan langsung pada tag HTML tersebut. Pada kode tersebut kita membuat satu variabel dengan nama teams yang bertipe data array. Variabel ini bertujuan untuk menampung data hasil fetching pada fungsi tersebut.

x-init bertujuan untuk melakukan inisialisasi sebelum komponen tersebut di load. Pada kode tersebut kita menyisipkan fungsi fetch yang bertujuan untuk mengambil data dari endpoint API yang sudah kita siapkan sebelumnya. Kemudian sebelum halaman browser ditampilkan, Alpine JS akan melakukan proses fetching di belakang layar kemudian hasil dari fetching tersebut ditampung kedalam variabel teams yang sudah dideklarasikan di awal.

x-for digunakan untuk melakukan proses perulangan dari variabel teams kemudian ditampung kembali dalam variabel team.

x-bind untuk menampilkan gambar dan x-text untuk mencetak langsung data kedalam tampilan HTML.

Mengirim Pesan WhatsApp dengan JavaScript

Muhammad Mahib Arib — Tue, 09 Jul 2024 06:35:51 +0000

Pada kesempatan kali ini saya akan membagikan cara mengirimkan pesan WhatsApp secara otomatis menggunakan library Puppeteer.

Apa itu Puppeteer? Puppeteer adalah sebuah library Node.js yang menyediakan API tingkat tinggi untuk mengontrol browser Chrome atau Chromium secara programatik. Puppeteer digunakan untuk mengotomatisasi tugas-tugas di browser, seperti Web Scraping, Pengujian Web, Mengambil Screenshot, Menghasilkan PDF, dan Interaksi dengan Halaman. Puppeteer sangat berguna untuk pengembang web dan penguji karena memungkinkan otomatisasi tugas yang biasanya memerlukan interaksi manual dengan browser.

Silahkan buat folder untuk menyimpan project latihan kali ini, kemudian buat file index.js kemudian jalankan npm init setelah itu jalankan npm i puppeteer.

Tulis kode dibawah ini pada index.js.

import puppeteer from 'puppeteer';

const scrape = async (url) => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto(url);
};

scrape("https://web.whatsapp.com");

Buka WhatsApp Web kemudian lakukan inspect element dan pilih nama kontak yang ingin dikirimi pesan. Sebagai contoh saya akan mengirim pesan dengan nama kontak yaitu Asep.

await page.waitForSelector("span[title='Asep']");
const target = await page.$("span[title='Asep']");
await target.click();

Kemudian copy selector pada kolom tempat menulis pesan pada chat.

const inp = await page.$(
    "#main > footer > div._3SvgF._1mHgA.copyable-area > div.DuUXI > div > div._1awRl.copyable-text.selectable-text"
);

Kemudian tulis pesan yang ingin dikirim, Anda juga bisa melakukan pengulangan pada pesan yang dikirim.

for (let i = 0; i < 100; i++) { // lakukan pengulangan sesuai keinginan
  await inp.type("halo!"); // isi pesan
  await page.keyboard.press("Enter");
}
await browser.close();

Sehingga keseluruhan kode menjadi seperti ini.

import puppeteer from 'puppeteer';

const scrape = async (url) => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto(url);
  await page.waitForSelector("span[title='Asep']");
  const target = await page.$("span[title='Asep']");
  await target.click();
  const inp = await page.$(
    "#main > footer > div._3SvgF._1mHgA.copyable-area > div.DuUXI > div > div._1awRl.copyable-text.selectable-text"
  );

  for (let i = 0; i < 100; i++) {
    await inp.type("halo!");
    await page.keyboard.press("Enter");
  }
  await browser.close();
};

scrape("https://web.whatsapp.com");

Jalankan kode dengan perintah node index.js.

Dark Mode React & Tailwind CSS

Muhammad Mahib Arib — Sat, 06 Aug 2022 06:10:00 +0000

Halo guys, pada kali ini saya akan membagikan cara menerapkan dark mode pada project React kita dengan menggunakan Tailwind CSS. Langsung saja kita mulai.

Silahkan persiapkan project Anda. Anda bisa mengikuti artikel berikut untuk installasi project React dan Tailwind CSS. Cara Install Tailwind CSS pada React project.

Jika sudah, buka file tailwind.config.js tambahkan kode berikut pada bagian module.exports.

module.exports = {
  darkMode: 'class',
  // ...
}

Kode tersebut berfungsi untuk mengaktifkan class dark pada Tailwind. Kelas tersebut akan aktif jika pada mode dark. Untuk menggunakannya anda hanya perlu menuliskan dark: diikuti dengan nama class. Anda bisa lihat lebih lanjut pada artikel berikut. Dark Mode - Tailwind CSS.

Selanjutnya kita akan menggunakan package dari NPM untuk membuat ikonnya. Jadi kita tidak perlu repot mempersiapkan ikon sendiri karena pada package tersebut telah disiapkan ikon untuk mode gelap dan terang dan juga terdapat animasi pada transisinya. Untuk lebih lengkapnya, Anda bisa lihat pada artikel berikut. React Toggle Dark Mode.

Lakukan installasi dan tunggu hingga selesai.

npm i react-toggle-dark-mode

Pada kasus ini, saya akan menempatkan tombol toggle dark mode pada bagian header. Berikut ini kode file Header.js saya.

import React from "react";
import Switcher from "./Switcher";

function Header() {
  return (
    <header className="bg-purple-500 text-white font-bold text-3xl dark:bg-slate-800">
      <div className="container flex justify-between p-5 mx-auto items-center uppercase">
        <h1>Example App</h1>
        <Switcher />
      </div>
    </header>
  );
}

export default Header;

Buat sebuah file untuk meletakkan kode toggle dark mode Anda. Pada kasus ini saya memberi nama file tersebut dengan Switcher.js. Letakkan komponen Switcher tersebut pada Header dan lakukan import berkas. Berikut ini isi dari kode Switcher.js.

import React, { useState } from "react";
import { DarkModeSwitch } from "react-toggle-dark-mode";
import UseDarkSide from "./UseDarkSide";

function Switcher() {
  const [colorTheme, setTheme] = UseDarkSide();
  const [darkSide, setDarkSide] = useState(
    colorTheme === "light" ? true : false
  );
  const toggleDarkMode = (checked) => {
    setTheme(colorTheme);
    setDarkSide(checked);
  };

  return (
    <DarkModeSwitch checked={darkSide} onChange={toggleDarkMode} size={30} />
  );
}

export default Switcher;

Komponen DarkModeSwitch adalah komponen bawaan dari package yang kita install tadi.

Terakhir kita buat satu buah file untuk menyimpan pilihan tema mode kita pada local storage. Jadi jika kita refresh atau kita tutup browser, tema mode yang aktif tidak berubah. Buat file bernama UseDarkSide dan berikut ini isi dari file tersebut.

import { useEffect, useState } from "react";

function UseDarkSide() {
  const [theme, setTheme] = useState(localStorage.theme);
  const colorTheme = theme === "dark" ? "light" : "dark";
  useEffect(() => {
    const root = window.document.documentElement;
    root.classList.remove(colorTheme);
    root.classList.add(theme);
    localStorage.setItem("theme", theme);
  }, [theme, colorTheme]);

  return [colorTheme, setTheme];
}

export default UseDarkSide;

Selesai dan fitur dark mode Anda sudah bisa digunakan.

Cara Install Tailwind CSS pada React project

Muhammad Mahib Arib — Fri, 29 Jul 2022 10:55:00 +0000

Halo guys, pada kali ini saya akan membagikan bagaimana cara menggunakan Tailwind CSS pada project React kita. Langsung saja kita mulai.

Pastikan sudah menginstall nodejs pada komputer/laptop Anda. Karena untuk membuat project React, kita perlu menggunakan NPM yaitu dengan cara menginstall nodejs. Untuk mengecek apakah nodejs sudah terpasang ketikkan perintah berikut pada terminal Anda.



node -v

Jika muncul versi, maka nodejs sudah terpasang. Lalu untuk mengecek versi NPM ketikkan perintah berikut.



npm -v

Jika sudah muncul versi NPM, maka kita sudah bisa untuk membuat project React.

Pertama, buat project React terlebih dahulu jika kita belum memiliki project React. Jika Anda sudah memiliki project React, silahkan lewati tahap ini. Kita akan membuat project React baru menggunakan Create React App.

Buka terminal, pastikan Anda sudah berada pada direktori folder tempat dimana Anda ingin menyimpan project React. Ketikkan perintah berikut.



npx create-react-app my-project

Anda bebas memberikan nama project yang ingin diinstall, pada kali ini saya akan memberikan contoh dengan nama my-project. Tunggu proses installasi berjalan hingga selesai. Jika sudah selesai, masuk ke direktori project React yang sudah kita buat tadi. Ketikkan perintah berikut.



cd my-project

Untuk menjalankan project React, ketikkan perintah berikut.



npm start

Maka browser akan otomatis membuka halaman http://localhost:3000/ dan Anda akan melihat tampilan awal dari project React yang sudah diinstall.

Selanjutnya install Tailwind CSS dengan mengetikkan perintah berikut pada terminal.



npm install -D tailwindcss postcss autoprefixer

Tunggu hingga selesai, kemudian ketik kembali perintah berikut.



npx tailwindcss init -p

Jika semua berjalan lancar, maka Tailwind CSS sudah berhasil diinstall. Selanjutnya buka project React kita pada code editor. Kemudian buka file tailwind.config.js edit menjadi seperti ini.



/** @type {import('tailwindcss').Config} */ 
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Kemudian untuk dapat menggunakan Tailwind CSS edit file index.css yang berada pada folder src menjadi seperti ini.



@tailwind base;
@tailwind components;
@tailwind utilities;

Proses installasi selesai dan Tailwind CSS sudah dapat digunakan. Untuk mengecek apakah sudah berhasil terpasang, silahkan coba edit file App.js menjadi seperti ini.



<p className="text-3xl font-bold underline text-red-500">
  Edit <code>src/App.js</code> and save to reload.
</p>

Simpan dan jalankan project, maka Anda akan melihat perbedaannya.

VAR, LET, DAN CONST JAVASCRIPT ES6

Muhammad Mahib Arib — Mon, 09 May 2022 04:06:21 +0000

Pada artikel kali ini saya akan menjelaskan perbedaan dalam penggunaan var, let, dan const pada JavaScript ES6.

CONST

Nilainya hanya dapat dibuat sekali dan hanya bisa dipakai di dalam scope.

if(true){
 const nama = "John Doe";
 nama = "Steven"; // error, karena tidak boleh ganti nilai
}

console.log(nama); // error, karena di luar if

LET

Nilainya bisa diubah dan hanya bisa dipakai di dalam scope.

if(true){
 let nama = "John Doe";
 nama = "Steven"; // berhasil ganti nilai
}

console.log(nama); // error, karena di luar if

VAR

Nilainya bisa diubah dan bisa dipakai di luar scope.

if(true){
 var nama = "John Doe";
 nama = "Steven"; // berhasil ganti nilai
}

console.log(nama); // berhasil walaupun di luar if