Tutorial Cordova Bagian 3 Membuat Local Notification

Setelah membaca beberapa tutorial dari saya sebelumnya, kali ini saya ingin memperkenalkan lagi sebuah fitur yang cukup sering kita lihat di aplikasi android yaitu fitur notifikasi. Fitur notifikasi di android berfungsi untuk memberikan informasi kepada pengguna bahwa ada sebuah pemberitahuan dari sebuah aplikasi yang sedang berjalan.

Ada dua buah tipe notifikasi dalam aplikasi android berbasis apache cordova, yang pertama adalah local notification dan yang kedua adalah push notification. Local notofication adalah notifikasi  yang bisa dijalankan dari aplikasi itu sendiri tanpa bantuan dari server penyedia informasi, intinya tanpa ada data selular yang aktif kita bisa membuat notifikasi kepada user. Sedangkan push notification adalah notifikasi yang dikirimkan dari server penyedia aplikasi dan biasanya notifikasi ini membutuhkan jaringan data yang aktif.

Kali ini saya hanya akan membahas dan memberikan tutorial local notification di apache cordova. Untuk dapat mencoba membuat fitur ini pastikan komputer anda sudah terdapat aplikasi dan tools yang digunakan untuk membangun aplikasi android berbasis apache cordova, jika belum anda dapat membacanya di sini.

Pertama kita buat project baru dengan nama LocalNotification, langkah-langkahnya:
Buka cmd, masuk ke drive c

cd c:/
Tutorial Cordova Membuat Local Notification

Cordova create LocalNotification io.cordova.localnotif LocalNotification

Tutorial Cordova Membuat Local Notification

Selanjutnya masuk ke direktori project yang kita buat dan tambahkan platform android

cd LocalNotification
cordova platform add android

Local Notification Cordova

Langkah selanjutnya adalah menambah plugin local notification yang sudah dibuat oleh beberapa pengembang di github. Di sini saya menggunakan plugin bernama Katzer yang cukup lengkap fiturnya. Anda dapat membaca dokumentasi mengenai plugin katzer di sini.

cordova plugin add https://github.com/katzer/cordova-plugin-local-notifications

Membuat Local Notification


Sampai disini berarti kita sudah selesai mempersiapkan project dan plugin yang akan digunakan. Langkah selanjutnya adalah membuka file index.html dari project yang kita buat dan menuliskan script untuk local notification disana.

Buka file index.html di C:\LocalNotification\www disini saya sudah menyiapkan file index.html yang bisa langsung anda copy agar lebih mudah. Selain itu juga ada file css agar tampilan lebih tertata.

Index.html

<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html>
    <head>
        <!--
        Customize this policy to fit your own app's needs. For more guidance, see:
            https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
        Some notes:
            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                * Enable inline JS: add 'unsafe-inline' to default-src
        -->
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Hello World</title>
    </head>
    <body>
        <!-- schedule -->
            <h2 class="section">Schedule</h2>
            <div class="container">
                <div onclick="schedule()">Single<br /><span>schedule(1)</span></div>
                <div onclick="scheduleMultiple()">Multiple<br /><span>schedule(1, 2, 3)</span></div>
            </div>
            <div class="container">
                <div onclick="scheduleDelayed()">In 5 sec<br /><span>schedule(1, firstAt:later)</span></div>
                <div onclick="scheduleMinutely()">Every min<br /><span>schedule(1, every:minute)</span></div>
            </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            var id = 1, dialog;
            callback = function () {
                cordova.plugins.notification.local.getIds(function (ids) {
                    showToast('IDs: ' + ids.join(' ,'));
                });
            };
            showToast = function (text) {
                setTimeout(function () {
                    if (device.platform != 'windows') {
                        window.plugins.toast.showShortBottom(text);
                    } else {
                        showDialog(text);
                    }
                }, 100);
            };
            showDialog = function (text) {
                if (dialog) {
                    dialog.content = text;
                    return;
                }
                dialog = new Windows.UI.Popups.MessageDialog(text);
                dialog.showAsync().done(function () {
                    dialog = null;
                });
            };
        </script>
        <!-- schedule -->
        <script type="text/javascript">
            schedule = function () {
                cordova.plugins.notification.local.schedule({
                    id: 1,
                    text: 'Test Message 1',
                    icon: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX42f48svSUoWIfmjW3dVWt1kDBkWCR-GFutKU2ZDEyRto-2xXqoPdn4XvJi8GpySRHFYhIVUqktNJa8SIeH4c0rPgdlAnu5SqDf-WeS5IgzkCzvG7q5guLURt8r1tDpVVKy5UHB4hchc/s1600/supersu.png',
                    smallIcon: 'res://cordova',
                    sound: null,
                    data: { test: id }
                });
            };
            scheduleMultiple = function () {
                cordova.plugins.notification.local.schedule([{
                    id: 1,
                    text: 'Multi Message 1',
                    icon: 'res://cordova'
                }, {
                    id: 2,
                    text: 'Multi Message 2',
                    icon: 'res://icon',
                    smallIcon: 'ic_media_play'
                }, {
                    id: 3,
                    text: 'Multi Message 3',
                    icon: 'res://icon',
                    smallIcon: 'ic_media_pause'
                }]);
            };
            scheduleDelayed = function () {
                var now = new Date().getTime(),
                    _5_sec_from_now = new Date(now + 5 * 1000);
                var sound = device.platform == 'Android' ? 'file://sound.mp3' : 'file://beep.caf';
                cordova.plugins.notification.local.schedule({
                    id: 1,
                    title: 'Scheduled with delay',
                    text: 'Test Message 1',
                    at: _5_sec_from_now,
                    sound: sound,
                    badge: 12
                });
            };
            scheduleMinutely = function () {
                var sound = device.platform == 'Android' ? 'file://sound.mp3' : 'file://beep.caf';
                cordova.plugins.notification.local.schedule({
                    id: 1,
                    text: 'Scheduled every minute',
                    every: 'minute',
                    sound: sound,
                    icon: 'res://icon',
                    smallIcon: 'res://ic_popup_sync'
                });
            };
        </script>
    </body>
</html>

Index.css


/*
    Copyright 2013-2014 appPlant UG
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at
     http://www.apache.org/licenses/LICENSE-2.0
    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
*/
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}
body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color:#E4E4E4;
    background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    background-image:-webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, #A7A7A7),
        color-stop(0.51, #E4E4E4)
    );
    background-attachment:fixed;
    font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size:12px;
    height:100%;
    margin:0px;
    padding:0px;
    text-transform:uppercase;
    width:100%;
}
/* Portrait layout (default) */
.app {
    _background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
    position:absolute;             /* position in the center of the screen */
    left:50%;
    _top:50%;
    height:50px;                   /* text area height */
    width:225px;                   /* text area width */
    text-align:center;
    padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
    margin:-145px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
                                   /* offset horizontal: half of text area width */
}
/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
    .app {
        _background-position:left center;
        _padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
        _margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
                                      /* offset horizontal: half of image width and text area width */
    }
}
h1 {
    font-size:24px;
    font-weight:normal;
    margin:0px;
    overflow:visible;
    padding:0px;
    text-align:center;
}
.event {
    border-radius:4px;
    -webkit-border-radius:4px;
    color:#FFFFFF;
    font-size:12px;
    margin:0px 30px;
    padding:2px 0px;
}
.event.listening {
    background-color:#333333;
    display:block;
}
.event.received {
    background-color:#4B946A;
    display:none;
}
@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
@-webkit-keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
.blink {
    animation:fade 3000ms infinite;
    -webkit-animation:fade 3000ms infinite;
}
.section {
    margin: 15px 0 5px 10px;
    border-bottom: 2px solid;
}
.container {
    display: -webkit-flex;
    display: flex;
    margin: 0px 10px;
}
.container div {
    -moz-box-shadow:inset 0px 1px 0px 0px #caefab;
    -webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
    box-shadow:inset 0px 1px 0px 0px #caefab;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811) );
    background:-moz-linear-gradient( center top, #77d42a 5%, #5cb811 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811');
    background-color:#77d42a;
    -webkit-border-top-left-radius:10px;
    -moz-border-radius-topleft:10px;
    border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
    -moz-border-radius-topright:10px;
    border-top-right-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    -moz-border-radius-bottomright:10px;
    border-bottom-right-radius:10px;
    -webkit-border-bottom-left-radius:10px;
    -moz-border-radius-bottomleft:10px;
    border-bottom-left-radius:10px;
    text-indent:0px;
    border:1px solid #268a16;
    display:inline-block;
    color:#244906;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    font-style:normal;
    min-height:30px;
    max-height:42px;
    line-height:30px;
    width:100%;
    margin:5px;
    text-transform:none;
    text-decoration:none;
    text-align:center;
    text-shadow:1px 1px 0px #aade7c;
}
.container div:active {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a) );
    background:-moz-linear-gradient( center top, #5cb811 5%, #77d42a 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a');
    background-color:#5cb811;
}
.container div span {
    font-size:10px;
    position:relative;
    top:-15px;
}
.copyright {
    text-align:right;
    padding:10px 15px 5px 0;
}




