Pengembangan Berbasis Platform: Instalasi dan Pembuatan Project HelloWorld

Sebagai bagian dari mata kuliah Pengembangan Berbasis Platform kelas D, mahasiswa diberikan tugas untuk mendokumentasikan proses instalasi dan penggunaan beberapa kerangka pengembangan aplikasi, yaitu Android Studio (Android – Kotlin), Xcode (iOS – Swift), React Native, Flutter, dan Kotlin Multiplatform Mobile (KMM). Dokumentasi tersebut meliputi tahapan pengunduhan, instalasi, konfigurasi, hingga pembuatan project sederhana bernama HelloWorld pada masing-masing platform. Selain itu, setiap langkah diwajibkan disertai dengan tangkapan layar penuh sebagai bukti proses telah dilakukan.

Melalui tugas ini, diharapkan dapat diperoleh pemahaman awal mengenai perbedaan karakteristik setiap platform pengembangan, serta bagaimana setiap lingkungan kerja dioperasikan dari tahap instalasi hingga menghasilkan project dasar.

ANDROID STUDIO

A. Instalasi Android Studio

Proses instalasi Android Studio pada sistem operasi Windows diawali dengan mengunjungi situs resmi Android Studio menggunakan peramban web. Pada halaman tersebut terdapat tombol Download Android Studio yang disediakan Google sebagai sumber resmi unduhan. Pada tahap ini, penting untuk memastikan bahwa halaman yang diakses merupakan situs resmi pengembang agar file instalasi yang diperoleh aman dan sesuai standar. Tampilan halaman unduhan perlu didokumentasikan melalui tangkapan layar penuh (screenshot), sehingga menunjukkan konteks seluruh aktivitas di desktop saat pengunduhan dilakukan.

Setelah tombol unduh dipilih, sistem menampilkan halaman persetujuan lisensi. Halaman ini menunjukkan ketentuan penggunaan perangkat lunak yang harus disetujui sebelum melanjutkan ke proses pengunduhan file instalasi. Persetujuan lisensi menjadi langkah penting karena menunjukkan kesediaan pengguna mematuhi syarat yang telah ditetapkan oleh Google. Tampilan halaman lisensi juga perlu diambil melalui screenshot untuk menunjukkan bahwa prosedur administratif telah dilalui.

File instalasi yang telah berhasil diunduh kemudian dijalankan. Windows akan menampilkan jendela Android Studio Setup Wizard sebagai bagian dari proses instalasi. Pada jendela ini, pengguna akan dipandu melalui beberapa tahap konfigurasi awal. Seluruh tampilan wizard, termasuk pilihan komponen yang akan dipasang, direkomendasikan untuk dibuatkan screenshot layar penuh. Hal ini bertujuan agar setiap langkah dalam proses instalasi terdokumentasi secara jelas dan menyeluruh.

Proses instalasi kemudian berlangsung hingga seluruh komponen selesai dipasang ke dalam sistem. Jendela instalasi akan memperlihatkan progres bar yang menandakan proses ekstraksi file sedang berlangsung. Mendokumentasikan bagian ini melalui screenshot berguna sebagai bukti bahwa proses instalasi dilakukan hingga tahap akhir, sebelum aplikasi siap dijalankan. Setelah instalasi selesai, pengguna diarahkan untuk menekan tombol Finish yang kemudian membuka halaman awal Android Studio.

B. Konfigurasi Awal Android Studio

Setelah Android Studio selesai dikonfigurasi, tahap berikutnya adalah membuat project baru. Proses dimulai dengan memilih menu New Project pada halaman awal Android Studio. Tampilan halaman ini didokumentasikan untuk menunjukkan bahwa proses pembuatan aplikasi dimulai dari lingkungan kerja yang telah siap pakai. Selanjutnya Android Studio menampilkan pilihan template project. Untuk pembuatan aplikasi sederhana, template Empty Activity dipilih karena menyediakan struktur dasar yang minimal dan mudah dipahami. Tangkapan layar pada tahap ini menunjukkan bahwa template yang sesuai telah dipilih sesuai tujuan pembuatan aplikasi dasar.

