วิธีสร้าง REST API? คู่มือทีละขั้นตอน

บทความนี้ให้การแนะนำเกี่ยวกับ API โดยเฉพาะ RESTful APIs เราจะดูข้อดี ข้อจำกัด และทางเลือกต่างๆ นอกจากนี้ เรายังจะแสดงวิธีการสร้าง REST API โดยใช้ Back4app — หนึ่งในผู้ให้บริการ BaaS ที่ดีที่สุด

API คืออะไร?

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

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

ในปัจจุบัน APIs ถูกใช้งานเกือบทุกที่ ธุรกิจส่วนใหญ่มี API ภายในหลายตัวและ API ที่เข้าถึงได้สาธารณะ วันนี้คุณอาจได้มีปฏิสัมพันธ์กับ API กว่าร้อยตัวแล้ว ตัวอย่างเช่น เมื่อคุณตรวจสอบเวลา สภาพอากาศ เลื่อนผ่าน Facebook หรือรับชมวิดีโอบน YouTube

ความแตกต่างระหว่าง API และ SDK คืออะไร?

ดังที่กล่าวมาข้างต้น API เป็นชุดของกฎที่กำหนดว่าการสื่อสารระหว่างอุปกรณ์หรือระบบสองระบบสามารถทำได้อย่างไร ในทางกลับกัน Software Development Kit (SDK) เป็นการรวบรวมเครื่องมือ ไลบรารี และเอกสารที่ช่วยให้นักพัฒนาสามารถสร้างซอฟต์แวร์สำหรับแพลตฟอร์มเฉพาะ (เช่น Windows, Web, Android, iOS)

SDK มักจะใช้ APIs ต่างๆ ภายในเบื้องหลัง เราจะดูตัวอย่างเชิงปฏิบัติในส่วนที่สองของบทความ

REST คืออะไร?

แนวทางสถาปัตยกรรมซอฟต์แวร์ที่เรียกว่า Representational State Transfer (REST) เป็นลักษณะของกรอบงานอินเทอร์เน็ต REST ไม่ได้เป็นโปรโตคอลหรือมาตรฐาน แต่เปิดให้มีวิธีการใช้งานที่หลากหลายโดยนักพัฒนา Roy Fielding ได้นำเสนอ REST ในปี 2000 และมันได้เป็นมาตรฐานหลักสำหรับการสร้างเว็บ API มากว่าทศวรรษ

REST อิงตามโปรโตคอล HTTP และใช้วิธีการ HTTP ต่างๆ เช่น GET, POST, PUT, และ DELETE เพื่อจัดการทรัพยากร การดำเนินการเหล่านี้มักเรียกว่า CRUD (Create Retrieve Update Delete) REST รองรับหลายรูปแบบข้อมูลรวมถึง JSON, HTML, XLT, Python, JavaScript และอื่นๆ รูปแบบข้อมูลที่ใช้บ่อยที่สุดคือ JSON

เพื่อให้ API ถือว่าเป็น RESTful มันต้องสอดคล้องกับข้อจำกัดหกข้อดังต่อไปนี้:

1. สถาปัตยกรรม Client และ Server — ส่วนประกอบของไคลเอนต์และเซิร์ฟเวอร์ควรแยกกัน
2. ความไม่เก็บสถานะ — แอปพลิเคชันเซิร์ฟเวอร์ไม่สามารถเก็บข้อมูลของไคลเอนต์ระหว่างคำขอได้
3. การแคชได้ — เมื่อเป็นไปได้ทรัพยากรควรสามารถแคชได้ทั้งบนฝั่งไคลเอนต์หรือเซิร์ฟเวอร์
4. ระบบชั้น — APIs ควรอนุญาตให้มีตัวกลาง แต่ไม่ควรส่งผลกระทบต่อไคลเอนต์
5. อินเตอร์เฟซที่สม่ำเสมอ — อินเตอร์เฟซระหว่างเซิร์ฟเวอร์และไคลเอนต์ควรสม่ำเสมอ
6. โค้ดบนคำขอ (ไม่บังคับ) — อนุญาตให้เซิร์ฟเวอร์ส่งโค้ดที่สามารถดำเนินการได้ไปยังไคลเอนต์

ความแตกต่างระหว่าง REST และ RESTful คือ REST หมายถึงชุดของข้อจำกัด ขณะที่ RESTful หมายถึง API ที่ปฏิบัติตามข้อจำกัดเหล่านั้น

RESTful APIs ทำงานอย่างไร?

RESTful APIs ทำงานในลักษณะคล้ายกับเบราว์เซอร์ ความแตกต่างหลักคือเบราว์เซอร์ใช้ HTTP เพื่อร้องขอหน้าเว็บและทรัพยากรอื่นๆ จากเซิร์ฟเวอร์ ในขณะที่ RESTful APIs ใช้ HTTP เพื่อร้องขอและจัดการทรัพยากรข้อมูล

การเรียก RESTful API ทั่วไปมีขั้นตอนดังนี้:

1. ไคลเอนต์ส่งคำขอไปยังเซิร์ฟเวอร์
2. เซิร์ฟเวอร์ตรวจสอบสิทธิ์ไคลเอนต์และตรวจสอบว่ามีสิทธิ์เพียงพอสำหรับคำขอนั้น
3. เซิร์ฟเวอร์ประมวลผลคำขอ เช่น ทำการคำนวณ และดึงข้อมูลจากฐานข้อมูล
4. เซิร์ฟเวอร์ส่งการตอบสนองกลับไปยังไคลเอนต์
5. ไคลเอนต์ประมวลผลการตอบสนอง

ขั้นตอนอาจแตกต่างกันไปขึ้นอยู่กับการใช้งาน API คำแนะนำในการใช้งาน API ถูกกำหนดไว้ในเอกสารอ้างอิง API (หรือเอกสาร API)

โครงสร้างคำขอ

คำขอประกอบด้วยสิ่งต่อไปนี้:

ตัวอย่างคำขอดูแบบนี้:

โครงสร้างการตอบสนอง

การตอบสนองประกอบด้วยสิ่งต่อไปนี้:

ตัวอย่างการตอบสนองดูแบบนี้:

ประโยชน์ของ RESTful APIs คืออะไร?

ความสามารถในการขยายตัว

RESTful APIs มีความสามารถในการขยายตัวสูงและสามารถขยายได้ทั้งในแนวตั้งและแนวนอน การเพิ่มจุดสิ้นสุดหรือทรัพยากรใหม่มีผลกระทบน้อยต่อประสิทธิภาพของ API ทำให้สามารถขยายได้ตามความต้องการ

รูปแบบข้อมูลหลากหลาย

RESTful APIs สามารถส่งคืนข้อมูลในรูปแบบต่างๆ ตามหัวข้อคำขอของไคลเอนต์ ทำให้มีความยืดหยุ่นสูงและง่ายต่อการผสานเข้ากับระบบที่มีอยู่ ข้อมูลสามารถส่งคืนในรูปแบบ JSON, XLT, Python, HTML, JavaScript และอื่นๆ

ประสิทธิภาพ

RESTful APIs มีน้ำหนักเบาและมีภาระงานน้อยกว่า SOAP (Simple Object Access Protocol) ทำให้พวกมันรวดเร็วและมีประสิทธิภาพในการจัดการคำขอ RESTful API ทั่วไปสามารถจัดการคำขอได้ระหว่าง 10,000 ถึง 15,000 คำขอต่อวินาที

ความเป็นอิสระของแพลตฟอร์ม

ประโยชน์ที่ยอดเยี่ยมอีกประการหนึ่งของ RESTful APIs คือเซิร์ฟเวอร์และไคลเอนต์เป็นอิสระอย่างสมบูรณ์ ซึ่งช่วยให้นักพัฒนาสามารถใช้งาน RESTful APIs และไคลเอนต์ในหลายภาษาโปรแกรม เช่น Java, JavaScript, Python และอื่นๆ!

ง่ายต่อการเข้าใจ

