Merubah Website Menjadi Aplikasi Desktop

Merubah Website Menjadi Aplikasi Desktop

Pilot

Sebetulnya sudah lama saya mencari tool yang bisa merubah website menjadi aplikasi desktop. Dulu taunya pakai htmlexe, tapi ini komersil. Saya inginnya pakai yang sederhana saja. Selagi klak-klik klak-klik, terbersit ide ingin memudahkan bocah untuk menggunakan remote wdtv agar gak selalu buka browser dan kemudian klik bookmark. Setelah sekian lama akhirnya muncul lagi ide ini dan baru kali ini bisa mendokumentasikannya, Alhamdulillah.

Install Windows Package Manager

Disini kita cobanya menggunakan Windows 7 Professional SP1 di mesin HP ProLiant MicroServer N54L Karena disini kita butuh untuk install npm atau nodejs yang mana saya lebih cenderung dan nyaman menggunakan instalasinya menggunakan command line, ya walaupun nodejs menyediakan versi installernya tapi saya nyamannya pakai command line, hehehe. Nah, karena berurusan dengan command line maka sepertinya kita butuh package manager, kalau di Linux tentunya sudah pasti ada dan kalau macOS yang terkenal cuma satu yaitu brew yang bisa dilihat di brew.sh sedangkan untuk Windows ini ada 2 yang sama-sama bersaing, yaitu chocolatey atau choco dan scoop.

Update Powershell

Sebelum install Windows Package Manager mungkin enaknya kita update terlebih dahulu PowerShellnya ke versi 5.1 saat saya menulis dokumentasi ini. PowerShell 5.1 bisa didownload langsung diwebsite resmi Microsoft atau kalau mau cek versi PowerShellnya terlebih dahulu juga boleh, yaitu dengan perintah:

$PSVersionTable.PSVersion

Kalau yang keluar adalah seperti ini:

$PSVersionTable.PSVersion
Major  Minor  Build  Revision
-----  -----  -----  --------
4      0      -1     -1

Mungkin seharusnya harus segera diupgrade PowerShellnya yang bisa didownload diwebsite Microsoft, karena minimal yang dibutuhkan adalah versi 5.

$PSVersionTable.PSVersion
Major  Minor  Build  Revision
-----  -----  -----  --------
5      1      14409  1005

Chocolatey – The Package Manager for Windows

Pertama yang saya coba adalah chocolatey yang katanya lebih banyak penggunanya dan juga lebih banyak database software yang disupport. Untuk install chocolatey kita buka PowerShell sebagai Administratordan kemudian cek policynya apakah sudah boleh install dari sumber lain atau tidak, bisa dicek dengan perintah:

Get-ExecutionPolicy

Jika yang tertera adalah Restricted maka kita harus rubah policynya setidaknya menjadi Bypass atau AllSigned. Kalau saya sih saya rubah jadi AllSigned, yaitu dengan perintah:

Set-ExecutionPolicy AllSigned

Setelah itu kita jalankan perintah dibawah ini untuk memulai install chocolatey:

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

Dan kelar deh install chocolatey yang selanjutnya bisa dilanjutkan dengan proses install nodejs.

Tapi entahlah, kenapa saya coba selalu saja gagal untuk install nodejssesuai yang diberikan intruksinya dari web official nodejs.org. Saya coba dua perintah yang disarankan, yaitu cinst nodejs.install dan cinst nodejs tapi hasilnya tetap sama, yaitu error:

cinst nodejs.install
Chocolatey v0.10.15
Installing the following packages:
nodejs.install
By installing you accept licenses for the packages.
Error retrieving packages from source 'https://chocolatey.org/api/v2/':
 Could not connect to the feed specified at 'https://chocolatey.org/api/v2/'. Please verify that the package source (located in the Package Manager Settings) is valid and ensure your network connectivity.
nodejs.install not installed. The package was not found with the source(s) listed.
 Source(s): 'https://chocolatey.org/api/v2/'
 NOTE: When you specify explicit sources, it overrides default sources.
