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:

<img src=”@Url.Content(item.imageurl)” alt=”Image” />

Để 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!

Rút trích dữ liệu Tỉ giá hối đoái của ngân hàng Vietcombank bằng ASP.NET Core

Dạo này thiết kế Website với ASP. NET Core rầm rộ, với nhiều lợi ích được mô tả ở đây: https://docs.microsoft.com/en-us/aspnet/core/?view=aspnetcore-2.1

Nên Tui cũng ngứa tay hướng dẫn các bạn 1 bài nhỏ nhỏ dùng ASP .NET Core đó là “Rút trích dữ liệu Tỉ giá hối đoái của ngân hàng Vietcombank”.

Cụ thể Ngân Hàng Vietcombank có công bố Tỉ giá hối đoái dưới dạng XML trên Website. Chúng ta có thể rút trích dữ liệu từ đây về để phục vụ cho các vấn đề khác (tra cứu tỉ giá, kết hợp du lịch)

Cụ thể các bạn vào website của Ngân Hàng: https://www.vietcombank.com.vn/

Kéo xuống dưới cùng Website, nhìn vào góc phải thấy mục “Xem thông tin tỷ giá các chi nhánh tại đây”

ta nhấn vào nút này, kết quả ta được dẫn tới trang http://www.vietcombank.com.vn/ExchangeRates/:

Nhấn vào nút XML ở trên, ta tiếp tục được dẫn tới 1 link khác : http://www.vietcombank.com.vn/ExchangeRates/ExrateXML.aspx

Bây giờ nhiệm vụ của ta là xây dựng 1 Website ASP .NET Core để truy suất và hiển thị toàn bộ tỉ giá trong này lên giao diện.

Ta khởi động Visual Studio (Tui dùng VS 2017 nha)-> rồi vào File / chọn New / chọn Project:

Lúc này màn hình tạo Project hiển thị ra như dưới đây:

Ta chọn ASP .NET Core Web Application

Đặt tên Project là “Vietcombank”, nhớ lưu vào đâu đó khác ổ C hay Desktop là OK (Desktop là ổ C đó nha) rồi bấm OK:

Lúc này màn hình tạo Project mới hiển thị ra, ta chọn Web Application (Model- View – Controllers), phía trên chọn ASP .NET Core 2.1, nhớ bỏ tick Configure for HTTPs. sau đó nhấn OK nha, Project sẽ được tạo ra như dưới đây:

Bây giờ ta tiến hành tạo các  lớp C# dạng POCO, cấu trúc của nó giống như Ngân Hàng Vietcombank cung cấp trong XML tỉ giá:

Như vậy dựa vào cấu trúc này thì ta phải tạo 2 Lớp C#. Đó là lớp Exrate và lớp ExrateList.