Pada halaman konfigurasi project, beberapa parameter perlu diisi, termasuk Name, Package Name, Language, dan Minimum SDK. Pada tugas ini, nama project ditetapkan sebagai HelloWorld, dan bahasa pemrograman yang digunakan adalah Kotlin, sesuai standar pengembangan aplikasi Android modern. Screenshot pada bagian ini penting sebagai bukti bahwa konfigurasi project telah diatur dengan benar sebelum proses pembangunan aplikasi dimulai.

Setelah seluruh parameter selesai diatur, Android Studio akan memuat project dan menampilkan struktur folder serta file utama seperti MainActivity.kt. Tampilan awal editor menunjukkan komponen-komponen dasar aplikasi Android yang akan menjadi fondasi pengembangan selanjutnya. Dokumentasi tahap ini berfungsi untuk memastikan bahwa project telah berhasil dibuat dan siap untuk dikembangkan lebih lanjut.

Melalui tahapan yang telah dilakukan, Android Studio berhasil diinstal dan dikonfigurasi pada sistem operasi Windows. Selain itu, project dasar HelloWorld berhasil dibuat menggunakan bahasa pemrograman Kotlin dengan template Empty Activity.

REACT NATIVE

A. Instalasi Environment React Native

Sebelum memulai proses pembuatan project, perlu dipastikan bahwa Node.js telah terpasang pada sistem operasi Windows, dan Expo Go terinstall di IOS/Android. Node.js berfungsi sebagai lingkungan eksekusi JavaScript yang dibutuhkan oleh Expo. Setelah lingkungan kerja dinyatakan siap, proses pembuatan project dimulai dengan membuka Command Prompt baru untuk memastikan bahwa proses berjalan pada kondisi yang bersih. Selanjutnya, direktori kerja dipilih sesuai preferensi pengguna, misalnya di dalam folder Documents.

Setelah environment siap, pembuatan project baru dapat dimulai menggunakan perintah Expo. Command Prompt atau terminal dibuka, kemudian diarahkan ke direktori tempat project akan disimpan. Perintah npx create-expo-app HelloWorld dijalankan untuk membuat project baru dengan nama HelloWorld. Perintah ini akan mengunduh template project Expo dan menginstal semua dependencies yang diperlukan secara otomatis. 

B. Menjalankan Project HelloWorld

Untuk menjalankan aplikasi yang telah dibuat, Command Prompt diarahkan ke dalam direktori project dengan perintah cd HelloWorld. Setelah berada di dalam direktori project, perintah npx expo start dijalankan untuk memulai development server. Perintah ini akan menjalankan Metro Bundler dan menampilkan QR code serta berbagai opsi untuk menjalankan aplikasi. Screenshot Command Prompt yang menampilkan Metro Bundler berjalan dengan QR code perlu didokumentasikan.

Setelah project HelloWorld dibuka di Visual Studio Code, tampilan editor akan menampilkan struktur lengkap project pada panel Explorer di sisi kiri. Struktur project Expo mencakup berbagai folder penting seperti assets untuk menyimpan gambar dan resource, components untuk komponen React yang dapat digunakan kembali, constants untuk nilai-nilai tetap, hooks untuk custom React hooks, dan folder node_modules yang berisi semua library dependencies yang telah diinstal. Selain itu, terdapat beberapa file konfigurasi penting seperti app.json, package.json, dan tsconfig.json yang mengatur berbagai aspek project.

XCODE

A. Instalasi XCODE

Proses instalasi Xcode pada sistem operasi macOS dimulai dengan membuka aplikasi App Store yang tersedia secara bawaan pada sistem. Pengguna dapat mencari "Xcode" melalui kolom pencarian di App Store, yang akan menampilkan aplikasi resmi dari Apple Inc. 

Setelah aplikasi Xcode ditemukan, pengguna dapat menekan tombol "Get" atau "Download" untuk memulai proses pengunduhan dan instalasi. Perlu diperhatikan bahwa ukuran file Xcode cukup besar (sekitar 12-15 GB), sehingga memerlukan koneksi internet yang stabil dan ruang penyimpanan yang memadai. Proses pengunduhan dapat memakan waktu bergantung pada kecepatan internet.

Setelah pengunduhan selesai, sistem akan secara otomatis melakukan instalasi Xcode ke dalam direktori Applications. Proses ini mungkin memerlukan autentikasi menggunakan password administrator macOS. Jendela instalasi akan menampilkan progres bar yang menandakan proses ekstraksi dan pemasangan komponen sedang berlangsung.

