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:/
Cordova create LocalNotification io.cordova.localnotif LocalNotification
Selanjutnya masuk ke direktori project yang kita buat dan tambahkan platform android
cd LocalNotification
cordova platform add android
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
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
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.
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.
