Slide 1

Slide 1 text

Flutterと Robotics(ロボティクス)の わくわく同居生活篇 1 @Dreamwalker Jai-Chang. Park FlutterKaigi 2022 - Day2

Slide 2

Slide 2 text

2 自己紹介 ● Park. Jai-Chang (パク ジェチャン) ● @Dreamwalker ● 現 | Dreamus Company ● 前 | Angel Robotics ● Flutter Seoul - Organizer JAICHANGPARK アンニョンハセヨ 30分間よろしくお願い します。

Slide 3

Slide 3 text

Flutter Seoul紹介 ● 今年9月からFlutter KoreaからFlutter Seoulに変更になりました。 ● オフラインやオフラインMeetup興味ある 方、韓国のFlutterコミュニティに興味ある 方はいつでも歓迎です。 
 
 
 3 https://flutter.dev/community https://www.meetup.com/ko-KR/flutter-seoul/

Slide 4

Slide 4 text

発表で触れること、触れないこと
 触れること 1. Flutterをロボットに活用す る方法 2. ROSとのコミュニケーション 方法 
 触れないこと 1. Flutter 3の詳しい内容 2. ロボティクスの深い話 a. 理論 b. Kinematics c. Dynamics d. 2 link manipulator e. Jacobian & Cartesian f. など。 4

Slide 5

Slide 5 text

対象
 1. Flutterアプリ開発経験のある方 2. ロボットに興味がある方 3. ソケット通信やgRPCなどのネットワーク通信に 興味のある方 5 初心者 intermediate advanced

Slide 6

Slide 6 text

登場人物
 6 ROSさん ROSジュニア2世 ROS2さん Flutter くん ロボット家門 画家Sky家門 イラストソース : いらすとや https://www.irasutoya.com/

Slide 7

Slide 7 text

登場人物
 7 Flutter くん 画家Sky家門 特徴 
 1. 絵を描くのが上手です。 ● FlutterはUI ToolKitである。 2. Dart語がペラペラです。 ● FlutterはDart語を使います。 3. どこでも絵をうまく描けます。 ● FlutterはMulti-Platformとして、Single Code Baseで モバイル、ウェブ、デスクトップ、Embedded イラストソース : いらすとや https://www.irasutoya.com/

Slide 8

Slide 8 text

登場人物
 8 ROSさん ROSジュニア2世 ROS2さん ロボット家門 特徴 1. C++やPython語がペラペラです。 ● ROSはC++やPythonを使って開発します。 2. Linux家門のUbnutuと仲良し 3. ほぼ全てのロボットはROSさんとROS2さんを知っ てます。 イラストソース : いらすとや https://www.irasutoya.com/

Slide 9

Slide 9 text

同居生活 1. まずは、出会いから。 2. 付き合い&告白 3. お部屋探し 4. 家もしくは部屋のインテリア 5. 互いにコミュニケーションをとる 6. 片付けや掃除 9

Slide 10

Slide 10 text

1. まずは、出会いから。 10

Slide 11

Slide 11 text

ROSってなんでしょう 11 ROSさん Robot Operating System イラストソース : いらすとや https://www.irasutoya.com/ https://en.wikipedia.org/wiki/Pepper_(ro bot) https://www.universal-robots.com/ https://discourse.ros.org/t/ros-news-for-the-week-of-2-8-2021/1 8929 https://www.wired.com/story/spot-the-robot-dog-trot s-into-the-big-bad-world/

Slide 12

Slide 12 text

ROSってなんでしょう
 12 ROS(Robot Operating System) 1. ROSはROSとROS2 2つのバージョンがあります。 2. ロボット開発に役立つ1つのミドルウェア 3. Ubuntuオペレーティングシステムに基づいて主に使用されます。 4. 役割が定義されたノード(Node)があり、ノードとノード間の通信を行います。 5. ノードとノード間の通信には、ROSのみの標準化されたメッセージがあります。 ● https://docs.ros.org/en/foxy/Tutorials/Beginner-CLI-Tools/Understanding-ROS2-Nodes/U nderstanding-ROS2-Nodes.html ● http://wiki.ros.org/

Slide 13

Slide 13 text