เนื่องจาก REST อิงตาม HTTP จึงเข้าใจได้ง่ายมาก นักพัฒนาส่วนใหญ่แน่นอนว่ามีประสบการณ์ในการทำงานกับหรือใช้งาน RESTful API อย่างน้อยหนึ่งครั้งแล้ว

ข้อจำกัดของ RESTful APIs คืออะไร?

การดึงข้อมูลเกินหรือไม่เพียงพอ

หนึ่งในปัญหาที่ใหญ่ที่สุดของ RESTful APIs คือการดึงข้อมูลเกินความจำเป็นและการดึงข้อมูลไม่เพียงพอ การดึงข้อมูลเกินเกิดขึ้นเมื่อมีการส่งคืนข้อมูลมากกว่าที่ต้องการ และการดึงข้อมูลไม่เพียงพอเกิดขึ้นเมื่อไม่ส่งคืนข้อมูลเพียงพอ (โดยเฉพาะเมื่อจัดการกับความสัมพันธ์)

ไม่มีการสมัครสมาชิกข้อมูลแบบเรียลไทม์

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

ไม่มีระบบการเวอร์ชัน

RESTful APIs ไม่มีระบบการเวอร์ชันในตัว นอกจากนี้ ยังไม่มีวิธีการยกเลิกฟิลด์ ซึ่งทำให้ยากต่อการพัฒนา API เมื่อเวลาผ่านไป ทุกครั้งที่คุณปล่อยการอัปเดต API หลัก คุณจะต้องแก้ไขไคลเอนต์ทั้งหมด

เพื่อแก้ไขปัญหาที่กล่าวมาข้างต้น ทางเลือก REST หลายตัวได้ปรากฏขึ้นมา บางตัวเลือกที่นิยมมากที่สุดรวมถึง Simple Object Access Protocol (SOAP), GraphQL, และ gRPC

วิธีการตรวจสอบสิทธิ์ RESTful

RESTful APIs สามารถใช้วิธีการตรวจสอบสิทธิ์ต่างๆ เพื่อรักษาความปลอดภัยของจุดสิ้นสุด วิธีการตรวจสอบสิทธิ์ที่ใช้บ่อยที่สุดคือ:

• การตรวจสอบสิทธิ์ HTTP
• API keys
• OAuth 2.0
• OpenID Connect
• JWT Authentication

วิธีการเหล่านี้ส่วนใหญ่ต้องให้ไคลเอนต์ส่งข้อมูลประจำตัวหรือ API key ของพวกเขาในหัวข้อคำขอ วิธีการตรวจสอบสิทธิ์ที่ต่างกันควรพิจารณาเมื่อเริ่มต้นโครงการ

วิธีการสร้าง RESTful API?

ส่วนนี้ของบทความจะตรวจสอบการสร้าง RESTful API โดยใช้ Back4app และการสร้างการเชื่อมต่อกับ Frontend ที่ใช้ Next.js

ข้อกำหนดเบื้องต้น

• มีประสบการณ์กับ JavaScript ES6
• มีประสบการณ์กับ React และ Next.js
• เข้าใจพื้นฐานเกี่ยวกับ REST

Back4app คืออะไร?

Back4app เป็นโซลูชั่น BaaS ที่น่าทึ่ง – Backend as a Service มันใช้ซอฟต์แวร์แบบเปิดและมีคุณสมบัติมากมายที่ช่วยให้นักพัฒนาสามารถสร้างแอปพลิเคชันมือถือและเว็บได้เร็วขึ้น ซึ่งช่วยให้ธุรกิจมุ่งเน้นที่ตรรกะทางธุรกิจของตนโดยไม่ต้องกังวลเกี่ยวกับโครงสร้างพื้นฐานของคลาวด์

มีแดชบอร์ดที่ใช้งานง่ายและอินเทอร์เฟซบรรทัดคำสั่ง แพลตฟอร์มนี้มี Software Development Kits (SDKs) ที่เข้ากันได้กับเครื่องมือที่ใช้กันอย่างแพร่หลาย เช่น Node.js, Flutter, React Native, Android, Angular และ iOS

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

หากต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับ Back4app โปรดอ่าน What is Back4app?

การแนะนำโครงการ

