ควบคุมอุปกรณ์ไฟฟ้าผ่าน Firebase Web Hosting

.

ควบคุมอุปกรณ์ไฟฟ้าผ่าน Firebase Web Hosting

อภิรักษ์ นามแถ่ง

aphirak112@gmail.com

งบประมาณ 1,800 บาท 

โครงงานนี้จะเป็นการนำเอา google firebase Web Hosting มาเก็บหน้าเว็บไซต์ของเรา สำหรับควบคุมอุปกรณ์เอาต์พุตและแสดงค่าเซนเซอร์จาก ESP-12E

 

ท่านผู้อ่านที่ติดตามวารสารของเราจะคุ้นชินกับการควบคุมอุปกรณ์ผ่านหน้าเว็บไซต์แบบนี้มาบ้างแล้ว การใช้งานจะใช้ Platform as a Services ที่ให้บริการเก็บข้อมูลและแสดงผล อาทิเช่น thingspeak และ NETPIE เป็นต้น เพื่อให้ผู้ใช้สามารถเชื่อมต่อกับอุปกรณ์ของเขาได้จากทุกที่ผ่านเครือข่ายอินเทอร์เน็ต หรือเรียกว่า Internet of Things (IoT)

ในโครงงานนี้ก็จะอยู่ในหมวดหมู่ของ IoT เช่นเดียวกัน เนื่องจากโดยรวมแล้วเป็นการสั่งงานอุปกรณ์จากผู้ใช้ผ่านเครือข่ายอินเทอร์เน็ต แต่การสร้างหน้าเว็บของเรานั้นจะค่อนข้างยากกว่าPlatform as a Services ทั่วไป ที่เพียงแค่เซตค่าไม่กี่จุดก็ได้หน้าเว็บสำหรับใช้งานแล้ว แต่หน้าตาจะไม่สามารถดัดแปลงให้เป็นไปตามที่เราต้องการสักเท่าไหร่ เพราะถูกทางผู้ให้บริการจำกัดไว้ ต่างจากโครงงานนี้ที่หน้าเว็บเราสามารถออกแบบเองได้หมด แต่ก็ต้องแลกด้วยความยุ่งยากเกี่ยวกับการเขียนโค๊ด แต่ถ้าเป็นผู้ที่สามารถเขียนโค๊ด html ได้อยู่แล้วคงไม่ใช่เป็นหา ข้อดีของการใช้ Firebase hosting คือท่านไม่จำเป็นต้องเสียเงินเช่า Host และจดชื่อ Domain nameก็มีเว็บไซต์ของตัวเองได้ แต่ข้อเสียก็คือ ท่านไม่สามารถตั้งชื่อเว็บไซต์ได้เอง ซึ่งจุดนี้ผู้เขียนคิดว่าก็ยุติธรรมดี

รูปที่ 1

รูปที่ 1 หน้าเว็บของ Firebase Hosting

Google Firebase คืออะไร?

Firebase เป็น Project ที่พัฒนาโดยบริษัทยักษ์ใหญ่อย่าง Google ถูกออกแบบมาให้เป็น API และ Cloud Storage สำหรับพัฒนา Realtime App ซึ่ง Firebase นั้นรองรับการทำงานร่วมกับ Modern Platform แทบทุก Platform (Angular, JavaScript, Node.js, iOS/OSX, Java/Android และ REST เป็นต้น) รวมถึงสามารถสร้างเว็บไซด์บน Web Hosting ได้โดยไม่ต้องเสียเงินสักบาท

หลาย ๆ ท่านคงจะรู้จักกับ Hosting หรือ Web Hosting มาบ้างแล้ว ซึ่ง Firebase Hosting ก็จัดว่าเป็น Web Hosting เหมือนกัน แต่จะมีส่วนที่แตกต่างกับ Web Hosting ทั่วไปที่มีให้เช่าอยู่ คือ Firebase Hosting ฟรีนั่นเองแต่ข้อเสียก็มีอยู่บ้าง คือ เราไม่สามารถตั้งชื่อเว็บไซต์ได้เอง ซึ่งทาง Firebase จะสร้างให้โดยจะอ้างอิงกับโปรเจคที่สร้าง (จะกล่าวในภายหลัง) และอีกข้อคือ ไฟล์ที่นำไปเก็บไว้บน Firebase Hosting จะต้องเป็น Static file อย่างเช่น ไฟล์ HTML, JavaScript, CSS หรือรูปต่าง ๆ ซึ่งจะไม่สามารถเอา php หรือภาษาที่ทำงานในฝั่ง Server Side Script ไปวางได้

เนื่องจากเป็น Hosting ที่ยอมรับแต่ Static file เพราะฉะนั้น จะเหมาะกับเว็บที่มีแต่ Front-end เท่านั้น เช่นเว็บที่ไว้แนะนำตัวเองง่ายๆ หรือเว็บธุรกิจส่วนตัว เป็นต้น ด้วยเหตุนี้ท่านสามารถเลิกเช่า Web Hosting ที่เสียเงินอยู่ย้ายมาใช้ Firebase Hosting แบบฟรีๆ ได้เลย หรือถ้าท่านมีชื่อ Domain อยู่แล้ว ก็สามารถกำหนดให้ Domain ชี้มายัง Firebase Hosting นี้ได้เลยเพื่อไม่เป็นการเสียเวลา เชิญอ่านต่อได้เลยครับ

รูปที่ 2

รูปที่ 2 หน้าต่าง Google Account

รูปที่ 3

รูปที่ 3 หน้าDialog สร้าง Project

เริ่มต้นใช้งาน Firebase Hosting

การจะใช้งาน Firebase Hosting ได้จำเป็นต้องมี Google Account เสียก่อน ซึ่งปัจจุบันหากท่านใช้สมาร์ทโฟนที่เป็นแอนดรอยด์อยู่ก็คงมี Account แล้ว หากท่านไม่มีก็ให้สมัครก่อนครับ การเปิดใช้งานFirebase Hosting สามารถเข้าไปที่ https://console.firebase.google.com และทำการ Sign-In ด้วย Google Account ดังรูปที่ 2

หลังจากนั้น คลิกที่ปุ่ม CREATE NEW PROJECT ก็จะพบหน้า Dialog ให้กรอกชื่อ Project name และเลือก Country/region (ดังรูปที่ 3)เมื่อเสร็จแล้วกดปุ่ม CREATE PROJECT ได้เลย ขณะนี้เราก็เข้ามาที่ส่วนของ Firebase Consoleแล้ว

โครงงานนี้จะเหมือนกับโครงงาน IoT ทั่วไป คือจะมีส่วนหลักๆ อยู่ 2 ส่วน คือซอฟต์แวร์กับฮาร์ดแวร์ ส่วนของฮาร์ดแวร์นั้นจะไม่ค่อยยุ่งยากสักเท่าไหร่นัก เนื่องจากวงจรไม่มีความซับซ้อนและอุปกรณ์ก็มีไม่เยอะ (ดังจะหล่าวในภายหลัง) แต่ความยุ่งยากจะตกไปอยู่ในส่วนของซอฟต์แวร์ ไม่ว่าจะเป็นซอฟต์แวร์ของ ESP-12E ที่เขียนด้วย Arduino IDE และซอฟต์แวร์ส่วนของไฟล์ html ที่เป็นหน้าเว็บที่เรา เพื่อไม่เป็นการเสียเวลา ลงมือทำขั้นตอนต่อไปกันเลยครับ

รูปที่ 4

รูปที่ 4 กระเป๋าที่ใช้สำหรับโครงงานของเรา

เตรียมไฟล์สำหรับงานของเรา

ก่อนอื่นเข้าไปดาวน์โหลดโปรแกรมได้ที่เว็บไซต์ http://electronics.se-ed.com/download เมื่อดาวน์โหลดมาแล้วจะเห็นว่าโปรแกรมถูกแบ่งออกเป็น 2 ส่วน คือ Arduino กับไฟล์ html หน้าเว็บไซต์ของเรา มาดูในส่วนของโปรแกรมฝั่ง Arduino กันก่อน

รูปที่ 5ก

 (ก) การแก้ไขสำหรับเชื่อมต่อ Wi-Fi  

รูปที่ 5ข

(ข) การแก้ไขสำหรับเชื่อมต่อกับ Firebase

รูปที่ 5 การแก้ไขซอร์สโค้ดฝั่ง ESP-12E

รูปที่ 6

รูปที่ 6 การดูค่า Host

รูปที่ 7

รูปที่ 7 การดูค่า Authentication

รูปที่ 8

รูปที่ 8 การแก้ไขค่าHost และ Authentication

ซอฟต์แวร์สำหรับ ESP12E

ESP-12E เป็นโมดูล Wi-Fi ที่มีสามารถโปรแกรมการทำงานลงบนหน่วยความจำได้ ทำให้เราสามารถนำมาใช้แทนไมโครคอนโทรลเลอร์ได้เลย และมีผู้พัฒนาให้สามารถนำมาใช้ร่วมกับ Arduino IDE ทำให้ง่ายต่อการใช้งาน เรียกว่าถ้าท่านเคยใช้ Arduino อยู่แล้ว ก็สามารถเขียนโปรแกรมสั่งงานควบคุมการทำงานของ ESP-12E ได้

