1. IntroductionFlutter is a powerful and cross-platform mobile app development framework, it’s easy to learn and build a nice user interface. But, if you are an experienced c#/Java programmer (it’s me~ ha ha), maybe you will be a little uncomfortable, because Flutter is a reactive programming framework, reactive programming is a declarative programming paradigm that is based on the idea of asynchronous event processing and data streams.So, if you want to update the UI in Flutter, you need to update the state to refresh the layout, the programming logics will be difference with C# o ...继续阅读 (66)

1. IntroductionIf you want to handle the PDF in .Net project, I think you would know theiTextSharp, it really a powerful PDF handler library, however, it not allow to free to use in commercial after version 2.1.7, and Free Spire.PDF is a Community Edition of the Spire.PDF for .NET, which is a totally free PDF API for commercial and personal use. As a standalone .NET library, Free Spire.PDF for .NET enables developers to create, write, edit, convert, print, handle and read PDF files on any .NET( C#, VB.NET, ASP.NET, .NET Core) applications.I will base on the previousMyDemoproject to demonstrate ...继续阅读 (70)

1. IntroductionWhen you access a website, it needs to load many elements or components and this will take a few times (based on the network and server workload), for giving users a better experience, we can use a pre-loading to show the page is in loading status.2. How it’s workingI have written an article for creating a loading in Angular withngx-loading, the loading for waiting for data return from API, but this time, I will show you a different way and create a global loading withcss.The pre-loading will show before every page is loaded to avoid the case that the page is blank before ...继续阅读 (82)

1. IntroductionWebsite automation health check typically refers to proactively monitoring and testing a website or web application to identify issues before they impact customers. Today I will show you how to monitor the website uptime and auto login the website for checking.2. Why PowershellWhy would I use Powershell for auto health checking? Powershell is the native application in Windows, so don’t need to install other software or environment and just can use it, this will be very convenient for some companies’ servers, maybe for some security reasons that do not allow to instal ...继续阅读 (69)

1. IntroductionSwaggeris an open specification for describing and documentingRESTfulAPIs, it is a standard specification and set of tools for defining, producing, consuming, and visualizingRESTfulweb services. It makes it easy to design, build, document, and consume APIs efficiently.But, if we are using theJWTin theAPI(find more in my previous article), you will find that can’t get data from the API in theSwaggerUI, because we also need to pass theJWTto theAPIto get data, but it seems there is no way to do that, right?Okay, in this article, I will show you how to do that!2. Setup the Swa ...继续阅读 (97)

1. IntroductionLoading is essential in a website, it can let the user know the flow is processing, otherwise user will not know what’s happening. So, I will introduce an excellent loading package to help you solve the loading issue!2. ngx-loadingngx-loadingis a very nice and customizable loading spinner for Angular, there are flexible config options that let you setup different loading styles. You can install ngx-loading with the below commandnpm install --save ngx-loadingAnd you can find the base usage ingithub3. Use in the common layoutWith normal usage, you need to add the below code ...继续阅读 (83)

1. IntroductionMiddleware in ASP.NET Core refers to software components that are assembled into an application pipeline to handle requests and responses. They are configured as part of the request processing pipeline in the Startup.cs file. Middleware can help separate cross-cutting concerns from app logic for modular and maintainable code, so it is good for logging, authentication, caching, compression, security, and more.ASP.NET Core includes many built-in middleware like Static File Middleware, Routing Middleware, Endpoint Routing Middleware, etc. But in this article, we will create our mid ...继续阅读 (78)

1. IntroductionSweetAlert2is a beautiful, responsive, customizable, accessible replacement for javascript’s popup boxes, and there is also a version for Angular, you can find the detail usage inofficial website. But, the use cases in the official doc are just for use on one page, which means you need to add the same HTML codes on every page you want to use, what if you are using the common layout? The common layout means there is a main layout includingHeader,Center Body, andFooter, just like this article which I introduced.In the common layout structure, you don’t need to add the ...继续阅读 (86)

This is post 2 of 2 in the series“How to Implement JWT”In this series, I will show you how to implement JWT in .Net Core API and communicate with Angular.How to Implement JWT in Core API and Angular – Part 1How to Implement JWT in Core API and Angular — Part 21. IntroductionWe have introduced how to generate theJWTon the server side inpreviousarticle, so we will continue to introduce how to handle theJWTin client-side with Angular in this article.For demonstration, we need to create a simple login page to call the login API, and create another simple page for checking t ...继续阅读 (97)

This is post 1 of 1 in the series“How to Implement JWT”In this series, I will show you how to implement JWT in .Net Core API and communicate with Angular.1. IntroductionJWTmeans JSON Web Tokens, it usually uses for API authorization with the client.JWTis an open standard that defines a way to transmit information between two parties securely as a JSON object in a compact and verifiable way. It is great for securing REST APIs and authorization. There are some common use cases ofJWTinclude:1) Authorization – Once the user is logged in, each subsequent request will include theJW ...继续阅读 (93)

