So integrieren Sie MailChimp in eine JavaScript-Web-App

Bildquelle.

Wenn Sie ein Blogger, Publisher oder Geschäftsinhaber sind, der Content-Marketing betreibt, ist ein Newsletter ein Muss. In diesem Tutorial erfahren Sie, wie Sie einer einfachen JavaScript-App die Mailchimp-Integration hinzufügen. Sie erstellen schließlich ein Formular für Gastbenutzer, um einen Newsletter zu abonnieren.

Ich habe dieses Tutorial für einen Junior / Mid-Career-Webentwickler geschrieben. Das Tutorial setzt einige Grundkenntnisse in React, JavaScript und HTTP voraus.

Sie starten das Tutorial mit einer Boilerplate-App, fügen nach und nach Code hinzu und testen schließlich die Mailchimp-API-Integration.

Die Boilerplate-App besteht aus React, Material-UI, Next, Express, Mongoose und MongoDB. Hier erfahren Sie mehr über das Boilerplate.

Wie oben erwähnt, ist es unser Ziel, eine Funktion zu erstellen, mit der ein Gastbenutzer einen MailChimp-Newsletter abonnieren kann. Der Benutzer abonniert, indem er seine E-Mail-Adresse manuell einem Formular auf Ihrer Website hinzufügt. Hier eine Übersicht über den Datenaustausch zwischen Client (Browser) und Server:

  • Ein Benutzer fügt dem Formular seine E-Mail-Adresse hinzu und klickt auf Senden
  • Der Klick löst eine clientseitige API-Methode aus, die die E-Mail-Adresse vom Browser des Benutzers an Ihren App-Server sendet
  • Die clientseitige API-Methode sendet eine POST-Anforderung an eine eindeutige Express-Route
  • Die Express-Route leitet die E-Mail-Adresse an eine serverseitige API-Methode weiter, die eine POST-Anfrage an den Mailchimp-Server sendet
  • Die E-Mail-Adresse wurde erfolgreich zu Ihrer Mailchimp-Liste hinzugefügt

Im Einzelnen erreichen Sie am Ende dieses Lernprogramms Folgendes:

  • Erstellen Sie eine Abonnementseite mit einem Abonnementformular
  • Definieren Sie eine API-Methode namens subscribeToNewsletter () mit der Methode fetch ()
  • Express Route definieren '/ abonnieren'
  • Definieren Sie eine subscribe () - API-Methode, die eine POST-Anfrage an den Mailchimp-API-Server sendet
  • Testen Sie diesen Datenaustausch mit Postman und als Gastnutzer

Loslegen

Für dieses Tutorial verwenden wir Code, der sich im Startordner unseres Builderbook-Repos befindet. Wenn Sie keine Zeit haben, die App lokal auszuführen, habe ich diese Beispiel-App unter https://mailchimp.now.sh/subscribe bereitgestellt

So führen Sie die App lokal aus:

  • Klonen Sie das Builderbook-Repo auf Ihren lokalen Computer mit:
git clone git@github.com: builderbook / builderbook.git
  • Führen Sie im Ordner 1-start den Befehl yarn oder npm install aus, um alle in package.json aufgelisteten Pakete zu installieren.

Um Mailchimp API zu unserer App hinzuzufügen, installieren wir die folgenden Pakete und lernen sie kennen:

  • isomorphic-fetch
  • Body-Parser
  • anfordern

Beginnen wir mit dem Zusammenstellen der Abonnementseite. Sie lernen nicht nur die Mailchimp-API kennen, sondern auch Next.js, ein Framework für React-Apps.

Eine wichtige Funktion von Next.js ist das serverseitige Rendern für das Laden der ersten Seite. Weitere Funktionen sind Routing, Prefetching, Hot Code Reload, Code-Aufteilung und vorkonfiguriertes Webpack.

Seite abonnieren

Wir definieren eine Subscribe-Komponente als untergeordnetes Element der ES6-Klasse, indem wir extend verwenden.

Anstatt von:

const Subscribe = React.createClass ({})

Wir werden verwenden:

class Subscribe erweitert React.Component {}

Wir werden ReactDOM.render () oder ReactDOM.hydrate nicht explizit angeben, da Next.js beide intern implementiert.

Eine übergeordnete Struktur für unsere Abonnementseitenkomponente lautet:

importieren Reagieren von 'reagieren';
// andere einfuhren
class Subscribe erweitert React.Component {
  onSubmit = (e) => {
    // überprüfe, ob eine E-Mail fehlt, gib undefined zurück
    // Wenn eine E-Mail existiert, rufen Sie die subscribeToNewsletter () API-Methode auf
  };
render () {
    Rückkehr (
      // Formular mit Eingabe und Schaltfläche
    );
  }
}
Standard exportieren Abonnieren;

Erstellen Sie eine subscribe.js-Datei im Seitenordner von 1-start. Fügen Sie dieser Datei den obigen Code hinzu. Wir werden den Abschnitt // Sonstige Importe füllen, wenn wir gehen.

Unser Formular enthält nur zwei Elemente: (1) ein Eingabeelement für E-Mail-Adressen und (2) eine Schaltfläche. Da unsere Boilerplate-App in Material-UI integriert ist, verwenden wir TextField- und Button-Komponenten aus der Material-UI-Bibliothek. Fügen Sie diese beiden Importe zu Ihrer subscribe.js-Datei hinzu:

importiere TextField von 'material-ui / TextField';
importiere Button von 'material-ui / Button';

Fügen Sie die TextField- und Button-Komponenten in ein

-Element ein:


  

Wir senden Ihnen eine E-Mail, wenn ein neues Tutorial veröffentlicht wird:      

  