ซึ่งในโครงงานนี้ผู้เขียนก็จะนำเอา Arduino IDE มาใช้งานร่วมกับ ESP-12E เขียนโค้ดเหมือนกับ Arduino ทั่วไป ซอฟต์แวร์ส่วนนี้จะอยู่ในกระเป๋า Arduino (อ้างอิงจากรูปที่ 4) แน่นอนว่าผู้เขียนจะต้องทำการแก้ไขซอร์สโค้ดบางส่วนเพื่อให้สามารถใช้ได้กับงานของท่าน การแก้ไขจะมีอยู่ 2 ส่วนหลักๆ คือ ส่วนการเชื่อมต่อกับ Wi-Fi และการเชื่อมต่อกับ Firebaseจากรูปที่ 5ก) บรรทัดที่ 13 จะเป็นชื่อและบรรทัดที่ 14 เป็นรหัสผ่านของ Wi-Fi ที่เราจะเชื่อมต่อ ในส่วนรูปที่ 5ข) บรรทัดที่ 54 เป็นชื่อ Host และ Authentication ของโปรเจคบน Firebaseของเรา

ค่า Host ที่เราต้องการนำมาแก้ไขในซอร์สโค้ดของเราจะอยู่ที่เมนูในส่วน DEVELOP ->Hosting-> DATA ดังแสดงในรูปที่ 6 ส่วนค่า Authentication จะอยู่ที่ Settings->Project Settings->DATABASE จากนั้นก็คลิ๊ก SHOW เพื่อให้สามารถเห็นชุดตัวอักษรของเรา ดังแสดงในรูปที่ 7 เมื่อได้ข้อมูลทั้งสองส่วนแล้วก็นำมาใส่ในซอร์สโค้ดของเรา ดังแสดงในรูปที่ 8 เมื่อได้แล้วให้อัพโหลดโปรแกรมเข้า ESP-12E เพื่อทำการทดลองขั้นตอนต่อไปได้เลย

รูปที่ 9

รูปที่ 9 วงจรสมบูรณ์

การทำงานของฮาร์ดแวร์

รูปที่ 9 เป็นวงจรสมบูรณ์ของโครงงานนี้ หัวใจหลักหลักของโครงงานนี้คือ ESP-12E ทำหน้ารับ-ส่งข้อมูลกับ Firebase แบบไร้สายผ่านเครือข่าย Wi-Fi โดยจะมีอินพุตเป็น VR1 และตัววัดอุณหภูมิ+ความชื้น (DHT11) ในส่วนของเอาต์พุตจะเป็นลักษณะของการ ON/OFF โดยใช้หน้าสัมผัสรีเลย์ ผู้ใช้สามารถนำไปเชื่อมต่อกับเครื่องใช้ไฟฟ้าได้เลย เพราะหากรีเลย์ทำงานจะมีแรงดันไฟ 220 โวลต์ออกที่เอาต์พุต มีฟิวส์ขนาด 5 แอมป์สำหรับป้องกันกระแสเกิน

การอ่านค่าอุณหภูมิและความชื้นจะใช้โมดูล DHT11 (Temperature and Humidity Sensor Module) ซึ่งเป็นโมดูลที่สามารถวัดอุณหภูมิและความชื้นบริเวณรอบๆ สื่อสารผ่านโปรโตคอล one-wire โดยมีคุณสมบัติเด่นดังนี้ คือ รองรับแหล่งจ่ายพลังงานได้ตั้งแต่ 3.3V – 5.5V, ให้ค่าความชื้นสัมพัทธ์ และอุณหภูมิ เป็นข้อมูลดิจิตอล จึงไม่ต้องการการสอบเทียบค่า, ใช้พลังงานต่ำ โดยขณะ standby จะใช้กระแสประมาณ 150 ไมโครแอมป์ และขณะแปลงสัญญาณหรือส่งข้อมูล ใช้กระแสประมาณ 2.5 มิลลิแอมป์ อย่างที่กล่าวไว้ว่าการสื่อสารเป็นแบบ one-wire ดังนั้นจึงใช้เพียงขาเดียวในการอ่านข้อมูล ซึ่งในโปรแกรมได้กำหนดไว้ที่ขา GPIO12 การอ่านค่าแรงดันความเข้มแสงจากการปรับ VR1 ใช้หลักการการแบ่งแรงดัน แรงดันที่ได้จะถูกแปลงสัญญาณอะนาลอกเป็นดิจิตอล (Analog-to-Digital Conversion : ADC) เข้าขา 1 (ขา A0) ของ ESP-12E

รูปที่ 10

รูปที่ 10 ลายวงจรพิมพ์ขนาดเท่าแบบ

รูปที่ 11

รูปที่ 11 ตำแหน่งการลงอุปกรณ์

รูปที่ 12

