M.E.A.N. Mit Trello und Zapier

Dieses Tutorial zeigt, wie Trello und Zapier integriert werden, um einen leistungsstarken Workflow zu erstellen, wodurch die Erstellung von Trello -Karten beim Hinzufügen neuer Benutzerdaten zu einer MongoDB -Datenbank automatisiert wird. Wir werden dies mit dem M.E.A.N. Stack und der Yeoman Generator generator-angular-fullstack.

Schlüsselkonzepte:

• Trello für Aufgabenverwaltung: Trello Excels bei Task Organization und bietet Funktionen wie Markdown -Support und Verknüpfungen.
• Zapier zur Automatisierung: Zapier verbindet Anwendungen, wobei die Workflows zwischen ihnen automatisiert werden.
• MongoDB -Datenspeicher: Wir verwenden MongoDB, um Benutzerdaten zu speichern und Aktionen in anderen Apps auszulösen.
• M.E.A.N. Stapelentwicklung: Die Anwendung verwendet MongoDB, Express.js, AngularJS und Node.js.
• yeoman Generator: generator-angular-fullstack vereinfacht die Anwendungserstellung.

Einrichten der Umgebung:

1. Installieren Sie den Generator: npm install -g generator-angular-fullstack, um den Yeoman -Generator zu installieren.
2. Erstellen Sie die Anwendung: Ausführen yo angular-fullstack und konfigurieren Sie sie so, dass Mongoose für die Datenmodellierung einbezogen wird.
3. MongoDB -Setup: Erstellen Sie eine MongoDB -Datenbank (z. B. unter Verwendung von MongoHQ oder einem ähnlichen Dienst) und ein Benutzerkonto dafür. Beachten Sie die Verbindungs ​​-URI, den Benutzernamen und das Passwort.

serverseitige Entwicklung:

1. Konfigurieren Sie die MongoDB -Verbindung: update server/config/development.js mit Ihrer MongoDB -Verbindung URI:

<code class="language-javascript">'use strict';

module.exports = {
  mongo: {
    uri: 'mongodb://<username>:<password>@<host>:<port>/<database>'
  },
  seedDB: true
};</database></port></host></password></username></code>

2. Erstellen Sie den Benutzer Endpunkt: generieren Sie einen Benutzerendpunkt mit yo angular-fullstack:endpoint user. Ändern Sie das Schema server/api/user/user.model.js so, dass die erforderlichen Felder (name, email, location, reason, message) enthalten sind.

<code class="language-javascript">var UserSchema = new Schema({
    name: String,
    email: String,
    location: String,
    reason: String,
    message: String
});</code>

clientseitige Entwicklung:

1. Erstellen Sie das Formular: Ändern Sie die client/app/main/main.html -Datei, um ein Formular mit Eingabefeldern für jedes Feld im MongoDB -Schema zu erstellen. Verwenden Sie ng-model, um die Eingangswerte an den Bereich zu binden.

2. Formulareingabe: In client/app/main/main.controller.js erstellen sendForm() $http.post /api/users

Zapier -Integration:

<code class="language-javascript">angular.module('yoTrelloApp')
    .controller('MainCtrl', function($scope, $http) {
        $scope.sendForm = function() {
            // ... (form data handling as before) ...
        };
    });</code>

1. Erstellen Sie einen neuen Zap: In Zapier erstellen Sie einen neuen Zap mit MongoDB als Trigger -App und Trello als Action -App.
2. Konfigurieren Sie den Auslöser: Stellen Sie den Auslöser auf "neues Dokument" fest und geben Sie Ihre MongoDB -Datenbank und die "Benutzer" -Kollektion an.
3. Konfigurieren Sie die Aktion: Stellen Sie die Aktion auf "Karte erstellen" in Trello fest. Zeichnen Sie die MongoDB -Felder auf die entsprechenden Trello -Kartenfelder (Titel, Beschreibung usw.). Verwenden Sie den Markdown in der Beschreibung für die Formatierung.

4. Testen Sie den ZAP: Testen Sie das ZAP, um sicherzustellen

Schlussfolgerung:

Dieses integrierte System bietet einen optimierten Workflow: Benutzer senden Daten über ein Formular, die Daten werden in MongoDB gespeichert und Zapier erstellt automatisch eine entsprechende Trello -Karte, wobei die Taskverwaltung automatisiert wird. Denken Sie daran, Platzhalterwerte in den Code -Snippets durch Ihre tatsächlichen MongoDB -Anmeldeinformationen und Trello -Board -Informationen zu ersetzen.

Das obige ist der detaillierte Inhalt vonM.E.A.N. Mit Trello und Zapier. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!