BÁO cáo GIỮA kì CÔNG NGHỆ NET đề tài tìm hiểu blazor trong NET core 6 0

Blazor hoặc chạy phía máy chủ, trong trường hợp đó, nó thực thi trên máychủ và trình duyệt hoạt động như một thiết bị đầu cuối hoặc nó chạy trong chính trình duyệtbằng cách sử dụng WebAs

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM THÀNH PHỐ HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO GIỮA KÌ

CÔNG NGHỆ NET

Đề tài:

Tìm hiểu Blazor trong NET Core 6.0

Thành phố Hồ Chí Minh, ngày 20 tháng 11 năm 2022

TRƯỜNG ĐẠI HỌC SƯ PHẠM THÀNH PHỐ HỒ CHÍ MINH

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO GIỮA KÌ

Mã lớp: 2211COMP106401

Giáo viên hướng dẫn: Thầy Lương Trần Hy Hiến.

Thành phố Hồ Chí Minh, ngày 20 tháng 11 năm 2022

LỜI CẢM ƠN

"Đầu tiên, em xin gửi lời cảm ơn chân thành đến Trường Đại học Sư Phạm đã đưa môn học Công nghệ NET vào trương trình giảng dạy Đặc biệt, em xin gửi lời cảm ơn sâu sắc đến giảng viên bộ môn – Thầy Lương Trần Hy Hiến đã dạy dỗ, truyền đạt những kiến thức quý báu cho em trong suốt thời gian học tập vừa qua Trong thời gian tham gia lớp học Công nghệ NET của thầy, em đã có thêm cho mình nhiều kiến thức bổ ích, tinh thần học tập hiệu quả, nghiêm túc Đây chắc chắn sẽ là những kiến thức quý báu, là hành trang để em có thể vững bước sau này.

Bộ môn Công nghệ NET là môn học thú vị, vô cùng bổ ích Đảm bảo cung cấp đủ kiến thức, gắn liền với nhu cầu thực tiễn của sinh viên Tuy nhiên, do vốn kiến thức còn nhiều hạn chế

và khả năng tiếp thu thực tế còn nhiều bỡ ngỡ Mặc dù nhóm em đã cố gắng hết sức nhưng chắc chắn đồ án khó có thể tránh khỏi những thiếu sót và nhiều chỗ còn chưa chính xác, kính mong thầy xem xét và góp ý để bài tiểu luận của em được hoàn thiện hơn.

Em xin chân thành cảm ơn!”

Mục lục

Chương

1

GIỚI THIỆU 6

1.1 Blazor là gì ? 6

Blazor là mã nguồn mở 6

1.2 Blazor không phải là gì 7

1.3 Blazor cho phép: 8

1.4 Các thành phần: 8

Chương 2 ỨNG DỤNG BLAZOR: 9

2.1 Blazor WebAssembly (client side blazor) 9

2.1.1 Điểm mạnh của Blazor WebAssembly: (Benefits) 1

2 2.1.2 Điểm yếu của Blazor WebAssembly:(Downsides) 1

2 Mô hình lưu trữ 1

2 2.1.3 Một số file trong cấu trúc của project webAssembly 1

2 2.2 Blazor Server 1

4 2.2.1 Điểm mạnh của Server-Side Blazor: (Benefits) 1

5 2.2.2 Điểm yếu của Server-Side Blazor:(Downsides) 1

5 2.2.3 Một số file trong cấu trúc của project Server-Side Blazor 1

5 2.3 Blazor Hybrid: 1

9 2.4 Nên chọn mô hình lưu trữ Blazor nào? 2

0 Chương 3 XÂY DỰNG ỨNG DỤNG BLAZOR ĐẦU TIÊN 2

1 3.1 Tải xuống và cài đặt: 2

1 3.2 Tạo ứng dụng 2

1 3.3 Chạy ứng dụng: 2

4 TÀI LIỆU THAM KHẢO 2

5

Mục lục hình ảnh theo chương

Chương 1 GIỚI THIỆU

1.1 Blazor là gì ?

Ngữ cảnh: trong dự án thường sẽ sử dụng nhiều ngôn ngữ như c#(.net core) để làm việc ở