รูปที่ 12 ชุดประกอบของ ESP-12E

การประกอบ

รูปที่ 11 เป็นตำแหน่งการลงอุปกรณ์ของโครงงานนี้ จะสังเกตว่าลายวงจรนั้นก็มีเพียงด้านเดียวและการลงอุปกรณ์ก็ไม่ยุ่งยาก เนื่องจากอุปกรณ์มีน้อยชิ้นและส่วนมากเป็นอุปกรณ์ที่สามารถบัดกรีได้อย่างไม่ลำบากมากนัก แต่ถึงแม้ว่าอุปกรณ์น้อยชิ้นและการลงอุปกรณ์ก็ไม่ยุ่งยาก การลงอุปกรณ์ก็ควรเริ่มจากตัวที่มีความสูงน้อยที่สุดก่อน อาทิเช่น ลวดจั๊ม (อย่าลืมลวดจั๊มที่อยู่ใต้ตัวถัง ESP-12E ด้วย) และตัวต้านทาน เป็นต้น จากนั้นจึงไล่เรียงตามลำดับความสูงจนกระทั่งครบทุกตัว ในส่วนของ IC1 ควรต้องใส่ซ็อกเก็ตรวมถึงโมดูล ESP-12E ด้วย และเนื่องจากบอร์ด ESP-12E ที่ซื้อมาจะใส่คอนเน็กเตอร์ IDC แถวเดียวตัวผู้มาแล้ว (ดังรูปที่ 28) ดังนั้นทางฝั่งโครงงานเราจึงต้องใส่ซ็อกเก็ตเป็น IDC ตัวเมีย เพื่อป้องกันความเสียหายที่อาจจะเกิดขึ้น หากลงอุปกรณ์ผิดพลาด

เมื่อลงอุปกรณ์จนครบหมดแล้วให้ตรวจสอบแรงดันในวงจรทั้งหมดเสียก่อน โดยจ่ายไฟ 220 โวลต์ผ่าน CON5 จากนั้นให้นำโวลต์มิเตอร์มาวัดระหว่างขา VCCและ GND บนโมดูล ESP-12E สามารถดูตัวอักษรตำแหน่งขาที่สกรีนไว้บนบอร์ดได้เลย หากถูกต้องแรงดันที่ได้จะต้องเท่ากับ 5V ถ้าหากแรงดันเป็นไปตามที่กล่าวไว้แสดงว่าโครงงานเราพร้อมจะทดสอบการทำงานขั้นตอนต่อไปแล้ว

รูปที่ 13

รูปที่ 13

การโหลดโปรแกรมลงบน ESP-12E จะต้องสั่งให้ ESP-12E เข้าสู่โหมดการ Flash Firmware เสียก่อน ซึ่งการเข้าสู่สภาวะนี้จะต้องกำหนดให้ขา GPIO0 มีสภาวะเป็นลอจิก 0 หรือเชื่อมต่อลงกราวด์ก่อนจะป้อนแหล่งจ่าย ซึ่งในวงจรของเราได้ตระเตรียม SW1 และ SW2 ไว้สำหรับเข้าสู่โหมด Flash Firmware นี้ กล่าวคือ ท่านสามารถเข้าสู่โหมด Flash ได้โดยการกด SW2 ค้างไว้แล้วตามด้วยการกด SW1 เพื่อรีเซตตัว ESP-12E (ดังรูปที่ 13) เพียงเท่านี้ก็จะเป็นการเข้าสู่โหมด Flash Firmware แล้ว จากนั้นให้กดโหลดโปรแกรมจาก Arduino IDE

รูปที่ 14

รูปที่ 14 ข้อมูลส่วนอินพุตที่ ESP-12E ส่งขึ้นมา Firebase

รูปที่ 15

รูปที่ 15 ข้อมูลบน Serial monitor ของ Arduino IDE

รูปที่ 16

รูปที่ 16 การสร้าง key-value ในส่วน OUTPUT

รูปที่ 17

รูปที่ 17 key-value ที่สร้างเสร็จสมบูรณ์

ทดสอบการเชื่อมต่อกับ Firebase

หลังจากที่อัพโหลดโปรแกรมให้กับ ESP-12E และเชื่อมต่อกับโมเด็ม Wi-Fi ได้เรียบร้อย แสดงว่าขณะนี้ค่าอินพุตจาก ESP-12E ถูกส่งขึ้นไปเก็บไว้ที่ Firebase เรียบร้อยแล้ว ให้ท่านเข้าไปที่ส่วนของ Database -> DATA จะต้องมีข้อมูลแสดงที่ส่วน INPUT ดังรูปที่ 14ให้ลองเปิดดูข้อมูลบน Serial monitor ของ Arduino IDE ข้อมูลจะตรงกันกันดังรูปที่ 15

