Nhật ký học tập

Giới thiệu Azure App Service là một dịch vụ đám mây cung cấp khả năng lưu trữ và chạy các ứng dụng web, API và máy chủ. Một trong những tính năng hữu ích của Azure App Service là tự động mở rộng, cho phép bạn tự động tăng hoặc giảm số lượng server chạy ứng dụng của mình để đáp ứng nhu cầu về tài nguyên. Autoscaling rules Autoscale rule là một quy tắc xác định cách Azure App Service tự động mở rộng ứng dụng của bạn. Quy tắc bao gồm các điều kiện kích hoạt và hành động. Điều kiện kích hoạt xác định khi nào Azure App Service nên mở rộng ứng dụng của bạn, trong khi hành động xác định cách Azure App Service nên mở rộng ứng dụng của bạn. Có hai loại điều kiện kích hoạt (Autoscale conditions):  Base rule: Điều kiện kích hoạt cơ bản dựa trên số lượng requrest chờ được xử lý bởi ứng dụng của bạn, hoặc disk size của ứng dụng. Advanced rule: Điều kiện kích hoạt nâng cao dựa trên các chỉ số khác, chẳng hạn như sử dụng bộ nhớ hoặc CPU, hoặc tại 1 thời điểm trong ngày hoặc 1 ngày đặc biệt nà...

.NET Isolated Process Azure Functions .NET Isolated Process Functions là một mô hình triển khai Azure Function cho phép các hàm chạy trong một quy trình riêng biệt (isolated process), tách biệt khỏi Azure Functions Runtime. Đây là roadmap của isolated và in-process Azure Function   Sử dụng Isolated Process Azure Functions có nhiều lợi ích Quản lý quá trình app startup Cấu hình Dependency Injection Cấu hình middleware Tránh xung đột với các version với các class library Tạo project Azure Function Có 2 cách để tạo project Azure Function, 1 là tạo thông qua IDE (Visual Studio, Visual Studio Code), 2 là thông qua command line 1. Để tạo project từ command line, bạn cần cài đặt Azure Functions Core Tools tại đây Gõ lệnh func init ProjectName Chọn worker runtime là donet (isolated process) Use the up/down arrow keys to select a worker runtime: dotnet dotnet (isolated process) node python powershell custom 2. Trong Visual Studio, chọn Azure Function => tại Dialog A...

Exercise: Create a static HTML web app by using Azure Cloud Shell - Training | Microsoft Learn Giải thích Azure Cloud Shell is an interactive, authenticated, browser-accessible terminal for managing Azure resources. It provides the flexibility of choosing the shell experience that best suits the way you work, either Bash or PowerShell. resourceGroup=$(az group list --query "[].{id:name}" -o tsv) az group list: Đây là một lệnh của Azure Command-Line Interface (CLI) được sử dụng để liệt kê các nhóm tài nguyên trong tài khoản Azure. --query "[].{id:name}": Đây là một tùy chọn sử dụng để truy vấn (query) dữ liệu được trả về từ command. Trong trường hợp này, chúng ta đang yêu cầu trả về danh sách các resource group và chỉ lấy ra hai thuộc tính của mỗi nhóm tài nguyên, đó là id và name. Biểu thức "[].{id:name}" là một biểu thức JMESPath, được sử dụng để định dạng dữ liệu trả về theo yêu cầu. JMESPath is a query language for JSON. -o tsv: Đây là tùy chọn để...

Giới thiệu Higher-order component (HOC) là một kỹ thuật nâng cao trong React được sử dụng trong việc sử dụng lại các component. HOCs không là một phần trong React API. Một cách cụ thể, một higher-order component là một hàm và nó nhận đối số là một component và trả về một component mới. A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React's compositional nature. Concretely, a higher-order component is a function that takes a component and returns a new component. Higher-Order Component Structure Để định nghĩa Higher-Order Component (HOC) trong React, bạn cần qua các bước: - Define HOC function: Hàm này nhận vào input là component (hoặc có thêm vài parameter khác) và trả về 1 component mới với thêm 1 số tinh năng mới. const higherFunction = (WrappedComponent) => { // ... } Định nghĩa new component const NewComponent = () => { return ( <...

