6 APIs แนะนำสำหรับ Developers

6 APIs ที่จะเอามาแนะนำกันวันนี้ เป็นเครื่องมือ ที่เอาไว้ให้ dev ทำการทดลอง เล่นกับข้อมูลต่างๆ ที่จะแสดงออกมา interface ให้กับผู้ใช้งานได้เห็น มีอะไรน่าสนใจบ้าง ไปดูกันครับ

ด้วยความที่ dev ต้องมานั่ง ทำงานกับข้อมูล และหน้าตาของ web และยิ่งบางคน รับหน้าที่ทั้ง frontent backend ในตัวคนเดียว แบบนี้จะไปเอา เวลาที่ไหนมาเตรียมข้อมูล สำหรับเล่นกับ Interface ของเรา

วันนี้ผมเลยหยิบเอา APIs เด็ดๆ ที่ตัวเองก็ใช้งานอยู่เป็นประจำ เวลาจะศึกษา Tools อะไรหรือจะเล่นกับ Interface แบบไหน ไม่ว่าจะเป็น dev ฝั่ง frontend หรือฝั่ง backend ก็สามารถใช้งานได้ทั้งหมด

6 APIs ที่ผมหยิบมานี่ เป็นตัวที่ใช้งานได้ free และสะดวก ใช้งานง่าย เหมาะสำหรับคนที่ไม่เคยใช้งาน มือใหม่ หรือจะมือเก่าก็สบาย และที่สำคัญ คือส่วนใหญ่ รองรับการทำงาน Support ได้หลากหลายรูปแบบ

ทั้งภาษาอย่าง PHP, JavaScript, Ruby หรือ Method ที่รับก็มีทั้ง Get, Put, Post, Delete ครบถ้วนเลย มาเริ่มตัวแรกกันเลยดีกว่าครับ

1.JSON Placeholder

Link : JsonPlaceholder

สำหรับเจ้านี้ ชื่อก็บอกอยู่แล้วว่าเป็น JSON ดังนั้น เราสามารถใช้ออกมาเป็น JSOn Format ได้เลย วิธีใช้งานง่ายมาก และไม่ต้องสมัครสมาชิกหรือใช้ Token ในการเข้าใช้งาน ไม่ต้อง Config อะไรเลย ไม่ต้องกังวลเรื่อง CORS ด้วย

ส่วน Resources ที่เค้าให้มา ก็ครบเพราะมีทั้ง 100 post, 500 comment, 100 albumn, 5000 photo, 10 users เรียกว่าใครที่ต้องการทดสอบระบบ ด้วย API Interface ที่ทำไว้ มีแค่เจ้านี้เจ้าเดียว ก็เป็นอันจบเลย

ตัวอย่าง Code Get

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))

ตัวอย่าง Code Post

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((json) => console.log(json));

2.Fake Store API

Link : FakeSote

เจ้านี้เค้าจะเหมาะสำหรับ Website ประเภท e-commerce หรือพวก shopping เป็นหลัก ตัวเครื่องมือ ใช้งานง่าย ไม่ยาก ข้อมูลออกมาเป็น Json ทำงานสะดวก ใครที่กำลังทำ app ด้านนี้ ตัวนี้เหมาะมาก

Resource ที่เค้าให้มาก็มีไม่น้อย มาครอบคลุมในส่วนของ 4 main หลัก Products, Cart, Users โดยส่วนตัวคิดว่า data น้อยไปหน่อย แต่ก็ออกมาได้สวยงามอยู่

ตัวอย่าง Code Get

fetch('https://fakestoreapi.com/products')
            .then(res=>res.json())
            .then(json=>console.log(json))

ตัวอย่าง Code Post

fetch('https://fakestoreapi.com/products',{
            method:"POST",
            body:JSON.stringify(
                {
                    title: 'test product',
                    price: 13.5,
                    description: 'lorem ipsum set',
                    image: 'https://i.pravatar.cc',
                    category: 'electronic'
                }
            )
        })
            .then(res=>res.json())
            .then(json=>console.log(json))

3.Unsplash API

Link : unsplash api

ถ้าจะให้พูดถึงเรื่องของ Photo คุณภาพ และจำนวนเยอะมากๆ ตอนนี้ ที่แรกๆที่คิดถึงก็คือ unsplash ครับ เพราะเจ้านี้เค้ามี คลังรูประดับใหญ่โตมากๆจริงๆ โดยตัว API ของเค้าก็มีมาให้ developer เอาไปเล่นกันได้แบบสะดวกสบายเพราะ free ไปเลย

แต่ตัส Free ของเค้านี้ เค้ามีข้อจำกัดอยู่นิดหน่อยนะครับ คือเราต้องสมัครเพื่อ Join application กับเค้าเสียก่อน demo app นั้น สามารถทำได้ 50 request ต่อชั่วโมงเท่านั้น (สำหรับ Test ก็เยอะมากแล้วอ่ะ)

ตัว Libraries หรือ SDK ที่เค้าเตรียมไว้ให้ อันนี้มีทั้งภาษา PHP, Ruby, JavaScript และ SDK Platform ทั้ง iOS, Android ให้เหล่า Dev ได้ทำงานกันแบบครอบครุมเลยทีเดียว

ความเจ๋ง ความแจ่ม ของเต้านี้ผมยกให้เรื่องของรูปครับ คือรูปที่เราจะได้ออกมานั้น เราสามารถ Get ออกมาได้ทั้ง raw image, full image, regular, small หรือแม้แต่ thumb เรียกว่าไม่ต้องกังวลการ resize เลยทีเดียว

ตัวอย่าง return

{
  "urls": {
     "raw": "https://images.unsplash.com/photo-1461988320302-91bde64fc8e4?ixid=2yJhcHBfaWQiOjEyMDd9",
     "full": "https://images.unsplash.com/photo-1461988320302-91bde64fc8e4?ixid=2yJhcHBfaWQiOjEyMDd9&fm=jpg&q=80",
     "regular": "https://images.unsplash.com/photo-1461988320302-91bde64fc8e4?ixid=2yJhcHBfaWQiOjEyMDd9&fm=jpg&fit=crop&w=1080&q=80&fit=max",
     "small": "https://images.unsplash.com/photo-1461988320302-91bde64fc8e4?ixid=2yJhcHBfaWQiOjEyMDd9&&fm=jpg&w=400&fit=max",
     "thumb": "https://images.unsplash.com/photo-1461988320302-91bde64fc8e4?ixid=2yJhcHBfaWQiOjEyMDd9&fm=jpg&w=200&fit=max"
  },
  // ... other photo fields
}

4.Quotes

Link : Quotes API

คำคมบาดใจ ที่สร้างแรงบันดาลใจได้ต่อเนื่อง ใครอยากได้คำพูด ที่ดูมีความหมายดีๆหน่อย มาใช้งาน test ของตัวเอง ไม่ต้อง copy มาวางให้เมื่อยตุ้ม จะดึงหรือ Random ออกมาใช้งานก็ง่ายทันที

ตัวอย่าง Return

{
    "success": {
        "total": 1
    },
    "contents": {
        "quotes": [
            {
                "quote": "Each player must accept the cards life deals him or her: but once they are in hand, he or she alone must decide how to play the cards in order to win the game.",
                "length": "159",
                "author": "Voltaire",
                "tags": [
                    "game",
                    "games",
                    "inspire",
                    "life",
                    "order"
                ],
                "category": "inspire",
                "language": "en",
                "date": "2022-03-08",
                "permalink": "https://theysaidso.com/quote/voltaire-each-player-must-accept-the-cards-life-deals-him-or-her-but-once-they-a",
                "id": "GhK26WkA8I_Mk3ZSV6evAQeF",
                "background": "https://theysaidso.com/img/qod/qod-inspire.jpg",
                "title": "Inspiring Quote of the day"
            }
        ]
    },
    "baseurl": "https://theysaidso.com",
    "copyright": {
        "year": 2024,
        "url": "https://theysaidso.com"
    }
}

5.Random User

Link : randomuser.me

งานนี้สำหรับ คนที่ต้องการทำ User Profile เลย ข้อมูลรบ ใช้งานง่าย มีรูปของ User มาให้ด้วย

ตัวอย่าง Code

$.ajax({
  url: 'https://randomuser.me/api/',
  dataType: 'json',
  success: function(data) {
    console.log(data);
  }
});

6.Dummy API

Link : DummyAPI

เจ้านี้ Free ก็จริงแต่ต้องทำการ Register เสียก่อน เพื่อเข้าไปรับ App ID เพื่อเอาไปใส่ไว้ใน Header แล้วก็ค่อยลองเรียกออกมาใช้งาน limit ที่ 500 calls ต่อวัน มี user, comment, tags ไว้ให้ใช้งาน

ตัวอย่าง Code

{
    "data": [
        {
            "id": "60d0fe4f5311236168a109ca",
            "title": "ms",
            "firstName": "Sara",
            "lastName": "Andersen",
            "picture": "https://randomuser.me/api/portraits/women/58.jpg"
        },
        {
            "id": "60d0fe4f5311236168a109cb",
            "title": "miss",
            "firstName": "Edita",
            "lastName": "Vestering",
            "picture": "https://randomuser.me/api/portraits/med/women/89.jpg"
        },
        {
            "id": "60d0fe4f5311236168a109cc",
            "title": "ms",
            "firstName": "Adina",
            "lastName": "Barbosa",
            "picture": "https://randomuser.me/api/portraits/med/women/28.jpg"
        },
        {
            "id": "60d0fe4f5311236168a109cd",
            "title": "mr",
            "firstName": "Roberto",
            "lastName": "Vega",
            "picture": "https://randomuser.me/api/portraits/med/men/25.jpg"
        },
        {
            "id": "60d0fe4f5311236168a109ce",
            "title": "mr",
            "firstName": "Rudi",
            "lastName": "Droste",
            "picture": "https://randomuser.me/api/portraits/med/men/83.jpg"
        }
    ],
    "total": 99,
    "page": 0,
    "limit": 5
}

ใครที่ต้องทำงานกับ Data Save Collection นี้ติดตัวไว้ ทำงานได้สะดวกมากขึ้นแน่นอนครับ

ขอบคุณที่ติดตามครับผม
ธีรภัทร เกษสกุล