B. Konfigurasi Awal dan Pembuatan Project HelloWorld

Setelah Xcode berhasil diinstal dan dibuka, tampilan awal akan menampilkan Welcome Screen dengan beberapa pilihan menu. Untuk membuat project baru, pengguna memilih opsi "Create New Project" atau menggunakan menu File > New > Project. Tampilan halaman awal ini didokumentasikan melalui screenshot untuk menunjukkan titik awal pembuatan aplikasi iOS.

Xcode kemudian menampilkan jendela pemilihan template project. Untuk aplikasi iOS, pengguna memilih platform "iOS" kemudian memilih template "App" yang menyediakan struktur dasar aplikasi single-view. Template ini cocok untuk pembuatan aplikasi sederhana seperti HelloWorld. Screenshot pada tahap pemilihan template menunjukkan bahwa jenis project yang sesuai telah dipilih.

Pada halaman konfigurasi project, beberapa parameter perlu diisi termasuk Product Name, Team, Organization Identifier, dan Interface. Product Name diisi dengan "HelloWorld", sedangkan untuk Interface dipilih "SwiftUI" atau "Storyboard" sesuai preferensi. Bahasa pemrograman dipilih "Swift" sebagai bahasa standar pengembangan iOS modern. 

Setelah konfigurasi selesai, pengguna diminta memilih lokasi penyimpanan project dan dapat memilih opsi untuk membuat Git repository. Setelah menekan tombol "Create", Xcode akan membuat struktur project dan menampilkan editor dengan file-file dasar seperti ContentView.swift atau ViewController.swift bergantung pada pilihan interface.

FLUTTER

A. Instalasi Flutter SDK

Sebelum menginstal Flutter, perlu Git yang berfungsi sebagai tool untuk mengelola paket dan dependensi Flutter. Proses instalasi Git dimulai dengan mengunduh installer dari situs resminya. Saat menjalankan wizard, penting untuk memastikan konfigurasi Git diatur agar dapat diakses melalui Command Prompt atau PowerShell.

Proses instalasi Flutter pada sistem operasi Windows dimulai dengan mengunjungi situs resmi flutter.dev untuk mengunduh Flutter SDK. Pada halaman unduhan, tersedia tombol download untuk sistem operasi yang sesuai. File yang diunduh berbentuk arsip ZIP yang berisi seluruh SDK Flutter. Setelah file ZIP selesai diunduh, file tersebut diekstrak ke lokasi yang diinginkan, disarankan di direktori C:\flutter atau lokasi tanpa spasi dalam path-nya. Proses ekstraksi dapat dilakukan menggunakan Windows Explorer atau aplikasi ekstraksi file lainnya. 

Langkah selanjutnya adalah menambahkan Flutter ke variabel environment PATH agar dapat diakses dari terminal atau command prompt. Pengguna membuka System Properties > Environment Variables, kemudian menambahkan path ke folder flutter\bin pada variabel PATH. Screenshot jendela Environment Variables yang menunjukkan penambahan path Flutter perlu diambil sebagai dokumentasi konfigurasi.

Setelah konfigurasi path selesai, verifikasi dilakukan dengan menjalankan perintah flutter doctor di Command Prompt atau PowerShell. Perintah ini akan memeriksa seluruh komponen yang dibutuhkan (SDK, IDE, Lisensi, dll.) dan melaporkan statusnya. Jika terdapat isu lisensi Android, perintah flutter doctor --android-licenses dijalankan untuk menerima semua persyaratan dan ketentuan yang diperlukan. Setelah semua isu diselesaikan, flutter doctor akan menunjukkan hasil yang bersih.

B. Pembuatan Project HelloWorld dengan Flutter

Setelah Flutter SDK terinstal dan terkonfigurasi dengan benar, pembuatan project baru dapat dimulai. Command Prompt atau terminal dibuka, kemudian perintah flutter create helloworld dijalankan untuk membuat project baru dengan nama helloworld. Flutter akan membuat struktur project lengkap dengan kode template dasar untuk aplikasi multiplatform.

Setelah proyek dibuat, file lib/main.dart dimodifikasi menggunakan IDE (seperti Visual Studio Code atau Android Studio). Semua kode default diganti dengan kode minimal yang hanya menampilkan teks "Hello World!" di tengah layar aplikasi. Kode dimodifikasi untuk membuat widget utama (MaterialApp dan Scaffold) menampilkan pesan teks sederhana dengan styling yang jelas.

