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!

A Year of Achievement for Appery.io in 2019

It’s that time of the year again, time to reflect, celebrate, and start planning ahead. As we look back over the year for our low-code development platform Appery.io, we have to say we are pretty proud!

In general, it was great to see a resurgence in the market for low-code development platforms. As IT leaders face more complexity and more pressure to innovate, low-code and no-code tools like Appery.io allow IT leaders to keep up with the pace of modern technology. Appery.io stands out for its excellence in this area—as shown by the more than 500,000 developers worldwide who trust Appery.io for their low-code and no-code development projects.

Having a platform that is both simple and extremely advanced is critical to the Appery.io team. This focus has enabled us to keep the platform up-to-date incorporating all the latest trends in mobile and app development—as seen in our many updates.

Along with many momentous feature updates, we have also published new resources and received many industry recognitions in 2019. We wanted to share some of the highlights of this activity, in case you missed it.

Major Feature Updates

  • Progressive Web App (PWA) Support
  • Codeless Features Added
  • Appery.io as the Backbone of Exadel Innovation Cloud
  • Ionic 4 Support

Progressive Web App (PWA) Support

PWAs are the new generation of web application development. These apps load like regular web pages but offer users more functionality, such as working offline, push notifications, and access to device hardware, traditionally available only to native applications. PWAs work seamlessly on desktop, mobile, and tablets from a single codebase. This enables PWA developers to be the sole managers of their application without having to jump through the hoops of multiple app platform uploads or review processes.

In Appery.io, users are able to turn apps into PWAs seamlessly with a few clicks, and without having to change any code.

Additional Resources on PWAs: 

Codeless Features Added

The Appery.io AppBuilder allows developers and technology leaders alike to create iOS, Android, or PWA apps with no or low code. Key codeless features in Appery.io include:

UI Composition: Build an application UI with a few clicks. Appery.io allows users to easily drag and drop a component from the AppBuilder palette to the design page. Switch design modes seamlessly to preview the UI on Android and iOS.

Event Panel: Allows users to set a single action or set of actions for every event in an app. In a few steps, users can select a component, open the Events Panel, and set an action that will run when the event appears.

Mapping: the Mapping Editor allows users to drag component properties to service request parameters. An arrow shows which way values will be mapped to take out the guesswork.

Additional Resources on Codeless for Appery.io: 

Appery.io as the Backbone of Exadel Innovation Cloud

Early in 2019, Exadel announced the launch of its Innovation Cloud which helps enterprises build and test emerging technology apps quickly and efficiently so they can determine the ROI of these technologies. Innovation Cloud users can build test versions of different types of apps—blockchain, chatbot, mobile, and more—in a matter of days at a fraction of the cost of a full implementation. Building on the success and ease-of-use of Appery.io, Exadel decided to use the Appery.io platform to build the Innovation Cloud.

Learn more and get started here: https://exadel.com/services/innovation-cloud/

Ionic 4 Support

Keeping up with modern development trends, Appery.io now offers the Ionic 4 App Builder as a production-ready solution for building mobile apps. Ionic 4 allows developers to build PWAs in a way that is future-proof, fast, and framework-agnostic. Bringing Ionic 4 to Appery.io gives users the flexibility and intuitive design they need to craft modern applications.

Additional Resources on Ionic 4: 

More New Appery.io Resources

Industry and Community Recognition

We ❤️  the developer community. It’s the reason we do what we do! What motivates us is the continuous support and feedback we receive in blogs, industry reports, and other honorable mentions. We’d like to take a moment to share some of what the community had to say about Appery.io this year:

Ovum On the Radar: Appery.io facilitates rapid mobile application development
Thanks to Ovum analyst Michael Azoff for featuring Appery.io as one of their On the Radar platforms. Download the report to find out what makes Appery.io different, how the Innovation Cloud supports development and more.

The 15 Best App Makers to Build Your Own Mobile App in 2019
By: Aasif Khan on HackerNoon
“As this is a cloud-based app building platform, there is no need to download and/or install anything, which makes it convenient to begin the process of building your app quite quickly.”

Best Mobile App Development Software/Tools for 2019 
By: Sourodip Biswas on KapokCom Tech
“The main feature of this platform is its visual app building tool which uses jQuery Mobile, Ionic, AngularJS, Bootstrap, and HTML5 components inside the Visual Editor.  Samsung and AT&T are few of the companies that utilize Appery.io for their app development.”

Top Platforms For Building Mobile Apps
By: Wilfredo E. Keeling on iCharts
“A powerful and useful visual app builder tool, Appery.io is considered by mobile apps developers to be responsive and easy to use.”


We think it is safe to say that 2019 was one of the best years yet for Appery.io—maybe even the best, if we dare to be so bold! However, this is by no means a stopping point. We have a lot in store for 2020 and expect to be keeping our pulse on the latest trends in mobile and web app development to make sure Appery.io users have the latest and greatest features they need to build complex apps, simply. Have an idea or suggestion for Appery.io? Drop a note in our forum here: https://appery.io/forum.

Happy New Year!

[reposted from the Exadel blog]