Webアプリケーションデザイナは、便利なドラッグアンドドロップインターフェイスを備えたビジュアルビルダーです。それを理解するためにプログラミングを知る必要はありません-私たちのプラットフォームの他のノーコードツールのように、それは直感的です。

開始するには、 [Webアプリ]タブに移動します。プロジェクト内で作成されたすべてのアプリケーションが表示されます。ここでそれらを開いて、編集、削除、または新しいものを作成できます。

選択したアプリケーションを構成するには、プレビューをクリックします。

AppMaster.io Web Designer select web application

編集ウィンドウ

Webアプリケーション編集ウィンドウでは、外観、バックエンドとのデータ交換、およびいくつかの一般的なパラメーターをカスタマイズできます。

プロジェクトに関する情報フィールド(1)に、その名前が表示されます。設定に移動して共有し、APIドキュメントを開いて、Webアプリケーションの公開バージョンを確認することもできます。公開ボタン(2)を使用すると、プロジェクトを公開できます。WebアプリケーションデザイナおよびAppMaster.ioStudioの他のセクションで行ったすべての保存済み変更を適用します。

AppMaster.io Web Designer Interface

以下はアプリケーションの名前です(1)。下のタブ(2)は、アプリケーション設定とその承認および登録フォームの間の移行用です(これらは個別に構成されています)。

右側(3)では、構成ファイル(config.json)をエクスポートするか、デフォルト設定にリセットし、現在のWebアプリケーションの設定を開いて、加えた変更を(公開せずに)保存できます。

AppMaster.io Web Designer Components

コンポーネント

コンポーネント領域には、Webアプリケーションのインターフェイスを作成およびカスタマイズするために必要なブロックが含まれています。コンポーネントをインターフェイスに追加するには、マウスで画面のセクションの1つにコンポーネントをドラッグします。

コンポーネントは3つのグループに分けられます。

  1. 構造とメニュー項目の作成-ページとページグループを追加します。
  2. ページのマークアップとフォーム、ボタン、リスト、マップなどの追加。
  3. モーダル(ポップアップ)ウィンドウ。

AppMaster.io Web Designer Drag&Drop UI Components

コンポーネントの色は、追加できるセクションの色と一致します。たとえば、ページコンポーネントはメインメニュー用であり、モーダルはアプリコンポーネント用です。

コンポーネントのリストとその詳細な説明は、まもなくドキュメントシステムに追加されます。

セクション

アプリケーション(2)に少なくとも1つのページを追加すると、ページセクション(1)が表示されます。

Page Content Section Web Apps Builder AppMaster.io

ヘッダーのメインキャンバスの上(1)。 Webアプリケーションウィンドウの最上部のすべてのページに表示されます。ここでは、終了ボタンと戻るボタン、ロゴ、連絡先、言語スイッチャーなどを追加できます。

左側はメニュー(2)です。 「アプリコンポーネント(3)」セクションでは、アプリケーションのすべてのページで使用できるモデルを追加できます。モーダルは、それらをトリガーするイベントが発生するまでユーザーには表示されません。

以下は、ドラッグアンドドロップでページからコンポーネントをすばやく削除するための「ゴミ箱」(4)です(設定ウィンドウのゴミ箱アイコンをクリックすることもできます)。

AppMaster.io Web Designer Interface Sections

メインセクションの下には、ページコンポーネント(1)があります。ここで追加したモーダルは、現在のページでのみ使用できます。

一番下のセクションであるフッター(2)は、ヘッダーと同じように機能します。

AppMaster.io Web Designer Interface Section Footer

作業開始

最良の作業方法:AppMaster.ioでWebアプリケーションを作成する前に、そのレイアウトを検討し、バックエンドを設計します。その後、必要なコンポーネントを追加して、すぐにデータベースとビジネスプロセスにリンクできます。ノーコードプラットフォームに関する詳細情報は、ドキュメントにあります。設定の具体例は、ブログとYouTubeチャンネルにあります。