ローコード開発プラットフォームのコア機能の設計-コンポーネントのカスタムインタラクションの実現

素晴らしいレビュー

序文

著者は最近Lowcodeプラットフォームを研究しており、多くの練習を行っています。私はページ視覚化プラットフォームの基本的な研究開発の方向性とソリューションを持っています。後でLowcodeプラットフォームの理解とソリューションの一部を共有し続けます。、およびエンタープライズアプリケーションレイヤーでいくつかの調査を行います。

テキスト

1.ローコードとは何ですか？ローコードの意味

最近、著者はアウトシステムのWebサイトでローコードプラットフォームを説明するより良い記事を読みました。ここで私は簡単な定義をしました：

Low Codeは、ドラッグアンドドロップインターフェイスを使用して直感的に完全なアプリケーションを作成するのに役立つ一連のツールです。ローコードプラットフォームは、数千行の複雑なコードや構文を記述する必要はありませんが、ユーザーは、最新のユーザーインターフェイス、統合、データ、およびロジックを備えた完全なアプリケーションを迅速かつ直感的に構築できます。

ローコードは、最小限の手動コーディングでアプリケーションをより高速に配信できるソフトウェア開発方法です。グラフィカルインターフェイスでビジュアルモデリングを使用してアプリケーションをアセンブルおよび構成することにより、開発者はすべてのインフラストラクチャをスキップし、これまで解決が困難であったシナリオを再実装できるため、開発者はビジネスの独自性に集中できます。

たとえば、開いているマスク製造工場を想像してみてください。自動化を伴うマシンはマスクの外観を決定しませんが、マスクの組み立てと配送プロセスをスピードアップします。これがローコードの役割です。

低コードは、製造業者をマスクするための組立ラインとは何かをソフトウェア化することです。困難で時間のかかる手動タスクを自動化することで、人々はより重要なことを行えるようになります。

市場に出回っているより一般的なローコード開発プラットフォームは次のとおりです。

Visual IDE：アプリケーションのUI、ワークフロー、およびデータモデルを視覚的に定義し、必要に応じて手書きのコードを追加するための環境。
さまざまなバックエンドまたはサービスを備えたコネクタ：データ構造の自動処理、保存、および取得。
Application Lifecycle Manager：テスト、ステージング、および本番環境でアプリケーションを構築、デバッグ、展開、および保守するために使用される自動化ツール。

より高度なシステム（OutSystemsなど）は、最新のクロスプラットフォームのエンタープライズモバイルおよびWebアプリケーションを作成するために必要なすべてのものを提供し、既存のチーム構造を補完する機能を備えています。次の図に示すように：

2.低コード開発プロセス

従来のソフトウェア開発プロセスは、多くの場合、基本的な要件の設計、製品の計画、フロントエンドとバックエンドのアプリケーション開発、そして最後にテストと展開に至るまでのプロセスを経ます。

低コードを使用すると、彼の開発プロセスは次のようになります。すべてのステップを非常に単純なドラッグアンドドロップで実装できるため、開発コストが大幅に削減され、開発者と製品ワーカーは研磨とコアビジネスにより集中できます。迅速な試行錯誤により、俊敏な開発が強力にサポートされます。

3.ローコードシステムの下で内部および外部システムの相互作用を実現する方法

ローコードプラットフォームを導入した後、ローコード開発プラットフォームで発生する主要な問題と解決策を実現するために、実際のビジネスシナリオに焦点を当て始めました。ここでは、H5ドアを例として取り上げ、最初にドアの操作インターフェイスを見てみましょう。：視覚化プラットフォームを使用する場合、表示ページの設計要件を満たすだけでなく、システム間の相互作用を実現する方法、基本要素の相互作用機能を実現する方法、植える方法など、自社のビジネスにも接続する必要があります。外部APIをインポートすると、データを企業などに流すことができます。これらの要件に対応する実際のシナリオは次のとおりです。

アプリに埋め込まれているウェブページは、表示するだけでなく、アプリと通信する必要があります
Webページは、ジャンプリンク、開いているポップアップウィンドウなど、ユーザー操作の基本的な対話機能を実装する必要があります。
企業が構成するフォームは、外部でデータを収集するときに、データの収集と分析のために独自の内部システムに流れ込むことを望んでいます。

著者は、上記のシナリオに対応するH5ドアのソリューションを提供します。

3.1アプリ内部およびアプリ側の通信実現に埋め込まれたWebページ

外部コンテナと通信するには、カスタムコーディング機能が必要です。そのため、作成者はnoCodeではなくLowCodeを使用します。より一般的なコード編集プラグインreact-codemirror2やreact-monaco-editorを使用するなど、多くの特定の実装方法があります。次に解決する必要があるのは、どのコンポーネントにこの種の対話機能が必要かということです。これがButtonコンポーネントです。効果は次のとおりです。これにより、真のコード自律性とコンテナ間通信を実現できます。react-codemirror2の使用については、著者はあなたの参考のために単にデモを書いた：

import {Controlled as CodeMirror} from 'react-codemirror2';
require('codemirror/mode/javascript/javascript');

<CodeMirror
  value={this.state.value}
  options={options}
  onBeforeChange={(editor, data, value) => {
    this.setState({value});
  }}
  onChange={(editor, data, value) => {
  }}
/>

もちろん、より多くの言語拡張をサポートしています。興味のある人はそれを学ぶことができます。著者はそれに基づいた簡単なコードエディタも実装しています。あなたはそれを学ぶことができます。

3.2ページ要素は、ジャンプリンク、開いているポップアップウィンドウなど、ユーザー操作の基本的な対話機能を実装します。

基本的に、どのビジュアル構築プラットフォームでもある程度のインタラクション機能が提供されます。これらのインタラクションは、ボタンやリンクなどのインタラクティブコンポーネントにバインドされることがよくあります。ここでは、ボタンコンポーネントのアプリケーションを示します。上記は3で一般的です。インタラクティブモード、すなわち：

ジャンプリンク
ポップアップウィンドウを開き、ポップアップウィンドウのコンテンツをカスタマイズします
カスタムインタラクション機能

著者はすでに上記の3番目の方法を紹介しているため、ここではポップアップインタラクションに焦点を当てます。一般的なポップアップインタラクションは、次のポップアップコンテンツをサポートする場合があります。

画像
テキストプロンプト
グラフィックプロンプト
形

まだまだたくさんのフォームがあります。これらのコンポーネントを一度に実装したい場合は、非常に大きな作業負荷になるため、ここで作成者は、リッチテキストエディタを設計しました。作成者は、実現するためのリッチテキストエディタを提供します。次の図に、ユーザーが任意のコンテンツフォームを定義できることを示します。携帯電話への影響は次のとおりです。対話を実現するには、インタラクティブなjson-schemaを定義する必要があります。ここで、著者は前の記事でH5ドアの特定の実装についても分析しました。 1つずつ紹介しますが、主にリッチテキストエディタを見ていきます。ここでは2つをお勧めします。

反応羽ペン
ブラフトエディター

3.3会社が構成したフォームは、外部でデータを収集するときに、データの収集と分析のために独自の内部システムに流れ込むことを望んでいます。

インタラクティブなアプリケーションでは、データの追跡および分析機能が重要です。フォームアンケートツールも多数あります。同様に、H5-Dooringは、フォームアンケートの統合ソリューションも提供します。ユーザーは、プラットフォーム上でカスタムアンケートを作成できます。また、データの収集と分析のために。プライベートドメインが必要なユーザーの場合、フォームのデータを独自の内部システムに流して自分で分析する必要があるため、理論的には、フォームの設計でユーザーが使用できるこの開発インターフェイスを提供する必要があります。、作成者は、この要件を達成するためにapiインターフェイスを公開します。ユーザーがapiインターフェイスを提供すると、ページはapiで指定されたアドレスに自動的に送信され、作成者はインターフェイスでクロスドメイン処理を実行し、ユーザーは対応するクロスドメインインターフェイスを提供するだけで済みます。コードは次のように実装されています。

if (api) {
    fetch(api, {
      body: JSON.stringify(formData),
      cache: 'no-cache',
      headers: {
        'content-type': 'application/json',
      },
      method: 'POST',
      mode: 'cors',
    });
  }else {
    req.post(`xxx/xxx`, formData)
}

それで、あなたは今日また知識がありますか？

やっと

上記のチュートリアルの作成者はH5-Dooringに統合されています。より複雑なインタラクティブ機能については、合理的な設計によって実現できます。自分で探索して学習することができます。

githubアドレス：H5エディターH5-ドア

オープンソースの投票入口：H5-Dooringに投票する

H5ゲーム、webpack、node、gulp、css3、javascript、nodeJS、キャンバスデータの視覚化、その他のフロントエンドの知識と実際の戦闘について詳しく知りたい場合は、「興味深いフロントエンド」で一緒に勉強して話し合い、フロントエンドの境界を一緒に探索してください。

参照：https：//www.outsystems.com/blog/posts/what-is-low-code/