Nguồn:  https://gpcoder.com/5112-gioi-thieu-aspect-oriented-programming-aop/ AOP là gì? Trong khi xây dựng các chương trình ứng dụng, có rất nhiều những vấn đề liên quan đến phần mềm mà chúng ta cần quan tâm. Chẳng hạn, chúng ta xây dựng một hệ thống đăng ký tạo tài khoản cho một ngân hàng. Ngoài công việc chính cho phép người dùng có thể tạo tài khoản (core concern), hệ thống còn phải đảm bảo các vấn đề khác (cross-cutting concern) như chứng thực người dùng, kiểm tra ràng buộc, quản lý transaction, xử lý ngoại lệ, ghi log, debug, đo hiệu năng của ứng dụng, … Logger logger = Logger.getLogger(...); TransactionManager tm = getTransactionManager(); public void addAccount(Account account) { logger.info("Creating (" + account + ") Account"); try { tm.beginTransaction(); db.add(account); tm.commit(); } catch (Exception) { tm.rollback(); logger.error("Account creation failed"); } } Như bạn thấy, logic của c...

Giới thiệu React-Router là một thư viện định tuyến (routing) tiêu chuẩn trong React. Nó giữ cho giao diện của ứng dụng đồng bộ với URL trên trình duyệt. React-Router cho phép bạn định tuyến "luồng dữ liệu" (data flow ) trong ứng dụng của bạn một cách rõ ràng. Trong bài viết này, chúng ta sẽ hướng dẫn sử dụng React Router trong functional component, cung cấp một số ví dụ đơn giản về việc sử dụng Route, Link, Separate Routes, Nested Routes và Dynamic Routes. Cài đặt Cài đặt React Router bằng cách sử dụng npm hoặc yarn: npm install react-router-dom //or yarn add react-router-dom Import react-router-dom vào trong file App.tsx: import { BrowserRouter } from "react-router-dom"; Các thành phần chính Có 3 thành phần chính trong React Router: Routes, như là <BrowserRouter> và <HashRouter> Route Matchers, như là <Route> và <Switch> Navigation, như là <Link> , <NavLink> và <Redirect> Sử dụng Route React-Router cung cấp cho c...

Bài này mang tính chất tổng hợp từ các nguồn khác nhau. Cấu trúc project my-app/ README.md node_modules/ package.json public/ index.html favicon.ico src/ common/ ... components/ common/ Link.js ... forms/ TextBox.js TextBox.container.js /* Container component */ TextBox.res/style.css TextBox.locale/vi-VN/... ... layout/ App.js - The top-level React component App.res/style.css App.locale/en-US/... Navigation.js Navigation.res/style.css Navigation.res/data.json Navigation.locale/en-US/... ... pages/ Home.js Home.css Account/index.js Account/index.css ... core/ ... constants/ ... helpers/ ... reducers/ ... stores/ ... Trong đó: common: Chứa các thành phần được sử dụng chung trong toàn bộ dự án. components: Chứa các thành phần ...

Giới thiệu React Hook Form là một thư viện quản lý form dành cho React, được phát triển bởi nhóm của Bluebill . Thư viện này tập trung vào hiệu suất và API tối giản, giúp cho các dự án nhẹ hoặc ưu tiên hiệu suất có thể sử dụng nó một cách dễ dàng. So với Formik, React Hook Form có kích thước nhỏ hơn gấp đôi và không có dependency. Điều này giúp cho việc sử dụng React Hook Form trở nên đơn giản và ít tốn tài nguyên hơn. Ngoài ra, React Hook Form cũng có khả năng xử lý hiệu quả các component của form, giúp tránh tình trạng re-render không cần thiết và tăng hiệu suất ứng dụng . Tuy nhiên, Formik lại cung cấp một hệ thống validation phong phú hơn, hỗ trợ xử lý lỗi và có một hệ sinh thái lớn hơn. Vì vậy, nếu bạn đang tìm kiếm một thư viện quản lý form đơn giản và hiệu suất cao, React Hook Form là một lựa chọn tốt. Nếu bạn muốn có một hệ thống validation phong phú và hỗ trợ xử lý lỗi tốt hơn, Formik là sự lựa chọn đáng cân nhắc Cài đặt Install package npm install react-hook-form // or yarn...

