กันยายน 2016

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

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

firebase1

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

เริ่มกันเลย

    1. เริ่มต้นก็ต้องไปสร้าง Project บน Firebase Console กันก่อน เข้าลิ้งนี้ console.firebase ได้เลยfirebase2
    2. คลิกเลือกที่ปุ่ม CREATE NEW PROJECT จะมีหน้าจอเด้งมาให้กรอก Project Name และเลือก Country/Region  เราก็เลือกตามใจ จากนั้นกดปุ่ม CREATE PROJECTfirebase3
    3. หลังจาก CREATE PROJECT แล้ว ก็จะได้หน้า console ของ Project ที่เราสร้างไปfirebase4
    4. ให้เลือกเมนู Database จากนั้นไปที่ Tab RULES เพื่อเข้าจัดการ users authorized ของการเข้าถึงของมูล เบื้องต้นเราจะอนุญาตให้คนที่เรียกเข้าถึงข้อมูลได้หมดทั้ง Read และ Write ข้อมูลได้ โดยแก้ไขโค๊ดตามนี้แล้ว กดปุ่ม PUBLIC เพื่อบันทึกการเปลี่ยนแปลง
      //แก้ไขจาก 
      {
        "rules": {
          ".read": "auth != null",
          ".write": "auth != null"
        }
      }
      
      //เป็น
      
      {
        "rules": {
          ".read": true,
          ".write": true
        }
      }
    5. กลับมาที่ Tab Data เพื่อลองสร้างข้อมูลกัน โดยคลิกที่เครื่องหมาย + firebase6
    6. เพิ่มข้อมูลตามนี้ จากนั้นกดปุ่ม ADD ก็จะได้ข้อมูลที่เราเพิ่มไปfirebase7
    7. ต่อไปจะมาเขียนโค๊ดกันกดไปที่เมนู Home Overview ของ Project ที่เราสร้าง และ คลิกเลือกที่ Add Firebase To Your web appfirebase8
    8. ระบบแสดงหน้าจอ firebase9
    9. ให้ 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>
      
    10. ผลการทำงานของโปรแกรมfirebase10
    11. ลองทดสอบการทำงานว่าข้อมูลอัพเดท Realtime แบบที่เขาอวยจริงๆ ไหม ผมก็ทดสอบเปิด Browser 2 Tab โดย Tab แรกจะเปิดหน้า Database เพื่อเตรียมเพิ่มข้อมูล อีก Tab ผมเปิดหน้า App ของเราเพื่อรอดูผลที่เปลี่ยนแปลงfirebase14
    12. ผลการทดสอบ ข้อมูลถูกเพิ่มเข้ามาที่หน้า app ของเราโดยที่เราไม่ได้ refresh page เลย เยี่ยมไปเลยใช่ไหมครับfirebase15




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

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

 

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

ช่วงนี้เริ่มศึกษา Google Maps API เพื่อที่จะมาใช้กับ Project ของตัวเองเข้าไปดู Tutorial การเรียกใช้งาน

ก็เลยงานลองลงมือเขียนการดึง Map แบบง่ายแล้วมันใช้งานได้ดี ก็เลยอยากที่จะมาแบ่งปันโค๊ดง่ายๆนี้กับเพื่อน ๆ

มาเริ่มกันเลย

ขั้นแรก จำเป็นต้องมี Account Gmail กันก่อน หลังจากนั้นเข้าไปสร้าง API_KEY ของ Map

เข้าไปที่ credentials console เพื่อเข้าไปสร้าง API_KEY

key-console

กด Create Credentials เลือก API Key

key-console-1

ระบบจะสร้าง KEY มาให้ 1 ชุด

key-console-2

เสร็จสิ้นการสร้าง API_KEY




ต่อไปเขียนโค๊ดกัน

<!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>

หลังจาก Run ทดสอบ

map-code-1

map-code-2

map-code-3

เหล่านี้เป็นตัวอย่างง่าย ๆ แต่ก็สามารถเอาไปต่อยอดทำ Project ได้ไม่มาก็น้อย บทความนี้ฝากไว้เท่านี้ครับ