Support Install Certificate on Android Emulator

[NghiaTranUIT]

Description

It's time to support Android Emulator.

Acceptance Criteria

• Implement a new Android Emulator UI
• Similar UI with Install for Android Physical Device

Override Emulator

1. Check if adb command is existed -> If not, show the Error Toast (Title = "Android Debug Bridge (adb) not found!", Message = "Proxyman requires \"adb\" command to perform tasks.\n\nIf you have not installed, please consider to install it.\n\nOr Skip if you've had.", First Button = "How to Install", Second Button = "Skip"). Click on "How to Install" will open the website: https://docs.proxyman.io/debug-devices/android-device/automatic-script-for-android-emulator#4.-how-does-it-work
2. If exists, run the Override emulator Script

How to check if adb command is exist

1. Run shell command /usr/local/bin/adb --help (Use exec()) -> If error -> return false
2. Then, Run /opt/homebrew/bin/adb --help
3. If two commands are success (no stderr) -> Return True

Note: adb command can be installed in two different places.

Revert Emulator

1. Run the Revert Script.

Detect the number of Emulator

• As soon as Windows is active -> Check the number of emulator devices

• If the user opens the Android Studio -> open new Emulator -> Back to Proxyman -> Should re-run the script

• 0 Device

• 1 Device

• How to check

  1. Read all running processes of the Windows (not sure if NodeJS has this feature or 3rd-party npm package)
  2. If there is a qemu-system process, check the path if it contains Android/sdk/emulator
  3. Return true

=> If it's 0 =? Show error toast => Else -> Display the number of devices -> Run the Override Emulator Script

Only Override HTTP Proxy

• A dropdown to override HTTP Proxy Script

Override Emulator Script

• Ping @NghiaTranUIT for the script

Revert Emulator Script

• Ping @NghiaTranUIT for the script

How to Test

Override Emulator

0. Open Proxyman -> Install for Android Emulator -> ✅ Verify if the label shows "0 devices"
1. Download https://github.com/ProxymanApp/OKHTTP-Android-Sample
2. Open with Android Studio
3. Create an Android API 30 (Not a Google Play version)
4. Run the app on Emulator
5. Back to Proxyman -> Install for Android Emulator -> ✅ Verify if the label shows "1 device"
6. Click on "Override Emulator"
7. Open Setting -> Security -> Trusted Credentials -> User Tab -> ✅ Verify if the certificate is installed
8. Open the Emulator -> Make Request on the sample app -> ✅ Verify Proxyman can capture traffic

Revert Emulator

1. Click on Revert Emulator
2. Double check if the certificate is removed, the Proxy is reverted.

[NghiaTranUIT]

To count the number of Android Emulators, we can use this alternative approach:

1. Use exec() from NodeJS: https://stackabuse.com/executing-shell-commands-with-node-js/
2. Execute this command: adb devices | grep emulator
3. Parse the stdout and count.

Ref: https://github.com/ProxymanApp/Proxyman/issues/1389#issuecomment-1276922896

[NghiaTranUIT]

Update requirement

• Support multiple android emulators (Use the v2 script)
• No need to display the warning if the number of android emulators is >= 2 (Old requirement)

Ref: https://github.com/ProxymanApp/Proxyman/issues/1389#issuecomment-1277185534

[NghiaTranUIT]

Update Requirement 2

• Click on the "Override Emulator", "Revert", or "Override HTTP Only" -> Check if the Windows & WSL is not installed:
• Show this Action Alert Dialog
• Title: WSL is required!
• Subtitle: WSL is required to execute the emulator Bash Script. Please install it and try again.
• Button Title: How to install?
• Button action: Open this page: https://docs.proxyman.io/proxyman-windows/wsl

Code

export default function Example() {
  return (
    <div className="bg-white shadow sm:rounded-lg">
      <div className="px-4 py-5 sm:p-6">
        <h3 className="text-lg font-medium leading-6 text-gray-900">Manage subscription</h3>
        <div className="mt-2 sm:flex sm:items-start sm:justify-between">
          <div className="max-w-xl text-sm text-gray-500">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae voluptatibus corrupti atque
              repudiandae nam.
            </p>
          </div>
          <div className="mt-5 sm:mt-0 sm:ml-6 sm:flex sm:flex-shrink-0 sm:items-center">
            <button
              type="button"
              className="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:text-sm"
            >
              Change plan
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}