1. IntroductionThe web form is necessary for a website. And there are 2 types of forms in AngularReactive forms: Provide direct, explicit access to the underlying form’s object model. Compared to template-driven forms, they are more robust: they’re more scalable, reusable, and testable. If forms are a key part of your application, or you’re already using reactive patterns for building your application, use reactive forms.Template-driven forms: Rely on directives in the template to create and manipulate the underlying object model. They are useful for adding a simple form to a ...继续阅读 (91)

This is post 8 of 8 in the series“Create a website with ASP.NET Core and Angular”In this series, I will show you how to create the web API with .Net core and communicate with Angular in frontend, and I will keep to update it!How to setup VS Code environment for ASP.NET Core ProjectUse code first to connect database in .Net Core APIUse the Repository pattern in .Net coreCreate .Net Core Api controller for CRUD with repositoryUse the Serilog in .Net CoreCreate Angular Project and Communicate with .Net CoreCreate Paging Data from .Net Core ApiHow to do Unit Testing for the Core Api Pr ...继续阅读 (92)

1. Tom and his hobbiesTom has 3 hobbies, there are playing games, watching Youtube, and photography with a mobile phone. So we can use a simple codes for that:public class Tom : Person { private string _name; private int _age; public void PlayGames() { //play games } public void WatchYoutube() { //watch Youtube } public void Photography() { //photography } }but as a person, Tom can’t do the above by himself, he must be used a phone! So he bought an iPhone8(maybe a few years ago :laughing:), and then we update the co ...继续阅读 (96)

1. IntroductionDocuments are very important for a project, especially the company’s project. There are many Document Management Systems (DMS) in the market, most of them need to host a server for publishing and it’s complex to set up and deploy, so I think there are not my choice until I found the MkDocs :smiley:2. MkDocsWhich DMS should you want to use that base on what’s your requirements. I choice the MkDocs because it met my below requirements:1) Don’t need to deploy to a server2) Faster and easy to use3) There are beauty layouts or themes4) Can generate the PDF fil ...继续阅读 (118)

1. IntroductionThat will be easy if we just want to simple to integrate the HTML layout into Angular, just create the header,center and footer component and put the corresponding HTML to each component will be ok, but, I don’t like it, because I think the well design structure is very important for a project, in my concept, I think there are at least two part layouts for a complete website, one is frontend for presentation and the other is backend for admin management. So we should need to support two difference layouts in this situation.By the way, for this article, I just want to demo ...继续阅读 (111)

This is post 7 of 7 in the series“Create a website with ASP.NET Core and Angular”In this series, I will show you how to create the web API with .Net core and communicate with Angular in frontend, and I will keep to update it!How to setup VS Code environment for ASP.NET Core ProjectUse code first to connect database in .Net Core APIUse the Repository pattern in .Net coreCreate .Net Core Api controller for CRUD with repositoryUse the Serilog in .Net CoreCreate Angular Project and Communicate with .Net CoreCreate Paging Data from .Net Core ApiThis article is the second part forCreate ...继续阅读 (95)

