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.PSVersionKalau yang keluar adalah seperti ini:
$PSVersionTable.PSVersion
Major Minor Build Revision
----- ----- ----- --------
4 0 -1 -1Mungkin 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 1005Chocolatey – 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-ExecutionPolicyJika 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 AllSignedSetelah 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/compareKalau dibaca errornya sih ya terletak di apinya, apakah… ya sudahlah, mending saya coba Windows Package Manager lainnya aja deh, hehehe.
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 | iexDan kalau ternyata masih ada error bisa dirubah dulu policynya dengan perintah:
Set-ExecutionPolicy RemoteSigned -scope CurrentUserDan 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 Windows, Linux, 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.
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.622sWah, 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
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.
