10 phút để đọc
Vue.js là một framework JavaScript front-end dùng để xây dựng giao diện người dùng (UI). Nó được thiết kế để có thể tích hợp tăng dần và hoạt động tốt với các thư viện khác hoặc các dự án hiện có. Cách tiếp cận này giúp Vue.js phù hợp với cả các dự án nhỏ lẫn các single-page applications (SPA) phức tạp khi kết hợp với các công cụ và thư viện khác.
API, hay Application Programming Interface (Giao diện Lập trình Ứng dụng), là một phần mềm trung gian cho phép hai ứng dụng trò chuyện với nhau. Một API thường cung cấp dữ liệu mà các nhà phát triển khác có thể sử dụng trong ứng dụng của họ, mà không cần quan tâm đến cơ sở dữ liệu hay sự khác biệt về ngôn ngữ lập trình. Các nhà phát triển thường lấy dữ liệu từ một API trả về dữ liệu ở định dạng JSON, sau đó tích hợp vào các ứng dụng front-end. Vue.js rất phù hợp để sử dụng các loại API này.
Trong hướng dẫn này, bạn sẽ tạo một ứng dụng Vue sử dụng Cryptocompare API để hiển thị giá hiện tại của hai loại tiền điện tử hàng đầu: Bitcoin và Ethereum. Ngoài Vue, bạn sẽ sử dụng thư viện Axios để thực hiện các yêu cầu API và xử lý kết quả thu được. Axios là một lựa chọn tuyệt vời vì nó tự động chuyển đổi dữ liệu JSON thành các đối tượng JavaScript và hỗ trợ Promises, giúp mã dễ đọc và gỡ lỗi hơn. Và để giao diện thêm đẹp, chúng ta sẽ sử dụng framework CSS Foundation.
Lưu ý: Cryptocompare API chỉ được cấp phép sử dụng cho mục đích phi thương mại. Hãy xem các điều khoản cấp phép của họ nếu bạn muốn sử dụng nó trong một dự án thương mại.
Điều kiện tiên quyết
Trước khi bắt đầu hướng dẫn này, bạn sẽ cần:
- Một text editor có hỗ trợ tô sáng cú pháp JavaScript, chẳng hạn như Atom, Visual Studio Code, hoặc Sublime Text. Các editor này có sẵn trên Windows, macOS và Linux.
- Quen thuộc với việc sử dụng kết hợp HTML và JavaScript.
- Quen thuộc với định dạng dữ liệu JSON
- Quen thuộc với việc thực hiện các yêu cầu đến API.
Bước 1: Tạo một ứng dụng Vue cơ bản
Trong bước này, bạn sẽ tạo một ứng dụng Vue cơ bản. Chúng ta sẽ xây dựng một trang HTML duy nhất với một số dữ liệu giả định (mocked-up data) mà sau này chúng ta sẽ thay thế bằng dữ liệu trực tiếp từ API. Chúng ta sẽ sử dụng Vue.js để hiển thị dữ liệu giả định này. Trong bước đầu tiên này, chúng ta sẽ giữ tất cả code trong một tệp duy nhất.
Tạo một tệp mới có tên index.html bằng text editor của bạn.
Trong tệp này, thêm đoạn mã HTML sau. Đoạn mã này định nghĩa một khung HTML và lấy framework CSS Foundation cùng thư viện Vue.js từ các content delivery networks (CDNs). Bằng cách sử dụng CDN, bạn không cần tải thêm bất kỳ code nào để bắt đầu xây dựng ứng dụng của mình.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css>">
<meta charset="utf-8">
<title>Cryptocurrency Pricing Application</title>
</head>
<body>
<div class="container" id="app">
<h3 class="text-center">Cryptocurrency Pricing</h3>
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC in USD </p>
</div>
<div class="card-divider">
<p>{{ BTCinUSD }}</p>
</div>
</div>
</div>
</div>
<script src="<https://unpkg.com/vue@3>"></script>
</body>
</html>
Dòng {{ BTCinUSD }} là một placeholder cho dữ liệu mà Vue.js sẽ cung cấp, đó là cách Vue cho phép chúng ta hiển thị dữ liệu một cách declarative trên giao diện người dùng. Hãy định nghĩa dữ liệu đó.
Ngay bên dưới thẻ <script> của Vue, thêm code này để tạo một phiên bản ứng dụng Vue mới và định nghĩa một cấu trúc dữ liệu để hiển thị trên trang:
index.html
...
<script>
const { createApp } = Vue
createApp({
data() {
return {
BTCinUSD: 3759.91
}
}
}).mount('#app')
</script>
...
Đoạn code này tạo một instance (phiên bản) ứng dụng Vue mới và gắn instance đó vào phần tử có id là app. Vue gọi quá trình này là mounting (gắn) một ứng dụng. Chúng ta định nghĩa một instance Vue mới và cấu hình nó bằng cách truyền một object cấu hình. Chúng ta truyền cho instance createApp một data object trả về giá trị của BTCinUSD. Hơn nữa, chúng ta đã gọi phương thức mount của instance createApp với đối số #app để chỉ định id của phần tử mà chúng ta muốn mount ứng dụng này lên, và một tùy chọn data chứa dữ liệu mà chúng ta muốn có sẵn cho view.
Trong ví dụ này, data model của chúng ta chứa một cặp khóa-giá trị duy nhất giữ một giá trị giả định cho giá của Bitcoin: { BTCinUSD: 3759.91}. Dữ liệu này sẽ được hiển thị trên trang HTML của chúng ta, hay còn gọi là view, tại vị trí mà chúng ta đã đặt khóa trong dấu ngoặc nhọn kép như thế này:
index.html
<div class="card-divider">
<p>{{ BTCinUSD }}</p>
</div>
Cuối cùng, chúng ta sẽ thay thế giá trị hard-coded này bằng dữ liệu trực tiếp từ API.
Mở tệp này trong trình duyệt của bạn. Bạn sẽ thấy kết quả sau trên màn hình, hiển thị dữ liệu giả định:
Chúng ta đang hiển thị giá bằng đô la Mỹ. Để hiển thị nó bằng một loại tiền tệ khác, chẳng hạn như Euro, chúng ta sẽ thêm một cặp khóa-giá trị khác vào data model và thêm một cột khác vào markup. Đầu tiên, thêm dòng cho Euro vào data model:
index.html
<script>
const { createApp } = Vue
createApp({
data() {
return {
BTCinUSD: 3759.91,
BTCinEURO: 3166.21
}
}
}).mount('#app')
</script>
Sau đó thay thế phần <div class> hiện có bằng các dòng sau.
index.html
<div class="container" id="app">
<h3 class="text-center">Cryptocurrency Pricing</h3>
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC in USD </p>
</div>
<div class="card-divider">
<p>{{ BTCinUSD }}</p>
</div>
</div>
</div>
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC in EURO </p>
</div>
<div class="card-divider">
<p>{{ BTCinEURO }}</p>
</div>
</div>
</div>
</div>
Bây giờ lưu tệp và tải lại nó trong trình duyệt. Ứng dụng hiện hiển thị giá của Bitcoin bằng cả Euro và đô la Mỹ.
Trong bước này, bạn đã tạo ứng dụng Vue của mình với một số dữ liệu mẫu để đảm bảo nó tải. Chúng ta đã thực hiện tất cả công việc trong một tệp duy nhất cho đến nay, vì vậy bây giờ chúng ta sẽ chia mọi thứ thành các tệp riêng biệt để cải thiện khả năng bảo trì.
Bước 2: Tách JavaScript và HTML để tăng tính rõ ràng
Để biết mọi thứ hoạt động như thế nào, chúng ta đã đặt tất cả code vào một tệp duy nhất. Trong bước này, bạn sẽ tách code ứng dụng thành hai tệp riêng biệt: index.html và vueApp.js. Tệp index.html sẽ xử lý markup, và tệp JavaScript sẽ chứa logic ứng dụng. Chúng ta sẽ giữ cả hai tệp trong cùng một thư mục.
Đầu tiên, sửa đổi tệp index.html và xóa code JavaScript, thay thế nó bằng một liên kết đến tệp vueApp.js.
Tìm phần này của tệp:
index.html
...
<script src="<https://unpkg.com/vue@3>"></script>
<script>
const { createApp } = Vue
createApp({
data() {
return {
BTCinUSD: 3759.91,
BTCinEURO: 3166.21
}
}
}).mount('#app')
</script>
...
Và sửa đổi nó để trông như thế này:
index.html
...
<script src="<https://unpkg.com/vue@3>"></script>
<script src="vueApp.js"></script>
...
Sau đó tạo tệp vueApp.js trong cùng thư mục với tệp index.html.
Trong tệp mới này, đặt cùng một code JavaScript ban đầu ở trong tệp index.html, nhưng không có thẻ <script>:
vueApp.js
const { createApp } = Vue
createApp({
data() {
return {
BTCinUSD: 3759.91,
BTCinEURO: 3166.21
}
}
}).mount('#app')
Lưu tệp và tải lại index.html trong trình duyệt. Bạn sẽ thấy cùng một kết quả như trước đây.
Tại đây, bạn đã tách ứng dụng khỏi markup. Tiếp theo, bạn sẽ thêm nhiều dữ liệu hơn để hỗ trợ nhiều loại tiền điện tử hơn là chỉ Bitcoin.
Bước 3: Sử dụng Vue để lặp qua dữ liệu
Trong bước này, bạn sẽ tái cấu trúc dữ liệu và sửa đổi view để hiển thị giá của cả Bitcoin và Ethereum.
Mở tệp vueApp.js và sửa đổi phần return của data model để nó trông như thế này:
vueApp.js
const { createApp } = Vue
createApp({
data() {
return {
results: {"BTC": {"USD":3759.91,"EUR":3166.21}, "ETH": {"USD":281.7,"EUR":236.25}}
}
}
}).mount('#app')
Data model của chúng ta đã trở nên phức tạp hơn một chút với một cấu trúc dữ liệu lồng nhau. Bây giờ chúng ta có một khóa được gọi là results chứa hai bản ghi: một cho giá Bitcoin và một cho giá Ethereum. Cấu trúc mới này sẽ cho phép chúng ta giảm bớt sự trùng lặp trong view. Nó cũng giống với dữ liệu mà chúng ta sẽ lấy từ Cryptocompare API.
Lưu tệp.
Bây giờ hãy sửa đổi markup của chúng ta để xử lý dữ liệu một cách có lập trình hơn.
Mở tệp index.html và tìm phần này của tệp nơi chúng ta hiển thị giá của Bitcoin:
index.html
...
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC in USD </p>
</div>
<div class="card-divider">
{{BTCinUSD}}
</div>
</div>
</div>
<div class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC in EURO </p>
</div>
<div class="card-divider">
{{BTCinEURO}}
</div>
</div>
</div>
</div>
...
Thay thế nó bằng code này, code này sẽ lặp qua tập dữ liệu mà bạn đã định nghĩa.
index.html
...
<div class="columns medium-4" v-for="(result, index) in results">
<div class="card">
<div class="card-section">
<p> {{ index }} </p>
</div>
<div class="card-divider">
<p>$ {{ result.USD }}</p>
</div>
<div class="card-section">
<p> € {{ result.EUR }}</p>
</div>
</div>
</div>
...
Đoạn code này sử dụng directive v-for, hoạt động giống như một for-loop. Nó lặp qua tất cả các cặp khóa-giá trị trong data model của chúng ta và hiển thị dữ liệu cho từng cặp.
Khi bạn tải lại trong trình duyệt, bạn sẽ thấy giá giả định:
Việc sửa đổi này cho phép chúng ta thêm một loại tiền tệ mới vào dữ liệu results trong vueApp.js và nó sẽ hiển thị trên trang mà không cần thay đổi gì thêm.
Thêm một mục giả định khác vào tập dữ liệu với thông tin được tô sáng để thử:
vueApp.js
const { createApp } = Vue
createApp({
data() {
return {
results: {"BTC": {"USD":3759.91,"EUR":3166.21},
"ETH": {"USD":281.7,"EUR":236.25},
"NEW Currency":{"USD":5.60,"EUR":4.70}}
}
}
}).mount('#app')
Hãy đảm bảo có dấu phẩy ở cuối sau mục nhập Ethereum. Lưu tệp.
Nếu bây giờ bạn tải trang trong trình duyệt, bạn sẽ thấy mục nhập mới được hiển thị:
Khi chúng ta xử lý dữ liệu một cách có lập trình, chúng ta không cần thêm các cột mới vào markup một cách thủ công.
Tại đây, bạn đã sử dụng dữ liệu mẫu để xem giá cho nhiều loại tiền tệ. Bây giờ hãy lấy dữ liệu thực bằng cách sử dụng Cryptocompare API.
Bước 4: Lấy dữ liệu từ API
Trong bước này, bạn sẽ thay thế dữ liệu giả định bằng dữ liệu trực tiếp từ Cryptocompare API để hiển thị giá của Bitcoin và Ethereum trên trang web bằng Đô la Mỹ và Euro.
Để lấy dữ liệu cho trang của chúng ta, chúng ta sẽ thực hiện một yêu cầu đến https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR, yêu cầu Bitcoin và Ethereum bằng Đô la Mỹ và Euro. API này sẽ trả về một phản hồi JSON.
Sử dụng curl để thực hiện một yêu cầu đến API để xem phản hồi trong phiên terminal:
curl '<https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR>'
Bạn sẽ thấy đầu ra như thế này:
Output
{"BTC":{"USD":21694.18,"EUR":21407.64},"ETH":{"USD":1504.02,"EUR":1485.99}}
Kết quả này trông giống như data model hard-coded mà bạn đã sử dụng trong bước trước, nhưng với các giá trị hiện tại của Bitcoin và Ethereum. Tất cả những gì chúng ta phải làm bây giờ là thay đổi dữ liệu bằng cách thực hiện một yêu cầu đến URL này từ ứng dụng của chúng ta.
Để thực hiện yêu cầu, chúng ta sẽ sử dụng hàm mounted() từ Vue kết hợp với hàm GET của thư viện Axios để lấy dữ liệu và lưu trữ nó trong mảng results trong data model. Hàm mounted được gọi khi ứng dụng Vue đã được mount vào một phần tử. Khi ứng dụng Vue đã được mount, chúng ta sẽ thực hiện yêu cầu đến API và lưu kết quả. Trang web sẽ được thông báo về sự thay đổi và các giá trị sẽ xuất hiện trên trang.
Đầu tiên, mở index.html và tải thư viện Axios bằng cách thêm một script bên dưới dòng bạn đã thêm Vue:
index.html
...
<script src="<https://unpkg.com/vue@3>"></script>
<script src="<https://unpkg.com/axios/dist/axios.min.js>"></script>
<script src="vueApp.js"></script>
...
Lưu tệp, sau đó mở vueApp.js.
Sửa đổi và cập nhật vueApp.js để nó thực hiện một yêu cầu đến API và điền dữ liệu vào data model với kết quả.
vueApp.js
const url = "<https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR>";
const { createApp } = Vue
createApp({
data() {
return {
results:[]
}
},
mounted() {
axios.get(url).then(response => {
this.results = response.data
})
}
}).mount('#app')
Lưu ý rằng chúng ta đã xóa giá trị mặc định cho results và thay thế nó bằng một mảng rỗng. Chúng ta sẽ không có dữ liệu khi ứng dụng của chúng ta lần đầu tiên tải, nhưng HTML view đang mong đợi một số dữ liệu để lặp qua khi nó tải.
Hàm axios.get sử dụng một Promise. Khi API trả về dữ liệu thành công, code trong khối then được thực thi và dữ liệu được lưu vào biến results của chúng ta.
Lưu tệp và tải lại trang index.html trong trình duyệt web. Lần này, bạn sẽ thấy giá hiện tại của các loại tiền điện tử.
Nếu bạn không thấy gì, bạn có thể xem lại How To Use the JavaScript Developer Console và sử dụng JavaScript console để gỡ lỗi code của bạn. Trang có thể mất một phút để làm mới với dữ liệu từ API.
Bạn cũng có thể xem Github repository này, chứa các tệp html và js mà bạn có thể tải xuống để đối chiếu. Bạn cũng có thể clone repository đó.
Trong bước này, bạn đã sửa đổi ứng dụng của mình để gọi dữ liệu trực tiếp để xem.
Kết luận
Chỉ với chưa đầy năm mươi dòng code, bạn đã tạo một ứng dụng sử dụng API chỉ bằng ba công cụ: Vue.js, Axios, và Cryptocompare API. Bạn đã học cách hiển thị dữ liệu trên một trang, lặp qua kết quả và thay thế dữ liệu tĩnh bằng kết quả từ một API.
Bây giờ bạn đã hiểu các nguyên tắc cơ bản, bạn có thể thêm các chức năng khác vào ứng dụng của mình. Hãy sửa đổi ứng dụng này để hiển thị thêm các loại tiền tệ khác, hoặc sử dụng các kỹ thuật bạn đã học trong tutorial này để tạo một ứng dụng web khác sử dụng một API khác.
