前言

平時我們在收到各種平台上都很容易收到各式各樣的廣告文宣(職棒比賽、系上活動、社團...etc)，收到後卻因為忘了放進行事曆而錯過了很多活動跟獎品...🥲

而在這些文宣中有很多重要資訊，像是：標題、時間、地點、簡述、美美的圖，有沒有發現一些共同點？就是跟平常我們再加行事曆時的內容基本上一樣啊！(除了圖片以外)

這兩個相性這麼像，想當然一定是要把它組合再一起才對！因此透過這個專案，只要把圖片或圖片網址給 LINE Bot，就能夠幫你產生一個 Google Calendar 連結，讓你變成一個活動達人！

• 前言
• LINE Bot & Gemini Pro 設定細節請參考: 旅行小幫手 LINE Bot 文章
  • 事前準備
  • 關於 Gemini API Price
  • 流程圖
• 介紹
  • 試題：範例為列出五個項目，修改 prompt 找出群組的大家最近關注的事項
• 增加天氣 Open Data 功能
• 衛星雲圖 - 是否有雲層
• 活動小結

前言

此篇文章為延續與政治大學 & 臺北大學 GDSC 工作坊的文章，如果對於整合 LINE 官方帳號的相關資訊，可以參考本篇喔！

前言

經歷過連續兩週兩場 DevFest 2023 的經驗(12/9, 12/16)，真的是把我畢生所學都拿出來榨乾了😆，但也很高興有機會在台中以及台北跟大家分享我在業餘時間透過 Google Cloud 開發 Side Project 的經驗談，以下內容為台北場內容，有興趣的跟著一起往下看吧！

背景介紹

過年改寫了我自己的在台北常使用的路上攝影機截圖工具，一開始求方便在每次請求來時會在容器當中開啟 chrome 去截圖，但由於是 MVP 以及沒有放 queue 在前面讓請求排隊，因此這樣的做法就無法提供給別人使用。

因此為了可用性，需要把截圖功能透過排程(cronjob)去實作，所以這次就將截圖功能改搬到 Cloud Function 並搭配 Cloud Scheduler 排程抓取。

前言

由於現在主流前端框架(Next, Nuxt)皆會透過 Virtual DOM 的方式渲染網站，在網站當中像是 class 就會有類似 class="qwe-1234" 的呈現方式，且會階層往下，但這在 google analytics 當中抓資料會有問題，因為跟一般 SPA 網站渲染方式呈現比較不同

前言

此篇文章為 2023/12/09 DevFest Taichung Serverless workshop 步驟文章，如果有需要透過 GCP Pub/Sub 將訊息轉打給訂閱的 Cloud Run endpoint，可以參考看看這篇文章喔！

前言

近期因為有玩滑板，而且身處台北很容易下雨，因此需要找到加入了交流社群，其中設定了一些指令可以讓社群機器人可以提供 CCTV 的畫面，但其中因為需要去社群當中打指令對於一個剛加入的人有點害羞，有這些攝影機畫面真的可以幫助看是否要出門(大部分場地都室外)，但身為工程師會想要按個按鍵就出現，因此就有以下文章囉！

前言

大家好，我是 LINE Taiwan 的技術傳教士 Nijia (a.k.a 忍者)，這次很榮幸可以來 COSCUP 2023 分享業餘時間作 Side project 的一些心得，這次透過文章跟大家分享經驗談！

簡報：https://speakerdeck.com/line_developers_tw/how-to-develop-side-project-to-public-cloud

TL;DR

• 透過 LINE Webhook 接收使用者的文字訊息。
• 利用 OpenAI API 處理接收到的文字，並轉換為 Google Calendar 的邀請網址。
• 將轉換後的網址回傳給使用者點選。

GitHub 專案 - 行事曆 LINE Bot

前言

隨著 ChatGPT 火熱了好一陣子，在 Google I/O 之後 ChatGPT 也開放了許多 plugin (被嚇到?)，因此在這電波很弱的時刻我就買了 ChatGPT plus ...🧐

與此同時公司也開了許多跟「生成式 AI(GAI)」的課程，學到了一些 prompt 的技巧之外，也從課程中開始想生活周遭的範例，也因此有今天行事曆 LINE Bot 的文章 🎉 (我好歹也是傳教士一員)

前言

從以前使用雲端硬碟，如 Dropbox, Google Drive, Box...我們都很習慣可以手動拉照片、影片上去放，而在開始寫程式之後理所當然就會想用 API 丟，但這些雲端硬碟一般來說除非用模擬器，不然理論上應該是不好用程式跑，而在公有雲出來後，就有像是 AWS S3, Google Cloud Storage 等等的服務陸續出來，讓大家可以使用他們的服務建立自己的硬碟空間，也不用自己架伺服器弄硬碟空間，權限管控都幫你弄好好，也可以用 API 訪問，實在是很方便呢！

隨著程式越寫越多，除了在 LINE Bot 上需要圖片網址才可以發送圖片外，像是 video.js 以及許多很多服務、工具越來越依靠　 https 相關的網址來找圖片，接下來就讓筆者就帶大家認識一下近期使用的一些範例以及我發現的另一種上傳方法。

前言

隨著大影片時代開始，人們開始拍攝各種題材的題目，身為創作者的你最痛的點是什麼？影片？題材？對我來說就是字幕問題！人人看影片都需要字幕的部分，那該怎麼減輕上字幕的工作呢？這次就利用 GCP 上的服務(STT, GCS)，分享當中使用的一些眉眉角角，至少先讓你可以擁有一個入門級的字幕，降低大家初期在做影片所花的時間，把精力放多一點到創作上，最後在搭配 video.js 來展示。

• GCCP Creator 專案
• 分享的議程
• 大會共筆

前言

原因是這樣的，我在去年 12/13 參加了 GDG 週年 Hackathon Party，當時主辦社群很有心的提供 GCP Credit 半年份，雖然當時我是 AWS 派系但我還是很開心的使用它，但我就在這幾天收到了一筆兩千塊的帳單，造就了這篇文章分享...😭

大家好，我是 Chatbot Taiwan 的 NiJia，最近我們 Github 開張囉，想找之前演講的紀錄都會在此哦！

• Github
• Facebook
• KKTIX

前言

事情是這樣的，本週末 12/13-12/15 我要去 GDG Taichung Hackthon Party 上當導師，礙於我實在想不出有個題目可以分享給其他同好，碰巧之前跟過 Wolke 大大的 Dialogflow + LINE bot 工作坊，憶起當時的明媚風景，接著前陣子寫鐵人賽也有跟到 C.T Lin 大大寫的使用 Modern Web 技術來打造 Chat App，如此一來我就乾脆把這兩個東西合在一起弄個東西！

又這麼剛好的我最近瘋狂看 ABL 球賽(支持本土球隊！)，剛好週末也沒事，就順手把它做出來啦~有在看球賽的朋友別錯過這隻機器人囉！他可以告訴你下一場比賽是哪時候～

以下記錄著我踩雷的過程 🤣，詳細 bottender 使用手冊還是參考 -> 使用 Modern Web 技術來打造 Chat App

本篇文章的程式碼已經開源囉 Taiwan-ABL-Games

建立專案

npx create-bottender-app taiwan-abl-games

接著會看到以下的畫面，bottender 很貼心的列出一些大家平常比較會使用的平台，這邊我們先選擇 LINE，後續會再告訴大家如何增加其他平台選項。

Dialogflow 注意事項與串接

這邊一定是要參考主要開發者所寫的文章啊 -> Day25 大致上創建服務的過程差不多，這個部分就簡單帶過比較重要的部分。

在處理意圖部分有個小撇步，若鼠標從左邊到右邊，到第二個時會把第一個意圖覆蓋掉，這邊我都是從右邊到左邊一個一個選，才不會遇到覆蓋的問題。

接下來再處理 Dialogflow API 的問題，Day 25 文章中所提到的地方 Google UI 似乎有換位置，我找到的位置在此 -> URL

從頁面的藍色按鈕(建立服務金鑰)後會遇到下圖畫面，第一個紅色框框需要注意是不是剛剛建立的 Dialogflow 的 agent。 而第二個下拉式選單選擇 Dialogflow Integrations，下面則選擇 JSON 格式。

