Blog

Dear Appery.io Community,

We are excited to announce that our first Release of 2023 is already live and you are free to check out what new features and upgrades are already available to all Appery.io users!

First things first: we have successfully upgraded our App Builder to Ionic 6 and Angular 15, which resulted in many useful functional improvements and new features for your app-building experience. Most of them are not immediately noticeable, except in a few cases, but innovative and qualitative.

• The first improvement we would like to introduce is related to the system capability: thanks to upgrading to Angular 15, there will exist no limitations in importing npm packages and modules to your apps anymore.

Check here for some examples of how you can add the npm-modules to the projects created with Appery.io.

Updated Preview Page:

•  The serious upgrade that will hopefully be noticed and welcomed by you: our App Builder now has a very modern-looking editor mobile frame design. Besides, it now comes with an upgraded app preview page that is now user-friendlier and offers more functionality. From the preview page, now not only can you adjust your app’s UI on the device screen with further easy testing it on your device but also publish and share your app right from the preview:

• Moreover, those who decide to publish their project as a mobile web app will be able to share it right from the preview.

New and updated UI Components PALETTE

• Next, we are proud to announce that two new UI components have been added to our App Builder for Ionic: Audio and Video. These new components offer you rich customization options for your multimedia resources:

• The existing Datetime component has also been upgraded and now comes with two views to select from, Inline which opens an inline calendar, and Open in modal which opens the modal with a calendar and an editable label:

• One more enhancement: all the components that offer the option of entering strings now allow users to edit them inline right in the mobile frame, and that is a very handy time saver:

• The next three features refer to the components’ properties upgrades: 1) the Position property was added to many UI components like Checkbox, DataTable, etc.; 2) many UI components that contain labels, for example, Input and Link received the Font Size and Font Weight properties; 3) the Text in Editor property was added to several UI components. With this feature enabled, you will be able to finetune your app UI right in the editor even if this component also has some functional code added as its Text property:

Filtering feature added to OUTLINE and Mapping editor

• The OUTLINE view now comes with a useful feature of filtering components added to the screen. Just start typing the name of the component to retrieve its parent(s) on the tree and quickly locate the component you are looking for:

• Users struggling with cumbersome mappings may find the new Mapping editor option of filtering components (similar to how it is realized in the OUTLINE) particularly useful:

Other enhancements

• The next improvement is minor but comfortable: the Method selection can be changed after the function has been created in the CODE panel:

• Our last enhancement might also seem rather minor, but will definitely be found useful by our users: the ability to double-click on many of the UI components added to the mobile frame of our App Builder in order to speed up the process of customizing them. By double-clicking the Image component, for example, you can immediately access the Media Manager window and thus work with your custom image files more easily:

Oh man, that list was impressive, wasn’t it?

Well, we tried to do our best to make the features above functional and easy to use as much as possible, and hope you’ll enjoy using them.

Thank you for using Appery.io and Happy Developing!

Your Appery.io Team

Our new tutorial tells you how to create a connection to a relational database and use it in Appery.io projects. Watch it now.

Dear Appery.io Community,

We are excited to announce the new features included into our new release, which is already here. So, please make sure you do not miss them:

• Ionic 5 Text Area component. This is something that many of you have been asking for. The component is available to all our users and can be found in the App Builder PALETTE.
• Improved performance of Ionic 4/5 preview. And this is great news since loading the project preview takes less time now, making your development experience even more positive and productive.
• Improved Ace editor with added autocomplete option: 
• Added rich editor for variable’s value in Ionic 5 projects. Now, if you need to provide a long line of code or add some object or array to your variable, just click the three-dot button next to the Value field:
• Full support of Android 11.
• A bonus feature is the possibility to quickly add the predefined dark theme for your apps by using our Dark Theme plug-in:

And, the last but not the least: bug fixes (not too much, though).

Have you ever wondered what low-code app development pitfalls might get in the way of your product becoming successful? And what can be done to avoid them? Actually, it would be true to say that most, if not all of low-code developers have.

Well, some good news is that you can now find some of the answers to such questions in a new brand-neutral, yet highly informative article from two Appery.io people: Eldar Chernitsky,  head of product at Appery.io, and Alexander Ancipov,  head of development at Appery.io.

Please follow the link to read the post “3 major low-code app development pitfalls and how to avoid them” published by Software Development Times, a leading monthly magazine for Software and Development Managers, DevOps teams, Test & QA professionals, and CIO’s.

Two months ago, we announced the winning apps from the Appery.io COVID-19 Virtual Hackathon. Today, we would like to present one of them to you. “Deep Breath” is a relaxation app featuring a number of timed meditation exercises, as well as an assortment of relaxing nature sounds to aid in sleep.

App Description

This awesome app is designed to help people relax by making 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 a playlist of relaxing sounds from nature, which can be of great help in case you have trouble sleeping.

You can try the app by actually creating it as an app from a backup file. To restore the app from a 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 the 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 plug-ins under the Resources > Cordova plugins tab:

• Email Composer plug-in;
• Music Controls plug-in (use the exact GitHub link and plug-in version indicated);
• Screen Orientation plug-in version 3.0.2 (use the exact GitHub link and plug-in version indicated). When importing this plug-in 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 in the screenshot below:

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

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

Please, note as well that if you need to build the app for iOS, you will need to upload your distribution certificate and provisioning profile that you obtained from Apple under the App settings > iOS binary tab. You can check this document in case you need help with exporting your application for iOS. And, here, you will find the document that explains how to manage certificates in Appery.io.

Finally, when you are all set, you can proceed with exporting your app (EXPORT > Binary (.apk) or EXPORT > Binary (.ipa)) and then installing it on your device.

See. It looks just beautiful.

Using the App

The app UI is intuitive and attractive. You navigate through the app using a bottom tabs bar.

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:

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 audio on the device, the user can then use the music controls that are shown. The app uses the Cordova Music Controls plug-in for this.

The Feedback page uses the Email Composer Cordova plug-in for composing emails on mobile devices; for desktop machines, it uses a simple HTML ”mailto:” link.

The exercise data is stored in a 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, whose attributes depend on the timer value.

Finally, the Screen Orientation Cordova plug-in forces the app to use the portrait mode.

Geolocation is one of the most widely used APIs in mobile apps today. From weather to Uber and Lyft, the device location is crucial information and many APIs use it to determine what services and products are available in a given location. When building a mobile app in Appery.io, using the Geolocation API is simple. Apache Cordova library is built-in in every new Appery.io app. Invoking Geolocation will return the latitude, longitude (and other) information which can then be passed to any REST API. The following two short videos show how to use and invoke Geolocation in an Ionic and jQuery Mobile apps:

• A Quick Guide to Using Geolocation API (Ionic App) 
• A Quick Guide to Using Geolocation API (jQuery Mobile App)

Looking for more videos like that? Check out our YouTube channel for many more videos.