Proyek ini kemudian dijalankan menggunakan perangkat Edge sebagai target, yang merupakan opsi tercepat untuk verifikasi. Perintah flutter run -d edge dijalankan dari dalam folder proyek helloworld.

Proses kompilasi akan berlangsung, dan setelah berhasil, aplikasi akan otomatis diluncurkan di peramban Microsoft Edge, menampilkan hasil akhir yang sesuai dengan kode yang dimodifikasi.

KOTLIN MULTIPLATFORM MOBILE (KMM)

A. Instalasi Plugin KMM di Android Studio

Proses instalasi Kotlin Multiplatform Mobile (KMM) dimulai dengan memastikan Android Studio versi terbaru telah terinstal pada sistem. Setelah Android Studio dibuka, pengguna mengakses menu File > Settings (pada Windows/Linux) atau Android Studio > Preferences (pada macOS) untuk membuka jendela pengaturan. 

Dalam jendela Settings, pengguna memilih menu Plugins pada panel sebelah kiri. Pada halaman Plugins, terdapat tab Marketplace yang digunakan untuk mencari plugin yang tersedia. Pada kolom pencarian, pengguna mengetikkan "Kotlin Multiplatform Mobile" atau "KMM" untuk menemukan plugin resmi dari JetBrains. Setelah plugin ditemukan, tombol "Install" ditekan untuk memulai proses pengunduhan dan instalasi. Proses ini akan mengunduh plugin KMM beserta semua dependencies yang diperlukan. Setelah instalasi plugin selesai, Android Studio akan meminta untuk melakukan restart agar plugin dapat aktif sepenuhnya. Tombol Restart IDE ditekan untuk melakukan restart. Setelah Android Studio terbuka kembali, plugin KMM sudah aktif dan siap digunakan.

B. Pembuatan Project HelloWorld dengan KMM

Setelah plugin KMM terinstal di Android Studio, pembuatan project baru dapat dimulai. Dari halaman awal Android Studio, pengguna memilih "New Project" kemudian memilih tab "Kotlin Multiplatform" yang akan muncul setelah plugin terinstal. Pada tab tersebut, template "Kotlin Multiplatform App" dipilih untuk membuat aplikasi multiplatform.

Pada halaman konfigurasi project, beberapa parameter perlu diisi termasuk Name, Package name, dan lokasi penyimpanan project. Nama project diisi dengan "HelloWorld" sesuai dengan ketentuan. Pada bagian platform targets, pengguna dapat memilih platform yang akan didukung seperti Android dan iOS. 

Setelah konfigurasi selesai dan tombol Finish ditekan, Android Studio akan membuat struktur project KMM yang terdiri dari beberapa modul. Modul shared berisi kode Kotlin yang akan digunakan bersama antara platform Android dan iOS, sedangkan modul androidApp dan iosApp berisi kode spesifik platform.

Untuk menjalankan aplikasi Android, pengguna dapat memilih konfigurasi run "androidApp" pada toolbar dan menekan tombol Run. Android Studio akan melakukan build dan menjalankan aplikasi pada emulator atau device yang terhubung. Screenshot aplikasi HelloWorld yang berjalan pada emulator Android, menampilkan tampilan default KMM, perlu didokumentasikan. Untuk iOS, jika menggunakan macOS, pengguna dapat membuka project iOS dalam folder iosApp menggunakan Xcode dan menjalankannya pada simulator iOS. 

PENUTUP

Telah dijelaskan secara lengkap proses instalasi dan konfigurasi lima pengembangan aplikasi mobile, yaitu Android Studio dengan Kotlin, Xcode dengan Swift, React Native dengan Expo, Flutter, dan Kotlin Multiplatform Mobile. Setiap kerangka pengembangan memiliki karakteristik dan keunggulan masing-masing yang dapat disesuaikan dengan kebutuhan project. Android Studio dan Xcode cocok untuk pengembangan native yang mengutamakan performa maksimal pada platform spesifik, sementara React Native, Flutter, dan KMM menawarkan solusi multiplatform yang efisien untuk pengembangan aplikasi pada berbagai sistem operasi sekaligus.