logoDroidKaigi Ninjas
DroidKaigi 2021

DroidKaigi 2021

Our Development Case of Yappli, a No-Code Application Development Platform

Yappli, Inc.
Oct 18, 2021

This is an English translation of the original Japanese article.

Yappli develops and runs an application platform under the same name, through which users can develop apps with no programming skills required. This article introduces our development process, as readers may have a hard time wrapping their heads around what an app platform is and how we develop a no-code system.

What does Yappli do?

We at Yappli run a no-code (no programming skill required) application platform under the same name designed for app development, management, and analysis. Introduced into more than 550 companies, the platform is used to solve diverse industry challenges ranging from support for marketing (e.g. store and e-commerce), in-house digital transformation endeavors using mobile to revamp internal and client communication, and to support for back-office sectors and educational institutions.

Six characteristics of our application platform Yappli
(1) Speedy development: The platform allows for developing native Android and iOS apps fast without coding.
(2) Easy to use: The platform offers an intuitive management screen for updates and allows for previews, too.
(3) Various push notifications: Various push notifications are available on a target basis (e.g. area and attribute)
(4) Advanced data analysis: The platform allows for analyzing data based on user behavior and actions. Integration with the client’s company data is also possible.
(5) Cloud-based and evolving: The platform provides over 200 annual feature updates and supports swift updates to the latest OS.
(6) Success support: A special team provides support for attracting clients and using the platform, committing to the platform user’s success.

Android and iOS are at the core of Yappli’s service, and we write every feature in Kotlin and Swift.

What we do for app provision

Providing an app through Yappli involves two primary development aspects, namely “app design” and “app build.” The former refers to the need for developing many apps through a single platform or framework, which means it’s important to create numerous generic features and a highly flexible UI. App build, meanwhile, refers to the need for designing a build environment where users can release many apps effortlessly. The following sections will share these two aspects in more detail.

App design

Yappli users design their apps by combining various features, including basic push notifications, free layouts flexibly arrangeable down to a cell level, and AR/QR code readers. To maximize app user experience, we develop these features by paying special attention to UI and animation while allowing for diverse layout options— which is why we develop native features instead of web-based features with WebView. The following sections share four out of Yappli’s many features for which we have paid special attention to UI.

Free layouts

This is Yappli’s most generically utilized feature that allows for users to arrange cells in order. Users can configure texts and images in and adjust the width of cells, which in turn allows for grid representations. Diverse expressions can be made with this single feature, such as side-scrolling to assign cells within a cell, playing videos, and setting streaming time and tap events. There are many items to configure and extremely flexible combinations are available in a free layout, which means cell type, location, setting, and many other items need to be considered when creating a program.

Free layout

Point cards

Targeting clothing store and eating establishment clients, this feature can be used to make physical point cards—which stores often use to build client loyalty—appear in-app. Users can flexibly change the layout of the card, making it look like a physical one or offering multiple bar code display options. To prevent counterfeiting, this point card feature can even use an accelerometer to blur background images or insert moving images in the backdrop. These examples show how we achieved playful designs by incorporating practicality into app design.

Point card

Forms

This is a feature often used in conjunction with other features and one through which users can enter their personal information. The information can be leveraged to tailor content specifically to the user or send user-optimized push notifications.

Multiple data entry screen pages are available and items on a page can be set flexibly. Several types of items are available too, allowing for various expressions (e.g. showing normal EditText, address entry items, and stores nearby by linking with the shop feature). With user-friendliness in mind, we paid special attention to the animation that appears for validations, bottom sheet displays, and, in addition to normal buttons, keyboard-matching button displays.

Form

Shops

This is a feature for displaying store and location info on a map. Using the Google Maps API to show a map, information about each store can be superimposed in a card-based view. With a tap, detailed store information will appear in a bottom sheet, which, by swiping, can be enlarged to full-screen display. This feature makes it possible to seamlessly view various information on a single screen, instead of using screen transitions. We have made broad considerations for this feature apart from animation: examples include the combination of the map and bottom sheet actions, pins displayed when store numbers increase, and conditions for displaying stores nearby.

Shop

Feature development requires many different positions to coordinate closely. Our basic approach is to advance the implementation of a single feature by treating it as a single project. We assign to each project team all positions required for a feature release—development director, UI/UX, back end, front end, and QA, to name a few—and these members discuss and develop the feature they are tasked with. The application engineer and UI/UX designer in particular have many cooperation opportunities. UI/UX designers explore the extent to which they can render design flexible while maintaining user experience, whereas application engineers consider the feasibility of UI/UX designers’ ideas, suggest the distinctive characteristics of the app, and realize concepts. When there’s a great deal of flexibility and leeway in design, engineers tend to go for conservative UIs to avoid risks. But Yappli’s implementation balances practicality and freedom, all the while maintaining user experience.

Extensive use of SDK-provided API, such as AR and QR code readers, is another characteristic of our development. Yappli provides a wide range of features and users develop highly specialized features too, inevitably increasing the number of APIs with which users interact. This means users can gain extensive knowledge, which serves as another characteristic of Yappli. Each time new APIs are provided, we will consider the feasibility of releasing them as features and actively design prototypes, too.

App builds

To provide many apps, Yappli automates builds and submissions. We process several submissions in a single day, but engineers would have less time for development and experience errors if they had to go through every submission manually. This explains why the app build process is automated, using an approach described in the diagram below.

App build

During builds, we need to exclude special features to accommodate client needs and change icons. To incorporate these app-by-app settings, we use the administration screen and CircleCI.

Not all features are modularized at the moment; instead, we have modularized features that use third-party libraries or large-sized APIs. We hope to review the Yappli app’s configuration package and use dynamic feature modules for further optimization down the road.

This article has so far described the provision of for-release apps, but we also engage in improvement efforts daily, spanning from in-house QA app and git merges to automated builds made upon setting tags. Some of our other efforts are automated deployments for git pushes and automation for better development efficiency, which relates to development-stage unit tests.

As you can see, deep engagement in CI/CD—with, for instance, the environment for building many apps and efforts for developing an environment to improve development efficiency—is another characteristic of Yappli’s development process.

Future prospects for Yappli

We have enabled clients to create many apps and will continue development efforts to cater to further requests from users.

Many industries still have yet to introduce the Yappli app, so we intend to develop new features that can incentivize more companies to adopt the platform. Meanwhile, for industries that have increasingly been introducing Yappli, we will develop and improve features to increase use of the app and add more depth to the service. Instead of simply adding features, we will also make a revamp to expand the expression range of the Yappli app as a whole and fortify the service’s foundation as a platform to accelerate our evolution.

From a developer’s perspective, we need to innovate: the Yappli app’s source code has gotten bloated as the service grew, and there remains code that has decreased in maintainability or become stylistically outdated.

Being a platform means we have many regular tasks to deal with, such as build and submission and responses to libraries and OS upgrades. As such, we will actively invest in automation to enhance our development efficiency and in other endeavors of application environment development. By taking advantage of the app’s environment—where features can be added without much difficulty—we hope to increase opportunities for new technology and engineer-driven releases.

Yappli currently holds promise of future growth. Our corporate environment allows for engineers to take on challenges, so if you’re interested, we encourage you to submit your application from the link below:

https://open.talentio.com/1/c/yappli/requisitions/detail/13701

About the author

Hiroyuki Hayashi

I work as Manager of Yappli, Inc.’s Development Department. I engage in team management while also creating in-house apps with Flutter.

Yappli, Inc.
Yappli, Inc.
Yappli, Inc. runs its namesake no-code (no programming skills required) application platform designed for app development, management, and analysis. Introduced into more than 550 companies, the platform is used to solve diverse industry challenges ranging from support for marketing (e.g. store and e-commerce), in-house digital transformation endeavors using mobile to revamp internal and client communication, and to support for back-office sectors and educational institutions.
Go to Corporate Site