กันยายน 2016

Firebase เป็น Project ถูกออกแบบมาให้เป็น API และ Cloud Storage สำหรับพัฒนา Realtime Application รองรับหลาย Platform เบื้องต้นล่าสุดก็มีให้ใช้พัฒนาด้วยกัน 3 Platform คือ IOS App, Android App, Web App

โดยตัวอย่างโค๊ดการเรียกใช้งานที่จะมานำเสนอในวันนี้พัฒนาร่วมกับ Web Application ซึ่งก็ต้องเขียนด้วย Javascript นั้นเอง

เริ่มกันเลย

เริ่มต้นก็ต้องไปสร้าง Project บน Firebase Console กันก่อน เข้าลิ้งนี้ console.firebase ได้เลย
คลิกเลือกที่ปุ่ม CREATE NEW PROJECT จะมีหน้าจอเด้งมาให้กรอก Project Name และเลือก Country/Region เราก็เลือกตามใจ จากนั้นกดปุ่ม CREATE PROJECT
หลังจาก CREATE PROJECT แล้ว ก็จะได้หน้า console ของ Project ที่เราสร้างไป
ให้เลือกเมนู Database จากนั้นไปที่ Tab RULES เพื่อเข้าจัดการ users authorized ของการเข้าถึงของมูล เบื้องต้นเราจะอนุญาตให้คนที่เรียกเข้าถึงข้อมูลได้หมดทั้ง Read และ Write ข้อมูลได้ โดยแก้ไขโค๊ดตามนี้แล้ว กดปุ่ม PUBLIC เพื่อบันทึกการเปลี่ยนแปลง
```
//แก้ไขจาก 
{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

//เป็น

{
  "rules": {
    ".read": true,
    ".write": true
  }
}
```
กลับมาที่ Tab Data เพื่อลองสร้างข้อมูลกัน โดยคลิกที่เครื่องหมาย +
เพิ่มข้อมูลตามนี้ จากนั้นกดปุ่ม ADD ก็จะได้ข้อมูลที่เราเพิ่มไป
ต่อไปจะมาเขียนโค๊ดกันกดไปที่เมนู Home Overview ของ Project ที่เราสร้าง และ คลิกเลือกที่ Add Firebase To Your web app
ระบบแสดงหน้าจอ

ให้ Copy Code นี้ จากนั้นให้สร้างไฟล์ index.html ขึ้นมาเพิ่มโค๊ดนี้เข้าไปในไฟล์ index.html ลองเรา โดยโค๊ดที่ Firebase นี้จะใช้พัฒนาร่วมกับ Angular1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Firebase คืออะไร เริ่มใช้งาน Firebase เบื้องต้น</title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
        <script src="https://www.gstatic.com/firebasejs/3.4.0/firebase.js"></script>
        <script>
            // Initialize Firebase
            var firebaseRef = {};

            angular.module('firebaseApp', []).service('firebaseService', function() {
                // สร้าง Function เพื่อ init Firebase เข้ากับ app เรา
                this.initFirebase = function() {
                    var config = {
                        apiKey: "{ใส่ api key ของคุณ}",
                        authDomain: "{ใส่ authDomain ของคุณ}",
                        databaseURL: "{ใส่ databaseUrl ของคุณ}",
                        storageBucket: "{ใส่ storageBucket ของคุณ}",
                        messagingSenderId: "{ใส่ messageingSenderId ของคุณ}"
                    };
                    firebase.initializeApp(config);
                    firebaseRef = firebase.database().ref("blogs");
                }
                // สร้าง Function เพื่อเก็บ event ของ Firebase
                this.eventFirebase = function() {
                    firebaseRef.on('value', function(data) {
                        var elementOL = angular.element(document.getElementById('blogs'));
                        console.log(data.val());
                        const datas = data.val();
                        elementOL.empty();
                        angular.forEach(datas, function(post, index) {
                            console.log(' title ::==' + post.title + ' content ::==' + post.content);
                            elementOL.append('<li> Title ::== ' + post.title + ' Content ::==' + post.content + '</li>');
                        })
                    })
                }
                this.push = function(title, content) {}
            }).controller('firebaseCtrl', function(firebaseService) {
                // เรียกใช้งาน firebaseService ที่เราสร้างไว้
                firebaseService.initFirebase();
                firebaseService.eventFirebase();
            })
        </script>
    </head>
    <body ng-app="firebaseApp">
        <div ng-controller="firebaseCtrl">
            <fieldset>
                <legend>Poolsawat 's Blogs</legend>
                <ol id="blogs">
                    <li></li>
                </ol>
            </fieldset>
        </div>
    </body>
