How To Add Twitter Login to Ionic 4 Apps | Appery.io

We’ve added a new Twitter Login plug-in that allows users to log in to your Appery.io application with Twitter credentials. Check out our new tutorial to learn how to install the plug-in to your web or mobile app.

How To Add Custom Pop-Ups to Ionic 4 Apps | Appery.io

Check out our new tutorial that shows you how to add custom pop-ups to your Appery.io app. You can add error or success messages, custom notifications, prompt windows, and more — all by installing the SweetAlert2 module to your app.

How to Add Apple ID Login to Ionic 4 Apps | Appery.io

Appery.io allows developers to create apps that support sign in with Apple ID. To add this feature to your application, you simply need to install and configure our new Login with Apple plug-in.

Managing Android and iOS Certificates on the Appery.io Platform

To publish your Appery.io apps on the App Store and Google Play, you need iOS and Android certificates. These documents validate that you are a trusted developer and your application is secure to use. Watch our latest video to learn how to create such certificates.

More Ionic 4 Video Tutorials Have Arrived: “Copy to Clipboard” and “Hash code calculation”

Dear Appery.io Community,

This week, we are introducing two new highly demanded Ionic 4 video tutorials: “Copy to Clipboard” and “Hash code calculation”.

The first video demonstrates how you can add the copy to clipboard feature into your Ionic 4 application:

The second video tutorial explains how to calculate a hash code of string in an Ionic 4 app:

We hope you will find them both useful.

Happy developing!

How to Create an Event App with Appery.io

In our latest video, Alexander from the Appery.io team will walk you through the process of creating an event app. This application will use several plug-ins to search for the best places to party in a particular area and display them on an online map.

Ionic 4 Secure Storing Data into Mobile Application

Please check out the new Ionic 4 Secure Storage Plugin tutorial on our Appery.io channel. In this video, you will learn how to use the Appery.io Secure Storage Plugin to securely store data in your own mobile application.

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:

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.

Check Out These Brand New Ionic 4 Tutorials and Guides

New Ionic 4 tutorials and guides are out! They focus on the most in-demand features of Ionic 4 like push notifications and linking Appery.io projects to databases of different types, so these should be of great interest to our user community.

Check out these six resources:

  • Ionic 4 Todo List Tutorial
  • Working with Appery.io Database and Server Code
  • Ionic 4 File Upload App Using Cordova Plug-ins
  • Ionic 4 Two-factor Authentication
  • Push Notifications for Ionic 4 Apps
  • Creating a Development Environment for Ionic 4 Projects

Ionic 4 Todo List Tutorial

First on the list is an easy-to-follow and very detailed Ionic 4 Todo List Tutorial explaining how to build a mobile app that displays a list of data from a cloud database and communicates with the database via a REST API. (A nice name for a to-do-tutorial, don’t you think?) What’s really useful for those only starting their Appery.io experience is that this tutorial shows how to create an Appery.io database from scratch and integrate the database service into the project.

As a bonus feature, new users can also just follow the tutorial to create the app from a ready-to-go backup.
ToDo

Working with Appery.io Database and Server Code

In yet another detailed guide, Working with Appery.io Database and Server Code, we show you how to work with the Appery.io NoSQL Database using Server Code scripts. This will be welcomed by more advanced users, but should also not be too difficult for those who have just joined Appery.io. You will learn how to access the database and perform all the basic CRUD operations on the data stored: creating, reading, editing, and deleting with the Server Code Collection API.
DatabaseSC

Ionic 4 File Upload App Using Cordova Plug-ins

Another tutorial describes how to create an Ionic 4 app that can upload files from the device to Firebase project storage using several Cordova plug-ins: Ionic 4 File Upload App Using Cordova Plug-ins.

FirebasePhotosUploaded

Ionic 4 Two-factor Authentication

The next guide, a two-part guide, Ionic 4 Two-factor Authentication, will walk you through the process of adding two-factor authentication using Twilio and a user registration feature with phone binding to your Appery.io app. In the first part, you will learn how to add a user registration feature with phone binding. In the second part, you will learn how to automatically read verification codes on Android devices.
2FactorAuth

Push Notifications for Ionic 4 Apps

The following quickstart tutorial will undoubtedly be very popular as it describes how to set up sending push notifications for Ionic 4 projects: Push Notifications for Ionic 4 App.
PN

Creating a Development Environment for Ionic 4 Projects

And, last but not least, here’s the expert-level document that demonstrates how to create a development environment to be used for debugging the changes you have made for your app’s next release without interfering with the the app version in production: Creating Development Environment for Ionic 4 projects.

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

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!