Use Quasar to build an Android app
Posted on
by Kevin FoongQuasar is a Vue framework that makes it easy to build hybrid mobile apps using Cordova. In this introduction I'll provide an overview on how to build a simple Android app. Note that the Quasar website already has quite good documentation on how to get started. Here I will outline my notes and any difficulties I encountered along the way during my own set up. Hopefully this tutorial will help someone get started in developing mobile apps.
I also assume that you already have some Vue knowledge.
Step 1 - Install Quasar CLI and create a project in the folder "myquasar"
npm install -g @quasar/cli
quasar create myquasar
Step 2 - Quasar CLI options
Most of the options given by the CLI are default options. Go ahead and follow or select your own preferences.
Step 3 - Set up Cordova, Android and your Windows environment
I won't cover the details as the Quasar page does a very good job already and is quite easy to follow - https://quasar.dev/quasar-cli/developing-cordova-apps/preparation
The below is a summary of the commands used.
npm install -g cordova
- Install Cordova CLIquasar mode add cordova
- Generate a Cordova project in /src-cordova
folder
Note that when it asks for "Cordova app id" this is usually a reverse domain name of your company which is used to uniquely identify your app. In my case this is net.kevin7.myquasar
cordova platform add android
- cd to /src-cordova
folder. This adds the Android platform.
cordova requirements
- check that everything is in order.
Step 4 - Add Cordova scanner plugin
Now lets develop a simple app. We will utilise a Cordova plugin to allow our phone to scan barcodes.
Go to the Cordova plugin page and search for "scanner" - https://cordova.apache.org/plugins/?q=scanner
You will see a list of plugins. The one I used was "cordova-plugin-qr-barcode-scanner" - https://www.npmjs.com/package/cordova-plugin-qr-barcode-scanner
Go to the /src-cordova
folder and install the plugin.
cordova plugin add cordova-plugin-qr-barcode-scanner
Step 5 - Scaffold our app
For our simple app we will have 2 pages - /pages/index.vue
and /pages/scan.vue
I have also created a simple layout at /layouts/MainLayout.vue
You can see the full source code in my Github - https://github.com/Kevinf7/myquasar_scan_blog
Step 6 - Create scan.vue
Scan.vue will be just a simple button. When the button is clicked, the barcode scanner will activate. I used the example code from the plugin page as the basis of my code. See below scan.vue
<template>
<div>
<h2>Hello Scanner</h2>
<q-btn color="primary" label="Scan" @click="scanImage" />
<h2>{{ title }}</h2>
</div>
</template>
<script>
export default {
data() {
return {
imageSrc: '',
title: '',
description: ''
}
},
methods: {
scanImage() {
cordova.plugins.barcodeScanner.scan(
result => {
alert(
'We got a barcode\n' +
'Result: ' +
result.text +
'\n' +
'Format: ' +
result.format +
'\n' +
'Cancelled: ' +
result.cancelled
)
},
error => {
alert('Scanning failed: ' + error)
},
{
preferFrontCamera: true, // iOS and Android
showFlipCameraButton: true, // iOS and Android
showTorchButton: true, // iOS and Android
torchOn: true, // Android, launch with the torch switched on (if available)
saveHistory: true, // Android, save scan history (default false)
prompt: 'Place a barcode inside the scan area', // Android
resultDisplayDuration: 500, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500
//formats : "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED
orientation: 'landscape', // Android only (portrait|landscape), default unset so it rotates with the device
disableAnimations: true, // iOS
disableSuccessBeep: true // iOS and Android
}
)
}
}
}
</script>
Step 7 - Test our app
To test our app we can set up some emulators via Android Studio's AVD Manager. See this page for details on how to do it -https://developer.android.com/studio/run/managing-avds
Once the emulators are setup issue the command below to build and run your app in development Android mode
# run on specified emulator
quasar dev -m android -e Pixel 2 API 29
# open Android Studio to select which emulator to run
quasar dev -m android --ide
You can also test your app directly on a real phone along with remote debugging in Chrome! This is a really cool feature. Google has a pretty good page on this - https://developers.google.com/web/tools/chrome-devtools/remote-debugging?hl=en. First you need to enable USB debugging mode on your phone. After you have done this plug your phone into your PC.
In Chrome enter chrome://inspect/#devices
into the URL. You should see your phone id appear in Chrome after a short while. If you are using Samsung phones you will also need to enter adb devices
on the command prompt in any location otherwise your phone won't be detected. Android Debug Bridge (adb) is command line tool provided by Android. adb devices
allows you to check what devices are connected to your computer.
Likewise if you want to debug on an emulator just go to chrome://inspect/#devices
and you should see a WebView link which will enable you to use Developer Tools to debug on your emulator.
Now build and run your app in development Android mode
quasar dev -m android
If all goes well, the app appears on the phone!
The scanner should work too!
You should also now see an "inspect" link appear in Chrome. Click it and you will have the Chrome debugger at your disposal.
Step 8 - Use Icon Genie to set up all your icons
Quasar provides a very handy tool called Icon Genie to set up all the different sizes of icons needed.
First install Icon Genie globally.
npm install -g @quasar/icongenie
Use an image for your icon that is a minimum size of 1024x1024 and save it anywhere on your PC. Then from your project root folder just run the icongenie command to generate all the icon variations and update Cordova's config.xml file. Hint - use the full path name to your original image like below.
icongenie generate -m cordova -i C:\Users\kevin\Documents\vue\myquasar\src\assets\qr-code_2048.png
That's it! If you like you can verify that all the icons have been generated at \src-cordova\res\screen
and that \src-cordova\config.xml
has also been updated.
Step 9 - Build for production
The below command generates an unsigned APK (Android package) file to folder location similar to C:\Users\kevin\Documents\vue\myquasar\src-cordova\platforms\android\app\build\outputs\apk\release\app-release-unsigned.apk
quasar build -m android
I find sometimes if the build is unsuccessful you may need to delete the /src-cordova/platforms
folder. After you do this go to /src-cordova
folder and run cordova platform add android
again. This will usually fix the problem.
Step 10 - Sign the APK
The next step is to sign the APK so that we can install the app onto our phone or to upload it onto Google Play.
First you need to generate a private key using keytool
. The keytool command comes with the JDK. Keep this key in a safe place because you will need to use the SAME key every time you update your app on Google Play.
cd to a folder you will use to save your key and run the command below. Enter a password and answer the questions that appear.
# keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 20000
keytool -genkey -v -keystore myquasar-release-key.keystore -alias myquasar-release -keyalg RSA -keysize 2048 -validity 20000
Next sign the APK using jarsigner
which also comes with the JDK.
cd to C:\Users\kevin\Documents\vue\myquasar\src-cordova\platforms\android\app\build\outputs\apk\release\
and run the command below.
# jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore <path-to-unsigned-apk-file> alias_name
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore C:\Users\kevin\Documents\keys\myquasar-release-key.keystore app-release-unsigned.apk myquasar-release
Lastly run zipalign
to optimise the APK and generate the final APK file. zipalign is part of the Android SDK. In my setup it is located in C:\Users\kevin\AppData\Local\Android\Sdk\build-tools\29.0.2
In the same directory as above run the below command to generate the final file myquasar.signed.apk
(If your Android SDK is installed in a different directory just change the path below to yours.)
# zipalign -v 4 <path-to-same-apk-file> HelloWorld.apk
C:\Users\kevin\AppData\Local\Android\Sdk\build-tools\29.0.2\zipalign -v 4 app-release-unsigned.apk myquasar.signed.apk
(See this page for more information - https://quasar.dev/quasar-cli/developing-cordova-apps/publishing-to-store)
You can now copy the APK onto your phone and install it as an app!
You can also use this APK to upload into Google Play. For iOS users, the process will be similar to this tutorial. Sorry I do