Giao diện lập trình ứng dụng (API) là một kênh giao tiếp giữa hai ứng dụng. Cho dù bạn có biết hay không, chắc hẳn bạn đã từng sử dụng API tại một số thời điểm khi duyệt internet hoặc sử dụng các chương trình trong cuộc sống hàng ngày của mình.

Mặc dù các API thường gửi dữ liệu phức tạp dưới dạng phản hồi, nhưng làm cách nào bạn có thể hiểu và sử dụng thông tin này để phục vụ người dùng của mình? API làm cho cuộc sống trở nên dễ dàng, cho cả nhà phát triển mới cũng như những nhà phát triển dày dạn kinh nghiệm. Vì vậy, bạn cần biết cách sử dụng chúng với ứng dụng của mình.

Trong bài viết này, chúng tôi sẽ xem xét cách bạn có thể sử dụng API để phục vụ các chương trình của mình.

API hoạt động như thế nào?

Các nhà phát triển tạo API dưới dạng sản phẩm có thể được phục vụ cho các lập trình viên khác. Mục đích ở đây là làm cho các quy trình phát triển web phức tạp trở nên dễ dàng, hiệu quả và nhanh hơn cho các nhà phát triển hoặc doanh nghiệp.

Hầu hết các doanh nghiệp hiện nay phụ thuộc vào API của bên thứ ba để giải quyết vấn đề và phục vụ khách hàng tốt hơn. Tuy nhiên, việc sử dụng API không phức tạp như nhiều người vẫn nghĩ. Bạn có thể coi đó là giải pháp của bên thứ ba cung cấp cho bạn phản hồi cụ thể dưới dạng dữ liệu khi bạn thực hiện một yêu cầu HTTP cụ thể.

Sử dụng API giống như đặt hàng tại một nhà hàng pizza. Bạn không thể vào bếp để nói với họ những gì bạn muốn, bạn cần một người phục vụ nhận đơn đặt hàng, giao nó cho nhà bếp và sau đó quay lại với chiếc bánh pizza mà bạn muốn.

Hãy tưởng tượng API là mối liên kết giữa bạn và nhà bếp. Trong trường hợp này, bạn là khách hàng và máy chủ là API. Người phục vụ sẽ trả lời với chiếc bánh pizza (dữ liệu) của bạn. Trong một API thực, ứng dụng web của bạn là ứng dụng khách yêu cầu sử dụng nội dung của nhà cung cấp thông qua API của họ bằng cách thực hiện các yêu cầu HTTP điểm cuối.

Xem thêm bài viết hay:  TOP 7 ý tưởng trang trí Halloween độc đáo, ngập tràn không khí ma mị

Điểm cuối API là gì?

Kết nối với một API yêu cầu bạn cắm chương trình của mình vào một điểm cuối API (API Endpoint). Bạn có thể coi đây là một kết nối hai chiều. Điểm cuối được kết nối với chương trình của bạn sẽ gửi yêu cầu, trong khi điểm cuối được kết nối với API gửi lại cho bạn một phản hồi cụ thể.

Điểm cuối là một URL yêu cầu và cung cấp cho khách hàng quyền truy cập trực tiếp vào tài nguyên của API.

Ngoài việc lấy dữ liệu bằng API, bạn cũng có thể POST các yêu cầu từ nhà cung cấp tới máy khách, sử dụng phương thức PUT để nhận thêm thông tin từ nhà cung cấp và sử dụng phương thức DELETE để xóa dữ liệu hiện có khỏi chương trình của bạn. Mỗi phương pháp này thường có sẵn trong tài liệu của API.

Tiêu chí kết nối với API

Việc tích hợp API với chương trình của bạn không phải là một quyết định tự phát cần được suy nghĩ trước. Bạn phải biết bạn muốn thông tin gì và bạn muốn bao nhiêu thông tin. Điều này làm giảm độ phức tạp, đặc biệt nếu bạn đang xử lý dữ liệu JSON dưới dạng mảng nhiều chiều. Nó cũng cho phép bạn lấy thông tin cụ thể mà bạn cần cho chương trình của mình.

Có hàng trăm API với các quy tắc khác nhau để kết nối với chúng. Một số API là nguồn mở và miễn phí, nhưng nhiều API khác chỉ có thể truy cập được khi đăng ký.

Mặc dù một số API liền mạch, đơn giản và không yêu cầu bất kỳ điều kiện nào, nhưng những API khác có thể yêu cầu bạn đáp ứng các điều kiện như tạo khóa API hoặc đăng ký tài khoản nhà phát triển trước khi có thể kết nối với điểm cuối của chúng.

Tuy nhiên, một trong những phần quan trọng nhất của bất kỳ API nào là tài liệu của nó. Tốt nhất bạn nên đọc và làm theo tài liệu của bất kỳ API nào mà bạn định kết nối để biết hướng dẫn về cách viết mã và sử dụng tài nguyên của API vì mỗi API có các phương thức và hướng dẫn kết nối riêng.

Để kết nối với một API, bạn cần biết các ngôn ngữ lập trình mà nó hỗ trợ.

Cách kết nối với API: Ví dụ thực tế

Một vài ví dụ sẽ cho bạn thấy kiến ​​thức cơ bản về cách bạn có thể sử dụng dữ liệu API với ứng dụng của mình. Nhưng trước khi tiếp tục, chúng ta hãy xem qua một số bài viết của IIHS về API và cách bạn có thể khai thác chúng.

Xem thêm bài viết hay:  Sơ đồ tư duy Việt Bắc – Tác giả

Ví dụ: chúng tôi có một bài viết chi tiết về cách bạn có thể kết nối với API Weatherstack, cho phép bạn truy cập vào dữ liệu thời tiết theo thời gian thực. Chúng tôi cũng đã viết về cách bạn có thể sử dụng API Mediastack, một API trả phí mà bạn có thể sử dụng để thêm tiêu đề tin tức vào trang web của mình.

Bây giờ, hãy xem một số ví dụ mã ngắn về cách kết nối với API.

Cách sử dụng Iro.js . API bộ chọn màu

Iro.js là một API đơn giản cho phép bạn thêm bộ chọn màu miễn phí vào trang web của mình. Khi bạn chọn một điểm màu trên bánh xe màu, API sẽ trả về mã thập lục phân hoặc mã RGB của màu đó. Để kết nối với API iro.js, tất cả những gì bạn cần làm là dán điểm cuối mạng phân phối nội dung (hoặc CDN) vào phần này. cái đầu của DOM của bạn.

Tài liệu đầy đủ về API này có sẵn tại iro.js.org. Hãy xem cách bạn có thể kết nối với API này bằng mã mẫu bên dưới:

<!DOCTYPE html>
<html>
<head>
<title>Practice Slider</title>
<script src="https://funix.edu.vn/chia-se-kien-thuc/ket-noi-voi-api-vao-ung-dung/https://cdn.jsdelivr.net/npm/@jaames/[email protected]"></script>
</head>
<body>
      <button   onclick="sample()">Display color picker</button>
<div > </div>
<div > </div>
</body>
<script>
let colors=  document.getElementById('color-code');
 const sample= ()=>{
 var colorPicker = new iro.ColorPicker('#color-circle', {
   // Set the size of the color picker
   width: 320,
   // Set the initial color to pure red
   color:"#ff0000"
 });
 colorPicker.on(['color:change', 'color:init'], function(color) {
  // log the current color as a HEX string
   colors.innerHTML=color.hexString;
 });
};
</script>
</html>

Trong trường hợp API mẫu ở trên, bạn không cần khóa API để kết nối với nó. Tuy nhiên, để hiểu rõ hơn, hãy xem kỹ JavaScript. Để kết nối với API này, chúng ta chỉ cần gọi hàm Bộ chọn màu từ lớp học irosau đó chuyển đổi Tôi hộp chứa bánh xe màu vào lớp.

Điểm cuối API iro.js rất dễ kết nối vì các nhà phát triển của nó đã thực hiện thêm công việc viết mã cho người dùng. Hình ảnh dưới đây là kết quả của đoạn mã trên.

Để xem sự thay đổi màu diễn ra như thế nào, bạn có thể mở một tệp HTML khác và dán đoạn mã sau vào phần script nó là :

var colorPicker = new iro.ColorPicker('#color-pick', {
   // Set the size of the color picker
   width: 400,
   // Set the initial color to pure red
   color:"#ff0000"
 });
const myColor =(color)=>{
	console.log(color.hexString);
};
colorPicker.on("color:change", myColor);

Đoạn mã trên ghi lại các giá trị màu thập lục phân mỗi khi bạn thay đổi vị trí bộ chọn màu trên bánh xe.

Cách sử dụng API trao đổi tiền tệ NoCodeAPI

NoCodeAPI cung cấp nhiều API bao gồm API chuyển đổi tiền tệ. Để kết nối với điểm cuối trao đổi tiền tệ của nó, hãy truy cập thị trường NoCodeAPI và tạo một tài khoản.

Khi bạn đăng nhập, có một thanh tìm kiếm ở đầu trang. Trong thanh tìm kiếm đó, gõ thu đổi ngoại tệ (trao đổi tiền tệ), khi truy vấn của bạn xuất hiện, hãy nhấp vào Hoạt động (Đã kích hoạt).

Xem thêm bài viết hay:  Cách khắc phục IDM không bắt link Youtube, Chrome, Firefox, Cốc Cốc

Trên trang tiếp theo, nhấp vào Tạo API trao đổi tiền tệ (Tạo API trao đổi tiền tệ). Tiếp theo, nhập tên ưa thích cho API và nhấp vào Tạo ra (Tạo ra).

Khi API được tạo, hãy nhấp vào Xem tài liệu (Trình xem tài liệu). Tiếp theo, chọn một ngôn ngữ ưa thích để xem mã kết nối với điểm cuối API. Sau đó, bạn có thể sao chép mã mẫu đó và dán vào ứng dụng của mình để tùy chỉnh thêm.

Hãy xem mã ví dụ bên dưới để chuyển đổi tiền tệ:

<!DOCTYPE html>
<html>
<head>
<title>Currency converter</title>
</head>
<div > </div>
</body>
<script>
	let currency=  document.getElementById('currency');
async function callingFn() {
    try {
        const response = await fetch("https://funix.edu.vn/chia-se-kien-thuc/ket-noi-voi-api-vao-ung-dung/https://v1.nocodeapi.com/techyprem/cx/FHNXhKRkWDCvMehl/rates/convert?amount=10&from=USD&to=Eur", {
            method: "get",
            headers: {
                "Content-Type": "application/json"
            }
        });
        const json = await response.json();
        currency.innerHTML="Success:" + JSON.stringify(json);
    } catch (error) {
        console.error("Error:", error);
    }
}
callingFn();
<script>
</html>

Mã ở trên chỉ là phiên bản sửa đổi của mã trong tài liệu. Tuy nhiên, hãy chú ý đến các tham số chuyển đổi trong biến phản hồi của JavaScript.

Đây là đầu ra JSON thô:

Success:{"query":{"from":"USD","to":"EUR","amount":10},"info":{"time":1604587505388,"rate":0.844865},"result":8.44865,"text":"10 USD = 8.44865 EUR"}

Tận dụng API

Sử dụng API cho ứng dụng cho phép bạn hoàn thành dự án nhanh hơn. Mặc dù một số tài liệu về API có thể mang tính chất kỹ thuật, nhưng cũng có rất nhiều tài liệu hữu ích cho người mới.

Tuy nhiên, như đã nói, để tận dụng tối đa bất kỳ API nào, bạn phải nghiên cứu kỹ tài liệu của nó và tuân theo các quy tắc để kết nối với nó.

Mặc dù chúng tôi đã sử dụng JavaScript cho các ví dụ ở đây, hầu hết API vẫn hỗ trợ các ngôn ngữ lập trình khác. Bạn có thể xem thông tin về hỗ trợ ngôn ngữ từ tài liệu của bất kỳ API nào.

TIẾP TỤC ĐỌC: Tại sao nên sử dụng CDN để cải thiện trải nghiệm người dùng trang web

Văn Nguyễn

Dịch từ: https://www.makeuseof.com/how-apis-work-and-how-to-use-them/