標準化されたメッセージ? 13 ROS Msg gRPC通信のようにプロトコルバッファでメッセージを規格化す るようにロボットとノード間通信のメッセージを規格化する。 http://docs.ros.org/en/melodic/api/sensor_msgs/html/index-msg.html もちろん カスタマイズも可能です。

Slide 14

Slide 14 text

Protocol Buffers
 14 message Person { optional string name = 1; optional int32 id = 2; optional string email = 3; } https://developers.google.com/protocol-buffers

Slide 15

Slide 15 text

ROS Msg 15 msg srv ROSのメッセージ形式は2つに分類できます。 https://docs.ros.org/en/foxy/Tutorials/Beginner-CLI-Tools/Understanding-ROS2-Nodes/Und erstanding-ROS2-Nodes.html

Slide 16

Slide 16 text

ROS Msg 16 Msg sensor_msgs/BatteryState Message # Power supply technology (chemistry) constants uint8 POWER_SUPPLY_TECHNOLOGY_UNKNOWN = 0 uint8 POWER_SUPPLY_TECHNOLOGY_NIMH = 1 uint8 POWER_SUPPLY_TECHNOLOGY_LION = 2 uint8 POWER_SUPPLY_TECHNOLOGY_LIPO = 3 Header header float32 voltage # Voltage in Volts (Mandatory) float32 current # Negative when discharging (A) (If unmeasured NaN) float32 charge # Current charge in Ah (If unmeasured NaN) float32 capacity # Capacity in Ah (last full capacity) (If unmeasured NaN) float32 design_capacity # Capacity in Ah (design capacity) (If unmeasured NaN) float32 percentage # Charge percentage on 0 to 1 range (If unmeasured NaN) uint8 power_supply_status # The charging status as reported. Values defined above uint8 power_supply_health # The battery health metric. Values defined above uint8 power_supply_technology # The battery chemistry. Values defined above bool present # True if the battery is present float32[] cell_voltage # An array of individual cell voltages for each cell in the pack # If individual voltages unknown but number of cells known set each to NaN string location # The location into which the battery is inserted. (slot number or plug) string serial_number # The best approximation of the battery serial number http://docs.ros.org/en/melodic/api/sensor_msgs/html/index-msg.html http://docs.ros.org/en/melodic/api/sensor_msgs/html/msg/BatteryState.html

Slide 17

Slide 17 text

ROS Msg 17 Srv - Service message (Custom) int64 a int64 b int64 c --- int64 sum Request Response https://docs.ros.org/en/humble/Tutorials/Beginner-Client-Libraries/Custom-ROS2-Interfaces.html

Slide 18

Slide 18 text

1. まずは、出会いから
 18 ROSさん Robot Operating System 早くアプリ出して AndroidもiOSもアプリ欲しい ウェブはデスクトップので もアプリ使いたい イラストソース : いらすとや https://www.irasutoya.com/ https://newatlas.com/robotics/ford-spot-robotic-do gs-laser-scan-retooling/ https://support.bostondynamics.com/s/article/Spot-controller

Slide 19

Slide 19 text

1. まずは、出会いから
 19 ROS2さん 合コンして 相手あってみたらどう? ユーザーアプリの開発に生産性が高く、 コストが低いプラットフォームは? ● アプリ開発者は1人ですがどうする? ● モバイルだけでなくWeb、デスクトップも可能なはずなのに? ● 組み込みシステム(Embedded System)でも実行できなければならない。 イラストソース : いらすとや https://www.irasutoya.com/

Slide 20

Slide 20 text

1. まずは、出会いから
 20 ROS2さん Flutterさん iOSさん Android さん Qtさん RNさん 🤔 時間があまりない QtやAndroidアプリだけを開発してみたが… イラストソース : いらすとや https://www.irasutoya.com/

Slide 21

Slide 21 text

2. 付き合い&告白 21

Slide 22

Slide 22 text

2. 付き合い&告白 22 さまざまなプラットフォームの調 査を進めます。 イラストソース : いらすとや https://www.irasutoya.com/

Slide 23

Slide 23 text