If the package version is a prerelease and you didn't specify `--pre`, the package may not be found.
Please see https://chocolatey.org/docs/troubleshooting for more assistance.
Chocolatey installed 0/1 packages. 1 packages failed.
 See the log for details (C:\ProgramData\chocolatey\logs\chocolatey.log).
Failures
 - nodejs.install - nodejs.install not installed. The package was not found with the source(s) listed.
 Source(s): 'https://chocolatey.org/api/v2/'
 NOTE: When you specify explicit sources, it overrides default sources.
If the package version is a prerelease and you didn't specify `--pre`, the package may not be found.
Please see https://chocolatey.org/docs/troubleshooting for more assistance.
Did you know the proceeds of Pro (and some proceeds from other licensed editions) go into bettering the community infrastructure? Your support ensures an active community, keeps Chocolatey tip top, plus it nets you some awesome features! https://chocolatey.org/compare

Kalau dibaca errornya sih ya terletak di apinya, apakah… ya sudahlah, mending saya coba Windows Package Manager lainnya aja deh, hehehe.

Baca juga:  Membuat VPN Untuk Mengakses Jaringan Kantor Dari Rumah

Scoop – A command-line installer for Windows

Kalau melihat webnya sih kok kaya meyakinkan gitu yah xixixi, kaya brew soalnya, pakai extension .sh dan cara installnya pun mudah, gak seperti chocolatey, yaitu:

Invoke-Expression (New-Object System.Net.WebClient).DownloadString('https://get.scoop.sh')

atau dengan perintah yang sederhana, yaitu:

iwr -useb get.scoop.sh | iex

Dan kalau ternyata masih ada error bisa dirubah dulu policynya dengan perintah:

Set-ExecutionPolicy RemoteSigned -scope CurrentUser

Dan output dari perintah iwr -useb get.scoop.sh | iex seperti berikut:

iwr -useb get.scoop.sh | iex
Initializing...
Downloading scoop...
Extracting...
Creating shim...
Downloading main bucket...
Extracting...
Adding ~\scoop\shims to your path.
'lastupdate' has been set to '2019-12-01T00:21:41.9259818+07:00'
Scoop was installed successfully!
Type 'scoop help' for instructions.

Dan kita segeralah untuk kita lanjutkan install nodejs, dengan perintah scoop install nodejs, weh, kaya brew yah, saya suka saya suka saya suka.

scoop install nodejs
Installing '7zip' (19.00) [64bit]
7z1900-x64.msi (1.7 MB) [=====================================================================================] 100%
Checking hash of 7z1900-x64.msi ... ok.
Extracting 7z1900-x64.msi ... done.
Linking ~\scoop\apps\7zip\current => ~\scoop\apps\7zip\19.00
Creating shim for '7z'.
Creating shortcut for 7-Zip (7zFM.exe)
'7zip' (19.00) was installed successfully!
Installing 'nodejs' (13.2.0) [64bit]
node-v13.2.0-win-x64.7z (15.7 MB) [===========================================================================] 100%
Checking hash of node-v13.2.0-win-x64.7z ... ok.
Extracting node-v13.2.0-win-x64.7z ... done.
Linking ~\scoop\apps\nodejs\current => ~\scoop\apps\nodejs\13.2.0
Persisting bin
Persisting cache
Running post-install script...
'nodejs' (13.2.0) was installed successfully!

ah… mudahnya begitu menggoda.

nativefier – Make any web page a desktop application

Nama aplikasinya adalah nativefier, yang bisa diinstall di WindowsLinux, dan macOS dan software ini adalah open source, dan ini yang selalu dicari-cari, karena hampir rata-rata yang tersedia adalah untuk Windows yaitu menggunakan htmlexe dan banyak lainnya lagi yang kebetulan saya malas cobanya juga, hehehe. Karena kebutuhan saya adalah untuk semua OS. Dan ada fluid yang hanya bisa digunakan di macOS.

