# 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)