Giới thiệu Axios là một HTTP client được viết dựa trên Promises được dùng để hỗ trợ cho việc xây dựng các ứng dụng API từ đơn giản đến phức tạp và có thể được sử dụng cả ở trình duyệt hay Node.js. Đặc điểm Axios Tạo XMLHttpRequests từ trình duyệt Thực hiện các http request từ node.js Hỗ trợ Promise API chặn request và response Chuyển đổi dữ liệu request và response Hủy requests Tự động chuyển đổi về dữ liệu JSON Hỗ trợ phía client để chống lại XSRF Cài đặt Cài đặt package npm install axios // or yarn add axios Import axios import axios from 'axios'; Ví dụ Get data Trong ví dụ này, chúng ta sẽ gọi 1 Http request để get data từ https://reqres.in/ Tạo component AxiosExample và thêm vào đoạn code sau: import axios from 'axios'; import { useEffect } from 'react'; const AxiosExample = () => { useEffect(() => { console.log("Component did mount"); axios.get('https://reqres.in/api/users?page=2') .then(...

Yup là một thư viện JavaScript cho việc kiểm tra dữ liệu và xác thực dữ liệu trong ứng dụng React. Bạn có thể dùng Yup để thay thế cho propTypes Cài đặt npm install yup Validation Validate object đơn giản Trong ví dụ này, chúng ta đang xác thực rằng giá trị phải là một chuỗi và không được phép rỗng. import * as Yup from 'yup'; const schema = Yup.string().required(); const value = 'abc'; schema.validate(value).then(() => { console.log("Validate " + value + ' successfully'); }); Validate các giá trị phức tạp import * as yup from 'yup'; //... const schema = yup.object({ name: yup.string().required(), age: yup.number().min(18).max(60), }); const value = { name: 'John Doe', age: 16, }; schema.validate(value).then(() => { console.log("Validate " + value + ' successfully'); }).catch((validationErrors) => { validationErrors.errors.forEach((error: string) => { console.error(error); }); });; Valid...

Để tạo sự tương tác trong ứng dụng React, bạn có thể sử dụng các công cụ và cơ chế mà React cung cấp. Dưới đây là một số khái niệm quan trọng và cách thực hiện sự tương tác trong React: State State (Trạng thái) là dữ liệu thay đổi trong ứng dụng của bạn mà React sẽ theo dõi và cập nhật. Bạn có thể sử dụng hook useState hoặc this.state (trong các lớp component) để quản lý trạng thái. Khi trạng thái thay đổi, React sẽ tự động cập nhật giao diện người dùng. Ví dụ import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increase</button> </div> ); } Trong đoạn mã trên, useState là một hook React được nhập từ thư viện React. Nó được sử dụng để tạo một biến trạng thái (count) và một hàm để cập nhật trạng thái đó (setCount). count là biến trạng thái lưu giữ giá trị hiện tại của số đếm. setCount ...

IaaS, PaaS, SaaS là 3 loại dịch vụ điện toán đám mây phổ biến nhất hiện nay. infrastructure as a service (IaaS): Các công ty như amazone, google... sẽ cung cấp quyền truy cập đến một cơ sở hạ tầng như server ảo, ổ cứng, mạng... để chạy các ứng dụng trên đó. Platform as a service (Paas): Các công ty sẽ cung cấp quyền truy cập đến một platform hoàn chỉnh sẵn sàng sử dụng, được lưu trữ trên đám mây để phát triển, chạy, bảo trì và quản lý các ứng dụng. Software as a service(Saas): Các công ty sẽ cung cấp quyền truy cập theo nhu cầu vào phần mềm ứng dụng được lưu trữ trên đám mây, sẵn sàng sử dụng. Tùy Theo nhu cầu Sử dụng các doanh nghiệp sẽ lựa chọn IaaS, PaaS hoặc SaaS. Đối với các công ty phần mềm thường sử dụng IaaS, PaaS để deploy code 'As a service' đề cập đến cách tài sản IT được sử dụng trong các dịch vụ này - và sự khác biệt cơ bản giữa điện toán đám mây và IT truyền thống. Trong IT truyền thống các công ty sử dụng tài sản IT bằng cách mua RAM, ổ cứng, CPU về lắp đặt, cài ...