Exrate có các thuộc tính: CurrencyCode, CurrencyName, Buy, Transfer, Sell. Tất cả chúng đề có kiểu chuỗi là Ok (có thể Buy, Transfer, Sell ta để kiểu double cũng ngon lành (nhưng vì chả tính toán gì cả, ta phang luôn kiểu string)

ExrateList Có các thuộc tính: DateTime, List<Exrate>, Source.

Bây giờ ta lần lượt tạo các lớp:

Đầu tiên là Lớp Exrate, ta bấm chuột phải vào Models/ chọn Add/ Chọn Class:

màn hình Tạo lớp hiển thị ra như dưới đây:

Ta chọn Class, Name đặt là Exrate.cs rồi bấm Add:

Coding cho lớp Exrate này mapping với các thuộc tính, tag được định nghĩa trong XML của Ngân hàng Vietcombank:

[code language=”csharp”]

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Xml.Serialization;
namespace Vietcombank.Models
{
public class Exrate
{
[XmlAttribute(AttributeName = "CurrencyCode")]
public string CurrencyCode { get; set; }
[XmlAttribute(AttributeName = "CurrencyName")]
public string CurrencyName { get; set; }
[XmlAttribute(AttributeName = "Buy")]
public string Buy { get; set; }
[XmlAttribute(AttributeName = "Transfer")]
public string Transfer { get; set; }
[XmlAttribute(AttributeName = "Sell")]
public string Sell { get; set; }
}
}

[/code]

Ở trên thấy Tui using System.Xml.Serialization, đây là thư viên liên quan XML, cho phép chuyển hóa từ XML -> C# class

Còn các [XmlAttribute(AttributeName = “CurrencyCode”)] để nói cho C# hiểu nó cần mapping đúng thuộc tính nào trong tag XML. Tên Property của C# có thể viết lung tung, nhưng trong XmlAttribute phải viết chính xác những gì Ngân Hàng Vietcombank cung cấp.

Tiếp tục lặp lại thao tác thêm lớp mới cho ExrateList:

chỉnh sửa coding cho nó như sau:

[code language=”csharp”]

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Xml.Serialization;
namespace Vietcombank.Models
{
[XmlRoot(ElementName = "ExrateList")]
public class ExrateList
{
[XmlElement(ElementName = "DateTime")]
public string DateTime { get; set; }
[XmlElement(ElementName = "Exrate")]
public List<Exrate> Exrates { get; set; }
[XmlElement(ElementName = "Source")]
public string Source { get; set; }
}
}

[/code]

Bước tiếp theo là tạo 1 Controller tên là TiGiaController để rút trích dữ liệu Tỉ giá của Ngân hàng đồng thời chuyển hóa nó qua C# class để hiển thị lên Website riêng của mình:

Bấm chuột phải vào Controllers/ chọn Add/ chọn Controller…:

màn hình lựa chọn Controller xuất hiện:

Ta chọn MVC Controller Empty rồi bấm Add, màn hình yêu cầu đặt tên cho Controller xuất hiện:

ta đổi Default thành TiGia rồi bấm Add, kết quả:

Lúc này hàm Index hiển thị ra, ta bấm chuột phải vào Index để tạo View bằng cách chọn Add View… (giao diện Website cho nó):

Lúc này màn hinh tạo View hiển thị ra:

Phần Template: Chọn List (hiển thị danh sách, trong View nó là Table đó)

Phần Model calss: Chọn Exrate -> để hiển thị danh sách Exrate trong lớp ExrateList

các thông số khác để vậy nha, giờ bấm ADD:

Kết quả View hiển thị ra như dưới đây:

Coding HTML đầy đủ của Tigia/Index.cshtml

[code language=”html”]

@model IEnumerable<Vietcombank.Models.Exrate>

@{
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.CurrencyCode)
</th>
<th>
@Html.DisplayNameFor(model => model.CurrencyName)
</th>
<th>
@Html.DisplayNameFor(model => model.Buy)
</th>
<th>
@Html.DisplayNameFor(model => model.Transfer)
</th>
<th>
@Html.DisplayNameFor(model => model.Sell)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.CurrencyCode)
</td>
<td>
@Html.DisplayFor(modelItem => item.CurrencyName)
</td>
<td>
@Html.DisplayFor(modelItem => item.Buy)
</td>
<td>
@Html.DisplayFor(modelItem => item.Transfer)
</td>
<td>
@Html.DisplayFor(modelItem => item.Sell)
</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]

Giờ quay lại Controller: TiGiaController, tiến hành chỉnh sửa coding:

[code language=”csharp”]

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using System.Xml.Serialization;
using Vietcombank.Models;

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

// link XML của Vietcombank
string url = "https://www.vietcombank.com.vn/exchangerates/ExrateXML.aspx";

//dùng HTTPWebRequest
HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);
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();
//convert từ XML qua C# model:
XmlSerializer serializer = new XmlSerializer(typeof(ExrateList));
ExrateList exrateList =(ExrateList) serializer.Deserialize(responseStream);
//lấy danh sách Extrates truyền qua cho View
return View(exrateList.Exrates);
}
}
}

[/code]

Nhấn F5 chạy lên, ta có kết quả Website như mong muốn:

Như vậy Tui đã trình bày xong cách dùng ASP .NET Core để truy suất dữ liệu Tỉ giá của ngân hàng Vietcombank, cách thức chuyển hóa từ XML thành C# class, cũng như hướng dẫn cách làm với Model – View – Controller trong ASP .NET Core.

Đây là source code của Project: Tải tại đây

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