Tutorial Installer: Membuat Installer Aplikasi (2 dari 5)

WiX Toolset

Tutorial installer ini membahas cara membuat installer aplikasi menggunakan WiX Toolset. Membuat installer merupakan tahap akhir dari siklus pembuatan aplikasi. Setelah program aplikasi selesai dibuat dan diuji, tahap selanjutnya adalah membuat paket instalasi untuk didistribusikan kepada pengguna akhir/konsumen.

Project artikel ini dapat diakses pada repositori Kodesiana pada https://github.com/Kodesiana/WixInstallerExample. Artikel ini merupakan artikel bersambung dengan urutan sebagai berikut.

  1. Tutorial Installer: Instalasi WiX Toolset (1 dari 5)
  2. Tutorial Installer: Membuat Installer Aplikasi (2 dari 5) [artikel ini]
  3. Tutorial Installer: Kustomisasi dan Install Conditions (3 dari 5)
  4. Tutorial Installer: Membuat Bootstrapper Installer (4 dari 5)
  5. Tutorial Installer: Finalisasi Setup Project/Finishing (5 dari 5)

Membuat Installer Aplikasi

Sebelum membuat installer aplikasi, pertama kita harus menentukan file apa yang akan diinstal dan bagaimana struktur instalasinya. Pada contoh ini, penulis membuat folder E:\installer kemudian menyalin semua file .exe, .dll, .xml, dan lainnya ke folder tersebut.

Folder Aplikasi Wiyata Bhakti
Folder Aplikasi Wiyata Bhakti

Folder di atas berisi file yang akan diinstal. Satu file WiyataBhakti.App.exe yang merupakan program utama, file WiyataBhakti.mdf dan WiyataBhakti.ldf merupakan basis data SQL Server, dan file lain seperti DLL dan XML yang dibutuhkan oleh aplikasi Wiyata Bhakti.

Membuat Include File untuk Path

Include File digunakan untuk menampung variabel yang dapat digunakan pada keseluruhan setup project. Misalkan penggunaan variabel untuk menyimpan path/lokasi file untuk digunakan pada setup. Daripada menulis path secara lengkap (misalnya D:\installer\test.exe) kita dapat menggunakan variabel untuk menggantikan path (misalnya $(var.Source)\test.exe).

Buka project setup pada Visual Studio dan buat item Installer file. Klik kanan pada project di Solution Explorer kemudian klik Add new item… dan pilih Installer File. Beri nama file RelativePath.wxs kemudian salin rekat kode di bawah ini.

<?xml version="1.0" encoding="utf-8"?>
<Include>
  <?define SourceDir="E:\installer"?>
</Include>

Penjelasan:

  1. Baris 3, membuat variabel $(var.SourceDir) dengan path E:\installer.

Menambahkan Struktur Direktori ke Installer

Buat Installer File bari dengan nama file Directories.wxs. Ubah isi file tersebut seperti berikut.

<?xml version="1.0" encoding="UTF-8"?>
<Wix xmlns="http://schemas.microsoft.com/wix/2006/wi">
  <Fragment>
    <Directory Id="TARGETDIR" Name="SourceDir">
      <!-- AppDir -->
      <Directory Id="ProgramFilesFolder">
        <Directory Id="INSTALLFOLDER" Name="Wiyata Bhakti" />
      </Directory>

      <!-- Database Folder -->
      <Directory Id="AppDataFolder">
        <Directory Id="DATAFOLDER" Name="Wiyata Bhakti" />
      </Directory>

      <!-- Shortut start menu -->
      <Directory Id="ProgramMenuFolder">
        <Directory Id="ApplicationProgramsFolder" Name="Wiyata Bhakti" />
      </Directory>

      <!-- Shortut start menu -->
      <Directory Id="DesktopFolder" />
    </Directory>
  </Fragment>
</Wix>

