Cara Membuat dan Menginstal Paket Aplikasi MSIX Desktop Windows React Native Untuk Kebutuhan Testing Developer

Assalamu'alaikum Wr. Wb.

Setelah saya sebelumnya memposting bagaimana cara setup dan memulai membuat apikasi desktop menggunaan react native sekarang saya akan membagikan tips bagaimana membuat aplikasi aplikasi MSIX Desktop Windows yang dibangun menggunakan React Native untuk kebutuhan testing dan pengembangan, seperti yang telah dijelaskan pada https://learn.microsoft.com/id-id/windows/msix/overview file MSIX adalah format paket aplikasi Windows yang memberikan pengalaman pengemasan modern untuk semua aplikasi Windows yang artinya setelah kita membuild file MSIX, kita akan mendapatkan paket aplikasi yang dapat kita install pada komputer kita yang pada artikel kali ini paket aplikasi tersebut dapat kita gunakan untuk kebutuhan testing untuk pengembangan, langsung saja untuk langkah-langkah menggenerate dan menginstal paket aplikasi MSIX adalah sebagai berikut:

Langkah-langkah menggenerate paket aplikasi menggunakan Visual Studio

Siapkan aplikasi Desktop Windows Anda
Hal pertama yang perlu anda siapkan adalah aplikasi windows anda, jika anda belum memilikinya anda dapat mulai membuatnya dengan mengikuti artiket ini.
Masuk ke file solusion aplikasi Windows anda pada Visual Studio
Selanjutnya buka aplikasi Visual Studio pada Komputer anda lalu pilih file projek(pada artikel kali ini Projek yang dibangun menggunakan React Native) yang ingin anda build menjadi MSIX lalu masuk ke folder windows lalu klik dua kali file ProjectAnda.sln, maka solusion explorer pada Visual Studio akan berubah menjadi daftar yang berisi file solution dan package-package yang anda install pada project anda.
Set opsi konfigurasi output file build anda
Di bawah toolbar terdapat 3 opsi berupa drop down, drop down pertama untuk memlilih jenis paket aplikasi kita apakah aplikasi Debug atau Release, pada opsi tersebut pilih Release, selanjutnya disebelah kanan ada drobdown untuk memilih jenis prosesor komputer untuk paket aplikasi yang akan kita build, pada artikel saya kali ini saya memilih x64 yang sesuai dengan jenis prosesor saya, selanjutnya disebelah kanannya terdapat opsi dropdown lokasi dimana kita akan menaruh paket aplikasi kita, terdapat beberapa opsi lokasi pada dropdown tersebut diantaranya Local Machine, Simulator, Device, dan Remote Machine, pada artikel kali ini saya akan memilih Local Machine karena saya akan menaruh paket aplikasi saya pada komputer yang saat ini saya gunakan.
Set Target Platform dan Target Platform Version
Masuk ke jendela ProjectAnda Property Pages dengan melakukan klik kanan pada file project anda yang terdapat di dalam solution explorer yang pada project windows yang menggunakan react native terdapat di bawah folder ReactNative dan bernama ProjectAnda (Universal Windows), pada jendela klik kanan scroll ke yang paling bawah, lalu pilih Properties, di dalam jendela tersebut terdapat informasi tentang konfigurasi project anda, untuk menyetel Target Platform dan Target Platform Version masuk ke opsi Configuration Properties -> General, pada artikel kali ini saya akan mengeset Target Platform dan Target Platform Version sama dengan versi Windows yang saat ini saya gunakan yaitu 10.0.18362.0 yang termasuk salah satu versi untuk Windows 10, untuk mengecek versi Windows pada komputer anda anda dapat masuk ke Menu Settings -> About.
Masuk ke jendela Create App Packages
Sama seperti langkah sebelumnya, untuk masuk ke jendela Create App Package yang anda perlu anda lakukan adalah melakukan klik kanan pada file project anda yang terdapat di dalam solution explorer yang pada project windows yang menggunakan react native terdapat di bawah folder ReactNative dan bernama ProjectAnda (Universal Windows), pada jendela klik kanan pilih publish, lalu pilih Create App Packages..., setelah masuk ke dalam jendela Create App Packages anda akan melihat dua opsi bagaimana anda akan melakukan distribusi untuk aplikasi anda, opsi pertama yaitu Microsoft Store under a new app name dan opsi kedua adalah Sideloading, untuk membuat paket aplikasi MSIX untuk kebutuhan pengembangan anda perlu memilih opsi Sideloading dan menceklist Enable automatic updates agar paket anda otomatis terupdate saat ada pembaruan paket aplikasi, lalu pilih tombol Next di pojok kanan bawah.
Pilih Signing Method paket aplikasi
Setelah mengeklik tombol Next pada langkah sebelumnya, anda akan masuk ke halaman Select signing method yang terdapat dua opsi bagaimana anda mendaftarkan paket aplikasi anda nanti, opsi pertama adalah No, skip package signing yang berarti anda akan mendaftarkan paket aplikasi anda secara eksternal, dan opsi kedua adalah Yes, use the current certificate yaitu kita akan menggunakan sertifikat yang sudah di setel pada prject kita, pilih opsi yang kedua, jika anda belum memilikinya maka anda dapat membuatnya di halaman yang sama, lalu setelah selesai pilih tombol Next dibagian pojok kanan bawah.
Pilih dan konfigurasi paket aplikasi anda
Selanjutnya setelah anda mengeklik Next pada langkah sebelumnya, anda akan menemui halaman baru yang memperlihatkan kofigurasi dari paket aplikasi anda nanti, seperti lokasi output, versi, Generate app bundle, pilih paket berdasarkan jenis prosesor dan jenis output paket, dan kotak checkbox Include public symbol files, pastikan semuanya konfigurasi sesuai dengan yang anda inginkan pada output paket aplikasi anda nanti, pada artikel saya kali ini saya hanya akan menceklis arsitektur atau jenis prosesor untuk paket saya ke x86 dan x65, lalu klik tombol Next di pojok kanan bawah.
Konfigurasi update pengaturan pembaruan paket aplikasi anda
Selanjutnya anda akan dilanjutkan ke halaman selanjutnya yaitu halaman untuk memberitahukan Visual Studio dimana lokasi paket aplikasi atau installer anda nanti setelah di generate dan seberapa sering aplikasi anda nanti mengecek update, setelah semuanya selesai maka langkah terakhir adalah mengeklik tombol Create dan menunggu proses paket aplikasi anda di generate. Setelah selesai proses generate paket aplikasi anda, akan ada pop up yang menginformasikan jika proses generate telah selesai, dan pastikan anda mengeklik Copy and Close untuk menutup jendela tersebut.

