ทุกวันนี้คริปโตเคอร์เรนซีกำลังมาแรงมากๆ แต่ราคามันก็ขึ้นๆ ลงๆ รัวๆ เลย ควรต้องคอยเช็คบ่อยหน่อยนะตัวนี้ ใช้ GIGA R1 WiFi กับ GIGA Display shield เราก็ทำตัวติดตามราคาแบบเรียลไทม์ได้เลย แสดงราคาคริปโตที่เลือกในหลายสกุลเงิน

มาทำโปรเจคที่แสดงราคา Bitcoin ในสกุลเงิน Euro, ดอลลาร์สหรัฐ และ Ethereum กันดีกว่า อัพเดททุก 5 นาที หน้าจอจะเปลี่ยนสีตามว่าราคาขึ้นหรือลง พร้อมแสดงผลต่างไปด้วย โปรเจคนี้เหมาะมากๆ เอาไปวางบนโต๊ะหรือติดผนัง จะได้อัพเดทตลอดเวลา เริ่มกันเลย!

Live Market Data: Crypto Dashboard

Arduino GIGA R1 WiFi นี่คือบอร์ดเทพตัวจริง พอจับคู่กับ GIGA Display Shield ก็กลายเป็นแท็บเล็ตพลังสูงที่เรนเดอร์กราฟิกความละเอียดสูงและประมวลผล HTTP request ซับซ้อนแบบเรียลไทม์ได้ โปรเจคนี้พิสูจน์แล้วว่า Arduino ไม่ได้ทำได้แค่ให้ LED กะพริบอีกต่อไป แต่เป็นอุปกรณ์ edge-computing ที่ครบเครื่องจริงๆ

ฮาร์ดแวร์ที่ใช้

• Arduino GIGA R1 WiFi Board: ตัวเทพ Dual-core
• Arduino GIGA Display Shield: จอทัชสกรีนสวยงาม 3.97 นิ้ว
• USB-C power supply

วิธีตั้งค่าฮาร์ดแวร์

เวลาใช้ GIGA Display Shield ให้เสียบมันเข้ากับด้านล่างของบอร์ด GIGA R1 WiFi พอใช้จอแล้วบอร์ด GIGA R1 WiFi จะกลับหัวนะ เอาไปเสียบลงบนชิลด์ตามภาพด้านล่างนี้เลย:

Libraries

โปรเจคนี้ใช้ไลบรารีเหล่านี้เพื่อให้โค้ดง่ายขึ้น:

1. WiFi - จัดการการเชื่อมต่อ Wi-Fi® ของบอร์ด
2. ArduinoHttpClient - จัดการฟังก์ชัน HTTP ทำให้บอร์ดเรียกใช้ API ได้
3. ArduinoJson - การร้องขอ API จะได้สตริง JSON มา ไลบรารีนี้ช่วยเราแยกข้อมูลที่ต้องการจากสตริง JSON นั้น
4. Arduino_GigaDisplay_GFX - ไลบรารีนี้จัดการเรื่องภาพทั้งหมดบน GIGA Display Shield

ตั้งค่า Wi-Fi® ให้พร้อมลุย

ก่อนจะเชื่อมต่อ Wi-Fi ได้ น้องต้องมีชื่อเครือข่าย (SSID) กับรหัสผ่าน (Password) ให้เรียบร้อยนะ ข้อมูลพวกนี้เราจะเอาไปใส่ในโค้ด อย่าลืมจดเก็บไว้ให้ดี! ไปกรอกข้อมูลในบรรทัดเหล่านี้ในสเก็ตช์เต็มๆ กันเลย:

const char* SSID = " ";                  

const char* PASS = " ";                  

เพื่อให้การแกะรอยปัญหา (Troubleshooting) ง่ายขึ้น เรามาแสดงสถานะเป็นข้อความบนหน้าจอกันดีกว่า จะได้เห็นชัดๆ ว่าโปรแกรมค้างตรงไหนหรือมีอะไรผิดพลาดรึเปล่า ในส่วนโค้ดต่อไปนี้ เราจะโชว์สถานะบน Giga Display Shield ขณะที่บอร์ดกำลังต่อ Wi-Fi อยู่

	 // Connect to Wi-Fi                  

	 display.fillScreen(BLACK);                  

	 display.setCursor(10, 10);  //x,y                  

	 display.setTextSize(5);     //adjust text size                  

	 display.print("Connecting to Wi-Fi....");                  

	 while (status != WL_CONNECTED) {                  

	   status = WiFi.begin(SSID, PASS);                  

	   // wait 10 seconds for connection:                  

	   delay(10000);                  

	 }                  

	 display.fillScreen(BLACK);                  

	 display.setCursor(10, 10);                  

	 display.print("Connected to Wi-Fi!");                  

ตอนที่โค้ดรันบน GIGA Display Shield แล้ว มันควรจะโชว์หน้าตาประมาณรูปด้านล่างนี้เลย อย่าช็อตนะตัวนี้!

ตั้งค่า API กันต่อ

คราวนี้เราจะใช้ API ฟรีจาก Coinbase ซึ่งไม่ต้องใช้ API Key ให้วุ่นวาย แค่ตั้ง URL กับคำขอ (API Request) ให้ถูกต้องก็ดึงข้อมูลที่ต้องการมาได้แล้ว จัดไปวัยรุ่น! การเรียก API นี้จะไปดึงราคา Bitcoin เป็นสกุลเงินต่างๆ มาให้ จากนั้นเราก็กรองเอาแค่ค่าของ ดอลลาร์สหรัฐ (US Dollars), ยูโร (Euros) และ Ethereum มาแสดงผล

