ค้นหาบทความที่นี่

บทความทั้งหมด

ทำความรู้จักกับ JSON

5 ปีที่ผ่านมา

โดย เจ้าของร้าน

การเขียนโปรแกรมนั้นมีสิ่งที่สำคัญที่สุดคือข้อมูล ทั้ง Input, Process, Output ล้วนต้องมีข้อมูลมาเกี่ยวข้องทั้งสิ้น ฉะนั้นเมื่อเราทำระบบโดยมีอุปกรณ์หลายตัว หรืออุปกรณ์มีการรับส่งข้อมูลกับคอมพิวเตอร์ กับมือถือ หรือใด ๆ ก็ตาม ย่อมมีการรับส่งข้อมูลเกิดขึ้น หากเรามีข้อมูลที่ต้องรับส่งหลายตัว ลองคิดดูนะครับว่าถ้าเราเขียนเป็นแบบถาม-ตอบทีละค่า กว่าจะครบตัวแปรทั้งหมด มันเหนื่อยเขียนโปรแกรมและเสียเวลาในการทำงานมาก หากจะสร้าง struct ก็อาจมีปัญหาเรื่องภาษาที่ใช้ ซึ่งอุปกรณ์สองด้านอาจเขียนขึ้นจากคนละภาษากัน ซึ่งตรงนี้ บอกเลยว่า JSON จะเข้ามาแก้ปัญหาครับ

JSON คืออะไร
JSON มีชื่อเต็มคือ JavaScript Object Notation เป็นรูปแบบมาตรฐานในการรับส่งข้อมูลที่อยู่ในรูปแบบข้อความ ซึ่งขนาดของ JSON จะมีขนาดเล็ก มีรูปแบบโครงสร้างที่อ่านได้ง่าย ทั้งมนุษย์และโปรแกรมล้วนสามารถอ่านได้ โดย JSON นี้สร้างขึ้นมาจากภาษา JavaScript ภายใต้มาตรฐาน ECMA-262 3rd Edition แต่แม้ว่าจะถูกสร้างขึ้นมาจาก JavaScript ก็ตาม ภาษาต่าง ๆ นั้นไม่ได้มอง JSON เป็น JavaScript ภาษาต่าง ๆ จะมองเป็น Object ชนิดหนึ่ง จึ่งสามารถใช้ได้ทุกภาษาทั้ง C, C++, C#, Java, JavaScript, Perl, Python, HTML, GO และภาษาอื่น ๆ
มาตรฐานของ JSON สามารถดูได้จาก ECMA-404 The JSON Data Interchange Standard

JSON syntax
การเขียน JSON สามารถเขียนได้ในรูปแบบง่าย ๆ ตามข้อกำหนดต่อไปนี้
- ข้อมูลจะถูกแสดงเป็น key/value เป็นคู่กัน
- key และ value ถูกแยกกันด้วยเครื่องหมายโคลอน ' : '
- ข้อมูลแต่ละคู่ถูกแยกออกจากคู่อื่นด้วยคอมม่า ' , '
- Objects อยู่ภายใต้วงเล็บปีกกา ' { } '
- Arrays อยู่ภายใต้วงเล็บก้ามปู (วงเล็บเหลี่ยม) ' [ ] '
ซึ่ง 5 ข้อที่ว่ามาอาจยังงง ๆ กันอยู่ มาดูรูปแบบที่เห็นภาพกัน ซึ่งก็จะมีรูปแบบง่าย ๆ ดังนี้

{ "key1":"value1", "key2":"value2", "key3":"value3" }

สมมติว่าตัวแปร key3 เป็น Arrays จำนวน 3 ค่า จะมีรูปแบบดังนี้

{ "key1":"value1", "key2":"value2", "key3":["value3-1", "value3-2", "value3-3"] }

ตัวอย่างข้อมูล เช่น

{ "name":"โนบิตะ", "age":30, "province":"เขียงใหม่" }

จากตัวอย่างแสดงข้อมูลว่า คนชื่อ... อายุ... อยู่ที่จังหวัด... ก็จะได้ประโยค "โนบิตะ อายุ 30 ปี อาศัยอยู่จังหวัดเชียงใหม่" ซึ่งจะเห็นได้ว่ามนุษย์เราได้เห็นข้อมูล JSON บรรทัดเดียวก็สามารถแปลออกได้เหมือนกัน ทีนี้เรามาเพิ่มข้อมูลว่าโนบิตะมีสัตว์เลี้ยงคือหมา 3 ตัว ชื่อ แดง น้ำตาล ขาว และแมว 2 ตัว ชื่อ เหมียว แคท นำไปเขียนเป็น JSON ก็จะได้ว่า

{ "name":"โนบิตะ", "age":30, "province":"เขียงใหม่", "dog":["แดง", "น้ำตาล", "ขาว"], "cat":["เหมียว", "แคท"] }

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