2. 付き合い&告白 23 なぜ Flutterだったのか? 1. Android開発者はいましたが、iOS開発者はいませんでした。 2. AndroidアプリでROSを連動してデータ通信する作業が思ったより難しく時間がかかります (ros2-javaはあるが安定したros2-kotlinがない) 3. 時間投資ほど結局iOSアプリも開発をしなければならない状況 4. 既存Android開発者にも開発が可能なFlutterを選定 ROS2さん Flutterさん 告白って握手 これあってます か? イラストソース : いらすとや https://www.irasutoya.com/

Slide 24

Slide 24 text

2. 付き合い&告白 24 なぜ Flutterだったのか? 5. 3-4ヶ月という時間内に結果が出なければならなかった 。 (モバイルアプリ、Web、ロボット自体でデバッグが可能なアプリなど ) 6. ネイティブのハードウェア機能が利用可能 (Platform Channelを使用したBLE、TCP / IP、WebSocketなど) 7. DX の方も良かった。 8. Legacyアプリじゃなく、新しいアプリを開発できる時期 ROS2さん Flutterさん 告白って握手 これあってます か? イラストソース : いらすとや https://www.irasutoya.com/

Slide 25

Slide 25 text

3. お部屋探し 25

Slide 26

Slide 26 text

3. お部屋探し
 26 そろそろ、 一緒に住んでみま せんか? 同居生活.. 今家賃高いし、部屋狭 いし一緒に探してみま しょう じゃあ。 探してみます。 後は任せて イラストソース : いらすとや https://www.irasutoya.com/

Slide 27

Slide 27 text

3. お部屋探し
 部屋探しはFlutterチャンネルの選定とコスト面の話です。 コスト面 ROSさんはQt不動産と契約して毎月家賃を100万円支払っていました。 Flutterさんが探したグーグル不動産と契約して入ると、 家賃が無料になりました。 27 FlutterはOpen Sourceなので販売する製品のライセンス費用に心配がなかった。

Slide 28

Slide 28 text

3. お部屋探し
 Flutterチャンネル選定 ● Flutterチャンネルをどのように選びますか? ● どのチャンネルを主に使用していますか? 28 1. 開発時にはbetaやmasterで、配布時にstableに進む。( 少し危険な方法です。) 2. モバイルアプリだけ開発したり、初めての場合は stableに設定することをお勧めします。

Slide 29

Slide 29 text

4. 家もしくは部屋のインテリア 29

Slide 30

Slide 30 text

4. 家もしくは部屋のインテリア
 インテリアや配置の内容は、アーキテクチャの内容です。 家を一つのFlutterアプリだと思ってもいいです。 ● 一人でFlutterアプリ開発していますか? ● 多数の開発者さんと一緒にFlutterアプリ開発していますか? 30 どうする? イラストソース : いらすとや https://www.irasutoya.com/

Slide 31

Slide 31 text

4. 家もしくは部屋のインテリア
 31 https://ja.wikipedia.org/wiki/%E3%83%88%E3%82%A4%E3%83%AC%E3%83%83%E3%83%88%E3%83%9A%E3%83%BC%E3%8 3%91%E3%83%BC%E3%81%AE%E5%90%91%E3%81%8D

Slide 32

Slide 32 text

4. 家もしくは部屋のインテリア
 32 https://ja.wikipedia.org/wiki/%E3%83%88%E3%82%A4%E3%83%AC%E3%83%83%E3%83%88%E3%83%9A%E3%83%BC%E3 %83%91%E3%83%BC%E3%81%AE%E5%90%91%E3%81%8D 一つのアプリを作っても 1行のコードを書いても 人によって異なるスタイルの結果が出てきます。 したがって、コラボレーション(協力する)ためには、互いに統 一されたスタイルや開発に効率的なアーキテクチャを選ぶこ とが重要です。 どうする? 表?裏? イラストソース : いらすとや https://www.irasutoya.com/

Slide 33

Slide 33 text

4. 家もしくは部屋のインテリア
 33 1-3ヶ月後 アーキテクチャなしで 開発する。 自分自身が書いた Codeでも 見ずらい 協力するとき 大変になる

Slide 34

Slide 34 text

4. 家もしくは部屋のインテリア
 アーキテクチャに対する決まった正解はありませんが、 個人的に10ページ以下のアプリの場合はMVVMパターンをお勧めします。 それ以上のページやパターンが必要な場合は、 クリーンアーキテクチャの導入も検討してみると良い と思います。 34 https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html イラストソース : いらすとや https://www.irasutoya.com/

