【AppGyver】SAPハッカソンイベントでノーコード/ローコードアプリに触れてみた

この記事をSNSでシェア!

2022年9月30日

2022年6月にSAP様主催のLow-Code/No-Code SAPパートナーハッカソンイベントが開催されました。

このハッカソンにＫＹＯＳＯの若手メンバーで参加し、ノーコード/ローコード開発アプリ「AppGyver」を使用して、簡単なWebアプリを作成しました。

最近注目されている、ノーコード/ローコード開発アプリに触れる貴重な体験をしたので、この記事では、SAPの最新ツール「AppGyver」を開発時の画像を交えて、使用感や感じたこと、私たちがイベントにて作成した「モバイル版ログ収集」アプリ事例について記載していこうと思います。

SAP AppGyverとは？

AppGyverとは、ノーコード/ローコード開発アプリのことで、アプリのUI開発を直感的に行うことのできるツールです。

ドラッグ・アンド・ドロップでUIを作成できるので、プログラミング未経験者でも、アプリケーションの開発を行うことができます。

また、全ての機能を無料で利用できる上、SAPのプラットフォーム環境であるSAP BTP環境で利用することが可能です。

Low-Code/No-Code SAPパートナーハッカソンイベントとは？

Low-Code/No-Code SAPパートナーハッカソンイベントは、AppGyverを使用したアプリを作成して発表する、SAPパートナー会社対象のイベントです。

今回のイベントは、合計100名以上の方々が参加した、大規模なハッカソンイベントとなりました。

私たちは以下の目的で、私を含めた若手メンバー5名にて、イベントに参加することとしました。

SAPの新サービスである、AppGyverに対する知見・開発のノウハウを学ぶ
若手メンバーのみでの社外イベントへ参加・開発を行うことで、該当メンバーのエンジニアとしての成長を図る

今回私たちは、AppGyver+SAP BTP環境のサービスを絡めたアプリを作成するSAPソリューション拡張部門に参加しました。

次項からは、実際にApp Gyverを使用して感じたことを、記載していこうと思います。

AppGyverを使用して良かったところ

それでは、今回はじめてAppGyverを触り、ここが良い！と感じた点について簡単に説明していきます。

手軽にUIを開発することができる

AppGyverの魅力は、なんといってもコードをかかなくてもUIが作成できる部分です。

簡単なUIであれば、15分程度で作成することができます。作成もドラッグアンドドロップで直感的に行えます。

イベントもコードなしで定義することができる

AppGyverであれば、UIに定義したオブジェクトに対するイベントもノーコードで定義することができます。

こちらもドラッグアンドドロップで直感的に定義ができるようになっており、すぐにイベントも定義することができます。以下の画像では、ボタンを押した際のイベントを定義しています。

バックエンドとの疎通設定が簡単にできる

AppGyverでは、用意されている設定画面に値を入力していくだけで、APIの疎通設定が行えます。

また、設定画面でそのままスムーズに疎通の確認も行えます。

裏側との疎通設定は、未経験者には分かりづらい部分だと思うので、ポチポチとボタンを押していくだけで設定ができるのは、とても便利だと感じました。

開発した画面をスマホアプリからすぐ確認ができる

AppGyverにはスマホアプリがリリースされており、そのアプリを連携することで開発したUIを、リアルタイムにスマホから確認することができます。

今回のハッカソンにてＫＹＯＳＯでは、モバイル用のアプリを作成しました。その際、このアプリを用いることで、すぐに動作確認ができるので、効率的に開発を進めることができました。

AppGyverでの開発で苦労した部分

AppGyverはまだまだ開発途中ということもあり、どうしても対応ができていない部分がありました。

複数メンバーアカウントで1つの画面開発ができない

AppGyverでは、複数のアカウントで一つの画面の開発を行うことができません。

そのため複数人で一つの画面の開発を行う場合は、メンバー間で一つのアカウントを共有するなどの対応が必要となってしまいます。

今後、チーム開発機能やバージョン管理機能などが実装されるともっと便利になると感じました。

複雑なAPIリクエスト処理は向いていない

APIリクエストに関してもまだまだ実装が難しい部分がありました。

OData integrationのデータソース機能では、検索機能の部分一致検索や日時項目に対しての検索がうまくできませんでした。

