DeveloperFeaturedJavaScriptLife StyleMarketing StrategyNewbieObject Oriented TechnologyProgramming LanguageThe Thinker

สร้าง Web Apps เรียกใช้งาน Dropbox Datastore API อย่างง่าย

บทเรียนเบื้องต้นในการสร้าง Web Application ประเภท Task Manager โดยใช้ Dropbox Datastore API มาพัฒนาร่วมกับ Javascript SDK ของ Dropbox อย่างง่ายสำหรับมือใหม่

ครั้งนี้จะพานักพัฒนามือใหม่ มาหัดใช้งาน Dropbox API กันบ้าง โดยในบทเรียนนี้จะเป็นการยืมใช้งาน Datastore API อย่างเดียวก่อน สำหรับเก็บข้อมูล Binary กรณีที่ต้องการสร้างโปรแกรมง่ายๆ ที่เก็บข้อมูลประเภท Text Binary อย่างเดียว ผ่าน Javascript และ HTML ครับ

เริ่มต้นพัฒนา

ก่อนอื่นต้องมีการเข้าสมัครเป็น Dropbox User ก่อนครับ ก็สมัครสมาชิกปรกติที่เว็บไซต์ http://www.dropbox.com ปรกติเลย

ต่อมาให้ไปที่เว็บไซต์ https://www.dropbox.com/developers ซึ่งเป็น Channels ของ นักพัฒนาโดยเฉพาะเพื่อทำการ Register Apps ของเรา และขอสิทธิเข้าถึง API ของ Dropbox ครับ

31-7-2556 10-17-17ใน ตัวอย่างนี้ จะเก็บข้อมูลแค่ Data อย่างเดียวดังนั้นให้เลือกเป็น Dropbox API app แล้วเรียก Option ด้านล่างเป็น Datastores only ครับ

31-7-2556 10-51-25

ทำการตั้งชื่อ App ที่เราจะสร้างไปเลยครับ ว่าจะตั้งชือว่าอะไรดี

31-7-2556 10-17-00

ยอมรับ Agreement ที่ทาง Dropbox เขียนไว้หน่อย นะครับ

ต่อมาให้เราปรับแต่งการเชื่อมต่อ App บน API ของเรากับหน้าเว็บไซต์ที่พัฒนาขึ้นเพื่อที่จะ ทำการขอสิทธิเข้าถึงข้อมูลผ่าน Oauth2 ครับ

31-7-2556 10-20-50

ในตัวอย่าง ผมต้องตั้งค่า OAuth ของผมให้มี Redirect_URI ไปที่ http://127.0.0.1/dotips ซึ่งเป็น URL สำหรับทดสอบของผม ที่ผมสร้างขึ้นมา รายละเอียดทีเหลือที่จำเป็นต้องใช้คือ App Key ครับ

ต่อมาให้ไปที่หน้า https://www.dropbox.com/developers/datastore เพื่อเลือกชุดพัฒนาครับ ในตัวอย่างนี้จะใช้ Javascript ก่อนครับ เราต้องไปดาวน์โหลด SDK ของ DropBox ตัวนี้มาใช้เลย

31-7-2556 11-48-31

แน่นอนว่าตัวอย่างของบทเรียนนี้คือ SDK Example ของ Dropbox DataStore API นั่นแหละครับ

ทำการ Extract ไฟล์ Zip แล้วเอาโปรเจ็คไปวางที่ Folder ของ Web App เราครับ ในตัวอย่างผมวางที่ http://127.0.0.1/dotips/ ครับ

ไปที่ Console แล้วเอา App Key มาใส่ลงใน Code ตัวอย่างในหน้า Web Apps เราครับ ในไฟล์ tutorial.js ครับ

ทดสอบลอง รัน หน้าเว็บไซต์ http://127.0.0.1/dotips/

31-7-2556 10-38-32

ทำการกด Access ผ่านปุ่ม Link to Dropbox ครับ

31-7-2556 10-38-47

ทำการ Allow ข้อมูลเพื่อเข้าถึงข้อมูลครับ หากเป็นตัวอย่างเว็บไซต์จริงๆ ทาง Dropbox จะอนุญาติแค่ URL ที่เป็น https:// หรือมี SSL ครับ

31-7-2556 10-39-08

ทำการ เพิ่มข้อมูล Task ที่เราจะทำลงไปเลยครับ

31-7-2556 10-39-42

มีกี่รายการ ที่ใส่ลงไป หรือบางรายการได้ทำไปแล้วก็สามารถ ขีดฆ่าสถานะได้ ครับ

คราวนี้ลองไปที่ Datastores Dashboard ของ API บน App ของเราจะเห็นว่า มีการเก็บข้อมูล Binary ของ Data เหล่านี้ไว้ อย่างละเอียด เลยครับ

31-7-2556 10-48-33

ถือว่าเป็นบทเรียนง่ายๆ สำหรับอธิบายนักพัฒนา มือใหม่กันครับ เผื่อใครที่สนใจการเรียกใช้ Datastore API ของทาง Dropbox อย่างง่ายๆ กัน ว่าแล้วก็ลองทำตามกันเลยดีกว่าครับ เผื่อใครจะมีไอเดีย Web App ที่น่าสนใจกว่าตัวอย่างนี้ครับ 😀

Tags

Banyapon Poolsawasd

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Back to top button
Close
Close

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน