Build a Serverless Expo App Using MongoDB Realm and Cloudinary

Implement an annotation app that will leverage the camera feature in our mobile device.

Photo by Fahrul Razi on Unsplash

Introduction:

AWS has provided great services but they need your credit card info to create an account which is kind of a problem if you lived in a country where creating an International credit card is a PIA.

MongoDB Realm is to the rescue, no worries if you don’t have a credit card, they have all the features to make your app serverless and an excellent Daas platform.

Cloudinary: I wish I could know this bad boy before, it gives you 1GB of media storage for free and an outrageously simple API to upload your files compared to the AWS S3 bucket. Enough chit chat let's discuss what we will build in this tutorial.

Purpose:

In this tutorial, we will implement an annotation app that will leverage the camera feature in our mobile device.

The idea of the app came to my mind when i try to create an image recognition model on grocery item(you know the everyday thing you buy from the store).I have google to find a datasets which will be specific to my countries grocery item.But is is hard to find such kind of datasets.

App Infrastructure:

The above image shows a basic plan for our app.

• First, we will create an expo app that will use the camera feature of our mobile device to capture an image.
• Then we will upload the image to Cloudinary using their API. The Cloudinary will send us a JSON response if the image upload is successful
• After receiving the response we will label the image and then store the label image data to MongoDB using the Realm webhook API.

Prerequisite

1. Node.js — Version 16+ (any version above 13 will also work)
2. Expo CLI — (Installation guide)
3. Cloudinary Account
4. MongoDB Account
5. Basic understanding of React Native and Javascript

MongoDB

Before we start coding it's best to create our database and the realm webhook that will be used to handle our data from our mobile app to the database.

Disclaimer: In this tutorial, I am not going to show the logic behind each and every webhook that will be used in our app but it will be available on the GitHub repository.

Database Setup

• Create a free cluster and name the database as objectAnnotationwith a collection name as annotation.
• Here is the link if you don’t know how to create a MongoDB cluster.

MongoDB Realm Service

Click on the Realm tab on your MongoDB cluster account and click on the Create New App on the right side of the page.

Choose an appropriate app name and link to the database that was created before (for me it's GroceryApp).

After clicking the Create Realm Application button you will be redirected to your MongoDB realm app dashboard page.

From the sidebar, click on the navigation-link label Schema and then click on Add Collection Button to create the database model for the app (which is similar to creating a mongoose schema).

Select the database and the collection name from the dropdown menu and then click on the Add Collection button.

Now add fields to the schema and then click on the Review Draft and Deploy button.

After creating the schema now we can move on to creating the API endpoint.MongoDB Realm is a BaaS (Backend as a Service) which gives you a different type of server-specific service to create your data enable endpoint, we will choose HTTP webhook service which will give us a simple hook into the web interface of the backend.

From the sidebar, click on the navigation-link label 3rd party Services:

Then, click on the add service button to add a new service:

Initially, we have determined that we want an HTTP service, So we are going to choose an HTTP service and name the service as api (the naming convention is optional so you can name it anything):

When you create an HTTP Service, you’re enabling access to this service from Realm’s serverless functions in the form of an object called context.services. More on that later when we create a serverless function attached to this service. Name and add the service and you'll then get to create an Incoming Webhook. This is the process that will be contacted when your clients request data from your API.

Name the function whatever you like(for this tutorial we name it to create) and set the parameter as shown below:

MongoDB Realm Service Function

Let’s write the function which will be called when the webhooks receive an HTTP function, paste the code below in your function editor:

Testing the API

Now that we have set up the HTTP webhook it’s time to test the webhook hook, You can get the HTTP webhook API URL from
3rd party service ->ObjectAnnotationApi->-create->Setting->webhook Settings.

I am using Postman to test the API you can use your choice of API testing application.

Cloudinary Setup

At this point I hope you have already created a Cloudinary account, After login into your Cloudinary account, you will be greeted with a dashboard shown below.

Cloudinary requires 2 things to upload images to their service. They are

1. API URL
2. upload_preset

You can get the API URL by clicking the more button on the account details section and also your-cloud-name

Sample Api url :'https://api.cloudinary.com/v1_1/<your-cloud-name>/image/upload'

The second parameter required is called upload_preset. It is created by following the steps below:

• From the Dashboard, click Settings in the menu bar and select the Upload tab.
• Look for the section “Upload presets” and click “Add upload preset”.
• Enter the name of the upload preset. In the “Signing mode,” select the value “Unsigned” from the drop-down menu.
• Then click Save.

Testing the API (optional)

Test the Cloudinary API using Postman.

Expo App

UI Overview

The above image represents the UI of our app.

In this tutorial, we are only going to focus on the third and the forth screen of the app and are going to skip the design part.But you can explore the full app on my github repo.

Building the app

Execute the following command in your terminal to create an expo app:

expo init myApp
cd myApp

Package Installation
After creating the expo app install the following dependencies:

expo install expo-camera expo-checkbox expo-status-bar react-native-dotenv react-native-flexi-radio-button react-native-loading-spinner-overlay @react-native-async-storage/async-storage @react-navigation/native @react-navigation/native-stack

Initializing the build and the folder structure:

.
|-- App.js
|-- app.json
|-- assets
|-- babel.config.js
|-- LICENSE
|-- node_modules
|-- package.json
`-- yarn.lock

Lets Code

Create a new folder called component in the root directory.Inside the component folder create the following file.

|--component
|  |-- CameraScreen <==newly created 
|  |-- PreviewScreen <==newly created file
|  | --SuggestionList.js <==newly created file
|  | --api.js <==newly created file
|  | node_modules
|   package.json

Paste the following code to CameraScreen.js.

Paste the following code to PreviewScreen.js.

Paste the following code to SuggestionList.js.

Paste the following code to api.js.

Finally, paste the following code to App.js.

Project Directory: https://github.com/mirsahib/BanGIAA.

Conclusion

In this tutorial, we learned how to build serverless backend API and the schema in MongoDB Realm. We also learn how to use Cloudinary API and upload images to the cloud server using the expo app. Expo is a great tool to create a native mobile app even though it lacks some features compared to React Native app.

And there you have it. Thank you for reading.

More content at plainenglish.io. Sign up for our free weekly newsletter. Get exclusive access to writing opportunities and advice in our community Discord.