Tag: google api

  • อ่านข้อมูลจาก google sheet ด้วย API Service

    เมื่อมีการเก็บข้อมูลแบบสอบถาม ใน google form แล้วต้องการเอาข้อมูลจาก google sheet เพื่อมาตรวจสอบว่านักศึกษาหรือคนที่กรอกแบบสอบถามนั้น ได้ตอบแบบสอบถามไปรึยัง เพื่อนำมาตรวจสอบต่อกับเว็บไซต์หรือระบบของเราที่พัฒนาเอง เช่นนักศึกษาคนนี้กรอกแบบสอบถามรึยัง ถ้ากรอกแล้วจะสามารถดำเนินการต่อในระบบได้ ถ้ายังไม่กรอกต้องไปยังแบบสอบถามก่อน

    ขั้นแรก ต้องเปิดช่องทางการเข้าถึง Google sheet และกำหนดสิทธิ์ให้ Application ที่เราต้องการเข้าถึงข้อมูลนั้น ๆ ก่อน ไปยังลิงค์  https://console.developers.google.com/ และไปที่ปุ่มรูป Hamberger –> IAM & Admin –> Manage Resources

    จากนั้นจะแสดงหน้าจัดการ Resources ให้คลิกเมนู CREATE PROJECT จะแสดงดังรูป

    ตั้งชื่อ Project และคลิกปุ่ม CTREATE เมื่อสร้างแล้วจะแสดงดังรูป

    จากนั้นไปที่ ปุ่มรูป Hamberger –> APIs & Services –> Dashboard จะแสดงหน้า Dashboard ดังรูป

    ให้เลือกเมนู Credentials แล้วคลิกเมนู CREATE CREDENTIALS –> Service account

    สร้างเสร็จแล้วจะแสดงดังรูป จากนั้นคลิกแก้ไข

    จากนั้นคลิก ADD KEY –> Create new key จะเป็นการให้สิทธิ์การเข้าถึงให้กับผู้ใช้ กดปุ่ม CREATE

    จากนั้นแก้ไขไฟล์ JSON ที่โหลดมาให้เป็นชื่อ credentials.json และเปิดไฟล์ดังกล่าว copy ส่วนของ client_email ไว้ และนำไป set ให้เข้าถึง google sheet ที่เราต้องการ

    เปิด google sheet คลิกที่ปุ่ม Share และวาง client_email ที่เรา copy ไว้ จากนั้นคลิกปุ่ม Done

    เราก็จะมาเขียนโปรแกรมดึงข้อมูลกัน ในที่นี้ขอเขียน Python เนอะ เริ่มจาก install library ที่จำเป็นกันก่อนค่ะ เปิด command line แล้วรันคำสั่งนี้กันเลย

    pip install oauth2client gspread

    ที่แสดงในภาพข้างต้นแบบนั้น เนื่องจากเรา install ไปแล้วค่ะ ต่อไปเรามาเริ่ม code กันเล้ย อย่าลืม!! บันทึกไฟล์ไว้ที่เดียวกับ credentials.json เน้อ

    ที่สี่เหลี่ยมสีแดง คือ ลิงค์ของ google sheet ที่เราให้สิทธิ์การเข้าถึงไว้ เรียบร้อยมาลองรันกันดู

    ลืมให้ดูข้อมูลใน google sheet รูปด้านล่างเลยจ้า

    ถ้ารันไม่ได้ ให้ไปที่เมนู Library แล้วค้นหา API Library ของเรา แล้วคลิก Enable เรียบร้อยแล้วลองรันใหม่ดูค่ะ

  • เค้าเอาไฟล์ MP4 บน Google Drive ไปแสดงใน Video Player บนเว็บได้อย่างไร

    สมมุติว่า เรามีไฟล์วิดีโอเป็น .mp4 อยู่ไฟล์หนึ่ง อยู่ใน Google Drive ต้องการเผยแพร่ เฉพาะบน Website ของเราเท่านั้น จะต้องทำอย่างไร?

    Javascript video player

    สิ่งแรกที่ต้องมีคือ ตัว Video Player บนเว็บ ลอง Google ด้วยคำว่า “javascript video player” ดู มีหลายตัวให้เลือกใช้ แต่ในที่นี้ ขอทดลองกับ video.js (เว็บไซต์ https://videojs.com )

    คลิกที่ USE NOW ( https://videojs.com/getting-started/ )

    จากนั้น ลองสร้างไฟล์ test.html โดยเอา Code จาก Video.js CDN ไปแปะเลย

    <head>
  <link href="https://vjs.zencdn.net/7.6.5/video-js.css" rel="stylesheet">

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

<body>
  <video id='my-video' class='video-js' controls preload='auto' width='640' height='264'
  poster='MY_VIDEO_POSTER.jpg' data-setup='{}'>
    <source src='MY_VIDEO.mp4' type='video/mp4'> <!-- แก้ตรงนี้ -->
    <source src='MY_VIDEO.webm' type='video/webm'>
    <p class='vjs-no-js'>
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
    </p>
  </video>

  <script src='https://vjs.zencdn.net/7.6.5/video.js'></script>
</body>

    จาก Code นี้ JavaScript จาะเรียกไฟล์ .MP4 จากไฟล์ชื่อ MY_VIDEO.mp4 ซึ่ง ถ้าเอา test.html นี้ไปวางบน Web Server ก็หมายความว่า เราต้องมีไฟล์ MY_VIDEO.mp4 ด้วย

    ไฟล์ MP4 บน Google Drive

    ตัวอย่างเช่น เราอาจอัดคลิปวิดีโอการสอน อยากจะเผยแพร่บนเว็บไซต์ของหน่วยงาน ผ่าน JavaScript Video Player อย่าง video.js ข้างต้น ก็สามารถทำได้ดังนี้

    1. แชร์ไฟล์ดังกล่าว ให้เป็น Anyone with the link can View
    2. แล้ว copy link นั้นมา หน้าตาประมาณนี้

      https://drive.google.com/open?id=FILE_ID
    3. จะเห็นคำว่า id= FILE_ID ตรงนี้ให้ Copy เก็บไว้

    แต่การที่เราจะเอา Link นี้ไปใช้ใน Video Player ตรง ๆ ไม่ได้ เพราะมันเป็นการเรียกใช้ Google Drive ไม่ใช่การเรียก File Content

    GoogleAPI

    วิธีการที่จะ Get Content ของไฟล์ที่ต้องการออกมากจาก Google Drive สามารถเรียกผ่าน Google API ซึ่ง หากจะทำเองก็สามารถทำได้ มีพวก node.js ให้ใช้งานอยู่ แต่พบว่า สามารถเรียกใช้ www.googleapis.com ได้ โดยอ้างอิงจาก https://googleapis.github.io/

    ในที่นี้ จะเรียกผ่าน Google Drive API ใน Version 3 รูปแบบ URL จะเป็นดังนี้

    https://www.googleapis.com/drive/v3/files/FILE_ID?alt=media&key=API_KEY

    ในการใช้งาน ต้องการ 2 ส่วน

    • FILE_ID ได้จากการแชร์ไฟล์ข้างต้น
    • API_KEY ได้มาจากการสร้าง Credential บน Google Cloud Platform วิธีการทำตามนี้ https://cloud.google.com/docs/authentication/api-keys

    การใช้งาน Google API นั้น มีส่วนทั้งที่ต้องจ่ายเงิน และส่วนที่ใช้ฟรี แต่ถูกจำกัด Quota ในกรณี Google Drive API สามารถใช้ได้ฟรี แต่จะมี Quota อยู่ โดยดูได้จาก https://developers.google.com/drive/api/v3/about-sdk

    ประกอบร่าง

    เมื่อได้ FILE_ID และ API_KEY มาแล้ว ก็เอาไปใส่ใน Code ข้างต้น

    <head>
  <link href="https://vjs.zencdn.net/7.6.5/video-js.css" rel="stylesheet">

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

<body>
  <video id='my-video' class='video-js' controls preload='auto' width='640' height='264'
  poster='MY_VIDEO_POSTER.jpg' data-setup='{}'>
    <source src='https://www.googleapis.com/drive/v3/files/FILE_ID?alt=media&key=API_KEY' type='video/mp4'> <!-- เปลี่ยนตรงนี้ -->
    <source src='MY_VIDEO.webm' type='video/webm'>
    <p class='vjs-no-js'>
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
    </p>
  </video>

  <script src='https://vjs.zencdn.net/7.6.5/video.js'></script>
</body>

    หวังว่าจะเป็นประโยชน์ครับ

    Disclaimer: จุดประสงค์ของบทความนี้ เพื่อแนะนำวิธีการทำเท่านั้น โปรดนำความรู้นี้ไปใช้งานอย่างสร้างสรรค์นะครับ ผู้เขียนบทความไม่เกี่ยวข้องใด ๆ กับผู้นำไปใช้ทั้งสิ้น