nativefier ini sebetulnya dulu pernah ngoprek juga di MacBook Air untuk buat aplikasi WhatsApp dan apa gitu, masih ada beberapa lagi, tapi lupa, hehehe. Ya dah lama sih ngopreknya dan ini baru keingetan lagi, jauh banget ingetnya ampe beberapa tahun, HAHAHA. nativefier ini dibangun diatas nodejs dan packagernya menggunakan electron. Ya pantes aja yah bisa di semua OS, lah wong pakai electron, xixixi. Ya iya sih ya masa ya iya dong.

Baca juga:  Centos: Install WordPress di LAMP Dengan SELinux

Sekarang nodejs dan npm sudah terinstall menggunakan scoop dan saatnya bagi kita untuk memulai install nativefier, yaitu dengan perintah npm install -g nativefier:

npm install -g nativefier
npm WARN deprecated core-js@2.6.10: core-js@<3.0 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
C:\Users\Darto\scoop\persist\nodejs\bin\nativefier -> C:\Users\Darto\scoop\persist\nodejs\bin\node_modules\nativefier\lib\cli.js
> core-js@2.6.10 postinstall C:\Users\Darto\scoop\persist\nodejs\bin\node_modules\nativefier\node_modules\core-js
> node postinstall || echo "ignore"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
+ nativefier@7.7.0
added 323 packages from 314 contributors in 62.622s

Wah, hidup jadi serasa lebih mudah, Alhamdulillah.

Nah, apa aja sih command yang di support sama nativefier ini? saya copy paste disini yah, ya biar saya juga bisa inget lagi, hehehe.

nativefier --help
Usage: cli [options]  [dest]
Options:
  -v, --version                          output the version number
  -n, --name                      app name
  -p, --platform                  'osx', 'mas', 'linux' or 'windows'
  -a, --arch                      'ia32' or 'x64' or 'armv7l'
  --app-version                   The release version of the application.  Maps to the `ProductVersion` metadata property on Windows, and `CFBundleShortVersionString` on OS X.
  --build-version                 The build version of the application. Maps to the `FileVersion` metadata property on Windows, and `CFBundleVersion` on OS X.
  --app-copyright                 The human-readable copyright line for the app. Maps to the `LegalCopyright` metadata property on Windows, and `NSHumanReadableCopyright` on OS X
  --win32metadata           a JSON string of key/value pairs of application metadata (ProductName, Internal Name, FileDescription) to embed into the executable (Windows only).
  -e, --electron-version          electron version to package, without the 'v', see https://github.com/electron/electron/releases
  --no-overwrite                         do not override output directory if it already exists, defaults to false
  -c, --conceal                          packages the source code within your app into an archive, defaults to false, see https://electronjs.org/docs/tutorial/application-packaging
  --counter                              if the target app should use a persistent counter badge in the dock (macOS only), defaults to false
  --bounce                               if the the dock icon should bounce when counter increases (macOS only), defaults to false
  -i, --icon                      the icon file to use as the icon for the app (should be a .png)
  --width                         set window default width, defaults to 1280px
  --height                        set window default height, defaults to 800px
  --min-width                     set window minimum width, defaults to 0px
  --min-height                    set window minimum height, defaults to 0px
  --max-width                     set window maximum width, default is no limit
  --max-height                    set window maximum height, default is no limit
  --x                             set window x location
  --y                             set window y location
  -m, --show-menu-bar                    set menu bar visible, defaults to false
  -f, --fast-quit                        quit app after window close (macOS only), defaults to false
  -u, --user-agent                set the user agent string for the app
  --honest                               prevent the nativefied app from changing the user agent string to masquerade as a regular chrome browser
  --ignore-certificate                   ignore certificate related errors
  --disable-gpu                          disable hardware acceleration
  --ignore-gpu-blacklist                 allow WebGl apps to work on non supported graphics cards
  --enable-es3-apis                      force activation of WebGl 2.0
  --insecure                             enable loading of insecure content, defaults to false
  --flash                                if flash should be enabled
  --flash-path                    path to Chrome flash plugin, find it in `Chrome://plugins`
  --disk-cache-size               forces the maximum disk space (in bytes) to be used by the disk cache
  --inject                        path to a CSS/JS file to be injected (default: [])
  --full-screen                          if the app should always be started in full screen
  --maximize                             if the app should always be started maximized
  --hide-window-frame                    disable window frame and controls
  --verbose                              if verbose logs should be displayed
  --disable-context-menu                 disable the context menu
  --disable-dev-tools                    disable developer tools
  --zoom                          default zoom factor to use when the app is opened, defaults to 1.0
  --internal-urls                 regular expression of URLs to consider "internal"; all other URLs will be opened in an external browser.  (default: URLs on same second-level domain as app)
  --crash-reporter                remote server URL to send crash reports
  --single-instance                      allow only a single instance of the application
  --clear-cache                          prevent the application from preserving cache between launches
  --processEnvs             a JSON string of key/value pairs to be set as environment variables before any browser windows are opened.
  --file-download-options   a JSON string of key/value pairs to be set as file download options.  See https://github.com/sindresorhus/electron-dl for available options.
  --tray [start-in-tray]                 Allow app to stay in system tray. If 'start-in-tray' is given as argument, don't show main window on first start
  --basic-auth-username           basic http(s) auth username
  --basic-auth-password           basic http(s) auth password
  --always-on-top                        enable always on top window
  --title-bar-style               (macOS only) set title bar style ('hidden', 'hiddenInset').  Consider injecting custom CSS (via --inject) for better integration.
  --global-shortcuts              JSON file with global shortcut configuration. See https://github.com/jiahaog/nativefier/blob/master/docs/api.md#global-shortcuts
  --browserwindow-options   a JSON string that will be sent directly into electron BrowserWindow options. See https://github.com/jiahaog/nativefier/blob/master/docs/api.md#browserwindow-options
  --background-color              Sets the background color (for seamless experience while the app is loading). Example value: '#2e2c29'
  --darwin-dark-mode-support             (macOS only) enable Dark Mode support on macOS 10.14+
  -h, --help                             output usage information

