Effortless App Mastery: Unveiling Appery.io’s Admin Secrets

Hey there, app enthusiasts!

Welcome back to another insightful journey into the world of app development with Appery.io. In our previous video, we took a deep dive into customizing our Menu app template (You can check here if you missed the post). Today, we’re stepping up the game with a focus on a particularly handy feature for admins.

Imagine being able to tweak your app’s content or adjust prices without the hassle of logging into complex interfaces. Well, with Appery.io, that’s not just a dream—it’s a reality. Let’s explore how you can wield this power right from your device.

Accessing Database User Records:

Before diving in, we need to set up a few things. Head over to the App Builder and navigate to the Database link. Within the Menu_DB database, locate the Collections tab and access the Users collection. Here, you’ll set your password or email address for easy access.

Routing for Admin Convenience:

Next, let’s streamline the admin experience. Within the App Builder, navigate to Project > Routing. Set the default route to the Login page, ensuring swift access for admins. Don’t forget to save your changes—it’s the small steps that lead to big convenience gains!

Testing Made Easy:

Now, for the exciting part—testing your app. Sure, you could export it for Android or iOS, but why not take a quicker route? Enter the Tester app, a free gem available for both platforms. Fire it up, scan the generated code, and voila! You’re in.

Admin Delight:

Once logged in, you’re greeted with the Menu management page, your gateway to culinary control. Edit, reorder, or add new meals with a few taps. It’s intuitive, it’s efficient—it’s a game-changer.

Smooth Sailing:

With edits made and changes applied seamlessly, your app is ready for prime time. Hide the Controls menu for a clutter-free interface, ensuring a seamless user experience.

The Finishing Touch:

With everything in place, it’s time to share your masterpiece with the world. Save your app, click Close, and head over to the Hosting section. Name your project, hit Publish, and watch as your app goes live. It’s that simple.

  

Bon Appétit!

Print that QR code, place it on your tables, and let your guests indulge in the convenience of browsing your menu in their preferred language. With Appery.io, satisfying appetites has never been easier.

If you found this guide helpful, don’t forget to subscribe to Appery.io to try more handy tips and tricks. And hey, if you’re loving what we’re doing, why not join us on our YouTube channel?

Until next time, happy app building!

 
 
 
 
 
 
 
 

Create Your Superior PWAs with Ease

The journey of crafting exceptional Progressive Web Apps (PWAs) just received a game-changing upgrade! Appery.io, the leading low-code app development platform, has triumphantly resolved the persistent challenge of automatic PWA app updates. This breakthrough firmly establishes Appery.io as the go-to solution for effortless PWA creation.

Automatic PWA App Updates – A Game-Changer

Imagine PWAs that update seamlessly without any manual intervention. Appery.io’s innovation eliminates the hassle of manual updates, ensuring users always access the latest version effortlessly. This breakthrough guarantees a consistently fresh and up-to-date user experience, setting a new standard in PWA development.

Now, to make sure your app created with the Appery.io App Builder and distributed as a PWA gets automatic updates, all you need to do is go to the configuration settings located in the project App Settings > PWA section and check the Enable autoupdate checkbox:

Tada! From now on, if your app gets any updates, you just publish them in the Appery.io App Builder, and … that’s it! Next time your users run the app it will be automatically updated without any effort on their part.

As a bonus, Appery.io offers another useful option: showing your users the Install App dialog. Now, if you select to show it, the Install button will be shown on Android:

The iOS users will get instructions on how to add the app to the device’s home screen:

PS We have also published a short how-to YouTube video to assist with creating your first PWA.

Doesn’t this look easy enough to make you want to create your first PWA with no manual updates hassle?

Are you ready to revolutionize your PWA development experience?

Sign up with Appery.io today and witness the evolution of PWA development!

September release $a, $v, Appery Helper and Global Functions

Today we are pleased to announce the September release of appery.io with new alias $a of Appery helper, global variable $v and global functions!

Let’s look at what’s new

 

$a

‘$a’ is an alias for the Appery helper ‘Apperyio’. Now, instead of writing:

this.Apperyio.navigateTo("Screen1");

you can use a much shorter form:

this.$a.navigateTo("Screen1");

 

$v

‘$v’ is an alias for global variables that were previously accessed through Apperyio.vars.

$v is a place for storing any data as ‘global’. For example, to transfer data between screens.

this.$v.myData = 12345;
this.$v.userInfo = {id: 123, name: 'Joe'};

For more detailed information about ‘$v’, you can refer to our documentation https://docs.appery.io/docs/6-model-and-storage#apperyio-global-variable

 

Appery Helper

The list of functions and properties for the Appery helper ‘$a’ has been significantly expanded. This expansion greatly simplifies the invocation of the most commonly used operations. For example, if you need to display a modal window and pass parameters to it, this can now be achieved in a single line of code:

let data = await this.$a.modal("EditUser", {name: 'john'});

If you need to display a loading indicator, a simple call will do:

await this.$a.showLoading();

And if you need to perform a GET request:

let res = await this.$a.get("https://mydomain.com/user/12345");

You can explore the full list of available functions on this page: https://docs.appery.io/reference/common-methods-and-properties

 

Global Functions

Global functions have been added. Now, in the Functions section under Modal and Storage, you can define a function, for example ‘sum’, which will be accessible on all screens, custom components, services, etc., using this.$v.sum()

 

For more detailed information about global functions, you can refer to our documentation https://docs.appery.io/docs/6-model-and-storage#global-functions

 

We believe this new feature will be of great value to our users. We appreciate your continued use of Appery.io, and we wish you a happy developing!

Thank you for using Appery.io and Happy Developing!

Your Appery.io Team

Support for Android 13, API level 33

We’re excited to announce the introduction of the latest Appery.io release, which includes support for Android 13 (API level 33).

While many of the Appery projects were upgraded automatically, we aimed to keep manual application changes to a minimum to ensure a smooth transition for all users.
– Please ensure that you have not manually modified the config.xml file in the source tab. If any modifications were made to this file, kindly follow these steps: Remove the file and execute the “Undo all source changes” operation for the CORDOVA folder.

 

– Additionally, for some users, it may be necessary to access the App Settings. From there, navigate to Cordova Config, then proceed to the Android tab. Ensure that the property “GradlePluginKotlinVersion” is present with the value “1.6.20” (refer to the provided image for visual guidance). If this property is missing, kindly add it manually.

 

We believe this new feature will be of great value to our users. We appreciate your continued use of Appery.io, and we wish you a happy developing!

Thank you for using Appery.io and Happy Developing!

Your Appery.io Team

Appery.io First Release of 2023: What’s In?

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

Connecting to a Relational Database and Using It in Appery.io Applications

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

The July 2021 release is here. What’s in?

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).

Want to learn how to deal with low-code app development pitfalls?

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.

Meet a Winning App from Our COVID-19 Hackathon

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.

How to Use Geolocation in Your Mobile App

geolacation_map

 

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:

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