Langkah selanjutnya adalah membuat file apk dari project yang sudah kita buat langkahnya adalah buka kembali cmd yang tadi sudah kita buka lalu ketikan

Cordova build android
Local Notification

Jika sukses, anda dapat menemukan file apk yang sudah di build di C:\LocalNotification\platforms\android\build\outputs

Disini saya mencoba menginstal dan menjalankan aplikasi tersebut menggunakan bluestack, dan ini hasilnya.

Cordova Membuat Local Notification


Hasil Local Notification

Demikian tutorial mengenai membuat local notification android berbasis apache cordova semoga dapat anda pelajari. Anda juga dapat mengetahui lebih banyak mengenai plugin local notification ini di halaman github yang ada.

Tutorial Cordova Bagian 2 Membuat Aplikasi QR Reader

Melanjutkan postingan saya sebelumnya kali ini kita akan belajar mengenai bagaimana cara membuat aplikasi berbasis apache cordova dengan menambahkan plugin yang kita ambil dari github. Bagi anda yang belum mengetahui apa itu apache cordova, anda dapat membaca penjelasannya di postingan saya yang sebelumnya Inslatasi Apache Cordova.

Kali ini kita akan membuat aplikasi qr code reader dengan apache cordova dan mengambil plugin untuk qr code dari github. Untuk membuat aplikasi ini di komputer anda harus terinstal aplikasi-aplikasi berikut :
1. Node JS
2. GIT
3. JDK (Disini saya memakai JDK versi 7)
4. Android SDK
5. Koneksi Internet
Jika anda belum mengetahui cara menginstal aplikasi-aplikasi tersebut, anda dapat membacanya di sini.

Jika semua peralatan sudah ada, kita tinggal memulai pembuatan aplikasi QR Code menggunakan Apache Cordova.

1. Ketikan perintah

cd c:/

Setelah itu ketikan


cordova create AplikasiCordova io.cordova.hellocordova CordovaApp

Aplikasi QR Reader Cordova

2. Selanjutnya masuk ke folder aplikasi tersebut berada, ketik

cd AplikasiBaru

QR Reader Phonegap

3. Menambahkan platform yang ingin dibangun.
Pada proses membuat aplikasi cordova, kita bisa memilih perangkat apa yang ingin kita support, karena kali ini kita membuat aplikasi android maka perintahnya adalah

cordova platform add android

Aplikasi QR Scanner Phonegap

Biarkan proses penambahan platform berjalan, kita juga bisa menambahkan platform lain contohnya

Cordova platform add browserCordova platform add blackbarryCordova platform add firefoxosCordova platform add windows

4. Jika proses telah selesai maka kita bisa membuka file html yang ada dan kita melakukan coding seperti halnya membangun sebuah website. Karena kita membuat project di folder C maka file html terletak di C:/AplikasiBaru/www/

Brcode Reader Cordova

Disana juga sudah terdapat folder css, img, dan, js yang sudah di generate oleh sistem.

5. Karena kita akan membuat aplikasi QR Reader yang pluginya kita ambil dari github, maka kita harus menambahkannya terlebih dahulu. Buka cmd yang tadi telah kita buka dan ketikan

cordova plugin add phonegap-plugin-barcodescanner

Brcode Reader Phonegap

6. Jika plugin berhasil kita tambahkan selanjutnya saatnya membuat coding di halaman index.html.
Secara sederhana perintah javascript untuk melakukan scanning code adalah sebagai berikut:




