n8n 入門完全指南 - 認識與安裝
n8n 入門完全指南 - 認識與安裝
一、什麼是 n8n?
1.1 n8n 簡介
n8n 是一個開源的工作流程自動化平台,結合了 AI 功能與商業流程自動化能力,讓技術團隊既能享有程式碼的彈性,又能擁有無程式碼工具的快速開發效率。這個工具的發音可以唸成「en-eight-en」或「nodemation」,名稱源自於「node」(節點視圖與 Node.js)和「automation」(自動化)的組合。
 
n8n 是一個開源的工作流程自動化平台,結合了 AI 功能與商業流程自動化能力,讓技術團隊既能享有程式碼的彈性,又能擁有無程式碼工具的快速開發效率。這個工具的發音可以唸成「en-eight-en」或「nodemation」,名稱源自於「node」(節點視圖與 Node.js)和「automation」(自動化)的組合。
Oracle Database 23ai是Oracle 最新旗艦級資料庫版本,是繼19c之後的下一個長期支援版本(LTS),特別主打資料庫原生嵌入 AI 能力,帶來超過 300 項新功能,並在架構、效能、安全性等多方面相較舊版本有重大升級。
前情提要,我曾經在手機安裝一個抽籤APP,跟朋友出國時想要看誰抽中就誰請大家吃冰淇淋,有趣又好玩,但是換了手機就再也找不到當初那隻抽籤APP了,於是乎想到HTML5功能強大,有許多新的API,如果可以做出相同功能還可以免安裝,用瀏覽器直接瀏覽就能使用。
先來說明想做的效果,一人放一根手指在螢幕上,並在手指的位置畫個圈圈顯示不同的顏色,等待三秒後沒有人手指離開或新的手指加入便開始倒數五秒,接著亂數抽選中籤的手指,消除沒有中籤手指的圈圈,留下中籤的人請吃冰淇淋囉。
實際狀況可以參考如下:

<svg id="svg1" xmlns="http://www.w3.org/2000/svg"> <text id="ms" x="10" y="30" class="heavy">手指抽抽樂</text> <circle id="circle0" cx="50" cy="50" r="70" stroke="green" stroke-width="10" class="circle" /> <circle id="circle1" cx="50" cy="50" r="70" stroke="red" stroke-width="10" class="circle" /> <circle id="circle2" cx="50" cy="50" r="70" stroke="blue" stroke-width="10" class="circle" /> <circle id="circle3" cx="50" cy="50" r="70" stroke="yellow" stroke-width="10" class="circle" /> <circle id="circle4" cx="50" cy="50" r="70" stroke="purple" stroke-width="10" class="circle" /> <circle id="circle5" cx="50" cy="50" r="70" stroke="orange" stroke-width="10" class="circle" /> <circle id="circle6" cx="50" cy="50" r="70" stroke="navy" stroke-width="10" class="circle" /> <circle id="circle7" cx="50" cy="50" r="70" stroke="pink" stroke-width="10" class="circle" /> </svg>
<style>
    body {
      margin: 0;
         }
    svg {
      width: calc(100vw );
      height: calc(100vh - 20px);
      background-color: lightblue;
        }
    .circle {
      visibility: hidden;
        }
    .heavy {
      font: bold 30px sans-serif;
        }       
</style>;
<script> window.addEventListener("DOMContentLoaded", function () { var allCircles = document.querySelectorAll(".circle"); var timer1 = null, t1 = 3000; //三秒後開始倒數 var timer2 = null, countDown = 5000; //倒數五秒開獎 var timesUp = false; //開獎 function resetTimer() { clearInterval(timer1); clearInterval(timer2); timer2 = null; timer1 = null; countDown = 5000; } //開獎 + 全部隱藏 function end(touches) { if (timesUp) { for (var i = 0; i < allCircles.length; i++) { allCircles[i].style.visibility = "hidden"; } var x = Math.floor(Math.random() * touches.length); allCircles[x].style.visibility = "visible"; setTimeout(function () { timesUp = false; }, 3000); } } function refresh(touches) { //超過兩個以上且超過三秒就開始倒數 if (touches.length >= 1 && touches.length <= 8 && timer1 == null && !timesUp) { timer1 = setTimeout(function () { timer2 = setInterval(function () { countDown -= 100 document.getElementById("ms").textContent = countDown; if (countDown <= 0) { timesUp = true; end(touches); resetTimer(); } }, 100); }, t1); } if (!timesUp) { //全部隱藏 for (var i = 0; i < allCircles.length; i++) { allCircles[i].style.visibility = "hidden"; } //有幾個touch就顯示幾個 for (var i = 0; i < touches.length; i++) { var circle = document.querySelector("#circle" + i); circle.setAttribute("cx", Math.round(touches[i].clientX)); circle.setAttribute("cy", Math.round(touches[i].clientY)); circle.style.visibility = "visible"; } } } var svg1 = document.getElementById("svg1"); svg1.addEventListener("touchstart", function (event) { resetTimer(); refresh(event.touches) event.preventDefault(); event.stopPropagation(); }); svg1.addEventListener("touchend", function (event) { resetTimer(); refresh(event.touches) event.preventDefault(); event.stopPropagation(); }); svg1.addEventListener("touchmove", function (event) { refresh(event.touches) event.preventDefault(); event.stopPropagation(); }); }); </script>
寫了一整天完成這個功能,就在覺得自High的狀態下,想看看ChatGPT能不能也做出來,結果我下了一小段簡單的指令:

兩分多鐘做好了,立刻下載測試一下,真的做好了,哭哭。只不過缺了顯示倒數的功能,於是請他補上:

立刻下載測試一下,真的做好了,哭哭哭。不過圈圈太小了,看不大到,立刻請他修正:

立刻下載測試一下,真的做好了,哭哭哭哭。不過只把圈圈的寬高從80px調到120px,還是太小不滿意,但如果有學過且看得懂,還是自己調整比較快。另外,做出來的內容還是跟筆者寫的方式不同,運用的方式也有些不同,有需要的話各位可以下載回去用手機測試看看喔!
不管是親手撰寫程式或是透過AI產生,表面上能夠形容的功能也許能做得出來,但遇到需要調整維護時,如果沒學過基礎課程也沒辦法自己修改維護喔,持續請AI幫忙也不一定能完全滿足需求,這個時代雖然有AI幫忙,但自己的本質學能也要精進,才能更容易駕馭AI。
在當今快速變化的軟體開發環境中,Docker 已成為開發者不可或缺的工具。根據 Docker 官方資料,這個開源平台能夠讓開發者將應用程式與基礎架構分離,大幅縮短從撰寫程式碼到正式上線的時間。Docker 透過容器化技術,提供了一個輕量、隔離且一致的執行環境,解決了傳統開發中「在我的電腦上可以運作」的經典難題。