Let’s Give Your Realm-Powered Ionic Web App the Native Treatment on iOS and Android!
Rate this tutorial
is an open-source, easy-to-use local database that helps mobile developers to build better apps, faster. It offers a data synchronization service—MongoDB Realm Sync—that makes it simple to move data between the client and MongoDB Atlas on the back end. Using Realm can save you from writing thousands of lines of code, and offers an intuitive way to work with your data.
|Login in the Web App||Browsing Tasks|
Let’s build on what the Ionic team created for the web, and expand it by building a mobile app for iOS and Android using one of the best features Ionic has: the “Write Once, Run Anywhere” approach to coding. I’ll start with an iOS app.
To follow along this post, you’ll need five things:
- A macOS-powered computer running Xcode (to develop for iOS). I’m using Xcode 13 Beta. You don’t have to risk your sanity.
- Once you have your Realm app created, copy the Realm app ID from the MongoDB admin interface for Realm, and paste it into
src/App.tsx, in the line:
export const APP_ID = '<Put your Realm App Id here>';
APP_IDis set, run:
To add iOS capabilities to our existing app, we need to open a terminal and run:
This will create the iOS Xcode Project native developers know and love, with the code from our Ionic app. I ran into a problem doing that and it was that the version of Capacitor used in the repo was 3.1.2, but for iOS, I needed at least 3.2.0. So, I just changed
npm installto update Capacitor.
Now we have a new
iosdirectory. If we enter that folder, we’ll see an
Appdirectory that has a CocoaPods-powered iOS app. To run this iOS app, we need to:
- Change to that directory with
cd ios. You’ll find an
- Install all CocoaPods with
pod repo update && pod install, as usual in a native iOS project. This updates all libraries’ caches for CocoaPods and then installs the required libraries and dependencies in your project.
- Open the generated
App.xcworkspacefile with Xcode. From Terminal, you can just type
- Run the app from Xcode.
|Login in the iOS App||Browsing Tasks|
That’s it. Apart from updating Capacitor, we only needed to run one command to get our Ionic web project running on iOS!
How hard can it be to build our Ionic app for Android now that we have done it for iOS? Well, it turns out to be super-simple. Just
cdback to the root of the project and type in a terminal:
This will create the Android project. Once has finished, launch your app using:
In this case,
10.0.1.81is my own IP address. As you can see, if you have more than one Emulator or even a plugged-in Android phone, you can select where you want to run the Ionic app.
Once running, you can register, log in, and add tasks in Android, just like you can do in the web and iOS apps.
|Adding a task in Android||Browsing Tasks in Android|
The best part is that thanks to the synchronization happening in the MongoDB Realm app, every time we add a new task locally, it gets uploaded to the cloud to a MongoDB Atlas database behind the scenes. And all other apps accessing the same MongoDB Realm app can show that data!
are well known for their syncing capabilities. You change something in the server, or in one app, and other users with access to the same data will see the changes almost immediately. You don’t have to worry about invalidating caches, writing complex networking/multithreading code that runs in the background, listening to silent push notifications, etc. MongoDB Realm takes care of all that for you.
But in this example, we access data using the for React. Using this client, we can log into our Realm app and run GraphQL Queries—although as designed for the web, we don’t have access to the hard drive to store a .realm file. It’s just a simpler way to use the otherwise awesome with Realm, so we don’t have synchronization implemented. But luckily, Apollo GraphQL queries can automatically refresh themselves just passing a
pollIntervalargument. I told you it was awesome. You set the time interval in milliseconds to refresh the data.
useTasks.ts, our function to get all tasks will look like this, auto-refreshing our data every half second.
Adding automatic refresh is nice, but in mobile apps, we’re used to also refreshing lists of data just by pulling them. To get this, we’ll need to add the Ionic component
IonRefresherto our Home component:
As we can see, an
IonRefreshercomponent will add the pull-to-refresh functionality with an included loading indicator tailored for each platform.
To refresh, we call
doRefreshand there, we just reload the whole page.
Right now, we can swipe tasks from right to left to change the status of our tasks. But I wanted to also add a left to right swipe so we can delete tasks. We just need to add the swiping control to the already existing
IonItemSlidingcontrol. In this case, we want a swipe from the start of the control. This way, we avoid any ambiguities with right-to-left vs. left-to-right languages. When the user taps on the new “Delete” button (which will appear red as we’re using the danger color),
To delete the task, we use a GraphQL mutation defined in
In this post, we’ve seen how easy it is to start with an Ionic React web application and, with only a few lines of code, turn it into a mobile app running on iOS and Android. Then, we easily added some functionality to the three apps at the same time. Ionic makes it super simple to run your Realm-powered apps everywhere!
But this is not the only way to integrate Realm in your Ionic apps. Using Capacitor and our native SDKs, we’ll show you how to use Realm from Ionic in a future follow-up post.