Pada kesempatan kali ini saya akan menulis tutorial singkat tentang langkah - langkah membuat aplikasi untuk menampilkan waktu shalat berdasarkan lokasi. Beberapa teknologi yang akan saya pakai pada tutorial kali ini adalah:
- HTML 5 GeoLocation untuk memperoleh data lokasi saat ini
- Google Map API untuk mengetahui detail lokasi berdasar latitude dan longitude
- AngularJS
- API ke http://aladhan.com untuk memperoleh waktu shalat, jadi disini saya tidak menggunakan perhitungan sendiri
- Angular Bootstrap untuk mempercantik aja
Skenario penggunaan aplikasi:
- User mengakses halaman
- Sistem menampilkan halaman dengan tombol "Tampilkan waktu shalat"
- User klik tombol tampilkan waktu shalat
- Jika user sedang berada di lokasi yang tidak disupport oleh geolocation maka akan muncul peringatan bahwa lokasi ditemukan.
- Jika lokasi ditemukan, sistem akan mengakses Rest API aladhan.com mengirimkan informasi waktu dan lokasi
- Selain itu sistem juga akan mengakses API google map untuk memperoleh informasi detail lokasi
- Sistem menampilkan detail lokasi dan waktu shalat
Oke skenario sudah jadi mari kita mulai implementasikan.
- Kita buat terlebih dahulu template tag.
- Include bootstrap dan angular:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
- Pada <body> kita isikan script utama sebagai berikut:
Penjelasan:
<div class="main" ng-app="salahApp" ng-controller="salahtimeController"> atribut ng-App menunjukkan aplikasi yang akan diload pada template ini adalah "salahApp" dan controller yang digunakan adalah "salahtimeController" ingat javascript sifatnya case sensitive jadi penulisan nama App dan Controller pastikan sama persis dengan pendefinisiannya
<div class="alert alert-danger" ng-if="error"> ng-if asrtinya kondisional, jadi baris ini akan tampil hanya jika variabel error terisi
<button class="btn btn-info" ng-click="waktu()"> jika tombol diklik akan memanggil fungsi waktu
<div class="tampil" ng-if="alamat">{{alamat}}</div> untuk menampilkan variabel dalam Angular selalu di tuliskan diantara double kurawal {{}}
- Sebelum </body> kita tambahkan dengan script angular sebagai berikut:
Penjelasan:
var app = angular.module('salahApp', []); inisiasi nama App dan juga nama module-module yang dipakai
app.controller('salahtimeController', function($scope, $http) { pendefinisian controller salahtimeController
$scope.waktu=function(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition($scope.showPosition);
} else {
$scope.error="Lokasi tidak ditemukan. Cek koneksi Internet anda";
}
} fungsi waktu. Semua variabel pada angular harus diletakkan pada objek $scope supaya dapat diakses pada template. Isi dari fungsi ini untuk menemukan lokasi. Jika lokasi ditemukan akan memanggil fungsi showPosition
$scope.showPosition=function(position){
lat=position.coords.latitude;
long=position.coords.longitude;
var d = new Date();
var n = Math.floor((new Date).getTime()/1000);
$http.get("http://api.aladhan.com/timings/"+n+"?latitude="+lat+"&longitude="+long+"&timezonestring=Asia/Jakarta&method=3")
.success(function (response) {
var latlon = lat + "," + long;
if(response.code == 200){
$scope.tampil =true;
$scope.subuh=response.data.timings.Fajr;
$scope.dhuhur=response.data.timings.Dhuhr;
$scope.asar=response.data.timings.Asr;
$scope.maghrib=response.data.timings.Maghrib;
$scope.isha=response.data.timings.Isha;
}
$http.get("http://maps.googleapis.com/maps/api/geocode/json?latlng="+latlon+"&sensor=true")
.success(function (address){
$scope.alamat='Lokasi Anda: '+address.results[0].formatted_address;
})
});
} Fungsi showPosition untuk memproses data, melakukan pemanggilan API dan menampilkan hasilnya.
Oke sampai sini tutorial singkat dari saya. Untuk melihat demonya dapat dilihat di:
Sedangkan scriptnya dapat didownload di:
Untuk tutorial selanjutnya insyaAllah tutorial membuat REST API sederhana dengan SLim Framework sesuai request Pak Suami <3 hihihi... Jika ada pertanyaan jangan sungkan-sungkan ditulis di kolom komentar ya. Oiya, karena di aplikasi ini kita sudah pakai angular untuk selanjutnya juga insyaAllah akan saya convert ke aplikasi android menggunakan frmaework kesayang saya yaitu ionic. Tutorial menyusul ya...
Terimakasih sudah membaca, semoga bermanfaat.
0 Responses to Tutorial Membuat Aplikasi Waktu Shalat dengan HTML 5 dan AngularJS
Posting Komentar