cordova.plugins.barcodeScanner.scan(  function (result) {
    if(!result.cancelled)
    {
      alert("Barcode type is: " + result.format);
      alert("Decoded text is: " + result.text);
    }
    else
    {
      alert("You have cancelled scan");
    }
  },
  function (error) {
      alert("Scanning failed: " + error);
  }
);



Saya sudah membuat file html yang dapat anda copy paste pada project yang anda buat di rumah.
Index.html

<!DOCTYPE html><html>
    <head>
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <title>QRCode Reader APP</title>
    </head>
    <body>
    <center><a target="_blank" href="javascript:scan();" style="text-decoration: none"><button>Scan</button></a></center>
        <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
        <script type="text/javascript" src="cordova.js"></script>
        <script>
            function scan()
            {
                cordova.plugins.barcodeScanner.scan(
function (result) {
    if(!result.cancelled)
  {
      alert("Decoded text is: " + result.text);
    }
    else
    {
      alert("You have cancelled scan");
    }
  },
  function (error) {
      alert("Scanning failed: " + error);
  }
);
            }
        </script>
    </body>
</html>


7. Setelah itu kita harus membuat project QR Reader tersebut menjadi bentuk .apk agar dapat di instal di perangkat android. Untuk melakukan build agar project menjadi bentuk apk ketikan

cordova build android

Brcode Reader Phonegap

Tunggu hingga proses selesai, dalam proses ini jika anda belum pernah melakukan build sebelumnya, maka prosesnya akan lebih lama karena komputer akan mendownload file terlebih dahulu yang digunakan untuk membuat project menjadi bentuk apk.

Brcode Reader Phonegap

Jika sudah selesai, maka file apk yang sudah kita buat terletak di
C:\AplikasiBaru\platforms\android\build\outputs\apk

Brcode Reader Apache Cordova

8. Anda dapat menginstal aplikasi ini secara langsung di android atau menggunakan emulator. Disini saya menggunakan bluestack untuk menjalankan aplikasi tersebut.


Berikut hasil akhir dari aplikasi yang kita buat :

QR Reader Apache Cordova

QR Reader Apache Cordova

QR Reader Apache Cordova

QR Reader Apache Cordova


Demikian tutorial mengenai membuat aplikasi QR Reader berbasis Apache Cordova, anda dapat mengembangkan sendiri aplikasi tersebut, menjadi aplikasi yang lebih bermanfaat.


Tutorial Cordova Bagian 1 Cara Instalasi Cordova

Tutorial Cordova Bagian 1 Cara Instalasi Cordova - Bagi anda yang belum mengetahui apa itu cordova saya akan berikan sedikit gambaran agar anda tidak bingung mengikuti tutorial ini. Cordova adalah framework berbasis javascript yang memungkinkan untuk membuat aplikasi mobile (android,ios, blackbarry, windows phone) dengan bahasa html, css, dan javascript. Framework ini sangat berguna bagi para developer website yang ingin lebih memperluas jangkauan aplikasi yang mereka buat.

Aplikasi mobile yang dibuat dengan framework cordova ini disebut aplikasi hybrid, terdapat pula aplikasi mobile yang dibuat dengan bahasa pemrograman java yang disebut aplikasi native. Baik native maupun hybrid mempunyai kelebihan dan kekurangan sendiri-sendiri tapi di postingan kali ini saya tidak akan menjelaskan hal tersebut. Disini saya hanya akan menjelaskan mengenai aplikasi Hybrid.

Aplikasi hybrid memiliki kelebihan lebih mudah untuk dikembangkan dengan banyak sekali dukungan dan plugin beserta contoh penggunaannya. Sedangkan untuk kekurangan dari aplikasi hybrid adalah tidak dapat digunakan untuk membangun sebuah program berskala besar yang membutuhkan banyak media penyimpanan (database).

Ada banyak framework yang dapat dipergunakan untuk membuat aplikasi hybrid selain menggunakan cordova contohnya seperti senca touch, onsen framework, dan lain sebagainya yang dapat anda temukan di google. Cordova sebenarnya juga merupakan kelanjutan dari phonegap yang telah bernaung di bawah perusahaan yang baru. Jika anda sudah pernah mempelajari phonegap maka cukup mudah untuk mempelajari cordova karena memang keduanya sama.

