Scribd Logo
Unggah

Selamat datang di Scribd!

  • Cara Membuat Aplikasi Desktop Dengan Teknologi Web Menggunakan NW

    Diunggah oleh

    icesalman
    138 tayangan4 halaman
    1. NW.js adalah alat untuk membuat aplikasi desktop menggunakan teknologi web dengan menjalankan aplikasi HTML5 tanpa browser. 2. Caranya adalah dengan menginstal NW.js, membuat folder proyek dengan file package.json dan index.html, lalu menjalankan aplikasi dengan perintah nw. 3. Aplikasi dapat dibundle menjadi file exe yang portabel dengan menyatukan file nw.exe dan zip proyek.

    Deskripsi Asli:

    Aplikasi Web di Desktop

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    1. NW.js adalah alat untuk membuat aplikasi desktop menggunakan teknologi web dengan menjalankan aplikasi HTML5 tanpa browser. 2. Caranya adalah dengan menginstal NW.js, membuat folder proyek dengan file package.json dan index.html, lalu menjalankan aplikasi dengan perintah nw. 3. Aplikasi dapat dibundle menjadi file exe yang portabel dengan menyatukan file nw.exe dan zip proyek.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    138 tayangan4 halaman

    Cara Membuat Aplikasi Desktop Dengan Teknologi Web Menggunakan NW

    Diunggah oleh

    icesalman
    1. NW.js adalah alat untuk membuat aplikasi desktop menggunakan teknologi web dengan menjalankan aplikasi HTML5 tanpa browser. 2. Caranya adalah dengan menginstal NW.js, membuat folder proyek dengan file package.json dan index.html, lalu menjalankan aplikasi dengan perintah nw. 3. Aplikasi dapat dibundle menjadi file exe yang portabel dengan menyatukan file nw.exe dan zip proyek.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 4

    Cara Membuat Aplikasi Desktop Dengan

    Teknologi Web Menggunakan NW.js


    Posted by Fadlun Anaturdasa in Web Tools , onJuli 13, 2016

    Pada saat ini Teknologi Web (HTML, CSS, Javascript) bukan hanya dapat digunakan untuk
    membuat Aplikasi yang dijalankan sebagai Website saja. Dengan bantuan tools seperti NW.js
    kita bahkan dapat membuat Aplikasi Desktop yg berdiri sendiri tanpa adanya Web Browser
    (Firefox/Chrome).

    NW.js adalah sebuah tools yg dikembangkan dari pendahulunya yaitu Node-Webkit. Konsepnya
    adalah menjalankan aplikasi HTML 5 pada sebuah window browserless yaitu sebuah web
    browser tanpa menubar yg terintegrasi dengan Webkit (Chrome Engine) dan NodeJS. Aplikasi
    HTML 5 adalah sebuah aplikasi web yg dapat Anda tulis dengan bahasa pemrograman HTML,
    CSS dan Javascript atau mungkin juga ditambah dengan berbagai library seperti JQuery dan
    Bootstrap. Dengan terintegrasinya NodeJS disini, maka segala kemampuan server side
    programming dan segala bentuk manipulasi diluar web browser dapat dilakukan. Namun
    demikian selain hanya menjalankan HTML 5 sebagai aplikasi desktop dengan sedikit trik yg
    akan kita bahas, kita dapat juga membundle aplikasi HTML 5 ini menjadi sebuah file *.exe yg
    portable. Dalam kata lain kita dapat membuat aplikasi windows executable seperti
    “aplikasiku.exe”.

    Baiklah kita langsung saja dengan bagaimana cara membuat aplikasi desktop menggunakan tools
    NW.js ini. Pertama download dulu NW.js di website resminya http://nwjs.io. Downloadlah
    sesuai dengan arsitektur sistem operasi Anda 32/64 bit. Sebagai catatan jika Anda membuatnya
    menggunakan versi 64bit maka aplikasi Anda tidak akan dapat berjalan pada sistem operasi
    Windows 32bit. Tetapi jika Anda menggunakan versi 32bit maka aplikasi Anda dapat berjalan
    dikeduanya yaitu Windows 64bit dan juga 32bit. Setelah terdownload extractlah isi file zipnya
    dengan program kompresi file Anda, disini saya extract di “c:/nwjs”.

    Buatlah sebuah folder yaitu direktori yg akan dijadikan direktori project aplikasi web Anda.
    disini saya membuat direktori “c:/nwjs/aplikasiku”. Lalu saya masuk ke direktori aplikasiku dan
    membuat file dengan nama “package.json” dan saya mengisinya dengan kode konfigurasi
    sebagai berikut;

    {
    "name": "Halo Dunia",
    "main": "index.html",
    "w indow ": {
    "w idth": 1024,

    1{
    2 "name": "Halo Dunia",
    3 "main": "index.html",
    4 "window": {
    5 "width": 1024,
    6 "height": 768
    7}
    8}

    name adalah nama dari Aplikasi, sedangkan main adalah file utama yg akan dipanggil pertama
    kali ketika aplikasi dijalankan. Disini file utamanya saya isikan dengan “index.html” maka saya
    membuat file ini juga di direktori aplikasiku. Berikut ini isi kode html sederhana di index.html;

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Aplikasiku</title>

    1 <!DOCTYPE html>
    2 <html>
    3 <head>
    4 <meta charset="utf-8">
    5 <title>Aplikasiku</title>
    6 </head>
    7 <body>
    8 <h1>Halo Dunia</h1>
    9 </body>
    10 </html>

    Setelah itu saya akan mencoba untuk merunning aplikasi ini dengan menggunakan nw.exe.
    Caranya buka Command Prompt Anda lalu masuklah ke direktori nwjs.

    cd c:/nw js

    1 cd c:/nwjs

    Setelah itu ketik perintah berikut;

    nw aplikasiku
    1 nw aplikasiku

    Jika berhasil maka aplikasi Anda akan berjalan dengan baik. Perlu diketahui bahwa nw.exe dapat
    merunning sebuah aplikasi web dengan memanggil nama foldernya atau memanggil 1 file zip
    (pengganti folder) yg berisi file-file web, selama di dalam folder/zip tersebut ada package.json
    yg memberitahu dimana file utama yg akan dipanggil pertama kali disimpan.

    Terakhir saya akan memberikan trik untuk membuat aplikasi Anda menjadi sebuah file *.exe,
    sehingga aplikasi ini menjadi portable dan dapat Anda copy ke komputer lain dan untuk
    menjalankannya cukup dengan membuka aplikasiku.exe. Caranya pertama silakan kompres file
    package.json dan index.html menjadi sebuah file zip, misalnya diberi nama aplikasiku.zip. Lalu
    copy file tersebut ke “c:/nwjs/aplikasiku.zip”. Lalu ketikan perintah berikut;

    copy /b nw .exe+aplikasiku.zip aplikasiku.exe

    1 copy /b nw.exe+aplikasiku.zip aplikasiku.exe

    Maka kedua file tersebut akan menyatu menjadi sebuah file *.exe yaitu aplikasiku.exe. Jadi
    sekarang Anda dapat dengan mudah menjalankan aplikasi web Anda menjadi sebuah aplikasi
    desktop cukup dengan melakukan double click pada aplikasiku.exe.

    Catatan, mungkin Anda masih bingung jika NW.js dapat membundle dan merunning aplikasi
    web tanpa menggunakan web server seperti Apache. Maka bagaimana caranya Anda dapat
    membuat aplikasi yg berhubungan dengan database. Apakah dengan NW.js kita dapat
    menulis/menyisipkan PHP didalam HTML? jawabannya adalah tidak bisa. Yg dapat ditulis disini
    adalah aplikasi HTML5 yaitu dengan teknologi HTML, CSS, Javascript dan tidak ada interpreter
    PHP di dalamnya. Untuk berhubungan dengan database Anda dapat menggunakan;

    1. NodeJS API
    Nama NW.js berasal dari penggabungan antara NodeJS dan Webkit. Webkit adalah
    runtimenya web browser Chrome yg memiliki kemampuan menampilkan dan
    menjalankan aplikasi web. Sedangkan NodeJS adalah sebuah Javascript platform yg
    memungkinkan Javascript dapat dijadikan sebagai Server Side Programming dan
    berhubungan dengan database. Dengan menggunakan NodeJS maka Anda dapat
    membundle jadi satu aplikasi Anda karena di NW.js terdapat interpreter NodeJS
    didalamnya.
    2. Web Service API
    Memanggil Server Side API yg ditulis dengan bahasa pemrograman server side terpisah
    sama saja seperti Anda memanggil API ketika Anda membuat aplikasi mobile
    Android/iOS. Jadi dengan metode ini Anda bisa tetap menggunakan bahasa server side
    kesukaan Anda misalnya PHP, ASP ataupun Ruby. Adapun secara teknis Anda dapat
    memanggil Web Service API menggunakan metode AJAX pada Javascript.

    Anda mungkin juga menyukai