「OutSystems Build for the Future Hackathon 2023」参加レポート！

OutSystemsのハッカソンとしては世界最大規模の「OutSystems Build for the Future Hackathon 2023」が開催され、参加してきました。このイベントがどのようなものなのか、どんな成果物を作る必要があったのか、など参加レポートをお伝えします！

Transcript

1. © 2023 NTT DATA Group Corporation © 2023 NTT DATA Group Corporation OutSystems Connect: LTで繋がる技術者の夜！ 「OutSystems Build for the Future Hackathon 2023」参加レポート！ 2023年10月18日(水) 株式会社NTTデータグループ 島倉 優人
2. © 2023 NTT DATA Group Corporation 2 自己紹介 株式会社NTTデータグループ 技術革新統括本部 システム技術本部 ADM技術部※ 課長代理 島 倉 優 人 Yuto Shimakura ※Application Development and Management • ソフトウェアアーキテクチャ/ソフトウェアプロセスを軸とした技術支援 • Low-Code Platformや開発自動化技術の普及展開・研究開発 • OutSystems Pre-Salesなど(個人的にはOutSystemsが一番好き) 情報技術で新しい 「しくみ」 や 「価値」 を創造し、より豊かで調和のとれた社会の実現に貢献。 グループ全体で10万人を超える社員が、世界50以上の国と地域、200を超える都市において サービスを展開。 NTTデータグループ について
3. © 2023 NTT DATA Group Corporation 3 本日伝えたいこと 1.「OutSystems Build for the Future Hackathon 2023」の概要 2.OutSystemsとOpenAIの連携ノウハウ
4. © 2023 NTT DATA Group Corporation 4 01 「OutSystems Build for the Future Hackathon 2023」について
5. © 2023 NTT DATA Group Corporation 5 「OutSystems Build for the Future Hackathon 2023」が 開催されていたの、知ってましたか？
6. © 2023 NTT DATA Group Corporation 6 Forumにて周知がありました。 https://www.outsystems.com/forums/discussion/90225/outsystems-odc-build-for-the-future-hackathon-2023-registrations-open/
7. © 2023 NTT DATA Group Corporation 7 どんなイベント？ 1チーム1～5名で参加可能
8. © 2023 NTT DATA Group Corporation 8 お題は？ NPO団体の活動を支援するようなアプリケーションを作成してください。 （フリーお題）
9. © 2023 NTT DATA Group Corporation 9 期間は？ ODC環境の提供、お題の提示 開発期間は約1週間 成果物提出 結果発表
10. © 2023 NTT DATA Group Corporation 10 提出する成果物は？ • ODCで開発されたアプリケーション • プロジェクト説明文書 (※) • どのような社会問題に取り組んだか？ • アプリの特徴的な機能は？ • などなど • アプリ説明用デモ動画 (※) (※) 英語表記、音声
11. © 2023 NTT DATA Group Corporation 11 審査者は？
12. © 2023 NTT DATA Group Corporation 12 評価基準は？ • Technical （40%） ▪ ExternalLogic(OS11でいうExtension)を使うこと ▪ 生成系AIを組み込むこと ▪ RESTや外部DB接続などで、外部システムと連携すること ▪ ODCのForgeを利用すること ▪ Excelなどでデータのインポート/エクスポートができること ▪ ネイティブモバイルもしくはPWAで作成すること ▪ Chartsを用いてグラフ表示をすること ▪ メールを送信できること ▪ ユーザプロファイルによってレスポンシブなインタフェースであること ▪ アプリ間で再利用できるライブラリを使用して一部のロジックを分離すること • UX/UI （20%） ▪ 直感的なユーザージャーニーになっているか ▪ 外観と操作性が快適であるか ▪ 一般的なUX/UIのベストプラクティスに則っているか • Innovation （20%） • Demo （20%） ▪ Max 5分 ▪ 言語は英語 ▪ アプリのウォークスルーを含んでいること Technicalが一番配点が高い やはり生成系AIを取り込むと評価されるか デモ動画の出来も採点される こんなにも明確に実装すべき内容が 提示されているのに驚いた
13. © 2023 NTT DATA Group Corporation 13 ハッカソン最終結果！ https://twitter.com/OutSystemsDev/status/1701652729381155144 上位チームがどんな問題に取り組んでいたか(抜粋) • 土地劣化や気候変動に対して農家を支援するアプリ • ボランティアや慈善寄付をしたいと考えている人向けアプリ • 困っている人たちに衣服などの物品寄付を支援するアプリ • 医療系のサンプル取得を支援するアプリ • フリーランスや零細企業を支援するアプリ
14. © 2023 NTT DATA Group Corporation 14 以上でハッカソンの概要説明は終了！ 私も参加したので、どんな感じで取り組んだか 聞いてくださいませm(_ _)m
15. © 2023 NTT DATA Group Corporation 15 参加したきっかけや目的 • 単純な興味 • 偶然Forumの投稿を見つけ、出てみたくなった • 自己研鑽 / OutSystems力向上 • チームビルディング • OutSystemsコミュニティバッジをゲットできる
16. © 2023 NTT DATA Group Corporation 16 チームメンバー紹介 会社のチームメンバーに声をかけて結成。 チーム名：shimaku-line 本日会場にいます！ 本日会場にいます！
17. © 2023 NTT DATA Group Corporation 17 どのように進めたか 1日 (金) 2日 (土) 3日 (日) 4日 (月) 5日 (火) 6日 (水) 7日 (木) 8日 (金) 22時： キックオフ • お題やルール発表 各自でODC の勉強 何を実装するかを 決めるために オフラインミーティング • アプリケーション実装 • プロジェクト説明文書作成 • デモ動画作成 08時： 提出期限 9月 提出に間に合わせるの、 かなりきつかった。。。
18. © 2023 NTT DATA Group Corporation 18 キックオフ キックオフ参加者がZoomで集合写真を撮影。 公開版では集合写真を削除。
19. © 2023 NTT DATA Group Corporation 19 お題決め チームメンバで議論し、LGBTQ問題に取り組むことに。LGBTQ問題に取り組むNPO団体を仮想。 チームコンセプト • どのような社会問題があるか • どのようなNPO団体があるか の一覧をChatGPTに作成してもらう 議論の末、 「LGBTQを理解し受け入れられる社会作りに貢献する」 となった。
20. © 2023 NTT DATA Group Corporation 20 実装したアプリケーション LGBTQへの理解を促進するアプリ。 持続可能な(みんなにメリットがある)形で LGBTQを理解する仕組みを考え、 アプリを実装。
21. © 2023 NTT DATA Group Corporation 21 実装内容抜粋 OpenAI連携 Domain-Driven Design(DDD)で設計し、 マイクロサービスアーキテクチャ(MSA)になることを意識した ODCはMSAを理解しないと 使いこなせないなと感じた
22. © 2023 NTT DATA Group Corporation 22 結果 • 総合順位：17 / 48 • Technical：6 / 48 • UX / UI：45 / 48 • Innovation：20 / 48 • Demo：36 / 48 ダッシュボードに掲載(20位以下のみ) 注力したところなので評価されて 良かった チームの弱点が明確に。。。
23. © 2023 NTT DATA Group Corporation 23 目的は達成されたか？ • 達成された！ • ODCで開発して、いろいろなことが学べた • だいたいOS11Reactiveと同じ • アーキテクチャにはMSAの考え方が必要 • External Logicの実装方法(Integration Studioが存在しない) • Forgeが少ない • チーム力向上にも繋がった • 資格試験のバウチャーがもらえた
24. © 2023 NTT DATA Group Corporation 24 苦労した点 • 英語 • キックオフや、運営とのやり取りはもちろん英語 • ドキュメントや動画も全て英語 • ChatGPT、Google翻訳、音読さん、をフル活用 • 稼働確保がキツい • 今回は業務時間外で実施 • 業務で取り組んだチームもいた気がする
25. © 2023 NTT DATA Group Corporation 25 02 OutSystemsとOpenAIの連携ノウハウ
26. © 2023 NTT DATA Group Corporation 26 OpenAI APIが提供するモデル https://openai.com/product https://platform.openai.com/overview # モデル名 概要 1 GPT 自然言語やプログラミング言語を、理解・生成する 2 DALL·E 自然言語から、リアルな画像やアートを生成する 3 Whisper 自然言語の音声を認識し、文字起こし・識別・翻訳する ︙ ︙ その他開発者向けAPI
27. © 2023 NTT DATA Group Corporation 27 【デモ】GPTとWhisperを使って、対話アプリを作ってみた ありがとう ①GPT GPTと対話(入力に対してGPTが返信) ②Whisper 喋った言葉を文字起こし ODC/OS11で実装 (デモはODCで実施)
28. © 2023 NTT DATA Group Corporation 28 実装概要(GPT) ① Client OutSystems Platform OpenAI ① Clientの入力などをインプットに、REST API(POST application/json)をリクエスト ② レスポンスを画面に表示 REST Consume (POST application/json)
29. © 2023 NTT DATA Group Corporation 29 実装概要(GPT) ② • 所感 • ODCとOS11のどちらでも実装可能 • APIドキュメントに従ってREST APIを実装すればOK • Forge”OpenAI Connector”もREST APIを実行していた • もし商用利用することを考えたとき、文字化けが心配 • 日本語で文字化けを確認 • curlなど別の手段でAPIを叩くと、文字化けしない • OpenAIとOutSystems Platformの文字コードの親和性が原因？ • BinaryDataToTextとTextToBinaryDataでエンコード • テストでは文字化けしなかったが、OpenAIのレスポンスの 全ての文字に対応できたかは不明
30. © 2023 NTT DATA Group Corporation 30 Whisperの実装について ① 本当はこの実装をやりたかったが、できなかった。。。 Client OutSystems Platform OpenAI ① ブラウザからClientのマイクを用いて録音 ③ レスポンスを入力フォームに代入 ありがとう ② 音声ファイルなどをインプットに、 REST API(POST multipart/form-data)をリクエスト REST Consume (POST multipart/form-data)
31. © 2023 NTT DATA Group Corporation 31 Whisperの実装について ② 録音は、JavaScriptのgetUserMedia()メソッドを用いて、端末のマイクを呼び出して実施 https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getUserMedia
32. © 2023 NTT DATA Group Corporation 32 Whisperの実装について ③ multipart/form-dataのRequestBodyに合わせるのに大苦戦したが、なんとかできた(OS11限定) ※ OutSystems Platform 11.19.0以上でmultipart/form-dataに対応 これより前のバージョンでも、Forge” Multipart/form-data”を使えばできると思われる ※ ODCはmultipart/form-dataに対応していない、関連Forgeもなし 問題：API仕様に従っているつもりなのに、エラーになってしまう 対策：curlコマンドだと成功するので、 リクエスト確認ツール(Burp)でcurlのリクエストの中身を分析 curlだと文字起こし成功 正常なリクエストの中身を確認し、OutSystemsで再現するように REST APIのパラメータ調整 ファイルを送っているつもりなのに、 入力チェックにひっかかる。
33. © 2023 NTT DATA Group Corporation 33 Whisperの実装について ④ 音声ファイルをOutSystemsを経由させると、Whisperが認識しなくなってしまう。解決せず。 Client OutSystems Platform OpenAI ありがとう REST Consume (POST multipart/form-data) • Whisperが対応している音声フォーマットになっていることを確認 • curlコマンドで成功する音声ファイルを使ってもダメ • 音声ファイルをOutSystems経由させると Wisperが認識しなくなってしまう!?ように見えちゃう • このエラーメッセージはOpenAIのGitHubのissueにも挙がっていた
34. © 2023 NTT DATA Group Corporation 34 実装概要(Whisper) ① ClientからOpenAIへ、JavaScriptを用いて直接APIを叩くようにした ※ OpenAIのAPI KeyがClientから丸見えで、セキュリティ上よろしくないです。真似しないでください。 Client OutSystems Platform OpenAI ① ブラウザからClientのマイクを用いて録音 ③ レスポンスを入力フォームに代入 ありがとう ②JavaScriptからREST API(POST multipart/form-data)をリクエスト
35. © 2023 NTT DATA Group Corporation 35 実装概要(Whisper) ② • 所感 • JavaScriptからでないと使えていないので、セキュリティ的にもちろん商用利用はNG • OutSystems Platformから音声ファイルを送るとエラーになる問題は現在も解析中 • 実装者側の修正か / OutSystems側の修正か / OpenAI側の修正か • OutSystemsのmultipart/form-data、使い方よく分からない • RequestBodyが一致したのも、何かいろいろイジってたらうまくいった • 使い方を体系化してほしい • ODCもmultipart/form-dataに対応してほしい • ForumにはForge” Multipart/form-data”を移植してという記事 • getUserMedia()を用いてマイクを呼び出すJavaScriptの実装は、 少しChatGPTを活用(ちゃんと調べないと実装できなかった) • Whisperでは翻訳もできるので、翻訳アプリとかも作ってみたい 社内GPT-4が提供されたので、早速使ってみた
36. © 2023 NTT DATA Group Corporation 36 最後に 【再掲】本日伝えたかったこと 1.「OutSystems Build for the Future Hackathon 2023」の概要 2.OutSystemsとOpenAIの連携ノウハウ • 交流会でいろいろ議論しましょう！ • 何か質問ありましたらぜひ声かけてください！！！ • Whisper使えている方、解決策教えてくださいm(__)m