Tools
Untuk dapat memulai sebuah project cordova anda terlebih dahulu harus menyiapkan tools yang akan dipergunakan dan pastikan sudah terinstal di komputer anda. Disini saya menggunakan contoh membangun aplikasi android menggunakan cordova, maka aplikasi dan tools yang dibutuhkan :

1. Git
2. Node js
3. JDK
4. Android SDK

Pertama yang harus kita instal adalah JDK (Java Development Kit), disini saya menggunakan JDK 7 anda dapat melakukan download JDK disini.
Instal JDK seperti menginstal program secara umum hingga selesai. Setelah selesai ada hal yang perlu dilakukan yaitu melakukan seting path di environtment variabel komputer anda. Dan langkahnya adalah sebagai berikut:

Klik kanan My Computer dan pilih properties.

setting environment variables

Pilih advanced system setting

Cordova environment variables

Pilih environtment variables

Cordova environment variables

Pada bagian System Variables cari path dan klik edit

Cara Instalasi Cordova

Pada kolom variables value tambahkan tanda ; dan masukkan lokasi tempat folder bin JDK yang tadi telah kita instal. Secara umum folder bin JDK terletak di C:\Program Files\Java\jdk1.7.0_40\bin
Atau anda dapat membuka windows explorer kemudian cari folder program files -> java -> jdk -> bin lalu klik pada bagian seperti gambar dan copy lokasi tersebut.

Tutorial Cordova CLI Indonesia

Jika anda sudah mendapatkan lokasi folder bin, kembali ke kolom variables value tambahkan tanda ; dan masukkan lokasi tempat folder bin.

Cordova Bahasa Indonesia

Selanjutnya kita tinggal klik ok hingga semua jendela tertutup.

Setelah kita menginstal JDK, selanjutnya kita menginstal node js dan git. Bagi anda yang belum tahu node js adalah sekumpulan library java yang dapat dipanggil melalui command prompt, dan git adalah sekumpulan library yang dipergunakan untuk menambah plugin atau library dari github.

Instal kedua aplikasi tersebut seperti menginstal aplikasi biasa hingga selesai. Jika sudah selesai kita juga harus menambahkan path kedua aplikasi tersebut ke environtment variables seperti pada saat kita memasukkan path JDK tadi. Caranya kurang lebih sama yaitu:

Buka windows explorer cari Program files -> nodejs dan copy alamat yang ada, secara umum alamat pathnya adalah

C:\Program Files\nodejs

Buka windows explorer cari Program Files -> git -> bin dan Program Files -> git ->cmd

Untuk git ada dua alamat yang harus kita tambahkan yaitu :

C:\Program Files\Git\bin
C:\Program Files\Git\cmd

Selanjutnya buka kembali pengaturan environtment variables dan tambahkan ketiga alamat tadi dengan dipisahkan tanda ;

Cara Instalasi Cordova

Setelah selesai klik ok hingga semua jendela tertutup.

Selanjutnya yang terakhir kita instal adalah Android SDK, aplikasi ini dipergunakan untuk melakukan compile atau build aplikasi yang kita buat menjadi bentuk apk. Instal aplikasi ini seperti biasa hingga selesai. Untuk yang terakhir anda tidak perlu melakukan setting path.

Jika anda sudah mengikuti semua langkah dengan benar dan telah menginstal semua aplikasi yang dibutuhkan, maka komputer anda sudah siap untuk digunakan membuat aplikasi cordova.

Membuat Aplikasi Hello World

Buka CMD, pastikan terdapat koneksi internet.
Install library cordova terlebih dahulu dengan perintah

npm install –g cordova

Tunggu hingga proses selesai, untuk cek apakah cordova telah terinstall ketikan perintah

cordova

Maka akan muncul segala informasi mengenai tata cara penggunaan library cordova.

Buat aplikasi baru dengan terlebih dahulu arahkan posisi anda ke drive c atau d agar anda dapat degan mudah menemukan project yang nanti akan anda buat, disini saya meletakkannya di  drive c.

Ketikan perintah

cd c:/

Setelah itu ketikan

cordova create AplikasiCordova io.cordova.hellocordova CordovaApp

Cordova Windows 7

Maksud dari perintah di atas adalah kita membuat aplikasi dengan nama Cordova App yang terletak di folder AplikasiCordova, anda dapat menemukan project yang telah kita buat di drive c