</html>

ผลการทำงานของโปรแกรม
ลองทดสอบการทำงานว่าข้อมูลอัพเดท Realtime แบบที่เขาอวยจริงๆ ไหม ผมก็ทดสอบเปิด Browser 2 Tab โดย Tab แรกจะเปิดหน้า Database เพื่อเตรียมเพิ่มข้อมูล อีก Tab ผมเปิดหน้า App ของเราเพื่อรอดูผลที่เปลี่ยนแปลง
ผลการทดสอบ ข้อมูลถูกเพิ่มเข้ามาที่หน้า app ของเราโดยที่เราไม่ได้ refresh page เลย เยี่ยมไปเลยใช่ไหมครับ

อธิบาย Function events ที่ Firebase Provide มาให้สำหรับ Retrieve Data เพิ่มเติมเข้าไปที่นี่ Events Retrieve Data
events Function สำหรับ Save Data เพิ่มเติมเข้าไปที่นี่ Events Save Data

นี่คือตัวอย่างง่าย ๆ สำหรับบทความนี้ก็ขอฝากไว้เท่านี้นะครับ

<!DOCTYPE html> <html ng-app="mapApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <title>Google Map</title> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=YOUR_API_KEY"></script> <style media="screen"> #map { width: 100%; height: 500px; } </style> </head> <body> <div class="container" ng-controller="mapController"> <div class="" id="map"></div> </div> <script type="text/javascript"> var app = angular.module('mapApp', []); app.controller('mapController', function($scope) { console.log('Google Maps API version: ' + google.maps.version); // สร้าง Location 2 ชุด var locations = [ { title: 'BKK', lat: 13.742053062720384, lng: 100.5084228515625 }, { title: 'Rayong', lat: 12.860004340637044, lng: 101.38870239257812 } ] // ผูก element กับ MAP zoom ระดับ 6 เลขน้อย จะมองระยะกว้าง เลขมาก จะละเอียด center ให้ focus ที่ Bangkok var map = new google.maps.Map(document.getElementById('map'), { zoom: 6, center: locations[0], disableDefaultUI: true }); // Loop วาด Marker บนแผนที่ angular.forEach(locations, function(location, index) { console.log('location ::==' + location.title); // สร้าง marker var marker = new google.maps.Marker({position: location, map: map, title: location.title}); // สร้าง popup content ใส่ content เป็น location title var infowindow = new google.maps.InfoWindow({content: location.title}); // สร้าง event ให้ จุด marker marker.addListener('click', function(event) { console.log(event); // เปิด popup เมื่อ click marker infowindow.open(map,marker); }); }); // ใส่ event click ให้ MAP ทั้ง MAP map.addListener('click', function(event) { console.log('latitude ::==' + event.latLng.lat()); console.log('longtitude ::==' + event.latLng.lng()); // alert Latitude and Longitude alert('Latitude ::=='+event.latLng.lat()+' \nLongitude ::=='+event.latLng.lng()); }); }); </script> </body> </html>

กันยายน 2016

Firebase คืออะไร ขั้นตอนการเริ่มใช้งาน พร้อมโค๊ดตัวอย่างแบบง่าย ๆ

ตัวอย่างโค๊ดเรียก Google Maps API กับ AngularJS 1 เพื่อใส่ Marker Location แบบง่าย ๆ

คลังเก็บเรื่องราวต่าง ๆ

อยากทราบสิ่งใดให้ค้นหา

เรื่องล่าสุด

หมวดหมู่

หมวดเรื่องอื่น ๆ ที่น่าสนใจ

เรื่องราวข่าวสารล่าสุด

วงแหวนเว็บ

กันยายน 2016

ป้ายกำกับ

คลังเก็บเรื่องราวต่าง ๆ

อยากทราบสิ่งใดให้ค้นหา

เรื่องล่าสุด

หมวดหมู่

หมวดเรื่องอื่น ๆ ที่น่าสนใจ

หัวข้อเรื่องที่เกี่ยวข้อง

เรื่องราวข่าวสารล่าสุด

วงแหวนเว็บ