This is post 6 of 6 in the series“Create a website with ASP.NET Core and Angular”In this series, I will show you how to create the web API with .Net core and communicate with Angular in frontend, and I will keep to update it!How to setup VS Code environment for ASP.NET Core ProjectUse code first to connect database in .Net Core APIUse the Repository pattern in .Net coreCreate .Net Core Api controller for CRUD with repositoryUse the Serilog in .Net CoreCreate Angular Project and Communicate with .Net CoreTitle: Create Angular Project and Communicate with .Net CoreWe have created the ...继续阅读 (100)

This is post 5 of 5 in the series“Create a website with ASP.NET Core and Angular”In this series, I will show you how to create the web API with .Net core and communicate with Angular in frontend, and I will keep to update it!How to setup VS Code environment for ASP.NET Core ProjectUse code first to connect database in .Net Core APIUse the Repository pattern in .Net coreCreate .Net Core Api controller for CRUD with repositoryUse the Serilog in .Net CoreIn thepreviousarticle, I introduced how to create Api Controller for CURD. In this time, we will take a look how to use theSerilogin ...继续阅读 (99)

This is post 4 of 4 in the series“Create a website with ASP.NET Core and Angular”In this series, I will show you how to create the web API with .Net core and communicate with Angular in frontend, and I will keep to update it!How to setup VS Code environment for ASP.NET Core ProjectUse code first to connect database in .Net Core APIUse the Repository pattern in .Net coreCreate .Net Core Api controller for CRUD with repositoryIn thepreviousarticle, I introduced how to use the repository pattern, at this time, I will show you how to use for CURD with the Api controller.We need to crea ...继续阅读 (106)

This is post 3 of 3 in the series“Create a website with ASP.NET Core and Angular”In this series, I will show you how to create the web API with .Net core and communicate with Angular in frontend, and I will keep to update it!How to setup VS Code environment for ASP.NET Core ProjectUse code first to connect database in .Net Core APIUse the Repository pattern in .Net coreIn this post, I will talking about theRepositorypattern and why should we use it.1. IntroductionThe Repository design pattern is a widely-used software design pattern that provides an abstraction layer between the bu ...继续阅读 (160)

1 IntroductionIf you’re looking to host a website or create a web server at home, a network-attached storage (NAS) device like Synology can be a great option. However, one challenge that you may face is that your home internet connection may not have a static IP address, which makes it difficult to access your server from the internet.This is where Dynamic DNS (DDNS) comes in. DDNS is a service that allows you to assign a domain name to your home IP address, even if it changes frequently. In this blog post, we’ll show you how to use DDNS to create a web server on your Synology NAS. ...继续阅读 (115)

In the previousarticle, I have explained how to use VS Code to setup an ASP.NET Core development environment. Now, let’s talking about how to build a database connection project! Here I have to say again that it is so comfortable to use VS CODE for development! 🙂 OK, without further ado, let’s do it!1 Create the API project1.1 Create FolderCreate a folder namedDemo, then open it in VS Code (I usually drag the directory into VS Code) and create a folder namedMyDemo.API. You can openMyDemo.APIin VS Code, or drag it directly into VS CODE.1.2 Create SolutionClick the vscode solution bu ...继续阅读 (113)

Visual Studio Code (hereinafter referred to as VS Code) is really a very powerful IDE, even better than Visual Studio! Next, let’s introduce how to use VS Code to develop .NET CORE.Since .NET 5.0 now supports cross-platform and is mainly based on CORE, it can be developed directly using VS Code. Next, let me talk about why I use VS Code to develop: smiley:1.Why use VS CodeVS Code is a lightweight code editor that has the following advantages over Visual Studio (hereinafter referred to as VS):1.1 Lightweight and fastVS Code is a lightweight application that starts quickly and uses little system ...继续阅读 (123)

I just updated the cTrader Risk & Reward Management cBot to the 3.1 new version, the major update just for support the latest cTrader version and upgrade all of the codes to .Net 6 🙂 And today, I will show you the details for how to use it!You can download the below latest version and try it for free for 30 times!CoderBlog-RS-Management-3.1.algo (503 downloads)Register ScreenWhen you use first time, you will get the below popup for show you some information:Code: This is your machine code, if you want to purchase it, you can send this code for me and I will send you the register keyKey: Input ...继续阅读 (125)

I just updated the cTrader Risk & Reward Management cBot to the 3.1 new version, the major update just for support the latest cTrader version and upgrade all of the codes to .Net 6 🙂 And today, I will show you the details for how to use it!You can download the below latest version and try it for free for 30 times!CoderBlog-RS-Management-3.1.algo (503 downloads)Register ScreenWhen you use first time, you will get the below popup for show you some information:Code: This is your machine code, if you want to purchase it, you can send this code for me and I will send you the register keyKey: Input ...继续阅读 (109)

1. 什么是 FlutterFlutter 是一個由 Google 開發的開源移動應用程序開發框架，它可以讓您快速開發高品質、高性能、美觀的移動應用程序。Flutter 通過使用自己的控件庫和渲染引擎，可以輕鬆實現自定義的設計和動畫效果，並且可以在 iOS 和 Android 平臺上運行。Flutter 使用 Dart 編程語言，這是一個由 Google 開發的高效且易於學習的語言。Dart 具有許多現代編程語言的特性，如強類型、支持異步編程、支持泛型、支持 mixin 等，可以幫助開發者更快地開發出高質量的代碼。Flutter 還提供了豐富的工具和插件，如編輯器插件、測試工具、調試工具等，可以幫助開發者更快地開發和測試應用程序。總的來說，Flutter 是一個非常適合開發高品質、高性能、美觀的移動應用程序的框架，它具有豐富的功能和工具，可以幫助開發者更快地開發出高質量的代碼。2. 環境的搭建Flutter 可以支持多種平台，而不同平台的 SDK 設置也會有所不同的，不過 Flutter 的官方文檔做得非常好，只需到官方網站（https://flutter.dev/docs/get-started/install），根據你自己使用的平台去下載安裝相應的SDK即可，在此我就不多做説明了，如果有什麼問題可在下面留言！安裝好 SDK 後，就要選擇使用哪一個 IDE 進行開發了。我這裏就強 ...继续阅读 (112)

在上一篇文章裡，我已詳細說明了如何使用 VS Code 搭建 ASP.NET Core 的開發環境，現在，就讓我來說說如何建立一個完整的專案！在這裡不得不再次說一下，使用 VS CODE 做開發實在是太爽了:laughing:！OK，廢話少說，讓我們開始吧！建立專案首先建立一個名為 Demo 的資料夾，接著在 VS Code 裡打開（我通常是直接將資料夾拖進 VS Code）。點擊左側欄的VS Code solution按鈕，打開解決方案面板，接著點擊Create New Solution創建新的解決方案，名字就叫做MyDemo.API。在解決方案檔案上按右鍵，選擇add new project。選擇asp.net core api，選擇 c#，然後輸入專案名稱，這裡我們用MyDemo.API，之後會讓你輸入專案資料夾名稱，只要和專案名稱一樣即可。完成後就會建立一個完整的ASP.NET Core專案了。建立完後，可點擊左側的偵錯按鈕，然後打開偵錯面板，裡面會有提示讓你建立相關偵錯檔案的按鈕。點擊Generate C# Assets for Build and Debug即可自動生成調試用的相關配置檔案最後點擊RUN AND DEBUG的那個三角按鈕，測試一下專案是否能運行運行並測試API正常情況下，開啟調試後，會自動打開網頁並跳到https://localhost:7241/，這時 ...继续阅读 (122)

在我們還在為 .NET 7 興奮的時候，.NET 8 已經來臨了哦！時間過得真快，當你熱衷於編碼時，這個第一個預覽和.NET 8預覽版已經釋出了。在寫此文章時，已推出到最新的預覽版是5.0但不用擔心，微軟正努力為我們帶來最新和最棒的功能，我們將在本文中一一探索這些功能。接下來，就讓我們一起來看看.NET 8為我們帶來了哪些令人興奮的新更新。dotnet publish 和 dotnet pack微軟剛剛為dotnet publish和dotnet pack命令推出了一個很棒的新功能，這使得生成適用於生產的代碼變得更加容易。在此更新之前，這些命令默認生成Debug版本的代碼，如果你想生成適用於生產的代碼，可能有點麻煩。但是現在，通過這個新的更新，dotnet publish和dotnet pack默認生成Release版本的代碼，這意味著你可以輕鬆生成適用於生產的代碼，無需任何額外的步驟。但是不用擔心，如果你仍然需要出於任何原因生成Debug版本的代碼，可以通過將PublishRelease屬性設置為false來實現。dotnet publish 和 dotnet pack 的工作原理是怎樣的呢？首先，讓我們使用dotnet new console命令創建一個新的控制台應用程序。然後，使用dotnet build命令來構建項目並查看輸出。在這種情況下，輸出將處於Debug模式，因為這 ...继续阅读 (121)

在我們還在為 .NET 7 興奮的時候，.NET 8 已經來臨了哦！時間過得真快，當你熱衷於編碼時，這個第一個預覽和.NET 8預覽版已經釋出了。在寫此文章時，已推出到最新的預覽版是5.0但不用擔心，微軟正努力為我們帶來最新和最棒的功能，我們將在本文中一一探索這些功能。接下來，就讓我們一起來看看.NET 8為我們帶來了哪些令人興奮的新更新。dotnet publish 和 dotnet pack微軟剛剛為dotnet publish和dotnet pack命令推出了一個很棒的新功能，這使得生成適用於生產的代碼變得更加容易。在此更新之前，這些命令默認生成Debug版本的代碼，如果你想生成適用於生產的代碼，可能有點麻煩。但是現在，通過這個新的更新，dotnet publish和dotnet pack默認生成Release版本的代碼，這意味著你可以輕鬆生成適用於生產的代碼，無需任何額外的步驟。但是不用擔心，如果你仍然需要出於任何原因生成Debug版本的代碼，可以通過將PublishRelease屬性設置為false來實現。dotnet publish 和 dotnet pack 的工作原理是怎樣的呢？首先，讓我們使用dotnet new console命令創建一個新的控制台應用程序。然後，使用dotnet build命令來構建項目並查看輸出。在這種情況下，輸出將處於Debug模式，因為這 ...继续阅读 (102)

Visual Studio Code （以下簡稱 VS Code）真是一個非常強大的 IDE，甚至感覺比起 Visual Studio 還要好用！接下來，就介紹一下如何使用 VS Code 就可以進行 .NET CORE的開發。由於現在 .NET 5.0 之後，就可以支持跨平台且都是以 CORE 為主的，所以已可以直接使用 VS CODE進行開發了，接下來就先說一下我為什麼要使用 VS Code 開發吧:smiley:一、為什麼要使用 VS CodeVS Code 是一個輕量級的程式碼編輯器，相較於 Visual Studio（以下簡稱 VS）具有以下幾個優點：1. 輕量且快速VS Code 是一個輕量級應用程式，啟動速度快且佔用的系統資源少。相較於 VS 的完整集成開發環境，VS Code 的執行效能更優。2. 多平台支援VS Code 可在 Windows、macOS 和 Linux 等多個作業系統上運行，使開發者能夠在不同平台上保持一致的開發環境。3. 強大的擴充性VS Code 提供了豐富的擴充套件，可以根據開發需求自由擴展功能。開發者可以根據自己的需求安裝各種語言支援、代碼片段、主題等擴充套件，使編輯器更符合個人喜好和工作流程。而這一點，也是我非常喜歡它的原因之一！通過各種套件，可以大大地提高開發效率，這一點是 VS 很難比及的。4. 有豐富的主題資源這個雖然並不是非常硬 ...继续阅读 (126)