เมื่อได้ส่วนอินพุตแล้ว ต่อไปเราจะมากำหนดสภาวะของเอาต์พุตดูบ้าง โดยการสร้างตัวแปร key-value สำหรับกำหนดค่าเอาต์พุตแต่ละช่อง ผู้เขียนใช้ CH1, CH2, CH3 และ CH4 สำหรับควบคุมสภาวะเอาต์พุต 1-4 ตามลำดับ (ดังรูปที่ 16) การจะให้เอาต์พุต (รีเลย์) ทำงานจะต้องค่าเป็น 11 และถ้าจะให้สั่งงานให้เอาต์พุตหยุดทำงานจะต้องกำหนดเป็น 10 ดังแสดงในรูปที่ 17 ให้ผู้ใช้ทดสอบการสั่งงานเอาต์พุตโดยการเปลี่ยนค่า CH1-CH4 เพื่อดูว่าสามารถทำงานได้ถูกต้องหรือไม่ รวมถึงการปรับค่า VR1 และ DHT11เพื่อดูค่า INPUT ว่ามีการเปลี่ยนแปลงสอดคล้องกันตามความเป็นจริงหรือไม่ หากถูกต้องแสดงว่าโครงงานเราสามารถเชื่อมต่อกันกับ Firebase ได้สมบูรณ์แล้ว

การสั่งงานผ่านไฟล์ html

ในแง่การใช้งานจริง หากการสั่งงานเอาต์พุตและการดูค่าส่วนอินพุตตามดังที่กล่าวมาอาจจะไม่สะดวกมากนัก ดังนั้นเราจะมาสร้างไฟล์ HTML เพื่อให้สามารถดูรายละเอียดของสภาวะอินพุตและเอาต์พุตทั้งหมดได้ผ่านเว็บเบราว์เซอร์ และเนื่องจาก Firebaseเป็นWeb Hosting ด้วย เราก็จะอัพโหลดไฟล์ HTML ที่สร้างขึ้นนี้ไปไว้บน Firebase เพื่อให้สามารถเรียกใช้งานได้จากที่อื่นได้นั่นเอง

HTML หรือชื่อเต็มๆ ก็คือ Hypertext Markup Language เป็นภาษาประเภท Markup ที่ออกแบบมาเพื่อใช้ในการสร้างเว็บเพจ มีโครงสร้างการเขียนโดยอาศัยตัวกำกับ (Tag) ควบคุมการแสดงผลข้อความ รูปภาพ เสียง อื่นๆ ที่สามารถเรียกดูผ่านทางเว็บเบราว์เซอร์ได้ แต่ละ Tag สามารถระบุหรือควบคุมการแสดงผลของเว็บให้เป็นไปตามที่ผู้ออกแบบเว็บไซต์กำหนดไว้

ก่อนอื่นท่านจะต้องเข้าไปตั้งค่าเว็บเพจของท่านให้สามารถเข้าถึงได้ทั้งการอ่านและเขียน นอกจากการเข้าถึงผ่านหน้าเว็บ Firebase consoleซึ่งนั้นก็คือ เว็บเพจที่เรากำลังสร้างอยู่นั่นเอง ในส่วนนี้ให้เข้าไปที่ Database -> RULES -> PUBLISH ให้แกไขกฎ read และ write เป็น true ทั้งสองค่า ดังรูปที่ 18

รูปที่ 18

รูปที่ 18 การกำหนดสิทธิ์ในการอ่านและแก้ไขข้อมูล

ขั้นต้นเราจะสร้างไฟล์ index.html เป็นหน้าหลักของเรา ซึ่งจะเก็บไว้บนเครื่องคอมพิวเตอร์ของเราก่อน เพราะจะต้องแก้ไขโค้ดให้ตรงกับค่า Host ของแต่ละท่าน ไฟล์ตัวอย่างสำหรับบทความนี้ท่านได้ดาวน์โหลดมาแล้วก่อนหน้านี้(รูปที่ 4) ในส่วนของไฟล์เว็บของเราจะมีอยู่ 1 ไฟล์ (index.html) และ 3 กระเป๋า (css, img และ js) ส่วนที่จะต้องแก้ไขคือไฟล์ index.html ท่านสามารถเปิดด้วยโปรแกรมประเภท text editor ที่ติดมาพร้อมกับวินโดวส์ได้ อาทิเช่น Notepadหรือ WordPad เป็นต้น แต่การแก้ไขด้วยโปรแกรมดังกล่าวจะดูยากไปสักหน่อย ในบทความนี้ผู้ใช้ลงโปรแกรม Atom ที่เป็นโปรแกร text editor เช่นเดียวกัน แต่การแบ่งสีบรรทัดของ Atom ทำให้ดูได้ง่ายขึ้น ที่สามารถเข้าไปดาวน์โหลดมาใช้งานได้ฟรีๆ ที่เว็บ https://atom.io/

