Blog

We are excited to announce our new, May 2022, release reintroducing our upgraded Appery.io Tester app, with a brand new feature, Live Debug. We’re confident our Appery.io community is going to love it!

First thing first – our Appery.io Mobile Testing Tool:

This smart and handy testing app is live again and available for download from the App Store and/or Google Play. You’ll enjoy quick and effortless testing of your Appery.io apps on iOS and/or Android devices without needing to rebuild and then reinstall them each time a minor change is made.

Some time ago we closed our Appery.io Tester app support on both stores but our long-term users were emailing us requesting we bring back this handy and simple mobile app testing tool – offering encouraging positive feedback on the tool, and expressing disappointment that we’d removed it. And, as it has always been with Appery.io – 1) you asked … 2) we listened … and 3) … we acted!

Appery.io users who’ve already had a chance to use our testing app will undoubtedly welcome the upgraded version, but those who are fairly new to Appery.io and the Appery.io Tester app, really must read on… If your app has integrated API using native device features, there is no way it can be tested in the desktop web browser, so the only option is (sorry, was, as you now have two terrific options) to export the app by rebuilding its binary and then reinstall the app on the device – just to see how the updated UI and/or added functionality will look like and behave.

From now on, thanks to Appery.io testing tool, you will no longer need to rebuild and then reinstall the app each time a change is made – all you need to do is download and install the app from App Store and/or Google Play, run it on your device and click the SCAN button to scan the QR code you generated in our app builder.

As a bonus, you are free to organize the history of your tests and/or review the sample apps built with Appery.io.

Voilà! Isn’t testing your hybrid mobile app(s) so much easier now?

New Live Debug Feature

Another really great feature, Live Debug, has been added to our App Builder for testing and/or debugging your apps.

This is a game-changing feature for those users who, when developing with our platform, are going on a large scale with importing different custom Cordova plug-ins into their apps, but then having issues testing the complicated app functionality.

Before, you needed to 1) get the app version done, 2) export your app 3) install the app on the device, and only then 4) test it. This was a time-consuming and very tedious process that sometimes needed repeating multiple times until the intended result was achieved.

But now, we are happy to say that this irritating ordeal is a thing of the past! With the new version you only have to select the Live Debug build type (available for both iOS and Android) under the Project > App settings tab (or simply select both), save the app and export your project.

That’s it! The app binary can now be installed on the device and this procedure will NOT have to be repeated every time you modify the application in the app builder. Isn’t that a huge improvement to your development routine? We really hope this is a rhetorical question.

PS: A minor but very handy feature has been added to our app builder that will make it even more comfortable to use, and easily adjustable to different monitor sizes – now, you can switch the PROPERTIES panel views between 2 Panels, 1 Column or Tabs modes:

Below is a practical solution on how we can use customer external sites in Appery.io apps where events & scripts are defined with InAppBrowser Cordova plug-in.

Let’s say your client has a mobile site with lots of pages and different features, but lacks some mobile features like push notifications and he decides to give Appery.io a try. But to migrate all pages and all codes, the effort can be quite large. Perhaps this can be done, but at a later stage. So we made a decision to render the client’s site through the  InAppBrowser component, which is a kind of a browser that can be used inside Appery.io apps. But the control over this component is quite limited, much less than what you have for pages in an Appery.io project.

Of course, the client’s site is protected by login and password. This solution will describe the case where a user logs into an Appery.io app with the same credentials  used to bypass the site’s login screen.

The Appery.io project described in this article can be downloaded under this link.

To open it in Appery, choose Create new app > From Backup, then select the downloaded zip file, click Create, and wait a moment while Appery creates the project for you from the backup.

When finished, you’ll have the InAppBrowser_Autologin project created in your Appery workspace. Assuming you can already do basic operations in Appery, such as creating pages and dragging and dropping UI components from the palette, we’ll just walk you through the highlights of how this project was built, focusing on issues related to InAppBrowser.

To demonstrate these techniques, we have created a multi-page site on Heroku.com. Please click here to visit it. All the site pages except for the Login page are protected by login/password.

We will be accessing this site using InAppBrowser, so we need to have this Cordova plug-in enabled in App settings > Cordova plugins:

Let’s review how all of our InAppBrowser related activities are wrapped in an Angular service that can be used to share variables and code between the app pages. (To create this service in Appery, we performed Create New > TypeScript and named it BrowserService, with the type set to Angular service.) You can check that now we have an initial template ready to be gradually replaced with our functions:

Let’s first check how the constants are defined for our site; these are: the target host, target pages, and IDs of the credential fields on the login page:

/* Target host */

const HOST = 'https://using-inappbrowser.herokuapp.com';

/* Target pages */

const LOGIN_PAGE =  HOST + '/';

const LOGOUT_PAGE =  HOST + '/logout';

const HOME_PAGE = HOST + '/home';