Slide 35

Slide 35 text

4. 家もしくは部屋のインテリア
 簡単な1-2ページアプリなら 1. MVC(Model - View - Controller) 2. MVP(Model - View - Presenter) 3. MVVM(Model - View - ViewModel) MV-Whatever 35

Slide 36

Slide 36 text

5. 互いにコミュニケーションをとる 36

Slide 37

Slide 37 text

5. 互いにコミュニケーションをとる
 37 人間関係や開発にて、コミュニケーションは最も重要な要素の 1つです。
 
 
 Q. ROSとFlutterは異なるプラットフォームですが、どのように通信する必要 がありますか?
 
 Flutterは、データを受信する受信者として (1つのクライアントとして )動作する 必要があります。
 ROSは、データを送信するサーバーと同じ役割を果たす必要があります。 
 
 
 👽👾👽 👾🛸👽 👾👽 イラストソース : いらすとや https://www.irasutoya.com/

Slide 38

Slide 38 text

38 Flutter ROS2 Foxy Ros Node Flutter App 通信 どうする? BLE? Wi-Fi? 1. 組み込み(Embedded)やデスクトップ環境 ● Flutter アプリが組み込まれて使用される場合 2. Flutter アプリがモバイルアプリで提供される場合 ● ネットワーク使用, Wi-Fi, LTE, 5G など 3. モバイル&タブレットアプリでインターネットに接続できない環境 5. 互いにコミュニケーションをとる

Slide 39

Slide 39 text

39 Flutter ROS2 Foxy Ros Node Flutter App 1. 組み込み(Embedded)やデスクトップ環境(Flutter アプリが組み込まれて使用される場合) ● ローカルホストで127.0.0.1で相互通信が可能 ● ネットワークレス環境でROSとフラッター間で通信可能 ● ただし、クラウドと通信が必要な場合はネットワーク接続が必要です。 ○ または別々の周波数を持つ通信を使用する(LoRaなど) 5. 互いにコミュニケーションをとる
 Ubuntu(Linux) OS 写真は例です。


Slide 40

Slide 40 text

40 Flutter ROS2 Foxy 2. Flutter アプリがモバイルアプリで提供される場合 ● TCP/IP ソケット通信を使用する。 (データ規格は主にJSON) ● gRPC(データ仕様はプロトコルバッファ) ● ケーブルによる有線通信 Ros Node Flutter App 5. 互いにコミュニケーションをとる
 Ubuntu(Linux) OS Android & IOS Hardware Platform Channel
 BLE, Wi-Fi etc
 Network イラストソース : いらすとや https://www.irasutoya.com/

Slide 41

Slide 41 text

41 Flutter ROS2 Foxy 3. モバイル&タブレットアプリでインターネットに接続できない環境 ● Wi-Fi p2p (Direct) ○ TCP/IP Socket通信を使用する。(JSONデータ) ○ WebSocket (JSONデータ) ○ gRPC (プロトコルバッファ) ● ケーブルによる有線通信(Uartなど) ● BLE Ros Node Flutter App 5. 互いにコミュニケーションをとる
 Ubuntu(Linux) OS Android Hardware Platform Channel
 BLE, Wi-Fi Direct etc
 Flutter Flutter App iOS Hardware Platform Channel
 BLE
 BLE
 ALL
 イラストソース : いらすとや https://www.irasutoya.com/

Slide 42

Slide 42 text

5. 互いにコミュニケーションをとる
 42 Q. では、TCP/IP Socket と Websocket の Bandwidth は確かに違うのに速度差はなかったのでしょうか? A. 体感されるほどの違いはありませんでした。

Slide 43

Slide 43 text

5. 互いにコミュニケーションをとる
 43 Q. なぜBLE通信を使用しなかったのですか? A. BLE Bandwidth 1Mbps or 2Mbps Wi-Fi Direct(p2p) 250Mbps Wi-Fi DirectはAndroidでのみ利用可能です。 iOSの場合は、BLEを使用してください。

Slide 44

Slide 44 text