รูปที่ 19

รูปที่ 19 ตัวอย่างบรรทัดกำหนดชื่อ Host ในไฟล์ index.html ที่ต้องแก้ไข

รูปที่ 20

รูปที่ 20 เว็บเพจตัวอย่างที่ได้จากไฟล์ index.html

เมื่อเปิดขึ้นมาแล้วให้ท่านแก้ไขโปรแกรมในส่วนที่เป็นชื่อ Host ทั้งหมดให้เป็นของท่าน ซึ่งในตัวอย่างของผู้เขียนจะเป็น semifirebase.firebaseio.com ที่จะอยู่ในบรรทัดที่ 65, 69, 74, 78, 83, 87, 92, 96, 100 และ 118 เมื่อแก้ไขเสร็จแล้วให้เปิดไฟล์ index.html ด้วยโปรแกรมเว็บเบราว์เซอร์ เช่น Internet Explorer, Mozilla Firefoxและ Chrome เป็นต้น หากถูกต้องหน้าเว็บจะแสดงข้อมูลอินพุตและปุ่มสำหรับสั่งงานเอาต์พุตดังรูปที่ 19ให้ทดสอบการสั่งงานเอาต์พุตและการแสดงค่าอินพุต หากถูกต้องแสดงว่าเราเสร็จสิ้นขั้นตอนการสร้างเว็บเพจแล้ว

รูปที่ 21

รูปที่ 21 เข้าเมนู Hosting เพื่ออัพโหลดไฟล์เว็บเพจของเรา

รูปที่ 22

รูปที่ 22 หน้าDialog แนะนำการใช้งาน Hosting

รูปที่ 23

รูปที่ 23 หน้าต่างดาวน์โหลดโปรแกรม Node.js

รูปที่ 24

รูปที่ 24 ขั้นตอนการติดตั้ง Node.js

การอัพโหลดไฟล์ขึ้น Hosting

ทางด้านซ้ายของจอจะเห็นเมนูในส่วน DEVELOP ให้คลิกเข้าไปที่ Hosting(ดังรูปที่ 21) ครั้งแรกที่เข้ามาจะพบ Dialog แนะนำ ให้กดปุ่ม GET STARTED เพื่อเริ่มตั้งตั้งหน้าเว็บของเราต่อไปดังแสดงในรูปที่ 22

ในขั้นตอนต่อไปเป็นการติดตั้ง Firebase tools เนื่องการติดตั้ง Package ต่างๆ ของFirebase จะติดตั้งผ่าน npm ที่มากับ Node.js ดังนั้นหากในเครื่องของท่านยังไม่ติดตั้งโปรแกรม Node.js ให้ทำการติดตั้งเสียก่อน ไม่เช่นนั้นจะไม่สามารถติดตั้ง Firebase tools ได้ก่อนอื่นให้เข้าไปโหลดโปรแกรมที่เว็บไซต์ https://nodejs.org/enซึ่งเวอร์ชันล่าสุดที่ผู้เขียนใช้ คือ 6.6.0 (ดังรูปที่ 23) เมื่อดาวน์โหลดมาแล้วให้ดับเบิ้ลคลิ๊กติดตั้งจนเสร็จสิ้นตามขั้นตอนดังรูปที่ 24 เมื่อติดตั้งโปรแกรมNode.jsลงในคอมพิวเตอร์เสร็จแล้ว ก็เริ่มติดตั้ง Firebase tools ได้แล้ว โดยจะมีขั้นตอนดังรูปที่ 25

รูปที่ 25

รูปที่ 25 ติดตั้ง Firebase tools

รูปที่ 26

รูปที่ 26 การเปิด Command Prompt

รูปที่ 27

รูปที่ 27 การเปลี่ยน path ไปยังกระเป๋าเก็บไฟล์เว็บเพจ

รูปที่ 28

รูปที่ 28 Command Prompt แสดงเมื่อติดตั้ง Firebase tools สำเร็จ

รูปที่ 29

รูปที่ 29 หน้าต่างสอบถามความยินยอมในการเก็บข้อมูล

รูปที่ 30

รูปที่ 30 การยินยอมให้ RUN โปรแกรม

รูปที่ 31

รูปที่ 31 Firebase tools จะขอทำการเปิดหน้าเว็บไซต์

รูปที่ 32

รูปที่ 32 อนุญาตให้ google เข้าถึงข้อมูล

