Assalamu'alaikum Wr. Wb
React Native adalah framework javascript yang saat ini mampu digunakan untuk membangun berbagai aplikasi di berbagai platform seperti Android, iOS, Desktop Windows, bahkan Desktop MacOS seperti yang tertulis pada doumentasinya "Read Once, Write Everywhere" yang maksudnya adalah baca atau pelajari sekali tulis kodingan dimanapun atau untuk platform apapun. Untuk tutorial saya kali ini saya hanya membahas tutorial setup dan memulai project Desktop Windows menggunakan Framework React Native.
- Siapkan Sistem Operasi Windows
Untuk membangun aplikasi desktop windows anda tentu saja yang perlu anda siapkan pertama kali adalah sistem operasi Windows. Jika anda mengunjungi dokumentasi resmi React Native Windows maka akan ada keterangan bahwa Windows 11 sangat kompatibel untuk membangun project React Native Windows, tetapi anda juga dapat menggunakan Windows 10, hanya saja tidak semua Windows 10 mendukung untuk mengembangkan aplikasi desktop Windows menggunakan React Native, untuk mengetahui versi Windows mana saja yang mendukung untuk mengembangkan aplikasi desktop menggunakan React Native anda dapat mengunjungi halaman https://microsoft.github.io/react-native-windows/docs/win10-compat. - Menginstall dependensi menggunakan PowerShell
Dengan menggunakan PowerShell yang tersedia pada windows anda, anda dapat mengecek atau menginstall apa saja yang dibutuhkan untuk mengembangkan aplikasi React Native Windows anda, anda dapat melakukannya dengan membuka PowerShell Windows pada dari menu start dan cari PowerShell lalu klik kanan dan pilih "Run as administrator" untuk masuk ke PowerShell sebagai administrator, selanjutnya masukkan perintah berikut pada terminal:
Set-ExecutionPolicy Unrestricted -Scope Process -Force;
iex (New-Object System.Net.WebClient).DownloadString('https://aka.ms/rnw-deps.ps1') - Menginstall dependensi secara manual menggunakan Visual Studio
Selain menggunakan perintah pada langkah kedua anda juga dapat menginstall dependensi secara manual, jika anda melihat pada dokumentasi resminya maka anda akan menemukan catatan bahwa ada kemungkinan mungkin setup React Native Windows secara manual akan ketinggalan jaman atau jarang digunakan lagi, tetapi saya akan tetap memberikan informasi setup secara manual kepada anda, untuk melakukannya anda perlu menginstall Visual Studio terlebih dahulu, Visual Studio disini berbeda dengan Visual Studio Code yang biasa kita pakai sebagai Code Editor, melainkan Visual Studio disini adalah IDE dan Code Editor milik Microsoft yang mendukung untuk melakukan pengembangan aplikasi desktop windows menggunakan React Native, untuk mendownload dan menginstall Visual Studio anda dapat mengunjungi halaman https://visualstudio.microsoft.com/ lalu klik tombol download Visual Studio yang tersedia, pada link tersebut tidak mendownload Visual Studio secara langsung melainkan hanya installernya saja yang penginstalan dependensi akan kita lanjutkan pada langkah-langkah berikutnya. - Mengaktifkan Developer Mode pada Windows anda
Selanjutnya yang perlu anda lakukan untuk melakukan pengembangan aplikasi React Native Windows anda adalah mengektifkan developer mode pada Sistem Operasi Windows anda, untuk Windows 10 caranya adalah masuk ke menu pencarian start lalu cari Developer setting, klik menu Developer Setting pada hasil pencarian lalu anda akan bertemu dengan halaman Developer setting yang tersedia toggle untuk mengaktifkan mode Developer Mode, klik toggle sampai On maka anda berhasil mengaktifkan Developer Mode pada Sistem Operasi Windows anda.
Jika anda membaca dokumentasi resminya maka anda akan dianjurkan untuk mengupdate Windows 10 atau Windows 11 anda ke versi terbaru atau Windows 10 ke Windows 11 atau terbaru, jika tidak ingin terlalu terlalu panjang kita bisa lanjutkan ke langkah berikutnya.
- Install Node.js
Sebenarnya anda bisa menginstall Node.js menggunakan Visual Studio Installer, tetapi pada tutotial kali ini kita akan menginstall Node.js secara manual atau terpisah. Untuk menginstallnya kita bisa langsung masuk ke halaman resmi Node.js di https://nodejs.org lalu download dan install Node.js pada Sistem Operasi Windows layaknya program biasa yang biasa anda install pada Sistem Operasi Windows anda. - Aktifkan NTFS Long Path
Pada langkah kali ini saya hanya bisa memberikan tutorial untuk Versi Windows yang saat ini saya gunakan yaitu Windows 10 Pro-64-bit (10.0, Build 19043) dan mungkin akan berbeda untuk versi yang lain(seperti Windows 10), caranya adalah dengan masuk ke Start -> ketik dan pilih "Local group policy" -> Local Computer Policy -> Computer Configuration -> Administrative Telplates -> System -> Filesystem -> klik "Enable Win32 long paths" -> akan muncul jendela baru lalu pilih enable -> pilih OK.
- Buka Visual Studio Installer dan checklist dependensi yang dibutuhkan
Selanjutnya yang perlu kita lakukan adalah membuka Visual Studio Installer lalu checklist dependensi yang dibutuhkan yaitu:
1. .Net Desktop Development
2. Desktop Development with c++
3. Universal Windows Platform Development
untuk yang satu ini anda perlu menceklist C++ (v142) Universal Windows Platform Tools yang mungkin dibutuhkan untuk SDK Windows 10 lama.
Setelah anda menceklist dependensi di atas maka yang perlu anda lakukan adalah menginstallnya, pastikan anda menginstallnya menggunakan jaringan Wi-fi karena ukurannya yang cukup besar bergiga-giga dan prosesnya yang lama. - Install kelengkapan untuk pengembangan project
Selanjutnya adalah menginstall beberapa aplikasi atau program yang digunakan untuk anda melakukan pengembangan project anda diantaranya adalah git sebagai Version Control System(anda dapat menginstallnya disini), yarn sebagai package manager(anda dapat menginstallnya disini), dan Chrome sebagai tempat melakukan debugging(anda dapat menginstallnya disini) yang sebenarnya adalah opsional karena secara otomatis Windows anda sudah terinstall npm(node package manager) untuk package manager setelah anda menginstall Node.js, sudah terinstall Microsoft Edge sebagai browser untuk debugging, dan git hanya tambahan tetapi sangat dianjurkan untuk pengembangan dan untuk saat ini sangat diwajibkan untuk seorang pngembng perangkat lunak. - Mulai membuat project aplikasi desktop menggunakan React Native
Setelah mengikuti langkah-langkah di atas maka anda sudah siam mebuat project aplikasi desktop pertama anda menggunakan react native windows, anda dapat membuat project pertama anda menggunakan perintah berikut:
npx react-native init NamaProjectAnda
Dengan menggunakan perintah di atau maka komputer anda akan mulai bekerja membuat project react native dengan template versi terbaru, untuk menggunakan template versi tertentu anda dapat menggunakan perintah berikut:
npx react-native init NamaProjectAnda --template react-native@^0.69.0 - Install package untuk project React Native Windows anda
Terakhir yang perlu anda lakukan adalah menginstall package untuk project react native windows anda, untuk melakukannya anda dapat mengetikkan perintah berikut pada terminal:
npx react-native-windows-init --overwrite - Mulai mendebug aplikasi anda
Setelah anda membuat project react native windows anda, langkah selanjutnya adalah menginstall dan menjalankan project anda di komputer anda, untuk melakukannya anda harus mengetikkan perintah berikut pada terminal:
npx react-native run-windows
anda harus menunggu proses instalasi selesai, setelah itu anda akan diberikan jendela cmd baru berisi metro server untuk mendebug aplikasi desktop windows anda sekaligus tab browser baru untuk mendebug aplikasi desktop windows yang sedang anda kerjakan.
0 Komentar