5. 互いにコミュニケーションをとる
 44 最初はどのようにコミュニケーションを取ったのでしょうか? 
 
 UbuntuコンピュータでROS アプリを実行しました。 
 しかし、Flutterアプリとデータ通信できるものはありませんでした。 
 
 したがって、TCP/IP Socket 通信を利用する
 そして、どのクライアントでも同じように使用できるように gRPCを使用しました。
 Flutter ROS2 Foxy Ros Node Topic Flutter App Subscription 通信のため 何かが必要

Slide 45

Slide 45 text

45 Ubuntu 20.04 Flutter ROS2 Foxy Ros Node Flutter App Publisher Ros Node Subscriber Msg Converter Msg Converter Msg(Data) Protocol Buffers Builder gRPC Client gRPC Server Python & Go gRPC Server gRPC Process A
 Process B
 Process C or third-party
 Msg Decode Thread 1
 Thread 0


Slide 46

Slide 46 text

46 Ubuntu 20.04 Flutter ROS2 Foxy Ros Node A Flutter App roslibdart publisher Ros Node rosbridge _server Websocket Server WebSocket Client Ros Node B publisher Topic :9090 JSON 
 
 5. 互いにコミュニケーションをとる

Slide 47

Slide 47 text

5. 互いにコミュニケーションをとる
 47 今後は Rosbridge_serverを使 用してWebsocketに通信 します。 そしてJSON形式でお互 いに話しましょう プロトコルを作らな ければなりません。 イラストソース : いらすとや https://www.irasutoya.com/

Slide 48

Slide 48 text

5. 互いにコミュニケーションをとる
 48 rosbridge v2.0 Protocol Specification
 https://github.com/RobotWebTools/rosbridge_suite/blob/ros2/ROSBRIDGE_PROTOCOL.md https://github.com/RobotWebTools/rosbridge_suite The message transport of rosbridge is JSON objects. The only required field is the 'op' field, which specifies the operation of that message. Each 'op' then specifies its own message semantics. イラストソース : いらすとや https://www.irasutoya.com/

Slide 49

Slide 49 text

5. 互いにコミュニケーションをとる
 49 rosbridge v2.0 Protocol Specification https://github.com/RobotWebTools/rosbridge_suite/blob/ros2/ROSBRIDGE_PROTOCOL.md イラストソース : いらすとや https://www.irasutoya.com/

Slide 50

Slide 50 text

# install using apt-get sudo apt-get install ros-foxy-rosbridge-server # or you can clone from github cd ros_ws/src git clone https://github.com/RobotWebTools/rosbridge_suite cd .. colcon build 5. 互いにコミュニケーションをとる
 50 rosbridge_suite INSTALLATION https://github.com/RobotWebTools/rosbridge_suite イラストソース : いらすとや https://www.irasutoya.com/

Slide 51

Slide 51 text

# install using apt-get sudo apt-get install ros-foxy-rosbridge-server # or you can clone from github cd ros_ws/src git clone https://github.com/RobotWebTools/rosbridge_suite cd .. colcon build 5. 互いにコミュニケーションをとる
 51 rosbridge_suite humble & distro イラストソース : いらすとや https://www.irasutoya.com/

Slide 52

Slide 52 text

# install using apt-get sudo apt-get install ros-foxy-rosbridge-server # or you can clone from github cd ros_ws/src git clone https://github.com/RobotWebTools/rosbridge_suite cd .. colcon build 5. 互いにコミュニケーションをとる
 52 rosbridge_suite https://github.com/RobotWebTools/rosbridge_suite ws または ros_ws をワークスペースフォルダー名として主に使用します。 
 イラストソース : いらすとや https://www.irasutoya.com/

Slide 53

Slide 53 text

5. 互いにコミュニケーションをとる
 53 rosbridge_suite > rosbridge_serverの実行 Websocket ポート9090を使用してクライアントと通信可能 setup.bash cd ros_ws source install/local_setup.bash ros2 launch rosbridge_server rosbridge_websocket_launch.xml イラストソース : いらすとや https://www.irasutoya.com/

Slide 54

Slide 54 text

5. 互いにコミュニケーションをとる
 54 roslibdart ros = Ros(url: 'ws://127.0.0.1:9090'); chatter = Topic(ros: ros, name: '/topic', type: "std_msgs/String", reconnectOnClose: true, queueLength: 10, queueSize: 10); ros.connect(); await chatter.subscribe(subscribeHandler); Future subscribeHandler(Map msg) async { msgReceived = json.encode(msg); setState(() {}); } イラストソース : いらすとや https://www.irasutoya.com/

