【個人開発】NoCode開発ツール「Adalo」でタスク管理ツール「Trello」と連携した一問一答アプリを作った。

7074 ワード
Adalo 個人開発 Trello nocode Trello テキストリンク

みなさんは試験勉強ってどうしてますか？

僕が学生の頃は、単語帳を作ってスキマ時間にやるという勉強法をしていました。ただ、単語帳を作るのに時間をかけ過ぎて肝心の勉強ができていない…なんてことも結構ありました。笑

今回は、AWS資格試験の勉強をしていたときに『これってアプリで単語帳みたいに勉強できないかな？』と思い立ってから、NoCode開発ツール「Adalo」とタスク管理ツール「Trello」を使って一問一答アプリを作った話です！

■今回のアプリ「一問一答アプリ」

問題の一覧から解きたい問題をクリックすると、問題画面に遷移します。頭の中で解答した後、ボタンをクリックすると解答が表示されます。

問題はTrelloに作ります。
問題のカテゴリーごとにリストを作り、カードのタイトルに問題を入力、詳細説明に解答と解説を入力してあります。

adaloの有料プランを使うと外部APIと連携することができるので、APIで取得したデータをadaloのDBに保存して、画面上に表示するという流れです。今回は有料プランのトライアル期間内で作ったので無料です。

■なぜ作ったか

AWSの資格勉強をしており、普段からメモ感覚で使っていたTrelloに間違えた問題や後で振り返りたい問題をまとめていました。

最初の頃はTrello上で見直しをしていたのですが
『これらを使って単語帳みたいに勉強できないかな？』
『できればスマホでやりたい！』
と考え始めました。

コードを書いてWebアプリとして作ることも考えましたが、作るのに時間がかかりそうだったこと、問題の追加が面倒になりそうという考えが浮かびました。また、作るのに時間がかかり過ぎて、資格試験の勉強をやる時間が減ってしまうと本末転倒です。

そこで"出来るだけ短時間でシンプルに作る"ということで、前にアプリを作ったことがあったNoCode開発ツールの「adalo」を選びました。

↓そのときのQiita記事

どうやって作ったか

作り方はとてもシンプルです。

手順
1.Trello上に問題を用意
2.Trelloのキーとトークンを取得する
3.APIを叩いてレスポンスを確認
4.adaloの外部DBを作成＆TrelloのAPIと連携してカードを取得

1.Trello上に問題を用意

Trelloに問題を作成します。
問題と選択肢を『タイトル』へ、解答と解説を『説明』へ入力します。

2.Trelloのキーとトークンを取得する

TrelloのAPIを使うためのキーとトークンを取得します。

簡単に書くと、下記の2ステップです。
1.Trelloにログインした状態にする
2.URLへアクセスしてキーとトークンを取得

手順については下記サイトが画像付きでとても分かりやすいです。

3.APIを叩いてレスポンスを確認

取得したキーとトークンを使ってTrelloのAPIを叩いてみましょう。
postmanでもTalend API Testerでもいいので、お好みのAPIツールを使って下記URLを叩いてみます。

■ボード情報取得
https://trello.com/1/members/{userName}/boards?key={key}&token={token}&fields=name

{userName}：ログイン中のユーザー名
{key}：取得したkeyを入力
{token}：取得したtokenを入力

パラメータにfields=nameを指定するとフィルターをかけることができます。ここではnameを指定することでボードのidとnameを取得できます。

これでログイン中のユーザーが所有するボードの一覧がレスポンスで返ってくれば成功です。このとき、一問一答で表示したいボードのidは後から使うので、メモしておいてください。

4.adaloの外部DBを作成＆TrelloのAPIと連携してカードを取得

adaloの有料プランを使うと外部APIと連携して取得したデータをDBに保存することができます。今回は有料プランのトライアル(2週間)を使って、Trello APIから取得したカードの情報をadaloのDBへ保存します。

画像内の赤枠が外部APIから取得したデータを保存できるDBです。Trelloと連携するために外部DBを追加します。（キャプチャを撮った時点では有料プランのトライアルが終わっているので表示されていませんが、追加するときは「ADD COLLECTION」をクリックします。）

■ボード内のカード取得
https://trello.com/1/boards/{boardId}/cards?key={key}&token={token}

{boardId}：ボードのID
{key}：取得したkeyを入力
{token}：取得したtokenを入力

設定でTrelloのAPIを設定します。
ここでは、取得したいカードがあるボードIDを指定してデータを取得します。keyとtokenは「Query Param」でそれぞれ設定します。

adaloのDBに保存できたら後はドラッグ&ドロップでリストやボタンを配置して、画面遷移やボタンクリック時に解答を表示する、といった機能を作っていくだけです。

■こだわり

1.html表示&改行コードで見やすい！

Trelloのタイトル部分は改行できないので、問題と選択肢が1行になってしまって読みにくいという状態でした。

これはadaloの拡張で「html表示」を使うことができるので、Trello側で改行コード
を入れることで解決しました。他にも<h1>タグも使えるので、問題文に使って見やすくするということもできます。

2.見直したい問題は保存しておける！

『間違えたから後でもう一回解きたい！』
そのような問題を一覧で見直せる画面を作りました。

問題画面で右下の(＋)ボタンを押すと「Retry」リストに表示されます。不要になればRetryリストの(🗑)ボタンを押せば消えるようになっています。これで復習もカンペキです。

■有料プランが終わるとどうなるのか

adaloの有料プランは"2週間だけ"トライアルで使うことができます。
トライアルが終わると、新しく外部連携するDBが作れなくなるようです。既に作ったものについては今も使えているので現状、アプリの使用には問題なさそうです。

■まとめ

「解けた問題は済みリストに移動」「問題のカテゴリー分け」などやりたいことはたくさんありますが、こだわり始めるとキリがなさそうなので一旦はこれで完成です。

公開して他の人も使えるようにしたいと考えましたが、adaloで作ったアプリを公開するために必要な有料プランが月5,000円なのでちょっと手が出ないな…という感じです。プランが改定されることがあれば一般公開も検討したいです。

それでは！

参考サイト

・adalo
https://www.adalo.com/

・Trelloとは
https://trello.com/ja

TrelloAPI
https://developer.atlassian.com/cloud/trello/rest/api-group-actions/

【30分で動かすシリーズ】TrelloにAPIを使ってカードの起票や取得をしてみる
https://blog.serverworks.co.jp/tech/2016/05/16/trello-api/