Getting Started

Microapp APIs

MicroApp

You will find below the Hackathon template to create a MicroApp.

What's a MicroApp ?

MicroApps are single purpose and cross-platform apps designed to support a single step in a user’s workflow.

In contrast to full-blown mobile apps, MicroApps are lightweight apps within a container that perform one single task — and do so seamlessly, with little friction.

MicroApps are self-sufficient and can be independently deployed and tested. They can be deployed dynamically without going through an App Store approval process and downloading/updating apps. Access restrictions are applied to restrict who can access what MicroApps, and what information from the main App users is delivered.

Getting Started

In this section we'll walk you through getting up and running a minimum Ayoba MicroApp. Here you will you will take the following steps:

  1. Create a folder on your desktop.
  2. Create index.html file and copy and paste the code to index.html file.
  3. Create a folder lib folder and microapp.js file.
  4. Copy and paste the code into the microapp.js file you created
  5. GitHub Pages

Step 1:Create a folder on your desktop

Create a folder on your desktop and give it any name

Step 2:Create index.html file and copy and paste the code to index.html file.

Open the folder you created and create a new text file and name it index.html Copy and paste this inside index.html

<html>
   <head>
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <style>
           img {
             display: block;
             margin-left: auto;
             margin-right: auto;
           }
       </style>
   </head>
   <body style="background-color:#1565c0;">
       <script src="../lib/microapp.js"></script>
       <script>sayHello()</script>
       <img src="logo.png" style="width:72px;"/>
   </body>
</html>

Step 3:Create a folder lib folder and microapp.js file.

Create a new folder inside your project folder called lib and create a file called microapp.js inside the lib folder you created.

Step 4:Copy and paste the code into the microapp.js file you created

var Ayoba = getAyoba()
 
/**
* Determine the mobile operating system and returns the
* proper javascript interface
*/
function getAyoba() {
   var userAgent = navigator.userAgent || navigator.vendor || window.opera;
 
   // Windows Phone must come first because its UA also contains "Android"
   if (/windows phone/i.test(userAgent)) {
       return null;
   }
 
   if (/android/i.test(userAgent)) {
       return Android;
   }
 
   // iOS detection from: http://stackoverflow.com/a/9039885/177710
   if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
       return null; // todo
   }
 
   return "unknown";
}

Step 5:Deploy with GitHub Pages

You will need a github account for this.

Click the following link and follow the steps

How-to use the GitLab Pages CI to publish the microapp files

Using GitLab Pages, your microapp can be deployed and public visible to internet. E.g.

Ayoba sample app

This will allow you as a developer to publish your MicroApp without running a complete webserver. Follow the next steps to publish a MicroApp through this repo template:

Develop you MicroApp Config your .gitlab-ci.yml

# This file is a template, and might need editing before it works on your project.
# Full project https://gitlab.com/pages/plain-html
pages:
  stage: deploy
  script:
    - mkdir .public
    - cp -r * .public
    - mv .public public
  artifacts:
    paths:
      - public
  only:
    # choose your preferred source branch
    - develop

Commit your changes into your choosed source branch (e.g. master)

Confirm after the code integration to your choosed source branch, the pipeline runs and deploys your microapp

Check for more info

Debugging

You can use the following tool to assist in debugging your app: ConsoleToDiv

There are examples for Vue, Angular, and vanilla JS

API Test Boilerplate