また、データソースを定義するとSchemaを自動で定義してくれるのですが、定義されたデータの型を編集することができないため、別のデータ型にてパラメータ値を設定したいときに出来ないという問題もありました。

そのため、上記のような機能を実装するためには、標準機能での実装が難しく、結局ソースコードを書かなければなりませんでした。

開発アプリ概要

次に、実際に今回ハッカソンで作成した、アプリの内容をご説明していきたいと思います。

実際にAppGyverを使用して、”こんなアプリが開発できる一例”としてご覧いただければと思います。

今回、ＫＹＯＳＯでは、運用しているアプリで発生したログを、収集・参照・分析することができる「モバイル版ログ収集アプリ」を作成することになりました。

現状、SAPの”Application logging”というログ管理サービスでは、ログ保管期限が7日ですが、システムを運用する上で7日以前のログを確認したい場面は多々出てきます。

過去のログを確認することで、エラーの傾向を分析し、それに応じた対策が可能になるからです。

上記のようなご要望を実現するために、アプリの構想自体は、もともとＫＹＯＳＯ内で考えられていました。

さらに今回、AppGyverではモバイルアプリのUIを簡単に作成できるため、このアプリをモバイル版として作成することにしました。

モバイル版で開発を行った場合、アプリの機能として以下のメリットが生まれます。

外出先などでも、すぐにログを確認できること
エラーが発生した場合、アプリからPush通知を送ることで、すぐにエラーを検知できること

上記の理由より、AppGyverを用いて「モバイル版ログ収集アプリ」を開発することにしました。

今回作成したアプリのアーキテクチャは、以下の通りです。

ログ情報を保存するデータベースは、SAP HANAだとオーバースペックになることや費用のことを考え、 PostgreSQLを採用し、ODataサービスにはSAP CAPサービスを採用しました。

実装機能一覧

検索機能

一覧に表示させるログ情報を絞り込み、対象となるログ情報を検索する機能です。

分析画面

過去のエラー発生件数の分析画面です。どのような時期にエラーが発生しやすいかを視覚的に確認できます。ログのエラー分布が見られることで、上述にもある通り、エラーの傾向が分析でき、対策につなげやすくなると考え実装しました。 BTP環境に公開したUI5アプリケーション画面を、AppGyverのWebViewという機能にて呼び出し、アプリ内に映し出すことで実現しました。

ログ共有(Slack)機能

共有したいログの詳細画面で対応するボタンを押すことで、Slackアプリの設定したチャンネルにログ情報を送信できる機能です。エラーが発生した際や調べる必要のあるログを発見した際に、コピーペーストでいちいちログ情報を引用するのは非常に面倒な作業です。ボタン一つで情報をメンバーに共有ができれば便利だと思い、実装しました。

ログ内容のGoogle検索機能

ログ情報を抜き出して、ログ内容をGoogle検索できる機能も追加しました。日々の業務でログを触る機会の多いメンバーからの「ログメッセージを見ただけでは、内容がわからないこともある。Googleでメッセージの内容を検索することが多いので、そのような作業を簡単にできれば便利だ」という意見に基づき、実装しました。「Search」ボタンを押すことでGoogle画面が起動し、検索されます。

まとめ

今回はハッカソンイベントを通じて、AppGyverという新しいツールに触れる経験を積むことができました。

上記でまとめた通り、複雑な部分の開発は困難なところがあるものの、簡単なアプリであれば、すぐに作成できる非常に有用なアプリであると感じました。

今回AppGyverに触れ、得られた知見を研鑽・活用することで、開発や工数を抑えたアプリの開発等、ＫＹＯＳＯとしてお客様にご提案できる内容の幅を広げられるのではないかと思います。

今後は、得られた知見や経験を社内に波及できるよう努め、社内の知見領域の拡大・技術力のさらなる成長を目指していこうと思います！

ハッカソンイベントの結果としては、最終選考に残ることはできませんでしたが、他企業様の発表を見ることができたことや、注目されているノーコード/ローコードアプリに触れることもでき、非常に勉強になりました。

次の機会があれば今回よりもっとレベルの高い開発に挑戦し、より良い結果を目指したいと思います。

投稿者プロフィール

市村直也: 入社4年目です。SAP UI5を使用したWebアプリのUI開発を主に担当しています。

ブログ