Twitter propels its mobile business using progressive web apps

Pattern of app usage among users – prevailing scenario

The smartphone user base has experienced an exponential boom in the past few years to reach 2.97 billion users worldwide. A recent study notes that an average US adult spends about 3 hours 10 minutes on his phone every day. 90% of mobile time is spent on applications. The increase in smartphone users and their usage pattern indicates that the mobile screen is the more preferred screen than the computer. The usage pattern is also a clear indicator that businesses vying for their customers’ attention must adopt a mobile strategy.

The world of native applications – challenges galore

Though users spend 90 percent of their mobile time on applications, they are quite picky. Users spend 77% of their time on only three apps. What’s more, 96% of that time is spent on their ten favorite apps. The interest in applications makes the mobile application space highly competitive. The chunk of these applications is native applications primarily categorized into Android or iOS apps. Statista 111 thousand applications are released on the Google Play Store every month, making it the most prominent online store for applications. Following toe is the Apple App Store, which has an approx 1.8 million applications available for download. The numbers are proof of the stiff competition applications face to garner interest among users and survive. Besides the stiff competition, many other reasons can sometimes weigh against building a native application. One of the foremost considerations a business looking to upgrade their mobility capabilities the native way has to address is cost followed by compatibility. Native applications are platform-specific as they are developed for a specific platform, either Android or iOS, and can limit your reach to a particular platform user set. Maintenance and upgrades can again have a significant impact on your spending.

A progressive mobile experience – the solution

Progressive Web Apps – PWA has been a boon for businesses trying to make immense in the mobile age. A PWA is built and lives on the web but has capabilities similar to the native apps. The look and feel or how the app behaves is quite similar to native apps.

Progressive web apps provides easy optimization of your website to enable mobile experience for your users irrespective of the platform. It renders a seamless experience across iOS and Android platforms and does not require uploading on any app stores. This also eliminates the need for users to install updates on their phones. Every time there is a new version of the app, it just needs to be deployed on the webserver and is automatically available to the users when they visit next.

Benefits

World-renowned businesses utilizing PWAs are reaping some impressive benefits that demonstrate that PWAs are an excellent proposition for online entities looking to initiate their journey and association with their users on their mobiles. Businesses are looking at an economical solution to make their foray on the mobile or companies already having a native app but looking to expand their reach using a web-based mobile app.

The following compilation lists out the businesses that have adopted progressive web apps to garner impressive gains.

Renowned publisher – Forbes

Renowned Publisher

Headquartered in New York, Forbes is an American business biweekly. Steve Forbes is the editor-in-chief of the widely recognized magazine. Two of its distinct offerings are the Forbes 400 that lines out the richest people in the world and Forbes 500 that lists out the top performing companies in the world. Forbes launched its mobile PWA couple years ago and has experienced a favorable outing.

  • 0.8 seconds average load time, faster loading
  • 100% increase in user engagement
  • 43% more time spent in user session
  • Increase in scroll depth by 3 times
  • Advertisement views up by 20%
  • Average size of web pages reduced from 2MB to 30KB

Social media biggie – Twitter

Microblogging Site

A popular microblogging platform launched in 2006, Twitter is the second most successful social media platform after Facebook. Twitter introduced Twitter Lite, a PWA variant for smartphone users. An optimized version of the app Lite requires less data and storage space and loads quicker even on slower connections. The app occupies 1 Mb space on the device.

  • 65% increase in pages per session
  • 75% increase in tweets
  • 20% decrease in bounce rate
  • Loads quickly on 2G and 3G networks
  • Enables optimal utilization of data by only downloading content that the users clicks on
  • Significantly smaller size of the PWA app at 600 Kb compared to the size of the 23.5 Mb native app

Global coffee house chain – Starbucks

Global Coffee House Chain

Starbucks, an international coffee house chain and a popular brand, wanted to create a web based application. An app with dynamic functionalities and a native feel. They wanted to integrate a user-friendly ordering that could be seamlessly accessed through a url without having to install the app. Starbucks foresightedness to invest in a progressive app provided it with some healthy benefits.

  • High on performance, intuitive app for its users
  • Ability of the app to function across regions with low or inconsistent internet connectivity