ในบทความนี้ เราจะสร้างเว็บแอปพลิเคชันบล็อกที่เรียบง่าย แอปเว็บจะอนุญาตให้นักแก้ไขเพิ่มบทความและผู้ใช้สามารถอ่านบทความเหล่านั้น แอปจะมีสองส่วน: backend (ที่ใช้ REST) และ frontend สำหรับ backend เราจะใช้ Back4app และสำหรับ frontend เราจะใช้ React กับ Next.js

Backend

สร้างแอป Back4app

ขั้นตอนต่อไปนี้ต้องการให้คุณมีบัญชี Back4app ก่อน ไปที่ เข้าสู่ระบบ หรือ สร้างบัญชี หากคุณยังไม่มี

ไปที่แดชบอร์ด Back4app ของคุณและสร้างแอปใหม่โดยคลิก “Build new app”

เลือก “Backend as a Service (BaaS)”, ตั้งชื่อที่กำหนดเอง และเลือก “NoSQL Database” เป็นฐานข้อมูลของคุณ สุดท้ายคลิก “Create” เพื่อเริ่มกระบวนการสร้างแอป

Back4app จะใช้เวลาสักครู่ในการเตรียมทุกอย่างที่จำเป็นสำหรับแอปของคุณ เช่น ฐานข้อมูล การปรับขนาด และความปลอดภัย เมื่อแอปของคุณพร้อมแล้ว คุณจะถูกนำไปยังมุมมอง “Database”

กำหนดคลาสฐานข้อมูล

ต่อไปเราจะกำหนดคลาสฐานข้อมูล

เราจะมีสองคลาสดังต่อไปนี้:

1. ArticleCategory แทนหมวดหมู่บทความ (เช่น blockchain, AI, programming)
2. Article แทนบทความ บทความหนึ่งสามารถมีหลายหมวดหมู่ (M:N)

ในการสร้างคลาส ให้ไปที่แดชบอร์ด Back4app ของคุณและเลือก “Database” ในแถบด้านข้าง จากนั้นคลิก “Create a class”, ตั้งชื่อเป็น ArticleCategory และเปิดใช้งาน “Public Read and Write”

เมื่อย้ายไปยังการผลิต คุณควรปิด “Public Read and Write” และเสริมความปลอดภัยด้วย ACLs และ CLPs สำหรับข้อมูลเพิ่มเติม โปรดดู ความปลอดภัยของ Parse Server

ต่อไป เพิ่มฟิลด์ดังต่อไปนี้ลงในคลาส:

+-----------------------------+-----------------+--------------------+-------------+
| Data type                   | Name            | Default value      | Required    |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | name            | <ปล่อยว่าง>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | slug            | <ปล่อยว่าง>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | description     | <ปล่อยว่าง>      | no          |
+-----------------------------+-----------------+--------------------+-------------+

ทำขั้นตอนเดียวกันสำหรับคลาสที่สองชื่อ Article เพิ่มฟิลด์ดังต่อไปนี้:

+-----------------------------+-----------------+--------------------+-------------+
| Data type                   | Name            | Default value      | Required    |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | title           | <ปล่อยว่าง>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | slug            | <ปล่อยว่าง>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | shortContent    | <ปล่อยว่าง>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| String                      | content         | <ปล่อยว่าง>      | yes         |
+-----------------------------+-----------------+--------------------+-------------+
| Relation -> ArticleCategory | categories      | <ปล่อยว่าง>      | no          |
+-----------------------------+-----------------+--------------------+-------------+

เยี่ยมมาก นั่นคือทั้งหมด

เติมข้อมูลในฐานข้อมูล

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

ในการเพิ่ม ArticleCategory ใหม่ ให้เลือกในแถบด้านข้างและคลิก “Add a row”

คุณสามารถใช้หมวดหมู่บทความเหล่านี้หรือสร้างหมวดหมู่ของคุณเอง:

+------------+------------+---------------------------------------------------------+
| name       | slug       | description                                             |
+------------+------------+---------------------------------------------------------+
| Blockchain | blockchain | Blockchain, crypto & more!                              |
+------------+------------+---------------------------------------------------------+
| AI         | ai         | ปัญญาประดิษฐ์, LLMs, stable diffusion.        |
+------------+------------+---------------------------------------------------------+

คุณยังสามารถใช้ ChatGPT เพื่อสร้างข้อมูลตัวอย่างได้ หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ ChatGPT โปรดดู วิธีใช้ ChatGPT สร้างแอป?

ทำเช่นเดียวกันสำหรับคลาส Article:

+------------------+---------------+--------------+---------+-----------------------+
| title            | slug          | shortContent | content | categories            |
+------------------+---------------+--------------+---------+-----------------------+
| Beyond Crypto    | beyond-crypto | ...          | ...     | <blockchain.objectId> |
+------------------+---------------+--------------+---------+-----------------------+
| The Rise of AI   | rise-of-ai    | ...          | ...     | <ai.objectId>         |
+------------------+---------------+--------------+---------+-----------------------+
| What is ChatGPT? | chatgpt       | ...          | ...     | <ai.objectId>         |
+------------------+---------------+--------------+---------+-----------------------+

ตรวจสอบให้แน่ใจว่าคุณแทนที่ <blockchain.objectId> และ <ai.objectId> ด้วย objectId ของ ArticleCategory จริงๆ ในกรณีของฉันคือ SxS0yiWDij และ Hf8yBDTO79 (ดูภาพด้านบนสำหรับการอ้างอิง)

REST API

สิ่งที่ยอดเยี่ยมเกี่ยวกับ Back4app คือเมื่อคุณกำหนดคลาสฐานข้อมูล Back4app จะตั้งค่า REST API ให้โดยอัตโนมัติ REST API ที่สร้างขึ้นอนุญาตให้คุณดำเนินการ CRUD พื้นฐานบนคลาสทั้งหมดในฐานข้อมูลของคุณ

คอนโซล REST API

ในการทดสอบ API ให้ไปที่แดชบอร์ด Back4app ของคุณและเลือก “API > Console > REST” ในแถบด้านข้าง จากนั้นเลือก GET เป็นประเภทคำขอ และ classes/Article เป็นจุดสิ้นสุด สุดท้ายคลิก “Send Query” ที่มุมล่างขวาของหน้าจอเพื่อส่งคำขอ

คำขอนี้จะส่งคืนบทความทั้งหมดในฐานข้อมูลของคุณ คุณควรได้รับการตอบสนองที่คล้ายคลึงกัน:

{
   "results":[
      {
         "objectId": "yEaR8K44il",
         "title": "Beyond Crypto",
         "slug": "beyond-crypto",
         "shortContent": "...",
         "content": "...",
         "createdAt": "2023-04-17T14:26:19.016Z",
         "updatedAt": "2023-04-17T14:26:30.922Z",
         "categories": {
            "__type": "Relation",
            "className": "ArticleCategory"
         }
      },
      {
         "objectId": "l46nMkHElH",
         "title": "What is ChatGPT?",
         "slug": "chatgpt",
         "shortContent": "...",
         "content": "...",
         "createdAt": "2023-04-17T14:27:34.931Z",
         "updatedAt": "2023-04-17T14:27:42.636Z",
         "categories": {
            "__type": "Relation",
            "className": "ArticleCategory"
         }
      }
      // ...
   ]
}

คอนโซล REST ยังอนุญาตให้คุณดำเนินการ POST, PUT, และ DELETE นอกจากนี้ คุณยังสามารถใช้พารามิเตอร์ Parse Query เพื่อกรองข้อมูล จัดการความสัมพันธ์ และอื่นๆ

ตัวอย่างเช่น หากคุณต้องการดึงบทความที่อยู่ในหมวดหมู่ “Blockchain” คุณสามารถใช้คำสั่ง where ดังนี้:

where={"categories": {
    "__type": "Pointer", "className": "ArticleCategory", "objectId": "<objectId>"
}}

ตรวจสอบให้แน่ใจว่าแทนที่ <objectId> ด้วย objectId ของ blockchain

เรียนรู้เพิ่มเติมเกี่ยวกับพารามิเตอร์คำสั่งโดยการดู คู่มือ Parse REST API

cURL

คอนโซล REST ดีมาก แต่เมื่อคุณทำงานกับแอปพลิเคชันจริงๆ คุณจะต้องการวิธีการที่เหมาะกับโปรแกรมเมอร์มากกว่าในการร้องขอ API หนึ่งในเครื่องมือที่คุณสามารถใช้คือ cURL – เครื่องมือบรรทัดคำสั่งสำหรับโปรโตคอลต่างๆ เช่น HTTP, FTP, และ SMTP

ตัวอย่างคำสั่ง cURL สำหรับการรายชื่อหมวดหมู่บทความจะดูแบบนี้:

$ curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  https://parseapi.back4app.com/classes/ArticleCategory | jq

คุณสามารถรับกุญแจได้จาก “Back4app Dashboard > App Settings > Security & Keys”

อย่างที่เห็นเมื่อใช้ cURL คุณต้องระบุประเภทของ HTTP method และให้ application ID และ REST API key ของคุณ นอกจากนี้ คุณสามารถส่งผลลัพธ์เข้าไปยัง jq เพื่อจัดรูปแบบและเน้นสีอัตโนมัติ

เอกสารอ้างอิง API

อีกสิ่งที่ยอดเยี่ยมเกี่ยวกับ Back4app คือมันสร้างเอกสารอ้างอิง API อัตโนมัติสำหรับคลาสฐานข้อมูลทั้งหมดของคุณ ทุกครั้งที่คุณทำการเปลี่ยนแปลง การเปลี่ยนแปลงนั้นจะสะท้อนในเอกสารด้วย

ในการเข้าถึงเอกสารอ้างอิง API ให้เลือก “Database” ในแถบด้านข้าง และใช้จุดสามจุดที่มุมขวาบนของหน้าจอเพื่อดูตัวเลือกทั้งหมด สุดท้ายเลือก “API Reference”

เอกสารอ้างอิง API ประกอบด้วยคำอธิบายของคลาสฐานข้อมูลทั้งหมดของคุณ คำแนะนำสำหรับการดำเนินการ CRUD คำขอตัวอย่าง การตอบสนอง และโค้ดตัวอย่าง

นั่นคือทั้งหมดสำหรับ backend ในส่วนต่อไป เราจะมาดูวิธีการใช้งาน frontend ที่สามารถสื่อสารกับ backend ได้

Frontend

ดังที่กล่าวข้างต้น เราจะใช้ React กับ Next.js 13 เพื่อสร้าง frontend โดยทั่วไปมีสามวิธีในการเชื่อมต่อกับ backend ที่ใช้ Parse จาก frontend ที่ใช้ JavaScript:

1. โดยใช้ REST API (HTTP requests and responses)
2. โดยใช้ GraphQL API (ครอบคลุมใน บทความนี้)
3. โดยใช้ JavaScript SDK

คุณควรเลือกตัวเลือกสุดท้ายหรือสองสุดท้าย การใช้ REST API โดยตรงไม่แนะนำในแอปไคลเอนต์ที่สามารถใช้ Parse SDKs ได้ (เช่น JavaScript, Flutter, Android, iOS, Xamarin) เนื่องจาก Parse SDK ช่วยให้คุณเขียนโค้ดที่สะอาดขึ้นและมีความเสี่ยงต่อข้อผิดพลาดน้อยกว่า ภายในเบื้องหลัง Parse SDKs ใช้ REST API

สร้างแอป Next

ไปที่และเริ่มต้นโครงการ Next.js โดยใช้ utility create-next-app เปิดเทอร์มินัลของคุณและรันคำสั่งต่อไปนี้:

$ yarn create next-app

√ What is your project named? ... back4app-graphql
√ Would you like to use TypeScript with this project? ... No
√ Would you like to use ESLint with this project? ... Yes
√ Would you like to use the `src/` directory with this project? ... No
√ Would you like to use the experimental `app/` directory with this project? ... No
√ What import alias would you like configured? ... @/*

Successfully created a Next.js app.

ต่อไป รันเซิร์ฟเวอร์การพัฒนา:

$ yarn dev

ไปที่ http://localhost:3000 และคุณควรเห็นหน้าลงชื่อเข้าใช้ของ Next.js

ChakraUI

เพื่อให้งานสร้าง UI/UX ง่ายขึ้น เราจะใช้ ChakraUI Chakra UI เป็นไลบรารีคอมโพเนนต์ที่ไม่ซับซ้อน มีโมดูลและเป็นมิตรกับผู้ใช้ที่ให้ทุกองค์ประกอบที่จำเป็นสำหรับการพัฒนาแอปพลิเคชัน React ของคุณ

หากคุณพบปัญหาใดๆ โปรดอ้างอิง ChakraUI: Getting started with Next.js

เริ่มต้นด้วยการติดตั้ง Chakra และ dependencies โดยรัน:

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

ต่อไป ไปที่ _pages/app.tsx และห่อแอปของคุณด้วย ChakraProvider ดังนี้:

// pages/_app.tsx

import "../styles/globals.css";
import {ChakraProvider, extendTheme} from "@chakra-ui/react";

export const theme = extendTheme({});

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default MyApp;

อย่าลืมนำเข้า ChakraProvider ด้วย:

import {ChakraProvider} from "@chakra-ui/provider";

โหลดสคริปต์โหมดสีก่อนเนื้อหาเพื่อหลีกเลี่ยงการกระพริบสีแบบสุ่ม คุณสามารถใช้ _document.js ดังนี้:

// pages/_document.js

import {ColorModeScript} from "@chakra-ui/react";
import { Html, Head, Main, NextScript } from "next/document";
import {theme} from "@/pages/_app";

export default function Document() {
  return (
    <Html lang='en'>
      <Head />
      <body>
        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

เยี่ยมมาก คุณได้ติดตั้ง ChakraUI สำเร็จแล้ว

ส่วนติดต่อผู้ใช้

ต่อไปเราจะดำเนินการสร้าง UI เราจะสร้างสองหน้าดังนี้:

1. / แสดงรายการบทความ
2. /<articleSlug>/ แสดงบทความเฉพาะ

เริ่มต้นด้วยหน้า index แทนที่เนื้อหาของ pages/index.js ด้วยเนื้อหาต่อไปนี้:

// pages/index.js

import {Card, CardBody, Container, Heading, 
        Link, Spinner, Stack, Text} from "@chakra-ui/react";
import NextLink from "next/link";
import {useEffect, useState} from "react";

export default function Home() {

  const [isLoading, setIsLoading] = useState(true);
  const [articles, setArticles] = useState([]); 

  return (
    <>
      <main>
        <Container maxW="container.lg">
          <Heading as="h1" my="4">
            back4app-rest
          </Heading>
          {isLoading ? (
            <Spinner size="lg"/>
          ) : (
            <Stack spacing="4" direction="column">
              {articles.map((article, index) => (
                <Card key={index} w="100%">
                  <CardBody>
                    <Stack spacing="3">
                      <Heading size="md">
                        <Link as={NextLink} href={article.get("slug")}>
                          {article.get("title")}
                        </Link>
                      </Heading>
                      <Text>
                        {article.get("shortContent")}
                      </Text>
                    </Stack>
                  </CardBody>
                </Card>
              ))}
            </Stack>
          )}
        </Container>
      </main>
    </>
  );
}

1. เราพร้อมใช้งานสถานะ articles และ isLoading ซึ่งเราจะใช้เมื่อต้องดึงข้อมูล
2. เราใช้คอมโพเนนต์ ChakraUI พื้นฐานในการออกแบบส่วนติดต่อผู้ใช้
3. เพื่อแสดงบทความทั้งหมด เราใช้การวนลูปผ่านสถานะ articles

ต่อไป ไปที่ pages/[slug].js และเปลี่ยนเป็นดังนี้:

// pages/[slug].js

import {useRouter} from "next/router";
import {Card, CardBody, Container, Heading,
        Link, Spinner, Stack, Text} from "@chakra-ui/react";
import NextLink from "next/link";
import {useEffect, useState} from "react";

export default function Article() {

  const router = useRouter();
  const {slug} = router.query;

  const [isLoading, setIsLoading] = useState(true);
  const [article, setArticle] = useState(null);

  return (
    <>
      <main>
        <Container maxW="container.lg">
          <Heading as="h1" my="4">
            back4app-rest
          </Heading>
          {isLoading ? (
            <Spinner size="lg"/>
          ) : (
            <>
              {article == null ? (
                <Text>บทความนี้ไม่มีอยู่.</Text>
              ) : (
                <Card w="100%">
                  <CardBody>
                    <Stack spacing="3">
                      <Heading size="md">{article.get("title")}</Heading>
                      <Text>
                        {article.get("content")}
                      </Text>
                      <Text fontSize="sm">
                        โพสต์เมื่อ {new Date(article.get("createdAt")).toDateString()}
                      </Text>
                    </Stack>
                  </CardBody>
                </Card>
              )}
            </>
          )}
          <Text size="sm" mt="2" align="right">
              <Link as={NextLink} href="/">← กลับ</Link>
          </Text>
        </Container>
      </main>
    </>
  );
}

1. เราเตรียมสถานะ article เพื่อเก็บบทความ
2. เราใช้ Next Router เพื่อดึงพารามิเตอร์ slug จาก URL

การรวม Backend

ในส่วนสุดท้ายนี้ เราจะเชื่อมต่อ frontend กับ backend

ในการใช้ Parse SDK เราต้องติดตั้งก่อน ไปที่และรันคำสั่งต่อไปนี้:

$ yarn add parse @react-native-async-storage/async-storage

ต่อไป ไปที่ pages/_app.js และเริ่มต้น Parse ดังนี้:

// pages/_app.js

const PARSE_HOST_URL = "https://parseapi.back4app.com/";
Parse.initialize("YOUR_APPLICATION_ID", "YOUR_JAVASCRIPT_KEY");  // แทนที่ฉัน
Parse.serverURL = PARSE_HOST_URL;

export default function App({ Component, pageProps }) {
  return (
      // ...
  );
}

อย่าลืมนำเข้า:

import Parse from "parse/dist/parse.min.js";

เพื่อดึงบทความบนหน้า index เราสามารถใช้ Parse.Query เมื่อดึงข้อมูลแล้ว เราสามารถเก็บไว้ใน articles และตั้ง isLoading เป็น false ดังนี้:

// pages/index.js

export default function Home() {

  // ...

  const getArticles = async () => {
    const query = new Parse.Query("Article");
    setArticles(await query.find());
    setIsLoading(false);
  };

  useEffect(() => {
    getArticles();
  }, []);

  return (
    // ...
  );
}

จากนั้นเราสามารถทำสิ่งเดียวกันสำหรับบทความใน pages/[slug].js:

// pages/[slug].js

export default function Article() {

  // ...

  const getArticle = async () => {
    const query = new Parse.Query("Article");
    query.equalTo("slug", slug);
    const results = await query.find();
    setIsLoading(false);
    if (results.length === 0) return;
    setArticle(results[0]);
  };

  useEffect(() => {
    getArticle();
  }, []);

  return (
    // ...
  );
}

อีกครั้ง อย่าลืมนำเข้า Parse ในทั้งสองไฟล์

import Parse from "parse/dist/parse.min.js";

เริ่มเซิร์ฟเวอร์การพัฒนา Next (หากยังไม่ได้รัน) และเยี่ยมชม http://localhost:3000 ในเว็บเบราว์เซอร์ที่คุณชื่นชอบ คุณควรเห็นรายการบทความของคุณและบทความควรอ่านได้

สรุป

ในบทความนี้ คุณได้เรียนรู้เกี่ยวกับ APIs, RESTful APIs และข้อดีข้อเสียของพวกมัน คุณควรสามารถสร้าง RESTful APIs ที่เรียบง่ายและเชื่อมต่อกับมันจากแอป frontend ได้แล้ว

คุณสามารถรับซอร์สโค้ดสุดท้ายได้ที่ GitHub.

หากคุณชอบบทความนี้ โปรดดูบทความ วิธีสร้าง GraphQL API.