Google Apps – Page 6 – CoP PSU IT Blog

การใช้งาน Google Drive API ด้วย Google Client Library for Python

September 6, 2017 13:45

ในบทความนี้ จะแนะนำวิธีการเขียน Python เพื่อติดต่อกับ Google Drive API ทาง Google Client Library ซึ่ง จะใช้ REST v2 [1] เนื่องจาก ใน REST v3 ยังหาทางแสดง Progress ไม่ได้ (หากได้แล้วจะมา Update นะ) สิ่งต้องมี Python 2.6 ขึ้นไป PIP Package Management Tool เครื่องต้องต่อ Internet ได้ แน่นอน มี Google Account ขั้นที่ 1: เปิดใช้ Drive API เปิด URL https://console.cloud.google.com แล้วคลิก Select a project จากนั้นคลิกปุ่ม + เพือสร้าง Project ตั้งชื่อ Project แล้วคลิก Save เลือก Project ที่สร้างขึ้น เลือก API Library ที่ต้องการ ในที่นี้คือ Google Drive API แล้วคลิก Enable จากนั้น Create Credentials เลือกชนิดเป็น OAuth Client ID แล้วกรอกข้อมูลดังนี้ สร้าง Consent Screen เลือก Application Type เป็น Web Application, ระบุ Name (จะแสดงตอนขอ Permission) แล้วตั้งค่า URL ทั้ง 2 อันเป็น http://localhost:8080 และ สุดท้าย คลิก Download ก็จะได้ไฟล์ JSON มา ส่งนี้จะเรียกว่า “Client Secret File” ให้เก็บไฟล์ไว้ใน Directory เดียวกันกับที่ต้องการจะเขียน Python Code โดยสามารถแก้ไขเปลี่ยนชื่อ เช่น ตั้งเป็น client_secret.json ขั้นที่ 2: ติดตั้ง Google Client Library ติดตั้งด้วย pip ตามคำสั่งต่อไปนี้ pip install –upgrade google-api-python-client ขั้นที่ 3: เขียน Code เพื่อติดต่อ Drive API จาก Python Quickstart [1] เป็นการเริ่มต้นที่ดีมาก เราสามารถนำ Code มาเป็นจุดเริ่มต้นได้ โดยตัวอย่างจะทำการติดต่อไปยัง Google Drive แล้ว List รายการของไฟล์ 10 อันดับแรกออกมา ตัวอย่างที่ Google ให้มา จะอ้างอิงไปยัง Credentials Path ไปยัง directory “.credentials” ใน “Home Directory” ของผู้ใช้ แต่ในตัวอย่างที่จะแสดงต่อไปนี้ ได้แก้ไขให้ “Client Secret File” อยู่ที่ directory เดียวกับ python file และเมื่อทำการ Authorization แล้วก็จะได้ “Credential File” มาเก็บไว้ที่เดียวกัน Code ต้นฉบับ สามารถดูได้จาก https://developers.google.com/drive/v2/web/quickstart/python ในที่นี้จะเปลี่ยนเฉพาะส่วนที่ต้องการข้างต้น และ เขียน Comment เพื่ออธิบายเพิ่มเติมเป็นภาษาไทย (ซึ่งไม่สามารถเขียนลงไปใน Python Code ได้) โดยตั้งชื่อไฟล์ว่า listfile.py from __future__

การปรับเปลี่ยนรูปแบบการแสดงผลเส้นทางระหว่างพิกัดจุดบนแผนที่ Google Map APIs ด้วย DirectionsTravelMode

July 15, 2017 15:35