The Cosmos DB hierarchy contains an account with one or more databases, where each database has one or more containers, and each container holds items, stored procedures, user-defined functions, triggers, conflicts, and merges Tìm hiểu về Azure Cosmos DB    Azure Functions: Trigger Azure Function với Cosmos DB - Day 3

The goal of software architecture is to minimize the human resources required to build and maintain the required system. Robert C. Martin, Clean Architecture A Guide for Building Software with Clean Architecture: https://www.ezzylearning.net/tutorial/a-guide-for-building-software-with-clean-architecture Building ASP.NET Core Apps with Clean Architecture: https://www.ezzylearning.net/tutorial/building-asp-net-core-apps-with-clean-architecture#A_Quick_Introduction_to_Clean_Architecture C-Sharp Corner: Clean Architecture With .NET 6 Clean Architecture .NET Core: All You Need to Know  

Review How do you access a specific private blob and all private blobs in a container from the public URL? What are some scenarios where you might make blobs public? Can you put an Azure Storage account inside a private network? What is the maximum size of a blob?  How do you move blobs from one tier to another?  Describe the process of rehydration of a blob from archive storage to any other tier?

Giới thiệu  “Exam AZ-204: Developing Solutions for Microsoft Azure”. Là chứng chỉ giành cho các lập trình viên tham gia thiết kế, triển khai, và bảo trì các hệ thống làm việc với Microsoft Azure. Các nội dung mà Az-204 bao trùm được mô tả ở link chính chủ này ( https://docs.microsoft.com/en-us/certifications/exams/az-204 ), sơ lược như sau: Sử dụng các dịch vụ Azure compute: VM, ACI, ACR, Azure WebApp, Azure Functions, Azure Durable Functions Sử dụng Azure storage: CosmosDB, Blob storage,… Làm việc với Azure Security: Microsoft Identity platform, Azure AD, Microsoft Graph Giám sát, quản lý và tối ưu các giải pháp trên Azure: Azure Cache for Redis, Azure CDN, Azure Monitor, Application Insights Phân biệt và sử dụng các dịch vụ kết nối trên Azure: APIM, event-based (Event Grid, Event Hub), message-based (Azure Queue Storage, Azure Service Bus) Ngoài ra, cần biết sử dụng Azure SDKs, Azure CLI và Azure Powershell. Mẹo Watch AZ-204 exam prep videos on Learn Review the AZ-204 study gui...

Proptypes là gì? Proptypes là một thư viện được cung cấp bởi React để giúp chúng ta xác thực các props được truyền vào component. Proptypes giúp chúng ta tránh được các lỗi do dữ liệu không hợp lệ gây ra, cải thiện tính ổn định và khả năng tái sử dụng của component. Ví dụ Trường hợp không sử dụng Proptypes Khi không sử dụng proptypes, chúng ta phải tự kiểm tra tính hợp lệ của props trong component. Điều này có thể gây ra các lỗi khó phát hiện, đặc biệt là trong các ứng dụng phức tạp. Ví dụ tạo một header component, chỉ nhận header value với chiều dài < 10 import React from 'react'; interface HeaderProps { name: string; } const Header: React.FC<HeaderProps> = ({ name }) => { if (name.length > 10) { console.error('Invalid header'); return <></> } return <h2>Hello, {name}!</h2>; }; export default Header; File app.tsx import reactLogo from './assets/react.svg' import viteLogo from ...