angularjs

เล่าประสบการณ์แข่งขัน Hackathon ครั้งแรกให้ชีวิต

เพิ่งผ่านพ้นไปไปกับงาน PWA Online Hackathon งานสำหรับนักพัฒนาสาย Web ที่จะสร้างสรรค์ผลงานในช่วงแค่ระยะเวลาแค่ 48 ชม. โดยเรียกว่าเปิดโอกาสให้นักพัฒนาทั่วไป ไม่ใช่แค่ภายในประเทศไทยแต่รวมถึงนักพัฒนาทั่วโลก โดยงานถูกจัดขึ้นเมื่อวันที่ 23 มิถุนายน 2560 20:00 น. – 25 มิถุนายน 2560 20:00 น.

PWA Online hackathon คืออะไร

PWA Online Hackathon เป็นการแข่งขัน Hackathon ที่ไม่ต้องมาเจอหน้ากันจริงๆ ต่างคนต่างทำอยู่บ้าน สร้าง Web Application เจ๋ง ๆ แล้วส่งมาแข่งกันผ่าน online Web Application ของใครเจ๋ง ก็รับรางวัลมากมายจากเราไปได้เลย

โดยงานนี้ได้ Sponsor  บริษัทใหญ่ ๆ หลายบริษัท

ของรางวัลเรียกได้ว่าจัดเต็มกันเลยที่เดียว

เมื่อได้สมาชิกในทีมครบ ซึ่งก็เหลือเวลาเตรียมตัวก่อนถึงวันแข่งขันจริง ประมาณ 2 สัปดาห์ ในระหว่างนี้ก็คุยกันผ่าน Social เพียงอย่างเดียว โดยสร้างกลุ่ม Line ขึ้นมา เพื่อนในทีมบางคนยังไม่เคยเห็นหน้ากันเลยด้วยซ้ำ จึงจำเป็นต้องให้มาพบหน้ากันสักครั้ง เพราะล้วนแต่ทำงานในบริษัทคนละแห่งกัน ก็เลยถือโอกาสช่วงเย็นหลังเลิกงาน นัดพบปะเจอหน้า

แน่นอนการแข่งขันย่อมมีกฏกติกา มาดูรายละเอียดกันหน่อย

กติกา
  • ทีมที่เข้าแข่งขันต้องมีสมาชิกตั้งแต่ 1 – 5 คน
  • เรามีเวลาให้ 48 ชั่วโมงสำหรับการสร้าง Web Application ห้ามสร้างก่อนเป็นอันขาด
  • ทุกทีม ต้อง push code ทั้งหมด ขึ้น GitHub อย่างสม่ำเสมอ ในช่วงเวลา 48 ชั่วโมง
  • งานของทุกทีมต้อง Host อยู่บน Firebase hosting เท่านั้น
  • เรามีกฏนิดหน่อยสำหรับ Web Application และทางกรรมการขออนุญาตตัดสิทธิสำหรับ Application ที่ทำผิดกฏ
  • ทางทีมผู้จัดงานจะส่งรายละเอียด เรื่องวิธีการส่ง Web application หลังจากที่ได้สมัครแล้ว

ดูรายละเอียดของกติกา ก็ไม่ได้มีอะไรที่มองดูแล้วว่าจะยาก เป็นห่วงเพียงเรื่องเดี่ยวคือ Firebase hosting ซึ่งในทีมก็ยังไม่เคยได้ลองใช้งานกันเลย

ต่อมาเรื่องกฏที่ต้องให้ความใส่ใจเป็นพิเศษ

กฏ
  • เราไม่อนุญาตให้ ทำ Backend หรือ API เองเป็นอันขาด
  • แต่มันจะไม่สนุกเลยถ้าใช้ API ไม่ได้เลย เราจึงยอมให้ใช้ API ที่เป็น Public และ “ฟรี” ได้ (API ที่เป็น Free plan นับเป็น ฟรีเหมือนกัน)
  • Frontend Library ต่าง ๆ ที่เปิดเป็น Public สามารถใช้งานได้ทั้งหมด
  • Web Application จะต้องมี Web App Manifest (สามารถ Add to home screen ได้สมบูรณ์) และ Service worker ติดตั้งอยู่
  • Web Application จะต้องใช้งานได้บางส่วนหากไม่ได้เชื่อมต่อ Internet

งานยากเลยสำหรับกฏบางข้อกับเวลา 48 ชม. ส่งรายละเอียดให้สมาชิกแบ่งงานกันไปคิด ทุกคนตั้งทำถาม “พวกเราจะทำเกี่ยวกับอะไรดี”

1 สัปดาห์ก่อนถึงวันแข่งขัน

นัดรวมตัวกันอีกครั้ง ครั้งนี้เป็นวันที่ต้องนำ Idea ของแต่ละคนมา Share กันแล้วว่าจะทำอะไรดีในช่วงระยะเวลาแข่งขันอันสั้นนี้ ได้ข้อสรุปว่าเราจะใช้ Web Navigator เป็นสิ่งหลัก โดย Interface Navigator นี้จะสามารถเรียก Device ของเครื่อง Client ที่ User ใช้งานอยู่นั้น โดยจะเรียก Feature ของ Hardware ได้หลายอย่างมาก เช่น Microphone , Camera ,Bluetooth ,Notification ,Audio ,Battery ,Geolocation เหล่านี้เป็นต้น จึงเลือกมาใช้เป็น Feature ของ Application ทีมเรา