const SCREEN_1 = HOST + '/screen1';

const SCREEN_2 = HOST + '/screen2';

/* IDs of credential fields */

const EMAIL_ID = 'login-form-email';

const PASSWORD_ID = 'login-form-password';

We would like to access Screen1 and Screen2 directly, bypassing the credentials on the Login page. To do this, we use the InAppBrowser ability to track the loaded pages and insert scripts into them.

To see how BrowserService is used on he Menu page of the app, go to the CODE panel and switch to Includes at the top of the page. Here, we added BrowserService to the Internal includes section. We then switched to the Variables section at the top of the page and added the browser variable of type Browser; also, we enabled the Add DI checkbox. This checkbox stands for “dependency injection”, which means that all Angular services in the app are called “dependencies” and can be “injected” into pages:

Everything looks good as we now have a browser variable on the Menu page for our BrowserService, so it can be called by binding TypeScript events to the buttons on the page:

• this.browser.openFirstPage();

• this.browser.openSecondPage();

These functions are implemented in BrowserService as:

public openFirstPage() {

    this.open(SCREEN_1);

}

public openSecondPage() {

    this.open(SCREEN_2);

}

It points us to the open(targetURL: string) method, where we created the InAppBrowser object:

this.browser = this.iab.create(targetURL, '_blank', this.getBrowserOptions());

Next, we subscribed to the following InAppBrowser events:

• loadstart when our browser starts to load a URL.
• loadstop when our browser finishes loading a URL.
• loaderror when there is an error when loading a URL.

We get notified of these events as the user navigates through the pages on the site, so that we could take the needed action. One thing that we can do when we are on the Login page is to fill in the username and password fields on the site to automatically submit the form:

this.browser.executeScript({

    code: `

        document.getElementById('${EMAIL_ID}').value = '${this.username}';

        document.getElementById('${PASSWORD_ID}').value = '${this.password}';

        document.forms[0].submit();

    `

});

Here, we are using the InAppBrowser’s executeScript() function, which allows us to call JavaScript on an already loaded page.

Let’s go back to the options we used to create InAppBrowser.

private getBrowserOptions(): InAppBrowserOptions {

    return {

        'location': 'no',

        'hidden': 'yes',

        'beforeload': 'get'

    }

}

Here, we selected to hide the location bar with the URL of the page. We also set the browser to a hidden state to be shown only when the page is loaded.

Note the beforeload event: it is a bit special here. This is a pretty useful event to prevent certain pages from loading or replace the current URL with a different one. This can be useful, for example, if your site contains PDF documentation on the page. iOS devices have no problem opening PDFs, but this is not the case on Android devices with no direct PDF support. So, we can use a workaround to display PDF using a 3rd party service:

this.iab.create("https://docs.google.com/gview?embedded=true&url=" + event.url, "_system");

Also, one should be careful with the beforeload event, as the beforeload=yes option causes POST requests to stop working in InAppBrowser on iOS due to some existing issue, see here for more details. So we are setting beforeload=get to check only GET requests.

Basically that’s all. We took a look at the InAppBrowser events like loadstart, loadstop, loaderror and beforeload and added an autologin script to the site.

Check out the code in the attached Appery.io project and let us know if you have any questions, and happy coding in Appery.io!

The spring of 2022 is very special for all of us and we, at Appery.io, would like to make this spring release (rolled out last weekend) enjoyable for all of you as well.

With this mission in heart, we are excited to offer you some very special improvements to our Visual App Builder that we believe will make things significantly easier and more elegant developing your mobile apps with Appery.io:

• the first and the most asked feature will be definitely appreciated by those who prefer working with the OUTLINE view: from now on, you will be able to use the old yet simple and reliable “Drag & Drop” to arrange the components on the screen of your mobile app:

What is more: you will be even warned if trying to do something that cannot be implemented for this particular component:

• also, the Appery.io UI Components family now has one more member, Divider, that can be used to to separate other screen items:

• yet another improvement was introduced for more UI components like Card, Checkbox, Datetime, etc.: they can now also be easily styled from under the PROPERTIES > Styles tab. (You might have already had a chance to evaluate the similar functionality for some UI components introduced with our Christmas release).
• two more events were added to the Form component: Form value change and Form status change:

• the next minor but hopefully useful feature is added to the Input component to make login procedure for your app users simpler and less stressfull. Just set the input Type property to Password and select the option to show the password being typed in (set it to True):

• and the last but not least: you can now make good use of quite a few predefined Push Notification services: when in the visual App Builder, simply click the CREATE NEW button and selct the needed Appery.io backend push service(s) to import it (them) from under the Backend Services section:

.

Appery.io was initially designed for creating mobile apps of the enterprise level, but at the same time, it is so intuitively simple and flexible that even elementary school students can use it!

Some days ago we got the news so positive and inspiring that we can’t help sharing it with you: one of our users is officially the winner of the 2022 DCSD Virtual Technology Fair!

Dhwanil Dalal, a student of the Dunwoody Elementary School, GA won the 1st PRIZE in the Mobile Apps category with his app created with Appery.io and was selected for the state level competitions! According to the 2022 DCSD Virtual Technology Fair Committee, all the submitted projects from Elementary, Middle, and High schools around the district were judged on documentation, functionality, creativity, understanding, and intended purpose.

The project of this talented kid, Hobby explorer, created with our visual App Builder is actually a platform intended for students who are looking for teachers to support them in their hobbies like music, dance, Rubik’s cube, etc. in their nearest area and can help making useful connections.

Thanks to Dhwanil, Appery.io is now on the list of the recommended tools in the Mobile Apps category of the Georgia Educational Student Technology Competition (GASTC).

Interestingly, that we could have never learned about this great story of success of this little but very talented boy if one of our users hadn’t written to us with the news that his son had used the Appery.io platform to build the project for his school competition. What is more: the kid managed to create the project using our 2-week Trial subscription and when the trial period came to an end the happy farther reached out to us asking for a discount to support the kid in the next round of competition.

No need to say that we were happy to extend the subscription for free as it is an honor for us, at Appery.io to support our users commited to create apps that make our world a better place to live in and succeed in doing that! Of course we couldn’t but ask the family if we could share this story of success and inspiration with you and got their consent.

And now, when the boy is invited to participate in the virtual GASTC – 2022 Georgia Virtual Student Technology Competition and is making his best getting ready for the next round it’s high time for all of us to say:

Keeping our fingers crossed for you, Dhwanil!

Dear Appery.io Users,

Since recently, our customers have started complaining about issues with registration/login into our forum. Therefore, we have decided to introduce yet another open channel where you are free to ask any Appery.io-related question(s) you might have: Stackoverflow. 

Stackoverflow is one of the most popular and renown platforms where anybody can ask for an advice on any programming issue. Where hundreds of users find answers to their questions daily and thousands of experts are happy to provide their colleagues with useful recommendations and examples.

Is is truly a huge community and from now on, we encourage you to post your questions (like those on Appery.io Platform, App Builder, Appery.io plug-ins, etc.) there instead of using forum.

Please make sure you use the tag <Appery> or <appery.io> while posting so that our experts from Support Team (as well as other users that can be of help) could answer them ASAP to our mutual satisfaction:

We hope this will help to remove any barriers to effective communication and make getting professional help as easy and productive as possible.

And as usual, we offer more ways for you to get help. Please check this link to learn how to reach to our Support Team for help.

Lots of love on St. Valentine’s Day!

Your Appery.io Team

In this short tutorial, you will learn how to add and set up the camera plug-in in order to take photos from your device. Using the file reader plug-in, you can easily save your photo through a built-in database service.

Dear Appery.io Users,

We would like to call your attention to important changes that are to be made to the deprecated library versions of all Appery.io projects frameworks!

Please note that all library versions marked as deprecated (1.0 for Ionic 5, 1.0 and 1.1 for Ionic 4, and 5.0, 5.1, and 5.2 for JQM projects) will soon be removed from our system:

In this connection, we highly recommend upgrading your app(s) to the latest version available. To do that, in your app, go to App settings > Resources, select the newest library version and click Apply.

Also, please make sure you test your app to check if it works properly after performing such an upgrade.

Thank you for your understanding and happy developing!

You can easily upload files into the Appery.io database using our File Read plug-in for the Ionic 5 framework. Watch our tutorial to learn how in just a few steps.

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 holiday season has already started, and we’re all busy with preparing gifts for people we love.

We, at Appery.io, have always worked hard to deliver the best service value to our users, and we are here to say that we have a Christmas gift to give to you!

Last Sunday, we delivered a new release that included these great new features to help you save time on app development:

• Try adding our ready-to-go screen layouts (CREATE NEW > Page) that will help you instantly get the UI you want:

• The no-code approach now works for mapping as well. For your convenience, we created an easy-to-use transformation editor where the user can add transformation, choose a type, and then edit it:

• We’ve also added Is invalid and Is valid properties to the Form component with the option to use them in mappings
• The Appery.io Team also implemented new property types for some UI components (Button, Html, Input, Text, etc.), like Color-picker, with grouping them under the separate PROPERTIES > Styles tab so that you can enjoy the no-code CSS approach when you’re styling your mobile app UI:

• Previously, only CanActivate Guard could be used to determine if a particular action can be taken against a route. From now on, all angular guards are implemented so that working with routing will be easier and more powerful:

• As always, we’ve fixed some minor bugs to keep your Appery.io experience running smoothly.

Thanks for reading and 

Thank you for staying with us!

Thank you for all the appreciation, invaluable feedback, and loyalty!