Recommended
More Related Content
Similar to SwiftGarden.pdf
Similar to SwiftGarden.pdf (20)
More from yugosugiyama
More from yugosugiyama (7)
Recently uploaded
Recently uploaded (8)
SwiftGarden.pdf
- 1. 1 すぎー/@u5_03 #iosdc 2023/09/03 11:00〜 Track C Swiftで りんごを育てる
- 2. 2 0. 導入 すぎー/杉山 優悟 X: iOSDC2回目登壇&スタッフ 前々々職(2018~)からiOSエンジニア 元々中高の社会科教員志 趣味: 美味しいものを食べる、料理、アニメ/漫画、ガジェット収 最近やってること: ベランダでミニ家庭菜園、ピクミン4 @u5_0 README
- 5. 5 0. 導入 発表者は、 で 発表情報は不正確、もしくは情報が不足している場合がありま 今回の実装は、個人開発でアーキテクチャやセキュリティが考慮でき てない箇所が多くあります(検証中のα版くらいに思ってください 改善点(実装や について)があったら、教えてください のため、全ての内容を発表/記載で きないので、 を確認してください ハード周りの技術に精通しているわけではない 発表時間やスライドスペースの制約 詳細はブログ記事(昨年度分を含む) 家庭菜園 注意事項 ️
- 6. Get Temperature and Humidity in Room Post images from Raspberry Pi Schedule tasks of Swift CLI Auto draining water to plant Communicate through GPIO Firebase in Swift CLI SwiftGarden Take Photos using Raspberry Pi Swift Charts Collaborate with Home appliance Run Bash from Swift Run Python from Swift Run Swift on Raspberry Pi
- 14. 14 0. 導入 カメラ Belkin iPhone Magsafe 消灯後の暗さ対策用のUSB電源小型ライト 三脚 給水用ポンプ Pineapple先端 SwitchBot温湿度センサー 予備の大根の種 給水用ホース 配線色々 植物育成用ライト ラズパイ 今回の実装現場(α版)
- 15. 15 今回は1~4の4部構成です 0. 導 センサーデータを取得する - SwiftからPythonコードを呼び出 ラズパイでFirebaseにデータを送る - SwiftのCLIツールを動か 自動給水を行う - SwiftでラズパイのGPIOを操作す iOSアプリでデータを確認する - Swift Chartsの実 まと 目次
- 16. 16 ラズパイの開発環境 $ cat /proc/device-tree/model > Raspberry Pi 4 Model B Rev 1.2 $ cat /etc/os-release > PRETTY_NAME="Raspbian GNU/Linux 11 (bullseye)" > NAME="Raspbian GNU/Linux" > VERSION_ID="11" > VERSION="11 (bullseye)" > VERSION_CODENAME=bullseye $ swift --version > Swift version 5.7.1 (swift-5.7.1-RELEASE) > Target: armv7-unknown-linux-gnueabihf # ラズパイのハード情報 # ラズパイで使用しているOSの情報
- 17. 17 1. センサーデータを取得する - SwiftからPythonコードを呼び出す - Run Python from Swift Get Temperature and Humidity in Room Collaborate with Home appliance
- 18. 18 センサーデータを取得する 既述の通り、 から温度・湿度を取得す 2022年に使用したv1.0と異なり、v1.1では固定のトークンではな く、HMACでユニークなsignatureを生成して、利用す Linuxでは が利用できないため、 の利用 を検討したが、後述の と競合したため、セキュ リティを考慮して、pythonでの生成を実装( を使用 同じSwiftのバージョンでも SwitchBotのAPI CryptoKit swift-crypto async-http-client PythonKit MacOSとLinuxで挙動が異なる センサーデータを取得する
- 20. 20 センサーデータを取得する LinuxのSwiftのデータ取得はハマりどころが多 標準のFoundationにURLSessionはないので、Linuxでのみ のimportが必 のよう なコードは書けないので、 で従来の 処理をラップして、実 にURLSessionなどは現時点で未実装 FoundationNetworking try await URLSession.shared.data(for: request) withCheckedContinuation swift-foundation データ取得の通信処理
- 21. 21 センサーデータを取得する 実行すると以下のようなJSONを取得できます(一部省略) { "message": "success", "body": { "humidity": 79, "deviceType": "Meter", "temperature": 24.1, "version": "V2.5", "battery": 87 } } 取得結果
- 23. 23 2. ラズパイでFirebaseにデータを送る - SwiftのCLIツールを動かす - Firebase in Swift CLI Run Bash from Swift Post images from Raspberry Pi
- 25. 25 2. ラズパイでFirebaseにデータを送る ラズパイにカメラモジュールを接続して撮 今回のラズパイのOSだと、 のよ うなコマンドで写真撮影ができるため、SwiftからBashを実行する 処理を記載す 指定のパスに保存した写真をFirebaseのCloud Storageにアッ プロードす uploadには を使用する libcamera-jpeg -o test1.jpg async-http-client ラズパイで写真を撮影する
- 26. 26 ラズパイでFirebaseにデータを送る Swiftからコマンドを実行するには、 を使用しま argumentsにパラメータを渡すときは、オプションとその値を別々 の文字列として指定す 実装すれば、標準入力/標準出力の設定も可能 Process let process = Process() process.executableURL = Foundation.URL(fileURLWithPath: "/usr/bin/env") process.arguments = ["/usr/bin/libcamera-jpeg", "-o", “${ファイルパス}”] try process.run() process.waitUntilExit() ShellCall.swift 写真撮影のコマンドの実行
- 29. 29 2.ラズパイでFirebaseにデータを送る 一般的に使用する はラズパイ では以下のエラーで画像のアップロードのみエラーが発生(原因不明 URLSessionTask failed with error: HTTP/2 stream 0 was not closed cleanly: PROTOCOL_ERROR (err 1 curlなどで を指定して通信すれば成功したが、 URLSessionは での処理が固定なので難しい URLSession.shared.uploadTask HTTP/1.0 HTTP/2.0 ラズパイでの画像アップロード処理の課題
- 30. 30 2.ラズパイでFirebaseにデータを送る 色々調べた結果、 がhttpのバージョンを指定できるとい う情報があり、それを使用している でアップ ロード処理を実装したところ、なんとかCloud Storageにアップ ロードすることに成功 この実装が今回の実装で1番のハマりどころだっ 結果的には特に を指定しなくても、成功した(なぜ？ とりあえずこれで取得したURLなどをfirestoreに保存できる！ swift-nio async-http-client HTTP/1.0 ラズパイでの画像アップロード処理の課題
- 31. 31 2.ラズパイでFirebaseにデータを送る 1 2 3 4 5 6 7 8 9 10 static let = static func async throws -> let = let = try let = + ! var = = httpClient ( : .createNew) ( : URL) CloudStoragePostResponse { fileName fileURL.lastPathComponent fileData ( : fileURL) requestURL ( : URLList.postStorage.URL.absoluteString Constants.imageParentDirectoryName fileName ) request ( : requestURL.absoluteString) request.method .POST request.headers. ( : , : accessToken ) HTTPClient eventLoopGroupProvider Data contentsOf URL string HTTPClientRequest url add name value add name "Content-Type" value "image/jpeg" postImageWithAsyncHTTPClient fileURL "&name=( )/( )" "Authorization" "Bearer ( )" request.headers. ( : , : ) FirebaseManager.swift ラズパイでの画像アップロードのコード1
- 32. 32 2.ラズパイでFirebaseにデータを送る FirebaseManager.swift 1 2 3 4 5 6 7 8 9 10 11 12 request.body . (fileData, : . (fileURL.fileByteLength)) response httpClient. (request, : . ( )) httpClient. () response.status .ok { byteBuffer response.body. ( : ) responseData (byteBuffer.readableBytesView) decoder () decoder. (CloudStoragePostResponse. , : responseData) } { SwiftGardenError. ( : (response.status.code)) } } = let = try await try await if == let = try await * let = let = return try self else throw bytes length known execute timeout seconds 30 shutdown collect upTo 1024 1024 Data JSONDecoder decode from errorRespoonse statusCode Int // 1 MB ラズパイでの画像アップロードのコード2
- 33. 33 2.ラズパイでFirebaseにデータを送る headerの の指定を必ずす などを指定しないと、Cloud Storage側で画像 として認識されな bodyに画像のデータを設定する時に、データだけでなく、 も指定しないとエラーになっ curlでいうとこの のヘッダーと同じ役 はカスタムのURLのextensionの関数 Content-Type image/jpeg データの サイズ Content-Length fileByteLength ラズパイの画像アップロードの処理の注意点
- 34. 34 2.ラズパイでFirebaseにデータを送る curlでサンプル処理を書くと、こんな感じ curl -X POST 'https://firestore.googleapis.com/v1/projects/$PROJECT_ID/databases/(default)/documents/ ${COLLECTION_ID} --header 'Authorization: Bearer ${ACCESS_TOKEN}' --header 'Content-Type: application/json' --data-raw '{ "fields": { "hoge": { "stringValue": "abcdefghijk" }, "date": { "timestampValue": "2023-07-31T13:51:54.107Z" } } }' FirestoreへのPost処理の実装
- 35. 35 2.ラズパイでFirebaseにデータを送る 設定する がかなり複雑な書き Encodableの 関数でカスタムの処理を追加して対 Firestoreの 型に保存する場合、Dateを" "の形式の に変換する必要が ある ⇒FirebaseのSDKは開発者が便利に使えるように、内部で色々処理を してくれているようです！ fields encode Timestamp yyyy- MM-dd'T'HH:mm:ss.SSS'Z' String FirestoreへのPost処理の実装
- 36. 36 2.ラズパイでFirebaseにデータを送る 今回実装したfieldsの箇所のencodeの処理は以下の通り 1 2 3 4 5 6 7 8 9 func throws var = self var = self try : try : try : try : try : ( encoder: Encoder) { container encoder. ( : CodingKeys. ) fieldsContainer container. ( : FieldsKeys. , : .fields) fieldsContainer. ([ imageName], : .imageName) fieldsContainer. ([ imageURL], : .imageURL) fieldsContainer. ([ timestamp], : .timestamp) fieldsContainer. ([ temperature], : .temperature) fieldsContainer. ([ humidity], : .humidity) } encode to container keyedBy nestedContainer keyedBy forKey encode forKey encode forKey encode forKey encode forKey encode forKey "stringValue" "stringValue" "timestampValue" "doubleValue" "integerValue" FirestorePostRequest.swift FirestoreへのPost処理の実装
- 37. 37 3. 自動給水を行う - SwiftでラズパイのGPIOを操作する - Communicate through GPIO Auto draining water to plant Schedule tasks of Swift CLI
- 39. 39 3.自動給水を行う ラズパイ、リレーモジュール、ポンプを使 リレーモジュール経由でON/OFFを制御 12V PS + - 5V Ground 21Pin ON/OFF relay module 自動給水機能の実装
- 40. 40 3.自動給水を行う GPIOインスタンスを用意す GPIOの21ピンのdirectionをOUTに指定す 給水する場合はvalueを1に、止める場合は0にす 今回は という処理を実装 給水開始→5秒sleep→給水停止 1 2 3 4 5 let let = ! = gpios = SwiftyGPIO.GPIOs(for: .RaspberryPi4) waterDrainGPIO gpios[.P21] waterDrainGPIO.direction = .OUT waterDrainGPIO. waterDrainGPIO // ラズパイ4向けのgpioのインスタンス // GPIO21ピンを操作するためのインスタンス // 今回は電流を流すので、.INではなく、.OUTにする // 給水を止める // 給水を始める value 0 .value = 1 自動給水機能の実装②
- 42. 42
- 44. 44 3.自動給水を行う パラメータを設定して、個別の処理を実行できるように修 以下の2つのスクリプトを実行して、実行ファイルを用意す .build/debug/SwiftGardenP sudo cp .build/debug/SwiftGardenPi /usr/local/bin releaseビルドはエラーになったので、debugで実行(要調査！ 用意したスクリプトを を使って、定期実行(ログも残す データ収集: (1時間に1回 自動給水: (1日に1回) systemd SwiftGardenPi --captureData SwiftGardenPi --drainWater スクリプトの定期実行
- 45. 45 4. iOSアプリでデータを確認する - Swift Chartsの実装 - Swift Charts
- 48. 48 4.iOSアプリでデータを確認する グラフに使用するstructを用意する(今回は温度/湿度は共通のモデル) enum DataType: String { case humidity case temperature } struct DataModel: Identifiable { var id: String { type.rawValue + xValue.description + yValue.description } let type: DataType let xValue: Date let yValue: Int } LiveGraphView.swift SwiftのChartsで折れ線グラフの実装する
- 49. 49 4.iOSアプリでデータを確認する 今回は1つのグラフにまとめるので、温度/湿度データを1つの配列にする let postModels: [FirestoreDataModel] // Firestoreにdocumentのデータ private var dataList: [DataModel] { postModels // 湿度用 .map({ DataModel(type: .humidity, xValue: $0.date, yValue: $0.humidity) }) + postModels // 温度用 .map({ DataModel(type: .temperature, xValue: $0.date, yValue: Int($0.temperature)) }) } LiveGraphView.swift SwiftのChartsで折れ線グラフの実装する
- 50. 50 4.iOSアプリでデータを確認する Chart用のViewに折れ線グラフ用の の配列を設定する LineMark Chart(dataList) { data in LineMark( x: .value("時間", data.xValue, unit: .hour), // X軸の単位を時間に指定 y: .value("値", data.yValue) ) .foregroundStyle(by: .value("Data Type", data.type.rawValue)) // データごとにグラフを分ける } LiveGraphView.swift SwiftのChartsで折れ線グラフの実装する
- 51. 51 4.iOSアプリでデータを確認する 左右にそれぞれ2つのY軸を設定する .chartYAxis { let humidityValues = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100] AxisMarks( position: .trailing, // Y軸の表示位置(左側or右側) values: humidityValues ) { AxisValueLabel("(humidityValues[$0.index])%", centered: false) // Y軸の値の表示形式 } // ---上記と同じく温度の設定--- } LiveGraphView.swift SwiftのChartsで折れ線グラフの実装する
- 52. 52 4.iOSアプリでデータを確認する 選択中のDateがある場合、該当の時刻のX軸と垂直の線を表示する実装 Chart(dataList) { data in // ----先ほどのLine chartの実装---- if let selectedDate { // 現在の選択中の日付がある場合 RuleMark(x: .value("Selected date", selectedDate, unit: .hour)) // 縦線を表示 .foregroundStyle(Color.red) // 線の色を赤にする } } LiveGraphView.swift 折れ線グラフとは別の赤線を表示する
- 53. 53 4.iOSアプリでデータを確認する タップの座標から、どのX軸の値の配列のindexを取得する func updateSelectedDate(at location: CGPoint, proxy: ChartProxy, geometry: GeometryProxy) { let xPosition = location.x - geometry[proxy.plotAreaFrame].origin.x // tap座標-グラフの左上座標 guard let date: Date = proxy.value(atX: xPosition) else { return } // タップ座標からxの値を検索 withAnimation { selectedHourIndex = postModels .map(.date) .firstIndex(where: { $0.hour == date.hour }) ?? 0 } } LiveGraphView.swift 縦の赤線を移動させるジェスチャーの実装
- 54. 54 4.iOSアプリでデータを確認する グラフに透明のレイヤーを置き、ドラッグジェスチャーを実装する .chartOverlay { proxy in GeometryReader { geometry in Rectangle().fill(.clear).contentShape(Rectangle()) .gesture(DragGesture() .onChanged { value in updateSelectedDate(at: value.location, proxy: proxy, geometry: geometry) }) } LiveGraphView.swift 縦の赤線を移動させるジェスチャーの実装
- 55. 55 4.iOSアプリでデータを確認する グラフに透明のレイヤーを置き、タップジェスチャーを実装する .chartOverlay { proxy in GeometryReader { geometry in Rectangle().fill(.clear).contentShape(Rectangle()) // ---------先ほど実装したドラッグジェスチャーの実装---------- .onTapGesture { location in updateSelectedDate(at: location, proxy: proxy, geometry: geometry) } } LiveGraphView.swift 縦の赤線を移動させるジェスチャーの実装
- 56. 56 4.iOSアプリでデータを確認する 今回はUIImageViewの を利用する animationImages let imageView = UIImageView() imageView.contentMode = .scaleAspectFit imageView.animationImages = images imageView.clipsToBounds = true // 0.3秒ごとに画像を表示する imageView.animationDuration = TimeInterval(floatLiteral: Double(images.count) * 0.3) if !images.isEmpty { imageView.startAnimating() } TimelapseUIKitView.swift 撮影した写真をタイムラプス風に表示する
- 57. 57 4.iOSアプリでデータを確認する URLの配列から、UIImageの配列を並列で取得する処理 let imageList = try await withThrowingTaskGroup(of: UIImage?.self) { group in results.map(.imageName).forEach { imageName in group.addTask { return try await FirebaseManager.getImageURL(pathName: imageName).asUIImage() } // asUIImage()はSdWebImageを使ったカスタムのextension関数 } var images: [UIImage] = [] for try await image in group { images.append(image!) } return images } TimelapseView.swift 撮影した写真をタイムラプス風に表示する
- 59. 59
- 63. 63 まとめ Raspberry Pi Documentation - Camera softwar Google Cloud Storage JSON API の概 Cloud Firestore REST API の使 ラズパイ - 水中ポンプを制御しよ Creating a chart using Swift Chart https://developer.apple.com/documentation/charts/creating-a-chart-using- swift-chart SwitchBot API v1.1 https://www.raspberrypi.com/documentation/computers/camera_software.htm https://cloud.google.com/storage/docs/json_ap https://firebase.google.com/docs/firestore/use-rest-ap https://zenn.dev/kotaproj/articles/4903ba3b41626 https://github.com/OpenWonderLabs/SwitchBotAPI 主な参考資料・情報
- 64. 64 ちなみにパイナップル はこの状態から 成長するまでに2~3年かかるそうです 2~3年 https://www.tsukijiichiba.com/user/ collection/774 まとめ
- 66. 66 まとめ SwiftGardenの発表内容やリポジトリの情報は、省略した内容も含め て、 に詳細を記載しています。 もお願いします！ ブログ フィードバック 日本語 English Feedback 以上です！ありがとうございました！