phía backend và Javascript (các thư viện, framework như reactjs, angular) để làm việc ởphía frontend Muốn làm việc, tương tác được với giao diện bắt buộc phải biết kiến thức

về ngôn ngữ Javascript

Mong muốn: Sử dụng ngôn ngữ c# có thể lập trình ở cả backend và frontend Có thể thực

hiện các tương tác UI bằng c# code Vậy là Blazor ra đời để đáp ứng mong muốn này

Blazor là một web framework cho phép lập trình viên tương tác, làm việc với UI bằng c#

Hình 1-2 Số liệu về sự phát triển của blazor

Blazor là một khuôn khổ để xây dựng giao diện người dùng web phía máy khách tương tác với.NET:

Tạo giao diện người dùng tương tác phong phú bằng C# thay vì JavaScript

Chia sẻ logic ứng dụng phía máy chủ và phía máy khách được viết bằng NET Hiển thị giao diện người dùng dưới dạng HTML và CSS để hỗ trợ trình duyệt

rộng rãi, bao gồm cả trình duyệt di động

Tích hợp với các nền tảng lưu trữ hiện đại, chẳng hạn nhưDocker

Xây dựng các ứng dụng kết hợp dành cho máy tính để bàn và thiết bị di động

với NET và Blazor

Sử dụng NET để phát triển web phía máy khách mang lại những lợi thế sau:

Viết mã bằng C# thay vì JavaScript

Tận dụng hệ sinh thái NET hiện có của.NET thư viện Chia sẻ

logic ứng dụng trên máy chủ và máy khách

Hưởng lợi từ các tệp Hiệu suất, độ tin cậy và bảo mật của NET

Làm việc hiệu quả trên Windows, Linux hoặc macOS với môi trường phát triển, chẳng hạn nhưVisualStudio hoặcVisual Studio Code

Xây dựng dựa trên một bộ ngôn ngữ, khuôn khổ và công cụ chung ổn định, giàu tính năng và

dễ sử dụng

1.2 Blazor so với Silverlight

Blazor không giống như Silverlight, nỗ lực trước đây của Microsoft trong việc lưu trữ cácứng dụng trong trình duyệt Silverlight yêu cầu plugin trình duyệt để chạy trên ứng dụngkhách, điều này đã ngăn không cho nó chạy trên thiết bị iOS

Blazor không yêu cầu bất kỳ loại plugin nào được cài đặt trên máy khách để thực thi bêntrong trình duyệt Blazor hoặc chạy phía máy chủ, trong trường hợp đó, nó thực thi trên máychủ và trình duyệt hoạt động như một thiết bị đầu cuối hoặc nó chạy trong chính trình duyệtbằng cách sử dụng WebAssembly

Vì WebAssugging là một tiêu chuẩn web nên nó được hỗ trợ trên tất cả các trình duyệt chính,điều đó có nghĩa là các ứng dụng Blazor phía máy khách cũng sẽ chạy bên trong trình duyệttrên Windows/Linux/Mac/Android và iOS.

1.3 Blazor cho phép:

Tương tác với UI bằng c# code, không yêu cầu Javascript

