The essential news about content management systems and mobile technology. Powered by Perfect Publisher and XT Search for Algolia.
The News Site publishes posts to the following channels: Facebook, Instagram, Twitter, Telegram, Web Push, Tumblr, and Blogger.
Superapps have the power to transform the way we get things done throughout the day. Rather than juggling dozens of logins and hopping between disparate apps on our mobile devices, superapps enable a smoother, more consistent user experience by consolidating numerous apps into one. But what exactly goes into a superapp? How are they used? And how can you start building one?
Let’s find out
A superapp is an all-in-one ecosystem for various services within the context of a single mobile application. In other words, a one-stop-shop for typically disparate digital experiences. Superapps feature a composable platform engineered using a modular architecture, with a native shell that encompasses various mini-apps. Each mini app can provide a different experience, from chat functionality to time tracking and more. Ultimately, superapps provide the connected and personalized experiences users desire, with more time spent using apps and less time spent switching between them.
Superapps can be transformative for a business, be it for the employee, employer, or even C-level. They’re suitable for workplace applications, merging everything from HR tools, communication, time-tracking, inventory, etc. into one seamless experience. On the consumer side, messaging, payments, shopping, event tickets, and more can be combined into a single superapp.
The global superapps market size was valued at USD 61.30 billion in 2022 and is expected to grow at a compound annual growth rate (CAGR) of 27.8% from 2023 to 2030 (Grand View Research, Super Apps Market Size, Share, Growth & Trends Report 2030). Gartner also expects that by 2027, more than 50% of the global population will be daily active users of multiple superapps. Clearly, the market is ready for scalable, personalized digital experiences and superapps are the best way to deliver them.
If you’re still not sold on the value of superapps, then check out some examples from real businesses using them to transform their app development. Our customers have:
The building blocks of any superapp are similar, but each app can scale according to an individual business’s needs. At the core is an application shell with key functionality, like authentication and messaging, built using platform tools (Swift & Kotlin). Within the native foundation, users can browse and install mini apps relevant to them. These lightweight, cross-platform apps are easy to build using standard web technologies such as HTML, CSS, & JS. Modular services connect mini apps to the native shell and device features for a seamless experience. Lastly, CI/CD tools are leveraged to build web bundles and native binaries for app store publishing.
Ready to create a superapp but aren’t sure where to start? That’s where we come in. With Ionic’s Superapp SDK, teams can develop rapidly, while spending less, with less technical limitations. With the SDK, there’s less overhead and fewer development cycles required as opposed to building from scratch, so you can get your superapp to market faster than ever.
Ionic features a complete framework for building hybrid mini apps using web technologies, so you can do more with your existing web development teams. Developers can work in parallel, without worrying about holding others up, streamlining the development process. Meanwhile, get more out of your code as well – code once and push cross-platform product releases with hybrid mini app development, and re-use code as needed.
With Live Updates, enhancements and bug fixes can be pushed to users without waiting for app store approval, allowing you to get the best possible product out as quickly as possible. Easily manage signing certificates, build artifacts, and build environments.
Our team will be with you every step of the way as well, providing expert guidance and assistance from project scope to launch and beyond. Ready to get started? Chat with a superapp specialist today.
Fill out the form below to download the complete “Anatomy of a Superapp” infographic.
The post The Anatomy of a Superapp appeared first on Ionic Blog.
Read more https://ionic.io/blog/the-anatomy-of-a-superapp
With Apple’s release of the Vision Pro, we’ve been getting a lot of questions around incorporating Augmented Reality (AR) and Capacitor. The truth is that while it’s possible to add AR to your Capacitor projects, creating those experiences can be fairly difficult even within native Apple applications. The process of developing AR experiences is dependent on the types of experiences you are trying to create, how immersive you want the experience to be, and how far you are willing to go into native code to make it work. That combined with knowledge of 3D modeling, animation, photogrammetry, and several other areas of domain expertise can make it daunting.
For this tutorial, I wanted to find a simpler way to incorporate AR into a Capacitor application. A project that didn’t require Swift, could use all web-based technologies, and could introduce the Ionic community to AR to make it approachable. To accomplish this, I created a basic e-commerce application where you could view what you want to buy using AR.
There are a few limitations with this project:
It’s understandable to question to usefulness of a Capacitor application that only works on Apple devices and Safari so it’s important to address this question early in this tutorial: I can really only recommend this if you are creating or have a cross-platform application where you are looking to enhance the user experience for Apple device users of your applications. If you plan to just create an AR application for Apple devices, you might be better suited creating this with Swift/SwiftUI. Beyond this tutorial, you will likely need to use some amount of Swift, and incorporating Capacitor might make development more difficult if you plan to keep this within the Apple ecosystem.
As for the extra applications I referenced above, this pertains to the use of photogrammetry with Reality Composer that I used to get my own 3D model into the project demo. Reality Composer and photogrammetry isn’t particularly difficult to learn, but it is something that could be its own tutorial. It’s also not entirely relevant to using AR Quick Look in a Capacitor application but I will be adding resources so that if you have your own store, you can learn how to create 3D models of your real world objects to use in your Capacitor projects.
There were a few considerations for the architecture of this project:
The first consideration with AR-based applications, especially AR Quick Look, is that it either requires utilizing ARKit or Safari for it to function. While ARKit is powerful and would allow us to create a better look and feel to our application it would also require us to create a custom Capacitor plugin with native code. Making the project more difficult and not as approachable to web developers looking to learn how to add AR functionality to their Capacitor applications. So my solution to bypass this was to utilize the browser plugin to keep the experience in-app (a standard hyperlink will work but it will open Safari instead of keeping the experience in your application).
The second consideration involved the size of USDZ files and how it would impact the size of a mobile application. While a demo like this is still small and the USDZ could be stored directly on the device it became clear that any real world application would need to develop a different strategy. So, in an effort to try to make this more realistic, I made the decision to utilize AWS S3 to make the Capacitor application smaller.
The final consideration was that I wanted to show more than a 3D model and incorporate banners so that you can extend the functionality of your AR applications. Unfortunately, after numerous tests, I discovered that the standard view architecture won’t recognize the banner parameters found in the documentation so I created an intermediary web application for Safari to handle the banner instead. I believe this has something to do with using S3 but I wanted to avoid getting caught up with too much S3 configuration for this project.
The first step to get this project running is to get the location where we are going to store our USDZ files and the static website used for the Apple Pay View. Now there are a multitude of ways to accomplish this but the way that I am most familiar with is using AWS’ S3 solution. S3 is not a must for your project but you do need to find a spot to store your files and the static website so use the solution that works best for you. Let’s start with creating the bucket where we are going to store our USDZ files:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AddPerm",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::bucketname/*"
}
]
}
Next let’s create the static website bucket:
The Next step is to get our USDZ files and upload them into the bucket that we made to store those files. The first two files I’ll be using are the Fender Stratocaster and the Cosmonaut found on the AR Quick Look Gallery website. The reason that I chose those particular assets is because the Fender Stratocaster is a static USDZ file (it’s also just a really cool 3D model) and the Cosmonaut is an animated USDZ file.
The third 3D model is something that I wanted to push the boundaries with so I took a 3D printing project that I created (a life-size Pikachu) and used photogrammetry with Reality Composer to turn it into a USDZ file:
I chose this route because I wanted to show that you can incorporate your own USDZ files and not just be locked in with what is provided by Apple. More information on Reality Composer can be found here.
Once you have your models, it’s time to upload them to your S3 bucket:
The static website for the life-sized Pikachu is pretty straightforward. I created a basic Angular web application named arquicklookweb utilizing Ionic Framework to make it mobile friendly. I built the application with ng build and uploaded the contents of the dist folder in a similar way as the USDZ files. The only exception is that I uploaded the contents of the dist folder to the static website bucket and skipped adding model/vnd.usdz+zip in the properties since this is a static website instead of a USDZ file.
This is the HTML that we will need to make this work:
<a rel="ar" id="ApplePay" href="https://gamegineerlabshelpfulfiles.s3.us-west-2.amazonaws.com/Pikachu.usdz#applePayButtonType=plain&checkoutTitle=Pikachu&checkoutSubtitle=Electric%20Mouse&price=$500.00">
<img class="xt-lazy-img" src="/assets/usdz/pikachu.jpg">
</a>
By adding “ar”, “ApplePay”, and #applePayButtonType=plain&checkoutTitle=Pikachu&checkoutSubtitle=Electric%20Mouse&price=$500.00 it will tell Safari how to handle the file as well as what to display for the banner. In this case the banner will show a plain Apple Pay button with a title of “Pikachu”, a subtitle of “Electric Mouse”, and a price of “$500”
Here is the full HTML on the static web application:
<ion-content [fullscreen]="true">
<ion-card>
<a rel="ar" id="ApplePay" href="https://gamegineerlabshelpfulfiles.s3.us-west-2.amazonaws.com/Pikachu.usdz#applePayButtonType=plain&checkoutTitle=Pikachu&checkoutSubtitle=Electric%20Mouse&price=$500.00">
<img class="xt-lazy-img" src="/assets/usdz/pikachu.jpg">
</a>
<ion-card-header>
<ion-card-title>Pikachu</ion-card-title>
<ion-card-subtitle>#0025</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
When it is angered, it immediately discharges the energy stored in the pouches in its cheeks... This 3D print is friendly and purchasable!
</ion-card-content>
</ion-card>
</ion-content>
The code for the full static Angular web application can be found here.
Now that we’ve gone through all the configuration steps, it’s straightforward to get a Capacitor application setup and ready to work with AR Quick Look:
ionic start ARQuickLook blank --type=angular
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Shop
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Shop</ion-title>
</ion-toolbar>
</ion-header>
<ion-list>
<ion-item (click)="openAR('guitar')">
<ion-avatar aria-hidden="true" slot="start">
<img alt="" src="/assets/usdz/stratocaster.jpeg" />
</ion-avatar>
<ion-label>
<h1>Fender Guitar</h1>
<p>Fender Stratocaster</p>
</ion-label>
</ion-item>
<ion-item (click)="openAR('cosmonaut')">
<ion-avatar aria-hidden="true" slot="start">
<img alt="" src="/assets/usdz/cosmonaut.png" />
</ion-avatar>
<ion-label>
<h1>Cosmonaut</h1>
<p>Cosmonaut Animation</p>
</ion-label>
</ion-item>
<ion-item (click)="applePay()">
<ion-avatar aria-hidden="true" slot="start">
<img alt="" src="/assets/usdz/cupandsaucer.jpeg" />
</ion-avatar>
<ion-label>
<h1>Pikachu</h1>
<p>3D Print... Electric Mouse</p>
</ion-label>
<ion-chip color="success">Buy Now!</ion-chip>
</ion-item>
</ion-list>
</ion-content>
npm install @capacitor/browser
import { Component } from '@angular/core';
import { Browser } from '@capacitor/browser';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor() {}
async openAR(item: string) {
if (item == "guitar") {
await Browser.open({ url: 'https://gamegineerlabshelpfulfiles.s3.us-west-2.amazonaws.com/fender_stratocaster.usdz', presentationStyle: 'popover'});
} else {
await Browser.open({ url: 'https://gamegineerlabshelpfulfiles.s3.us-west-2.amazonaws.com/CosmonautSuit_en.reality', presentationStyle: 'popover'});
}
}
async applePay() {
await Browser.open({ url: 'https://arquicklookwebsite.s3-website-us-west-2.amazonaws.com/', presentationStyle: 'popover'});
}
}
ionic capacitor add ios
ionic capacitor build
ionic capacitor sync
ionic capacitor open ios
This will open your Capacitor application in XCode and you should be able to run this on your iOS device
Now for the cool part! Since we spent all that time with configuration and architecting our AR application, we can now run our project on the Vision Pro! If you want to test it out, all you need to do change your run destination from your physical device to either your own Apple Vision Pro or the Vision Pro simulator:
That’s it. It literally works by default- no special configuration needed and we didn’t even need to add any Swift/SwiftUI to make this work on the Vision Pro!
AR can be a challenging endeavor for any web developer but it’s entirely possible to create your own AR experiences without having to dive into native code to make it happen. In this tutorial I was able to create a full AR Quick Look experience utilizing all web technologies, only relying on some configuration to make it work. Swift/SwiftUI with ARKit can be really challenging for even seasoned developers so by bypassing it and using basic Capacitor plugins with Safari, you can really tone down the difficulty if you want to incorporate it into your own projects.
In future iterations, I plan on incorporating some custom Capacitor plugin work to make this a truly embedded experience. Be on the lookout for upcoming tutorials where I will show you how to get the most out of ARKit in your Capacitor applications!
Below is the code if you would like to follow along, as well as resources that will help you with your own Capacitor AR Quick Look Project:
The post Augmented Reality With Capacitor: AR Quick Look appeared first on Ionic Blog.
Read more https://ionic.io/blog/augmented-reality-with-capacitor-ar-quick-look
We’re excited to celebrate a new milestone for the Ionic Visual Studio Code extension. This free tool that accelerates Ionic and Capacitor app development recently reached 300,000 installs! Thank you to the community for supporting it and providing valuable feedback.
On the heels of this exciting milestone, Ionic Visual Studio Code Extension v1.70 is out now! Here are some of the major features added in the past few months for Angular and Capacitor.
The Angular 17 release brought a lot of developer experience improvements that the Ionic VS Code Extension helps you leverage easily. Control flow provides an alternative way to conditionally show, hide, and repeat elements in Angular templates. To migrate your project, choose Project > … then “Migrate to the built-in control flow syntax.” ESBuild provides many benefits including faster build-time performance for both initial builds and incremental rebuilds. Upgrade to ESBuild from within the extension’s Recommendations section.
Developers can now import only the Ionic components used in an app. This standalone component approach uses tree shaking to reduce overall build size and leverages newer Angular features like ESBuild. The VS Code extension can migrate for you by clicking Project > … then choosing “Migrate to Ionic standalone components.”
The drawback to standalone components is that each component has to be manually imported and registered. Enter automatic import! Add an Ionic component into an HTML file, like in home.page.html:
<ion-button><ion-button>
Over in home.page.ts, the Extension automatically imports the IonButton component and adds it to the list of imports:
import { IonButton } from '@ionic/angular/standalone';
@Component({
standalone: true,
imports: [IonButton]
})
export class HomePage { }
This saves a bunch of time and switching between files.
While upgrading to newer Capacitor versions manually is quite painless, why not have the Extension do it for you? Changes to plugins, as well as the iOS and Android projects, are made during the migration. Look for this option under the Recommendations section.
That’s not all! Capacitor 6 is coming soon. Get a head start by migrating to the Release Candidate under the Recommendations section.
Search for native functionality, then easily install, uninstall, or update a Capacitor or Cordova plugin. Filter by platform, officially supported, or Capacitor-only plugins. To open the search window, click the three dots next to the “Plugins” menu item.
The post Angular 17 and Capacitor Enhancements Now Available in the Ionic VS Code Extension appeared first on Ionic Blog.
One of the biggest hurdles for any successful app development project is time. Deadlines remain tight and there never seems to be enough engineers to get the work done. But in today’s fast-paced business landscape, it’s critical to remain agile, adjusting the product roadmap rapidly to meet market demands and stay ahead of the competition.
So how can your development teams build and deliver secure, high-performing apps across platforms? And do so with pace? Enter Ionic’s Enterprise SDK, a game-changer for accelerating enterprise app development and time-to-market.
Nothing delays product launches quite like building the same thing twice. Juggling multiple codebases and reinventing the same wheels project after project only compounds the issue. That’s why the Enterprise SDK provides a single, cross-platform solution for building robust apps for iOS, Android, and the web. By removing the need to write separate code for each platform, development time is quite literally cut in half.
Marvin M., an Enterprise Architect in the healthcare industry, sums it up nicely when he says, “We find building enterprise and industry-focused apps with Ionic to be cheaper and faster than having to hire and maintain three separate development teams.”
However, speed shouldn’t mean compromised security. After all, enterprise apps require top-notch protection. So, Enterprise SDK comes equipped with a comprehensive security suite, including:
These pre-built solutions are supported and managed by Ionic to remain up to date with the latest industry security best practices. They save developers time and ensure robust data protection by eliminating the need to build complex security features from scratch. Instead, developers can rest easy knowing that their data is secure, so they can focus on building their app’s key features.
The Enterprise SDK doesn’t stop at security, it comes out-of-the-box with a mobile UI toolkit ensuring teams aren’t bogged down with the nuances of design systems. Instead they get a library of adaptive, mobile-ready components that look and feel at home on any user’s device.
The SDK also tackles another engineering heavy hitter – native integrations. Plug-and-play solutions are available to tap into native device features, such as camera, filesystem, preferences and storage, when they’re needed. This removes the need to build complex code around interfacing with the device-level APIs.
However, you can’t just build the app. You need to get it in the hands of users. So, the SDK’s mobile DevOps arm simplifies the process of delivering the app to the respective app stores for download. By offering services to build and sign the native binaries required by Apple’s App Store and Google’s Play Store, teams can leverage their existing version control system to keep up-to-date builds flowing to the appropriate development and production environments.
Solutions at each phase of the mobile development lifecycle are what businesses like Kristofer P.’s point to as the “… technology [they] rely on!”
The reliability doesn’t end with the software. It continues with the support and advisory services included within the Enterprise SDK. Experts are available to assist your development teams when they need it. Stuck on a bug? Need help keeping pace with framework and package changes? Industry leading support specialists can work with your team to ensure they meet their critical development goals and remain proactive in app and data security.
Jedidiah W., CEO of the leading mobile app development consultancy OpenForge, has seen the value of Ionic’s enterprise support service first-hand. He says, “we work with a ton of enterprise customers and every single one loves Ionic’s support structure.”
With Ionic’s Enterprise SDK at your disposal, expect your development time to reduce by weeks, if not months. With its focus on speed, security, and developer productivity, it empowers enterprise teams to build and deliver exceptional apps that drive business growth.
Eager to learn more? Schedule a demo with industry experts to see how your team can benefit from all the SDK has to offer. If you’re ready to dive right in, activate your free trial to experience the power firsthand.
The post Ship Enterprise Apps Faster with Ionic’s Enterprise SDK appeared first on Ionic Blog.
Read more https://ionic.io/blog/ship-enterprise-apps-faster-with-ionic-enterprise-sdk