There are many other international businesses that have benefited going the PWA route. You can read about them here. Do you know of a business that has benefited immensely using progressive web applications? Share it with us in the comments section.

The progress of PWA (Progressive Web Applications) mobile apps

The first part of a two blog series on Progressive Web Application introduces the easily adaptable and popular PWA and a very distinct history behind it. It also lines out the future and advantages of the web-based application. The second blog post will line out the adoption of PWAs among some of the recognized businesses and the benefits they have incurred.

The two blog posts will help digital business owners make up their mind on utilizing PWA to either make a foray into the mobile screens of their user base or complement their native app offering to reach out to a wider audience.

The first time the idea of Progressive Web Applications (PWA) was coined way back in 2007. Albeit, it was not christened PWA then. At the launch of the iPhone, the legendary Steve Jobs shared his idea of web apps developed in HTML5 using AJAX architecture that would be fully integrated into the device through the safari browser engine.

In 2015 Frances Berriman and Alex Russell, senior engineers with Google, observed a new class of websites providing a better user experience than traditional web applications. These applications rated high on user experience were independent of the browser tab and lived on their own while maintaining their ubiquity and linkability. Berriman and Russell named this new breed of applications as Progressive Web Applications.

Eric Bidelman, Senior Staff Developers Programs Engineer, introduced PWA at the Google I/O event in 2016.

The potential of PWAs can be gauged in the fact that two of the world’s biggest tech rivals Microsoft and Google, joined hands to make room for the technology.

Since becoming a widely recognized term in technology, PWA’s have made rapid strides towards widespread acceptance. Apple Inc., whose founder had first proposed web-based mobile applications, is actively pursuing it but calling it by a different name. They use the term: “HTML5 Apps” and “Home Screen web apps” instead.

Inside PWAs

A PWA is built and lives on the web but has capabilities similar to the native apps. Be it the look and feel or the way the app behaves it is quite similar to native apps.

A progressive web application leverages the website, adds some extra features that enhance the web properties to drive capabilities on mobile. In technical parlance, that would mean serving your web site over HTTPS and having a service worker and manifest.json file to turn your website into a PWA.

A service worker or a JavaScript enables the website to function in the absence of an internet connection. The service worker acts like a proxy server and acts as a bridge between the browser and the network and helps intercept network requests and serve custom responses.

PWA – How it works

PWA provides easy optimization of your website to enable mobile experience for your users irrespective of the platform. Simply put it renders a seamless experience across iOS and Android platforms and does not require uploading on any app stores. This also eliminates the need for users to install updates on their phones. Every time there is a new version of the app, it just needs to be deployed on the webserver and is automatically available to the users when they visit next.

PWAs are in demand and for legit reasons

Talk of PWAs and the discussion invariably steers towards a comparison between a native application and PWA capabilities. Listed below are a few factors enticing businesses to take a plunge into the mobile-first world with a PWA. It also is a viable option for businesses looking to complement their existing native application to expand their reach across devices and platforms.

  • Truly progressive: PWAs work for every user irrespective of the browser or the platform because the base is built with progressive enhancements.
  • Highly responsive: Progressive web applications are highly responsive and seamlessly adapt to the various screen sizes be it desktops, different mobile devices, and tablets.
  • Closely replicating native apps: The user experience and interface match up to that of native applications.
  • Easily and regularly updated: The process of running updates is convenient thanks to the data update process offered by service workers.
  • Secure: As PWAs run through HTTPS, it ensures safety in content delivery and content interaction.
  • Searchable: Indexed by search engines PWAs show up in Google search results.
  • Installable: Installing PWA applications is an easy affair as it does not require users to download it from the app store or play store, consuming little space.
  • Linkable: A clickable link is all it takes to install or share the application among users.
  • Offline functionality: PWAs work without the internet connection leveraging data cached from the last instance the user interacted with the application

We are confident that with the evolution of PWAs there will be many more benefits that may come to the fore. Are there benefits or interesting facts about PWA that you have come across and would like to share with us? Drop it here in the comments section.

Read the next blog on the adoption of PWAs among some of the recognized businesses and the benefits they have incurred.

How to Programmatically Make your Android Phone Look Like an iPhone

In Android Operating System (OS) based on mobile phone or devices, the UI screen that appears first after the user presses the ‘Power on’ button is called the “Android Launcher Screen”. It is possible in Android to construct a custom launcher application, which can be used as a replacement for the default launcher application that comes along with Android phones. Unlike the iPhone, this is one of Android’s best features which lets you design your phone’s interface.

Android Launcher concept

The Launcher falls into one of two categories: ‘design’ or ‘smart’.

Design launchers focus on User Interface. You can change the entire layout of your Android phone’s home screen, application icon shape, icon drag and drop concepts, image gallery etc. You can customize everything it has to offer, including the themes, animations, layout, shortcuts and colors. Some of its interesting features include unlimited scrolling, customize app drawer layout, download-able themes and widget customization.

Smart Launchers learn the most relevant information about you which can be your wake up time, head out on your commute, work at the office, most favorite spot of city etc. You also can add custom gestures to your phone such as double-tapping the screen to open a specific application, web-page or specific setting.

Requirement

You need to have the following installed and configured on your development machine:

  • Android SDK and platform tools
  • Android Studio
  • An emulator or Android device running Android 2.2 or higher

Project Manifest.xml File Modification

In manifest.xml file add two activities. First activity displays the home screen and the second activity needs to display the applications that are installed on user’s device. It is also responsible for launching the installed applications. We don’t need any special configuration for this Activity.

Add the following two categories in Manifest.xml file to the intent-filter group. This intent-filter is associated with the Activity.

 <category android_name="android.intent.category.HOME" />
 <category android_name="android.intent.category.DEFAULT" />

We also need to set the android:launchMode to “singleTask” to make sure that only one instance of this Activity is held by the system at any time. To show the user’s wallpaper, set the theme to

android:theme=”@android:style/Theme.Wallpaper.NoTitleBar.Fullscreen”

 <activity
 android_name="ah.hathi.simplelauncher.HomeScreenActivity"
 android_label="Simple Launcher Home"
 android_theme="@android:style/Theme.Wallpaper.NoTitleBar.Fullscreen"
 android_launchMode="singleTask"
 android_stateNotNeeded="true">
 <intent-filter>
 <action android_name="android.intent.action.MAIN" />
 <category android_name="android.intent.category.HOME" />
 <category android_name="android.intent.category.DEFAULT" />
 </intent-filter>
 </activity>

Add one more activity in Manifest.xml file for displaying the applications that are installed on user’s device.

<activity
 android_name="ah.hathi.simplelauncher.AppsListActivity"
 android_theme="@android:style/Theme.NoTitleBar.Fullscreen" > </activity>

Launcher Main Activity Layouts

Add UI design code in Activity_HomeScreen.xml file. Here layout has a single Button that responds to click events. Clicking the button takes the user from home screen to the list of applications.

<RelativeLayout xmlns_android="http://schemas.android.com/apk/res/android"
 xmlns_tools="http://schemas.android.com/tools"
 android_layout_width="match_parent"
 android_layout_height="match_parent"
 tools_context=".HomeActivity" >

<Button
android:id=”@+id/home_screen_apps_button”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentRight=”true”
android:layout_alignParentTop=”true”
android:layout_marginRight=”10dp”
android:layout_marginTop=”10dp”
android:text=”Show Apps”
android:onClick=”showApps”
/>
</RelativeLayout>

Next is to create an XML file for the AppListActivity class in the project’s res/layout folder and name it as activity_apps_list.xml. The layout contains a ListView that takes up the entire screen.

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns_android="http://schemas.android.com/apk/res/android"
 android_layout_width="match_parent"
 android_layout_height="match_parent"
 android_orientation="vertical" >

<ListView
android:id=”@+id/apps_list”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
>
</ListView>

</LinearLayout>

Finally, create a third XML file in the same location and name it as list_item.xml. This file defines the layout of an item in the ListView

 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns_android="http://schemas.android.com/apk/res/android"
 android_layout_width="match_parent"
 android_layout_height="match_parent"
 android_padding="10dp"
 >

<ImageView
android:id=”@+id/item_app_icon”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentLeft=”true”
android:layout_centerVertical=”true”
/>

<TextView
android:id=”@+id/item_app_label”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_toRightOf=”@+id/item_app_icon”
android:paddingLeft=”10dp”
/>

<TextView
android:id=”@+id/item_app_name”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_below=”@+id/item_app_label”
android:layout_toRightOf=”@+id/item_app_icon”
android:paddingLeft=”10dp”
/>

</RelativeLayout>


Implementing the HomeScreenActivity Classes

With the layouts of the application created, it is time to create two Activity classes. When creating the two classes, make sure the name of each class matches the one you specified in the project manifest file earlier.

Create a new class named HomeScreenActivity and set android.app.Activity as its superclass.

Add this code in your HomeScreenActivity class or your main Activity class in onCreate method.

selectButton.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View view) {

Intent i = new Intent(this, AppsListActivity.class);
startActivity(i);

}
});


We create an Intent for the AppsListActivity class and start it.

AppsListActivity Class

Create another Activity class named AppsListActivity and set android.app.Activity as its superclass. In the class’s onCreate method, we invoke setContentView, passing in the activity_apps_list layout we created earlier.

import android.app.Activity;
 import android.content.Intent;
 import android.os.Bundle;
 import android.view.View;

public class AppsListActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_apps_list);
}

}

AppDetail.java class file

Create a class named AppDetail that will contain the details of an application, its package name, label, and application icon. The interface is pretty basic as you can see below.

public class AppDetail {
 CharSequence label;
 CharSequence name;
 Drawable icon;
 }

Fetching installed Applications

In the LoadApplication method of the AppListActivity class, we use the queryIntentActivities method of the PackageMangaer class to fetch all the Intents that have a category of Intent.CATEGORY_LAUNCHER. The query returns a list of applications that can be launched by a launcher. We loop through the results of the query and add each item to a list named Apps.

private PackageManager manager;
 private List<AppDetail> apps;

private void loadApplication(){

manager = getPackageManager();
apps = new ArrayList<AppDetail>();

Intent i = new Intent(Intent.ACTION_MAIN, null);
i.addCategory(Intent.CATEGORY_LAUNCHER);

List<ResolveInfo> availableActivities = manager.queryIntentActivities(i, 0);
for(ResolveInfo ri:availableActivities){
AppDetail app = new AppDetail();
app.label = ri.loadLabel(manager);
app.name = ri.activityInfo.packageName;
app.icon = ri.activityInfo.loadIcon(manager);
apps.add(app);
}
}

List of Applications

The Apps variable containing all the details we need, we can show the list of applications using ListView class. We create a simple ArrayAdapter and override its getView method to render the list items. We then associate the ListView with the adapter.

private ListView list;
 private void loadListView(){
 list = (ListView)findViewById(R.id.apps_list);

ArrayAdapter<AppDetail> adapter = new ArrayAdapter<AppDetail>(this,
R.layout.list_item,
apps) {
@Override
public View getView(int position, View convertView, ViewGroup parent) {
if(convertView == null){
convertView = getLayoutInflater().inflate(R.layout.list_item, null);
}

ImageView appIcons = (ImageView)convertView.findViewById(R.id.item_app_icon);
appIcons.setImageDrawable(apps.get(position).icon);

TextView appLabels = (TextView)convertView.findViewById(R.id.item_app_label);
appLabels.setText(apps.get(position).label);

TextView appNames = (TextView)convertView.findViewById(R.id.item_app_name);
appNames.setText(apps.get(position).name);

return convertView;
}
};

list.setAdapter(adapter);
}

ListView OnClickListener Method for List item

When the user clicks an item in the ListView, corresponding application will be launched by our launcher. We use the getLaunchIntentForPackage method of the PackageManager class to create an Intent with which we start the application.

private void addonClickListener(){
 list.setOnItemClickListener(new AdapterView.OnItemClickListener() {
 @Override
 public void onItemClick(AdapterView<?> av, View v, int pos ,long id) {
 Intent i = manager.getLaunchIntentForPackage(apps.get(pos).name.toString());
 AppsListActivity.this.startActivity(i);
 }    
 });<br > }

Putting It All Together

We need to invoke loadApplication, loadListView and AddClickListener in the onCreate method of AppsListActivity class as shown below.

protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_apps_list);

loadApplication();
loadListView();
addClickListener();
}

Conclusion

Build and run your application once more to see the result. You should now be able to see the applications that can be launched when you click a button on the home screen of our launcher. Click on an item to launch the corresponding applications. That’s it! Now, try to mimic the UI look and feel of iPhone in your launcher application as you have got complete control over everything!

Here’s a quick read to help you update Android apps outside of Google Play.

How to update Android Apps Outside of Google Play

Here’s a DIY on how to programmatically make your Android phone look like an iPhone.

Having an Android device is beneficial as we can install apps as per our need. Many of us might already be familiar with Google play store which is the app store for Android and have been using it for downloading apps. It is Play Store which is responsible for notifying us of any updates to the installed app. These updates might carry bug fixes, enhancements to existing features or may also include addition of new features.

However, it is up to the users to decide whether to permit Play Store to update these installed apps to the latest version or not. Despite all these facts, Google has not restricted users to get apps from outside its play store. And this is where Google separates itself from other mobile platforms.

The main issue with Google play store updates is the fact that the store takes its own time for updates. To explain further, once the latest application has been uploaded to the store, it lines up all the existing users in a queue and then starts pushing the updates to the users, one by one. Thus, if the number of users are more, it takes more time. If at all, the new application has to reach all the users immediately, then we may have to handle the update programmatically by leaving Google Play store’s auto -update functionality.

Apart from Google play store, there are many other app stores where you can upload the application binaries (apk files).  Even in these stores, users can download the app by sharing app link and also provide updates whenever a latest version of app is available on the store. Some app stores provide free publishing as well.

 Given below are a few such app stores for Android:

  1. Amazon App Store
  2. Mobile Market
  3. Opera Mobile Store

However, this is not the only way you can install an app. You can install apps even without publishing it in any of the above mentioned third-party stores.

 How to programmatically install/update apps?

 Given below are instructions to achieve successful installation/updation of a mobile app without using Google Play store or any other store.

  • For devices, if it is the first time that you are installing any app outside Google Play Store, you can go to Settings and select Applications to check the “Unknown Sources”.
  • Build your app always with a valid version code and version name, and always ensure that manifest file of the app is updated to the next incremental number in version code.
  • <manifest xmlns_android="http://schemas.android.com/apk/res/android"
     package="com.example.app"
     android_versionCode="1"
     android_versionName="1.0" >

    Once the build is ready it can then be either placed in phone storage for installing it and upgrading to the latest build directly by using any file manager. Or can be placed in any webserver or a cloud space provider like dropbox and can use that link for downloading and then installing on the device.

  • The best approach to follow will be in instances where the user gets a notification for new updates using custom GCM push notification. The user can then decide on whether he wants to update the app immediately or later. But once clicked on notification, the code can be put to download the file and then go for installation.
  • Following code can be used to install/update the application after successful download of apk:
    Intent intent = new Intent(Intent.ACTION_VIEW); intent.setDataAndType(Uri.parse("file://" + appFilelocation.toString()), "application/vnd.android.package-archive"); startActivity(intent);

    AndroidManifest.xml requires following permission:

  • <uses-permission android_name="android.permission.INTERNET" />
     <uses-permission android_name="android.permission.INSTALL_PACKAGES" />
     <uses-permission android_name="android.permission.WRITE_EXTERNAL_STORAGE" />

    User vs System Mobile Apps

    These apps can be just User Apps or System Apps. User Apps are ordinary apps which do not interact with internally restricted features on the device. System apps can be a combination of user apps along with codes written to interact with system restricted features. If your app is System App, then it can change the entire way of downloading and installing the new updates for the device to a whole new level. Instead of asking user permission for updating, it can be coded to an extent that the power of installing the updates is decided by the app itself and can be automatically updated without the user’s notice!

Enjoy Building!! In case you need expert help, reach out to us. Trigent’s mobility experts have decades of experience working on different platforms, tools, and technologies to guide and support your application development.

Appium Blog Series – Part 2 – Running Appium Automation Script on Android Emulators

About Appium

Appium is an Open Source mobile application UI testing framework, used to automate native, hybrid and web mobile apps. It enables cross-platform mobile app testing by using common API for both Android and iOS platform test scripts, thereby enhancing code-reusability. Appium provides flexibility of writing and running automation tests in any language such as, Java, C#, PHP, Ruby, Python, Perl, Objective-C.

About Android Emulator

Without an Android device, we can still run automation tests of Android Native App’s using an Emulator which mimics the OS and hardware of an Android device on a computer.

In Android SDK folder, there is an interface called as AVD Manager, which creates a virtual mobile device (Emulator) to run on a computer. Running Emulator starts a virtual console in which we can install Android apps.

In the following example, I will demonstrate automation of Android mobile phone’s default installed calculator app on Android Emulator.

Prerequisites for running Appium automation test for a native Android app on Emulator:

  • Java/JDK is installed and path for JAVA_HOME is set on the windows system.
  • Android SDK is installed and required packages of Android API’s are downloaded in SDK Manager.
  • Intel HAXM is installed.
  • Appium is installed.

Start Android Emulator:

In SDK folder on computer, run AVD Manager.exe, AVD Manager Dialog as shown below:

Click Create button, enter below details to create a new AVD.

AVD Manager shows newly created AVD as below, select this AVD and click Start.

In Launch Options dialog click Launch and in 10 to 15 minutes, Android Emulator will be started as below.

In eclipse create a Java project, with package name Android and class name AndroidEmulatorCalculator.

Set Desired Capabilities:

Following code snippet in AndroidEmulatorCalculator class, sets Desired Capabilities for Calculator App.

// Created object of DesiredCapabilities class.
 DesiredCapabilities capabilities = new DesiredCapabilities();

//Set android deviceName desired capability to Android Emulator.
capabilities.setCapability(“deviceName”, “Android Emulator”);

//Set BROWSER_NAME desired capability to Android.
capabilities.setCapability(“browserName”, “Android”);

//Set android VERSION from device desired capability.
capabilities.setCapability(“platformVersion”, “6.0”);

// Set android platformName desired capability to Android.
capabilities.setCapability(“platformName”, “Android”);

// Set android appPackage desired capability.
capabilities.setCapability(“appPackage”, “com.android.calculator2”);

// Set android appActivity desired capability.
capabilities.setCapability(“appActivity”, “com.android.calculator2.Calculator”);

Android Driver:

Following code snippet Creates an object of AndroidDriver class with Desired Capabilities as mentioned above and sets Appium server address with port number, and launches Android calculator app on device.

AndroidDriver driver;
 driver = new AndroidDriver(new URL("http://127.0.0.1:4723/wd/hub"), capabilities);

The code snippet given below shows a simple addition on calculator app by using id tag to locate calculator app elements.

driver.findElement(By.id("com.android.calculator2:id/digit_4")).click();
 driver.findElement(By.id("com.android.calculator2:id/op_add")).click();
 driver.findElement(By.id("com.android.calculator2:id/digit_8")).click();
 driver.findElement(By.id("com.android.calculator2:id/eq")).click();
 String result = driver.findElement(By.className("android.widget.EditText")).getText();
 System.out.println("Result of Addition is : " + result);

Run Automation Test

Start Appium server, and run AndroidEmulatorCalculator class as TestNG test. Automation test will open calculator app on Emulator, clicks on buttons in this sequence -> 4, +, 8 and =.

Gets result from text area of calculator app, and print it in eclipse console.

Learn more why trigent is one of the best automation testing companies.

Read Other Appium related blogs

How to Automate Testing for Android Native Apps Using Appium

Using Appium automation script to Check SQLite DB Content of a Device!

Automated Device Certification Testing On Cloud AWS Device Farm with Appium

Appium – A Good Open Source Mobile App Testing Framework

Appium Blog Series – Part 1 – How to Automate Testing for Android Native Apps Using Appium

Appium is an open source mobile application user interface (UI) testing framework, and is used to automate native, hybrid and web mobile apps. It enables cross-platform mobile app testing by using common API for both Android and iOS platform test scripts, thereby enhancing code-re-usability. Appium provides flexibility of writing and running automation tests in languages such as, Java, C#, PHP, Ruby, Python, Perl, Objective-C.

Appium Architecture In Android:

Appium is a webserver that exposes a REST API. Appium client establishes connection with Appium Server through JSON Wire Protocol by creating a JSON object called as `Desired Capabilities’. Appium Server then creates an automation session by running a session id for the client, based on Key-Value pairs of Desired Capabilities set in Appium client. Appium Server then connects with the UI-Automator provided by Android SDK. UI-Automator communicates with Bootstrap.jar which will run user commands from the test script, on the mobile app in device.

Prerequisites for running Appium automation test for a native Android app:

  • Java/JDK is installed and path for JAVA_HOME is set on the windows system.
  • Android SDK is installed and required packages of Android API’s are downloaded in SDK Manager. Path for ANDROID_HOME, platform-tools is set on the windows system.
  • Eclipse IDE is installed. TestNG is installed.
  • Eclipse ADT Plugin is installed and configured to integrate android development environment in eclipse IDE.
  • Microsoft .Net Framework and Node JS is Installed.
  • Appium is installed.
  • Latest Selenium Webdriver jar files for java client, Appium Client library jar file, Google-gson jar file are downloaded.
  • Android Device is connected to your laptop/computer In USB Debugging mode.

In eclipse create a Java project, with package name Android and class name AndroidCalculator as shown below.

Add selenium webdriver’s jar files, Appium Client library jar file, Google-gson jar file in to java build path, by right clicking on project > Properties > Java Build Path > Libraries > Add External JARs >

Set Desired Capabilities:

We need to provide the following set of Desired Capabilities to provide Appium Server with details of automation session we want to set up:

  • Android Device Name – In command prompt, run command adb devices to show Android Device Name.
  • Android OS Version – In android device, Open settings -> About phone -> Android version
  • Android Software App Package Name, App Activity Name – In command prompt, run command adb logcat, and open Calculator App in Android phone and press ctrl+c. Log show’s App Package Name = com.android.calculator2, App Activity Name = com.android.calculator2.Calculator.

In class AndroidCalculator, following code snippet, creates a object of DesiredCapabilities class.

DesiredCapabilities capabilities = new DesiredCapabilities();

//Set android deviceName desired capability.
capabilities.setCapability(“deviceName”, “Q88HQ4S4SC89S8NB”);

//Set BROWSER_NAME desired capability to Android.
capabilities.setCapability(CapabilityType.BROWSER_NAME, “Android”);

//Set android VERSION from device desired capability.
capabilities.setCapability(CapabilityType.VERSION, “5.0”);

// Set android platformName desired capability to Android.
capabilities.setCapability(“platformName”, “Android”);

// Set android appPackage desired capability.
capabilities.setCapability(“appPackage”, “com.android.calculator2”);

// Set android appActivity desired capability.
capabilities.setCapability(“appActivity”, “com.android.calculator2.Calculator”);

Android Driver:

Following code snippet creates an object of AndroidDriver class with Desired Capabilities as mentioned above and sets Appium server address with port number, and launches android calculator app on device.

AndroidDriver driver;
 driver = new AndroidDriver(new URL("http://127.0.0.1:4723/wd/hub"), capabilities);

Locate elements in Android App:

To locate elements in Android App, we use UI Automator Viewer tool provided by Android SDK.

  1. Run uiautomatorviewer.bat file from SDKtools folder.
  2. In Android device, open calculator app.
  3. In UI Automator Viewer tool, click on Device Screenshot image button.
  4. UI Automator Viewer now shows calculator app’s screenshot on left pane, and right pane show’s calculator app’s UI element’s hierarchy view with node structure that explain’s how elements are arranged. Ex: In calculator snapshot, button 4 is selected, and right pane shows different properties of button 4, which can be used in test script for locating button 4.

Code The snippet below shows  a simple addition on calculator app by using id tag to locate calculator app elements.

driver.findElement(By.id("com.android.calculator2:id/digit_4")).click();
 driver.findElement(By.id("com.android.calculator2:id/op_add")).click();
 driver.findElement(By.id("com.android.calculator2:id/digit_8")).click();
 driver.findElement(By.id("com.android.calculator2:id/eq")).click();
 String result = driver.findElement(By.className("android.widget.EditText")).getText();
 System.out.println("Result of Addition is : " + result);

Run Automation Test:

Start Appium server, and make configuration changes as shown in the below snapshots and click on Run button.

…to be continued.

Read Other Appium related blogs

Don’t miss my next blog on – Running Appium Automation Script on Android Emulators

Using Appium automation script to Check SQLite DB Content of a Device!

Automated Device Certification Testing On Cloud AWS Device Farm with Appium

Appium – A Good Open Source Mobile App Testing Framework