# 20230703：Apple Pencil技術研究

- 原先程式測試：已將學期末最終版本載入Mac mini
- 目前方向：先將pencil Kit試結合原本架構,(PencilKit本身仍未包含筆刷項目的貼紙、筆式)
- 遇到問題：Floating Button結合會有重疊問題、Button kit插入位置需是Body而其他架構仍需調整

## 相關資料/連結



- [pencil_kit 1.0.4套件](https://pub.dev/packages/pencil_kit)
- [Github討論區](https://github.com/flutter/flutter/issues/38135)
- [performance issue in drawing app](https://stackoverflow.com/questions/50132188/performance-issue-in-drawing-using-flutter)
-->The performance issue in drawing app using flutter is resolved by using drawPath() and instead of using setState for each points to update use NotifyListener() to refresh than it will be more efficient than setState.
- [重新創作flutter筆刷](https://www.kodeco.com/25237210-building-a-drawing-app-in-flutter)
- [calender drawing use flutter OPensource](https://github.com/AlexanderThiele/stift_flutter_app)

# 20230704：繼續PencilKit+WebSocket

### 一、PencilKit

1. 測試PencilKit功能在iPadair上是否筆跡會跳轉⇒功能正常，筆跡可正常顯示
2. 將PencilKit結合FAB(Floating Action Button)，導入套件

`💡 記得在Pubget後要重啟VScode才能正常執行`

[Visual Studio Code - Target of URI doesn't exist 'package:flutter/material.dart'](https://stackoverflow.com/questions/44909653/visual-studio-code-target-of-uri-doesnt-exist-packageflutter-material-dart) =>記得導入套件後要重啟VSCode才能成功！！

- 套件：**flutter_speed_dial 7.0.0，用於動畫**

[flutter_speed_dial 7.0.0](https://pub.dev/packages/flutter_speed_dial)


- Bloc⇒「檔案」間的狀態管理，與「資料」的狀態管理不同
- [Flutter體驗 Day 26-bloc](https://ithelp.ithome.com.tw/articles/10275832)

結果展示



### 二、WebSocket

- [Work with WebSockets](https://docs.flutter.dev/cookbook/networking/web-sockets)
- [Flutter體驗 Day 23-WebSocket](https://ithelp.ithome.com.tw/articles/10274528)

更新資料取得雙向溝通


# 20230705：Live Streaming

新增另一專案“test_fluter”測試相關套件

### 壹、即時分享、Video、Camera相關套件

利用python寫server並以flutter連接執行live sharing

[Creating a live video streaming application in Flutter](https://medium.com/dscvitpune/creating-a-live-video-streaming-application-in-flutter-43e261e3a5cc)

- Cookbook官方文檔—-Vedeo暫停、播放

[Play and pause a video](https://docs.flutter.dev/cookbook/plugins/play-video#1-add-the-video_player-dependency)

- 使用套件：Video_Player

[video_player | Flutter Package](https://pub.dev/packages/video_player)

> 小節 ：Vedio可使用，但為現有影片的播放暫停
>

- Cookbook官方文檔—-Camera攝影、展示

[Take a picture using the camera](https://docs.flutter.dev/cookbook/plugins/picture-using-camera)

> 💡 注意：要在ios/Runner/Info.plist檔案中新增對應camera、microphone權限，否則會開啟失敗


> 小節：Camera 可使用(可直接加入在所需範圍中)

## 貳、Screen Sharing(螢幕共享)

### 一、中文keyword：ZEGO

- 另尋套件：**zego_express_engine 3.6.1**

需另外下載zego sdk

[zego_express_engine | Flutter Package](https://pub.dev/packages/zego_express_engine)

[Flutter 移動端螢幕採集（錄屏）方案分享_派大星星星星 - MdEditor](https://www.gushiciku.cn/pl/pwsJ/zh-tw)

ZEGO公司網站

[Flutter Dart实时音视频实现流程 - 开发者中心 - ZEGO即构科技](https://doc-zh.zego.im/article/7634)

問題：Package持續引入失敗

已做：



> 小節：需另外下載zego sdk與進行各個room與id設定，且需使用其公司的server，目前在import階段就不行使用，而中文搜尋結果多收斂在本產品

### 二、英文keyword：

### 1. AgoraIO

- Github討論區：AgoraIO-Extensions⇒ Screen sharing functionality

[Screen sharing functionality · Issue #109 · AgoraIO-Extensions/Agora-Flutter-SDK](https://github.com/AgoraIO-Extensions/Agora-Flutter-SDK/issues/109)

- Agoral IO官方Github

[Agora.io](https://github.com/AgoraIO)

> 小節：兩者都會額外需要AppID與Certificate，並需要在該對應公司創建開發者帳戶並連結API作為使用
>

### 2. LiveKit

- 官網文件

[LiveKit Docs](https://docs.livekit.io/)

### 三、插曲

剛剛在試其他Github專案zip檔時載到其他sdk導致Path指向錯誤的問題，刪除該sdk後出現flutter no found


> 💡 Tip：開啟setting檔案並把路徑改為原本的正確路徑即可


修改為原本正確


### 四、輔助工具

1. VSCode Compilot
需要連結github Compilot⇒要學校信箱+ 驗證

[如何在 VS Code 中使用 GitHub Copilot](https://www.freecodecamp.org/chinese/news/how-to-use-github-copilot-with-visual-studio-code/)

[能節省四成開發時間的工具？ GitHub Copilot 的介紹與心得分享](https://useme.medium.com/能節省四成開發時間的工具-github-copilot-的介紹與心得分享-2a07e8ce8f6d)

但卡在學生驗證問題(日期)

1. ChatGPT

[](https://chat.openai.com/)

### 四、電子白板

- Agora Blog

[Blog](https://www.agora.io/en/blog/)

- Agora文件

[Interactive Whiteboard Fastboard quickstart | Agora Docs](https://docs.agora.io/en/interactive-whiteboard/get-started/get-started-uikit?platform=android)

相關套件版本參考

- agora_rtm

[agora_rtm | Flutter Package](https://pub.dev/packages/agora_rtm/install)

- agora_rtc_engine

[agora_rtc_engine | Flutter Package](https://pub.dev/packages/agora_rtc_engine/install)

> 💡 注意：GPT可以問程式架構，但是版本相關依據還是要以最新更新的版本號為主，否則會顯示fail error，所以要隨時注意pub.dev上的版本號

- Agora互動白板文檔

[开启和配置互动白板服务 - 互动白板 - 文档中心 - 声网Agora](https://docportal.shengwang.cn/cn/whiteboard/enable_whiteboard?platform=iOS)

[Interactive Whiteboard Samples and demos | Agora Docs](https://docs.agora.io/en/interactive-whiteboard/reference/downloads?platform=android)

目前有開啟Agora帳戶與新增專案，獲得“APP IP”，且解決import fail問題，但程式仍not work



Agora提供服務項目


### 五、Screen套件

作為使用公司產品外的替代方案

[screen | Flutter Package](https://pub.dev/packages/screen/example)


> 小節：版本過舊失敗

# 20230706

# 壹、Running Error

出現error

`Error (Xcode): File not found:
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/lib/arc/libarclite_iphonesimulator.a`

`Error (Xcode): Linker command failed with exit code 1 (use -v to see invocation)`


[Xcode 14 and iOS 5.5 simulators](https://stackoverflow.com/questions/74286315/xcode-14-and-ios-5-5-simulators)

### 方向一：模擬器問題

在Xcode中按照以下順序新增一個模擬器


問題未解決：flutter -v印出


### 方向二：Xcode衝突問題

按照本篇方法刪除Pods紀錄，未奏效

[Error Launching Application - Flutter - iOS](https://stackoverflow.com/questions/64440757/error-launching-application-flutter-ios)


> 💡 小結：直接另外開啟專案執行便可，判斷是在先前測試或下載github專案時改到profile檔導致的Simulator開啟路徑問題，並且實機不便於同時開啟兩個不同的專案交互測試

## 方向三：實機上開發帳戶額度問題

> 💡 因為Apple限制免費開發者帳戶一次最多只能有三個APP的執行限度，因此超過時會跳出警告，需要手動刪除！

[The maximum number of apps for free development profiles has been reached. Xcode 11.5](https://stackoverflow.com/questions/61953293/the-maximum-number-of-apps-for-free-development-profiles-has-been-reached-xcode)


像是目前已經有三個已使用的App額度，因此刪除一個便可以順利執行


# 貳、Sharing相關

## 一、flutter平台整合提供的相關Channel


[Writing custom platform-specific code](https://docs.flutter.dev/platform-integration/platform-channels)

[A Flutter Channel to Share a File on iOS and Android](https://medium.com/jademind/a-flutter-channel-to-share-a-file-on-ios-and-android-94f03e8aca9d)

## 二、Apple Developer提供

- **ReplayKit**

[ReplayKit | Apple Developer Documentation](https://developer.apple.com/documentation/replaykit)

[iOS 和 iPadOS 的 ReplayKit 安全性](https://support.apple.com/zh-tw/guide/security/seca5fc039dd/web)

- enableX Flutter

[Flutter SDK – Video API](https://www.enablex.io/developer/video-api/client-api/flutter-toolkit/)

[How to Build a Video Streaming App With Screen Sharing Using Flutter](https://devsday.ru/blog/details/78198)

## 三、Agora Running

使用agora_rtc_engine 範例程式

[agora_rtc_engine | Flutter Package](https://pub.dev/packages/agora_rtc_engine/example)

將程式加上已啟用的Agora IO連接資訊，並且開啟相機與麥克風權限便可建立連線

[The app's Info.plist must contain an NSMicrophoneUsageDescription key with a string value explaining to the user how the app uses this data](https://stackoverflow.com/questions/39589998/the-apps-info-plist-must-contain-an-nsmicrophoneusagedescription-key-with-a-str)





並且會產生兩個debugger and profiler供使用

- Observatory debugger and profiler
- Flutter DevTool debugger and profiler


> 💡 小結：目前Agora連接API沒問題(Token, App ID)，且在開啟機體權限後可以正常生成而不會閃退，但尚未測試多於一台機器的連線情況

## 四、Flutter Dev

- iThome ****關於flutter的dev tool(一)****

[](https://ithelp.ithome.com.tw/articles/10307855)

[DevTools](https://docs.flutter.dev/tools/devtools/overview)

## 五、Apple方便快捷鍵

- 快速切至桌面
- fn + f11

# 20230707

# 壹、Collaborative Writing

## 一、Collaborative

[Create a Collaborative Rich Text Editing Experience with Flutter Web and Appwrite](https://www.reddit.com/r/FlutterDev/comments/u7zdui/create_a_collaborative_rich_text_editing/)

- Apple Collaboration

[Collaboration | Apple Developer Documentation](https://developer.apple.com/documentation/collaboration)

- Collaboration feature

[Adding the collaboration feature in my flutter app](https://www.reddit.com/r/flutterhelp/comments/nznm8z/adding_the_collaboration_feature_in_my_flutter_app/)

[netease_roomkit | Flutter Package](https://pub.dev/packages/netease_roomkit)

## 二、Agora Again

{%youtube hN4Q04ODOEw%}

- 啟用電子白板(帳戶端取得access token)

[Interactive Whiteboard Enable Interactive Whiteboard | Agora Docs](https://docs.agora.io/en/interactive-whiteboard/develop/enable-whiteboard?platform=android)

flutter SDK

[https://github.com/netless-io/Whiteboard-Flutter](https://github.com/netless-io/Whiteboard-Flutter)

## 三、Fluffyboard

[https://github.com/Y0ngg4n/fluffy_board](https://github.com/Y0ngg4n/fluffy_board)

## 貳、其他功能

## 一、Zoom Widget

縮放相關

[zoom_widget | Flutter Package](https://pub.dev/packages/zoom_widget)

# 參、開完會老師建議

## 一、延遲相關：SQL like file


## 肆、Error問題

> `Could not build the precompiled application for the device.
Error (Xcode): File not found:
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/lib/a
rc/libarclite_iphoneos.a`
>
- Git

決定先在實驗室Mac上安裝Git比較方便，用homebrew的方式下載

[](https://ithelp.ithome.com.tw/m/articles/10263551)

- 將terminal增加權限


- Xcode版本：14.3


在git clone完的專案terminal輸入指令`open ios/Runner.xcworkspace`

- 嘗試解法

[Cocoapods Warning - CocoaPods did not set the base configuration of your project because because your project already has a custom config set](https://stackoverflow.com/questions/26287103/cocoapods-warning-cocoapods-did-not-set-the-base-configuration-of-your-project)


把podlock刪掉後加上本段

post_install do |installer|

installer.generated_projects.each do |project|

project.targets.each do |target|

target.build_configurations.each do |config|

config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '13.0'

end

end

end

end


[How to fix Flutter stuck at “running pod install…” when running on vscode building on simulator](https://phongyewtong.medium.com/how-to-fix-flutter-stuck-at-running-pod-install-when-run-578ad867774)

出現其他error

`Lexical or Preprocessor Issue (Xcode): 'Flutter/Flutter.h' file not found
/Users/widelab/.pub-cache/hosted/pub.dev/webview_flutter_wkwebview-2.9.5/ios/Classes/FWF
NavigationDelegateHostApi.h:4:8`

`Lexical or Preprocessor Issue (Xcode): 'Flutter/Flutter.h' file not found
/Users/widelab/.pub-cache/hosted/pub.dev/webview_flutter_wkwebview-2.9.5/ios/Classes/FWF
WebsiteDataStoreHostApi.h:4:8`

[https://github.com/tekartik/sqflite/issues/952](https://github.com/tekartik/sqflite/issues/952)

### 我把Xcode玩壞了嗚嗚嗚🥶（有救回來


> 💡 原始的Project運行前記得照以下流程走一次，才不會有問題

1. `flutter pub cache clean`
2. `flutter clean`
3. `flutter pub get`
4. `flutter run`

[Build process failed, no corre app en windows](https://stackoverflow.com/questions/72436245/build-process-failed-no-corre-app-en-windows)

# 20230710

## 壹、週會議

- 將演講者視窗與觀眾功能分開
- 繼續研討螢幕分享與共編功能

## 貳、決定先升級上去

目前版本資訊


輸入指令 `flutter run —force` 強制升級

- flutter sdk version 3.10.5
- dart version 3.0.5


### 原本Project對應處理

要將套件升級到對應(找到terminal報錯的部分，到該pub頁面進行版本升級)

- Error

`Error: No named parameter with the name 'vsync'.`

將anmationBottoomBar內vsync註解，因為dart3無提供其服務，便可正確執行


pubspec.yaml檔內的sdk envirment更新如下


# 參、Share Screen

先往Agora以外的方向查詢

### 一、Youtube嵌入

- 相關套件

[youtube_player_iframe | Flutter Package](https://pub.dev/packages/youtube_player_iframe/example)

[webview_flutter | Flutter Package](https://pub.dev/packages/webview_flutter)

Error


近幾天的報錯一直與flutter.h取得套件相關(但並未使用其功能)

[flutter_inappwebview | Flutter Package](https://pub.dev/packages/flutter_inappwebview/example)

輸入指令 `flutter build ios -v`


## 二、Youtube_Player_flutter

- Git clone 此網站並且 flutter run

[GitHub:sarbagyastha/youtube_player_flutter](https://github.com/sarbagyastha/youtube_player_flutter/tree/master/packages/youtube_player_flutter/example)

[YouTube Player In Flutter](https://medium.flutterdevs.com/youtube-player-in-flutter-9a1493bcb9ec)

執行畫面

- 可load連結、執行Video stack內的影片(跳轉下一個)
- 可調整速度
- 切換螢幕大小
- 實況影片也可以



當我們把isLive參數設為true時會在影片右下角出現”Live”字樣



## 三、flutter_inappwebview，1.1k Star，其中的第三方登入可參考

Git clone本專案並且到example/ third_party_oath_user_sign_in 進行flutter run

[Github.com/pichillilorenzo/flutter_inappwebview_examples](https://github.com/pichillilorenzo/flutter_inappwebview_examples)


第三方登入可以參考


# 肆、Agora白板 again

>跑出來了！可能跟有upgrade有關係😎

git clone本網站，並且到example內執行flutter run

[GitHub - netless-io/Whiteboard-Flutter: A flutter library for Agora Whiteboard](https://github.com/netless-io/Whiteboard-Flutter/tree/main)

- 提供三種功能：Room、Replay、Window





## 五、相關error

- 真機Apple ID上限已達(7 Day 只能10個)


後續可能會需要切換帳號來執行

# 20230711

# 壹、Youtube miniplayer


[Is there a way to implement video mini player as in youtube?](https://stackoverflow.com/questions/74441708/is-there-a-way-to-implement-video-mini-player-as-in-youtube)

或是參考本github，git clone後對套件進行升級便可以使用

[Flutter Challenge: YouTube (Picture-In-Picture)](https://proandroiddev.com/flutter-challenge-youtube-ec5ff36eca9b)

[github.com/deven98/YouTubeFlutter](https://github.com/deven98/YouTubeFlutter)


並且將NavigationBottomBar的titile改為lable便可使用

[[Day8]Flutter Netflix UI 底部導航欄](https://ithelp.ithome.com.tw/m/articles/10242788)

# 貳、Flat Board Demo

- 可同步
- 上一步下一步
- 縮放
- 繪圖功能
- 新增頁面
- 外接嵌入：投影片、YT

測試連結：


前端：

[https://github.com/netless-io/flat](https://github.com/netless-io/flat)

後端：

[https://github.com/netless-io/flat-server](https://github.com/netless-io/flat-server)



## 二、Agora Flat

官方文件：

[Flat Online Classroom](https://flat.whiteboard.agora.io/en/)

Agora All sdk參考：

* Flutter

[SDKs Download | Agora Docs](https://docs.agora.io/en/sdks?platform=flutter)

- Web


[SDKs Download | Agora Docs](https://docs.agora.io/en/sdks?platform=flutter)

netless-flat open source應用相關問題：

[Is it possible to use "Agora Flat Open Source Virtual Classroom" within a Flutter application?](https://stackoverflow.com/questions/72623203/is-it-possible-to-use-agora-flat-open-source-virtual-classroom-within-a-flutte)



> 💡 Flutter上的執行應該會往webview的方向發展，也可以看到當作為產品時會需要繳費

* Live Demo：

可以用網頁測試：

[Fastboard Demo](https://demo.whiteboard.agora.io/?region=cn-hz&tempName=123)

其他參考文件：

[Agora Flat：开源、可定制的在线互动教室 - 掘金](https://juejin.cn/post/6959124192688078885)

- 開源專案參考：

[Agora Flat：在线教室的开源初体验 - 专栏 - 声网 RTE 开发者社区](https://www.rtcdeveloper.cn/cn/community/blog/23614)

- 程式相互架構：

[Interactive Whiteboard Fastboard quickstart | Agora Docs](https://docs.agora.io/en/interactive-whiteboard/get-started/get-started-uikit?platform=ios#get-the-)

- 原本interactive Whiteboard SDK App Server/Client & Agora Server 交互流程


- FastBoard SDK


- Flat 開源架構圖：


需要參考架構圖延伸學習

- WebRTC架構

[WebRTC 总体架构概述 - 专栏 - 声网 RTE 开发者社区](https://www.rtcdeveloper.cn/cn/community/blog/25471)

# 參、Webview

- Bard

[‎Try Bard, an AI experiment by Google](https://bard.google.com/?hl=en)

Git clone 本專案，並到 /packages/packages/webview_flutter/webview_flutter/example 執行flutter run

[](https://github.com/flutter/packages/tree/main/packages/webview_flutter/webview_flutter)

替換掉Podfie，並且將藍框url替換為測試demo網站


執行結果顯示：


互動過程：

- 可以看到YT或嵌入式需要再行調整，尚不能完整顯示
- 筆畫可以即時呈現
- PPT共筆/下載可正常執行


WebView的URL會隨著互動變動


# 20230712

# 壹、群組同步問題

- 因為群組超過Notion 1000 Block之限制，所以在相互連結上做其他設定


原先遇使用export到hackmd的做法，但因為export notion note會有圖片顯示問題，故最後採用移至在個人頁面並用page連結的方式達成空間問題解法(Notion對個人頁面無Block數限制)

# 貳、flutter_inappwebview

往在app內的webview方向研究

[InAppWebView: The Real Power of WebViews in Flutter | InAppWebView](https://inappwebview.dev/blog/inappwebview-the-real-power-of-webviews-in-flutter#manage-platform-urls-such-as-whatsapp-fb-tel-mailto-etc)

## 一、相關範例(官網Show Case)

[Showcase | InAppWebView](https://inappwebview.dev/showcase/)


## 二、相關Example(功能)

[Project Examples | InAppWebView](https://inappwebview.dev/docs/project-examples)

- 檔案下載


- WebRTC(即時相關)


- 第三方登入


在webview上的登入問題

[Flutter: login through a webview](https://stackoverflow.com/questions/51541258/flutter-login-through-a-webview)

其他login：

- FB, Google

https://github.com/plateaukao/flutter_webview_login_demo

[[Flutter] WebView](https://dev-yakuza.posstree.com/en/flutter/webview_flutter/)

## Flutter Web

官網Multi-Platform

[Multi-Platform](https://flutter.dev/multi-platform)

# 參、WebSocket

## 一、WebSocket 原理

[国庆假期，整整七天，我使用Flutter终于做出了即时通信！！!😤-阿里云开发者社区](https://developer.aliyun.com/article/1049909)



> 💡 WebSocket比起HTTP最大的不同在於Client與Server端皆可以發出請求(全雙工)，可以符合雙向供通的需求

- Flutter體驗 Day 23-WebSocket

[Flutter體驗 Day 23-WebSocket - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天](https://ithelp.ithome.com.tw/articles/10274528)

## 二、web_socket_channel

- Package

[web_socket_channel | Dart Package](https://pub.dev/packages/web_socket_channel)

[Flutter體驗 Day 23-WebSocket - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天](https://ithelp.ithome.com.tw/articles/10274528)

# 肆、其他資源＆注意：

- 自製API使用相關問題

[有關自製簡易API給APP使用 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天](https://ithelp.ithome.com.tw/questions/10204354)

> 💡 注意：電腦若頁面太多＆Simulator專案開多時記得刪除一些正在執行的，避免出現當機(今天出現黑屏無法呼喚的情況，需要按下螢幕中間的按鈕重啟)

- flutter串接Agora製作視訊ithome

[](https://ithelp.ithome.com.tw/articles/10306886)

flutter 串接API

- Open-Source-Flutter-Apps

[Top Flutter Project Ideas from Beginner to Expert](https://pangea.ai/blog/tech-stack/top-flutter-project-ideas-from-beginner-to-expert)


[github.com/tortuvshin/open-source-flutter-apps](https://github.com/tortuvshin/open-source-flutter-apps)

# 伍、FastBoard Docs

## 一、Fastboard SDK

- 如藍框範圍：Only Android & Web & IOS


[Interactive Whiteboard Fastboard quickstart | Agora Docs](https://docs.agora.io/en/interactive-whiteboard/get-started/get-started-uikit?platform=web)

## 二、Interactive White Board V.S Fast Board

- 流程：Interactive White Board v.s. Fast Board

| Interactive White Board | Fast Board |
| -------- | -------- |
| |  |

> 💡 兩者都僅只有Web SDK，所以應用Web實現在Flutter App上

# 20230713

# 壹、FastBoard_Flutter

嘗試使用本Package改編：

[fastboard_flutter | Flutter Package](https://pub.dev/packages/fastboard_flutter)

API reference：

[fastboard_flutter - Dart API docs](https://pub.dev/documentation/fastboard_flutter/latest/)

## 一、Example Running


## 二、連結自己的帳戶—-創立房間

首先看到程式碼內有constants.dart，存放四種資料資訊


## 三、官網端

而我們在Agora帳戶頁面可以取得App ID與SDK Token(此為“帳戶”的sdkToken，而非”房間”的)


而我們需要透過AppID與SDK Token創建房間並且得到RoomID 與RoomToken作為使用

> 💡 所以我們需要透過javascript腳本取得Room資訊，且腳本需要放在App Server上

> 💡 而sdkToken需要另存紀錄！作為使用各類功能的密鑰，最好先記錄起來

## 四、Js腳本端—-A、取得uuid

- 稀土掘金：使用 Fastboard 快速接入白板互动系统

[稀土掘金:使用 Fastboard 快速接入白板互动系统](https://juejin.cn/post/7081549429102084103)


- 官網：


透過線上編譯器執行後可取得`uuid`




> 💡 到時候需要研究如何在Server上調用API的方式，並將window.fetch置換

## 五、Js腳本端—-B、取得RoomToken

- 由於稀土掘金網站內程式碼置入錯誤，以網站內附圖為準後更新程式碼如下



執行後Console端輸出的一串字碼就是`Room Token`


> 💡 注意：基於安全性考量，SDK Token的操做也需要放於後端

## 六、Flutter端相異設備的測試

補足Example/lib/constant.dart檔的`Room UUID`與`Room Token`為剛剛生成的資訊


> 💡 UNIQUE_CLIENT_ID可設為隨意數字(到時候再連結App端的葉子辨識ID)

我們用兩個git clone的example專案（當作兩部設備的測試），將Example/lib/constant.dart檔資訊統一，成功達成SDK版本的即時資訊（同時可以發現比起WebView，terminal是會隨data互動而變動的）





> 注意：目前還沒有「關閉Room」的功能
>

# 20230714

# 壹、Fast Board

## 一、問題

- 問題：白板有連線，但帳戶並未出現時間計算？
- 猜測：可能是白板連線並不屬於付費功能，又或者連線內尚未使用到付費功能區塊
- 已確認：當room ID改為錯誤號碼後會無法進入白板畫面，改回後又可出現，所以房間確認有創建成功！

> 注意：當Room ID錯誤或不存在時會無法進入Quick Start的白板畫面(報錯如右圖)
>



## 二、相關資料

[Flutter Package — 用Agora製作視訊功能（一）](https://ithelp.ithome.com.tw/articles/10306886)

[Flutter Package — 用Agora製作視訊功能（二）](https://ithelp.ithome.com.tw/articles/10306889)

# 貳、WebRTC架構

[Flutter-WebRTC: A Complete Guide](https://www.videosdk.live/blog/flutter-webrtc)


[WebRTC 总体架构概述 - 专栏 - 声网 RTE 开发者社区](https://www.rtcdeveloper.cn/cn/community/blog/25471)

- 低延遲、開源軟體的即時通訊協定


- 架構層面執行，P2P架構


- SDP協議


- TURN, STUN, NAT相關技術 (IP相關端口傳輸問題)


# 參、Flutter 串接

## 一、相關資料

[Flutter Package - 串接api（一）](https://ithelp.ithome.com.tw/articles/10294858)

[Flutter Package - 串接api（二）](https://ithelp.ithome.com.tw/articles/10295609)

## 二、相關套件—-Retrofit

應該是偏向API生成的部分！

- 套件：retrofit: ^4.0.1 (Pub Dev 1.2K Star)

[retrofit | Dart Package](https://pub.dev/packages/retrofit)

## 三、HTTP v.s. Dio

[Flutter : Dio vs HTTP](https://medium.com/@vikranthsalian/flutter-dio-vs-http-1dc1d4f95fda)

## 四、Bloc v.s. Cubit

[Flutter學習筆記Week3-State Management(BLOC)](https://medium.com/@kbl26amy/flutter學習筆記week3-state-management-bloc-61c54d8fc62c)

# 肆、Dio

[Networking in Flutter using Dio - LogRocket Blog](https://blog.logrocket.com/networking-flutter-using-dio/)

創立新專案後用Test測資跑，可取得API資料，但在獲取指定Attribute時會出現以下問題：



- 由Future方便檢查錯誤問題


- Terminal顯示畫面(黃框：取得JSON、藍框：JSON decode解碼失敗)


# 伍、其他相關

## 一、Server VNC登入

[如何使用 macOS 內建的 VNC client](https://myapollo.com.tw/blog/macos-vnc-client/)

## 二、測試用公開API

- Public API for Test

[GitHub - public-apis/public-apis: A collective list of free APIs](https://github.com/public-apis/public-apis#animals)

# Week 3

# 20230717

# 壹、串接continue

[Error: List < dynamic > is not a subtype of type Map<String, dynamic>](https://stackoverflow.com/questions/51854891/error-listdynamic-is-not-a-subtype-of-type-mapstring-dynamic)


有很高原因是因為獲取方式應改為index寫法

## 一、Dio—網頁圖片連結

以Dio的撰寫方式執行utf8的編解碼連結


> 💡 注意：在dart3中要注意很多的null safety問題

* 有時候要在參數前面加late


* 有時候要配合 ’?’ 的寫法


## 二、Json格式解析

Map的問題與Json格式應該有很大的關聯（會需要透過不同的方式來進行Json的轉換設定）

- Ex: Factory方法

[Parsing complex JSON in Flutter](https://medium.com/flutter-community/parsing-complex-json-in-flutter-747c46655f51)

⇒本篇詳細說明從簡易Json到較複雜Json的處理方式

- GitHub範例

https://github.com/PoojaB26/ParsingJSON-Flutter

- ChatGPT範例（Ｇet）


注意：都需要在dio.get或dio.post的中間加上驚嘆號作為糾錯


# 貳、轉換工具：QuickType —-Dart

[Working with APIs in Flutter](https://medium.com/flutter-community/working-with-apis-in-flutter-8745968103e9)

由文章可以發現此轉換工具的用途


[文章使用工具後的Post範例: Github: PoojaB26/post_model.dart](https://gist.github.com/PoojaB26/7514317181f81a00a36fbef596d506e6)

- QuickType網址

[JSON to Dart<!-- --> • quicktype](https://quicktype.io/dart)

### 可以把API reference的資料轉為Dart對應的Class（or Model），取用後示例如下


- 至於Map格式問題大概率與下圖所提事項有關


# 參、串接測試

## 一、用Server Gardener Get資料


## 二、Dio Post 測試(gardener/login)

用ChatGPT修改後的結果出現本結果：

- 純登入的login success


- 輸入跳轉後（呈現Access_Token, IP）的頁面問題


# 20230718

# 壹、串接大本營

## 一、接手趴呢的Code，基本架構如下：


1. POST: Post_Test.dart + Postserverce_test.dart + login_post


2. GET: Get_test.dart + GetService_test.dart + homepage.dart


- Main檔案可放置預測試頁面


## 二、Get: 顯示資料庫資料


## 三、Post: 顯示資料（登入前 / 後）

| 登入前 | 登入後 |
| -------- | -------- |
|  |  |

# 貳、測試Code之旅—-/Articles (登入驗證)

## 一、遇到問題

- 首先測試Get ⇒ articles會有明明是Get屬性，但需要先給予Access Token才能拿到資訊的問題（類似Post，但主要分屬是Get）
- 可能會用Login頁面跳轉、或是寫在Login的程式塊裡作為替代方案

# 參、測試Code之旅—-/gardeners/signup-test（登入測試）

## 一、遇到問題

- 屬於Post，但因為有牽扯「檔案」(Avatar，頭像照片)
- 格式上需要網”Form data”的方向搜尋 ＋ 修改


## 二、相關資料

[How make a http post using form data in flutter?](https://stackoverflow.com/questions/57846215/how-make-a-http-post-using-form-data-in-flutter)

# 肆、測試Code之旅(續)

## 一、/gardeners/logout

> 💡 Terminal輸入大寫R可以Hot Restart，就不用quit再重開了！

- Post

輸入：account


## 二、/gardeners/edit

- Post
- 目前是直接輸入資料就會update到資料庫
- server response部分會需要再新增


# 20230719

- AI生成向量Icon

[Infinite AI-Artboard](https://www.recraft.ai/)

# 壹、繼續測試

## 一、/chats/send-message

- Post
- 目前是直接輸入資料就會update到資料庫



<aside>
💡 小節：目前可以測試的Raw data API都結束，接下來繼續往AgoraSDK研究

</aside>

# 貳、Flutter MeetUp04 問題&對應回答

1. Agora SDK擴展性
若使用Agora SDK那就不方便再直接加功能在real time上，會需要再往其他(Ex檔案加工)等方向思考
2. WebView問題
雖然可以達成執行網頁功能，但是網頁的執行在機器上可能會有跑版&功能位置點偏移嚴重的情形
3. Agora Server & App Server連接情形
會由兩端Server進行Restful API Post的傳遞，並獲得Agora上的Room資訊

# 20230720

# 零、目前檔案彙整

- flutter2是紀錄post資料測試
- flutter3是測試bloc的
- Agora_test/fastboard_flutter/example用來測試Agora FastBoard功能

# 壹、Agora SDK串接API測試

- input: account
- output: APP_ID, Room_UUID, Room_Token
- App_ID, sdkToken要放server檔案用絕對路徑

首先確認Not3連結API的方式輸出結果可正常執行（成功進入新檔案）


API 需求相關

- 官網啟動資訊：

[Interactive Whiteboard Enable Interactive Whiteboard | Agora Docs](https://docs.agora.io/en/interactive-whiteboard/develop/enable-whiteboard?platform=web)

- fastboard_flutter example

https://github.com/netless-io/fastboard_flutter

- fastboard API (fastroomoption)

[Interactive Whiteboard Fastboard API | Agora Docs Beta](https://docs-beta.agora.io/en/interactive-whiteboard/reference/uikit-sdk?platform=android)


# 貳、加入Post 測試頁面

- 在Quick Start內加入Post測試頁面判斷
- Constant變數待串接更新


# 20230721

# 壹、Agora串接Not3 Server測試

- 螢幕共享開不了
- Server問題


# 貳、影片製作

- 比賽影片連結參考

[資訊應用服務創新競賽](https://innoserve.tca.org.tw/award.aspx)

## 工具參考：

- Powtoon

[Powtoon | Create Awesome Videos Yourself](https://www.powtoon.com/)

- Canva影片

[Free Design Tool: Presentations, Video, Social Media | Canva](https://www.canva.com/)

- 影片腳本思考？功能呈現範圍？

# 20230724

# 壹、Agora API測試

目前API資料，Post

給予⇒ region


回傳⇒ roomToken, AppID, RoomUUID


# 貳、Agora API使用


- 目標：希望修改至可以自動拉API到constant.dart來進入筆記

# 20230725

# 壹、SignUp Page

- 測試趴呢的SignUp Page，並加入IOS info.plist裡的相機、相簿權限


# 貳、更新比賽時程

# 參、繼續昨天進度

## 一、Debug

- GPT繼續

[ChatGPT](https://chat.openai.com/share/c9c9c191-5ce0-4cd8-adda-6d3aeb15d6b1)

- 目前原始用固定constant登入版本



* 目前問題：


對Material 進行修改後成功變為所需頁面

## 二、目前頁面(成功且更新資料庫)

Input: Region



資料庫更新顯示(用美國時間計算)：

- RoomUUID相異(不同房間)

### custom_layout v.s. quick_start.dart

- custom_layout多了_gray.png(濾鏡測試)


- Custom_layout.dart：


- 所以仍可以用自定義插件的模式，參考Docs：Fastboard API

[Interactive Whiteboard Fastboard API | Agora Docs](https://docs.agora.io/en/interactive-whiteboard/reference/uikit-sdk?platform=web)


- **Agora Interactive Whiteboard Web SDK API Reference**

[Agora Interactive Whiteboard Web SDK API Reference](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/index.html)

<aside>
💡 前兩網頁差別：純白板功能SDK與UIKit(視訊通話功能)

</aside>

目前交互式白板定價：

[Interactive Whiteboard Pricing](https://www.agora.io/en/pricing/interactive-whiteboard/)

# 20230726

# 壹、將Agora白板加入Project

- 成功

# 貳、GitHub SSH登入

- 連結放入：

[GitHub - ceeyu/Not3XianGit: GitClone專區](https://github.com/ceeyu/Not3XianGit/tree/main)

目前GitHub需要採取SSH的方式


[](https://ithelp.ithome.com.tw/articles/10283690?sc=rss.qu)

產生SSH的方式，先去GitHub產生

[【Git教學】手把手 Github SSH 連線設定教學 (Windows/Mac) - Max行銷誌](https://www.maxlist.xyz/2022/12/22/github-ssh-setting/)

在用原本的方式上傳下載

[[Git教學] 寫給 Git 初學者的入門 4 步驟 - Max行銷誌](https://www.maxlist.xyz/2018/11/02/git_tutorial/#4_git_push_至_GitHub)

相關StackOverflow問題

[GitHub "fatal: remote origin already exists"](https://stackoverflow.com/questions/10904339/github-fatal-remote-origin-already-exists)

- 查看隱藏檔案快捷鍵


# 目前Access Token問題

1. Account + Access Token問題
2. Device ID問題
3. 回傳問題

# 文件撰寫

2023數創大賞比賽文件個人部分

# 20230727

- 文件撰寫與Figma圖片繪製

# 20230728

# 壹、Git 續集

## 一、透過VS Code操作Git

[Day 06：Git 學習筆記](https://ithelp.ithome.com.tw/articles/10294118)

## 二、透過GithubDesktop操作

[專案學習的30天](https://ithelp.ithome.com.tw/users/20107754/ironman/1502)

[Day7-GitHub Desktop上傳/回朔檔案](https://ithelp.ithome.com.tw/articles/10193391)

在新增完Local changes後Publish到branch上


等待進度條跑完


成功放置!!那之後每加入一個功能後的每個結合功能就可以以專案的模式GitHub Desktop 放置桌面”XianGitClone”資夾中


- 討論影片腳本

# 20230731

[6款簡單的動畫製作軟體推薦，幫你輕鬆做出吸睛的動畫影片](https://influspower.com/best-animation-video-maker/)

# 壹、Powtoon

- 還不知道超過4天的編輯區會長什麼樣子


# 貳、開會

- 進度更新
- 影片討論

# 參、植物生長動畫查詢


### Tree Demo 編輯檔

- 需要的時候再以線上編輯器修改圖案！

[Tree Demo](https://rive.app/community/798-1554-tree-demo/)

- 桌面版本與其他範例


[Flutter Showcase | Rive](https://flutter.dev/showcase/rive)

- Rive Github example，多種範例

https://github.com/rive-app/rive-flutter



在Browse the community，尋找需要的.riv檔

[Rive - Community](https://rive.app/community/)

Rive教程：

[Learn Rive](https://rive.app/learn-rive)

# 肆、加入Flutter_Project

- 從My_Page1 → StartFruitsPage → TreeTest 按鈕跳置，目前叫做”TreeTest.dart”的TreeTest頁面

在lib下會多一個資料夾：utils，放置顏色與原本的計時器編輯


* 目前樹的四種樣態(動態)


- Rive檔案限制：免費版只能有3個檔案



# 20230801

- 比賽文件參考：資創＋5G

# 壹、資創相關



- 報名文件：學生證正反面應本、團體JPG檔、不公開（知道連結可閱覽）YT連結


- 流程：


* 系統概述文件


# 貳、中華電信5G





# 參、硬體權限問題(Grewer裡的)

- 新增套件




- API Refernce


音量部分：


目前：由CreateFreeLeaf.dart → “FreeLeafExample()” → agora_service.dart → QuickStartBody()


### 可用！成功進入+bar+icon

# 20230803

查看Powtoon 退款資訊


# 貳、研究Agora SDK API Reference

- 從pubDev: fastboard_flutter上的API相關資料找的 fastboard_flutter library

→ 函式搜不到，不確定

[fastboard_flutter library - Dart API](https://pub.dev/documentation/fastboard_flutter/latest/fastboard_flutter/fastboard_flutter-library.html)

跟Room相關的

[Room | Agora Interactive Whiteboard Web SDK API Reference](https://api-ref.agora.io/en/interactive-whiteboard-sdk/web/2.x/interfaces/room.html#delete)

- 離開房間


從目前有應用的函式中尋找運用方法，由VSCode中可以看到說明文字來自於fastboard_flutter套件


- 直接從Package 上的GitHub程式看提供什麼函式功能package: fastboard_flutter/src/controller

[](https://github.com/netless-io/fastboard_flutter/tree/main/lib/src)





# 20230804

影片字幕修改

fastboard controller是作為sdk跟fastboard_flutter溝通的橋樑

在quikstart中用fastboardView來呼叫


並且fastboard_flutter也會匯出whiteboard_sdk_flutter套件內的whiteboard_sdk_flutter.dart


[GitHub - netless-io/Whiteboard-Flutter: A flutter library for Agora Whiteboard](https://github.com/netless-io/Whiteboard-Flutter/tree/main)


fastboard_flutter: .yaml檔


## Fastboard_Flutter→lib/src/widgets/default_builder.dart


## Fastboard_Flutter→lib/src/controller



controller的whiteRoom顯示：參考whiteboard sdk的whiteboard.dart


- 研究：whiteboard.dart

# 20230807

影片剪輯+音軌調製

[FlexClip | 線上影片編輯 - 免費製作影片](https://www.flexclip.com/tw/)


- 可自動生成字幕


# 20230808

- 影片編輯

# 壹、Agora房間修改

修改後reader會出現以下問題(因為reader不可創建房間！)


在fastboard_flutter內的widget處理提供的工具們，type/application是提供的工具


先把fastboard_flutter內的檔案全部加上中文註解

- controller是與whiteboard SDK聯繫的橋樑，而widget是針對controller給的函式提供更全面的設定+配置


# 貳、對fastboard套件進行修改

## 一、把yaml指向Github路徑，方便更改SDK功能

[How to modify plugins Dart code Flutter?](https://stackoverflow.com/questions/47296617/how-to-modify-plugins-dart-code-flutter)

[How to Modify an existing pub package to use in your flutter project](https://medium.com/flutter-community/how-to-modify-an-existing-pub-package-to-use-in-your-flutter-project-4e909452ee66)


換為自己的Github(跟Github Desktop連結)來編輯+測試 → 可執行

<aside>
💡 到時候再改為用pub dev的樣子！

</aside>

更改顏色測試，可行（只是要先從）.yaml移出再移入，flutter pub get沒有用


## 二、ChatGPT字數突破

### 用這個方法可以成功突破字數限制，問較長的問題/程式碼

[利用 ChatGPT 提示語突破字數限制教學，深入分析摘要2萬字資料](https://www.playpcesor.com/2023/03/chatgpt-2.html)



## 三、Whiteboard SDK概念架構

這段程式碼提供了一個用於互動式白板的客戶端庫，通過與Web端白板互動進行通信，實現了在應用程式中顯示白板、插入內容、同步狀態等功能。以下是這段程式碼的主要功能、架構詳述以及提供的函式與功能：

**功能總結：**
這個程式碼的主要功能是與一個名為 "白板" 的Web端應用進行互動，並在客戶端應用中實現以下功能：

- 顯示白板畫面。
- 插入、移動、刪除圖片和文字等內容。
- 同步畫面狀態和操作。
- 發送自定義事件。
- 設置畫面顯示模式、視野縮放比例等。

**程式碼架構詳述：**
程式碼分為四個部分，分別是 "@1"、"@2"、"@3" 和 "@4"。這些部分提供了一個名為 "JavaScriptNamespaceInterface" 的類別，該類別用於管理與Web端白板的互動。該類別包含了一系列的方法，每個方法對應一個具體的功能或操作。這些方法使用 "dsBridge" 這個橋接程式庫來實現客戶端和Web端之間的通信。每個方法的實現根據功能的不同，執行不同的操作，例如發送請求、處理回應、更新狀態等。

## 四、Whiteboard SDK函式提供(總覽)

**提供的函式與功能：**
以下是 "@1"、"@2"、"@3" 和 "@4" 中所提供的具體函式與功能的總結：

- **"@1" 中提供的函式與功能：**
- **`JavaScriptNamespaceInterface(String namespace)`**: 創建一個JavaScript命名空間的介面，用於在客戶端和Web端之間通信。
- **`setMethod(String name, Function method)`**: 設置特定名稱的方法，用於接收Web端的請求。
- **"@2" 中提供的函式與功能：**
- 一些回調函式，用於處理不同情況下的狀態變化或事件觸發，例如當房間狀態變化時、發生錯誤時等。
- **"@3" 中提供的函式與功能：**
- 一系列與房間、成員、場景等相關的方法，用於獲取房間狀態、成員狀態、插入圖片、切換場景等操作。
- **"@4" 中提供的函式與功能：**
- 更多的方法，用於插入圖片、文字，控制畫面同步，發送事件，設置畫面顯示模式等。

這些函式和功能共同實現了一個客戶端庫，使應用能夠與Web端白板進行互動，並在應用中實現互動式白板的各種操作和功能。它提供了許多用於操作和控制白板的方法，使開發者能夠根據需求進行自定義的互動體驗。

## 五、WhiteBoard SDK所提供的函式

**@1 中提供的函式與功能：**

- **`JavaScriptNamespaceInterface(String namespace)`**: 創建一個 JavaScript 命名空間的介面，用於在客戶端和 Web 端之間通信。
- **`setMethod(String name, Function method)`**: 設置特定名稱的方法，用於接收 Web 端的請求。

**@2 中提供的函式與功能：**

- **`_fireRoomStateChanged(String value)`**: 處理房間狀態變化的回調函式，更新本地房間狀態。
- **`_firePhaseChanged(String value)`**: 處理階段變化的回調函式，更新本地階段狀態。
- **`_fireCanUndoStepsUpdate(value)`**: 處理可撤銷步驟更新的回調函式，觸發可撤銷步驟狀態更新。
- **`_fireCanRedoStepsUpdate(value)`**: 處理可重做步驟更新的回調函式，觸發可重做步驟狀態更新。
- **`_fireDisconnectWithError(value)`**: 處理斷開連接並帶有錯誤信息的回調函式，觸發斷開連接事件。
- **`_fireKickedWithReason(value)`**: 處理被踢出房間的回調函式，觸發被踢出事件。
- **`_fireCatchErrorWhenAppendFrame(value)`**: 處理追加幀時的錯誤回調函式，觸發錯誤事件。
- **`_fireMagixEvent(value)`**: 處理魔法事件的回調函式，觸發魔法事件。
- **`_fireHighFrequencyEvent(value)`**: 處理高頻事件的回調函式，觸發高頻事件。

**@3 中提供的函式與功能：**

- **`createRoomInterface()`**: 創建房間介面，設置與房間相關的方法。
- **`_fireRoomStateChanged(String value)`**: 更新房間狀態並觸發房間狀態變化事件。
- **`_firePhaseChanged(String value)`**: 更新階段狀態並觸發階段變化事件。
- **`_fireCanUndoStepsUpdate(value)`**: 觸發可撤銷步驟狀態更新事件。
- **`_fireCanRedoStepsUpdate(value)`**: 觸發可重做步驟狀態更新事件。
- **`_fireDisconnectWithError(value)`**: 觸發斷開連接事件並帶有錯誤信息。
- **`_fireKickedWithReason(value)`**: 觸發被踢出事件並帶有原因。
- **`_fireCatchErrorWhenAppendFrame(value)`**: 觸發追加幀時的錯誤事件。
- **`_fireMagixEvent(value)`**: 觸發魔法事件。
- **`_fireHighFrequencyEvent(value)`**: 觸發高頻事件。
- **`isDisconnectedBySelf()`**: 檢查是否是自己斷開連接。
- **`setGlobalState(GlobalState modifyState)`**: 設置全局狀態。
- **`getGlobalState<T extends GlobalState>(GlobalStateParser<T> parser)`**: 獲取全局狀態。
- **`setMemberState(MemberState state)`**: 設置成員狀態。
- **`getMemberState()`**: 獲取成員狀態。
- **`getRoomMembers()`**: 獲取房間成員列表。
- **`setViewMode(ViewMode viewMode)`**: 設置視圖模式。
- **`getBroadcastState()`**: 獲取廣播狀態。
- **`getRoomStateNative()`**: 獲取本地緩存的房間狀態。
- **`getRoomState()`**: 獲取最新的房間狀態。
- **`getRoomPhaseNative()`**: 獲取本地階段狀態。
- **`getRoomPhase()`**: 獲取最新的階段狀態。
- **`disconnect()`**: 斷開連接。
- **`disableOperations(bool value)`**: 允許/禁止白板操作。
- **`disableCameraTransform(bool value)`**: 允許/禁止視圖移動縮放。
- **`disableDeviceInputs(bool value)`**: 允許/禁止使用白板工具。
- **`disableWindowOperation(bool value)`**: 允許/禁止窗口操作。
- **`disableEraseImage(bool value)`**: 允許/禁止擦除圖片。
- **`getWritable()`**: 獲取是否可寫狀態。
- **`setWritable(bool writable)`**: 設置是否可寫狀態。
- **`debugInfo()`**: 獲取調試信息。
- **`pptNextStep()`**: 下一步幻燈片。
- **`pptPreviousStep()`**: 上一步幻燈片。
- **`addPage([Scene? scene, bool after = false])`**: 添加場景。
- **`nextPage()`**: 下一頁場景。
- **`prevPage()`**: 上一頁場景。
- **`putScenes(String dir, List<Scene> scene, int index)`**: 放置場景。
- **`setScenePath(String path)`**: 設置場景路徑。
- **`setSceneIndex(int index)`**: 設置場景索引。
- **`moveScene(String sourcePath, String targetDirOrPath)`**: 移動場景。
- **`removeScenes(String dirOrPath)`**: 刪除場景或場景組。
- **`getScenes()`**: 獲取場景

## 六、(fastboard) controller.dart提供函式

1. **FastRoomController 構造函数：**
- **`FastRoomController(fastRoomOptions)`**：初始化 FastRoomController 實例，並接受 FastRoomOptions 作為參數。
2. **覆蓋物和事件流：**
- **`onOverlayChanged()`**：返回一個流（Stream），用於監聽覆蓋物（overlay）變化的事件。
- **`onError()`**：返回一個流，用於監聽快速房間產生錯誤的事件。
- **`onSizeChanged()`**：返回一個流，用於監聽快速房間視圖尺寸變化的事件。
3. **設定和操作白板房間：**
- **`changeOverlay(int key)`**：切換覆蓋物，通過添加 OverlayChangedEvent 到事件流。
- **`notifyFastError(WhiteException exception)`**：通知快速房間產生錯誤，將 FastErrorEvent 添加到事件流。
- **`notifySizeChanged(Size size)`**：通知視圖尺寸變化，將 SizeChangedEvent 添加到事件流。
- **`cleanScene()`**：清除當前場景的繪畫元素和圖像。
- **`addPage()`**：在當前場景的目錄中添加一個新頁面。
- **`prevPage()`**：切換到上一個頁面。
- **`nextPage()`**：切換到下一個頁面。
- **`removePages()`**：移除所有頁面。
- **`setAppliance(FastAppliance fastAppliance)`**：設定白板工具，例如畫筆、橡皮擦等。
- **`setStrokeWidth(num strokeWidth)`**：設定元素的繪畫筆觸寬度。
- **`setStrokeColor(Color color)`**：設定元素的繪畫筆觸顏色。
- **`setWritable(bool writable)`**：設定使用者在房間中的寫入權限。
- **`undo()`**：撤銷上一步操作。
- **`redo()`**：重做一步操作。
- **`zoomTo(num zoomScale)`**：將白板縮放至指定比例。
- **`zoomReset()`**：重置白板的縮放比例。
- **`joinRoomWithSdk(WhiteSdk whiteSdk)`**：使用指定的 WhiteSdk 加入白板房間。
- **`joinRoom()`**：加入白板房間。
- **`reconnect()`**：重新連接房間。
- **`insertImage(String url, num width, num height)`**：在白板上插入一個圖片。
- **`insertVideo(String url, String title)`**：在白板的子窗口插入一個視頻或音頻。
- **`insertDoc(InsertDocParams params)`**：在白板的子窗口插入一個文檔。
- **`setContainerSizeRatio(double ratio)`**：設定容器的大小比例。
- **`updateRoomLayoutSize(Size size)`**：更新 FastRoomView 的佈局尺寸。
- **`updateThemeData(bool useDarkTheme, FastThemeData themeData)`**：更新白板的主題。
4. **RoomState 和事件處理：**
- **`_onRoomStateChanged(RoomState newState)`**：處理房間狀態變化事件。
- **`_onRoomPhaseChanged(String phase)`**：在重新連接時，處理房間階段變化事件，清除 redo 和 undo 計數。
- **`_onRoomKicked(String reason)`**：處理房間被踢出事件。
- **`_onRoomError(String error)`**：處理房間錯誤事件。
- **`_onRoomDisconnected(String error)`**：處理房間斷開事件。
- **`_onCanRedoUpdated(int redoCount)`**：處理可重做計數更新事件。
- **`_onCanUndoUpdated(int undoCount)`**：處理可撤銷計數更新事件。
5. **釋放資源：**
- **`dispose()`**：在 FastRoomController 被銷毀時，關閉相關的事件流。

# 參、另外Web Doc

[GitHub - Nero-Hu/Whiteboard-Web-doc at 8632690570b284f80bc7841e020cd0c2186757b3](https://github.com/Nero-Hu/Whiteboard-Web-doc/tree/8632690570b284f80bc7841e020cd0c2186757b3)


# 20230809

# 壹、Disconnect

### 加函式在controller → 在default增加初始設定元素 → 在

在default UI介面中加入icon測試disconnect




terminal會出現以下訊息與顯示持續loading的畫面


加上段disconnect後返回上一頁功能：Termenal顯示狀態轉換與頁面成功回到上一頁


新增了文字模式


文件轉換相關流程：


禁用設備功能：


# 20230810

- 測試房間加人：
- 修改add 人的頁面

# 20230811

測試link實行

- create white leaf ＡＰＩ修理ing ，無法呼叫：


目前link取得資料測試可成功


但在確認資料(把三項參數帶入example constand.dart)的時候出現報錯




- 找不到錯誤問題點ＱＡＯ報錯顯示js，params無收到消息，在whiteboradBridge裡面無法看懂


- 報錯問題詳述：


# 20230814

# 壹、FastRoom()

- 只有在連線到已存在的連線時會出現timeout:45000，用創建葉子的則不會

### 結果發現：是參數值給予問題！因為所需要的是AppIdentifier 參數，而不是AppUUID，但database存的是後者…所以會有timeout，連線時間過久的警告，因為創建葉子拿的是正確的AppIdentifier，而加入葉子不是

## 貳、Link測試：

測試詞：Someone sent you a link : NOT3ROOM_5937908356

### Step1: “取得link”，解譯link，並輸出檢查


### Step2: “Show”，將解譯得到的值代入JoinRoom，成功進入目標房間

- 運用更新constand.dart的值 + Quick_start頁面可以達成加入房間功能
- 可以成功disconnect
- 退出後的create_room創建房間功能仍正常！


新房間，成功創立：


- 添加複製連結的按鈕(左上角)


### 完成Link加入了！可以達成解碼＋進入葉子




# 20230815

# 壹、複製連結+加入葉子

取得Link資料


constant.dart會出現覆蓋問題：只會有創建葉子的連結RoomID，而沒有加入葉子的！

按了相同的葉子連結卻進入不同房間



因為途中database參數名稱有改導致joinroom存取失敗，後續就成功，可以進入同個連結的房間+顯示的複製link是正確的！


# 貳、關閉房間(Disable)

測試API，原本兩台機器都在房間內，並且isBan欄位為false

呼叫後，房間顯示sdk error


並且同樣的連結點入後也無法進入房間


Disable要加判斷是否為創始人！

- 修改判斷＋errormsg，目前創始人可成功

# 20230816

# 實機測試

加入：ok

關閉葉子的API+防呆 : ok

# 壹、離開葉子(Disconnect)

取不到terminal資料，原因如下，此方法不可用於IOS上


FCM主要是用於背景與訊息推播

[【第十七天 - Flutter Cloud Messaging（上）】](https://ithelp.ithome.com.tw/articles/10261815)

# 貳、Gardener List

連結進入的情況


創始葉子的情況


Gitclone時出現問題：


文件佔空間太多，runner記得關閉


- 清單測試完成

# 20230817

# 壹、關閉葉子API

- 把disconnect加入widgets內使用(方便在flutter_project內使用而非 fastboard_flutter 的default頁面)


先將test_data裡面的”ppt”改為leave case來測試


成功加入，並且人員在Disconnect後有更新


- 加上最後一人判斷



目前需測試“當不是創始人”但是”最後一人“，的情況，要在Disable的API部分加判斷

# 貳、結合Create Leaf Button

Create Leaf Button + 直接進入葉子，不用Agora_Service

- Create Tree

# 進到Create Tree

- OpenFruitsPage.dart


加上樹與花朵的名字


# 20230818

# 創建植物的API

- 可成功回傳名稱與種類創建，目前已有的種類：牡丹花、玫瑰花
- 滑動種類待更改(目前前後端的種類尚未統一)


# 顯示樹/花

- API格式


目前連結成功(以alert box顯示)


更改為讀取後直接顯示在頁面


# 顯示特定tree API格式



要加限制條件，不然會crash掉…

- 增加了一個boolean值判斷


# 20230821

- 資創影片腳本
- 新增葉子名稱的死資料(到時候待改)
- 跟教授開會，說明四大目標與下載檔案進度

# 20230822

- 資創影片製作+音軌影片結合
- Mac設備交接設定

先在設備端Gitclone


# 20230823


解決大檔案路徑問題，下載原本的clone檔測試

- 使用管理員身分開啟cmd，輸入git config --system core.longpaths true
- 輸入git reset
- 輸入git checkout *

[GitHub: Clone succeeded, but checkout failed](https://stackoverflow.com/questions/22041752/github-clone-succeeded-but-checkout-failed)




網速測試


Flutter pub get過久


[Flutter pub get takes too long to execute](https://stackoverflow.com/questions/64588402/flutter-pub-get-takes-too-long-to-execute)

出現以下問題:




等待執行結束(中途不能關閉terminal，不然要重新clean一次再pub get)

最後再重新開一次flutter_project就可以開啟

# 20230824

- 資創影片製作+音軌融合

轉高畫質→ 效果不彰

[最佳5個影片解析度提高軟體推薦](https://tw.imyfone.com/pc-tips/video-resolution-enhancer/)

[YouTube 轉 MP4 教學，超好用 4 大招一鍵轉高清 MP4【必學】 - videohunter.tw](https://videohunter.tw/convert-youtube-to-mp4/)



# 0825

- 資創影片完成
- 5G比賽報名完成
- 將設備歸還資工系辦
- 與教授開會