Nhúng API Tỉ giá hối đoái của Ngân hàng Đông Á vào Website riêng – ASP.NET Core

Trong bài lấy tỉ giá hối đoái của Ngân Hàng Vietcombank, họ dùng XML để lưu trữ dữ liêu. Tui cũng đã hướng dẫn cách đọc XML từ service của Ngân hàng rồi.

Trong bài này, Tui hướng dẫn các bạn cách nhúng API tỉ giá hối đoái của Ngân Hàng Đông Á vào Website ASP .NET Core

API của họ được viết bằng JSON: http://www.dongabank.com.vn/exchange/export

Ta phân tích 1 chút xíu về cấu trúc json này của Ngân hàng Đông Á.

Thứ nhất: Cấu trúc trên Ngân Hàng Đông Á đã cố tình sửa JSON bằng cách thêm ngoặc tròn bao lấy 2 đầu của dữ liệu, ta cần xóa bỏ nó đi để dữ liệu trở về đúng cấu trúc của JSON
Thứ 2: Ở ngoài cùng là 1 Json, bên trong là 1 mảng các tỉ giá được lưu vào biến items. Mỗi 1 phần tử trong items (Ta gọi là nó các dòng tỉ giá), nó có các thuộc tính: type, imageurl, muatienmat, muack, bantienmat, banck
Thứ 3: API này Của Đông Á họ đã cấm cách truy suất thông thường, ta phải bổ sung các header là: “User-Agent” = “Mozilla/5.0 ( compatible ) ” và “Accept”] = “*/*”

Mục tiêu sau khi chạy xong Website thì nó phải nhúng được API tỉ giá của Đông Á Bank và hiển thị lên giao diện như sau:

Các bước làm làm chi tiết, các bạn thao tác theo Tui hướng dẫn:

Mở Visual Studio 2017/ chọn File/ New / Project:

Màn hình New Project sẽ hiển thị ra như dưới đây:

Chọn ASP.NET Core Web Application

đặt tên Project là “DongABank”, chọn nơi lưu trữ phù hợp rồi nhấn nút OK:

Màn hình chọn New ASP.NET Core Web Application hiển thị như dưới đây:

Ta chọn Web Application (Model – View – Controller) và cấu hình như trên rồi nhấn nút OK để tạo Project:

Quan sát Cấu trúc JSON của Ngân Hàng Đông Á, Ta sẽ tạo 1 Lớp tên là Item (lưu ý Lớp này tên gì cũng được vì không được định nghĩa tên), thuộc tính của nó bao gồm:

Ta bấm chuột phải vào Models/Add/ Class:

Sau khi chọn Class-> màn hình sau xuất hiện:

Ta chọn Class rồi đặt tên Lớp là: Item.cs rồi bấm ADD:

Bổ sung Coding cho Item.cs dựa vào cấu trúc JSON của Ngân Hàng Đông Á Cung cấp:

[code language=”csharp”]

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace DongAbank.Models
{
public class Item
{
public string type { get; set; }
public string imageurl { get; set; }
public string muatienmat { get; set; }
public string muack { get; set; }
public string bantienmat { get; set; }
public string banck { get; set; }
}
}

[/code]

Tiếp tục tạo thêm 1 Lớp để lưu trữ danh sách các item: Bấm chuột phải vào models/ chọn Add/ chọn Class:

Cửa sổ tạo Class hiển thị ra:

Đặt tên lớp là TiGiaDongA (lưu ý thích đặt tên gì cũng được, miễn thuộc tính của nó phải chính xác là items)

Coding của TiGiaDongA.cs:

[code language=”csharp”]

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace DongAbank.Models
{
public class TiGiaDongA
{
public List<Item> items { get; set; }
}
}

[/code]

Bước tiếp theo tạo Controller cho Website. Cụ thể là tên TiGiaDongABankController:

Bấm chuột phải vào thư mục Controller/ chọn Controller:

màn hình chọn Controller xuất hiện . Ta chọn MVC Controller – Empty:

Sau đó nhấn nút ADD:

Ta đặt tên là TiGiaDongABankController rồi bấm Add:

Hiểu chỉnh coding của Controller này để trả về Danh sách Item:

[code language=”csharp”]

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using DongAbank.Models;
using System.Net;
using System.IO;

namespace DongAbank.Controllers
{
public class TiGiaDongABankController : Controller
{
public IActionResult Index()
{
string siteContent = string.Empty;

// link JSON của DongA
string url = "http://www.dongabank.com.vn/exchange/export";

//dùng HTTPWebRequest
HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);
//với Đông Á Bank phải thêm 2 dòng lệnh này:
request.Headers["User-Agent"] = "Mozilla/5.0 ( compatible ) ";
request.Headers["Accept"] = "*/*";
request.AutomaticDecompression = DecompressionMethods.GZip;

