Membangunkan Hybrid Apps Dengan Ionic Dan AngularJS - KATMANE

Langkah 1:

ionic start katmanastart sidemenu

- untuk jana atau muat turun framework ionic, kemudian ambil folder www sahaja.

Langkah 2:

Intel@XDK - New Project - Templates - Blank - HTML5+Cordova - Continue - katmana (nama projek)

Langkah 3:

Delete folder www dalam folder katmana. Copy folder www dari folder katmanastart dan paste ke dalam folder katmana.

Folder katmanastart dah boleh padam.

Langkah 4:

Project - Plugin Management - Add plugins to this Project:

• Geolocation
• Notification
• File
• File Transfer

Langkah 5:

Tambah function dalam stateprovider...

.state('app.peta', {

      url: '/peta',

      views: {

        'menuContent': {

          templateUrl: 'templates/peta.html',

          controller: 'PetaCtrl'

        }

      }

})

Tukarkan..

$urlRouterProvider.otherwise('/app/playlists');

kepada 

$urlRouterProvider.otherwise('/app/peta');

dalam fail app.js.

Langkah 6:

Masukkan..

.controller('PetaCtrl', function($scope,$http,$state) {
   
    // Wait for device API libraries to load
    document.addEventListener("deviceready", onDeviceReady, false);

    var watchID = null;
    // device APIs are available
    function onDeviceReady() {
       
        //initial map
        navigator.geolocation.getCurrentPosition(initMap, onError);
       
        //update/watch location
        var watchID = navigator.geolocation.watchPosition(onSuccess, onError, { enableHighAccuracy: true});  
    }
   
    var telefon     = '0122494234';
    var user_id     = '1';
    var host = "http://crockcms.net/my/"; //server: http://crockcms.net/my/ local:http://localhost:8888/crockcms/
   
    // onSuccess Geolocation
    var mymarker=null;
    function onSuccess(position) {
       
        var lat = position.coords.latitude;
        var long = position.coords.longitude;
        var myLatlng = new google.maps.LatLng(lat, long);
        if(mymarker==null){
             var iconimage = new google.maps.MarkerImage('/img/marker-oren.png',
                null, /* size is determined at runtime */
                null, /* origin is 0,0 */
                null, /* anchor is bottom center of the scaled image */
                new google.maps.Size(42, 42) //new google.maps.Size(42, 68)
             );
            mymarker = new google.maps.Marker({
                position: myLatlng,
                map: $scope.map,
                animation: google.maps.Animation.DROP,
                icon: iconimage
            });
            mymarker.setMap($scope.map);
        }else{
            mymarker.setPosition(myLatlng);
        }

        //try simpan location
        var timer = setInterval(function() {
            var latitude    = position.coords.latitude;
            var longitude   = position.coords.longitude;
           
            var http = new XMLHttpRequest();
            var url = host+"mymap/geolog/simpanlatlong/";
            var params  =   "user_id=" + user_id +
                            "&telefon=" + telefon +
                            "&latitude=" + latitude +
                            "&longitude=" + longitude
           
            http.open("POST", url, true);
            http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
           
            http.onreadystatechange = function(){
                if(http.status == 200){
                    //eh, nak buat apa kat sini..
                }
            }
            http.send(params);
        }(), 10000)
    }
   
    function initMap(position) {
        //map
        var map;
   
        var mapOptions = {
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
       
        map = new google.maps.Map(document.getElementById('map'), mapOptions);
     
        var geolocate = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        map.setCenter(geolocate);
       
        $scope.map = map;
       
        //letak button - my location
        addYourLocationButton(map);
       
        //set marker lokasi member lain
        getMarkers();
       
    }
   
    //rujukan: https://modernweb.com/google-maps-markers/
    //Time between marker refreshes
    var INTERVAL = 1000;
   
    //Used to remember markers
    var markerStore = {};
   
    function getMarkers() {
        var mynumber = telefon;
        $http.get(host+'mymap/geolog/get_all_without/'+mynumber).then(function(response){
            var jsonData = response.data;
            for (var i = 0; i < jsonData.markers.length; i++) {
                //Do we have this marker already?
                if(markerStore.hasOwnProperty(jsonData.markers[i].telefon)) {
                    var memberLoc = new google.maps.LatLng(jsonData.markers[i].latitude, jsonData.markers[i].longitude);
                    markerStore[jsonData.markers[i].telefon].setPosition(memberLoc);
                   
                    //set center map - lokasi sendiri ikut telefon
                    /*
                    if(telefon==jsonData.markers[i].telefon){
                        $scope.map.setCenter(memberLoc);
                    }
                    */
                   
                } else {
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(jsonData.markers[i].latitude,jsonData.markers[i].longitude),
                        title:jsonData.markers[i].telefon,
                        map: $scope.map,
                    });
                    markerStore[jsonData.markers[i].telefon] = marker;
                }
            }
            window.setTimeout(getMarkers,INTERVAL);
        })
    }
   
    // onError Callback receives a PositionError object
    function onError(error) {
        alert('code: '    + error.code    + '\n' +
              'message: ' + error.message + '\n');
    }
   
    //go to current location dalam map
    function addYourLocationButton (map)
    {
        var controlDiv = document.createElement('div');
       
        //button atas map
        var firstChild = document.createElement('button');
       
        firstChild.style.backgroundColor = '#fff';
        firstChild.style.border = 'none';
        firstChild.style.outline = 'none';
        firstChild.style.width = '28px';
        firstChild.style.height = '28px';
        firstChild.style.borderRadius = '2px';
        firstChild.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)';
        firstChild.style.cursor = 'pointer';
        firstChild.style.marginRight = '10px';
        firstChild.style.padding = '0';
        firstChild.title = 'Your Location';
        controlDiv.appendChild(firstChild);

        var secondChild = document.createElement('div');
       
        secondChild.style.margin = '5px';
        secondChild.style.width = '18px';
        secondChild.style.height = '18px';
        secondChild.style.backgroundImage = 'url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-2x.png)';
        secondChild.style.backgroundSize = '180px 18px';
        secondChild.style.backgroundPosition = '0 0';
        secondChild.style.backgroundRepeat = 'no-repeat';
        firstChild.appendChild(secondChild);

        google.maps.event.addListener(map, 'center_changed', function () {
            secondChild.style['background-position'] = '0 0';
        });

        firstChild.addEventListener('click', function () {
            var imgX = '0',
                animationInterval = setInterval(function () {
                    imgX = imgX === '-18' ? '0' : '-18';
                    secondChild.style['background-position'] = imgX+'px 0';
                }, 500);
           
            if(navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                    map.setCenter(latlng);
                    clearInterval(animationInterval);
                    secondChild.style['background-position'] = '-144px 0';
                });
            } else {
                clearInterval(animationInterval);
                secondChild.style['background-position'] = '0 0';
            }
        });

        controlDiv.index = 1;
        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv);
    }
})

dalam fail controller.js

Langkah 7:

Bina fail baru dalam folder templates dan namakannya peta.html. Isi kandungannya..

<ion-view view-title="Map">

  <ion-content data-tap-disabled="true" >

    

    <div id="map" data-tap-disabled="true"></div>

  </ion-content>

</ion-view>

Langkah 8:

Tambahkan..

.scroll{

    height: 100%;

}

#map{

    height: 100%;

    width: 100%;

}

dalam fail style.css.

Langkah 9: Hasilkan paparan Peta.

Masukkan..

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">

di bahagian <head> dalam fail index.html.

Masukkan..

<!-- google map -->

<script type="text/javascript"

      src="https://maps.googleapis.com/maps/api/js?key={Google Map API Key}">

</script>

sebelum </body> dalam fail index.html.

* Nota:

Bahagian update data ke database belum buat lagi...

Read More

Jadual Kuliah Ustaz Abu Zaki

Jadual kuliah Ustaz Abu Zaki sekitar Parit Raja, Johor.

Read More