在一開始建立完之後若是要回來管理的話，直接到 GCP 的主控台左側的API & Services的Cedemtials來管理金鑰。

把下載的檔案放在主目錄下，接著要在.env下新增以下兩個 key，GOOGLE_APPLICATION_CREDENTIALS則需要打上絕對路徑，後面再部署會再解釋這段。

GOOGLE_APPLICATION_CREDENTIALS=/Users/.../taiwan-abl-games/YOUR_KEY.json
GOOGLE_APPLICATION_PROJECT_ID=taiwan-abl-games-mpmomf

PROJECT_ID要去 GCP 主控台查詢。

實作

這邊就先複製原作者的 code 並稍做修改至 /src/index.js：

const dialogflow = require('dialogflow'); // 記得安裝
const { format } = require('date-fns'); // 記得安裝

const PROJECT_ID = process.env.GOOGLE_APPLICATION_PROJECT_ID;
const sessionClient = new dialogflow.SessionsClient();

module.exports = async function App(context) {
  if (context.event.isText) {
    const sessionPath = sessionClient.sessionPath(
      PROJECT_ID,
      context.session.id
    );

    const request = {
      session: sessionPath,
      queryInput: {
        text: {
          text: context.event.text,
          languageCode: 'zh-tw',
        },
      },
      queryParams: {
        timeZone: 'Asia/Taipei',
      },
    };

    // 透過 dialogflow 偵測意圖
    const responses = await sessionClient.detectIntent(request);
    const { intent, parameters } = responses[0].queryResult;

    if (intent.displayName === 'dreamer-next-game') {
      //...YOUR CONTEXT
    } else {
      await context.sendText('您輸入的內容我不懂哦~🏀');
    }
  }
};

藉由上述程式碼會發現藉由 Dialogflow 判斷出來的 intent 到底是要填入什麼？intent 顯示的字串就如下圖所示，我們在 Dialogflow 裡建立的 Intent 的名字就是最後 API 會回傳給我們的判斷字串，這邊就正規化一下自己所要提供的意圖吧！

bottender.config.js

最後這邊提一下如何設定給多平台使用，一開始藉由npx create-bottender-app xxx幫我們建立 app 時這個檔案就會自動生成，bottender 很好心的把所有明台所會用到的 key 全部都會放在這裡面。 以我為例我就有使用到 Messager 來試玩，這邊就需要把enabled啟動(false -> true)，實際建立粉絲頁相關可以參考

題外話: 最後再使用npx bottender messenger webhook set就會幫我們把 localhost 串接到 Message 上，實在是太讚了！！！

部署注意事項

我是使用 Heroku 當作我部署的環境，請服用這篇Heroku 部署

在本地端測試時會用到很多的環境變數，而 Dialogflow API json 的路徑我是透過環境變數去取得，在 Heroku 上會把專案的內容放在/app底下(不管你專案叫什麼名字)，因此環境變數GOOGLE_APPLICATION_CREDENTIALS需要輸入/app/xx-ooo.json這樣就會取到當前目錄下的檔案囉！

結論

經由這次試玩這個 project 讓我覺得 bottender 這個 chatbot 框架整合真的是厲害，幫開發者處理掉很多跨平台上的問題，我認為最酷的就是 console mode，在測試程式邏輯上可以不用每次都一直用手機開 LINE 或是 FB 來測試機器人狀態，而是在終端機就解決這件事，這是我開發機器人到目前為止覺得最酷的模式 👍！

而在這個專案上我使用到 Dialogflow，除了參考的原文畫面 (GCP 頁面) 已有些許更動外，其實介接的速度是非常快的，此外我很認同原文作者的觀點，把 Dialogflow 接在程式後面才去處理這件事會增加很多彈性，畢竟當一個回應來的時候可能會想做其他不同的應用，此時若是模型就在前面先把訊息回覆掉，會增加很多開發上的問題(當然若簡單的功能單人沒問題 🤣)。

總而言之～誠心推薦大家去玩玩 bottender，也許你會跟我一樣發現了新大陸 😎。

參考

Dialogflow GCP Bottneder 建立專案 Heroku 部署