Using Mailchimp with Codenvy

Below are various different projects talking to Mailchimp API that you can create with Codenvy Factories:


This tutorial will explain the details of integrating the Mailchimp API into Codenvy. Mailchimp API allows your application to provide users with a mail subscription facility so that they can subscribe to the application’s mail list. The API also allows various other functions of which the one important one is creating campaign emails that will be sent to the subscription list. The explanation has been done with 3 very basic Java projects that makes use of the Mailchimp API through the Mailchimp Java library to explain some basic features provided by the API.

Before proceeding to the creation of the Java projects, please register at https://login.mailchimp.com/signup/ with your email id and this will generate keys which will be used for the integration. You can see your keys at https://us7.admin.mailchimp.com/account/api/ :

mailchimp_apikeys

The Mailchimp API has various methods to integrate with your application for various functionalities.

You can get more information about the API methods at http://apidocs.mailchimp.com/. This section has various sub sections such as Lists, Campaigns, and others explaining the usage of various API methods.

The first factory workspace source code is to explain the process of creating a mail subscription form in your application using the Mailchimp’s default format. This has been done using Javascript. Before you start on this, a list has to be created in your Mailchimp account to which the users would be subscribed :

mailchimp_newlist

Create the first Project

Login to your Codenvy workspace and create a WAR project named as ‘MailchimpSample’. This will have the following structure:

mailchimp_structure

Create pom.xml File

This project does not make use of servlets and the mailchimp java client library and so there is no maven dependencies required for this project :

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.codenvy</groupId>
  <artifactId>MailchimpSample</artifactId>
  <packaging>war</packaging>
  <version>1.0-SNAPSHOT</version>
  <name>MailchimpSample</name>
  <build>
    <finalName>MailchimpSample</finalName>
  </build>
</project>

Create index.jsp File

Your Codenvy project will have an index.jsp which will create the default Mailchimp subscription form and use javascript to subscribe the user to your Mailchimp account list.Below is a snippet of the code; the full source code is available in the factory workspace :

<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
  #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
  /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
     We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="http://abc.us7.list-manage.com/subscribe/post?u=cdfbc0a462eb42be7f130d84f&amp;id=7e33941d30" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
  <h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
  <label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
</label>
  <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
  <div id="mce-responses" class="clear">
    <div class="response" id="mce-error-response" style="display:none"></div>
    <div class="response" id="mce-success-response" style="display:none"></div>
  </div>  <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</form>
</div>

Build and Run Your first Project

Now you build and run your Codenvy project and the default mail subscription form will be displayed in the browser:
mailchimp_runapp

On entering a valid email address and submitting the form, the email address receives an email to confirm the subscription and on confirming the subscription, the email address gets added to your subscription list in your mailchimp account :

mailchimp_lists

The second factory workspace source code is to explain the process of creating a customised mail subscription form in your application and subscribe the user using the Mailchimp Java client library :

Create the second Project

Login to your Codenvy workspace and create a WAR project named as ‘MailchimpSample1’. This will have the following structure:

mailchimp1_structure

Create pom.xml File

To make use of the Mailchimp API using the Mailchimp Java client library, we need to create a customised Java struts form and so please update the pom.xml to include the struts jars and the ecwid-mailchimp jar into your project as Maven dependencies :

  <dependencies>
    <dependency>
      <groupId>org.apache.struts</groupId>
      <artifactId>struts2-core</artifactId>
      <version>2.2.3.1</version>
      <exclusions>
        <exclusion>
          <artifactId>tools</artifactId>
          <groupId>com.sun</groupId>
        </exclusion>
      </exclusions>
    </dependency>
    <dependency>
      <groupId>org.apache.struts</groupId>
      <artifactId>struts2-config-browser-plugin</artifactId>
      <version>2.2.3.1</version>
    </dependency>
    <dependency>
      <groupId>org.apache.struts</groupId>
      <artifactId>struts2-junit-plugin</artifactId>
      <version>2.2.3.1</version>
      <scope>test</scope>
    </dependency>
    <dependency>
      <groupId>commons-logging</groupId>
      <artifactId>commons-logging</artifactId>
      <version>1.1.1</version>
    </dependency>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.5</version>
      <scope>test</scope>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-mock</artifactId>
      <version>2.0.8</version>
      <scope>test</scope>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-core</artifactId>
      <version>2.5</version>
      <scope>test</scope>
    </dependency>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>servlet-api</artifactId>
      <version>2.4</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.0</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>com.ecwid</groupId>
      <artifactId>ecwid-mailchimp</artifactId>
      <version>2.0.0.0</version>
    </dependency>
  </dependencies>

This will include these jars in your project as follows:

mailchimp1_dependencies

Create Java class

Now, create a Java class named ‘MailChimpSample.java’ that will identify the mailing list in your account using your account API key and then subscribe the input email id to the mailing list. This is done with the Mailchimp Java library. All this is done inside the method execute() in the Java class:

 public String execute() throws Exception{

      ListsMethod listsMethod = new ListsMethod();
      listsMethod.apikey = "582e1882a42b13532c650b38dc4b7ad1-us7";
      ListsResult listsResult = mailChimpClient.execute(listsMethod);
      ListInformation data = listsResult.data.get(0);

      SubscribeMethod subscribeMethod = new SubscribeMethod();
      subscribeMethod.apikey = "582e1882a42b13532c650b38dc4b7ad1-us7";
      subscribeMethod.id = data.id;
      subscribeMethod.email = new Email();
      subscribeMethod.email.email = getEmail();
      subscribeMethod.update_existing = true;
      mailChimpClient.execute(subscribeMethod);

      mailChimpClient.close();

      setMessage("You have been successfully subscribed to our mailing list.");
      return "SUCCESS";
   }

Create index.jsp File

Your Codenvy project will have an index.jsp which will have the customised mail subscription form and on submitting the form, the jsp invokes the java class:

<%@taglib uri="/struts-tags" prefix="s" %>

<html>
<head>
<title>Mailchimp Sample</title>
</head>
<body>
  <h1>Please subscribe to our mailing list</h1>
  <center><s:form action="hello" >
        <s:textfield name="email" label="Email" />
        <s:submit />
    </s:form></center>
</body>
</html>

Your Codenvy project will have a success.jsp which will be invoked from the MailChimpSample class to display the response on the browser.

Create web.xml and struts.xml

Since this is a struts based project, so the struts mapping is defined in the web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app>
<filter>
    <filter-name>struts2</filter-name>
    <filter-class>org.apache.struts2.dispatcher.FilterDispatcher </filter-class>
</filter>
<filter-mapping>
    <filter-name>struts2</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

The struts.xml maps the form action:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
    <package name="default" namespace="/" extends="struts-default">
        <action name="hello" class="com.codenvy.MailChimpSample">
            <result name="SUCCESS">/success.jsp</result>
        </action>
    </package>
</struts>

Build and Run Your second Project

Now you build and run your Codenvy project and the customised mail subscription form will be displayed in the browser:
mailchimp1_runapp

On entering a valid email address and submitting the form, the email address receives an email to confirm the subscription and on confirming the subscription, the email address gets added to your subscription list in your mailchimp account.

The third factory workspace source code is to explain the process of creating a campaign for sending emails to your subscription list with a specific subject and body using the Mailchimp Java client library :

Create the third Project

Login to your Codenvy workspace and create a WAR project named as ‘MailchimpSample2’. This will have the same structure as the second project and the pom.xml will define the same dependencies as the second the project.

Create Java class

Now, create a Java class named ‘MailChimpSample.java’ that will identify the mailing list in your account using your account API key and then create a campaign for sending mails to the mailing list using ‘Options.java’ which defines the email sender address and the subject of the email and ‘Content.java’ which defines the body of the email. This is done with the Mailchimp Java library. All this is done inside the method execute() in the Java class:

  public String execute() throws Exception{

      ListsMethod listsMethod = new ListsMethod();
      listsMethod.apikey = "582e1882a42b13532c650b38dc4b7ad1-us7";
      ListsResult listsResult = mailChimpClient.execute(listsMethod);
      ListInformation data = listsResult.data.get(0);

      CampaignCreateMethod campaignCreateMethod = new CampaignCreateMethod();
      campaignCreateMethod.apikey = "582e1882a42b13532c650b38dc4b7ad1-us7";
      campaignCreateMethod.type = CampaignType.plaintext;
      campaignCreateMethod.options = new Options(data.id, "Test Campaign", "abc@xyz.com", "Codenvy", "Codenvy Users");
      campaignCreateMethod.content = new Content("This is a test campaign");
      String campaignId = mailChimpClient.execute(campaignCreateMethod);

      CampaignSendNowMethod campaignSendNowMethod = new CampaignSendNowMethod();
      campaignSendNowMethod.apikey = "582e1882a42b13532c650b38dc4b7ad1-us7";
      campaignSendNowMethod.cid = campaignId;
      mailChimpClient.execute(campaignSendNowMethod);

      setMessage("You have successfully created a campaign and sent it to recipients.");
      return "SUCCESS";
   }

Create index.jsp File

Your Codenvy project will have an index.jsp which submit the request to the Java class to create and send the campaign:

<%@taglib uri="/struts-tags" prefix="s" %>

<html>
<head>
<title>Mailchimp Sample</title>
</head>
<body>
  <h1>Please create a campaign</h1>
  <center><s:form action="hello" >
        <s:submit />
    </s:form></center>
</body>
</html>

Your Codenvy project will have a success.jsp which will be invoked from the MailChimpSample class to display the response on the browser

The web.xml and struts.xml will be same as the second project.

Build and Run Your third Project

Now you build and run your Codenvy project and the submit button will be displayed in the browser:
mailchimp2_runapp

On submitting the form, the java class creates the campaign email and all subscribers of the mailing list receive the campaign email.