Slide 55

Slide 55 text

5. 互いにコミュニケーションをとる
 55 roslibdart ros = Ros(url: 'ws://127.0.0.1:9090'); chatter = Topic(ros: ros, name: '/topic', type: "std_msgs/String", reconnectOnClose: true, queueLength: 10, queueSize: 10); ros.connect(); await chatter.subscribe(subscribeHandler); Future subscribeHandler(Map msg) async { msgReceived = json.encode(msg); setState(() {}); } Websocket localhost 9090
 Ros Class イラストソース : いらすとや https://www.irasutoya.com/

Slide 56

Slide 56 text

5. 互いにコミュニケーションをとる
 56 roslibdart class Ros { Ros({this.url}) { _statusController = StreamController.broadcast(); } Ros Class イラストソース : いらすとや https://www.irasutoya.com/

Slide 57

Slide 57 text

5. 互いにコミュニケーションをとる
 57 roslibdart /// The websocket connection to communicate with the ROS node. late WebSocketChannel _channel; /// Subscription to the websocket stream. late StreamSubscription _channelListener; /// JSON broadcast websocket stream. late Stream> stream; Ros Class イラストソース : いらすとや https://www.irasutoya.com/

Slide 58

Slide 58 text

5. 互いにコミュニケーションをとる
 58 FlutterでRoslibdartを使用してtopiclメッセージを購読(Sub)する方法 ros = Ros(url: 'ws://127.0.0.1:9090'); chatter = Topic(ros: ros, name: '/topic', type: "std_msgs/String", reconnectOnClose: true, queueLength: 10, queueSize: 10); ros.connect(); await chatter.subscribe(subscribeHandler); Future subscribeHandler(Map msg) async { msgReceived = json.encode(msg); setState(() {}); } Topic Class イラストソース : いらすとや https://www.irasutoya.com/

Slide 59

Slide 59 text

5. 互いにコミュニケーションをとる
 59 FlutterでRoslibdartを使用してtopiclメッセージを購読(Sub)する方法 class Topic { Topic({ required this.ros, required this.name, required this.type, this.compression = 'none', this.throttleRate = 0, this.latch = false, this.queueSize = 100, this.queueLength = 0, this.reconnectOnClose = true, }) : assert(['png', 'cbor', 'none'].contains(compression)), assert(throttleRate >= 0); Topic Class イラストソース : いらすとや https://www.irasutoya.com/

Slide 60

Slide 60 text

5. 互いにコミュニケーションをとる
 60 FlutterでRoslibdartを使用してtopiclメッセージを購読(Sub)する方法 Ros connect ros = Ros(url: 'ws://127.0.0.1:9090'); chatter = Topic(ros: ros, name: '/topic', type: "std_msgs/String", reconnectOnClose: true, queueLength: 10, queueSize: 10); ros.connect(); await chatter.subscribe(subscribeHandler); Future subscribeHandler(Map msg) async { msgReceived = json.encode(msg); setState(() {}); } イラストソース : いらすとや https://www.irasutoya.com/

Slide 61

Slide 61 text

5. 互いにコミュニケーションをとる
 61 FlutterでRoslibdartを使用してtopiclメッセージを購読(Sub)する方法 Ros connect _channel = initializeWebSocketChannel(url); stream = _channel.stream.asBroadcastStream().map((raw) => json.decode(raw)); IOWebSocketChannel.connect(url); イラストソース : いらすとや https://www.irasutoya.com/

Slide 62

Slide 62 text

5. 互いにコミュニケーションをとる
 62 roslibdart ros = Ros(url: 'ws://127.0.0.1:9090'); chatter = Topic(ros: ros, name: '/topic', type: "std_msgs/String", reconnectOnClose: true, queueLength: 10, queueSize: 10); ros.connect(); await chatter.subscribe(subscribeHandler); Future subscribeHandler(Map msg) async { msgReceived = json.encode(msg); setState(() {}); } Topic Subcri be イラストソース : いらすとや https://www.irasutoya.com/

Slide 63

Slide 63 text

5. 互いにコミュニケーションをとる
 63 roslibdart Future subscribe(SubscribeHandler subscribeHandler) async { subscription = ros.stream; subscribeId = ros.requestSubscriber(name); await safeSend(Request( op: 'subscribe', id: subscribeId, type: type, topic: name, compression: compression, throttleRate: throttleRate, queueLength: queueLength, )); } Topic Class Requestはデータモデルです
 JSON DECODE、ENCODE処理が可 能です。
 
 イラストソース : いらすとや https://www.irasutoya.com/

Slide 64

Slide 64 text

5. 互いにコミュニケーションをとる
 64 roslibdart Future subscribe(SubscribeHandler subscribeHandler) async { subscription!.listen((Map message) async { if (message['topic'] != name) { return; } await subscribeHandler(message['msg']); }); } Topic Class イラストソース : いらすとや https://www.irasutoya.com/

Slide 65

Slide 65 text

5. 互いにコミュニケーションをとる
 65 データ
 麺=
 Json
 WebSocket & Stream
 竹=通信媒体
 お水
 Serialization
 @freezed 
 @json_serialization
 StreamSubscription 好みで
 データ処理
 Model または
 json デコード
 data発生 Listen イラストソース : いらすとや https://www.irasutoya.com/

Slide 66

Slide 66 text

5. 互いにコミュニケーションをとる
 66 Topic A Topic B data発生 data発生 イラストソース : いらすとや https://www.irasutoya.com/

Slide 67

Slide 67 text

5. 互いにコミュニケーションをとる
 67 roslibdart Future subscribe(SubscribeHandler subscribeHandler) async { subscription!.listen((Map message) async { if (message['topic'] != name) { return; } await subscribeHandler(message['msg']); }); } Topic Class イラストソース : いらすとや https://www.irasutoya.com/

Slide 68

Slide 68 text

5. 互いにコミュニケーションをとる
 68 roslibdart // Receiver function to handle requests when the service is advertising. typedef SubscribeHandler = Future Function(Map args); Topic Class イラストソース : いらすとや https://www.irasutoya.com/

Slide 69

Slide 69 text

5. 互いにコミュニケーションをとる
 69 roslibdart ros = Ros(url: 'ws://127.0.0.1:9090'); chatter = Topic(ros: ros, name: '/topic', type: "std_msgs/String", reconnectOnClose: true, queueLength: 10, queueSize: 10); ros.connect(); await chatter.subscribe(subscribeHandler); Future subscribeHandler(Map msg) async { msgReceived = json.encode(msg); setState(() {}); } イラストソース : いらすとや https://www.irasutoya.com/

Slide 70

Slide 70 text

6. 片付けや掃除
 70 状態管理 (State Management) https://github.com/rrousselGit/riverpod

Slide 71

Slide 71 text

まとめ 71 1. ロボティクスの開発には ROS(Robot Operating System)を使っています。 ○ ロボット開発にROS2を使いました。ROS2はUbnutuOS環境で設定して開発しました。 2. ロボットのユーザー向けのアプリで Flutterを選んで開発し、その結果最高でした。 ○ その結果生産性が上がり、コストは下がりました。 ○ Platform Channel&Method Channelを使って通信に対していろんな問題を解決しました。 (BLE, TCP/IP) 3. Architectureと状態管理(State Management) ○ どんどん機能が増えて MVVM(AS-IS)からClean Architecture(TO-BE)に変更しました。 ○ Provider(AS-IS)からRiverpod(TO-BE)に変更。 4. ROSとFlutterアプリと通信方法 ○ (AS-IS) 最初はgRPCを使ってお互い通信しました。 (Protocol Buffers) ○ (TO-BE) roslibdartとrosbridge_serverを使うことに変更しました。 (JSON)

Slide 72

Slide 72 text

あと2人は どうなりましたか? 72

Slide 73

Slide 73 text

想像に任せま す。 73

Slide 74

Slide 74 text

74 この同居生活はフィクションです。 実際のものとは関係ありません。 終わり

Slide 75

Slide 75 text

ありがとうございました Thank you! JaiChang Park Contact JAICHANGPARK @jaichangpark @Dreamwalker Dreamus Company