New Release: Upgraded Appery.io Tester and Live Debug Feature

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:

How Events & Scripts Work with InAppBrowser in Appery.io

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!

Enjoy your New Spring Enjoying our New Release Features

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:

.

Have Appery-related questions? Ask them on Stackoverflow!

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

 

It’s Christmas Release! Merry Christmas and Happy New Year!

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!

Minor and Awesome: What’s added with our New Release

Hi everyone!

We are thrilled to announce that last weekend, another Appery.io release successfully went live!

Let’s take a minute and look at the introduced features and check out how useful they are.

These include:

  • A modification to the Reorder component, so it is now easy to move and interact with components immediately after adding them:

That’s all for now, but stay tuned! We have more ideas on how to fulfill all of your Appery.io wish lists!

Hot! Ionic 5 Custom UI Components App Template is on!

New to Appery.io? Want to build your first app with Ionic 5? Then we highly recommend that you start with our ready-to-go Ionic 5 Custom UI Components App Template. In this template, you can find all Ionic 5 UI components currently presented by Appery.io. You will be able to review all of them in detail and customize any component according to your needs.
Check out our instructional YouTube video to learn how to work with this sample app:

Bonus: we have also added new library versions: jqm 5.3, ionic 4 1.2 and ionic 5 1.1 so new Cordova Android 10.1.0 and Cordova iOS 6.2.0 are now available to our customers.

Online Store App Template: A New Member of the Appery.io Templates Family

Dear Appery.io Community,

We are excited to share another piece of good news with you! We are proud to say we kept our promise to release more no-code templates!

Our Appery.io Templates family has grown by a new member: the eCommerce app template, another ready-to-go template that requires no special coding experience or advanced development knowledge.

If you are in search of a simple way of how to integrate the Shopify services into your own eCommerce business, your search is over; our Online Store App template is the perfect app for you. It was crafted with love by Appery.io developers and is carefully designed to use the best of the features the Shopify platform has to offer.

Detailed instructions on how to install and customize the template can be found here.

Appery.io Templates are Here! Get your own Mobile App up and running in no time at all!

Dear Appery.io Community!

We are excited to announce a new, no-code era for Appery.io!

From now on, you are free to try out something brand new, something that will definitely change the way you develop yet so much easy to use: Appery.io Templates!

With this release, we are introducing our first series of ready-to-go templates. Now, you can enjoy the versatility and power of the Appery.io platform without even writing a single line of code; all our templates are fully functioning, so all you need to do is select the template you want and hit the Create button.

Just like that, you’ll find yourself inside a ready-made app, which you’ll be able to test in a browser right away. You can also go even further and export it to check on your device:

But wait, there’s even more!

Any of the offered templates can be easily customized according to your personal preferences! You are free to rename the app and modify its UI and/or behavior, and it’s so easy that you’ll have a brand-new, unique application in no time at all!

Customizing the templates is fun and will not require any special coding experience or advanced development knowledge.

Using Appery.io Templates is a great opportunity to get a highly-functional, professional-looking mobile app without needing to troubleshoot the debris of long pieces of code slogging through long hours of trial and error.

And last but not least: to make your first-hand experience of customizing templates even more positive and successful, we have prepared step-by-step instructional videos and detailed tutorials for more ideas for your personalized applications:

Meditation & Sleep App: the app to help in practicing self-guided meditations or relaxation techniques.

Quiz App: can be used to build professional-looking quizzes that can be taken on any device.

CheckList App: use it for creating checklists with reminders and for tracking daily activities.

Duties App:  a simple yet efficient duties management app so that all your daily routine tasks can be easily arranged.

 

And, of course, stay tuned – more templates are coming soon!

Getting Started with Appery.io

Are you new to Appery.io? We highly recommend watching this tutorial to get a general overview of the platform organization, its benefits, and its features. In just 20 minutes, you’ll get a clear understanding of how things work in Appery.io.