//lấy đối tượng Response
HttpWebResponse response = (HttpWebResponse)request.GetResponse();
//gọi hàm GetResponseStream() để trả về đối tượng Stream
Stream responseStream = response.GetResponseStream();
StreamReader reader = new StreamReader(responseStream);
string data = reader.ReadToEnd();
//vì dữ liệu bị bao bọc là ngoặc tròn, ta đổi nó thành rỗng để đúng cấu trúc Json
data = data.Replace(")", "").Replace("(", "");
//chuyển dữ liệu Json qua C# class:
TiGiaDongA tigia = (TiGiaDongA)JsonConvert.DeserializeObject(data,typeof(TiGiaDongA));
//trả về cho View là 1 danh sách các Item (các dòng Tỉ Giá)
return View(tigia.items);
}
}
}

[/code]

Bây giờ ta tạo View cho Controller tỉ giá:

Bấm chuột phải vào hàm Index/ chọn Add View…

Màn hình Add MVC View hiển ra như dưới đây, ta chọn Template là List, Model class là Item:

Chọn xong thì bấm ADD, lúc này trang Index.cshtml được tạo ra với coding Razor như dưới đây:

Chi tiết coding cho Index.cshtml:

[code language=”html”]

@model IEnumerable<DongAbank.Models.Item>

@{
ViewData["Title"] = "Index";
}

<h2>Index</h2>

<p>
<a asp-action="Create">Create New</a>
</p>
<table class="table">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.type)
</th>
<th>
@Html.DisplayNameFor(model => model.imageurl)
</th>
<th>
@Html.DisplayNameFor(model => model.muatienmat)
</th>
<th>
@Html.DisplayNameFor(model => model.muack)
</th>
<th>
@Html.DisplayNameFor(model => model.bantienmat)
</th>
<th>
@Html.DisplayNameFor(model => model.banck)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.type)
</td>
<td>
@Html.DisplayFor(modelItem => item.imageurl)
</td>
<td>
@Html.DisplayFor(modelItem => item.muatienmat)
</td>
<td>
@Html.DisplayFor(modelItem => item.muack)
</td>
<td>
@Html.DisplayFor(modelItem => item.bantienmat)
</td>
<td>
@Html.DisplayFor(modelItem => item.banck)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
@Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
@Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
</td>
</tr>
}
</tbody>
</table>

[/code]

Bây giờ ta F5 chạy lên sẽ có được kết quả như dưới đây:

Ở đây ta cần chỉnh sửa 2 chỗ:

Hiển thị Hình Ảnh thay vì hiển thị link hình ảnh
Chỉnh tiêu đề của danh sách Tỉ giá

Ta chỉnh coding thành hiển thị hình ảnh như sau:

ở trên Tui đã thay thế thành thẻ img để hiển thị hình ảnh, và bên trong là lệnh @Url.Content để lấy hình ảnh từ Http về trình duyệt:

Để chỉnh sửa tiêu đề thì đơn giản rồi, tự gõ vào thôi:

Bây giờ F5 chạy Website lên, ta có kết quả mới đúng như mong muốn:

Như vậy Tui đã hướng dẫn các bạn xong cách thức nhúng API Tỉ Giá Hối Đoái Của Ngân Hàng Đông Á vào Website riêng của bạn, dùng ASP .NET Core. Dữ liệu là JSON, biết cách đứa JSON thành C# class.

Coding bạn tải ở đây: Link tải coding ở đây

Chúc các bạn thành công!