# Getting Started
# Understanding Quick Apps
Quick app (opens new window) is an implementation of the emerging light apps paradigm (no-installation hybrid apps) in the process of standardization by the W3C MiniApps Working Group (opens new window).
Quick app provides a framework for mobile application development based on widely known front-end web technologies (JavaScript, CSS,…). It enables developers to create “light” applications more efficiently with significant access to a host devices’ native resources and services. Read more about this framework and uses cases on the Quick App White Paper (opens new window).
Quick apps are compiled and packaged as .rpk files. .rpk packages can be executed by quick app engines deployed on the device's operating system. Currently, the Quick App platform is only supported by Android devices (version 5+), but we expect to see cross-platform implementations in the near future (more in the open-source Quick App Initiative (opens new window)).
# Prerequisites
The development tools are based on Node.js (opens new window), a JavaScript runtime built on Chrome's V8 JavaScript engine. Also, for installing the dependencies, we will need the npm package manager. You may download and run a pre-built installer for your platform (opens new window).
# Environment Installation
There are two ways to start creating a quick app :
- Using a Quick App IDE with all the tools integrated;
- Using separate tools: your favorite editor, an npm-based toolkit, and the quick app loader on your Android device.
Various quick app IDEs allow you to create apps based on intuitive templates and compile and debug them directly within the same environment. In the second case, you must have more advanced skills (i.e., ADB (opens new window) and management of Android packages) and install the following tools separately.
# (Option 1) Using a Quick App IDE
This guide uses the Huawei Quick App IDE, but the process is similar to other IDEs —there is a generic Quick App IDE (opens new window), but some parts are in Chinese.
The Quick App IDE is based on the VS Code framework that enables the development of quick apps through easy-to-use services such as coding templates, real-time preview, debugging. It also allows cloud testing and releasing on concrete marketplaces in case you are interested.
Currently, the Quick App IDE runs on systems based on Windows and macOS. Download and install the latest version (opens new window).
# (Option 2) Separate Tools
# Quick App Loader
This guide uses the Huawei Quick App Loader, but the process is similar to other loaders —there is a generic Quick app loader (opens new window), but some parts are in Chinese.
The Quick App Loader enables you to launch and debug quick apps on your Android device, even though it does not include a built-in quick app engine. This APK contains the quick app platform's basic functions that will allow you to load .rpk files.
NOTE
The quick app platform is evolving, and the quick app services and capabilities are growing, so ensure the version of the quick app engine is always equals or superior to the version used by the quick app.
TIP
If you are interested in developing tools for other platforms, join the (open-source Quick App Initiative (opens new window) and let us know!
# Create Your First Quick App
You can use the IDE to understand the basic structure of a quick app and test it in a few minutes.
Once you launch the IDE, you can create a New Project based on a Hello World template.
The next screen allows you to set up your app, indicating the name, the identifier of the package, and the location in the local filesystem:
If you chose the Hello World template, the IDE would create a new project with the minimum configuration for your first quick app, with only one page and a text showing a message in the center of the screen.
The structure of directories and files of the source code (src) is something like:
├── manifest.json
├── app.ux
├── Hello
| └── hello.ux
└── Common
└── logo.png
# manifest.json
In the manifest.json you can find the basic metadata and configuration of the app:
{
"package": "org.example.myquickapp",
"name": "My First Quick App",
"versionName": "1.0.0",
"versionCode": 1,
"icon": "/Common/logo.png",
"minPlatformVersion": 1060,
"features": [],
"permissions": [
{
"origin": "*"
}
],
"config": {},
"router": {
"entry": "Hello",
"pages": {
"Hello": {
"component": "hello"
}
}
},
"display": {}
}
# app.ux
In the app.ux file you can find event handlers that will be triggered when the app is launched and closed:
<script>
module.exports = {
onCreate() {
console.info('App just created!!');
},
onDestroy() {
console.info('App destroyed!!');
},
dataApp: {
localeData: {}
}
}
</script>
# The Page
As you can see in the manifest.json the app has only one page named Hello, whose main component is hello. This component can be found in the file /Hello/hello.ux:
<template>
<div class="container">
<text class="title">Hi Quick Apps!!!</text>
</div>
</template>
<style>
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
font-size: 100px;
}
</style>
<script>
module.exports = {
data: {
componentData: {},
},
onInit() {
this.$page.setTitleBar({
text: 'My First Quick App',
textColor: '#000000',
backgroundColor: 'orange',
backgroundOpacity: 0.5,
menu: true
});
}
}
</script>
# Compile the Code
Using the menu of the IDE, you can compile the project (i.e., Build > Run Build).
If you want to compile the app using npm from the command line, you can install the dependencies using the Npm > Start Npm Library option in the menu. This will place the quick app compiler (fa-toolkit-version.tgz) in the home project directory.
Now you can perform the compilation directly from the home directory of the project.
npm run fa-build
This command compiles the app, creating a new directory /dist that includes the quick app package (org.example.myquickapp.rpk), named after the metadata specified in the manifest file.
# Run the App
The quickest way to test the app is using an Android device connected to a computer running the Quick App IDE. Just connect your Android device using the USB port (you can also use a wireless connection), and connect it using the Connect option in the menu of the Quick App IDE.
You will be able to link and configure the device from the IDE:
TIP
Ensure that the device has the developer mode enabled.
Once the device is connected, you can run the quick app directly on the connected device using the Run option.
In case the Android device does not have support for running quick apps, the IDE may download and install the quick app engine on your device (the Quick App Loader).
After that, you can interact with the quick app on your device:
