🚧

Important Note!

Note that the option of creating new apps with the Ionic 4 framework was removed and we no longer support the projects that were created with it earlier.
Moreover, you are free to effortlessly migrate your Ionic 4 project(s) to their Ionic version with keeping both apps active.
Please check this page to learn how to do it.

👍

Ionic Deep Breath Sample App

We strongly recommend that you check our upgraded Deep Breath Sample App created with Ionic here!

App Description

This sample app was created with Ionic 4 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 from Backup

You can try the app by creating it from the backup. To restore the app from the backup, follow these steps:

1. Download the app backup file.
2. Click Create new app.
3. Click From backup and select the project backup file on your drive.
4. Type in the app name and click Create:

Setting Up App

Note that before you can export the app .APK or .IPA and install it on your device, you will need to import the following Cordova plugins under the Resources > Cordova plugins tab.

1. Email Composer plugin: https://github.com/katzer/cordova-plugin-email-composer
2. Music Controls plugin: https://github.com/ghenry22/cordova-plugin-music-controls2 (please use exactly the indicated GitHub link and the plugin version).
3. Screen Orientation plugin: https://github.com/apache/cordova-plugin-screen-orientation of version 3.0.2 (please use exactly the indicated GitHub link and the plugin version). When importing this plugin with Git URL, paste https://github.com/apache/cordova-plugin-screen-orientation.git into the Repository URL field and enter 3.0.2 as the Repository branch name, as shown on the screenshot below:

When done, select them in the App builder under the App settings > Cordova plugins > Imported Cordova plugins tab:

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

Exporting App

Finally, when you are all set, you can proceed with exportingyour app (EXPORT > Binary) with further installing it on your device.

And it looks just beautiful:

Exporting for iOS

Please, note as well that to export the app for iOS, you will need to upload your distribution certificate and provisioning profile obtained from Apple under the App settings > iOS binary tab.

👍

iOS Certificate Management

You can check this document in case you need help with exporting your application for iOS. Here, you will find the document that explains how to manage certificates in Appery.io.

Using App

Technical Details

The app uses the Cordova Media plugin 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 play. For this functionality, the app uses the Cordova Music Controls plugin.

The Feedback page uses the Email Composer Cordova plugin for composing emails on mobile devices; for desktop machines, a simple <a> tag with href=”mailto:” attribute is used:

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.
The Screen Orientation Cordova plugin forces the app to use the portrait mode.

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.