【NoCode NoLife】初めてAdaloを使ってみた。ただそれだけ篇

ちょっと時代にのりおくれた感がありますが、NoCodeを勉強中ですw😙
今回はadaloを使って作ってみたものを公開していくことにします⭕️

今回はただ使っただけの記事なので、全く面白さはありません🙇‍♂️

通常のサービス運営の傍ら新しいことをするのは大変💦
前回は、10分でPWAアプリが作れてしまうNoCodeの「glide」を使ってアプリを実装してみました😉

今回は、モバイルアプリとWebアプリの両方を簡単に開発することができるNoCodeツールの「Adalo」です❗️（adaloを覚えたら、Bubbleを覚える予定です）https://app.adalo.com/

Adaloとは？

Adaloは、NoCodeツールの中でも、UIパーツが豊富に用意されていて、モバイルアプリとWebアプリの両方を比較的簡単に作成することができてしまうツールです😏
プログラミングがわからなくても、自分の作りたいアプリの仕様にしたがってパーツをドラッグ＆ドロップするだけでシステム構築できるのでNoCodeツールを初めて利用する方などにオススメです☝️
外部サービスの連携に関しても、「Zapier」が連携されているので、決済系のStripeやGmail、GoogleSpredSheetなどの連携も簡単に行うことができます⭕️
もちろんアプリを作る上で必要となるデータベース機能もあります。しかもシンプルなので、データベースって何❓って人でも使うことができます😏

NoCodeツールの中でも素早くアイデアをプロダクトにすることができるので、とりあえず作ってみよう❗️といった時に使えるので、企業でサービスのプロトタイプを作るなんて時にめちゃくちゃ便利です👍

Adaloの使い方

AdaloのWebサイトへアクセスします⭕️

サービスのトップページにアクセスして「SING UP」をクリックします👆

メールアドレスとパスワードを入力し、利用規約にチェックをするだけですぐに利用を開始することができます👌

Adaloは、モバイルアプリとWebアプリの両方を作ることができます。ファーストステップとして、モバイルアプリかWebアプリかを選択する必要があります。今回はモバイルアプリを選択します👆

次にテンプレートを利用するか、テンプレートを使わずに0から始めるかを選びます。
作りたいサービスと類似するテンプレートを活用すれば、さらに素早くプロダクトを作ることができます⭕️

選べるモバイルアプリのテンプレートは、
・Blank（0から作る場合）
・Ordering（食品の宅配の注文をとるサービスの場合）
・Appointments（予約をとる場合）
・Directory（リストタイプのサイトを作りたい場合）
・Coaching（ホームページやポートフォリを作りたい場合）
・To−Do List（ToDoリストを作りたい場合）
・Chat（チャット機能を使ったサービスを作りたい場合）

今回は、「Chat」を選択して、Cahtアプリを作ってみます👆

アプリ名の入力と基本的なデザインとなるカラーを2種類選択します。
Primary Color:アプリ全体のメインカラー
Secondary Color:ボタンや背景色のカラー

たったのこれだけで、Adaloの初期設定が完了します👌
時間にしてたったの3分程度（はやい😲）

Chatのテンプレートを利用したので、Chatに必要な画面ができている。
Blankでアプリ開発を進めたとしても、ログイン画面や最低限必要となる機能を自動で生成してくれる⭕️

何も考えずに、PREVIEWボタンを押してみる👆
チャットアプリが起動され、メールアドレスとパスワードとニックネームを選び、プロフィール画像を入力します。事前に登録されてるテストユーザーを選んでチャットができてしまいました❗️

では早速使い方を覚えよう😏本当に基本的な説明だけしますね。全部説明すると大変なので💦

　基本動作その１：ベースとなる画面を追加します。スマホアプリを構成する画面を作ることができます。
①「＋」をクリック
②「ADD SCREEN」をクリック
③ 追加したい画面のパターンを選び、画面名を入力します
④ メインボードに選択した画面が追加されます
スクリーンコンポーネントはある程度用途ごとに用意されているので、利用すれば画面にコンポーネントを配置する手間を省くことができます。

追加したSCREEN（画面）にパーツを配置する
①「＋」をクリック
② 「ADD COMPONENT」をクリック
③ 「Button」をクリックして追加してみる
④  ボタンを配置したいと所までドロップ＆ドラッグで配置

とこんな感じで画面の追加とパーツの追加を行うことができます。
画面のレイアウトに関してはこのように配置します👌
（※実際にはアクションの設定や導線の設定が必要です）

データはどう扱うのか？

アプリを作るために必要な機能のデータベース😏
Adaloはデータベースを作ることが非常に簡単です👌
新規作成、データの追加・更新・削除という基本操作がマウスを操作するだけで完了します❗️

データベースを操作するには
①「ファイルマーク」をクリック
②「ADD COLLECTIONS」をクリックすることでテーブルを追加することができます

テーブルのリストの中から、例えばUsersを開くことでテーブルの項目が表示されます👀

テーブル名（Users）の横にレコード数が表示されています。「8Records」をクリックするとデータのレコードが表示されます😏
操作は簡単でレコードの追加・削除・更新ができます👌
さらにCSVのインポートやエクスポートもできるので、便利⭕️

画面も作れて、データベースの操作もわかった所で、次はデータベースの値を表示するにはどうしたら良いのか❓

表示したい画面を選択します👆
①「スクリーンアイコン」をクリックする
②「Profile」スクリーン名をクリックする

選択したスクリーンの中で、表示したいラベルと連携したいデータベースの項目を選択することで表示されます⭕️
このような流れで画面とデータベースを連携させることができます👍
（ここでは詳細に説明しませんが、フォームと連携することでレコードの追加や更新をするような操作と連携することができます）

アクションに紐づく条件設定

次に必要な基本動作は、ボタンを押した際のデータ更新や画面を遷移させるなどの条件設定が必要です😏

例えば、HOME画面の「＋」をクリックするとボタンに関する設定が左メニューに表示されます👆
このClick Actionという項目がボタンを押したあとの操作になります。

実際のクリックアクションの設定は、こんな感じで、スクリーン（Conversation）をStartさせるという設定です😏
基本的なアクションは、
・画面を遷移させる
・データを追加（新規作成）する
・データを更新する
・データを削除する
・他のサービスと連携する（Adaboは様々な外部サービスと連携ができるので、アクション機能を通じて連携させます）

簡単なまとめ

今回はチャットアプリというテンプレートを利用してどのような構造になっているか逆引き的に見てみました😏
構造がわかったので、きっと、こんな感じで作れていくはずだと思います👀
・サービスの構想を考える
・サービスに必要な画面を作る
・各画面上に必要なラベルを配置する
・ここで一度、モックをさわるような感覚でレビューをする
・画面遷移のアクションを設定し動きを付け加える
・動きに合わせて必要なデータベースとのやりとりのアクションを設定しデータの流れをコントロールする
・外部の連携するAPIと連携して何かする
これだけで、アプリが作れる気がします👍

どこまで無料で使えるの？

無料で使える機能は、
・アプリを作る機能は全て使うことができる
・完成したアプリを公開することができる
・それぞれのアプリで50レコードまで

有料でないと使えないもの
独自ドメインでの公開
GooglePlay や Appleストアでアプリとして公開することができます。

50レコード❓スプレッドシートか何かと連携しないと無料プラン内で作れるアプリって難しいのかなって印象🤔

アプリを作ったなら公開はしたいですよね😏となると最低でも50ドルは毎月払う覚悟が必要そうですね😭

Adaloがさわれただけでは、何の価値もない❗️

お遊びをしているわけではないので、ちゃんと自分のサービスで利用できるアプリにしてみます💪

比較のためにも、前回glideで作ったものと同じものを作ってみようかと思います💨

今回は本当に役に立たない内容でスミマセン🙇‍♂️

次回は「Adaloを使ってサービスで利用できるアプリを作るです（無料プランでw）」