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

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!

How to Build a Sample Ionic 3 Search App

Posted: February 28th, 2019Author: , and

This is a continuation of the post How to Build a Sample Ionic 3 List App. In this document, we will provide step-by-step instructions on modifying your Ionic 3 list app so that data can be shared between its pages.

Remember, you can only proceed with the steps in this post only after you have made sure the application from the previous post works as expected.

  1. To begin with, go to the Databases tab and open the database to be used in the app. Make sure the needed collection has a column of string type named description. If needed, create it by clicking the +Col button and filling it with data:
  2. Once done, switch to the Apps tab and open the Sample Ionic 3 app created in the previous blog post. In the Project view tree, click Model. There, define the models so that they look like the following (note that, here, the SingleItem model is renamed to Item):
  3. A Query service from the collection should be imported in this step: Create new > Database Service; in the new window, select the database and check the Query service checkbox of the needed collection. Click Import selected services to confirm: The subfolder with the corresponding name should now have been added to the Services folder in the Project view tree.
  4. It is time to add a new pageCreate new > Page, set the page name to Details, and confirm by clicking Create Page.
  5. Under the PROPERTIES tab, change the Navbar Text component to Details.
  6. Drag and drop a Text component on the page and define its Text property as {{name}} selecting h1 for the Container property.
  7. Now, add another Text component to the page and set its Text property to {{description}}:
  8. Switch to the CODE tab, click Edit internal includes, and, in the pop-up window, scroll down to find { NavParams } from “ionic-angular”. Then check it and confirm the selection by clicking Save:
  9. Then, proceed to the Variables section adding and defining variables as follows (ensure the private navParams variable is checked in the Add DI checkbox):
  10. To finish with the Details page, add a new function to it, name it constructor, and define it with this JavaScript code:
  11. In the next step, some changes to the existing List page should be made. So, in the DESIGN view, under the PROPERTIES tab, select the Navbar Text component and rename it to List.
  12. Now, place the Input component on the page and define its [(ngModel)] property as query.
  13. Modify the existing List item by adding a new attribute (click)navCtrl.push(“Details”, item):
  14. Rename the Button Text property to SEARCH and change its (click) attribute to search() that will initiate navigation to the other page (Details) of the app (if you decide to keep the list functionality in the new app, create a new button for search so that there will be two of them):
  15. Once done, open the CODE tab and click Edit internal includes. Check 2 dependencies: { NavController } from “ionic-angular” and your added query dependency (the last on the dependencies list) in the Dependencies pop-up window. The List service can be unchecked now if not used for the modified app.
  16. Save. The services with the corresponding names should now be added under Internal includes:
  17. After that, add 2 variables: query of type String and queryService of the type of your query service (added to Internal includes). Make sure the Add DI checkboxes for private navCtrl and queryService variables are checked. (Delete the listService variable if it will not be used in the app.)
  18. Finally, add a function to the page named search and define it with this JavaScript code (the loadList function will not be used so it can be deleted):

    Voilà!

    The app is ready for testing. Click the arrow button next to the Test menu item. In the drop-down, select Show without frame and click Launch. The List page will be loaded. Enter the name of the item from your database collection (for example, Coat) and click SEARCH. The item Coat will be returned on the page. Then, click this item to open the Details page with the item description:

    Note: You might also want to leave the List service functionality created earlier. In this case, both List and Query services should work as expected.

Update from Google Play

Posted: February 20th, 2019Author: and

We would like to inform you that Google has updated their Developer Policy to make apps published with Google Play compliant with user Privacy, Security, and Deception policy and now restricts the use of high risk or sensitive permissions, including the SMS or Call Log permission groups.

Please review these permissions in your Appery.io project(s) on the App Settings page (Project->App Settings->Android Permissions).

If such permissions are not used by your application but are enabled, please disable them. Once done, upload an updated app version to Google Play to ensure it will be allowed by Google.

If your application requests the use of such permissions, you will be required to submit the Permissions Declaration Form to receive approval from Google Play. Once your Permission Declaration is reviewed and your app is approved for policy compliance to the Google Play Developer Distribution Agreement, your application will be published.

Note:

Completing the form is required even if the application does not use such permissions, so please select any items there and add a comment like: “I’ve selected one just to submit a form, the app doesn’t require that feature”.

How to Build a Sample Ionic 3 List App

Posted: February 9th, 2019Author: , and

