Realm Serverless Platform Integration with No-Code Composer from AppGyver
Rate this article
We will be covering the following topics:
- Authentication and data permissions
- Data access from MongoDB Realm
- Integrating GraphQL
We always want to build simple, robust, and fast-growing applications. Together with technology, development methodologies evolve, helping us to build applications faster without all the unneeded boilerplate coding and allowing us to focus on the important aspects of our applications.
MongoDB Realm and AppGyver's Composer Pro are exactly the tools you need to build your Cross-Platform applications using as little code as possible while maintaining all the advantages of modern versatile applications.
In this tutorial, we will cover all needed aspects to get you going from Authentication routing to consuming/storing and reacting to your data changes.
It's important to note that both platforms have a generous free tier, so you can complete this tutorial and many more completely free of charge.
If you are new to either platform, I recommend watching the following tutorials before continuing:
- The main movies feed list.
- A movie details page, to be opened once we click on the movie and its comments.
On the AppGyver side, I will need to fix my created login page:
- Add any additional components like title and input fields.
Once successfully bound, the variable name will be presented on the fields (similar to the below picture).
On the Realm Application, I should enable the Email/Password provider by:
- Going to
Authentication Providers> Toggling
- Go to "DATA" on the upper toolbar for your AppGyver application.
- Click "ADD DATA RESOURCE" button > "REST API direct integration."
- Choose any meaningful Resource ID (eg. "Auth" or "User_Password_API").
- Since authentication requires a POST request, I have used the "Create Record" section and pointed it to the /login path. I also added a
If I wanted to implement a user registration flow, I would need to use the Administration API for a user creation. I created my test users through the UI.
Next, I've set up my schema. The request schema needs to be configured manually:
- When on the "Create Record" page, click the "Schema" tab and add two properties for the request schema:
- Once you run a "Test" call from the "Test" tab, you can set the "SET SCHEMA FROM RESPONSE" button to populate the response schema automatically.
The token and the
user_idwe get from the Realm authentication API will be needed later for our user-data interaction.
We are good to go with our username/password authentication. It's that easy!
First, I will amend the login view accordingly, having only a phone number input separated to a country code dropdown and a second field allowing only numbers.
The dropdown values can be constructed visually via the list of values binding type, or by inputting a formula.
- We will configure an HTTP service webhook (called
startLogin), which we can define to use a "SYSTEM" auth and method POST.
The webhook function will look something like the following (see comments for detailed code explanation):
Then, we create a new DATA REST API integration on our AppGyver application called
smsAuthwhich calls our
startLoginwebhook URL via the Create record (POST) method:
- Again, we will define the base URL as the path to our webhook service without the webhook function name.
- The "Create Record (POST)'' will be pointed to
startLoginwith query parameter
Now we will need to implement our login button logic:
- Once clicked, we will construct our
appVars.prefixCode + appVars.phoneNumberthrough a formula and bind it to the
phoneparameter for our
smsAuthcreate record box.
- When the "Create Record" is executed, we will take its response and mark the SMS Code component as visible.
If all goes well, you should get an SMS to the inputted number after the logic button is executed. Behind the scenes, the webhook has created the following document in
On the MongoDB Realm Application, I have enabled custom-function authentication.
authFuncis the following small function to authenticate a valid SMS token:
The function expects a
authCodein the request body, matching them with the values stored in the previous step. If a match is found, the function returns the user's
_idto the auth provider, thereby authenticating the user and, for example, returning a valid access token.
We can change our auth integration to point to the new URL:
We also need to change the request body to have phone and authCode instead of email and password. Now, when we call Create record for auth with the phone number and auth code inputted by the user, if the code is the one we sent to the user's phone, the authentication will return a 200 status code. If the response comes through the success output, we can log in our user.
MongoDB has always been known for its stunningly easy and robust way of querying, updating, and aggregating data with the flexible schema approach and built-in redundancy and scalability mechanics. With MongoDB Realm, we get a fully scalable and managed backend that utilizes the familiar MongoDB technology. Combining this with the state-of-the-art frontend produced by Composer brings about one heck of a powerful stack.
There are two main ways we can currently quickly consume data for our AppGyver application from MongoDB Realm.
With , we can define little microservices, which receive query parameters/headers and body data to perform reading or writing of data. Since we can quickly access any of the provided services, like our
mongodb-atlasinstance, we can use any of the available . Then we can respond with this array of documents or a single document back to our application.
First, I've defined an HTTP service called
MoviesAPIand an incoming webhook on method
GET. Since our API is public for all our users, I have used a
SYSTEMauthentication and toggled the
"Response with Result"on. Atlas Search currently also requires a
SYSTEMbase authentication for sensitive information to a webhook with a Secret or a payload signature with an authorization expression.
The code I've used for my
Movie searchwebhook body is:
Now, we integrate this webhook the same way we integrated the previous APIs: by defining a new REST API data resource and using the
Get collection (GET)method.
We can then define a data variable MovieSearchApp on our movies list page. We define a SearchTerm page variable and bind it to the data variable's Search input and a search field on our page. Now, whatever the user inputs in the search field gets stored in the variable, and when the data variable refresh loop triggers again, a new API call gets made with the updated search term.
To get the list of movies to show based on the data, I set the rating card component I created to repeat based on the data variable, binding each property to a field in my data (
ratingetc). For some properties, I used a formula to mangle the data into the correct format.
Now we have a full search engine connected to a MongoDB Atlas database through Realm webhooks, with beautiful, automatically reactive UI.
The same way we can define our
GETcollection, we can define a
"Create Record"API with a POST webhook service. In my application, I have defined a
CommentsAPIintegration, where in the POST section, I have placed the URL for a webhook called
UpsertComment, defined in MongoDB Realm.
Here is where MongoDB Realm permissions come to play. We will define our comment collection with a template of "Users can read all data, but write only their own data." Here is where the received
user_idwill also be useful as this will be added as the field name to distinguish user documents.
Now, when we set up our webhook, we will use the
Scriptbased authentication and set the executor as the provided
user_idin payload. Since we will store the provided payload as the comment object, we will also cover the needed collection rule.
The webhook function performs an upsert by the provided comment
ID, updating the record if it exists and creating a new one if nothing is found with the
ID. It also sets the
user_idwhich is linked from the authentication object we got from our "login" flow.
By wiring this integration up to our UI, we can now create new comments and update existing ones by simply calling the Create record function. Only users with correct
user_idcan edit their comments.
With the already defined rules on our collections, we can generate their schema, done automatically through the schema tab, and start consuming them right away.
The resulted generated schema will be automatically available under the GraphQL tab, for example, the Movie type:
The service is ready for use in our application flows. Since a POST method is required, we will run all our queries and mutations via the "Create Record" method and provide our headers and queries using a formula object. As an example, I have queried and populated my view with all movies from the 2000s and fetched their
runtime. Those can be automatically mapped to a data variable or directly into a UI attribute.
Developers might need some time to digest these concepts, but I am certain they will fall in love with it right after their first app.
Let’s Give Your Realm-Powered Ionic Web App the Native Treatment on iOS and Android!
Sep 16, 2022