จากนั้นให้เปิด Command Prompt ขึ้นมา ด้วยการพิมพ์cmd บนช่อง Search Windows (ดังรูปที่ 26) หลังจากนั้นให้ใช้คำสั่งเพื่อเปลี่ยน path โดยให้ชี้ไปที่กระเป๋าที่เก็บไฟล์เว็บเพจเราดังรูปที่ 27 จากนั้นให้ติดตั้งFirebase tools ผ่าน npm ด้วยคำสั่ง 

  • npm install -g firebase-tools

  • npm update -g firebase-tools

เมื่อติดตั้งเสร็จเรียบร้อยและหากไม่มี Error เกิดขึ้นจะได้ดังรูปที่ 28 ขั้นตอนต่อไปเป็นการlogin เข้าสู่ Firebase ด้วยคำสั่ง

  • firebase login

ขณะนั้นจะมีข้อความขึ้นมาถามความยินยอมในการเก็บข้อมูลดังรูปที่ 29 ให้กดปุ่ม enter ผ่านได้เลย หากเครื่องของท่านมีการสอบถามความปลอดภัยจาก Firewall ก็ให้กดยินยอมดังรูปที่ 30 จากนั้น Firebase tools จะขอทำการเปิดหน้าเว็บไซต์ขึ้นมา (รูปที่ 31) เพื่อขอ Permission จากผู้ใช้งาน ขั้นตอนนี้ก็ให้อนุญาตเช่นเดียวกันดังแสดงในรูปที่ 32 เมื่อเสร็จสิ้นการ login แล้วที่หน้าเว็บไซต์และบน Command Promptจะแสดงข้อความแจ้งให้ทราบดังรูปที่ 33

รูปที่ 33

รูปที่ 33 Firebase แจ้งให้ทราบเมื่อการ login สำเร็จ

รูปที่ 34

รูปที่ 34 คำสั่งการInitial เว็บเพจ

ขั้นตอนต่อไปให้ Initial เว็บเพจของเราผ่านคำสั่งบน Command Promptด้วยคำสั่ง

  • firebase init

จากนั้นจะมีข้อความสอบถามถึงตำแหน่งกระเป๋าที่ต้องการ Initial เว็บเพจ หากถูกต้องให้พิมพ์ “Y”ดังแสดงในรูปที่ 34 จากนั้น firebase จะสอบถามลักษณะของเว็บเพจที่เราใช้งาน ในที่นี้จะกำหนดให้เป็น Hosting site ดังนั้นจะต้องเลือกเป็น Hosting ดังรูปที่ 35

รูปที่ 35

รูปที่ 35 กำหนดFirebase ให้เป็น Hosting site

รูปที่ 36

รูปที่ 36 เลือก Project ที่ใช้งานเป็น default

รูปที่ 37

รูปที่ 37 หน้าต่างสอบถามการสร้างกระเป๋า public

รูปที่ 38

รูปที่ 38 กดปุ่ม FINISHสำหรับสิ้นสุดการตั้งค่า Hosing

จากนั้นจะเป็นการเลือกชื่อ Project ที่ต้องการตั้งเป็น default ให้ใช้ลูกศรเลื่อนขึ้นลงไปยังชื่อ Project ที่ใช้งาน (รูปที่ 36) หรือจะไม่เลือกก็ได้ ในที่นี้ผู้เขียนเลือกProject ที่จะสร้างนี้ คือ SemiFirebaseเสร็จแล้วให้กดปุ่ม Enter บนคีย์บอร์ด หลังจากนี้ firebaseก็จะติดตั้ง Database และ Hosting ตามที่เรากำหนดไว้ จนมาถึงขั้นตอนสุดท้ายในส่วนนี้จะเป็นขออนุญาตสร้างกระเป๋า public และไฟล์ firebase.json ที่เป็นไฟล์เข้าถึง Database ไว้ในกระเป๋างานของเรา ให้พิมพ์ “Y” ดังรูปที่ 37 เป็นอันเสร็จสิ้นกระบวนการตั้งค่า Firebase Hosting

จากนั้นให้กลับมาที่ Firebase Console บน Dialog แนะนำที่ก่อนหน้านี้ (รูปที่ 25) ให้ทำการกดปุ่ม CONTINUE ขณะนั้นจะมี Dialog สำหรับการ loginและ init ขึ้นมา (ดังรูปที่ 38) ให้กดปุ่ม FINISH จากนั้นจะเข้ามาสู่หน้าต่าง Hosing ซึ่งในหน้าต่างนี้ท่านจะได้ลิ้งค์ที่เป็นเว็บเพจของท่านแล้วดังแสดงในรูปที่ 39