Penjelasan:

  1. Baris 6-8, membuat folder Wiyata Bhakti pada target komputer di lokasi Program Files. Ini target lokasi instalasi.
  2. Baris 11-13, membuat folder Wiyata Bhakti pada target komputer di lokasi %USERPROFILE%\AppData\Roaming. Folder ini akan bersisi file basis data (MDF dan LDF). Folder AppData digunakan karena folder AppData dapat read/write, sedangkan folder ProgramFiles bersifat read-only.
  3. Baris 16-18, membuat folder Wiyata Bhakti pada start menu.
  4. Baris 21, referensi ke folder Desktop.

Menambahkan File ke Installer

WiX menggunakan elemen <File> untuk menambahkan file. Setiap elemen <File> harus berada dalam elemen <Component> yang menandakan bahwa elemen <File> tersebut merupakan bagian yang akan diinstal. Contoh:

<?xml version="1.0" encoding="utf-8"?>
<Wix xmlns="http://schemas.microsoft.com/wix/2006/wi">
    <Fragment>
        <DirectoryRef Id="TARGETDIR">
            <Component Id="contoh.exe" Guid="*">
                <File Id="contoh.exe" KeyPath="yes" Source="$(var.SourceDir)\contoh.exe" />
            </Component>
        </DirectoryRef>
    </Fragment>
</Wix>

Penjelasan:

  1. Baris 4, menunjukkan bahwa semua komponen yang ada pada induk direktori ini terdapat pada direktori INSTALLFOLDER.
  2. Baris 5, membuat sebuah komponen baru dengan Id contoh.exe dan GUID otomatis.
  3. Baris 6, mebuat elemen file dengan Id contoh.exe dengan lokasi “$(var.SourceDir)\contoh.exe”.

Tentunya proses ini dilakukan hingga semua file yang perlu diinstal dientri pada project. Proses ini akan memakan waktu yang lama jika dilakukan secara manual. Untuk mempermudah mengentri file, kita dapat menggunakan tool heat.exe (Harvest Tool). Heat digunakan untuk meng-generate file yang akan diinstal dalam satu folder menjadi file wxs.

Cara menggunakan heat:

  1. Buka Command Prompt.
  2. Ubah working directory ke folder E:\installer dengan cara ketik “cd E:\installer” kemudian tekan Enter.
  3. Ketik “heat dir “.” -ag -sfrag -sreg -scom -suid -var var.SourceDir -template fragment -out target.wxs” kemudian tekan Enter.
  4. Buka folder E:\installer kemudian buka file target.wxs.
Penggunaan Harvest Tool
Penggunaan Harvest Tool

Anda mungkin perlu mengonfigurasi environment variable “PATH” untuk dapat menggunakan heat. Contoh file target.wxs hasil dari tool heat:

<?xml version="1.0" encoding="utf-8"?>
<Wix xmlns="http://schemas.microsoft.com/wix/2006/wi">
    <Fragment>
        <DirectoryRef Id="TARGETDIR">
            <Directory Id="installer" Name="installer">
                <Component Id="C__Kiosk.txt" Guid="*">
                    <File Id="C__Kiosk.txt" KeyPath="yes" Source="$(var.SourceDir)\C# Kiosk.txt" />
                </Component>
                .
                .
            </Directory>
        </DirectoryRef>
    </Fragment>
</Wix>

Untuk menggunakan file hasil heat ini, buat file baru dengan nama Files.wxs. Ubah isi Files.wxs seperti berikut:

<?xml version="1.0" encoding="UTF-8"?>
<Wix xmlns="http://wixtoolset.org/schemas/v4/wxs">
    <Fragment>
        <!-- Binaries -->
        <ComponentGroup Id="AppFiles" Directory="INSTALLFOLDER">
            <Component Id="WiyataBhakti.App.exe" Guid="*">
                <File Id="WiyataBhakti.App.exe" KeyPath="yes" Source="$(var.SourceDir)\WiyataBhakti.App.exe" />
            </Component>            .            .        
        </ComponentGroup>
        
        <!-- Database -->
        <ComponentGroup Id="DatabaseFiles" Directory="DATAFOLDER">
            <Component Id="WiyataBhakti.mdf" Guid="{9D888C4D-8063-41A5-8BE2-7E66574F870C}">
                <File Id="WiyataBhakti.mdf" Source="$(var.SourceDir)\WiyataBhakti.mdf" />
                <RemoveFile Id="RemoveDb" Name="WiyataBhakti.mdf" On="uninstall"/>
                <RegistryValue Key="Software\Wiyata Bhakti" Root="HKCU" Type="integer" Name="db_main" Value="1" KeyPath="yes" />
            </Component>            .            .        
        </ComponentGroup>
    </Fragment>
