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

BÁO CÁO GIỮA KÌ CƠNG NGHỆ NET Đề tài Tìm hiểu Blazor NET Core 6.0 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 NET Core 6.0 Thành phố Hồ Chí Minh, ngày 20 tháng 11 năm 2022 BÁO CÁO GIỮA KÌ CƠNG NGHỆ NET Đề tài Tìm hiểu Blazor NET Core 6.0 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 NET Core 6.0 Thành viên nhóm NET 5.0: 46.01.104.057 Nguyễn Thế Hồng 46.01.104.072 Nguyễn Nhất Huy 46.01.104.131 Nguyễn Ngọc Yến Nhi 46.01.104.179 Mạc Đỉnh Thy 46.01.104.159 Trần Nhật Tân 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 môn – Thầy Lương Trần Hy Hiến dạy dỗ, truyền đạt kiến thức quý báu cho em 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 thầy, em có thêm cho nhiều kiến thức bổ ích, tinh thần học tập hiệu quả, nghiêm túc Đây chắn kiến thức quý báu, hành trang để em vững bước sau Bộ môn Công nghệ NET mơn học thú vị, vơ 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 sinh viên Tuy nhiên, vốn kiến thức nhiều hạn chế khả tiếp thu thực tế cịn nhiều bỡ ngỡ Mặc dù nhóm em cố gắng chắn đồ án khó tránh khỏi thiếu sót nhiều chỗ cịn chưa xác, kính mong thầy xem xét góp ý để tiểu luận em hoàn thiện Em xin chân thành cảm ơn!” Mục lục Chương GIỚI THIỆU 1.1 Blazor ? Blazor mã nguồn mở 1.2 Blazor khơng phải 1.3 Blazor cho phép: 1.4 Các thành phần: Chương ỨNG DỤNG BLAZOR: 2.1 Blazor WebAssembly (client side blazor) 2.1.1 Điểm mạnh Blazor WebAssembly: (Benefits) 2.1.2 Điểm yếu Blazor WebAssembly:(Downsides) Mơ hình lưu trữ 2.1.3 2.2 Một số file cấu trúc project webAssembly Blazor Server 2.2.1 Điểm mạnh Server-Side Blazor: (Benefits) 2.2.2 Điểm yếu Server-Side Blazor:(Downsides) 2.2.3 Một số file cấu trúc project Server-Side Blazor 2.3 Blazor Hybrid: 2.4 Nên chọn mơ hình lưu trữ Blazor nào? Chương XÂY DỰNG ỨNG DỤNG BLAZOR ĐẦU TIÊN 3.1 Tải xuống cài đặt: 3.2 Tạo ứng dụng 3.3 Chạy ứng dụng: TÀI LIỆU THAM KHẢO 9 2 2 5 2 2 Mục lục hình ảnh theo chương Hình 1-1 Giới thiệu blazor Hình 1-2 Số liệu phát triển blazor Hình 2-1 Blazor WebAssembly Hình 2-2 Cách hoạt động WebAssembly Hình 2-3 Cấu trúc folder Pages Hình 2-4 Blazor Server Hình 2-5 Cấu trúc Project Blazor Server Hình 2-6 File Host Hình 2-7 Cấu trúc File Pages Hình 2-8 Blazor Hybrid Hình 3-1 Hướng dẫn cài đặt Hình 3-2 Hướng dẫn tạo project Hình 3-3 Hướng dẫn tạo project Blazor Server Hình 3-4 Khởi tạo project hồn chỉnh Hình 3-5 Cấu trúc project vừa tạo Hình 3-6 Chạy project Hình 3-7 Thay đổi mã chạy Hình 3-8 Dừng chạy 10 14 14 16 17 18 19 21 22 22 23 23 24 24 24 Hình 3-9 Hello World !!! 25 Chương GIỚI THIỆU 1.1 Blazor ? Ngữ cảnh: dự án thường sử dụng nhiều ngôn ngữ c#(.net core) để làm việc phía backend Javascript (các thư viện, framework reactjs, angular) để làm việc phía frontend Muốn làm việc, tương tác với giao diện bắt buộc phải biết kiến thức ngôn ngữ Javascript Mong muốn: Sử dụng ngơn ngữ c# lập trình backend frontend Có thể thực tương tác UI c# code Vậy Blazor đời để đáp ứng mong muốn Blazor web framework cho phép lập trình viên tương tác, làm việc với UI c# code Hình 1-1 Giới thiệu blazor Blazor mã nguồn mở Mã nguồn Blazor có sẵn: https://github.com/dotnet/aspnetcore/tree/main/src/Components Mã nguồn thuộc sở hữu The NET Foundation , tổ chức phi lợi nhuận tạo với mục đích hỗ trợ dự án nguồn mở dựa NET framework Theo tảng NET, thời điểm viết này, hỗ trợ 3.700 cơng ty có 61.000 người đóng góp Hình 1-2 Số liệu phát triển blazor Blazor 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ú C# thay JavaScript Chia sẻ logic ứng dụng phía máy chủ phía máy khách viết NET Hiển thị giao diện người dùng dạng HTML CSS để hỗ trợ trình duyệt rộng rãi, bao gồm trình duyệt di động Tích hợp với tảng lưu trữ đại, chẳng hạn nhưDocker Xây dựng ứng dụng kết hợp dành cho máy tính để bàn thiết bị di động với NET Blazor Sử dụng NET để phát triển web phía máy khách mang lại lợi sau: Viết mã C# thay JavaScript Tận dụng hệ sinh thái NET có của.NET thư viện Chia sẻ logic ứng dụng máy chủ máy khách Hưởng lợi từ tệp Hiệu suất, độ tin cậy bảo mật NET Làm việc hiệu Windows, Linux 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 ngôn ngữ, khuôn khổ cơng cụ chung ổn định, giàu tính dễ sử dụng 1.2 Blazor so với Silverlight Blazor không giống Silverlight, nỗ lực trước Microsoft việc lưu trữ ứng dụng trình duyệt Silverlight yêu cầu plugin trình duyệt để chạy ứng dụng khách, điều ngăn khơng cho chạy thiết bị iOS Blazor không yêu cầu loại plugin cài đặt máy khách để thực thi bên trình duyệt Blazor chạy phía máy chủ, trường hợp đó, thực thi máy chủ trình duyệt hoạt động thiết bị đầu cuối chạy trình duyệt cách sử dụng WebAssembly Vì WebAssugging tiêu chuẩn web nên hỗ trợ tất trình duyệt chính, điều có nghĩa ứng dụng Blazor phía máy khách chạy bên trình duyệt Windows/Linux/Mac/Android iOS 1.3 Blazor cho phép: Tương tác với UI c# code, không yêu cầu Javascript Sử dụng Razor Component (razor cho phép trộn code c# html) Tận dụng sức mạnh thư viện, framework net ứng dụng Blazor Có loại ứng dụng Blazor: Blazor WebAssembly(client side) Blazor Server(server side)  Blazor Server: Là ứng dụng Blazor chạy server generate update DOM sử dụng SignalrR  Blazor Web Assembly: Là ứng dụng Single Page Application client generate SPA xây dựng frontend framework khác 1.4 Các thành phần: Các ứng dụng Blazor dựa thành phần Một thành phần Blazor thành phần giao diện người dùng, chẳng hạn trang, hộp thoại biểu mẫu nhập liệu Các thành phần lớp NET C# tích hợp tập hợp NET : Xác định logic hiển thị giao diện người dùng linh hoạt Xử lý kiện người dùng Có thể lồng vào tái sử dụng Có thể chia sẻ phân phối dạng thư viện lớp Razor gói NuGet Lớp thành phần thường viết dạng trang đánh dấu Razor.razor với phần mở rộng tệp Các thành phần Blazor gọi thức thành phần Razor , khơng thức thành phần Blazor Razor cú pháp để kết hợp đánh dấu HTML với mã C# thiết kế cho suất nhà phát triển Razor cho phép bạn chuyển đổi đánh dấu HTML C# tệp với hỗ trợ lập trình IntelliSense Visual Studio Razor Pages MVC sử dụng Razor Không giống Razor Pages MVC, xây dựng xung quanh mơ hình u cầu/phản hồi, thành phần sử dụng riêng cho logic thành phần giao diện người dùng phía máy khách Blazor sử dụng 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 nhớ Mơ hình đối tượng tài liệu (DOM) trình duyệt gọi kết xuất, sử dụng để cập nhật giao diện người dùng theo cách linh hoạt hiệu Hình 2-8 File Host Tương tự WebAssembly folder Pages chứa razor component Hình 2-9 Cấu trúc File Pages Trong startup.cs class Chứa service để chạy blazor server public void ConfigureServices(IServiceCollection services) { services.AddRazorPages(); services.AddServerSideBlazor(); services.AddSingleton(); } Tạo SingalR hub để connect server client (websocket client) app.UseEndpoints(endpoints => { endpoints.MapBlazorHub(); endpoints.MapFallbackToPage("/_Host"); }); 2.3 Blazor Hybrid: Blazor sử dụng để xây dựng ứng dụng khách gốc cách sử dụng phương pháp kết hợp Ứng dụng kết hợp ứng dụng gốc tận dụng công nghệ web cho chức chúng Trong ứng dụng Blazor Hybrid, thành phần Razor chạy trực tiếp ứng dụng gốc (khơng có WebAssembly) với mã NET khác hiển thị giao diện người dùng web dựa HTML CSS cho điều khiển Chế độ xem web nhúng thông qua kênh interop cục Hình 2-10 Blazor Hybrid Các ứng dụng kết hợp với NET Blazor hiển thị giao diện người dùng điều khiển Chế độ xem web, Mơ hình đối tượng tài liệu HTML (DOM) tương tác với Blazor NET ứng dụng dành cho máy tính để bàn thiết bị di động gốc Các ứng dụng Blazor Hybrid xây dựng framework ứng dụng gốc NET khác nhau, bao gồm NET MAUI, WPF Windows Forms Blazor cung cấpcác biện pháp kiểm soát để thêm thành phần Razor vào ứng dụng xây dựng framework Sử dụng Blazor với NET MAUI cung cấp cách thuận tiện để xây dựng ứng dụng Blazor Hybrid đa tảng cho thiết bị di động máy tính để bàn, tích hợp Blazor với WPF Windows Forms cách tuyệt vời để đại hóa ứng dụng có.BlazorWebView Vì ứng dụng Blazor Hybrid ứng dụng gốc, chúng hỗ trợ chức khơng khả dụng với tảng web Các ứng dụng Blazor Hybrid có tồn quyền truy cập vào khả tảng gốc thông qua API NET thông thường Các ứng dụng Blazor Hybrid chia sẻ sử dụng lại thành phần với ứng dụng Blazor Server Blazor WebAssembly có Các ứng dụng Blazor Hybrid kết hợp lợi ích web, ứng dụng gốc tảng NET Mơ hình lưu trữ Blazor Hybrid cung cấp số lợi ích: Sử dụng lại thành phần có chia sẻ thiết bị di động, máy tính để bàn web Tận dụng kỹ năng, kinh nghiệm tài nguyên phát triển web Các ứng dụng có tồn quyền truy cập vào khả gốc thiết bị Mơ hình lưu trữ Blazor Hybrid có hạn chế sau: Các ứng dụng khách gốc riêng biệt phải xây dựng, triển khai trì cho tảng mục tiêu Các ứng dụng khách gốc thường nhiều thời gian để tìm, tải xuống cài đặt so với việc truy cập ứng dụng web trình duyệt 2.4 Nên chọn mơ hình lưu trữ Blazor nào? Tính Hồn thành khả tương thích với NET API Truy cập trực tiếp vào tài nguyên máy chủ mạng Kích thước tải trọng nhỏ với thời gian tải ban đầu nhanh Tốc độ thực gần gốc Server Blazor ✔ ✔ WebAssembly Blazor (WASM) Blazor Hybrid ✔ † † ✔ ✔ ✔‡ ✔ Tính Server Blazor ✔ WebAssembly Blazor (WASM) † Blazor Hybrid † Mã ứng dụng an toàn riêng tư máy chủ Chạy ứng dụng ngoại tuyến sau tải ✔ ✔ xuống Lưu trữ trang web tĩnh ✔ Giảm tải xử lý cho khách hàng ✔ ✔ Toàn quyền truy cập vào khả ✔ khách hàng gốc Triển khai dựa web ✔ ✔ †Các ứng dụng Blazor WebAssembly Blazor Hybrid sử dụng API dựa máy chủ để truy cập tài nguyên máy chủ / mạng truy cập mã ứng dụng riêng tư an toàn ‡ Blazor WebAssembly đạt hiệu suất gần nguyên vớitrình biên dịch trước thời hạn (AOT) Chương XÂY DỰNG ỨNG DỤNG BLAZOR ĐẦU TIÊN STT Mục đích Điều kiện Thời gian hoàn thành Kịch 3.1 Tải xuống cài đặt: Ghi Xây dựng ứng dụng web bạn với Blazor Không 10-15 phút + thời gian tải xuống / cài đặt Tạo, sử dụng sửa đổi thành phần truy cập đơn giản Hình 3-11 Hướng dẫn cài đặt Bước 1: Tải Visual Studio Bước 2: Cài ASP.NET and web development Chọn phím Windows, nhậpVisual Studio Installer nhấn Enter Nếu nhắc, cho phép trình cài đặt tự cập nhật Nếu có Cập Nhật cho Visual Studio 2022, nút Cập nhật hiển thị Chọn để cập nhật trước sửa đổi cài đặt Tìm cài đặt Visual Studio 2022 bạn chọn nút Sửa đổi Nếu chưa chọn, chọn khối lượng công việc ASP.NET web development chọn nút Sửa đổi Nếu khơng, cần đóng cửa sổ hộp thoại 3.2 Tạo ứng dụng Bước 1: Khởi động Visual Studio chọnTạo dự án Hình 3-12 Hướng dẫn tạo project Bước 2: Trong cửa sổ Tạo dự án mới, nhập Blazor vào hộp tìm kiếm nhấn Enter Bước 3: Chọn mẫu Ứng dụng Blazor Server chọn Tiếp theo Hình 3-13 Hướng dẫn tạo project Blazor Server Bước 4: Trong cửa sổ Định cấu hình dự án bạn, nhập Blazor App làm tên dự án chọn Tiếp theo Bước 5: Trong cửa sổ Thông tin bổ sung, select NET 7.0 (Standard Term Suport)trong danh sách thả xuống Framework chưa chọn chọn Tạo Hình 3-14 Khởi tạo project hồn chỉnh Dự án bạn tạo tải Visual Studio Hãy xem nội dung dự án bạn Solution Explorer Hình 3-15 Cấu trúc project vừa tạo Một số tệp tạo để cung cấp cho bạn ứng dụng Blazor đơn giản sẵn sàng để chạy Program.cslà điểm vào cho ứng dụng khởi động máy chủ nơi bạn định cấu hình dịch vụ ứng dụng phần mềm trung gian App.razorlà thành phần gốc cho ứng dụng Thedirectory chứa số trang web ví dụ cho ứng dụng.Pages BlazorApp.csprojxác định dự án ứng dụng phần phụ thuộc xem cách nhấp đúp vào nút dự án BlazorApp Trình khám phá giải pháp Thefile bên thedirectory xác định cài đặt hồ sơ khác cho môi trường phát triển cục Một số cổng tự động gán tạo dự án lưu tệp này.launchSettings.jsonProperties Hãy chọn nútTiếp tục bên để chuyển sang bước 3.3 Chạy ứng dụng: Nhấp vào nút Bắt đầu gỡ lỗi (mũi tên màu xanh cây) Thanh công cụ gỡ lỗi Visual Studio để chạy ứng dụng bạn Hình 3-16 Chạy project Khi ứng dụng chạy, bạn áp dụng thay đổi mã cho ứng dụng chạy cách nhấp vào Tải lại nóng nút Hình 3-17 Thay đổi mã chạy Bạn dừng ứng dụng lúc cách nhấp vào Dừng lại cơng cụ Hình 3-18 Dừng chạy Lần bạn chạy ứng dụng web Visual Studio, thiết lập chứng phát triển để lưu trữ ứng dụng qua HTTPS sau nhắc bạn tin cậy chứng Chúng khuyên bạn nên đồng ý tin tưởng vào chứng Chứng sử dụng để phát triển địa phương khơng có nó, hầu hết trình duyệt phàn nàn tính bảo mật trang web Đợi ứng dụng khởi chạy trình duyệt Khi bạn đến trang sau, bạn chạy thành công ứng dụng Blazor mình! Hình 3-19 Hello World !!! Trang hiển thị xác định thefile nằm bên thedirectory Đây nội dung trơng giống như:Index.razorPages Trang/Index.razor @page "/" Index Hello, world! Welcome to your new app Nó chứa mã đặt làm trang chủ hiển thị dịng chữ "Xin chào, giới!" "Chào mừng bạn đến với ứng dụng bạn" Nó bao gồm acomponent hiển thị liên kết đến khảo sát phản hồi Blagor.SurveyPrompt TÀI LIỆU THAM KHẢO [1]https://viblo.asia/p/tong-quan-ve-blazor-trong-net-core-V3m5WkYy5O7 Hướng dẫn Blazor | Xây dựng ứng dụng bạn (microsoft.com) [2]https://viblo.asia/p/tong-quan-ve-blazor-trong-net-core-V3m5WkYy5O7\ [3]https://www.programmingwithwolfgang.com/blazor-server-vs-blazor-webassembly/ [4]https://www.zenesys.com/blog/blazor-server-vs-blazor-web-assembly [5] Thêm Tiêu đề (Định dạng > Kiểu đoạn) Khi đó, chúng xuất mục lục [6] [7] [8] ...BÁO CÁO GIỮA KÌ CƠNG NGHỆ NET Đề tài Tìm hiểu Blazor NET Core 6. 0 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 NET. .. hiểu Blazor NET Core 6. 0 Thành viên nhóm NET 5 .0: 46. 01 . 104 .05 7 Nguyễn Thế Hoàng 46. 01 . 104 .07 2 Nguyễn Nhất Huy 46. 01 . 104 .131 Nguyễn Ngọc Yến Nhi 46. 01 . 104 .179 Mạc Đỉnh Thy 46. 01 . 104 .159 Trần Nhật... viết này, hỗ trợ 3. 700 cơng ty có 61 .00 0 người đóng góp Hình 1-2 Số liệu phát triển blazor Blazor 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