Mobile App Platform (MAP)

A constructor for creating multibrand and multilingual mobile apps

Need to amplify your company’s mobile presence?

Launch your own Open Source-based Mobile App Constructor instead of developing a bunch of standalone, different applications.

This approach enables you to reduce costs and time-to-market by 2 to 10 times!

The resulting applications will be:

Cross-platform.
Available on both the Apple Store and Google Play.
Highly performant.

Individually designed, according to your company’s guidelines.
Scalable, allowing for reuse in other markets and when creating applications for other brands.

Enabling the use of native functions, such as push notifications for iOS without email, and biometric authentication.

Utilizing MAP is crucial in these use cases:

Your company aims to dramatically reduce mobile development and support costs and has the characteristics and needs described below:

2+ brands with diverse audiences, or 2+ markets, which may be different countries or geographical areas.

Each brand has its own Drupal-based multilingual site. Each market has its own website and content editor team.

The content on each local website varies and is language-localized, including both brand-common and local-specific pieces such as articles, news or videos.

Each brand's app must have an individual appearance that adheres to the brand guidelines.

The main purpose of the mobile apps is to empower the local teams to provide local customers with required content in a local language, in particular, the content from the local website.

MAP’s Areas of Use

Content, Registration, and User Data Management

The MAP excels in the effortless and rapid creation of new apps focused on registering users, managing their data, and providing various types of content.

Compatibility with Headless Websites

It is possible to make the MAP well-suited for integration with headless websites. In such cases, we would need to adopt a different frontend approach and develop components using alternate frontend technologies.

Extendable Functionality

It is possible to extend the MAP's functionality, such as adding e-commerce features.

Apple App Store

Challenge:

PWAs (Progressive Web Applications) or two similar apps that differ only in language or content could be banned from the Apple App Store at any time.

The Apple App Store considers such apps as spam.

The Solution:

MAP empowers brands to serve various markets (countries or regions) by creating a single native app with multiple local backends, one for each market.

Local backends enable local teams to provide customers with content in their language, utilizing a Drupal admin panel familiar to them.

Content can be added to the app from the corresponding local website.

The applications will be approved by the Apple Store.

Technology

Frontend:

NativeScript-Vue (Vue3 + Composition API) + Vite, Tailwind, TypeScript

Backend:

Drupal. Plugin Control System Builder via Rest API Content Retrieval via Views and entity view modes

Backend: approach advantages

Plugin Control System Builder for REST API

With the System, we can easily create, reconfigure, and preset endpoints and API versions through the user interface (UI) or Drupal configuration.

The prebuilt backend 'bricks' within the MAP leverage well-known features from Drupal core, making its support intuitively understandable for mid-level Drupal developers. To extend or modify the functionality, developers need to create new plugins (processors) following provided rules. This approach ensures that all created code can be reused across all company apps, streamlining maintenance and support processes.

Effortless Content Administration

Thanks to integration with the Views module, Entity Views modes and field formatters, content settings and configuration are handled through the Drupal site administration panel, in most cases without any additional custom code.

Frontend: approach advantages

Design System

The Design System consists of three levels of elements: atoms, molecules, and organisms. Each atom/molecule/organism has different variations. The Design System:

Significantly reduces costs associated with creating unique designs and layouts for individual components.
Helps create and build Native Apps faster.
Uses iOS & Android Guidelines.

Frontend Component Library

For app development, the Design System transforms into a component library — a npm module. The component library provides developers with a wide range of building blocks available. To design a full page, they just need to pick the components from the library and combine them.

Service-Oriented architecture

Portability and reusability.
Reduces development time for applications by up to 50%.
NP Principle - Overriding Methods.
Universality and flexibility, enabling other teams to refer to and subsequently redefine our methods according to business requirements.

Current services examples:

Firebase

Root-layout

App-settings

Onboarding tour

firebase: request permissions for push notifications and receive a token, integrate firebase analytics
root-layout: the ability to quickly launch and transfer data from popups, sidebars, bottomSheet
http: helper functions for sending requests to the API, saving global headers, the ability to change them, sending the request itself, the callback function on Request/Error
app-settings: utility for saving application data
onboarding tour: starting the tour, switching steps, skip, tour navigation
app-events: the ability to track various application events — start, stop, return
auto-logout: tracks the start / stop of the application, writes to the settings, checks the lifetime of the token and deletes it from the settings if necessary
localize: adding dynamic translations that came from the BE.

Limitations

MAP is specifically designed and can only be utilized with the following technologies:

NativeScript-Vue

The entire frontend library and all services are built specifically for NativeScript-Vue3.

Drupal

Utilized as the backend.

The best part

In the case of completely new app creation:

Utilizing MAP, we reduce the development costs and time-to-market by at least 50%

In the case of adding a new market to a ready-made application

Utilizing MAP, the development time will be around 100 hours only. In this estimation, we are assuming that the new market will have its own language and content.