จึงได้สรุป Feature หลัก ๆ ที่ตั้งใจว่าที่จะให้ Application เราต้องสามารถทำได้

  • Take photos ต้องถ่ายภาพได้
  • เก็บ Location (Latitude,Longitude) ของ User ที่ใช้งานได้
  • Google Map ต้องแสดงตำแหน่งของ User ที่ใช้งานได้บนแผนที่ พร้อมกับแสดงตำแหน่งของ User ที่เรียกใช้งาน App ได้ในบริเวณใกล้เคียง โดยแสดงเป็นตำแหน่ง Mark บน Google Map
  • แสดง Gallery รูปภาพของตัวเองได้
  • สามารถลงชื่อเข้าใช้งาน App ได้ด้วย Google Account , Facebook Account
  • แสดง Gallery รูปภาพของ User ที่ใช้งาน App โดยทำมาแสดงเป็น Feeds ข้อมูล โดยจะทำการกด Like ให้กับรูปนั้น ๆ ได้
  • มีการแจ้งเตือน User ให้กรณีที่มี User อื่นที่ถ่ายภาพในบริเวณใกล้เคียงได้
  • ส่ง Email แจ้งเตือน กรณีลงชื่อเข้าใช้งานในครั้งแรก

เมื่อสรุปขอบเขตของ Application ได้แล้วก็ลงมือ ออกแบบ Prototype หน้าจอก็ได้ออกมาหน้าตาแบบนี้

เนื่องจากเป็นการ Coding ข้ามวันข้ามคืนก็ต้องการสถานที่กบดานกัน ผมเลยเสนอสถาที่นี่เลย บ้านบางเขน ถ้าใครเคยได้ยินจะพอทราบว่าเป็นแหล่งพักผ่อนในแบบคนที่ชอบถ่ายภาพ และก็จะมี Zone ห้องแอร์สำหรับนั่งอ่านหนังสือ คุยงาน ถือว่าเหมาะมากสำหรับนั่งทำงานบรรยากาศเงียบสงบแอร์เย็น เพราะเสียค่าบัตรเข้าใช้บริการ 20 บาท (สามารถนำบัตรไปแลกน้ำเปล่าได้ 1 ขวด) ก็สามารถเข้าใช้บริการห้องอ่านหนังสือได้แล้ว พวกเราเลือกที่จะไปรวมตัวกันที่นี่

วันแข่งขัน

และแล้วก็มาถึงวันเริ่มแข่งขัน วันที่ 23 มิถุนายน 2560 20:00 น. ทีมเราลงความเห็นว่าจะผักผ่อนกันก่อนโดยจะไปเริ่ม เช้าวันเสาร์ 09:00 น.

เราแบ่งงานกันเป็นส่วน ๆ รับผิดชอบ เพราะด้วยการออกแบบแยกส่วนการทำงานแล้วจึงไม่ยากในการ Coding เท่าไหร่แต่ก็ติดปัญหาเป็นช่วง ๆ เพราะเป็นสิ่งที่ต้องเรียนรู้ใหม่เกือบทุกคน

โดยเราเลือกใช้ Angularjs และเลือก materializecss.com  นี้เป็นหลักในการ Implement App ในครั้งนี้

ในระหว่างที่แต่ละทีม Coding อยู่แต่ละทีมก็จะสามารถความเลื่อนไหวของทีมอื่น ๆ ได้แบบ Realtime เพราะทีมผู้จัดออกแบบการแสดงผลของคะแนนไว้แล้ว สามารถเข้าดูได้ตลอดเวลา

เกณฑ์การตัดสินมีคะแนนรวมของเครื่องมือที่ชื่อ Lighthouse  ที่จะค่อยวัดประสิทธิภาพแอพเราว่ามีคะแนนรวมเท่าไหร่โดยแบ่งการให้คะแนนออกเป็น 4 ด้าน

  • Progressive Web App
  • Performance
  • Accessibility
  • Best Practices

โดยทุกหัวข้อจะมีคะแนน 100 คะแนน ก็รวม ๆ แล้ว 400 คะแนนเห็นจะได้ซึ่งทีมเราก็ไม่น้อยหน้า ก็ต้องวัดประสิทธภาพด้วยเช่นกัน

ช่วงแรกเรามองคะแนนของให้ความสนใจกับเรื่อง Progressive Web App ซะส่วนใหญ่ และจะกลับมาปรับ Tune Performance ในภายหลังแต่ก็ไม่ทันเวลา แต่มองว่าเครื่องมือนี้ช่วยเราได้ในระดับนึง

เราใช้เวลาได้ไม่เต็มที่นั่งเพราะก็มองการแข่งครั้งนี้เป็นการเก็บประสบการณ์ไปก่อน ต้องขอบคุณทุกคนในทีมที่ช่วยกันได้อย่างเต็มที่

นี่คือตัวอย่างหน้าจอสุดท้ายก่อนหมดเวลา

 

06/27/2017 by แชร์ประสบการณ์ โปรแกรมมิ่ง

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

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

 

09/27/2016 by โปรแกรมมิ่ง

ตัวอย่างโค๊ดเรียก 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 ได้ไม่มาก็น้อย บทความนี้ฝากไว้เท่านี้ครับ

09/11/2016 by โปรแกรมมิ่ง

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

วงแหวนเว็บ

วงแหวนเว็บ