This post will describe step-by-step how to build a sample app with Ionic 3 that will retrieve a list from your database collection.

  1. Create a new Ionic 3 app. From the Apps page, click Create new app > Ionic 3 (beta), give it a name, and click Create.
  2. Import the List service from any existing or newly created Appery.io database collection. Create new > Database Service, select the needed database and check the List service checkbox confirming import.
    The subfolder with the corresponding name should now have been added to the Services folder in the Project view tree.
  3. Add a model called SingleItem of type Object and 2 attributes: name and _id. Then, add the Items model of Array type and define it in the following way:
  4. Open Pages and rename Screen1 to List using the “cog” sign.
  5. Under the DESIGN tab, add a List component to the List page and delete the 2nd and 3rd items on the list.
  6. Select the List item and add the property *ngFor=let item of items. Also, set the Text property to {{item.name}}.
  7. Now, add a Button component to the page, select it, and define its Text property as Load List and (click) property as loadList().
  8. Switch to the CODE tab, click Edit internal includes, check your added list service, and save:The service with the corresponding name should now be added under Internal includes.
  9. Add 2 variables: items of type Items and listService of the type of your list service (added to Internal includes). Check the Add DI checkbox for listService.
  10. Finally, add a function, name it loadList, and define it with this JavaScript code:

Voilà!

You can now test your app. To do so, click the arrow button next to the Test menu item. In the drop-down, select Show without frame and click Launch. The page will be loaded. Now, click the Load list button. The list appears loaded with the items from the database:Note: To learn how this app can be modified to search and share data across its pages, proceed with this post.

What about iOS 11 Support?

Posted: September 22nd, 2017Author:

iOS 11 came out of beta on September 19th. But, don’t worry. The Appery.io team is close to putting the final touches on our full support for the new version of the iOS. As soon as it’s ready, we will be announcing it here. Stay tuned!

A Quick Note: GeoPoint Data Type Update

Posted: September 12th, 2017Author:

OAuth Login with Google App in Android/iOS Apps (An Update)

Posted: July 26th, 2017Author:

This blog post supplements “OAuth Login with Google App” in the Appery.io documentation.

Since April 20, 2017, all OAuth requests through InAppBrowser are blocked (see http://blog.ionic.io/google-oauth-changes/ for details). Now it’s necessary to use the Google Sign-In Cordova/PhoneGap plug-in.

So, first of all, download the plug-in and add it to the project (more details on this).  When ready, you can proceed with specifying the settings for iOS or Android apps. We’ll describe both ways and then show you how to set up your app at the end.

Google setting for iOS projects

  1. On the Google project page, go to the Credentials tab and select Create credentials > OAuth client ID
  2. In a new window, select iOS.
  3. Define the Bundle ID (you can get it from App settings > iOS binary > Bundle ID).
  4. Click Create.
  5. Now, copy the iOS URL scheme from the created Client ID:
  6. Add the iOS URL scheme as the REVERSED_CLIENT_ID parameter of the Google Sign-In plug-in and save:

Ready!

Google setting for Android projects

  1. On the Google project page, go to Credentials and select Create credentials > OAuth client ID
  2. In a new window, select Android.
  3. You will need the SHA-1 fingerprint of the certificate that you are using for signing up your app to link the client ID to the app. To get it, export your certificate (Resources > Certificates) and run the following command in the console:

    keytool is a key and certificate management utility.

    It is included in the jdk, you can install either jdk or download the keytool utility.

  4. The obtained SHA1 code should be added to the Signing certificate fingerprint.
  5. Insert the Package name (App settings > Android binary > Package name).
  6. Click Create.

Changes to make to the Appery.io project

  1. Add the button Login with Google on Device on the LoginWithGoogle page.
  2. Add the following JavaScript code to the click event:
  3. Duplicate the Welcome page and rename it to WelcomeOnDevice.
  4. Remove the JavaScript code from the Page show event (leave only Invoke service there).

Please note that the selected Android certificate will only work with the release option enabled.

Moving App Logic to the Server: How to Query the Database from a Server Code Script

Posted: May 24th, 2017Author:

The Appery.io Database provides storage for your mobile app data. You can store data such as users, orders, purchases, products or anything else. The Appery.io Database is a cloud NoSQL database and provides a very simple and elegant REST API to work with the database.

One of the most common cases for an enterprise mobile app is to create/save a new item/record and then redisplay the list in the app with the newly created item.

Accessing the database directly from the client is fine but requires two requests to the database.

  1. A request to save the new item/record into the database.
  2. Once the 1st request completes, on its success, a request to get the updated list to display in the app.

A better approach is to do both the create and list in a single request from the app. This is very simple to do from Appery.io Server Code script. The following script shows how to create a new record and then get the updated list:

In this simple script you first create a new Person object (line 8) and then do another query to get the updated list of people (line 14). The script response returns the updated list of people. This script automatically has a REST API which is the invoked from the app.

What’s most important, there is only a single request from the app to the Server Code script. A single request is usually better than two requests. Also, you can add additional logic to the script without impacting the app. For example, you can send an email when a new person is added. Or, you can send  Push Notification when a new person is added. All this can be done without impacting the app. That’s nice.

If you want to learn more about Server Code, check out our YouTube channel Server Code playlist.