AI application using Adalo and Zapier

Use no-code tools to create a mobile application and connect it with the Peltarion platform.

Have you built an AI model and are eager to apply it in real life? In this tutorial, you will learn how to create a mobile application with the no-code tool Adalo and connect it with the Peltarion platform through Zapier.

Person - Target audience: Intermediate
Clock - Estimated Time: - 40 minutes

You will learn to
Peltarion logo - Build a mobile application without coding.
Peltarion logo - Use connectors between applications.


What deployed AI model to use?

For this tutorial you need a deployed image classification model. You can get one using andy of these two ways:

  • Build and deploy your own model
    If you want to use your model, you must build an image classification model on the Peltairon Platform.
    We suggest you follow the first part of this tutorial, Let AI assess the quality of the road. It will guide you on how to build and deploy an image classification model.

  • Use a Peltarion model
    If you use our model, you will get everything you need (a URL and a Token) later in this tutorial.

Build a mobile app in Adalo

Go to adalo.com and create your account. Adalo is a no-code platform that allows you to build mobile and web apps. If you haven’t used it before, it’s time to give it a try.

Clone app

We’ve already created a prototype of a mobile app in Adalo that you will use in this tutorial. The name of the application is Smooth Roads. Follow the link to clone the app into your workspace.

Click Clone app

Note: If you get an error message, try to open our prototype in the same browser window as your Adalo but in a new tab.

Clone app button
Figure 1. Clone app button in the sharing screen of the Smooth Roads app in Adalo.

Now you have your copy of the application. Feel free to explore and modify it.

Manage databases

In the Adalo workspace, on the left side of the screen, click Database Database icon. You will see two databases: Users and Report.

In this app, you need the two databases to create a list of people who have logged into the app, create reports, and collect predictions from the Peltarion Platform.

Click the three dots Three dots icon to the right of the database name and then View/Edit Records. Scroll to the right to see the contents of the database.

The columns with road conditions (labels and probabilities) will be filled in automatically with prdediction data from the Peltarion platform.

Report database includes:

  • Name (automatically created field)

  • Image (one that user uploads)

  • Notes (optional for user)

  • Road condition (returned predited values from Peltarion)

  • User

  • Four types of road condition:

    • Good

    • Poor

    • Satisfactory

    • Very poor

  • Created

  • Updated

Create the first record in the Report database

  1. Click the Preview button to open a prototype app.

  2. Sign up to Smooth Roads app (you can use a fake email, such as test@test.com).

  3. Click Report a problem.

  4. Click Choose photo

    1. Download this photo and choose it in the prototype.

    2. Click Create report.
      You don’t need to wait for the timer. We’ll explain to you why you need it later.

  5. Close the prototype app.

  6. Check the content of the Report database.

    • Click the three dots Three dots icon to the right of the database name and then View/Edit Records.
      You should see your first record.

The first record
Figure 2. The first record in the Report database in Adalo

Get access to your app’s API key

To connect the Smooth Roads app to the Peltarion Platform, you will use the API to send and receive requests to Zapier. This is a premium feature in Adalo, but when we’re writing this tutorial you can sign up for a 14-day free trial to test the feature. Since you need the feature in this tutorial we recommend you try it out.

  1. Click Setting Gear setting icon on the left side of the screen

  2. Scroll down and click App Access

  3. Click Start integration pack trail

Your 14-day free trial starts right after you confirm the start of the integration pack.

Connect Adalo and Peltarion with Zapier

Zapier is a tool that connects your apps and moves information between them automatically without writing any code.

  1. Create an account on zapier.com.

  2. When you get in, you’ll be taken through a short survey by Zapier. You can skip some steps.

  3. In the dashboard view, click Create Zap.

Create Zap button

Connect Peltarion and Adalo through Zapier

1. Trigger. New record in Adalo

Create a new record in the Report database.

  • App Event:

    • In the search bar, find and choose Adalo.

  • Trigger Event:

    • Choose an event: New Record

  • Click Continue.

  • Click Sign in to Adalo:

    • Sign in with your email and password, and allow Zapier to access your Adalo account.

  • Click Continue.

  • Set up trigger:

    • App: Smooth Roads (or what you named your app).

    • Table: Report.

  • Click Continue.

  • Test trigger:

    • Click Test trigger
      In filename, you should see the name of the image that you uploaded when you created the first record in Adalo.

    • Click Continue.

2. Action GET with Webhook

In the second step, you will use Webhook to connect Adalo and Zapier.
Webhook is a premium feature, but you can try it for 7 days. Remember to cancel your trial if you don’t want to use Zapier Premium (we think it’s a great service :) Sidenote: We’ve found that if you have used the trial before you need to buy Zapier Premium.

Setup webhook
  • App Event:

    • In the search bar, find and choose Webhooks by Zapier

  • Action Event:

    • Choose an event: GET

  • Click Continue.

  • Set up action

    • URL: Copy and paste Host URL as described below.

    • Choose 1. Image URL: from the dropdown menu
      Add a ? at the end.

    • Query String Params: Copy and paste the Query String Params as described below.

Set up action step in Zapier
Figure 3. Set up action step in Zapier
  • Click Continue.

  • Click Test and Review: you should see “Test was successful!”

  • Click Turn on Zap.

Adalo image URL
  • Go to Adalo workspace.

  • Click Database Database icon.

  • Click View/Edit Records to open the Report database.

  • Click on a small image preview in the Image column.

  • Click View under the image.

View link
Figure 4. Uploaded image URL in Adalo

The image will be open in a separate browser window.

In the browser window you now have a URL to where the image is saved in the Adalo database!

Example:
https://adalo-uploads.imgix.net/ 6106c2d3c88ad18dcc87f33d9fcbad31aa95ba99c39347221199d39ede9dd604.jpg ? orient=&auto=compress

Where Host URL: is https://adalo-uploads.imgix.net/
Were Image URL is 6106c2d3c88ad18dcc87f33d9fcbad31aa95ba99c39347221199d39ede9dd604.jpg
Where Query String Params: is orient=&auto=compress

3. Action. Prediction in Peltarion

Click Plus sign Plus sign to add a new action.

  • App Event:

    • In the search bar, find and choose Peltarion.

  • Action Event:

    • Choose an event: Prediction

  • Click Continue.

  • Choose account:

    • Click Sign in to Peltarion

    • Select account (that is deployed model)

      • Copy and paste URL and Token from your own deployment you made in the tutorial Let AI assess the quality of the road,
        or

      • Try our deployment with:

        • URL: https://a.gcp-eu-west-1.platform.peltarion.com/deployment/b2842126-2af4-4588-8a4f-48881b9d4042/forward

        • Token: 8eb3ebd9-a6de-43df-a440-c1ed8dfd27ac

    • Click Yes, Continue.

  • Click Continue.

  • Set up action:

    • Photo:

      • Select 2. GET (Which is webhooks)

      • Select 2. File: (Exist but not shown)

  • Click Continue.

  • Test action:

    • Click Test & Review (when the Test is successful, it should return the prediction data about the image uploaded).

  • Click Turn on Zap.

4. Action. Update record in Adalo

Click Plus sign Plus sign to add a new action.

  • App Event:

    • In the search bar, find and choose Adalo.

  • Action Event: Update Record.

  • Click Continue.

  • Adalo account: Adalo.

  • Click Continue.

  • Set up action. For the following fields select:

    • App: Smooth Roads (where you want to save prediction from Peltarion).

    • Collection: Report (where you have information about the uploaded image).

    • Record ID: 1. New Record in Adalo 1. ID: 1

    • Road condition:
      3. Prediction in Peltarion
      3. Quality: poor

    • Good:
      3. Prediction in Peltarion
      3. Quality Class Probabilities Good

    • Poor:
      3. Prediction in Peltarion
      3. Quality Class Probabilities Poor

    • Satisfactory:
      3. Prediction in Peltarion
      3. Quality Class Probabilities Satisfactory

    • Very poor: 3. Prediction in Peltarion
      3. Quality Class Probabilities Very Poor

  • Click Continue.

  • Click Test & Review.

  • Click Turn on Zap.

Test your app

When all connectors are in place, it’s time to test the application.

Download the samples to test the model.

Go to the Adalo workspace and create a new record.

  1. Click Preview.

  2. You should already be logged in. Click Report a problem.

  3. Click Choose photo and upload a photo from the samples that you downloaded.

  4. Click Create report.

  5. Wait till the timer stops.
    The chain of tools you created needs time to process the information and show the final result. If you go directly to the next screen after submission, you will not see the prediction. You will be automatically sent to the report screen when the timer goes off.

Check if the result is correct. Under the reported image, you should see how the AI model assessed the condition of the road.

Report in the Smooth Roads application
Figure 5. Example of a report in the Smooth Roads application

Test the app with your smartphone

If you want to test the application on your smartphone, go to Adalo workspace and click Share. You will appear in a separate window where you find QR-code. Scan it to install the application.

Tutorial recap

Congrats if you reach this point and complete the tutorial! Good job!!

Now, you have mastered powerful no-code tools that allow you to build a working application from scratch. You know how to deploy a Peltarion model in Zapier and connect it with other applications such as Adalo.

Further reading

To consolidate your knowledge, try some other Peltarion tutorials.

  • Go through the Skin cancer detection tutorial and make it into an app.

  • Check out other tutorials that utilize another low-code tool, for example, Create a no-code AI app to learn how to build an app in Bubble to deploy your Peltarion Platform AI model.

Was this page helpful?
YesNo