OK. Sekarang waktunya kita coba experiment membuat aplikasi desktop untuk remote WDTV. Yang saya cantumkan disini adalah perintah yang terakhir yang menjadi final, hehehe, yaitu:

nativefier --name "WDTV" --single-instance -i C:\Users\Darto\Downloads\output-onlinepngtools.ico --width 240 --max-width 320 --disable-context-menu "http://10.0.7.2/wdtvlive/remote/"

Information

Setelah proses compiling diatas akan terbentuk folder dengan nama aplikasinya disertakan versinya, WDTV-win32-x64, karena itu, sebelum compiling harap perhatikan dimana (directory) yang ingin kita simpan aplikasi tersebut, dalam hal ini saya tempatkan di C:\Users\KLoningSpoon\Downloads

--name WDTV; yaitu untuk memberikan nama aplikasinya.

--single-instance; karena saya inginnya aplikasi ini hanya bisa dibuka sekali dan satu window saja.

-i C:\Users\Darto\Downloads\output-onlinepngtools.ico; Mungkin sebetulnya gak perlu pakai full path, bisa langsung nama filenya aja asalkan file .ico berada disatu folder yang sama kita menjalankan perintah. Oh iya, untuk membuat file .ico ini saya menggunakan image yang saya download dalam format PNG tapi ternyata tidak transparent sepenuhnya sehingga saya menggunakan Online PNG Tools dan kemudian saya convert menjadi ico dengan convertico

--width 240; Karena saya menginginkan windownya pas untuk ukuran remotenya.

--max-width 320; Karena saya inginnya gak perlu sampai maximized juga ukurannya.

--disable-context-menu; Agar tidak bisa klik kanan. Karena kan aslinya ini tuh ya web browser aja yang tentunya nanti masih bisa diklik kanan, nah ini untuk mendisable klik kanannya.

"http://10.0.7.2/wdtvlive/remote/"; Ini adalah url atau nama website yang ingin kita jadi aplikasi desktop.

OK. Selamat mencoba, misal untuk WhatsApp webnya yang menggunakan url web.whatsapp.com.

Tinggalkan Komentar

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


The reCAPTCHA verification period has expired. Please reload the page.