App (UI)

To get the app UI:

Create a new jQuery Mobile app based on the Blank template.
Inside the App Builder, select CREATE NEW > From plugin. Under Appery.io Examples, select Email with SendGrid.
Click the Import selected plugin button.
Select sendgrid as the starter page and click Apply settings.

Backend

To get the app backend:

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

Give the key a name and then check Full Access for API Key Permissions selection:

Click Create & View. The generated key will be shown on the next page. You should copy and save this key.

Now, you need to configure the script.

Open the Server Code script you have just imported.
Find line #21, fine api_key and replace it with the key you created above.

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

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

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

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

Inside the App Builder, open Services > SendGridEmail_service.
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.
Save all the changes.

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

You can also easily test the app directly on the device by using the Appery.io Tester App

More help resources on our YouTube channel: