React usestate (#1)

* added deploy nopcommerce on azure app service updated: using the easy way for nopcommerce installation added screenshot for install step of nopCommerce updated refactor images * add microservices practices and add new file logging.md then add 30 Best practices for Logging at Scale * add scheduler * fix typo * add cypress testing page and example * modify format following to dotnetthailand#167 * add overview of azure cognitive service * add Testing Thai langauge on Content Moderator * Share my learned about React props (dotnetthailand#164) * create reactjs.md * create react-props.md * change reactjs.md to react-js.md * add title to react-props.md * add content of props * add topic optional props * add another subject in second topic * finished optional props * add topic props spread syntax * finished topic props spread syntax * add topic props childreen * finished props childrent * add topic props key * finished props key * adjust subject by using #### * add some details for props key * add credit image * edit content of react props * create my content about react props * feat: add text-transform content with example component * three way to insert css (stylesheet) Update insert-css.md * fix facebook comment doesnt dark theme when using dark mode (dotnetthailand#169) remove param that we didnt use it checkout origin/main yarn.lock * Add the overview section of azure applied ai service * Add list of applied ai services * add new section when should you use applied ai servoce * Add reference links about Azure Applied AI Service * add section about learning curve that make cognitive service hard to use * Add rename all files in a folder * add repodb part 1 * fix typo I found just a little typo to fix, done. * add dotnet cli doc * add dotnet cli doc * update async/await * add docker file doc * docker network info * fixing from comment * Reorder content. This article will be placed after "how to setup" article * Add how to setup content moderator service * Add Basic of unit testing (in Thai) Add Basic of unit testing (in Thai) * [Fix] Support Tablet Device (800px - 1100px case) (dotnetthailand#181) * refactor: prettier format * feat: update font-size and padding with media screen to navigation * feat: update styles for 800px device width * feat: update styles for 1024px device width * repodv part 2 * git-bisect-cookbook * update * AddXUnitSetup Add xUnit project set up guideline * FirstUnitTestInCSharp Add a chapter on the first unit test in C# with xUnit * TestingAComplexClass Refactoring technique and coding sample * First chapter of F# series * [ADD] Math for game section to faq/fundamental * [ADD] Lerp to math for game * creat article of useState and useEffect * add: vim tip 1 * OOP in F# * add: vim replacement inside visual selection * Other data types in F# * add: basic vim config * F# paradigm! * Fix Markdown format. Add two section contents. * add: vim tip for sort css * rename from reactjs.md to react-js.md * create article about react-props * create article about react-hooks.md * update: Big charactor on title; add: explaination on command * Add stop & start App Sevice with GitHub Actions cron * Fix error in Async/Await page * Add how to get Azure Credentials * Fix typo * Fix Typo * fix typo * add reference * Update install .NET 6 document * Add how to read a file in Orchard Core module * Add show details of Azure SQL server command * Update Storage Account document * Add falling snow * Improve snow size and animation * Transparent snowflake * Add an example of using secret in SQL Server Docker compose * Show falling snow before and after Christmas * Corrected spelling error OP File -> PO File * Add git-subrepo tutorial * Move non-checklist async/await to basic knowledge * Improve Minimal APs document * Update Playwright document and test with WSL2 * Create how to install Java & Java console app document * Add parse email system image * More useful contents/how to add a shape to an existing content item * Add placement.json tip * Add Orchard Facebook Login document * Add how to create a list content item in Orchard * Correct default value of ContainerId to null * Improve Git substree document * Add ASP.NET Core tips * Improve wording in git-subrepo document * Improve Setup Orchard Core document * Initial azure service bus content * Add Azure Service Bus content * Update topic * Fix format according to Arron comment * Improve Azure CLI and Function App documents * Improve working with a file tip * fix:change <a> color in friends-of-dotnet-thailand.md * Rebase and fix conflict in README.md * Add Auth0 Login chapter * Add Discord API document * Fix build error from Repo DB content * rename from reactjs.md to react-js.md create article about react-props create article about react-hooks.md create my content about react props create react-props.md change reactjs.md to react-js.md add title to react-props.md add content of props * rename from reactjs.md to react-js.md create article about react-props create article about react-hooks.md create my content about react props create react-props.md change reactjs.md to react-js.md add title to react-props.md add content of props add topic optional props add another subject in second topic finished optional props add topic props spread syntax finished topic props spread syntax add topic props childreen finished props childrent add topic props key finished props key adjust subject by using #### add some details for props key add credit image edit content of react props creat article of useState and useEffect Co-authored-by: Piti (Fyi) Champeethong <[email protected]> Co-authored-by: aaronamm <[email protected]> Co-authored-by: iamgique <[email protected]> Co-authored-by: Keattisak Chinburarat <[email protected]> Co-authored-by: Keattisak Chinburarat <[email protected]> Co-authored-by: Teerasej Jiraphatchandej <[email protected]> Co-authored-by: Runyasak Chaengnaimuang <[email protected]> Co-authored-by: Thada Wangthammang <[email protected]> Co-authored-by: Sirinat Paphatsirinatthi <[email protected]> Co-authored-by: Utharn Buranasaksee <[email protected]> Co-authored-by: Duangrudee <[email protected]> Co-authored-by: DESKTOP-MJV0GUE\Thiti <[email protected]> Co-authored-by: Ruxo Zheng <[email protected]> Co-authored-by: Gittitat Ekchantawut <[email protected]> Co-authored-by: codewiz <[email protected]> Co-authored-by: ponggun <[email protected]> Co-authored-by: Jon Galloway <[email protected]> Co-authored-by: nakorn <nakorn@developer> Co-authored-by: kidchenko <[email protected]> Co-authored-by: Piti (Fyi) Champeethong <[email protected]>
Pobx · Oct 24, 2022 · fd53e1e · fd53e1e
1 parent 67482c0
commit fd53e1e
Show file tree

Hide file tree

Showing 165 changed files with 5,430 additions and 1,082 deletions.
diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
diff --git a/.github/workflows/publish-to-github-pages.yml b/.github/workflows/publish-to-github-pages.yml
@@ -7,7 +7,7 @@ on:
     branches:
       - main
 jobs:
-  build:
+  build_and_deploy_job:
     runs-on: ubuntu-latest
     env:
       ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
@@ -17,7 +17,10 @@ jobs:
       - uses: actions/checkout@master
 
       - uses: enriikke/gatsby-gh-pages-action@v2
+      # https://github.com/enriikke/gatsby-gh-pages-action/releases
+      # source https://github.com/enriikke/gatsby-gh-pages-action/blob/main/index.ts
         with:
           # access-token is a GitHub Personal access token with the "repo" scope
           access-token: ${{ secrets.PUBLIC_REPO_ACCESS_TOKEN }}
-          deploy-branch: gh-pages
+          deploy-branch: gh-pages
+
diff --git a/.gitignore b/.gitignore
@@ -5,8 +5,7 @@ node_modules
 *.env
 
 .idea/
-.vscode/
 *.iml
 reduxcache*
 *.log
-.generated.config.js
+.generated.config.js
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "editor.minimap.enabled": false,
+  "workbench.settings.editor": "json"
+}
diff --git a/README.md b/README.md
@@ -10,25 +10,31 @@
 See [CONTRIBUTING](./CONTRIBUTING.md).
 
 ## How to run this project locally