Buat Aplikasi Cordova


Sekian dahulu untuk tutorial yang saya jelaskan kali ini, untuk postingan selanjutnya, kita akan belajar mengenai cara menginstal plugin dan build project yang kita buat menjadi bentuk apk.

Koplayer Emulator Android Super Ringan

Download Koplayer Emulator Android Super Ringan - Bagi anda yang belum mengetahui apa itu koplayer disini saya akan sedikit menjelaskan, koplayer adalah sebuah emulator android yang akhir-akhir ini cukup populer, kepopuleran koplayer disebabkan karena emulator yang satu ini sangat ringan digunakan, bahkan untuk pc atau komputer dengan spesifikasi rendah sekalipun. Berbeda dengan halnya Bluestacks yang sudah saya bahas dalam artikel Cara Menjalankan OS Android Di PC, Bluestack mengharuskan spesifikasi komputer dan grafis yang tinggi, jika pc atau komputer anda belum mendukung untuk menjalanan Bluestack, tidak ada salahnya anda mencoba Koplayer.

Adapun spefisikasi komputer minimum untuk menjalankan Koplayer adalah sebagai berikut:
- Minimum RAM 512mb.
- Setidaknya menyediakan ruang HardDisk 3GB untuk meng-install Koplayer.
- Resolusi sistem tidak boleh lebih rendah dari 1024×768.
- Kartu Grafis mendukung OpenGL 2.0.

Dari spesifikasi di atas tentu sudah sangat berbeda dengan Bluestack yang mengharuskan RAM minimal 1 GB dan kartu grafis yang baik. Namun meskipun hanya membutuhkan spesifikasi yng rendah namun Koplayer tidak kalah dengan Bluestak. Fitur-fitur yang dimiliki Koplayer antara lain: support multiple accounts, video recording, gamepad & keyboard dan sudah memiliki Google Play Store, serta hampir semua aplikasi dan game dapat berjalan di Koplayer.

Setelah anda mengerti dan paham mengenai Koplayer kita lanjutkan artikel Download Koplayer Emulator Android Super Ringan ini. Pertama anda dapat mengunduh atau download aplikasi Koplayer di link berikut:

Download Koplayer

Langkah-Langkah Instalasi Koplayer:
1. Buka Koplayer yang sudah anda download sebelumnya.
2. Lakukan instalasi dengan menyetujui lisensi persetujuan dan klik next

Cara Instal Koplayer

3. Pilih tempat penyimpanan, usahakan yang masih sisa besar. Karena semakin banyak anda menginstall aplikasi atau game, jumlah datanya akan semakin besar.

Cara Instal Koplayer

4. Jika sudah terinstall buka Koplayer dan klik launch. 

Launch Koplayer

5. Klik Next untuk mulai menggunakan Koplayer.

Tampilan Awal Koplayer

6. Tampilan awal dari Koplayer adalah seperti berikut.

Download Koplayer

7. Untuk dapat mendownload aplikasi di Play Store anda bisa menambahkan akun Google terlebih dahulu, caranya anda tinggal pilih Play Store.

Play Store Koplayer

8. Terakhir anda hanya perlu download game yang ingin anda mainkan.

Koplayer Emulator Android Paling Ringan


Demikian artikel mengenai Koplayer Emulator Android Super Ringan, aplikasi ini bisa sebagai alternatif jika anda tidak dapat menjalankan emulator android seperti Bluestacks dan Windroye di PC atau komputer anda.

Tutorial Menjalankan OS Android Di PC

Tutorial Menjalankan OS Android Di PC - Android memang menjadi tren tersendiri akhir-akhir ini, kemudahan dan berbagai fitur dan fasilitas serta berbagai aplikasi yang ada membuat Sistem Operasi ini menjadi Sistem Operasi yang paling banyak digunakan oleh produsen-produsen smartphone terkenal. Dengan perkembangan yang begitu pesatnya saat ini Android sudah bisa diinstal atau dijalankan di PC atau komputer.

Pada postingan kali ini saya akan memberikan tutorial bagaimana cara untuk menjalankan OS Android di PC atau laptop. Tentu sangat seru bila kita bisa memakai dan memainkan Android di pc atau komputer, ada banyak hal yang bisa dilakukan tanpa takut merusak smartphone atau membuat baterai menjadi boros saat kita memainkannya di pc atau laptop.

Untuk dapat menjalankan OS Android di pc atau komputer kita membutuhkan software emulator Android yang saat ini sudah banyak beredar luas. Apa itu software emulator Android?, Emulator adalah software yang memungkinkan suatu program / sistem operasi dijalankan dalam sistem lain yang sama sekali berbeda. Sebagai contoh suatu program Windows dapat dijalankan di sistem operasi Linux dengan menggunakan piranti lunak emulator Wine. Ada pula program yang mengemulasikan suatu komputer dalam komputer, misalnya VMware. Contoh lain adalah program-program emulator untuk menjalankan permainan komputer yang awalnya hanya bisa dijalankan pada konsolnya masing-masing, misalnya Nintendo, Atari, PlayStation, XBox dan lain-lain.

Nah untuk OS Android, ada banyak emulator yang tersedia di luar sana. Anda dapat mencari berbagai macam emulator Android di google jika ingin mengetahui lebih lengkap. Dan di postingan kali ini saya akan menggunakan emulator Android yang paling banyak dikenal dan digunakan bernama Bluestacks.

Bluestack merupakan aplikasi gratis (free software) yang bertipe mesin virtual (emulator) Android yang dijalankan di komputer (PC maupun laptop) untuk mengoperasikan segala macam aplikasi Android. Bluestack disediakan dan bisa dijalankan di komputer yang bersistem operasikan Windows (Windows XP, 7, 8, dll) dan Macintosh.


Berikut Tutorial Lengkap Bagaimana Cara Menjalankan OS Android Di PC Menggunakan Bluestacks:

1. Pastikan PC atau komputer anda memiliki spesifikasi minimum untuk menjalankan Bluestack terlebih dahulu, untuk dapat menjalankan Bluestack anda harus memiliki spesifikasi pc atau komputer sebagai berikut.

-  Minimal 2GB RAM.
-  Minimal 9GB ruang disk yang tersedia untuk menyimpan Android apps/games dan data.
- Driver untuk grafis PC Anda harus diperbarui untuk kompatibilitas dengan BlueStacks yang ingin anda instal.

Setelah komputer / pc anda memenuhi spesifikasi seperti di atas, maka anda dapat lanjut ke tahap selanjutnya.


2. Masuk ke www.bluestaks.com, secara otomatis PC Akan mendeteksi versi windows lokasi negara Anda, jika sudah pilih menu download atau unduh.

www.bluestaks.com


3. Ukuran file sekitar 12,8 mb, tunggu sampai proses download selesai, setelah selesai instal aplikasi Bluestaks tersebut. Pada saat proses instalasi, aplikasi akan secara otomatis meloading gamesPop dan beberapa aplikasi seperti Twitter, Facebook, dll. Proses ini membutuhkan waktu cukup lama, dengan koneksi internet Speedy 512 MB di butuhkan waktu kurang lebih 1 jam. Setelah proses loading games dan aplikasi selesai Anda akan mendapatkan dua aplikasi Bluestaks seperti pada gambar dibawah ini.

Bluestacks Shortcut


4. Untuk menjalankan aplikasi Android di PC atau Laptop gunakan aplikasi Start Bluestacks dan tampilannya seperti pada gambar dibawah ini :

Blustacks Preview


5. Sama seperti di Android untuk dapat menggunakan aplikasi Bluestacks anda harus mendaftarkan akun Google anda untuk dapat mendownload beberapa Aplikasi dan Games Android dengan mendaftar di Google Play Store. Untuk registrasi play store di BlueStacks masuk ke menu BlueStacks Settings , Advanced Settings, Google isikan email Gmail Anda.



Jika anda tidak dapat menjalankan Bluestacks di PC / Laptop anda  atau anda mendapatkan pesan error, mungkin komputer atau OS yang anda gunakan kurang mendukung aplikasi Bluestack, tetapi anda tidak perlu kecewa, karena terdapat emulator Android yang lebih ringan daripada bluestacks. Aplikasi tersebut adalah Koplayer, jika anda ingin mencobanya anda dapat membacanya di postingan saya : Koplayer Emulator Android Ringan Yang Mudah Digunakan.

Kategori

Kategori