</Wix>

Penjelasan:

  1. Baris 5, menandakan kumpulan komponen dengan induk direktori pada INSTALLFOLDER.
  2. Baris 6, menandakan komponen baru dengan Id WiyataBhakti.App.exe dan GUID otomatis.
  3. Baris 7, menandakan file dengan Id WiyataBhakti.App.exe dan lokasi “$(var.SourceDir)\WiyataBhakti.App.exe“.
  4. Baris 13, menandakan kumpulan komponen dengan induk direktori pada DATAFOLDER.
  5. Baris 14, menandakan komponen baru dengan Id WiyataBhakti.mdf dan GUID otomatis.
  6. Baris 15, menandakan file dengan Id WiyataBhakti.mdf dan lokasi
  7. $(var.SourceDir)\WiyataBhakti.mdf“.
  8. Baris 17, menandakan installer untuk menghapus file WiyataBhakti.mdf saat aplikasi di uninstall.
  9. Baris 18, membuat registry untuk menandakan bahwa file ini diinstal pada komputer.

Baris 5-7 terus berulang hingga semua file dientri. Khusus beberapa file untuk basis data, penggunaan <ComponentGroup> agak sedikit berbeda dengan menggunakan direktori lain dan tambahan registry. Harap lihat proyek ini pada GitHub.

Membuat Shortcut Aplikasi

Buat Installer File baru dengan nama Shortcut.wxs. Salin rekat kode di bawah ini.

&amp;lt;?xml version="1.0" encoding="UTF-8"?&amp;gt;
&amp;lt;Wix xmlns="http://schemas.microsoft.com/wix/2006/wi"&amp;gt;
  &amp;lt;Fragment&amp;gt;
    &amp;lt;!-- Start Menu Shortcut --&amp;gt;
    &amp;lt;ComponentGroup Id="AppShortcuts"&amp;gt;
      &amp;lt;Component Id="POSShortcut" Guid="*" Directory="ApplicationProgramsFolder"&amp;gt;
        &amp;lt;!-- POS --&amp;gt;
        &amp;lt;Shortcut Id="POSStartMenuShortcut" Name="Wiyata Bhakti POS" Description="Aplikasi POS Wiyata Bhakti" Target="[#WiyataBhakti.App.exe]" WorkingDirectory="INSTALLFOLDER" /&amp;gt;

        &amp;lt;!-- Uninstall --&amp;gt;
        &amp;lt;Shortcut Id="UninstallProduct" Name="Uninstall Wiyata Bhakti" Description="Uninstalls Wiyata Bhakti" Target="[SystemFolder]msiexec.exe" Arguments="/x [ProductCode]" /&amp;gt;

        &amp;lt;RemoveFolder Id="CleanUpShortcut" Directory="ApplicationProgramsFolder" On="uninstall" /&amp;gt;
        &amp;lt;RegistryValue Root="HKCU" Key="Software\Wiyata Bhakti" Name="installed_startmenu" Type="integer" Value="1" KeyPath="yes" /&amp;gt;
      &amp;lt;/Component&amp;gt;

      &amp;lt;!-- Desktop Shortcut --&amp;gt;
      &amp;lt;Component Id="DesktopShortcut" Guid="*" Directory="DesktopFolder"&amp;gt;
        &amp;lt;!-- POS --&amp;gt;
        &amp;lt;Shortcut Id="POSDesktopShortcut" Name="Wiyata Bhakti POS" Description="Aplikasi POS Wiyata Bhakti" Target="[#WiyataBhakti.App.exe]" WorkingDirectory="INSTALLFOLDER" /&amp;gt;

        &amp;lt;RemoveFile Id="RemovePosPOSDesktopShortcut" Name="Wiyata Bhakti POS.lnk" On="uninstall"/&amp;gt;
        &amp;lt;RegistryValue Root="HKCU" Key="Software\Wiyata Bhakti" Name="installed_dekstop" Type="integer" Value="1" KeyPath="yes" /&amp;gt;
      &amp;lt;/Component&amp;gt;
    &amp;lt;/ComponentGroup&amp;gt;
  &amp;lt;/Fragment&amp;gt;
