AngularjsDeveloperMean StackMongoDB

เตรียมความพร้อม AngularJS กับ MongoDB ผ่าน MongoLab

บทเรียนนี้เป็นการเตรียมความพร้อมสำหรับการใช้ MEAN Stack ที่กำลังฮิตกัน โดยจะเป็นการใช้ AngularJS ร่วมกับ MongoDB ผ่าน Service ฟรีของอย่าง MongoLab.com 

ก่อนจะเข้าบทเรียนอยากให้ศึกษา AngularJS กันก่อนที่บทเรียนเหล่านี้ครับ https://www.daydev.com/category/developer/angularjs

ทีนี้ก็มาพูดเรื่องของ Database แบบ NoSQL กันอย่างเจ้า MongoDB ดูหน่อย เกริ่นก่อนว่าเจ้า MongoDB นั้นเป็นฐานข้อมูลประเภท Open-Source Document Database คือไม่มี relation หรือความสัมพันธ์ของ Table แบบที่ใช้ SQL ทำการ Query ทั่วๆไปแล้วเรียกข้อมูลออกมา ข้อมูลของ MongoDB นั้นจะเป็นรูปแบบ JSON เก็บค่าเป็น Key และ Value ซึ่งเราจะต้องทำการเรียก รับส่ง หรือแก้ไขผ่าน Key Value เท่านั้นครับ

Screen Shot 2558-10-25 at 2.59.26 PM

หากต้องการติดตั้ง MongoDB บนเครื่องคอมพิวเตอร์ของเรานั้นต้องติดตั้งผ่าน HomeBrew (http://brew.sh/) โดย run คำสั่งผ่าน Terminal หรือ Command Prompt ตามนี้ครับ

brew install mongodb

ตามภาพเราจะทำการติดตั้งทันที

Screen Shot 2558-10-24 at 9.37.19 PM

เมื่อติดตั้งเรียบร้อยแล้วจะได้ผลลัพธ์ตามนี้

Screen Shot 2558-10-24 at 9.40.03 PM

แปลว่าเราพร้อมที่จะใช้งาน MongoDB ได้แล้วในเครื่องของเราครับ ซึ่งเดี๋ยวจะมาอธิบายให้แบบละเอียดอีกทีใน MEAN Stack Series ที่กำลังจัดทำอยู่

ระหว่างนี้แนะนำให้ลองไปเล่น บริการหนึ่งฟรีๆ ของเจ้า MongoDB กันครับบนเว็บไซต์ http://www.mongolab.com

Screen Shot 2558-10-24 at 9.42.17 PM

ให้เราทำการ Sign up สมัครสมาชิกและ Verified Email Address ของเราให้เรียบร้อย เลือกใช้ Package 500 MB SANDBOX แบบฟรีไปก่อนครับ

Screen Shot 2558-10-24 at 9.45.19 PM

ในตัวอย่างเลือก Google Cloud Platform แบบ FREE ครับ ตั้งชื่อ Database Name ของเราครับ

Screen Shot 2558-10-24 at 9.46.25 PM

เมื่อเราสร้างเสร็จแล้วเราจะพบหน้าจอ console แบบนี้ครับ

Screen Shot 2558-10-24 at 9.46.45 PM

วิธีการใช้งานเราต้องไปสร้าง User และ Password ของ Database เสียก่อนเพื่อใช้ในการ Connect

Screen Shot 2558-10-24 at 9.56.30 PM

เวลาจะเชื่อมต่อ ฐานข้อมูลให้เราทำตาม Guide Line ข้างบนที่อธิบายครับเปิด Terminal แล้วพิมพ์

% mongo <<URLที่ระบบให้มา:PORT>>/<<ชื่อฐานข้อมูล>> -u <<ใส่Username>> -p <<ใส่Password>>

Screen Shot 2558-10-24 at 9.56.45 PM

เข้าระบบเป็นที่เรียบร้อยแล้ว ทีนี้การทำงานของ Database แบบ No SQL นั้นเราต้องทำการสร้าง Collection ขึ้นมาในตัวอย่างตั้งชื่อ mynewcollection ขึ้นมาครับ ผ่าน Terminal

db.mynewcollection.insert({"id":1,"title":"Memories of Murder (2003)","genre":"Triller"})

เป็นคำสั่งในการสร้าง mynewcollection ขึ้นมาแล้วทำการ Insert ส่วนของ Key และ Value ลงไปในตัวอย่างคือ JSON ของ id คือ 1 และ Key ที่ชื่อ Title มี Value ว่า Memories of Murder (2003) และ genre ว่า Triller

Screen Shot 2558-10-24 at 9.58.59 PM

ลองทดสอบใส่ insert ไปอีกสัก 1 ชุดครับ แล้วไปเปิดดูใน MongoLab จะเห็นว่าเรามีข้อมูล ปรากฏดังตัวอย่าง

Screen Shot 2558-10-24 at 10.04.43 PM

เมื่อกดดูก็จะเห็นรายละเอียดของมัน

Screen Shot 2558-10-24 at 10.04.19 PM

หากเราต้องการ Query เพื่อดูว่ามีอะไรอยู่ในชุดข้อมูลนั้นใน Terminal หรือ MongoDb console ก็ใช้คำสั่งนี้ครับ

db.mynewcollection.find()

เราก็จะเรียกข้อมูลออกมาแบบนี้ครับ

Screen Shot 2558-10-24 at 10.08.15 PM

 

ก็จะเห็นแล้วว่า ระบบการจัดการของส่วน MongoDb ของ MongoLab นั้นไม่ยากเท่าไร ทีนี้เราต้องการแสดงผลของข้อมูลแบบ JSON ที่เป็น HTTP ผ่านการเรียก API ครับ เราต้องเปิดใช้งาน API ก่อน

Screen Shot 2558-10-24 at 10.17.07 PM

ไปที่เมนู “ACCOUNT” ที่มุมขวาสุด เมื่อเข้าไปแล้วไปเปิดระบบ API ด้านล่างตามรูปทันทีครับ

Screen Shot 2558-10-24 at 10.18.47 PM

เมื่อเปิดระบบแล้วเรามาลองของกันหน่อยดีกว่าครับ เปิด Web Browser ขึ้นมาแล้วพิมพ์ URL ตามนี้ครับ ให้เราใช้ API Key ที่อยู่ในเว็บส่วนของหน้า “ACCOUNT” เป็นตัวอ้างทุกครั้ง

https://api.mongolab.com/api/1/databases?apiKey=<<KEY>>

ตัวอย่างของผม จะเรียกข้อมูลใน collection ชื่อ “mynewcollection” ที่สร้างขึ้นในฐานข้อมูล “snoww” ก็จะเรียกดังนี้ครับ

https://api.mongolab.com/api/1/databases/snoww/collections/mynewcollection?apiKey=ใส่APIKEY

Screen Shot 2558-10-24 at 10.20.11 PM

เมื่อมีการเรียกใช้แล้วต่อไปก็คือการเรียกใช้งานผ่าน AngularJS และ Node.JS ครับ ติดตามตอนต่อไปได้เลย

ก่อนจะเข้าบทเรียนอยากให้ศึกษา AngularJS กันก่อนที่บทเรียนเหล่านี้ครับ https://www.daydev.com/category/developer/angularjs

Asst. Prof. Banyapon Poolsawas

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

Related Articles

Back to top button
Game & Mobile Development AR VR XR
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Adblock Detected

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