Keep Calm…and Code Using Ionic 4 and Appery.io

Posted: April 1st, 2020Author:

In today’s time of unprecedented troubles and uncertainty we are happy to be able to give some bit of satisfaction to the Appery.io community: a bunch of new Ionic 4 tutorials have arrived so that you can immerse yourself in a new level of programming and be more optimistic about your future.

Over time we have been working hard to document Appery.io Ionic 4 components as thoroughly as possible. This documentation will help you understand better how the Ionic 4 app UI can be managed in the best possible way for your particular project.

App Template Tutorial

If you are only starting on your Appery.io programming journey, you will definitely find our pre-defined Ionic 4 app templates useful. To get oriented on this topic review: Ionic 4 App Templates.

Cordova Plug-in Tutorials

We have also published several easy-to-follow tutorials that demonstrate the effective use of Cordova plug-ins in Appery.io Ionic 4 projects:

Ionic 4 Calendar plugin Tutorial

Ionic 4 Document Scanner plugin Tutorial

Ionic 4 Social Sharing plugin Tutorial

 

More Sample App Tutorials

These tutorials describe how to develop some cool Ionic 4 apps:

Just take a look at how intriguing these examples are as you work through them!

Note: Most of the tutorials come with app backups that make the tutorials easier to go through.


We hope this “to-do list” of Appery.io tutorials will help you get through these trying times and make your #StayAtHome times less burdensome and as efficient and pleasant as possible.

Stay with us and hope for better times soon!

Another New Ionic 4 Tutorial: Learn How to Create a Login Form with Validation

Posted: February 7th, 2020Author:

This time we are happy to offer a new tutorial that describes step-by-step how to create an Ionic 4 app in which a login form with validation is used.

Prebuilt App Option

For this tutorial, we have added an option for you to explore a finished app before following the tutorial steps. To do this, first, download this backup file for the project. Then, click Create new app in the platform. Finish up with these steps:

  1. Select From backup
  2. Select the project backup file on your drive
  3. Type in the app name
  4. Click Create

Building from Scratch

However, if you just want to follow the tutorial to build the app from scratch, it’ll be quite easy. The tutorial includes many screenshots and detailed explanations to keep you from getting lost in the twists and turns of development.

 


And of course, stay tuned! We are working on adding even more Ionic 4 tutorials!

Learn How to Create Chatbot App Using Dialogflow

Posted: January 31st, 2020Author:

Meet Our November 2019 Release

Posted: November 4th, 2019Author:

It’s only been a month since Ionic Angular was updated to the 4.10.0 version, but we are already out with an updated Appery.io Ionic 4 version!

Events

In our updated Ionic 4 apps, we now support more events for certain components.

Page component

  • The ionViewWillEnter event runs when the page is about to enter and become active

Image component

  • The ionImgWillLoad event is emitted when img src has been set
  • The ionError event is emitted when img fails to load

Also, support for these mouse events was added to the GoogleMapMarker, and GoogleMapWindow components:

  • Click
  • Mouse over
  • Mouse leave

Mapping

Now you can use mapping for your models defined within an app:

Storages

We have also added support for Storages. This will allow developers to define typed storage variables and use them in mapping.

Simpler Coding

And last but not least: There is no longer any need to add service include and service injection on a screen or in a custom code anymore. Just add a plug-in in App Settings under the Core Cordova plugins tab and use it from Apperyio.native helper.

Check Out Our New Ionic 4 Tutorials

Posted: October 21st, 2019Author:

Recently we rolled out a new Google Maps Tutorial for Appery.io’s Ionic 4 Builder. But, today, the Appery.io team can offer more help for our valued users to get the most out of Ionic 4! We have always tried to make developing with our platform as easy as possible, and, this time, we do so by presenting two more step-by-step tutorials on building with Ionic 4:

Ionic 4 ngx-translate Tutorial

The first tutorial will guide you through the process of creating an app using the ngx-translate third-party internationalization (i18n) library to build a spectacular multilingual application:

Ionic 4 SweetAlert2 Tutorial

The second tutorial will help you add the SweetAlert2 external module to display modal windows in your Ionic 4 app:


Both of these topics have often been requested as tutorial subjects, so we look forward to seeing a lot more implementations in Appery.io apps. We also hope our tutorials help you build up a broader understanding of how everything works with Appery.io backed up by Ionic 4 features.

Quick Note: Issues on iOS 13 Devices

Posted: October 18th, 2019Author:

Recently, we’ve noticed quite a few comments about appery.io apps not working properly on iOS 13 devices. The underlying reason is that we use Cordova APIs for apps developed for installation on native devices. And, iOS 13 isn’t officially supported by Cordova yet, so it’s possible appery.io apps on iOS 13 devices might have problems.

Rest assured, as soon as Cordova releases a version with iOS 13 support, we will take care of the necessary updating as soon as possible. (Or, if necessary, we will provide our own temporary fix.)

Thank you for your understanding!


Please check for more details in the Appery.io device and browser support policy.

Learn How to Use the Google Map Component in an Ionic 4 App

Posted: October 10th, 2019Author:

We have some good news for Appery.io users. Another tutorial on Ionic 4 has arrived!

You should have already seen that Appery.io offers an Ionic 4 Google Map component. In this new tutorial, follow step-by-step how to use this component in creating an Ionic 4 app with the Geolocation service to show current coordinates on a map. (Google Maps API key required.) Working with this component is easy. Simply drag it to the page, configure it via the PROPERTIES panel like any other UI component, and then use it with the Google Maps API via JavaScript.And, as a bonus, please check our new instructional video that shows how to use a Google Maps component in Ionic 4 apps here.

A Quick General Guide to App Management

Posted: August 15th, 2019Author:

In this post, we cover some features for app management in Appery.io. Many new Appery.io customers will find the answers to frequently asked questions like:

Can I make sure that my application and data are saved securely?
Is it possible to keep my project/database/server code, etc. for future use?
How can I manage my apps/databases/Server Code/API Express data efficiently?

And who knows—this post might also be helpful for some users that have been with Appery.io for some time already. 🙂

Making Project Backups

So, good news. All of your Appery.io projects can be easily saved. You can create a backup of any existing app and restore it later or even transfer it to another account if necessary.

By making a backup of an app you can save all the created pages with their UI and services, enabled plugins, libraries versions, keys and binaries, themes, JavaScript, CSS, etc. The structure of the application also remains unchanged. Sounds great, doesn’t it?

And all you need to do is to select an app under the Apps tab, go to the General tab and click Backup:

 

 

A new window opens allowing you to select where you would like to save your backup.

IMPORTANT: If you need to create a backup of the database for further use together with your app, you will have to save it separately by exporting its data to JSON or CSV (check below for how to do it) and all of the databases connections will need to be recreated. The same applies to API Express projects and Server Code.

We also recommend saving all custom generated data like Apple provisioning profiles or those involving 3rd party Push notification providers like Firebase Cloud Messaging(FCM) and legacy Google Cloud Messaging (GCM) since it cannot be saved in backups either.

Under the Apps tab, you can also create backups of the plug-ins you have:

 

 

Creating App Versions

It’s a good idea as well to make app versions as you go along during your development so that you can more easily experimenting with your project.

Later, you will be able to go the General tab, scroll down to the Versions section, restore the necessary app version and create another backup if needed.

Working with Databases

Another piece of good news is that you are also free to copy the current database instance as saved version. To create a new database version, under the Databases tab, open the Versions tab and click New Version. The process will be initiated and when the version copy is ready, you will be notified with am “Appery DB operation completed” email signifying that your database version has been successfully created and can be accessed from the Databases list under your Appery.io account:

 

 

Moreover, when you switch to the Settings tab, you will be able to:

  • Rename the database
  • Delete the database
  • Clone the database
  • Export all database data to JSON or CSV.

The last two options can also be used to keep your database safe for future use which is a great option to take into consideration:

 

Managing Server Code Scripts

Working with server codes is organized under the corresponding Server Code tab. Select the code you would like to manage from the Scripts list in your App Builder and select the needed option. This would be Load from file to upload the previously saved or prepared script or Download to save the script for future use:

 

Similarly, you can organize your libraries: under the Server Code tab, scroll down to the Libraries section, select the library, and click Load from file (to upload the previously saved or prepared library) or Download (to save the library for future use):

 

You can also delete or clone Server Code scripts or libraries of your choice. To do this, go to the Server Code tab, open the Settings tab of the needed resource, and select the necessary option:

Exporting API Express backups

Similarly, the Settings tab under the API Express tab provides the option of exporting backups of your selected API Express projects along with the basic options of editing and deleting them:

 

Now, meet the last but not the least great backup feature: with Appery.io, not only creating API Express projects backups is possible: you can easily create a backup of any database connection you might need.

To make use of this feature, scroll down to the Database connections section under the API Express tab, select the connection to be exported, switch to the Settings tab, and click Export backup:

 

 

IMPORTANT: Please be aware that this option allows the creation of database connection backups independently, so, to run correctly, they will have to be recreated and linked to your new project from scratch!

Importing Backups or Saved Data Back

Importing backups and other saved data is even easier. Just select the appropriate tab (Apps, Databases, Server Code, or API Express) and click the green button Create new … In the new window, choose the previously saved backup file to be imported, name it, and hit Create. You will need to wait a bit and then… Congratulations! You’re done!

IMPORTANT: Please be aware that you will need to make backups under the corresponding tabs and import them back under the same tabs.

Check below how to create a new app from backup:

 

When creating a script you can select whether you would like to upload a previously saved file (click Load from file) or use one of the ready-to-go snippets created to simplify the development process (select the snippet you need and click insert to add it to the code). Then, save:

 

 

Now, if you switch to the Plugins tab, you will be able to create scripts from the out-of-the-box plug-ins list. All you need to do is to click import and check the plug-in added to the Scripts list:

 

 

That wasn’t hard, was it? But if it was …

We Are Here to Help

Please remember, if you experience problems with creating backups or saving your data or any other issues with your first (or second or third, etc.) app, you are always welcome to ask for help. Our friendly Appery.io email support (submit your ticket from inside the App Builder by clicking the Get Help button in the upper right corner) and Appery.io forum community are here to assist you. Find more information about how you can get help and advice about other great Appery.io services here.

Learn How to Show Information in Ionic Pop-ups

Posted: June 5th, 2019Author: and

In this post, you will learn how to add information to a pop-up in an Ionic application.

Setting Up the App

To start with, let’s create a new Ionic app.

  1. From the Apps page, click Create new app > Ionic, give it a name, and click Create.
  2. Open Pages and go to Screen1. Under the DESIGN tab, add a Text component to the page, select it, and define its Text property as Username: {{username}}.
  3. Next, drag and drop an Input component to the page and set username as its ng-model.
  4. Add one more component to the Screen1 page, a Button with Text: Edit and ng-clickedit().

   The page UI should look like this:

  1. Now, in the Project view, open the Project > Model tab, create a new model of Object type, and name it Global. Add a string parameter to it named username
  2. Next, add a new variable, name it global, and select Global for Type under the SCOPE tab of the index page: 
  3. After that, switch to the Screen1 page, and under the SCOPE tab, add a new scope function named edit and provide it with the following code where the added global variable in the template of the popup is defined:

    Note, that in the code, any title can be provided and any HTML code can be added for template.

And…we are done!

Using the App

Now, to check the app, click Test. In a new window, put in Jane for Username and click Edit. The popup with this username will appear:

To enter a different name, just type it in and confirm by clicking OK. The local variable will be modified and the output can be instantly seen:

BTW: If you are into customizing your UI, here is a piece of good news. You can easily customize the looks of your pop-up:

New Tutorial on Using IndexedDB to Work with Images Offline

Posted: April 19th, 2019Author:

A piece of good news for the users who were interested in combining Login-Registration App and IndexedDB Storage but lacked information on how that can be done practically!

The Appery.io team would like to bring to your attention that a new tutorial has been published that provides step-by-step instructions on building an app that will get user images from the custom Files collection and make them available when the device is in offline mode.

The tutorial describes in details how one can save a set of images from Appery.io Files collection into IndexedDB cache with further making them available to users when the app goes offline.

Besides, it presents the list of functions provided by the IndexedDB Storage plugin which was introduced in Appery.io builder for your convenience:

A very interesting detail: this sample app can be published either as a regular iOS and/or Android app or as a PWA website.

Enjoy your programming with Appery.io!