&amp;lt;/Wix&amp;gt;

Penjelasan:

  1. Baris 6, membuat komponen shortcut pada direktori ApplicationProgramsFolder atau start menu.
  2. Baris 8 , membuat shortcut ke file WiyataBhakti.App.exe.
  3. Baris 11, membuat shortcut untuk uninstall aplikasi.
  4. Baris 13, membuat perintah untuk menghapus folder shortcut aplikasi saat uninstall.
  5. Baris 14, membuat value pada registry untuk menandakan bahwa shortcut diinstal.

Baris selanjutnya memiliki fungsi yang sama tetapi memiliki lokasi direktori yang berbeda.

Membuat Definisi Produk Aplikasi

Setelah Anda menambahkan struktur direktori, file, dan shortcut, tahap akhir adalah membuat definisi produk aplikasi Anda agar dapat di install pada komputer. Buka file Product.wxs kemudian salin rekat kode di bawah ini.

<?xml version="1.0" encoding="UTF-8"?>
<Wix xmlns="http://schemas.microsoft.com/wix/2006/wi">
  <?include "RelativePath.wxi" ?>

  <Product Id="*" Name="Wiyata Bhakti" Language="1033" Version="1.0.0.0" Manufacturer="Fahmi Noor Fiqri" UpgradeCode="{B3559FC8-4392-4CC4-A74D-E39A19B2E827}">
    <!-- Package -->
    <Package InstallerVersion="200" Compressed="yes" InstallScope="perMachine" />
    <Media Id="1" Cabinet="app.cab" EmbedCab="yes" />

    <!-- Install Conditions -->
    <MajorUpgrade DowngradeErrorMessage="A newer version of [ProductName] is already installed." />

    <!-- Features to install -->
    <Feature Id="ProductFeature" Title="Wiyata Bhakti Installer" Level="1">
      <ComponentGroupRef Id="AppFiles" />
      <ComponentGroupRef Id="DatabaseFiles" />
      <ComponentGroupRef Id="AppShortcuts" />
    </Feature>
  </Product>
</Wix>

Penjelasan:

  1. Baris 5, definisi produk aplikasi. Anda dapat mengubah atribut Name, Version, Manufacturer, dan UpgradeCode dengan nilai selain yang dicontohkan. Khusus untuk atribut UpgradeCode, Anda tidak boleh menggunakan GUID yang sama dengan contoh ini. Harap ganti dengan GUID baru.
  2. Baris 7-8, membuat package CAB baru untuk menampung file instalasi dengan scope perMachine.
  3. Baris 11, membuat kondisi bahwa aplikasi tidak boleh ditimpa dengan versi yang lama.
  4. Baris 14, membuat fitur utama aplikasi. Fitur ini adalah produk yang akan diinstal.
  5. Baris 15-17, mereferensikan komponen direktori, file, dan shortcut yang telah dibuat agar diinstall pada komputer.

Build Setup

Sampai tahap ini, Anda sudah bisa membuat file setup MSI yang dapat diinstall. Klik Build > Build ContohSetup untuk membuat setup installer. Hasil akhir file MSI dapat Anda buka pada folder project Anda, biasanya terdapat pada folder bin.

Build Project ContohSetup
Build Project ContohSetup

Penutup

Pada tahap ini, Anda telah berhasil membuat setup yang 100% dapat digunakan untuk menginstall aplikasi Anda. Pada artikel selanjutnya, Anda akan membuat installer yang dapat mendeteksi apakah program SQL Server LocalDB dan Crystal Report sudah diinstal atau belum dan menambahkan halaman lisensi saat proses setup.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.