Email with Mailgun Sample App

Sending email from an app with Mailgun.

Sample app uses and demonstrates:

  • Ionic.
  • Server Code.
  • Invoking an external REST API.

🚧

Important Note!

Note that the option of creating new apps with the Ionic and Bootstrap frameworks was removed but we still support the projects that were created with them earlier.

App (UI)

To get the app UI:

  1. Create a new Ionic app based on the Blank template.
  2. Inside the App Builder, select CREATE NEW > From plugin. Under Appery.io Examples, select Email with Mailgun.
  3. Click the Import selected plugin button.
  4. Select Screen1_Mailgun_Email_API as the starter page and click Apply settings.

Backend

To get the app backend:

  1. Go to the Server Code Plugins page.
  2. Import the MailgunEmail plugin.

Mailgun Account

You also need to create a Mailgun account to get an API key to send emails. After you sign up for an account, you will need the following information:

  • Domain name in the form: sandbox123abc.mailgun.org.
  • API key

This information can be found on this page and then by clicking on the active domain.

Configuring the Server Code Script

Now, you need to configure the script.

  1. Open the Server Code script you have just imported.
  2. At the top of the script, set the domain values.
  3. Then set the API key value (line 20).

That's all you need to do to configure this script.

Testing the Script

It's a good idea to test the script and the Mailgun API to make sure it works.

  1. Switch to the Script parameters tab.
  2. Create the following three parameters and set them to test values:
    • to
    • subject
    • text
  3. Switch to the Run tab and click the Save and run button.

Connecting the App with the Backend

The last step is to connect the app with the backend.

  1. Inside the App Builder, open Services > MailgunEamil_service.
  2. In the Settings tab, you will see {servercode} in the URL. To replace the value with the script ID, in the Server Code script, switch to the API information tab. There you will see the script ID in the URL you need to use.
  3. Save all the changes.

Testing the App

You are now ready to test the app. Click the Test button in the App Builder to launch the app in the browser.