Sử dụng Razor Component (razor cho phép trộn code c# và html)

Tận dụng sức mạnh của thư viện, framework net trong ứng dụng Blazor

Có 2 loại ứng dụng Blazor: Blazor WebAssembly(client side) và Blazor Server(server side)

Blazor Server: Là ứng dụng Blazor được chạy trên server generate và update DOM sử

Xác định logic hiển thị giao diện người dùng linh hoạt Xử lý các

sự kiện của người dùng

Có thể được lồng vào nhau và tái sử dụng

Có thể được chia sẻ và phân phối dưới dạng thư viện lớp Razor hoặc gói NuGet

Lớp thành phần thường được viết dưới dạng trang đánh dấu Razor.razor với phần mở rộngtệp Các thành phần trong Blazor được gọi chính thức là các thành phần Razor , không chínhthức là các thành phần Blazor

Razor là một cú pháp để kết hợp đánh dấu HTML với mã C# được thiết kế cho năng suất củanhà phát triển

Razor cho phép bạn chuyển đổi giữa đánh dấu HTML và C# trong cùng một tệp với hỗ trợlập trình IntelliSense trong Visual Studio Razor Pages và MVC cũng sử dụng Razor

Không giống như Razor Pages và MVC, được xây dựng xung quanh mô hình yêu cầu/phảnhồi, các thành phần được sử dụng riêng cho logic và thành phần giao diện người dùng phíamáy khách

Blazor sử dụng các thẻ HTML tự nhiên để tạo thành phần giao diện người dùng Các thành phần kết xuất thành biểu diễn trong bộ nhớ của Mô hình đối tượng tài liệu (DOM) của trình

duyệt được gọi là cây kết xuất, được sử dụng để cập nhật giao diện người dùng theo cách linh hoạt và hiệu quả.

Chương 2 ỨNG DỤNG BLAZOR:

2.1 Blazor WebAssembly (client side blazor)

Hình 2-3 Blazor WebAssembly

WebAssembly (gọi tắt là Wasm) là một dạng mã máy nhị phân (bytecode) Các đoạn mã

code viết bằng các ngôn ngữ như (C/C++, Rust, C# ) sẽ biên dịch thành dạng mã nhị phânnhờ vào Wasm mà trình duyệt (browser) có thể hiểu được Hầu hết các trình duyệt hiện đạiđều hỗ trợ Wasm Wasm gần giống với tập lệnh chung (Ngôn ngữ trung gian chung) mà mãnguồn NET biên dịch thành Cũng giống như NET, Wasm có thể được tạo từ các ngôn ngữcao hơn như C#

Hình 2-4 Cách hoạt động của WebAssembly

Blazor WebAssembly hay còn gọi là Client Side Blazor là một khung ứng dụng một trang

(SPA) để xây dựng các ứng dụng web tương tác phía máy khách với .NET BlazorWebAssembly sử dụng các tiêu chuẩn web mở mà không cần plugin hoặc biên dịch lại mãsang các ngôn ngữ khác Đúng như tên gọi Blazor WebAssembly chạy toàn bộ ứng dụng ởphía client trên trình duyệt dựa trên WebAssembly

Blazor WebAssembly sẽ download tất cả mọi thứ về trình duyệt(Browse) bao gồm:

Samsung Internet

7.2

2.1.1 Điểm mạnh của Blazor WebAssembly: (Benefits)

Tốc độ ứng dụng web rất nhanh bởi code c# được biên dịch thành các đoạn mã nhị phân nhờWebAssembly, rất gần với ngôn ngữ máy mà trình duyệt hiểu được

Website có thể hoạt động offline bởi toàn bộ mọi thứ đều được tải về trình duyệt

Hỗ trợ hầu hết các trình duyệt hiện đại (trừ internet explorer) mà không cần cài thêm bất kỳ plugin nào

Tận dụng tài nguyên ở client nên không cần server quá mạnh, có thể lấy các file static màkhông cần vào server

Server không cần cài net core

Không chạy trên các trình duyệt cũ (internet explorer)

Yêu cầu WebAssembly ở browse (các trình duyệt hiện đại đều hỗ trợ)

Quá nhiều file phải download như net runtime, tốn thời gian tải trang (Từ lần hưa hỗ trợ full debugging

Bởi vì mọi thứ đều tải về client side nên vấn đề bảo mật cần cân nhắc Ví dụ khi bạn có secret key bạn lưu vàthứ 2 nhờ có cơ chế cache nên sẽ cải thiện tốc độ hơn lần 1)

Co file và store nó ở client rất nguy hiểm Có thể sử dụng các kỹ thuật để mã hóa(encrypt secret) nhưng vẫn không an toàn

Mô hình lưu trữ

2.1.3 Một số file trong cấu trúc của project webAssembly

index.html chứa blazor.webassembly.js javascript file File này sẽ được download tới

browser và chịu trách nhiệm download toàn bộ app assets bao gồm webAssembly

byteCode và assembly của chính nó

<!DOCTYPE html>

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" /

> <link href="css/app.css" rel="stylesheet" />

</head>

<body>

<app>Loading </app>

<div id="blazor-error-ui">

An unhandled error has occurred

<a href="" class="reload">Reload</a>

<a class="dismiss"> </a>

</div>

<script src="_framework/blazor.webassembly.js"></script>

</body>

</html>

Tiếp theo ở folder Pages sẽ chưa các razor component

Hình 2-5 Cấu trúc folder Pages

Hình 2-6 Blazor Server

Đúng như tên gọi Server-Side Blazor toàn bộ code của ứng dụng sẽ chạy ở phía

Server

Balzor app xây dựng trên nền ASP.NET core và giao tiếp với browser client qua

SignalR - hỗ trợ realtime để server gửi request và update thông tin tới client.

Ví dụ: Khi user click thêm khóa học button trên browser sẽ gửi data từ client tới server thôngqua SignalR Sau khi Server nhận thông tin sẽ xử lý logic nghiệp vụ (ví dụ lưu vào database)

và trả về kết quả từ server tới client thông qua signalR, client cập nhật kết quả vào DOM

Server application sẽ giữ trong memory mọi lúc Khi client có tương tác sẽ gửi 1 request để tạo instance cho user đó Nhiều user tương tác thì sẽ tạo nhiều instance Server-side blazor cho phép ứng dụng chạy trên server

Server blazor rất tốt cho client có tài nguyên ít, giới hạn(vì chạy toàn bộ trên server) hoặc browse không hỗ trợ WebAssembly

2.2.1 Điểm mạnh của Server-Side Blazor: (Benefits)

Số lượng file tải về browser rất ít vì toàn bộ chạy ở server

Tất cả chạy ở server nên có thể tận dụng sức mạnh của server-side api(các framework, library ở server, api của net)

Hỗ trợ full debugging

Hỗ trợ tất cả trình duyệt

2.2.2 Điểm yếu của Server-Side Blazor:(Downsides)

Không hỗ trợ offline vì phải giữ kết nối liên tục giữa client và server qua SignalR

Nếu network chậm thì sẽ web sẽ chậm do server giao tiếp với client qua signalR

Tính mở rộng, mặc dù không phải vấn đề lớn Microsoft đưa ra hướng dẫn blazor server side hỗ trợ đồng thời hàng ngàn user Khi client có tương tác sẽ gửi 1 request để tạo instance cho user đó Server application sẽ giữ trong bộ nhớ mọi lúc Nhiều user tương tác thì sẽ tạo nhiều instance

2.2.3 Một số file trong cấu trúc của project Server-Side Blazor

Hình 2-7 Cấu trúc Project Blazor Server

_Host.cshtml sẽ chứa code để render html và thiết lập kết nối giữa client và server

(websocket) Trang gốc của ứng dụng được triển khai dưới dạng Razor Page:

hiển thị và trả lại trong phản hồi

Pages folder: chứa các components/pages (.razor) có thể định tuyến, tạo nên ứng dụng

Blazor và trang Razor gốc của ứng dụng Blazor Server Route cho mỗi trang được chỉ định bằng cách sử dụng chỉ thị @page

_Layout.cshtml: Trang bố cục cho trang gốc _Host.cshtml của ứng dụng.

Counter component (Counter.razor): Triển khai trang Counter.

Error component (Error.razor)::Được hiển thị khi một ngoại lệ chưa được xử lý xảy ra

trong ứng dụng

FetchData component (FetchData.razor): Triển khai trang Fetch data

Index component (Index.razor): Triển khai Trang chủ.

Properties/launchSettings.json: Giữ cấu hình môi trường phát triển.

Shared folder: Chứa các components và stylesheets được chia sẻ sau:

 MainLayout component (MainLayout.razor): Thành phần bố cục của ứng

dụng

 MainLayout.razor.css: Stylesheet cho bố cục chính của ứng dụng.

 NavMenu component (NavMenu.razor): Triển khai sidebar navigation Bao

gồm NavLink component (NavLink), kết xuất các liên kết điều hướng đến các thành phần Razor khác Thành phần NavLink tự động chỉ ra trạng thái đã chọn khi component của nó được tải, điều này giúp người dùng hiểu thành phần nào hiện đang được hiển thị

 NavMenu.razor.css: Stylesheet cho navigation menu của ứng dụng.

 SurveyPrompt component (SurveyPrompt.razor): Blazor survey

component

wwwroot: Thư mục gốc Web cho ứng dụng chứa public static assets của ứng dụng.

_Imports.razor: Bao gồm Razor directives chung để đưa vào các components của ứng

dụng (.razor), chẳng hạn @using directives cho namespaces

App.razor: component gốc của ứng dụng thiết lập định tuyến phía client-side bằng Router

component Router component chặn điều hướng trình duyệt và hiển thị trang khớp với địa chỉ được yêu cầu

appsettings.json và các file cài đặt ứng dụng môi trường: Cung cấp cài đặt cấu hình cho ứng

dụng

Program.cs: entry point của ứng dụng thiết lập máy chủ ASP.NET Core và chứa logic khởi

động của ứng dụng, bao gồm đăng ký dịch vụ và cấu hình quy trình xử lý yêu cầu của ứng dụng:

Hình 2-8 File Host

Tương tự như ở WebAssembly ở folder Pages sẽ chứa các razor component

Hình 2-9 Cấu trúc File Pages

Trong startup.cs class

Chứa service để chạy được blazor server

public void ConfigureServices(IServiceCollection services){

services.AddRazorPages();

services.AddServerSideBlazor();

Hình 2-10 Blazor Hybrid

Các ứng dụng kết hợp với NET và Blazor hiển thị giao diện người dùng trong điều khiểnChế độ xem web, trong đó Mô hình đối tượng tài liệu HTML (DOM) tương tác với Blazor

và NET của ứng dụng dành cho máy tính để bàn hoặc thiết bị di động gốc

Các ứng dụng Blazor Hybrid có thể được xây dựng bằng các framework ứng dụng gốc

.NET khác nhau, bao gồm NET MAUI, WPF và Windows Forms Blazor cung cấpcác biệnpháp kiểm soát để thêm các thành phần Razor vào các ứng dụng được xây dựng bằng cácframework này Sử dụng Blazor với NET MAUI cung cấp một cách thuận tiện để xây dựngcác ứng dụng Blazor Hybrid đa nền tảng cho thiết bị di động và máy tính để bàn, trong khitích hợp Blazor với WPF và Windows Forms có thể là một cách tuyệt vời để hiện đại hóa cácứng dụng hiện có.BlazorWebView

Vì các ứng dụng Blazor Hybrid là ứng dụng gốc, chúng có thể hỗ trợ chức năng không chỉkhả dụng với nền tảng web Các ứng dụng Blazor Hybrid có toàn quyền truy cập vào các khảnăng của nền tảng gốc thông qua các API NET thông thường Các ứng dụng Blazor Hybridcũng có thể chia sẻ và sử dụng lại các thành phần với các ứng dụng Blazor Server hoặcBlazor WebAssembly hiện có Các ứng dụng Blazor Hybrid kết hợp các lợi ích của web, ứngdụng gốc và nền tảng NET

Mô hình lưu trữ Blazor Hybrid cung cấp một số lợi ích:

Sử dụng lại các thành phần hiện có có thể được chia sẻ trên thiết bị di động, máy tính để bàn

và web

Tận dụng các kỹ năng, kinh nghiệm và tài nguyên phát triển web

Các ứng dụng có toàn quyền truy cập vào các khả năng gốc của thiết bị

Mô hình lưu trữ Blazor Hybrid có những hạn chế sau:

Các ứng dụng khách gốc riêng biệt phải được xây dựng, triển khai và duy trì cho từng nền tảng mục tiêu

Các ứng dụng khách gốc thường mất nhiều thời gian hơn để tìm, tải xuống và cài đặt so với việc truy cập ứng dụng web trong trình duyệt

2.4 Nên chọn mô hình lưu trữ Blazor nào?

với NET API

chủ và mạng

Kích thước tải trọng nhỏ với thời gian ✔

tải ban đầu nhanh