ถ้าน้องอยากติดตามคริปโตตัวอื่นล่ะก็ ต้องไปหาคำขอ API ที่เหมาะสมจากเว็บ Coinbase เองเลย แล้วค่อยมาอัพเดทบรรทัดนี้ในโค้ด:

client.get("/v2/exchange-rates?currency=BTC"); // API call                  

เพื่อให้ค่าที่แสดงอัพเดทตลอดเวลา เราจะวางการเรียกฟังก์ชันไว้ใน loop() พร้อมกับดีเลย์ (Delay) ถึงแม้ Coinbase API จะอนุญาตให้เรียกได้สูงสุด 10 ครั้งต่อวินาที แต่แนะนำให้ลดความถี่ในการเรียก API ลงหน่อยนะ

ในโค้ดนี้ตั้งดีเลย์ไว้ที่ 5 นาที เพราะงั้นทุกๆ 5 นาที ระบบจะเรียก API และอัพเดทค่าอีกครั้ง น้องสามารถปรับดีเลย์นี้ให้สั้นหรือยาวตามใจชอบได้เลยจ้า

void loop() {                 

	 delay(300000);                 

	 displayCryptoPrice();                 

}                 

การแยกวิเคราะห์ข้อมูล JSON (Parsing JSON Data)

โปรเจคนี้พึ่งพาการดึงข้อมูลจาก API สาธารณะของคริปโตเคอเรนซี

1. การร้องขอ (The Request): GIGA ของเราจะเชื่อมต่อ Wi-Fi แล้วส่งคำขอ HTTP GET ไปยังเซิร์ฟเวอร์ API
2. การตอบกลับ (The Response): เซิร์ฟเวอร์จะส่งข้อความก้อนใหญ่กลับมาในรูปแบบ JSON (เช่น {"bitcoin":{"usd":65000}})
3. ตัวแยกวิเคราะห์ (The Parser): โดยใช้ไลบรารี่ Arduino_JSON โค้ดของเราจะไล่ค้นในสายข้อความนี้ หาตัวเลขราคาที่ต้องการ แล้วบันทึกเก็บไว้เป็นตัวเลขทศนิยม (float) เอาไว้ใช้งานต่อ

การคัดกรองข้อมูลจาก API Call

การเรียก API จะได้สตริง JSON ขนาดใหญ่กลับมา เราต้องคัดกรองเอาเฉพาะข้อมูลที่เราต้องการออกมา ในที่นี้เราตามหาชื่อคริปโตที่เราติดตาม พร้อมกับราคาในหน่วย USD, EUR และ ETH เราทำได้ด้วยโค้ดประมาณนี้:

String currency = doc["data"]["currency"];                  

float usdPrice = doc["data"]["rates"]["USD"];                  

float eurPrice = doc["data"]["rates"]["EUR"];                  

float ethPrice = doc["data"]["rates"]["ETH"];                  

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

ถ้าอยากดูสกุลเงินอื่น แค่เปลี่ยนจาก "USD" เป็นสกุลเงินที่อยากดูก็จบ ง่ายๆ วัยรุ่น!

การใช้งานจอแสดงผล

ตอนนี้เราได้ค่ามาแล้ว ก็เอามาโชว์บนจอได้เลย เริ่มต้นด้วยการกำหนดตำแหน่งที่จะแสดงข้อความด้วย display.setCursor(x, y); ซึ่งกำหนดพิกัด x และ y สำหรับวางข้อความ

ด้วย display.print() เราก็สามารถวางข้อความอะไรก็ได้ลงบนจอ ในที่นี้เราจะใช้ตัวแปร currency เพื่อให้มันอัพเดทอัตโนมัติถ้าเปลี่ยนการเรียก API

display.fillScreen(BLACK);                 

display.setCursor(10, 10);                 

display.setTextSize(5);                 

display.print(currency + " Prices");                 

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

if(lastUSDPrice < usdPrice){                 

	 display.setTextColor(GREEN);                  

	 usdDiff = usdPrice - lastUSDPrice;                 

	 usdDiffText = "(+" + String(usdDiff) + ")";                 

}                 

if(lastUSDPrice > usdPrice){                 

	 display.setTextColor(RED);                 

	 usdDiff = usdPrice - lastUSDPrice;                 

	 usdDiffText = ("(" + String(usdDiff) + ")");                 

}                 

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

if(lastUSDPrice == 0){                 

	 display.setTextColor(WHITE);                 

	 usdDiffText = " ";                 

}                 

เอาล่ะวัยรุ่น งานที่เหลือก็แค่เซ็ตขนาดกับตำแหน่ง แล้วก็แสดงค่าออกมาให้ดูสวยๆ เท่านั้นเอง!

// Puts the info on the display                  

display.setTextSize(5);                 

display.setCursor(10, 100);                 

display.print("USD: ");                 

display.setCursor(130, 100);                 

display.print(usdPrice, 2);                 

// Puts the value difference on the display                 

display.setTextSize(2);                 

display.setCursor(440, 100);                 

display.print(usdDiffText);                 

ทำแบบนี้กับสกุลเงินทุกตัวที่อยากติดตาม โปรเจคก็เสร็จสมบูรณ์แล้วจ้า! ง่ายมั้ยล่า?

แนวทางต่อยอด

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