Sie können sehen, dass wir einige Requisiten sowohl an TextField- als auch an Button-Komponenten übergeben haben. Eine vollständige Liste der Requisiten, die Sie übergeben können, finden Sie in den offiziellen Dokumenten für TextField-Requisiten und Button-Requisiten.

Wir benötigen eine in TextField angegebene E-Mail-Adresse. Um auf den Wert von TextField zuzugreifen, fügen wir das ref-Attribut von React hinzu:

inputRef = {(ulme) => {
  this.emailInput = ulme;
}}

Wir greifen auf den Wert zu mit:

this.emailInput.value

Zwei Notizen:

  • Ref = "emailInput" wurde nicht verwendet, da die React-Dokumentation die Verwendung des Kontextobjekts this empfiehlt. In JavaScript wird dies verwendet, um auf ein Objekt im Kontext zuzugreifen. Wenn Sie Eslint ordnungsgemäß konfigurieren, wird für diese Regel eine Eslint-Warnung angezeigt.
  • Anstelle von ref haben wir inputRef verwendet, da die TextField-Komponente kein Eingabe-HTML-Element ist. TextField ist eine Komponente von Material-UI und verwendet anstelle von ref die Eigenschaft inputRef.

Bevor wir unsere onSubmit-Funktion definieren, führen wir unsere App aus und werfen einen Blick auf unser Formular. Ihr Code sollte an dieser Stelle so aussehen: pages / subscribe.js

importieren Reagieren von 'reagieren';
Kopf aus 'next / head' importieren;
importiere TextField von 'material-ui / TextField';
importiere Button von 'material-ui / Button';
{styleTextField} aus '../components/SharedStyles' importieren;
import withLayout from '../lib/withLayout';
class Subscribe erweitert React.Component {
  onSubmit = (e) => {
    // etwas Code
  };
render () {
    Rückkehr (
      
                    Abonnieren </ title>           <meta name = "description" content = "Beschreibung zum Indizieren von Bots" />         </ Head>         <br />         <form onSubmit = {this.onSubmit}>           <p> Wir senden Ihnen eine E-Mail, wenn ein neues Tutorial veröffentlicht wird: </ p>           <TextField             inputRef = {(ulme) => {               this.emailInput = ulme;             }}             type = "email"             label = "Ihre E-Mail-Adresse"             style = {styleTextField}             erforderlich           />           <p />           <Button variant = "raised" color = "primary" type = "submit">             Abonnieren           </ Button>         </ form>       </ div>     );   } }</pre><pre>Standard mit Layout exportieren (Abonnieren);</pre><p>Ein paar Anmerkungen:</p><ul><li>In Next.js können Sie den Seitentitel und die Beschreibung mit Head angeben. Sehen Sie, wie wir es oben benutzt haben.</li><li>Wir haben einen styleTextField-Stil hinzugefügt. Wir behalten diesen Stil in components / SharedStyles.js bei, damit er wiederverwendbar ist und in jede Komponente oder Seite importiert werden kann.</li><li>Wir haben die Subscribe-Komponente mit withLayout umschlossen. Die übergeordnete Komponente withLayout stellt sicher, dass eine Seite eine Header-Komponente erhält und beim ersten Laden serverseitig gerendert wird.</li></ul><p>Wir greifen auf die Seite Abonnieren über die Route / subscribe zu, da Next.js die Route für eine Seite aus dem Dateinamen der Seite im Ordner pages erstellt.</p><p>Starten Sie Ihre App mit dem Befehl yarn dev und rufen Sie http: // localhost: 8000 / subscribe auf</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1568376084007.png" /><p>Das Formular sieht wie erwartet aus. Versuchen Sie, die Werte zu ändern, die an verschiedene Requisiten der TextField- und Button-Komponenten übergeben wurden. Ändern Sie beispielsweise den Text für die Label-Requisite in Geben Sie Ihre E-Mail-Adresse ein und ändern Sie die Requisite für die Button-Variante in flach:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1568376085095.png" /><p>Bevor wir fortfahren, klicken Sie auf den Link Anmelden in der Kopfzeile. Beachten Sie den Ladevorgangsbalken oben auf der Seite. Wir haben diese Leiste mit Nprogress implementiert und werden sie anzeigen, während wir darauf warten, dass unser Code eine E-Mail-Adresse an eine Mailchimp-Liste sendet.</p><p>Im nächsten Schritt definieren wir die Funktion onSubmit. Der Zweck dieser Funktion besteht darin, die E-Mail-Adresse von TextField abzurufen, diese E-Mail-Adresse an eine API-Methode subscribeToNewsletter zu übergeben und die Methode dann aufzurufen.</p><p>Bevor wir subscribeToNewsletter (E-Mail) aufrufen, verhindern wir ein Standardverhalten unseres <form> -Elements und definieren die E-Mail:</p><ul><li>Verhindern Sie das Standardverhalten beim Senden von Formulardaten an einen Server mit:</li></ul><pre>e.preventDefault ();</pre><ul><li>Definieren wir eine lokale variable E-Mail-Adresse. Es hat den Wert this.emailInput.value, wenn sowohl this.emailInput als auch this.emailInput.value vorhanden sind, andernfalls ist es null:</li></ul><pre>const email = (this.emailInput && this.emailInput.value) || Null;</pre><ul><li>Wenn email null ist, sollte die Funktion undefined zurückgeben:</li></ul><pre>if (this.emailInput &&! email) {   Rückkehr; }</pre><p>Bisher haben wir:</p><pre>onSubmit = (e) => {   e.preventDefault ();</pre><pre>const email = (this.emailInput && this.emailInput.value) || Null;</pre><pre>if (this.emailInput &&! email) {     Rückkehr;   }</pre><pre>// subscribeToNewsletter anrufen (E-Mail) };</pre><p>Um unsere API-Methode subscribeToNewsletter (email) aufzurufen, verwenden wir das async / await-Konstrukt zusammen mit try / catch. Wir behandeln asynchrone Rückrufe, Promise.then und async / await ausführlich in unserem Buch.</p><p>Um async / await zu verwenden, stellen Sie einer anonymen Pfeilfunktion wie folgt async voran:</p><pre>onSubmit = async (e) =></pre><p>Wenn Sie subscribeToNewsletter (E-Mail) bereitstellen, sollte ein Promise zurückgegeben werden (und dies ist auch der Fall - wir definieren diese Methode später in diesem Lernprogramm mit der JavaScript-Methode fetch (), die ein Promise zurückgibt). Sie können warten, bis Sie den Newsletter abonnieren (E-Mail):</p><pre>warte auf subscribeToNewsletter ({email})</pre><p>Du kriegst:</p><pre>onSubmit = async (e) => {   e.preventDefault ();</pre><pre>const email = (this.emailInput && this.emailInput.value) || Null;</pre><pre>if (this.emailInput &&! email) {     Rückkehr;   }</pre><pre>Versuchen {     warte auf subscribeToNewsletter ({email});</pre><pre>if (this.emailInput) {       this.emailInput.value = '';     }   } catch (err) {     console.log (err); // eslint-disable-line   } };</pre><p>JavaScript wird an der Zeile angehalten, an der subscribeToNewsletter ({email}) erwartet wird. und fahren Sie erst fort, nachdem subscribeToNewsletter ({email}) eine Antwort mit einer Erfolgs- oder Fehlermeldung zurückgegeben hat.</p><p>Im Erfolgsfall klären wir unser Formular mit:</p><pre>if (this.emailInput) {     this.emailInput.value = '';   }</pre><p>Bevor wir unsere subscribeToNewsletter-API-Methode definieren, nehmen wir eine UX-Verbesserung vor. Verwenden Sie NProgress.start (); um das Laden der Leiste zu starten und NProgress.done () zu verwenden; Um das Laden der Stangen abzuschließen:</p><pre>onSubmit = async (e) => {   e.preventDefault ();</pre><pre>const email = (this.emailInput && this.emailInput.value) || Null;</pre><pre>if (this.emailInput &&! email) {     Rückkehr;   }</pre><pre>NProgress.start ();</pre><pre>Versuchen {     warte auf subscribeToNewsletter ({email});</pre><pre>if (this.emailInput) {       this.emailInput.value = '';     }</pre><pre>NProgress.done ();   } catch (err) {     console.log (err); // eslint-disable-line     NProgress.done ();   } };</pre><p>Mit dieser Änderung wird einem Benutzer, der ein Formular einreicht, die Fortschrittsanzeige angezeigt.</p><p>Der Code für Ihre Abonnementseite sollte wie folgt aussehen: pages / subscribe.js</p><pre>importieren Reagieren von 'reagieren'; Kopf aus 'next / head' importieren; importiere TextField von 'material-ui / TextField'; importiere Button von 'material-ui / Button'; importiere NProgress von 'nprogress';</pre><pre>{styleTextField} aus '../components/SharedStyles' importieren; import withLayout from '../lib/withLayout'; {subscribeToNewsletter} aus '../lib/api/public' importieren;</pre><pre>class Subscribe erweitert React.Component {   onSubmit = async (e) => {     e.preventDefault ();</pre><pre>const email = (this.emailInput && this.emailInput.value) || Null;</pre><pre>if (this.emailInput &&! email) {       Rückkehr;     }</pre><pre>NProgress.start ();</pre><pre>Versuchen {       warte auf subscribeToNewsletter ({email});</pre><pre>if (this.emailInput) {         this.emailInput.value = '';       }</pre><pre>NProgress.done ();       console.log ('keine Fehlerantwort empfangen');     } catch (err) {       console.log (err); // eslint-disable-line       NProgress.done ();     }   };</pre><pre>render () {     Rückkehr (       <div style = {{padding: '10px 45px'}}>         <Head>           <title> Abonnieren </ title>           <meta name = "description" content = "Beschreibung zum Indizieren von Bots" />         </ Head>         <br />         <form onSubmit = {this.onSubmit}>           <p> Wir senden Ihnen eine E-Mail, wenn ein neues Tutorial veröffentlicht wird: </ p>           <TextField             inputRef = {(ulme) => {               this.emailInput = ulme;             }}             type = "email"             label = "Ihre E-Mail-Adresse"             style = {styleTextField}             erforderlich           />           <p />           <Button variant = "raised" color = "primary" type = "submit">             Abonnieren           </ Button>         </ form>       </ div>     );   } }</pre><pre>Standard mit Layout exportieren (Abonnieren);</pre><p>Starten Sie Ihre App mit Fadenentwickler und stellen Sie sicher, dass Ihre Seite und Ihr Formular wie erwartet aussehen. Das Absenden eines Formulars funktioniert noch nicht, da wir die API-Methode subscribeToNewsletter () nicht definiert haben.</p><h3>subscribeToNewsletter API-Methode</h3><p>Wie Sie vielleicht im Importbereich von pages / subscribe.js bemerkt haben, definieren wir subscribeToNewsletter () unter lib / api / public.js. Wir haben subscribeToNewsletter () im Ordner lib abgelegt, um den universellen Zugriff zu ermöglichen. Dies bedeutet, dass diese API-Methode sowohl auf dem Client (Browser) als auch auf dem Server verfügbar ist. Wir tun dies, weil in Next.js der Seitencode beim ersten Laden serverseitig und beim nachfolgenden Laden clientseitig gerendert wird.</p><p>In unserem Fall wird diese Methode nur auf dem Client ausgeführt, wenn ein Benutzer im Browser auf eine Schaltfläche klickt, um subscribeToNewsletter () aufzurufen. Stellen Sie sich jedoch vor, Sie haben eine getPostList-API-Methode, die eine Liste von Blog-Posts abruft. Um eine Seite mit einer Liste von Beiträgen auf dem Server zu rendern, müssen Sie getPostList allgemein verfügbar machen.</p><p>Zurück zu unserer API-Methode subscribeToNewsletter (). Wie wir in der Einführung zu diesem Tutorial besprochen haben, besteht unser Ziel darin, einen Datenaustausch zwischen Client und Server herzustellen. Mit anderen Worten, unser Ziel ist es, eine interne API für unsere App zu erstellen. Deshalb nennen wir subscribeToNewsletter () eine API-Methode.</p><p>Der Zweck von subscribeToNewsletter () besteht darin, an einer bestimmten Route, die als API-Endpunkt bezeichnet wird, eine Anforderung an den Server zu senden und anschließend eine Antwort zu erhalten. Wir diskutieren HTTP und Anfrage / Antwort hier im Detail.</p><p>Um dieses Lernprogramm zu verstehen, sollten Sie wissen, dass eine Anforderung, die Daten an den Server übergibt und keine Daten zurück benötigt, mit der POST-Methode gesendet wird. Normalerweise enthält der Anfragetext Daten (in unserem Fall die E-Mail-Adresse).</p><p>Zusätzlich zum Senden einer Anfrage sollte unsere Methode subscribeToNewsletter () auf eine Antwort warten. Die Antwort muss keine Daten enthalten - es kann sich um ein einfaches Objekt mit einem Parameter {subscribed: 1} oder {done: 1} oder {success: 1} handeln.</p><p>Um sowohl eine Anfrage als auch eine Antwort zu senden, verwenden wir die Methode fetch (). In JavaScript ist fetch () eine globale Methode, mit der Daten über ein Netzwerk abgerufen werden, indem eine Anforderung gesendet und eine Antwort empfangen wird.</p><p>Wir verwenden das Paket isomorphic-fetch, das fetch () in unserer Node-Umgebung verfügbar macht. Installieren Sie dieses Paket mit:</p><pre>Garn hinzufügen isomorph-Fetch</pre><p>Hier ist ein Anwendungsbeispiel aus der README-Datei des Pakets:</p><pre>fetch ('// offline-news-api.herokuapp.com/stories') .then (Funktion (Antwort) { if (response.status> = 400) { neuen Fehler auslösen ("Ungültige Antwort vom Server"); } return response.json (); }) .then (Funktion (Geschichten) { console.log (Geschichten); });</pre><p>Verwenden Sie dieses Beispiel, um eine wiederverwendbare sendRequest-Methode zu schreiben, die path und einige andere Optionen verwendet, ein Anforderungsobjekt (Objekt mit Methoden-, Berechtigungsnachweis- und Optionseigenschaften) übergibt und die fetch () -Methode aufruft. fetch () nimmt path und das request Objekt als Argumente:</p><pre>asynchrone Funktion sendRequest (Pfad, Optionen = {}) {   const headers = {     'Inhaltstyp': 'application / json; Zeichensatz = UTF-8 ',   };</pre><pre>const response = warte auf Abruf (     `$ {ROOT_URL} $ {path}`,     Object.assign ({Methode: 'POST', Anmeldeinformationen: 'include'}, {Header}, Optionen),   );</pre><pre>const data = warte auf Antwort.json ();</pre><pre>if (data.error) {     neuen Fehler auslösen (data.error);   }</pre><pre>Daten zurückgeben; }</pre><p>Im Gegensatz zum Beispiel von isomorphic-fetch haben wir statt Promise.then unser bevorzugtes async / await-Konstrukt verwendet (zur besseren Lesbarkeit des Codes).</p><p>Object.assign () ist eine Methode, die aus drei kleineren Objekten ein neues Objekt erstellt: {Methode: 'POST', Anmeldeinformationen: 'include'}, {Header} und Optionen. Die Objektoptionen sind standardmäßig leer, es kann sich jedoch beispielsweise um die body-Eigenschaft der Anforderung handeln. Da wir eine E-Mail-Adresse übergeben müssen, wird in unserem Fall tatsächlich die Eigenschaft body verwendet.</p><p>Wie Sie möglicherweise anhand des Codes bemerkt haben, müssen wir ROOT_URL definieren. Wir können eine bedingte Logik für ROOT_URL schreiben, die NODE_ENV und PORT berücksichtigt. Der Einfachheit halber definieren wir diese als:</p><pre>const ROOT_URL = 'http: // localhost: 8000';</pre><p>Es ist Zeit, unsere subscribeToNewsletter-Methode mithilfe der sendRequest-Methode zu definieren:</p><pre>export const subscribeToNewsletter = ({email}) =>   sendRequest ('/ api / v1 / public / subscribe', {     body: JSON.stringify ({email}),   });</pre><p>Wie Sie sehen, übergeben wir {body: JSON.stringify ({email}),} als Optionsobjekt, um dem Hauptteil des Anforderungsobjekts eine E-Mail-Adresse hinzuzufügen.</p><p>Außerdem haben wir als Pfad / api / v1 / public / subscribe ausgewählt. Dies ist der API-Endpunkt für unsere interne API, die unserer Mailchimp-Liste eine Benutzer-E-Mail-Adresse hinzufügt.</p><p>Fassen Sie alles zusammen und der Inhalt der Datei lib / api / public.js sollte lauten: lib / api / public.js</p><pre>import 'isomorphic-fetch';</pre><pre>const ROOT_URL = 'http: // localhost: 8000';</pre><pre>asynchrone Funktion sendRequest (Pfad, Optionen = {}) {   const headers = {     'Inhaltstyp': 'application / json; Zeichensatz = UTF-8 ',   };</pre><pre>const response = warte auf Abruf (     `$ {ROOT_URL} $ {path}`,     Object.assign ({Methode: 'POST', Anmeldeinformationen: 'include'}, {Header}, Optionen),   );</pre><pre>const data = warte auf Antwort.json ();</pre><pre>if (data.error) {     neuen Fehler auslösen (data.error);   }</pre><pre>Daten zurückgeben; }</pre><pre>export const subscribeToNewsletter = ({email}) =>   sendRequest ('/ api / v1 / public / subscribe', {     body: JSON.stringify ({email}),   });</pre><p>Gute Arbeit an diesem Punkt zu erreichen! Wir haben unsere subscribeToNewsletter-API-Methode definiert, die eine Anforderung an den API-Endpunkt / api / v1 / public / subscribe sendet und eine Antwort erhält.</p><p>Starten Sie Ihre App mit Fadenentwickler, fügen Sie eine E-Mail-Adresse hinzu und senden Sie das Formular. In Ihrer Browserkonsole (Developer Tools> Console) wird der erwartete POST 404-Fehler angezeigt:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1568376086567.png" /><p>Dieser Fehler bedeutet, dass die Anforderung erfolgreich an den Server gesendet wurde, der Server jedoch nicht gefunden hat, was angefordert wurde. Dies ist das erwartete Verhalten, da wir keinen Servercode geschrieben haben, der eine Antwort an den Client sendet, wenn eine Anforderung an den entsprechenden API-Endpunkt gesendet wird. Mit anderen Worten, wir haben nicht die Expressroute / api / v1 / public / subscribe erstellt, die die POST-Anforderung verarbeitet, die wir mithilfe der subscribeToNewsletter-API-Methode gesendet haben.</p><h3>Express-Route / abonnieren</h3><p>Eine Express-Route gibt eine Funktion an, die ausgeführt wird, wenn eine API-Methode eine Anforderung vom Client an den API-Endpunkt der Route sendet. Wenn unsere API-Methode eine Anforderung an den API-Endpunkt / api / v1 / public / subscribe sendet, soll der Server diese Anforderung über eine Express-Route verarbeiten, die eine Funktion ausführt.</p><p>Sie können die Klassen express.Router () und syntax router.METHOD () verwenden, um Express-Routen basierend auf dem Benutzertyp in kleine Gruppen zu modularisieren:</p><pre>const router = express.Router (); router.METHOD ('API-Endpunkt', ...);</pre><p>Wenn Sie mehr erfahren möchten, lesen Sie die offiziellen Express-Dokumente zu express.Router () und router.METHOD ().</p><p>In diesem Lernprogramm verwenden wir jedoch anstelle der Modularisierung Folgendes:</p><pre>server.METHOD ('API-Endpunkt', ...);</pre><p>Fügen Sie den obigen Code direkt in unseren Hauptservercode unter server / app.js ein.</p><p>Sie haben bereits genügend Informationen, um eine einfache Expressroute zusammenzustellen:</p><ul><li>Die Methode ist POST</li><li>Der API-Endpunkt ist / api / v1 / public / subscribe</li><li>Durch das Schreiben von onSubmit und SubscribeToNewsletter kennen Sie eine anonyme Pfeilfunktion</li><li>Durch das Schreiben von onSubmit kennen Sie das try / catch-Konstrukt</li></ul><p>Stellen Sie all dieses Wissen zusammen und Sie erhalten:</p><pre>server.post ('/ api / v1 / public / subscribe', (req, res) => {   Versuchen {     res.json ({abonniert: 1});     console.log ('keine Fehlerantwort wird gesendet');   } catch (err) {     res.json ({error: err.message || err.toString ()});   } });</pre><p>Ein paar Notizen:</p><ul><li>Wir haben den Fehler geschrieben: err.message || err.toString () für beide Situationen: Wenn der Fehler eine Art von Zeichenfolge ist und wenn der Fehler ein Objekt ist.</li><li>Um unsere Express-Route zu testen, haben wir folgende Zeile hinzugefügt:</li></ul><pre>console.log ("keine Fehlerantwort wird gesendet");</pre><p>Fügen Sie die obige Express-Route nach dieser Zeile zu server / app.js hinzu:</p><pre>const server = express ();</pre><p>Es ist Zeit zu testen!</p><p>Wir empfehlen die Verwendung der Postman-App zum Testen eines Anfrage-Antwort-Zyklus.</p><p>Sehen Sie sich diese Momentaufnahme der Anfrageeigenschaften in Postman an:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1568376087778.png" /><p>Sie müssen mindestens drei Eigenschaften angeben (ähnlich wie bei der Erstellung der subscribeToNewsletter-API-Methode):</p><ul><li>Wählen Sie die POST-Methode</li><li>Geben Sie den vollständigen Pfad für den API-Endpunkt an: http: // localhost: 8000 / api / v1 / public / subscribe</li><li>Fügen Sie einen Content-Type-Header mit dem Wert application / json hinzu</li></ul><p>Stellen Sie sicher, dass Ihre App ausgeführt wird. Beginnen Sie es mit Garnentwicklung. Klicken Sie nun bei Postman auf die Schaltfläche Senden.</p><p>Bei Erfolg sehen Sie die folgenden zwei Ausgaben:</p><ol><li>Auf Postman wird angezeigt, dass die Antwort den Code 200 und den folgenden Text enthält:</li></ol><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1568376148972.png" /><p>2. Ihr Terminal druckt:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1568376150152.png" /><p>Gute Arbeit, Sie haben gerade eine funktionierende Expressroute geschrieben!</p><p>Zu diesem Zeitpunkt haben Sie gezeigt, dass zwei Ereignisse in Ihrer App erfolgreich ausgeführt wurden: Eine Anforderung wird gesendet und eine Antwort wird empfangen. Wir haben jedoch keine E-Mail-Adresse an eine Funktion innerhalb unserer Express-Route übergeben. Dazu müssen wir auf req.body.email zugreifen, da wir hier die E-Mail-Adresse beim Definieren der subscribeToNewsletter-API-Methode gespeichert haben:</p><pre>const email = req.body.email;</pre><p>Mit der ES6-Objektdestrukturierung wird es kürzer:</p><pre>const {email} = req.body;</pre><p>Wenn die lokale E-Mail-Variable nicht vorhanden ist, senden wir eine fehlerhafte Antwort und geben undefined zurück (beenden mit leerem Return):</p><pre>if (! email) {   res.json ({error: 'Email ist erforderlich'});   Rückkehr; }</pre><p>Ändern Sie auch die Anweisung console.log, um E-Mails auszudrucken.</p><p>Nach diesen Änderungen erhalten Sie:</p><pre>server.post ('/ api / v1 / public / subscribe', async (req, res) => {   const {email} = req.body;</pre><pre>if (! email) {     res.json ({error: 'Email ist erforderlich'});     Rückkehr;   }</pre><pre>Versuchen {     res.json ({abonniert: 1});     console.log (email);   } catch (err) {     res.json ({error: err.message || err.toString ()});   } });</pre><p>Probieren wir es aus. Öffnen Sie Postman und fügen Sie unserer Anfrage eine weitere Eigenschaft hinzu: body with value team@builderbook.org. Stellen Sie sicher, dass Sie das Rohdatenformat> JSON ausgewählt haben:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1568376151278.png" /><p>Stellen Sie sicher, dass Ihre App ausgeführt wird, und klicken Sie dann auf die Schaltfläche Senden.</p><p>Sehen Sie sich die Antwort auf Postman und die Ausgabe Ihres Terminals an:</p><ol><li>Der Postbote zeigt Loading ... an, endet aber nie</li><li>Das Terminal gibt einen Fehler aus: TypeError: Die Eigenschaft 'email' von undefined kann nicht gelesen werden</li></ol><p>Anscheinend ist die E-Mail-Variable undefiniert. Um die email-Eigenschaft von req.body zu lesen, benötigen Sie ein Dienstprogramm, das das body-Objekt einer Anforderung von Unicode in das JSON-Format dekodiert. Dieses Dienstprogramm heißt bodyParser. Weitere Informationen hierzu finden Sie hier.</p><p>Installieren Sie bodyParser:</p><pre>Garn Körper-Parser hinzufügen</pre><p>Importiere es nach server / app.js mit:</p><pre>bodyParser aus 'body-parser' importieren;</pre><p>Stellen Sie den JSON-BodyParser auf dem Server bereit. Fügen Sie die folgende Zeile direkt nach const server = express () hinzu. und vor Ihrer Expressroute:</p><pre>server.use (bodyParser.json ());</pre><p>Eine Alternative zur Verwendung des externen bodyParser-Pakets ist die Verwendung der internen Express-Middleware express.json (). Entfernen Sie dazu den Importcode für bodyParser und ersetzen Sie die obige Codezeile durch:</p><pre>server.use (express.json ());</pre><p>Wir sind bereit zu testen. Stellen Sie sicher, dass Ihre App ausgeführt wird, und klicken Sie auf die Schaltfläche Senden bei Postman.</p><p>Sehen Sie sich die Antwort auf Postman und Ihr Terminal an:</p><ol><li>Postbote gibt erfolgreich aus: "abonniert": 1</li><li>Das Terminal hat diesmal keinen Fehler, sondern gibt Folgendes aus: team@builderbook.org</li></ol><p>Großartig, jetzt ist der Anfragetext dekodiert und in der Funktion der Expressroute als Requests verfügbar.</p><p>Sie haben die erste interne API erfolgreich zu dieser App hinzugefügt! Der Datenaustausch zwischen Client und Server funktioniert wie erwartet.</p><p>Innerhalb der Express-Route, die wir zuvor geschrieben haben, möchten wir eine Abonnement-Methode aufrufen und warten, die eine POST-Anfrage von unserem Server an Mailchimp sendet. Im nächsten und letzten Abschnitt dieses Tutorials werden wir die Abonnementmethode diskutieren und beschreiben.</p><h3>Methode subscribe ()</h3><p>Wir haben Code für den ordnungsgemäßen Datenaustausch zwischen unserem Server und dem Browser eines Benutzers geschrieben. Um jedoch die E-Mail-Adresse eines Benutzers zu einer Mailchimp-Liste hinzuzufügen, müssen wir eine Server-zu-Server-POST-Anfrage senden. POST-Anfrage von unserem Server an den Mailchimp-Server.</p><p>Um eine Server-zu-Server-Anfrage zu senden, verwenden wir das Anfragepaket. Es installieren:</p><pre>Garn hinzufügen Anfrage</pre><p>Wie bei jeder Anforderung müssen wir herausfinden, welcher API-Endpunkt und welche Anforderungseigenschaften enthalten sein sollen (Header, Body usw.):</p><ul><li>Erstellen Sie eine server / mailchimp.js-Datei.</li><li>Anfrage importieren.</li><li>Definieren Sie request.post () (POST-Anforderung) mit den folgenden Eigenschaften: uri, headers, json, body und callback.</li></ul><p>server / mailchimp.js:</p><pre>Anfrage von 'Anfrage' importieren;</pre><pre>asynchrone Funktion exportieren abonnieren ({email}) {   const data = {     email_address: email,     Status: "abonniert",   };</pre><pre>neues Versprechen abwarten ((lösen, ablehnen) => {     request.post (       {         uri: // diskutiert werden         Überschriften: {           Akzeptiere: 'application / json',           Berechtigung: // zu besprechen,         },         json: wahr,         Körper: Daten,       },       (Err, Response, Body) => {         if (err) {           ablehnen (err);         } else {           Entschlossenheit (Körper);         }       },     );   }); }</pre><p>Alle Eigenschaften sind selbsterklärend, aber wir sollten uns mit uri (oder API-Endpunkt) und Authorization-Header befassen:</p><p>1. uri. Weiter oben in diesem Kapitel haben wir http: // localhost: 8000 / api / v1 / public / subscribe als API-Endpunkt ausgewählt. Wir hätten jede Route für unsere interne API auswählen können. Die Mailchimp-API ist jedoch extern. Daher sollten wir in der offiziellen Dokumentation nach dem API-Endpunkt suchen, der einer Liste eine E-Mail-Adresse hinzufügt. Lesen Sie mehr über die API, um Mitglieder zu einer Liste hinzuzufügen. Der API-Endpunkt ist:</p><pre>https://usX.api.mailchimp.com/3.0/lists/{LIST_ID}/members</pre><p>Region usX ist eine Subdomain. Führen Sie die folgenden Schritte aus, um die Unterdomäne für einen API-Endpunkt zu ermitteln:</p><ul><li>Melde dich an oder melde dich bei Mailchimp an</li><li>Gehen Sie zu Konto> Extras> API-Schlüssel> Ihre API-Schlüssel</li><li>Ihr API-Schlüssel sieht möglicherweise aus wie xxxxxxxxxxxxxxxxxxxxxxxxxx-us17</li></ul><p>Das heißt, die Region ist us17 und Ihre App sendet Anfragen an die Mailchimp-Subdomain:</p><pre>https://us17.api.mailchimp.com/3.0/lists/{LIST_ID}/members</pre><p>Die Variable LIST_ID ist die Listen-ID einer bestimmten Liste in Ihrem Mailchimp-Konto. Gehen Sie folgendermaßen vor, um List ID zu finden:</p><ul><li>Gehen Sie in Ihrem Mailchimp-Dashboard zu Listen und klicken Sie auf den Listennamen> Einstellungen> Listenname und Standardeinstellungen</li><li>Suchen Sie den Abschnitt List ID</li><li>Holen Sie sich den Wert xxxxxxxxxx aus diesem Abschnitt, es ist Ihre LIST_ID</li></ul><p>2. Autorisierungsheader. Wir müssen unseren API_KEY im Authorizationheader an den Mailchimp-Server senden. Dies teilt dem Mailchimp-Server mit, dass unsere App berechtigt ist, eine Anfrage zu senden. Weitere Informationen zum Autorisierungsheader finden Sie hier (headers.Authorization). Syntax für den Autorisierungsheader:</p><pre>Genehmigung:</pre><ul><li>In unserem Fall:</li></ul><pre>Autorisierung: Grundlegende apikey: API_KEY</pre><p>Der API_KEY muss base64-codiert sein. Folgen Sie diesem Beispiel.</p><p>Nach dem Kodieren:</p><pre>Genehmigung: `Basic $ {Buffer.from (` apikey: $ {API_KEY} `) .toString (‘ base64 ’)}`</pre><p>So finden Sie API_KEY:</p><ul><li>Gehen Sie in Ihrem Mailchimp-Dashboard zu Konto> Extras> API-Schlüssel> Ihre API-Schlüssel</li><li>Ihr API-Schlüssel sieht möglicherweise aus wie xxxxxxxxxxxxxxxxxxxxxxxxxx-us17</li></ul><p>Wo werden listId- und API_KEY-Werte gespeichert? Sie können alle Umgebungsvariablen in einer .env-Datei speichern und mit dem Paket dotenv verwalten. Um jedoch in diesem Tutorial den Überblick zu behalten, fügen wir Werte direkt zu unserer Datei server / mailchimp.js hinzu:</p><pre>const listId = 'xxxxxxxxxx'; const API_KEY = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx-us17';</pre><p>Stecken Sie die obigen Code-Schnipsel ein:</p><pre>Anfrage von 'Anfrage' importieren;</pre><pre>asynchrone Funktion exportieren abonnieren ({email}) {   const data = {     email_address: email,     Status: "abonniert",   };</pre><pre>const listId = 'xxxxxxxxxx';   const API_KEY = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx-us17';</pre><pre>neues Versprechen abwarten ((lösen, ablehnen) => {     request.post (       {         uri: `https://us17.api.mailchimp.com/3.0/lists/$ {listId} / members /`,         Überschriften: {           Akzeptiere: 'application / json',           Autorisierung: `Basic $ {Buffer.from (` apikey: $ {API_KEY} `) .toString ('base64')}`,         },         json: wahr,         Körper: Daten,       },       (Err, Response, Body) => {         if (err) {           ablehnen (err);         } else {           Entschlossenheit (Körper);         }       },     );   }); }</pre><p>Denken Sie daran, echte Werte für listId und API_KEY hinzuzufügen.</p><h3>Testen</h3><p>Es ist Zeit, den gesamten MailChimp-Abonnementfluss zu testen.</p><p>Wir haben unsere subscribe-Methode aus server / mailchimp.js exportiert, diese Methode jedoch nicht in die Express-Route unter server / app.js importiert / hinzugefügt. Um dies zu tun:</p><ul><li>In server / app.js importieren mit:</li></ul><pre>{subscribe} von "./mailchimp" importieren;</pre><ul><li>Fügen Sie der Express-Route ein async / await-Konstrukt hinzu, sodass wir die subscribe-Methode aufrufen und warten. Ändern Sie den folgenden Codeausschnitt wie folgt:</li></ul><pre>server.post ('/ api / v1 / public / subscribe', async (req, res) => {   const {email} = req.body;   if (! email) {     res.json ({error: 'Email ist erforderlich'});     Rückkehr;   }</pre><pre>  Versuchen {     warte auf Anmeldung ({email});     res.json ({abonniert: 1});     console.log (email);   } catch (err) {     res.json ({error: err.message || err.toString ()});   } });</pre><p>Wir konnten wait for Subscribe verwenden, da diese Methode ein Versprechen zurückgibt. Erinnern Sie sich an die Definition von subscribe - es hat eine Zeile mit dem neuen Promise ().</p><p>Fügen wir der onSubmit-Funktion eine console.log-Anweisung aus pages / subscribe.js hinzu. Öffnen Sie die Datei pages / subscribe.js und fügen Sie console.log wie folgt hinzu:</p><pre>Versuchen {   warte auf subscribeToNewsletter ({email});</pre><pre>if (this.emailInput) {     this.emailInput.value = '';   }      NProgress.done ();   console.log ('E-Mail wurde erfolgreich zur Mailchimp-Liste hinzugefügt'); } catch (err) {   console.log (err); // eslint-disable-line   NProgress.done (); }</pre><p>An dieser Stelle können wir das Testen mit Postman überspringen. Starten Sie stattdessen unsere App, füllen Sie das Formular aus, senden Sie das Formular ab und überprüfen Sie, ob die E-Mail zur Mailchimp-Liste hinzugefügt wurde. Außerdem sehen wir die Ausgabe unserer Browserkonsole.</p><p>Starten Sie Ihre App mit Fadenentwickler. Gehen Sie zu http: // localhost: 8000 / subscribe. Sehen Sie sich die leere Liste in Ihrem Mailchimp-Dashboard an:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1568376152396.png" /><p>Füllen Sie das Formular aus und klicken Sie auf Abonnieren. Aktualisieren Sie die Seite mit der Mailchimp-Liste:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1568376153517.png" /><p>Und die Browserkonsole druckt:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/chinthaka/1568376154723.png" /><p>Falls Sie die App nicht lokal ausführen, können Sie sie in der App testen, die ich für dieses Lernprogramm bereitgestellt habe: https://mailchimp.now.sh/subscribe. Sie erhalten eine Test-E-Mail, um zu bestätigen, dass die MailChimp-API funktioniert hat.</p><p>Boom! Sie haben gerade zwei leistungsstarke Fähigkeiten erlernt: das Erstellen interner und externer APIs für Ihre JavaScript-Webanwendung.</p><p>Wenn Sie dieses Lernprogramm abschließen, sollte Ihr Code mit dem Code im 1-End-Ordner übereinstimmen. Dieser Ordner befindet sich im Tutorial-Verzeichnis unseres Builderbook-Repos.</p><p>Wenn Sie diesen Artikel nützlich fanden, sollten Sie in Betracht ziehen, unserem Github-Repo einen Stern zu verleihen und unser Buch zu lesen, in dem wir dieses und viele andere Themen ausführlich behandeln.</p><p>Wenn Sie ein Softwareprodukt erstellen, lesen Sie unsere SaaS-Boilerplate und Async (Teamkommunikationsphilosophie und -tool für kleine Teams von Softwareingenieuren).</p></div><div class="neighbor-articles"><h4 class="ui header">Siehe auch</h4><a href="/item/sometimes-the-grass-really-is-greener-on-the-other-side-and-how-to-tell-the-difference-5f9277/" title="Manchmal IST das Gras auf der anderen Seite wirklich grüner (und wie man den Unterschied erkennt)">Manchmal IST das Gras auf der anderen Seite wirklich grüner (und wie man den Unterschied erkennt)</a><a href="/item/how-to-save-money-in-2018-high-sarcasm-alert-75d61e/" title="So sparen Sie 2018 Geld * Hochsarkasmus-ALARM *">So sparen Sie 2018 Geld * Hochsarkasmus-ALARM *</a><a href="/item/how-to-avoid-crypto-scam-f35ed0/" title="Wie vermeide ich Krypto-Betrug?">Wie vermeide ich Krypto-Betrug?</a><a href="/item/how-to-solve-the-custody-problem-on-crypto-exchanges-604348/" title="So lösen Sie das Sorgerechtsproblem bei Krypto-Börsen">So lösen Sie das Sorgerechtsproblem bei Krypto-Börsen</a><a href="/item/how-to-use-sound-classification-with-tensorflow-on-an-iot-platform-4092be/" title="Verwendung der Klangklassifizierung mit TensorFlow auf einer IoT-Plattform">Verwendung der Klangklassifizierung mit TensorFlow auf einer IoT-Plattform</a></div></main><div class="push"></div></div><footer style="height:50px">chinthaka.org<!-- --> © <!-- -->2019<!-- --> <a href="https://ar.chinthaka.org/item/how-to-integrate-mailchimp-in-a-javascript-web-app-e47be2" title="https://chinthaka.org">chinthaka.org</a></footer></div></div></div><script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script><script> window.cookieconsent.initialise({ "palette": { "popup": { "background": "#eaf7f7", "text": "#5c7291" }, "button": { "background": "#56cbdb", "text": "#ffffff" } }, "showLink": false }); </script><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script> (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-3845662922897763", enable_page_level_ads: true }); </script></body></html>