Ionic 5 Deep Breath Sample App

Winner of the Appery.io COVID-19 Virtual Hackathon built with Ionic 5

App Description

This sample app was created with Ionic 5 and is designed to help people relax and make it easier to practice self-guided meditations and quick relaxation techniques. These techniques can be practiced on your own with the aid of the app. No special knowledge or experience is required — just follow the exercise steps.
Another app feature is the playlist of relaxing sounds of nature, which can be of great help in case you experience sleeping issues:

Creating App from Template

👍

NEW: One-Click Template Installation!

You can now enjoy the one-click-away option of installing the template app: simply click the button below and in a moment, your app is ready to start! There’s no need to go to the Create new app dialog or download the template backup with further installing it!

Create in Appery.io

Setting Up App

Before you can test the app on your device, you will need to have the Music Controls Cordova plug-in imported under the Resources > Cordova plugins tab:

🚧

Important!

When importing the Music Controls plug-in, please use exactly the indicated GitHub link to get the correct plug-in version (also, don't forget to enter master for the Repository branch field):

When done, just enable it under the App settings > Cordova plugins > Imported Cordova plugins tab:

Also, please make sure that the File, Media, and Screen Orientation plug-ins are added (enabled) in your app (under App settings > Cordova plugins > Core Cordova plugins).

Testing App

Finally, when you are all set, you can select whether you would like to use our Appery.io Tester app or proceed with exporting your app for Android or iOS with further installing it on a device.

And it looks just beautiful:

👍

Appery.io Tester App

A great option to quickly test the app on the device is to use our Appery.io Tester app.
The app is free and available for both iOS and Android.
You can check out this page to learn more about using the Appery.io Tester app.

Using App

Technical Details

The app uses the Cordova Media plug-in for playing audio files, and the native HTML5 audio element is used for playing audio on the desktop. When you play the audio on the device, music controls are shown, allowing the user to control the playback. For this functionality, the app uses the Cordova Music Controls plug-in.

The exercise data is stored in the custom Angular service, dataService.

The auxiliary ngx-countdown module is used for managing the countdown timer on the Timer app page. The progress circle is presented by an SVG element, which attributes depend on the timer value.

App UI

The app UI is intuitive and very attractive.

The Home page nests three different options: MEDITATION TIMER, QUICK RELAX and SLEEP BETTER all of which offer different activities to be used for relaxation:

Navigation through the app can be made using the bottom tabs bar.
Try it yourself to see how it works.


Did this page help you?