Manage and preview content of your mobile app in web browser with real time updates

This article will show you how to preview your mobile app in the browser. User engagement of app can decrease over a period of time if new content is not pushed and not updated regularly in the app.
App markets are growing internationally and today users from various demographics are using apps. There are different target audiences among a user set too. Different content is targeted for different audiences.
One needs to always accommodate texts and different language features. Some languages may just offer a symbol which translates to a whole sentence in english. But an app should always look good. There can be content limitations like a paragraph on the screen should only be fixed to a number of lines so that it still looks pleasing to the eye and not a clutter. Often the people responsible for pushing the content don’t know how it is going to look in the app. And final result can turn out to be unexpected or ugly.
So, the motivation behind this article is to create a minimalistic content management system in which a person can view how his/her app looks before pushing the content.

An alternate solution to this is to create an exact replica of the mobile app as a responsive web app. Send the data (content) in query params and parsing it at the web app end. But a responsive web app can never perfectly emulate the different mobile device screens.

The core technologies used in this article are:

Obviously you can also learn how to integrate firebase with nodeJS and flutter through this article. So, let's get started!

The first step will be to create a nodeJS backend for our web application.

Create a backend directory:

Add required packages to that directory:

Create the folder structure and files:

Go to console.firebase.google.com and create a new project

When you see the firebase SDK configuration like this, click on continue to console

Now go your created project and open the settings of the registered app. You will see the firebase configurations like this

Create environment variables in your .env file

Create and export config in /config.js

Create express.js server in /index.js

Connect firebase database with app in /db.js

Create person model as person.js in models folder: models/person.js

Create person controller with CRUD methods as personController.js in controllers folder: controllers/personController.js

Create api routes for the controllers in routes/personRoutes.js

Go to firebase cloud firestore. And setup a test database in firestore.

Now test your apis using postman

The next step is to create our mobile app

We will be using Flutter based mobile app. Pre-requisite is that flutter should be installed on your machine. You can create your android/ios native apps too.

The reasons I used flutter are:

  • Obviously a cross platform code.
  • Very fast development with hot reloads and painting of the page in milliseconds.
  • Seamless integration of the flutter app with Firebase SDK (both android and ios).
  • Native performance.

Now create your app

Now go to firebase project settings and click on Add app

Select ios/android. I will be using android here.

Now register app using the same package name by which you have created the app i.e. mobile_end. It is important to use the same package name

Register the app and download the google_services.json file.

Follow the steps mentioned in Add Firebase SDK.

Now we will add the cloud firestore to this app. Add the following dependencies to pubspec.yaml

Now let's create our user model in user.dart

I modified my main.dart to display our users

Run this app in simulator and try changing the data in either firestore or through your api. The changes will be reflected immediately! Magic!

The next step is to create an account on appetize.io

Appetize can run native mobile apps in your browser. You can embed your mobile app in the webpage using an iFrame in your HTML. All you need is a publicKey that is generated when you upload your debug build on appetize.

Appetize provides great support embedding your mobile app. e.g.

  • Different mobile platforms and devices
  • Cross document messaging
  • App permissions
  • Custom launch pages
  • Playback events of the emulator

So let's create our debug build of the mobile app using this command. Your can create your ios build too.

Sign up for appetize and go to upload link

Select your debug apk and upload it. Note that debug apk is always located under debug folder.

A public key as shown is generated after successful upload

The next step is to create a web front end using ReactJS

Now we will create CRUD functionalities for our user in the web app

Embed your mobile app in the web page using iFrame. All you need to do is create a public url using the publicKey generated that we created earlier.

https://appetize.io/embed/<publicKey>?device=iphone8&scale=100&centered=true&autoplay=false&orientation=portrait&deviceColor=black&xdocMsg=true

Simply replace <publicKey> with the generated one.

Now create a crud operations file userOps.js

Create methods file methods.js

Modify App.js

And the index.css

Make sure your nodeJS backend is running. You should see the user table fetched from the cloud firestore database.

You will see the screen like this with “Tap to Play” option. The free version of appetize embedding does not allow autoplay option on page-load.

Click on “Tap to Play” to install the app on the embedded simulator. You can then manage the content via the table. Try creating, deleting, updating the user table. See magic!

You can also update the content directly in firestore and it will get updated in the emulator. But it won't be very easy for people who manage content to understand the NoSql documents and relations once the app scales up. That's why we have created a reactJS front end.

Thanks!

Information geek, Seeker

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store