-- Install `Yarn` and `Gatsby` as a global tool.
+- Install `Yarn`.
 - Clone the repository to your local machine.
 - CD to the root of project folder.
 - Install all dependencies.
+
+## Running on localhost
+
+- To install the dependencies you need to run:
+
 ```
 $ yarn
 ```
-- Run a project and enable hot-reload.
+- If is the first time you are installing the dependencies it may take few minutes, get a coffee and relax ;)
+- To run the project with hot-reload enabled you can.
 ```
 yarn start
 ```
 - Open a browser and navigate to http://localhost:8000.
-- Change some contents of `content/index.mdx` and you will find browser auto reload and show what you have changed.
+- Change some contents of `content/index.mdx` and you will find a browser reload and show what you have changed automatically.
 
-## Troubleshooting if you have any issue while running the project
-- 404 after deployment, you may miss CNAME file
-- Markdown content inside component not show https://awsm.page/mdx/mdx-markdown-inside-a-react-component/
-- Failed to launch the browser process: error while loading shared libraries: libnss3.so: No such file or directory.
-  Follow the steps in the following link. https://github.com/alixaxel/chrome-aws-lambda/issues/164#issuecomment-754621407
+## Troubleshooting
+If you have any following issues while running the project, please follow short instruction to fix them.
+- Failed to launch the browser process: error while loading shared libraries: libnss3.so: No such file or directory, follow the steps in this [link](https://github.com/alixaxel/chrome-aws-lambda/issues/164#issuecomment-754621407).
+- 404 after deployment, you may miss a `CNAME` file in a repository.
+- Markdown content inside a content folder does not show, please check https://awsm.page/mdx/mdx-markdown-inside-a-react-component/.
 
 ## To do
 - We use [GitHub Issues](https://github.com/dotnetthailand/dotnetthailand.github.io/issues/new) to track our to do items.

diff --git a/config/config.yml b/config/config.yml
@@ -53,7 +53,7 @@ sidebar:
 
     - order: 5
       path: /cloud-hosting
-      title: ':globe_with_meridians: Cloud & Hosting'
+      title: ':cloud: Cloud & Hosting'
 
     - order: 6
       path: /programming-cookbook
@@ -67,6 +67,10 @@ sidebar:
       path: /awesome-dotnet-thailand-projects
       title: ':package: Awesome .NET Thailand Projects'
 
+    - order: 9
+      path: /3rd-party-api
+      title: ':briefcase: 3rd party API'
+
   links:
     - text: .NET Thailand
       link: https://www.facebook.com/groups/dotnetthailand

diff --git a/content/3rd-party-api/discord.md b/content/3rd-party-api/discord.md
@@ -0,0 +1,11 @@
+---
+title: Discord API
+showMetadata: false
+editable: true
+showToc: false
+order: 1
+---
+
+# Discord bot code examples
+
+- [Send a message to a channel with Discord bot](SendMessage)
diff --git a/content/3rd-party-api/discord/SendMessage.md b/content/3rd-party-api/discord/SendMessage.md
@@ -0,0 +1,111 @@
+---
+title: Send a message to a channel with Discord bot
+showMetadata: true
+editable: true
+showToc: true
+---
+
+# Prerequisite
+- You have setup Discord Server.
+- You have create a new bot and add it to your Discord server.
+- Please check ["Making Your First Bot with Discord.Net"](https://discordnet.dev/guides/getting_started/first-bot.html) document for more information.
+
+
+# Setup .NET project and add required Nuget package
+- Create a .NET Console app project with the following command:
+  ```sh
+  $ dotnet new console --name DiscordClientExample
+  ```
+- CD to `DiscordClientExample` folder and add a Nuget package with the following command:
+  ```sh
+  $ dotnet add package Discord.Net
+  ```
+
+# Update code to send a message to Discord channel
+- Open the project with VS Code.
+- Open `Program.cs` file and update the code as following:
+  ```cs
+  using Discord;
+  using Discord.WebSocket;
+
+  const string botToken = @"";
+  ulong channelId = 0;
+
+  var client = new DiscordSocketClient();
+  await client.LoginAsync(TokenType.Bot, botToken);
+  await client.StartAsync();
+
+  var channel = await client.GetChannelAsync(channelId) as IMessageChannel;
+  await channel!.SendMessageAsync("Hello world");
+  ```
+- Get bot's token from [Discord application portal](https://discord.com/developers/applications/) and set it as value of `botToken` variable.
+- Get ID of a channel that you want to send a message to. [You must enable developer mode before you can get a channel ID.](https://support.discord.com/hc/en-us/articles/206346498-Where-can-I-find-my-User-Server-Message-ID-) Set it to channelId variable;
+
+# Run the project
+- Open VS Code integrated terminal with ``` ctrl+` ``` shotcut.
+- Then execute the follow command:
+  ```sh
+  $ dotnet run
+  ```
+# Verify if we have message from Discord bot in a chanel
+- If everything works properly, you should find `Hello world` message in a Discord channel.
+
+# Update code to send an embedded message to Discord channel
+
+## Send a message with an image that is hosted on a server.
+- Open `Program.cs` file and update the code as following:
+  ```cs
+  using Discord;
+  using Discord.WebSocket;
+
+  const string botToken = @"";
+  ulong channelId = 0;
+
+  var client = new DiscordSocketClient();
+  await client.LoginAsync(TokenType.Bot, botToken);
+  await client.StartAsync();
+
+  var embed = new EmbedBuilder()
+      .WithImageUrl("https://openclipart.org/image/800px/103855") // a URL of an image
+      .Build();
+
+  var channel = await client.GetChannelAsync(channelId) as IMessageChannel;
+  // TTS (text to speech), to set whether the message should be read aloud by Discord or not.
+  await channel!.SendMessageAsync(text: "We ♥ Linux.", isTTS: false, embed: embed);
+  ```
+
+## Send a message with a stream image data
+- This can be useful when you want to use a local image and upload it to Discord server.
+- Open `Program.cs` file and update the code as following:
+  ```cs
+  using Discord;
+  using Discord.WebSocket;
+
+  const string botToken = @"";
+  ulong channelId = 0;
+
+  var client = new DiscordSocketClient();
+  await client.LoginAsync(TokenType.Bot, botToken);
+  await client.StartAsync();
+
+  // The attached file name must match the one sent to Discord
+  const string fileName = "tux.png";
+  var embed = new EmbedBuilder()
+      .WithImageUrl($"attachment://{fileName}")
+      .WithDescription("We ♥ Linux.")
+      .Build();
+
+  using var memoryStream = new MemoryStream();
+  var fileUrl = "https://openclipart.org/image/800px/103855";
+  using var downloadedStream = await new HttpClient().GetStreamAsync(fileUrl);
+  await downloadedStream.CopyToAsync(memoryStream);
+
+  var channel = await client.GetChannelAsync(channelId) as IMessageChannel;
+  await channel!.SendFileAsync(stream: memoryStream, filename: fileName, embed: embed);
+  ```
+
+# Reference
+
+- [Making Your First Bot with Discord.Net](https://discordnet.dev/guides/getting_started/first-bot.html)
+- [Where can I find my User/Server/Message ID?](https://support.discord.com/hc/en-us/articles/206346498-Where-can-I-find-my-User-Server-Message-ID-)
+- [Using a local image with EmbedBuilder](https://stackoverflow.com/a/63462663/1872200)
diff --git a/content/cloud-hosting/azure/azure-applied-ai-services.md b/content/cloud-hosting/azure/azure-applied-ai-services.md
@@ -0,0 +1,50 @@
+---
+title: Azure Applied AI service
+showMetadata: true
+editable: true
+---
+
+# เริ่มต้นทำความรู้จักกับ Azure Applied AI Service
+
+![Azure Applied AI Service](azure-applied-ai-services/images/Microsoft-Azure-AI-Official-Microsoft.jpeg)
+
+ลองมองดูรอบๆ ตัวเราสิครับ มันมักจะมีสิ่งพื้นๆ สำหรับการเริ่มต้น เช่นก่อนจะว่ายน้ำได้ ก็ต้องลอยตัวให้เป็นก่อน หรือจะเป็นก่อนจะทำต้มยำเป็น ก็ขอให้รู้การทำให้ไข่สุกก่อน การใช้งาน AI ในงานของเราก็เช่นกัน
+
+หากเราคุ้นเคยกับการใช้งาน [Azure Cognitive Service](azure-cognitive-services.md) ซึ่งเป็นบริการด้าน AI พร้อมใช้บนขุมพลังของ Microsoft Azure แล้ว จะพบว่าตอนนำมาใช้งานในภารกิจหนึ่ง หรือโปรเจคหนึ่งของเรา มักจะมีการเอา Cognitive Service แต่ละตัวมาทำงานร่วมกันเสมอ 
+
+ตรงนี้กลายเป็นว่าเราต้องเชี่ยวชาญในด้านเทคนิค และอาจจะต้องอาศัยทักษะของนักพัฒนาด้วย เพื่อที่จะนำ Cognitive Service แต่ละตัวมารวมกันจนทำงานได้ 
+
+ซึ่งหลังจากปล่อย Cognitive Service ออกมาได้พอสมควร ทาง Microsoft ก็เอา feedback จากผู้ใช้งานอย่างเราๆ (พลก็มีเสนอเข้าไปไม่น้อย) มาสร้างเป็น Solution ที่เจาะจงกับการใช้งานมากขึ้น และเรียกว่า Azure Applied AI Service นั่นเอง
+
+## บริการต่างๆ ของ Azure Applied AI Service
+
+Microsoft ได้แบ่งประเภทของบริการออกจากลักษณะการนำไปใช้งานในธุรกิจ ดังรายการด้านล่าง 
+
+1. Conversation - Azure Bot Service
+2. Documents - Azure Form Recognizer
+3. Search - Azure Cognitive Search
+4. Monitoring - Azure Metrics Advisor
+5. Videos - Azure Video Analyzer
+6. Accessibility - Azure Immersive Reader
+
+ซึ่งปัจจุบันที่เขียนแนะนำอยู่นี่มี 6 ตัวที่สามารถนำไปใช้ได้อย่างเป็นทางการแล้ว แต่มีอีก 2 ตัวที่กำลังจะถูกเพิ่มเข้ามา ซึ่งเดี๋ยวจะเล่าแยกไว้ต่างหากครับ
+
+## เมื่อไหร่ถึงจะใช้ Applied AI Service?
+
+![when should I use Applied AI service?](azure-applied-ai-services/images/when-to-choose-ai.png)
+
+ทีนี้พอมันมีกลุ่มบริการด้าน AI ถึง 2 กลุ่ม ทำให้พวกเราบางคนอาจจะสงสัยว่า "เอ้า แล้วเราจะใช้ Applied AI Service ตอนไหนล่ะ?"
+
+เลยอยากเสนอแนวคิดง่ายๆ ครับ คือ Applied AI Service เนี่ย สร้างมาสำหรับงานเฉพาะทางมากๆ เช่น Form Recognizer Service ที่สร้างมาเพื่ออ่านข้อมูลจากเอกสารมาเป็นตัวแปรเพื่อส่งเข้าระบบโดยเฉพาะ
+
+ซึ่งถ้าเกิดเคสการใช้งานของเรา ตรงกับตัวนี้ ก็สามารถเข้าไปดูวิธี และขอบเขตการใช้งานได้เลย 
+
+แต่ถ้าเราต้องการวิเคราะห์รูปภาพเพื่อจำแนกภาพถ่ายเป็นกลุ่มต่างๆ ตัว Vision API ของ Azure Cognitive Service ก็จะตรงกับความต้องการของเราอยู่ดีครับ
+
+
+## ศึกษาเพิ่มเติม 
+
+ถ้าสนใจ สามารถไปศึกษาบริการอื่นๆ เพิ่มเติมได้จากทั้งของ Microsoft หรือที่พลเคยเขียน blog ไว้ได้เลย 
+
+- [Microsoft Applied AI Services](https://azure.microsoft.com/en-us/product-categories/applied-ai-services/#overview)
+- [เรื่อง Applied AI Service บน blog ของโค้ชพล](https://nextflow.in.th/tag/azure-applied-ai/)
diff --git a/...ure/azure-applied-ai-services/images/Microsoft-Azure-AI-Official-Microsoft.jpeg b/...ure/azure-applied-ai-services/images/Microsoft-Azure-AI-Official-Microsoft.jpeg
diff --git a/content/cloud-hosting/azure/azure-applied-ai-services/images/when-to-choose-ai.png b/content/cloud-hosting/azure/azure-applied-ai-services/images/when-to-choose-ai.png