Accessibility (a18y) - Minimum Touch Target Size (48dp)

Udacity Course: Web Accessibility

https://classroom.udacity.com/courses/ud891/lessons/8085130355/concepts/80878907040923

Minimum touch size for mobile screen: 48dp

WCAG: https://webaim.org/standards/wcag/checklist#sc1.4.4

Troubleshooting: Could not initialize class org.codehaus.groovy.reflection.ReflectionCache

I am a Ionic Capacitor user, I didn’t know since when my android build keep failing and no clue what’s the cause.

And I keep getting these errors when I run “npx cap add android”:

	
Syncing GradleError running gradle sync Starting a Gradle Daemon, 1 stopped Daemon could not be reused, use --status for details

java.lang.NoClassDefFoundError: Could not initialize class org.codehaus.groovy.vmplugin.v7.Java7

… #skipped verbose error messages

FAILURE: Build failed with an exception.


* What went wrong:
Could not initialize class org.codehaus.groovy.reflection.ReflectionCache


* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org
BUILD FAILED in 21s

Unable to infer default Android SDK settings. This is fine, just run npx cap open android and import and sync gradle manually
	

The Solution

Firstly, you'll to know which java version is your android studio is using, find the info in "About Android Studio". 

Set environment variable to point JAVA_HOME to the path where openjdk version of "1.8.0_242-release” (or embedded jdk inside Android Studio app folder) located. On Mac, it's usually 

/Applications/Android Studio.app/Contents/jre/jdk/Contents/Home

MacOS (Android Studio 4.1.1):

export JAVA_HOME="/Applications/Android Studio.app/Contents/jre/jdk/Contents/Home"

jenv User:

You can add Android Studio embedded openjdk path to your jenv and then switch to your prefered java version with jenv local VERSION_NO for local or  jenv global VERSION_NO for system wide.

jenv add "/Applications/Android Studio.app/Contents/jre/jdk/Contents/Home"

Window:

Add/update environment variable JAVA_HOME and point it to path where the correct version of openjdk extracted.

Troubleshooting Custom Capacitor Plugin: No such module 'PushNotifications'

As a Capacitor hybrid app developer, default plugins offered by Capacitor can be not enough to achieve what we want for our project.

For beginner like me, who hope to create a simple custom plugin, set aside Javascript related code, it can be a tough experience as we have to learn and put into practise for both Android and iOS build.

Building a custom plugin for Capacitor (Ionic)

Fortunately, Capacitor has built-in API we could use to build any custom plugin.

No such module 'PushNotifications' (iOS)

On one of my custom plugin, it has dependency on Pusher's client iOS SDK which is imported through cocoapod. Running app "build" on xcode on this plugin is successful.

On my ionic app project folder, when import the created custom plugin causes error, and I get 

"No such module 'PushNotifications'" 

for importing the custom plugin. Which it's weird as I've checked and certain PushNotifications plugin installed in pods folder on both the actual app project and in the custom plugin.

When I navigate inside xcode Pods project, I'm able to see PushNotifications library correctly placed under pods folder.

Solution:

1. In the Capacitor custom plugin folder, find the .podspec file (usually located at root folder of your Plugin project), and add s.xcconfig to your podspec file, it's added to tell xcode about where to look the PushNotifications framework required by this plugin in your main project.

	
		
  require 'json'

  package = JSON.parse(File.read(File.join(__dir__, 'package.json')))

  Pod::Spec.new do |s|
    s.name = 'CapacitorPusherBeams'
    s.version = package['version']
    s.summary = package['description']
    s.license = package['license']
    s.homepage = package['repository']['url']
    s.author = package['author']
    s.source = { :git => package['repository']['url'], :tag => s.version.to_s }
    s.source_files = 'ios/Plugin/**/*.{swift,h,m,c,cc,mm,cpp}'
    s.ios.deployment_target  = '11.0'
    s.dependency 'Capacitor'
    s.swift_version = '5.0'
    s.xcconfig = { 'FRAMEWORK_SEARCH_PATHS' => "${PODS_CONFIGURATION_BUILD_DIR}/PushNotifications" }
  end

	

2. Or, alternatively, you can add the PushNotification framework path manually as below (you'll have to do this every time when the plugin get updated or after you run npx cap update)

Steps

1. Go to Pods project's Build settings, find "Framework Search Paths"
2. Select your affected plugin (by the missing module error mentioned above)
3. Add the missing path to both Debug and Release as needed.

WebdriverIO - Appium, The "Error: Failed to create session."

Working on a hybrid app built with Ionic4, I've been writing tests with Angular's e2e, cucumber and selenium, now I'm surprised by variety of features & supported services offered by webdriverio.

I first went into the list of boilerplate projects and try to get my hand dirty with first sample project made for hybrid app.

I git cloned this repo - appium-boilerplate, updated capabilities values based on the simulator config available on my dev environment (you have to provide exact to the capabilities based on your AVD Manager - Android Studio).

Next, by running the command "npm run android.app", I'd expected appium magic would works instantly, but if as a first-timer-of-all-stuff, I ran into a little issue (but cost all day to find out the causes).

Troubleshooting

If you run into similar error message as following:

Error: Failed to create session.

read ECONNRESET    

  
    npm run android.app

    appium-boilerplate@5.3.1 android.app ~/appium-boilerplate
    wdio ./config/wdio.android.app.conf.js


    Execution of 6 spec files started at 2020-05-24T05:09:03.689Z

    [0-0] RUNNING in Android - /tests/specs/app.forms.spec.js
    [0-0]  Error:  Failed to create session.
    read ECONNRESET
    [0-0] FAILED in Android - /tests/specs/app.forms.spec.js
    [0-1] RUNNING in Android - /tests/specs/app.login.spec.js
    [0-1]  Error:  Failed to create session.
    read ECONNRESET
    [0-1] FAILED in Android - /tests/specs/app.login.spec.js
    [0-2] RUNNING in Android - /tests/specs/app.navigation.spec.js
    [0-2]  Error:  Failed to create session.
    read ECONNRESET
    [0-2] FAILED in Android - /tests/specs/app.navigation.spec.js
    [0-3] RUNNING in Android - /tests/specs/app.swipe.spec.js
    [0-3]  Error:  Failed to create session.
    read ECONNRESET
    [0-3] FAILED in Android - /tests/specs/app.swipe.spec.js
    [0-4] RUNNING in Android - /tests/specs/app.webview.spec.js
    [0-4]  Error:  Failed to create session.
    read ECONNRESET
    [0-4] FAILED in Android - /tests/specs/app.webview.spec.js
    [0-5] RUNNING in Android - /tests/specs/app.webview.xpath.spec.js
    [0-5]  Error:  Failed to create session.
    read ECONNRESET
    [0-5] FAILED in Android - /tests/specs/app.webview.xpath.spec.js

    Spec Files:  0 passed, 6 failed, 6 total (100% completed) in 00:02:07 

    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! appium-boilerplate@5.3.1 android.app: `wdio ./config/wdio.android.app.conf.js`
    npm ERR! Exit status 1
    npm ERR! 
    npm ERR! Failed at the appium-boilerplate@5.3.1 android.app script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in:
    npm ERR!     ~/.npm/_logs/2020-05-24T05_11_11_738Z-debug.log
  

Solution

I couldn't believe it (that's reason it costed my days to resolve it) until I tried it.

Start and run your virtual device (simulator) first before the webdriverio's command (npm run android.app)

Futhermore, you can always add another logPath as appium services' option, so you can look into the error log for troubleshooting.  

How to do Over The Air (OTA) distribution? (This tutorial is written for Adhoc Version only)

Why OTA Distribution?

You might have wondered is it possible to distribute your iOS app easily through your website.
If you're just distributing iOS app within your organization, you get to skip Apple's iOS review process which it got its fame by its strictness. With OTA you can just start publishing iOS app without the worries being rejected by App Review.

2 Types of iOS OTA Distribution

Each one require different type of Apple Developer enrolment:

1. Adhoc Distribution - Apple Developer license
2. Enterprise Program - Require high cost program (Apple Developer Enterprise Program)

Caveat: For 2nd point above, OTA distribution is meant for the purpose of distributing iOS app within one organization. Distributing the iOS app publicly is an act against EULA of Apple.

Differences between adhoc and enterprise OTA distribution:

1. Adhoc OTA distribution only allow devices registered under the Provision Profile used by iOS build
2. Enterprise distribution require your device to manually permit and "to trust" the distribution publisher.

In this article, I would only explain how to do the OTA under adhoc build, as I haven't got the opportunity to be enrolled into Apple Enterprise Program.
Even so, if you had Googling around, you would find out the distribution steps has similarity, the only different is the available choices during ipa generating.

What do you need for Adhoc OTA distribution?

Requirements:

• Apple Developer Program (USD 99 annually)
• iOS Distribution Certificate & releasing Profile (to be created in Apple Developer platform)

Steps to start generating iOS app for OTA distribution

Step 1: Change your device target to "Generic iOS Device" and start "Archive"

Archive

Step 2: Once the app is successfully archived

Successful Archive

Step 3: Select distribution method (choose Ad Hoc for small group distribution)

Note: Ad Hoc distribution allows devices registered under the attached to the releasing Profile to install the iOS build (ipa) only.

Ad Hoc - Distribution Method choices

Step 4:  Enable OTA installation

This step would enable add OTA installation by adding extra script (manifest.plist) later in the exported outcome. The plist file is required to allow Safari browser identify the app and communicate with your iOS device later.

Enable OTA installation

Enter hosting URL

Step 5: Signing App With Certificate and Profile

Automatic signing - xcode will try to find a suitable signing setting, it'll create a proper certificates/profiles into the Developer account

Manual - you use back known & existing setting (next screenshot)

Re-sign app

Step 6: Compile and Export

Compilation

Final Step: Exporting

Exported Files

Step 7: Final, minimal content required for manifest.plist for hosting

From step 6 above, manifest.plist & TSAwesomeProj.ipa are the only required files for simple OTA installation. You can find a lot of information in the original manifest.plist file,

Part of the content from manifest.plist file

but what's required is just as below. This is the content enough to get OTA installation working.

Simplified Version

Finally, only a simple HTML code is needed for OTA installation to happen in Safari browser. You just need to add "href" attribute value below for hyperlink.

itms-services://?action=download-manifest&url=URL_TO_MANIFEST_FILE

Example: 

<a href="itms-services://?action=download-manifest&url=https://test.com/manifest.plist">TSAwesomeProj Sample</a>