Modèle de créateur d'applications par glisser-déposer
Construction d'interface utilisateur visuelle avec intégration de logique automatisée

Principaux enseignements

Aperçu

Un produit d'application à glisser-déposer nécessite une construction d'interface utilisateur visuelle, une cartographie de logique automatisée et une collaboration améliorée.

Ce modèle définit Utilisateur, Composant, Mise en page, et Logique avec des fonctionnalités automatisées et des options d'intégration afin que les équipes puissent mettre en œuvre des designs collaboratifs rapidement.

Pourquoi construire le backend de votre application glisser-déposer avec Back4app ?

Back4app vous offre des fonctionnalités de gestion de composants, de configuration de mise en page et d'intégration de logique, afin que votre équipe puisse se concentrer sur la création de grandes expériences utilisateur et l'amélioration de la fonctionnalité.

• •Gestion des composants et de la mise en page: Classe de composant pour les éléments visuels et classe de mise en page pour structurer les interfaces d'application supportent un design intuitif.
• •Cartographie logique automatisée: Définissez les comportements de l'application sans codage manuel ; laissez le backend gérer les intégrations.
• •Flexibilité en temps réel + API: Utilisez Live Queries pour des mises à jour dynamiques tout en gardant REST et GraphQL disponibles pour différents besoins clients.

Construisez et faites évoluer rapidement les fonctionnalités de votre application glisser-déposer avec une solution backend unique sur toutes les plateformes.

Avantages principaux

Un backend d'application par glisser-déposer qui vous aide à itérer rapidement sans sacrifier les performances.

Pile technique

Tout est inclus dans ce modèle de backend d'application glisser-déposer.

Diagramme ER

Modèle de relation d'entité pour le schéma backend de l'application glisser-déposer.

erDiagram
    User ||--o{ AppComponent : "owner"
    User ||--o{ Layout : "owner"
    AppComponent ||--o{ Layout : "components"
    User ||--o{ ActionLog : "user"
    AppComponent ||--o{ ActionLog : "component"

    User {
        String objectId PK
        String username
        String email
        String password
        String role
        Date createdAt
        Date updatedAt
    }

    AppComponent {
        String objectId PK
        String type
        String properties
        Pointer owner FK
        Date createdAt
        Date updatedAt
    }

    Layout {
        String objectId PK
        String name
        Array components FK
        Pointer owner FK
        Date createdAt
        Date updatedAt
    }

    ActionLog {
        String objectId PK
        Pointer user FK
        String actionType
        Pointer component FK
        Date timestamp
        Date createdAt
        Date updatedAt
    }

Flux d'intégration

Flux d'exécution typique pour l'authentification, l'intégration des composants, les mises à jour de mise en page et l'attribution de logique.

sequenceDiagram
  participant User
  participant App as Drag-and-Drop App Builder App
  participant Back4app as Back4app Cloud

  User->>App: Login
  App->>Back4app: POST /login
  Back4app-->>App: Session token

  User->>App: Create new layout
  App->>Back4app: POST /classes/Layout
  Back4app-->>App: Layout objectId

  User->>App: Add component to layout
  App->>Back4app: POST /classes/AppComponent
  Back4app-->>App: Component objectId

  User->>App: Log action
  App->>Back4app: POST /classes/ActionLog
  Back4app-->>App: ActionLog objectId

Lexique de données

Référence complète au niveau des champs pour chaque classe dans le schéma de l'application glisser-déposer.

Sécurité et autorisations

Comment la stratégie ACL et CLP sécurise les utilisateurs, les composants, les mises en page et la logique.

Schéma (JSON)

Définition de schéma JSON brute prête à être copiée dans Back4app ou à être utilisée comme référence d'implémentation.

{
  "classes": [
    {
      "className": "User",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "username": {
          "type": "String",
          "required": true
        },
        "email": {
          "type": "String",
          "required": true
        },
        "password": {
          "type": "String",
          "required": true
        },
        "role": {
          "type": "String",
          "required": true
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    },
    {
      "className": "AppComponent",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "type": {
          "type": "String",
          "required": true
        },
        "properties": {
          "type": "String",
          "required": true
        },
        "owner": {
          "type": "Pointer",
          "required": true,
          "targetClass": "User"
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    },
    {
      "className": "Layout",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "name": {
          "type": "String",
          "required": true
        },
        "components": {
          "type": "Array",
          "required": true
        },
        "owner": {
          "type": "Pointer",
          "required": true,
          "targetClass": "User"
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    },
    {
      "className": "ActionLog",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "user": {
          "type": "Pointer",
          "required": true,
          "targetClass": "User"
        },
        "actionType": {
          "type": "String",
          "required": true
        },
        "component": {
          "type": "Pointer",
          "required": true,
          "targetClass": "AppComponent"
        },
        "timestamp": {
          "type": "Date",
          "required": true
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    }
  ]
}

API Playground

Essayez les endpoints REST et GraphQL contre le schéma de l'application glisser-déposer. Les réponses utilisent des données fictives et ne nécessitent pas de compte Back4app.

Utilise le même schéma que ce modèle.

Ce que vous obtenez avec chaque technologie

Chaque stack utilise le même schéma de backend d'application et les contrats API de glisser-déposer.

Questions Fréquemment Posées

Questions courantes sur la création d'un backend d'application glisser-déposer avec ce modèle.