Nalson

...

Next JS 和開放式 AI / GPT：下一代 Next JS 和 AI 應用程式這篇是學習Next JS 和開放式 AI / GPT：下一代 Next JS 和 AI 應用程式 課程的紀錄，課程上有使用到以下工具 OpenAI 的 GPT 在應用程式中實現 AI 生成的內容 Auth0 驗證 Next JS 應用程式 Tailwind CSS 設計 Next JS 應用程式 MongoDB 儲存 Next JS 應用程式的資料 Stripe 向客戶收費 其中發現台灣沒辦法使用 Stripe 收費這邊比較困擾一點，另外其他功能都有成功設定。 第一堂課程課程教學Github: https://github.com/tomphill/blog-standard-courseReact基礎課程: https://youtu.be/HVFSgIVXcD4第一堂Github連結: https://github.com/tomphill/nextjs-openai-starter課程連結:...

前言當開發RESTful API時，有效的文檔是極其重要的，它可以幫助開發者快速理解和使用API。Swagger是一個強大的工具，用於自動生成和維護API文檔。 本文將指導你如何使用Swagger在Gin框架中自動生成API文檔，並提供一些維護的最佳實踐。 為什麼選擇Swagger？1.標準化: Swagger遵循OpenAPI規範，這是一個業界標準。2.交互性: Swagger UI允許用戶直接從文檔中測試API，無需其他工具。 安裝流程安裝必要的套件首先，我們需要安裝swag CLI工具和Gin的Swagger中間件。 swagger cmd: 用於生成介面文件的命令列工具。 1go get -u github.com/swaggo/swag/cmd/swag Starting in Go 1.17, installing executables with go get is deprecated. go install may be used instead: 1go install...

前言這篇是我看到 [Docker] 如何讓 MySql 資料保存，不會隨著容器而消失跟著實作的紀錄 Container 內容持久化開發的時候 Docker 扮演一個重要的角色，我們能透過 docker-compose 快速的啟用一些需要使用到 App服務. 此篇就是要來介紹，如果透過 Volume 的方式，將 MySql Container 內容持久化。 Docker 指令介紹根據 dokcer-compose .yaml 啟動 1docker-compose up 停止 contanier 1docker-compose stop 移除 container 1docker-compose down 使用 docker 指令的時候，很會透過 docker-compose down 來關閉 container，這時候就會發現存放在 mysql 中的 資料，在下一次啟動 container 的時候就會全部消失。 如何解決 docker-compose down 資料也不會消失在 yaml 中新增 Volumes，Volumes 會將資料存放於 Container...

前言這篇是我看到這篇文章https://github.com/880831ian/go-restful-api-repository-messageboard?tab=readme-ov-file跟著實作練習的紀錄，是使用 Go 來寫一個 Repository Restful API 的留言板，並且會使用 gin 以及 gorm (使用 Mysql)套件。另外有加入 docker-compose設定跟mysql 連線調整。 開發環境Go https://go.dev/ GIN框架 https://gin-gonic.com/ Mysql Docker 檔案結構123456789101112131415.├── controller│ └── controller.go├── go.mod├── go.sum├── main.go├── model│ └── model.go├── repository│ └── repository.go├── router│ └── router.go└── sql ├── connect.yaml └──...

這一篇是參考以下教學文章[教學] Azure Blob Storage 使用指南 – 創建篇實作練習的紀錄 Azure Blob Storage 設定流程Microsoft Azure 的 Blob Storage 提供了透過 restful api 來對檔案進行取得檔案以及對其新增、修改刪除的功能，對於在許多機房能夠同時存取非常方便，本篇將教學如何透過 azure portal 創建 Microsoft Azure 的 Blob Storage。 Blob 主要架構分為三層 架構 說明 儲存體帳戶 (storage account) 表示一個倉庫帳號，一個使用者可以創間多個儲存體帳戶 容器 (container) 類似於硬碟的概念，在一個 storage account 可以有多個 container，用來區分不同用途的檔案 Blob (檔案或資料) 類似於檔案系統的檔案，並且可以有資料夾多層式的階層來做更進一步的分類 創建 storage account首先進入 azure portal...

前言這邊我是參考這篇 一文教会你如何使用 Vercel 部署你的 NestJS 应用 教學文章跟著操作的紀錄 Nestjs 專案增加 vercel 設定文件在跟目錄下新增 vercel.json 文件 12345678910111213141516171819202122{ "version": 2, "builds": [ { "src": "src/main.ts", "use": "@vercel/node" } ], "routes": [ { "src": "/(.*)", "dest": "src/main.ts", "methods": [ "GET", ...

前言這邊在練習Nuxt 3時想要運行在Docker 上，所以就找到這篇文章將 Nuxt3 發布至 docker 中，Dockerfile 看這裡就對了實際測試可以成功，所以記錄一下過程 Dockerfile1234567891011121314151617181920212223# 使用 node 長期支援版FROM node:lts-alpine# 設定工作目錄WORKDIR /app# 複製 package.json 和 package-lock.json 至工作目錄COPY package*.json ./# 依照指定版本安裝依賴RUN npm ci# 複製所有COPY . .# 建立生產版本RUN npm run build# 暴露的連接埠EXPOSE 3000# 啟動應用程式CMD ["node", ".output/server/index.mjs"] 打包1docker build -t my-nuxt-app . 啟動1docker run -d --name nuxt-app -p 3000:3000...

LinkedIn Redesign Nuxtjs3準備Figma 設計稿https://www.figma.com/file/7EeOLaEuMD7cNIsXTM8vp0/LinkedIn-Redesign-UI-Kit-(Community)?node-id=0%3A1&mode=dev 建立Nuxt.js 3 專案npx nuxi@latest init nuxt-linkedIn-redesign 把每一頁透過 Builder.io 產生程式 Framework 選擇 Vue 新增 profile page 元件1npx nuxi add page profile 調整 app.vue 檔案 12345<template> <div> <NuxtPage /> </div></template> 另外需要安裝...

前言這篇文章是我在 2022 iTHome 鐵人賽看到 PixiJS青銅玩家 系列 文章做的一個紀錄。 PixiJS 是什麼?PixiJS 是一個用於創建2D網頁遊戲和互動內容的快速輕量級渲染引擎。它是一個使用JavaScript編寫的開源庫，提供了簡單而強大的API，使開發者能夠輕鬆地創建高性能的瀏覽器內遊戲和互動應用。 安裝PixiJSnpm1npm i...