Langkah-langkah menginstall paket aplikasi MSIX

Masuk ke folder tempat paket aplikasi berada
Lokasi tempat paket aplikasi kita berada terdapat pada lokasi yang telah kita tentukan seperti langkah terakhir pada cara menggenerate paket aplikasi sebelumnya, di dalam folder terdapat dua file dan satu folder, dua file tersebut adalah file installer untuk menginstall aplikasi kita dan file html untuk membuka web browser dan menginstall aplikasi kita melalui web browser tersebut, terdapat juga informasi seperti versi aplikasi dan sebagainya pada file html tersebut, selain dua file tersebut kita juga akan mendapatkan folder yang berisi certificate untuk melakukan signing aplikasi kita pada komputer kita.
Melakukan signing menggunakan certifiate
Langkah selanjutnya adalah melakukan signing paket aplikasi kita menggunakan certificate hasil dari proses generate paket aplikasi kita sebelumnya, langkah langkah untuk melakukan signing adalah sebagai berikut:

1. masuk pada folder tempat file certificate berada (misal: package_1.0.0.0_Test)

2. klik dua kali pada file certificate (misal: package_1.0.0.0_x86_x64.cer)

3. akan muncul pop up certificate klik tombol Install Certificate

4. akan muncul pop up Certificate Import Wizard, terdapat dua pilihan untuk Store Location, pilih Local Machine, lalu klik OK

5. akan muncuk pop up User Account Control, pilih saja YES
6. anda akan dikembalian pada pop up Certificate Import Wizard dengan halaman yang berbeda, tersedia dua piilihan radio, piih saja Place all certificate in the following store, lalu klik tombol browse yang berada di bawahnya di samping form input.

7. akan muncul pop up Select Certificate Store, terdapat list forder dimana kita akan menempatkan certificate kita, pilih yang Thrusted Root Certificate Authorities lalu tekan tombol OK

8. anda akan kembali ke halaman Certificate Import Wizard dan klik tombol Next.
9. selanjutnya anda akan dilanjutkan ke halaman detail pemasangan certificate anda pada pop up yang sama, lalu klik tombol finish

10. akan muncul pop up yang bertuliiskan The import was successfull, klik saja ok
11. anda akan dikembalikan ke pop up certificate lalu klik saja OK.
Install paket aplikasi
Install paket aplikasi yang sebelumnya telah berhasil kita generate (misal: package.appinstaller), anda dapat menginstallnya langsung pada paket aplikasi atau melalui halaman web browser dari file html hasil dari generate paket aplikasi kita.

Untuk menginstallnya langsung:
1. klik dua kali pada file installer aplikasi anda (misal: package.appinstaller)
2. akan muncul pop up App Installer, klik saja install, dan tunggu proses installasi selesai

Untuk menginstall package aplikasi anda melalui browser:
1. klik dua kali pada file index.html pada path utama folder package aplikasi anda
2. pada pop up browser mana yang akan anda gunakan, pilih salah satu (misal: Microsoft Edge), lalu klik get the app
3. selanjutnya akan muncul pop up App Installer, lalu klik saja install. dan tunggu proses installasi
Mengatasi masalah pada App Installer
Seringkali saat kita mengalami masalah pada App Installer melakukan instalasi paket aplikasi MSIX, App Installer adalah aplikasi bawaan windows update an terbaru yang berfungsi membantu kita dalam menginstall aplikasi pada Windows komputer kita, ada beberapa masalah yang biasanya terjadi saat kita menginstall aplikasi MSIX pada komputer Windows kita, diantaranya adalah: