บทความนี้จะแนะนำการใช้ library Pandas ของภาษา Python ในการประมวลผลวิเคราะห์ข้อมูล และแสดงข้อมูลเป็นแผนภูมิต่าง ๆ โดยใช้วิธีการตั้งคำถาม 6 ข้อกับข้อมูลโควิด-19 ของประเทศไทยนะครับ

แปลคลิปครับ

Software Installation

  • Python https://www.python.org/
  • Jupyter Notebook, Pandas และ Matplotlib
    เปิด command prompt/terminal แล้ว run คำสั่ง
pip install jupyterlab pandas matplotlib

Let’s Code

เปิดโปรแกรม Jupyter Notebook ด้วยการเรียกคำสั่ง

jupyter notebook

*ไฟล์ข้อมูลที่ใช้ในตัวอย่างนี้ สามารถดาวน์โหลดได้จาก link

บทความนี้จะสาธิตการใช้ React Native สร้าง Mobile Application แบบ Cross-platform นะครับ คือเขียนโค้ดครั้งเดียวใช้ได้หลาย Platform โดย React Native รองรับทั้ง Android และ iOS ครับ ใน App ที่จะทำนี้จะเรียกใช้ API จำลองข้อมูลแหล่งท่องเที่ยวบนเว็บไซต์ MeCallAPI.com หลักๆ คือเรียก API จาก URL นี้นะครับ

https://www.mecallapi.com/api/en/attractions (ภาษาอังกฤษ)
หรือใครจะเรียกแบบเป็นข้อมูลภาษาไทยก็ได้นะครับ
https://www.mecallapi.com/api/th/attractions (ภาษาไทย)

แปะ clip สามารถดูตามจาก clip ได้ครับ

บทความนี้จะสาธิตการใช้ React และ i18next สร้างเว็บหลายภาษาทั้งเมนูและข้อมูลที่เรียกจาก API จำลองข้อมูลแหล่งท่องเที่ยวบนเว็บไซต์ MeCallAPI.com หลักๆ คือเรียก API จาก URL นี้นะครับ

https://www.mecallapi.com/api/th/attractions (ภาษาไทย)
https://www.mecallapi.com/api/en/attractions (ภาษาอังกฤษ)

Software Installation

เริ่มต้นสร้างแอป

npx create-react-app react-multi-languages
cd react-multi-languages
npm install react-i18next i18next
npm install @material-ui/core @material-ui/icons react-router-dom
npm start

Let’s Code!

สร้างไฟล์ i18n.js

แก้ไขไฟล์ index.js

สร้างไฟล์ App.js

สร้างไฟล์ AttractionsPage.js

สร้างไฟล์ Navbar.js

สร้างไฟล์ Attractions.js เรียกข้อมูลแหล่งท่องเที่ยวจากภาษาที่เลือกผ่าน API
API URL (METHOD GET):
https://www.mecallapi.com/api/th/attractions
https://www.mecallapi.com/api/en/attractions

Build a Pre-render Website with Next.js, React.js and API, then deploy on Vercel Cloud

Let’s Build a Pre-render Website with Next.js, React.js and API, then deploy on Vercel Cloud

Pre-render websites (Server-side rendering) are better for SEO, search engine crawling and social media sharing compared to client-side rendering. In this tutorial, we will explore Next.js to develop a pre-render website using Static Generation feature.

บทความนี้จะเป็นพื้นฐานในการสร้างหน้าเว็บแบบ pre-render นะครับ คือเป็นการให้ server ทำการ render สร้างหน้าต่าง ๆ ไว้ก่อน โดยใช้ข้อมูลจาก API

ขอแปะ clip นะครับ ทำตาม clip ได้เช่นเดียวกันครับ

สำหรับการ render หน้าไว้ก่อนนะครับ ตัวอย่างเช่น ถ้าใน API มีข้อมูลแหล่งท่องเที่ยว 7 แห่ง server จะทำการ render หน้าเว็บสำหรับแหล่งท่องเที่ยวทั้ง 7 แห่งเตรียมไว้เลย เราเรียกวิธีนี้ว่า Server-side Rendering ซึ่งวิธีการนี้จะทำให้การทำ SEO การให้ search engine มา crawl หน้าเว็บเรา และการแชร์หน้าเว็บขึ้น social มีประสิทธิภาพมากกว่า Client-side Rendering…

บทความนี้จะเป็นพื้นฐานในการสร้างหน้า Web โดยใช้ React เพื่อทำการ CRUD ข้อมูล ซึ่งประกอบไปด้วย Create (สร้าง), Read (อ่าน), Update (แก้ไข) และ Delete (ลบ) ข้อมูล ผ่านการเรียกใช้ API ตัวจำลอง ที่ให้บริการอยู่บนเว็บ MeCallAPI.com (เว็บผมเองครับ 5555)

แปะ clip นะครับ ทำตาม clip ได้เช่นเดียวกัน

ถ้าอยากลองใช้ API สำหรับจำลองการทำ CRUD หรือ Authentication ก็เข้าไปดูรายละเอียดได้ที่ MeCallAPI.com เลยครับ

บทความนี้เป็นพื้นฐานแบบเรียกได้ว่าจับมือทำนะครับ 555 สำหรับการพัฒนา API โดยใช้ Node.js, Express.js และฐานข้อมูลเป็น MongoDB โดยเป็น API สำหรับให้บริการ CRUD ข้อมูล ซึ่งประกอบไปด้วย Create (สร้าง), Read (อ่าน), Update (แก้ไข) และ Delete (ลบ) ครับ

แปะ clip ครับ ดูตาม clip หรืออ่านตามบทความได้ก็ได้ครับ 😃

โดยผลลัพธ์ที่ได้จากคล้ายๆ กับ API บน mecallapi.com

Karn Yongsiriwit

Lecturer at Digital Innovation Technology, Rangsit University

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store