ขั้นตอนต่อมาจะเป็นการนำเข้าไฟล์ JSON เข้ามาสำหรับอ้างอิงเป็นฐานข้อมูล โดยเข้าไป Database -> DATA -> setting (3 จุดด้านบนขวามือ) ->Import JSON ดังรูปที่ 40 จากนั้นให้กดปุ่ม BROWSE เพื่อนำไฟล์ JSON เข้ามา ซึ่งไฟล์จะอยู่ในกระเป๋างานที่เรากำหนดไว้ก่อนหน้านี้ ให้เลือกไฟล์เข้ามาดังรูปที่ 41 เสร็จแล้วก็กดปุ่ม IMPORT เป็นอันสำเร็จ

รูปที่ 39

รูปที่ 39 หน้าต่างแสดงลิ้งค์ของเว็บที่สร้าง

รูปที่ 40

รูปที่ 40 การเข้าเมนู ImportJSON

รูปที่ 41

รูปที่ 41 เลือกไฟล์ JSON 

ขั้นตอนต่อไปเป็นการอัพโหลดไฟล์เว็บเพจของเราขึ้น Hosting แต่ก่อนอื่นให้นำไฟล์เว็บของเราทั้งหมดใส่ไว้ในกระเป๋า public ดังรูปที่ 42 เสียก่อน เมื่อพร้อมแล้วให้เปิด Command Prompt ขึ้นมาแล้วพิมพ์คำสั่ง deploy เพื่ออัพไฟล์เว็บเพจทั้งหมดที่อยู่ในกระเป๋าpublic ขึ้นไป Hosting เมื่อเสร็จแล้ว Firebase จะแสดงหน้าต่างแจ้งให้ทราบดังรูปที่ 43 หากท่านต้องการแก้ไขเว็บเพจของเราก็สามารถทำได้ โดยให้แก้ไขไฟล์ที่อยู่ในกระเป๋า public เมื่อเสร็จแล้วก็ทำการdeploy ผ่านCommand Prompt เหมือนเดิม ประวัติการ deployของเราจะแสดงในหน้าของ Hosing ดังแสดงในรูปที่ 44

รูปที่ 42

รูปที่ 42 นำไฟล์เว็บเพจทั้งหมดไปเก็บในกระเป๋า public

รูปที่ 43

รูปที่ 43 Firebase แสดงข้อความแจ้งเมื่ออัพโหลดสำเร็จ

รูปที่ 44

รูปที่ 44 ประวัติการ deployแสดงในส่วนของ Hosting

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


รายการอุปกรณ์


ตัวต้านทาน ¼ วัตต์ +/-1%

R1, R4, R7, R10 –               10                                                                     4                          ตัว

R2, R5, R8, R11 –               1k                                                                     4                          ตัว

R3, R6, R9, R12 –               10k                                                                   4                          ตัว

R13- R16 –                          100                                                                   4                          ตัว

R17 –                                   220                                                                   1                          ตัว

VR1 –                                  ตัวต้านทานปรับค่าได้ขนาด 10k                  1                          ตัว

ตัวเก็บประจุ

C1 –                            220uF 16V อิเล็กทรอไลต์      1                       ตัว

C2 –                            10uF 16V อิเล็กทรอไลต์        1                       ตัว

อุปกรณ์สารกึ่งตัวนำ

IC1 –                                 LTV847                                    1                       ตัว

D1-D4 –                           1N4007                                     4                       ตัว

Q1-Q4 –                           2N4401                                     4                       ตัว

LED1- LED5 –                แอลอีดีสีแดง 5 มม.                 5                       ตัว

VAR1 –                            วาริสเตอร์ 250VAC                 1                       ตัว

อื่นๆ

CON1- CON5 –                     เทอร์มินอลบล็อก 2 ขา           5                          ตัว

CON6 –                                  คอนเน็กเตอร์ 4 ขา                  1                          ตัว

CON7 –                                  คอนเน็กเตอร์ 3 ขา                  2                          ตัว

ESP1 –                                    โมดูล ESP8266-12E                1                          ตัว

F1 –                                         ฟิว 500mA                                1                          ชุด

F2- F5 –                                  ฟิว 5A                                       4                          ชุด

RY1-RY4 –                            รีเลย์ 5V 1 คอนแท็กต์             4                          ตัว

SW1- SW2                            สวิตช์กดติดปล่อยดับ             2                          ตัว

TO1                                        หม้อแปลงสวิตชิ่ง 5VDC        1                          ตัว

หมายเหตุ ซอร์สโค้ดที่ใช้ร่วมกับโครงงานนี้สามารถดาวน์โหลดได้ที่เว็บไซต์ http://electronics.se-ed.com/download,ESP1 และ TO1 สามารถซื้อได้ที่ร้าน บริษัท อีเล็คทรอนิคส์ พาร์ท ซัพพลาย จำกัด โทรศัพท์: 0-2222-0688


 

 

Leave a Comment