{

"name" : "โนบิตะ",

"age" : 30,

"province" : "เขียงใหม่",

"dog" : [

"แดง",

"น้ำตาล",

"ขาว"

"cat" : [

"เหมียว",

"แคท"

]

}

ตัวอย่างการใช้งานจริง(ที่ยังไม่ใช่เราเขียนโปรแกรมใช้เอง) คือเว็บไซต์ต่าง ๆ ที่บริการข้อมูล เช่น OpenWeather ที่บริการข้อมูลสภาพอากาศ เราสามารถสมัครสมาชิกของเว็บเพื่อขอ API มาใช้งาน ซึ่งรูปแบบในการเรียกข้อมูลมาใช้งานนั้นในแต่ละเว็บไซต์ก็จะมี Document อธิบายไว้ให้แล้ว มักมีหลายรูปแบบให้เลือกใช้ และมีทั้งแบบใช้ได้ฟรี ส่วนบางอย่างก็ต้องจ่ายเงินซื้อมา

ลองมาดูตัวอย่างผู้เขียนจะเข้าไปเรียก API ข้อูลผู้ติดเชื้อ COVID-19 ประจำวันที่เขียนบทความอยู่นี้ (26 เมษายน 2563) จากเว็บไซต์ covid19.th-stat.com ซึ่งสามารถเรียกดูข้อมูลได้ทันทีโดยไม่ต้องขอ API Keys ได้จากการเรียกที่อยู่ https://covid19.th-stat.com/api/open/today ก็จะได้ข้อมูลในรูปของ JSON ดังนี้

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

เห็นมั๊ยครับว่า JSON นี่ง่ายมากเลย เราไปลองทำการทดลองกันดูดีกว่าครับ เราจะเขียนโปรแกรมเพื่อทำการ parser (แปลว่าการแจกแจงประโยค ก็ตรงตัวว่าเราจะเอาประโยค JSON ที่ได้มานี้มาทำการแจกแจงออกเป็นข้อมูลต่าง ๆ) โดยจะออกแบบให้ใช้ ESP8266 กับจอ LCD ขนาด 2004 แบบ I2C ใช้ข้อมูล COVID-19 นี่แหละ ให้แสดงยอดผู้ติดเชื้อบวกเท่าไรรวมเท่าไร เสียชีวิตบวกเท่าไรรวมเท่าไร และกำลังรักษาอยู่บวกลบเท่าไรเหลือเท่าไร จินตนาการว่าจะออกแบบหน้าจอดังนี้

		2	6	/	0	4	/	2	0	2	0		1	1	:	3	6
C	o	n	f	i	r	m	e	d		+	1	5			2	9	2	2
D	e	a	t	h	s					+	0				5	1
H	e	a	l	i	n	g				-	3	2			2	7	7

ออกแบบกันง่าย ๆ ทำง่าย ๆ ใครทำขายหรืออยากให้มันสวยงามก็ปรับปรุงให้สวยงาม เปลี่ยนไปใช้จอ TFT ทำกราฟฟิกสีสวยงามก็ได้ครับ อ่อ วิธีนี้เป็นวิธีที่ผู้เขียนใช้เวลาจะทำงานกับ LCD ก็วาดตารางแทนจอไปเลย ใส่ไปช่องละตัวเหมือนบนจอ ออกแบบกันง่าย ๆ ลบแก้กันง่าย ๆ ก่อนเขียนโปรแกรมครับ

การเขียนโปรแกรม ง่ายมากครับ ใครยังไม่คล่อง(หรือคล่องแล้วก็แนะนำ เพราะมันช่วยให้เราทำงานได้เร็วขึ้น) ให้เข้าไปที่ ArduinoJson Assistant ก็อปปี้ JSON ทั้งหมดของเราไปแปะในช่อง Input

จากนั้นเลื่อนลงมาข้างล่าง จะเจอช่อง Parsing program เดี๋ยวเราจะเอาไปแปะโค้ดเรา แต่ในโค้ดอย่าลืมแก้ 1 บรรทัดนะครับ อ่านคอมเม้นท์ในโค้ดด้วย (หากจะเขียนเองต้องมีการคำนวณ capacity ของ JSON ด้วย ฉะนั้นตัดปัญหาก็ใช้ ArduinoJson Assistant นี่จบทุกอย่างครับ ง่ายกว่า เร็วกว่า)

เพื่อไม่ให้เสียเวลา ไปเปิด ArduinoIDE กันเลยครับ คำอธิบายได้ Comment ไว้ในโค้ดแล้วเหมือนเดิม
ก่อนที่จะเริ่มเขียน เราต้องเพิ่ม Library ที่ชื่อว่า ArduinoJSON ก่อนนะครับ ใครยังไม่มี LiquidCrystal_I2C ก็เพิ่มกันไป ค้นใน Library Manager ได้เลย (วิธีการเพิ่ม Library คลิกอ่านได้ที่นี่)
เอาละ พร้อมแล้วก็เขียนกันเลย

อัพโหลดลงไป ผู้เขียนใช้ NodeMCU V3 ในการทดลอง อย่าเพิ่งรีบประกอบกับจอ ทดสอบกับ Serial Monitor กันก่อน

ได้แบบนี้ก็จัดว่าโอเคครับ ประกอบร่างกับจอ LCD แล้วทดสอบกันเลย

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