ก่อนที่เราจะไปเริ่มเนื้อหาของบทความี้ ผู้เขียนต้องขอท้าวความเดิมตอนที่แล้วของบทความก่อน ซึ่งผู้เขียนได้พูดถึงวิธีการแสดงผลเส้นทางทางระหว่างพิกัดจุดบนแผนที่ Google Map APIs ด้วย DirectionsService ในเบื้องต้นไว้ (สามารถศึกษาเพิ่มเติมได้จากบทความ : การแสดงเส้นทางระหว่างพิกัดจุดบนแผนที่ Google Map APIs ด้วย DirectionsService ในเบื้องต้น ) สำหรับในบทความนี้ผู้เขียนจึงอยากต่อยอดการทำงาน และเพิ่มลูกเล่นให้กับการแสดงผลแผนที่ด้วยการปรับเปลี่ยนการกำหนดรูปแบบการแสดงผลของเส้นทางให้ผู้เยี่ยมชมเว็บไซต์ ซึ่งเราจะให้ผู้ใช้สามารถเลือกรูปแบบในการแสดงผลได้ว่า ต้องการดูเส้นทางในรูปแบบใดตามรูปแบบ Mode ที่ผู้ใช้เลือกมา เช่น เส้นทางเดิน ทางถนน หรือขนส่งสาธารณะ เป็นต้น โดยวิธีการดังกล่าวนี้เหมาะกับเว็บไซต์ที่มีความเกี่ยวข้องกับความต้องการที่ต้องการทราบเส้นทางในแต่ละรูปแบบ เพื่อเป็นประโยชน์ในการนำไปประยุกต์ใช้กับงานของแต่ละท่านได้ค่ะ ตัวอย่างผลลัพธ์ที่ได้จากบทความที่แล้ว ซึ่งจากตัวอย่างโค้ดในบทความที่แล้ว การกำหนด DirectionsTravelMode เป็น DRIVIING ซึ่งในความเป็นจริงแล้วยังมีรูปแบบอื่นๆให้เลือกใช้ด้วยกันทั้งหมด 4 รูปแบบ ดังนี้ DRIVING (Default):เป็นโหมดตั้งต้นให้หากไม่ได้มีการกำหนดไว้ ซึ่งเป็นโหมดที่แสดงเส้นทางการขับขี่ด้วยยานพาหนะ BICYCLING: เป็นโหมดสำหรับเส้นทางที่เตรียมไว้สำหรับผู้ขับขี่จักรยาน TRANSIT: เป็นโหมดสำหรับแสดงเส้นทางระบบขนส่งสาธารณะ เช่น รถบัส รถไฟ หรือแม้แต่เครื่องบิน เป็นต้น WALKING: เป็นโหมดสำหรับแสดงเส้นทางการเดินถนน ซึ่งผู้เขียนจะขอยกตัวอย่างในส่วนของการเลือกรูปแบบเส้นทางและผลลัพธ์ของแต่ละรูปแบบ ดังตัวอย่างโค้ดต่อไปนี้ การกำหนดรูปแบบของเส้นทางในการแสดงผลบนแผนที่ โค้ด Javascript <script type=”text/javascript”> function initialize() { // ประกาศเรียกใช้งาน DirectionsService เพื่อการแสดงผลให้มีลักษณะเป็น Global window.directionsService = new google.maps.DirectionsService(); window.directionsDisplay = new google.maps.DirectionsRenderer(); var map; var bounds = new google.maps.LatLngBounds(); var mapOptions = { mapTypeId: ‘roadmap’ }; // แสดงผลแผนที่ในหน้าจอตาม Element ที่กำหนด map = new google.maps.Map(document.getElementById(“map_canvas”), mapOptions); map.setTilt(45); // กำหนดพิกัดจุดให้กับจุดเริ่มต้นและเส้นสุด window.markers = [ [‘Place1’, 51.501546, -0.142000], [‘Place2’, 51.512051,-0.091225] ]; // ให้แสดงผลสิ่งที่ตั้งค่าไว้ในพื้นที่แผนที่ที่กำหนด directionsDisplay.setMap(map); // กำหนดค่าเริ่มต้นของรูปแบบให้เป็นเส้นทางการเดิน (walking mode) calcRoute(); } // เป็นฟังก์ชั่นในการคำนวณเส้นทางระหว่างสองจุดพิกัดบนแผนที่และเลือกกำหนดค่า Mode ในการแสดงผล function calcRoute() { var selectedMode = document.getElementById(‘travelType’).value; var request = { origin: new google.maps.LatLng(markers[0][1], markers[0][2]), destination: new google.maps.LatLng(markers[1][1], markers[1][2]), //// //กำหนดรูปแบบการแสดงผลเส้นทางโดยเริ่มต้นให้เป็นเส้นทางการเดิน(ตามรายการแรกที่เลือก) travelMode: google.maps.TravelMode[selectedMode] }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); } </script> ส่วนของการแสดงผลใน body <body> <div id=”map_wrapper”> <div id=”map_canvas” class=”mapping”></div> </div> <div id=”travel_selector”> <p><strong>Mode of Travel: </strong> <select id=”travelType” onchange=”calcRoute();”> <option value=”WALKING”>Walking</option> <option value=”BICYCLING”>Bicycling</option> <option value=”DRIVING”>Driving</option> <option value=”TRANSIT”>Transit</option> </select></p> </div> </body> ผลลัพธ์ในแต่ละรูปแบบ แบบที่ 1 DRIVING Mode : แบบที่ 2 BICYCLING Mode:

การแสดงเส้นทางระหว่างพิกัดจุดบนแผนที่ Google Map APIs ด้วย DirectionsService ในเบื้องต้น

July 15, 2017 13:21

หลังจากที่ก่อนหน้านี้ ผู้เขียนเคยได้มีโอกาสศึกษาบทความเกี่ยวกับความสามารถของ Google Map APIs มาบ้างแล้วนั้น ผู้เขียนเห็นว่าเรื่องเกี่ยวกับแผนที่นับเป็นอีกหัวข้อที่น่าสนใจในการพัฒนาเว็บไซต์ในปัจจุบัน โดยเฉพาะเว็บไซต์ที่มีส่วนเกี่ยวข้องกับสถานที่ และที่ตั้ง เพราะถือเป็นการเพิ่มลูกเล่นให้มีความตื่นตาตื่นใจยิ่งขึ้น โดยความสามารถของแผนที่ที่ใน Google Map APIs มีมาให้ใช้กันได้ในหลายรูปแบบ ขึ้นอยู่กับความต้องการของผู้พัฒนาแต่ละคน อาทิ การกำหนดพิกัดจุด การแสดงเส้นทาง การค้นหาละติจูด-ลองจิจูดจากการคลิกบนแผนที่ หรือจนกระทั่งการดึงพิกัดมาจากฐานข้อมูลเพื่อมาแสดงผล เป็นต้น โดยในความเป็นจริงแล้ว ลูกเล่นเกี่ยวกับการทำงานกับแผนที่ยังมีอีกมากมาย แต่ในบทความนี้ ผู้เขียนจะขอพูดถึงในส่วนของการแสดงเส้นทางระหว่างจุดสองจุดในแบบเบื้องต้นเพื่อทำความเข้าใจก่อนนำไปประยุกต์ใช้ ดังนี้ การแสดงเส้นทางโดยเบื้องต้นเมื่อทราบจุดพิกัดละติจูด-ลองจิจูดบนแผนที่ อ้างอิงไฟล์ที่ใช้ในการทำงานร่วมกับ Google Map APIs <script src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&language=en” async defer></script> ส่วนของ Javascript ที่ใช้ในการแสดงเส้นทางระหว่างพิกัด 2 จุดบนแผนที่ <script type=”text/javascript”> /////////การกำหนดค่าละติจูด-ลองจิจูดระหว่าง 2 ตำแหน่ง ในที่นี้คือ มหาวิทยาลัยสงขลานครินทร์ และสวนสาธารณะหาดใหญ่ var markers = [ { “title”: ‘มหาวิทยาลัยสงขลานครินทร์’, “lat”: ‘7.006941’, “lng”: ‘100.498412’, “description”: ‘<b>มหาวิทยาลัยสงขลานครินทร์:</b> (อังกฤษ: Prince of Songkla University; อักษรย่อ: ม.อ.) เป็นมหาวิทยาลัยแห่งแรกในภาคใต้ของประเทศไทย ตาม พระราชบัญญัติมหาวิทยาลัยสงขลานครินทร์ พ.ศ. ๒๕๑๑ ก่อตั้งในปี พ.ศ. 2510 ต่อมา พระบาทสมเด็จพระปรมินทรมหาภูมิพลอดุลยเดชได้พระราชทานชื่อเมื่อวันที่ 22 กันยายน พ.ศ. 2510 จึงถือว่าวันที่ 22 กันยายนของทุกปี เป็นวันสงขลานครินทร์’ } , { “title”: ‘สวนสาธารณะหาดใหญ่’, “lat”: ‘7.042899’, “lng”: ‘100.507664’, “description”: ‘<b>สวนสาธารณะเทศบาลนครหาดใหญ่:</b> เป็นแหล่งพักผ่อนหย่อนใจของคนเมืองแห่งนี้ มีทัศนียภาพที่สวยงาม เต็มไปด้วยด้วยแมกไม้เขียวขจี มีอ่างเก็บน้ำขนาดใหญ่ สัตว์น้ำนานาชนิดมากมาย สมบูรณ์ด้วยธรรมชาติอันบริสุทธิ์ ที่รอคอยต้อนรับนักท่องเที่ยวให้ได้สัมผัสกับความร่มรื่นของพรรณไม้นานาชนิด’ } ]; ///////เป็นการกำหนดค่าต่างๆตอนที่ฟอร์มมีการโหลด window.onload = function () { //////กำหนดค่ากึ่งกลางการแสดงผลแผนที่ ระยะใกล้ และชนิดการแสดงผลของแผนที่ var mapOptions = { center: new google.maps.LatLng(markers[0].lat, markers[0].lng), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP }; //////ประกาศ Element ที่จะใช้ในการแสดงผล var map = new google.maps.Map(document.getElementById(“dvMap”), mapOptions); var infoWindow = new google.maps.InfoWindow(); var lat_lng = new Array(); ///สร้างตัวแปรอาร์เรย์เพื่อเก็บค่าละติจูด-ลองจิจูด var latlngbounds = new google.maps.LatLngBounds(); /// วนพื่อเก็บค่าละติจูด-ลองจิจูดในตัวแปรอาร์เรย์ และเก็บค่าในการพิกัดจุดของแต่ละจุดที่มี for (i = 0; i < markers.length; i++) { var data = markers[i] var myLatlng = new google.maps.LatLng(data.lat, data.lng); lat_lng.push(myLatlng); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: data.title }); latlngbounds.extend(marker.position); //////กำหนดเมื่อมีอีเวนต์คลิก ให้แสดงผลรายละเอียดที่กำหนดไว้ในตัวแปรของ marker ที่กำหนดไว้ในแต่ละตำแหน่ง (function (marker, data) { google.maps.event.addListener(marker, “click”, function

[GAFE] ใช้ Google Forms เพื่อ Upload ไฟล์ได้แล้ว

February 20, 2017 14:45

Google Forms เป็นเครื่องมือในการสร้างแบบสำรวจ แบบสอบถาม และแบบทดสอบที่ใช้งานได้ง่าย ใช้งานได้อย่างกว้างขวาง แต่ที่ผ่านมา ก็มีข้อจำกัดที่ยังด้อยกว่าการสร้าง Web Form นั่นคือ การใช้งาน Google Forms เพื่อ Upload ไฟล์ เช่น แบบฟอร์มการรับสมัคร แล้วต้องการให้ผู้ใช้ ส่งสำเนาบัตรประชาชนมาด้วย และแล้ว … ปลายปี 2559 Google Forms ก็เพิ่มความสามารถนี้เข้ามา แต่ “ให้ใช้เฉพาะ Google Apps” เท่านั้น หมายความว่า ผู้ที่ใช้ Free Gmail Account จะไม่สามารถใช้งานได้ ขั้นตอนการใช้งาน สร้าง Google Forms ด้วย Google Apps Account สร้างคำถามตามปรกติ แล้วในส่วนของการ Upload ไฟล์ คลิก Option ของชนิดของคำถามแล้วเลือกเป็น File Upload จากนั้นยอมรับเงื่อนไข โดยคลิก Continue จากนั้น สามารถ กำหนดขนาดสูงสุดของไฟล์ได้ กำหนดชนิดของไฟล์ก็ได้ คลิก แล้ว Apply กำหนดจำนวนของไฟล์ที่จะ Upload ก็ได้ เมื่อมีผู้ส่งไฟล์เข้ามา ก็จะเก็บไว้ใน Google Drive ขึ้นต้นด้วยชื่อไฟล์ แล้ว มีชื่อ (ตาม Email address) ของผู้ส่ง แต่ไม่ต้องห่วง หากมีการส่งชื่อไฟล์ซ้ำกัน จากคนๆเดียวกัน ไฟล์ใน Google Drive จะแยกจากกันด้วย Unique ID เราสามารถเห็นความแตกต่างได้จากเวลา และในส่วนของ Response ก็จะมองเห็นว่า ใครส่งไฟล์อะไรมา ครับ

การค้นหาสถานที่ด้วย Places search box และแสดงผลภาพจากข้อมูล Street View บน Google Maps

January 12, 2017 16:34

ความเดิมจากตอนที่แล้วของบทความ “การดึงค่าละติจูดและลองจิจูดของสถานที่ด้วย Places search box บน Google Maps” เพื่อแก้ปัญหาในการดึงค่าละติจูด-ลองจิจูดจากชื่อสถานที่ที่ผู้ใช้พิมพ์ค้นหาไว้ โดยมีการนำ “Places search box” มาใส่ไว้ในแผนที่ที่เราต้องการแทนนั้น ถือเป็นตัวช่วยให้กับผู้ใช้ในระดับหนึ่ง แต่สำหรับในบทความนี้ ผู้เขียนจะขอต่อยอดความรู้ดังกล่าว โดยได้ศึกษาและนำวิธีการแสดงผลภาพจากข้อมูล Street view มาประยุกต์ใช้ร่วมด้วย เพื่อให้ผู้ใช้สามารถมองเห็นสถานที่จริงที่เลือกได้จากแผนที่ได้ด้วย ซึ่งจะยิ่งช่วยอำนวยความสะดวกให้กับผู้ใช้ ทำให้ผู้ใช้สามารถตรวจสอบได้ว่าสถานที่ดังกล่าวเป็นสถานที่ที่ต้องการจะดึงค่าละติจูด-ลองจิจูดจริงหรือไม่ได้อีกทางหนึ่งนั่นเอง ซึ่งวิธีการบางส่วนจะขอยกยอดมาจากบทความก่อนหน้านี้ เกี่ยวกับเรื่องการดึงค่าละติจูด-ลองจิจูดจากการค้นหาโดยใช้ Places search box และจะขอเพิ่มเติมความสามารถในการแสดงผลภาพ Street View รวมทั้งสามารถคลิกจุดพิกัดใหม่บนแผนที่ เพื่อค้นหาตำแหน่ง สถานที่ตั้ง และรายละเอียด รวมถึงภาพจาก Street View ได้อีกด้วย เพื่อให้การดึงค่าพิกัดใกล้เคียงความจริงมากที่สุด โดยมีวิธีการดังนี้ ส่วนของสไตล์ชีทในการแสดงผล ขึ้นกับการตกแต่งของผู้พัฒนาแต่ละท่าน <!—ส่วนของ Style Sheets-> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { width: 100%; height: 400px; } .controls { margin-top: 10px; border: 1px solid transparent; border-radius: 2px 0 0 2px; box-sizing: border-box; -moz-box-sizing: border-box; height: 32px; outline: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } #searchInput { background-color: #fff; font-family: Roboto; font-size: 15px; font-weight: 300; margin-left: 12px; padding: 0 11px 0 13px; text-overflow: ellipsis; width: 80%; } #searchInput:focus { border-color: #4d90fe; } </style> ส่วนของการอ้างอิง libraries เพื่อใช้งาน Google API <script src=”https://maps.googleapis.com/maps/api/js?key=AIzaSyCRbMoDPc_mTv3D3QPqe0Ar84nSvRhA8nk&libraries=places&callback=initMap” async defer></script> ส่วนของการประกาศค่าเริ่มต้นและตัวแปร รวมถึงการเรียกใช้งานฟังก์ชั่นเพื่อใช้ในการแสดงผล ฟังก์ชั่น initMap() ซึ่งจะเรียกใช้งานตอนเริ่มต้นโหลดหน้าจอขึ้นมา <script> var panorama; var map; var markers = []; /***** function ในการประกาศค่าเริ่มต้นให้กับแผนที่*****/ function initMap() { /***** ประกาศตำแหน่งพิกัดกึ่งกลางให้กับการแสดงผลแผนที่ ในที่นี้กำหนดเป็นกรุงเทพมหานคร*****/ var center_point = { lat: 13.7563309, lng: 100.50176510000006 }; var sv = new google.maps.StreetViewService(); /***** เป็นส่วนของการแสดงผลภาพจาก Street View *****/ panorama = new google.maps.StreetViewPanorama(document.getElementById(‘pano’)); /***** กำหนดรายละเอียดคุณสมบัติของแผนที่*****/ var map = new google.maps.Map(document.getElementById(‘map’), { center: {lat: center_point.lat, lng: center_point.lng}, zoom: 13, streetViewControl: false // เป็นส่วนที่ Set เพิ่มเติมจากปกติ }); sv.getPanorama({ location: