JavaScript - Web API: Hướng dẫn dành cho người mới bắt đầu

Xin chào các bạnfuture JavaScript wizards! ? Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của Web APIs. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - tôi sẽ là người hướng dẫn thân thiện của bạn, và chúng ta sẽ cùng nhau từng bước. Cuối cùng của bài hướng dẫn này, bạn sẽ có một sự hiểu biết vững chắc về Web APIs và cách chúng làm cho các ứng dụng web của bạn mạnh mẽ và tương tác hơn. Hãy cùng nhau bắt đầu!

Web API là gì?

Hãy tưởng tượng bạn đang ở trong một nhà hàng. Bạn, người khách hàng, giống như một trình duyệt web hoặc một ứng dụng. Bếp là như một máy chủ nơi tất cả những điều kỳ diệu xảy ra. Nhưng làm thế nào bạn, ngồi tại bàn của mình, có thể nói với bếp những gì bạn muốn? Đó là lúc người phục vụ xuất hiện - và trong thế giới web của chúng ta, đó là vai trò của API!

API là viết tắt của Application Programming Interface. Một Web API là một bộ quy tắc và giao thức cho phép các ứng dụng phần mềm khác nhau giao tiếp với nhau qua internet. Nó giống như một hợp đồng giữa hai ứng dụng, xác định cách chúng có thể nói chuyện với nhau.

Hãy phân tích nó bằng một ví dụ đơn giản:

// Cách bạn có thể sử dụng một API thời tiết
fetch('https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=London')
.then(response => response.json())
.then(data => console.log(data.current.temp_c));

Trong đoạn mã này, chúng ta đang yêu cầu một API thời tiết cung cấp nhiệt độ hiện tại ở London. API đóng vai người phục vụ, đi đến bếp (máy chủ) để lấy thông tin chúng ta cần và mang nó trở lại cho chúng ta.

Browser API (Client-side JavaScript API)

Browser APIs được tích hợp sẵn trong trình duyệt web của bạn. Chúng giống như một bộ công cụ đi kèm với ngôi nhà của bạn - bạn không cần phải ra ngoài để mua chúng, chúng đã có sẵn cho bạn để sử dụng!

Hãy nhìn vào một Browser API phổ biến: DOM (Document Object Model) API.

// Thay đổi văn bản của một phần tử HTML
document.getElementById('greeting').textContent = 'Hello, Web API World!';

// Thêm một bộ监听 sự kiện nhấp
document.getElementById('myButton').addEventListener('click', function() {
alert('Button clicked!');
});

Trong các ví dụ này, chúng ta đang sử dụng DOM API để tương tác với các phần tử HTML trên trang của mình. Nó giống như việc bạn có một remote điều khiển cho trang web của mình!

Server API

Server APIs chạy trên máy chủ và cung cấp dữ liệu hoặc chức năng cho các ứng dụng khách. Chúng giống như bếp trong ví dụ nhà hàng của chúng ta - nơi lưu trữ tất cả các nguyên liệu và chuẩn bị các món ăn.

Một loại Server API phổ biến là RESTful API. Dưới đây là cách bạn có thể sử dụng một RESTful API:

fetch('https://api.example.com/users')
.then(response => response.json())
.then(data => {
data.forEach(user => {
console.log(user.name);
});
});

Đoạn mã này lấy danh sách người dùng từ một API máy chủ và ghi tên của mỗi người dùng vào console. Nó giống như việc yêu cầu bếp liệt kê tất cả các công thức của họ!

Third-party APIs

Third-party APIs là các dịch vụ được cung cấp bởi các công ty hoặc nhà phát triển bên ngoài. Chúng giống như các nhà hàng chuyên nghiệp mà người phục vụ (mã của bạn) có thể ghé thăm để lấy các món ăn cụ thể (dữ liệu hoặc chức năng).

Hãy nhìn vào cách chúng ta có thể sử dụng API GitHub:

fetch('https://api.github.com/users/octocat')
.then(response => response.json())
.then(data => {
console.log(`${data.name} has ${data.public_repos} public repositories`);
});

Đoạn mã này lấy thông tin về người dùng GitHub 'octocat' và ghi tên của họ và số lượng kho lưu trữ công khai. Nó giống như việc hỏi một thư viện về một tác giả cụ thể và sách của họ!

Fetch API: Một ví dụ về Web API

Fetch API là một công cụ mạnh mẽ cho việc gửi yêu cầu mạng. Nó giống như một người phục vụ siêu hạng có thể đi đến bất kỳ nhà hàng nào (máy chủ) và mang về bất kỳ món ăn nào (dữ liệu) bạn muốn!

Dưới đây là một ví dụ chi tiết hơn:

fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log('Data received:', data);
// Làm điều gì đó với dữ liệu ở đây
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
});

Đoạn mã này gửi một yêu cầu đến máy chủ, kiểm tra xem phản hồi có ổn không, chuyển đổi phản hồi thành JSON, và sau đó ghi dữ liệu. Nếu có bất kỳ điều gì sai sót, nó bắt lấy lỗi và ghi nó. Nó giống như việc đặt một订单, kiểm tra xem món ăn có phải là món bạn đã đặt hay không, và sau đó tận hưởng nó - hoặc phàn nàn với quản lý nếu có điều gì không đúng!

JavaScript Web API List

Có rất nhiều Web APIs có sẵn trong JavaScript. Dưới đây là bảng một số loại phổ biến:

Tên API	Mô tả
DOM (Document Object Model)	Cho phép tương tác với các tài liệu HTML và XML
Fetch API	Cung cấp một giao diện cho việc lấy tài nguyên
Geolocation API	Cung cấp vị trí địa lý của thiết bị
Web Storage API	Cho phép dữ liệu được lưu trữ trong trình duyệt
Canvas API	Cho phép rendering động, scriptable của các hình 2D và hình ảnh
Web Audio API	Cung cấp một hệ thống mạnh mẽ cho việc kiểm soát âm thanh
WebRTC API	Cho phép Trực tiếp Giao tiếp giữa các trình duyệt
Web Workers API	Cho phép các script chạy trong nền
WebGL API	Cung cấp API đồ họa 3D
Battery Status API	Cung cấp thông tin về tình trạng pin của thiết bị

Nhớ rằng, học về Web APIs giống như học nấu ăn - nó đòi hỏi sự thực hành, nhưng một khi bạn đã thành thạo, bạn có thể tạo ra những điều kỳ diệu! Đừng sợ thử nghiệm và thử các API khác nhau. Ai biết được? Bạn có thể sẽ tạo ra ứng dụng web lớn tiếp theo!

Tôi hy vọng hướng dẫn này đã mang lại cho bạn một sự giới thiệu thú vị vào thế giới của Web APIs. Hãy tiếp tục lập trình, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ! Nếu bạn có bất kỳ câu hỏi nào, chỉ cần tưởng tượng tôi đang ở bên bạn, sẵn sàng giúp đỡ. Chúc các bạn lập trình vui vẻ! ??‍??‍?

Credits: Image by storyset