Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add capacitor android #3955

Merged
merged 3 commits into from
Jun 28, 2024
Merged

Conversation

McGiverGim
Copy link
Member

@McGiverGim McGiverGim commented May 13, 2024

This is a PR trying to add Capacitor support to the Configurator.

I make it in a draft state because I was trying to make Serial working and I'm having problems to debug it. I've been trying to debug with an FC connected. I have tried wifi debug without luck with a real device, and usb passthrough with the emulator without luck neither. Maybe other with more knowledge (or luck) can give it a try.

I have three commits, to try to let the things clear and be able to divide this PR in parts in the future:

  • The first adds Capacitor to the Configurator with Android support. The major part of files are created by Capacitor.
  • The second one removes some lines that make the app crash (there is not chrome var here)
  • The third one adds one library for usb-serial to the app, but I can't advance because the problems to debug explained. Look at the webSerial.js file, is where I was trying to do some tests.

To test this PR you need to have Android Studio installed. You need some Virtual emulator created (or a real device connected in debug mode). I've added some commands to the package.json to make this easier. The steps are:
0. Execute a yarn install to update the packages.

  1. Build the vite app with yarn build
  2. Sync the contents of the vite app with the Android app with yarn cap:sync
  3. Start the Android app in the emulator with yarn cap:android (you can use too the npx cap open android command to open Android Studio with the app and execute from there).

Alternativelly to test this faster I've added a yarn android command that does the steps 1-2-3 above in one. The hot deploy is not working in this version, it's in the todo list.

Copy link

netlify bot commented May 13, 2024

Deploy Preview for origin-betaflight-app ready!

Name Link
🔨 Latest commit fe23483
🔍 Latest deploy log https://app.netlify.com/sites/origin-betaflight-app/deploys/667ecbd4ef573d00080cc968
😎 Deploy Preview https://deploy-preview-3955.dev.app.betaflight.com
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

This comment has been minimized.

@haslinghuis haslinghuis mentioned this pull request May 14, 2024
52 tasks
Copy link

sonarcloud bot commented May 16, 2024

Quality Gate Failed Quality Gate failed

Failed conditions
2 Security Hotspots
8.1% Duplication on New Code (required ≤ 3%)

See analysis details on SonarCloud

@McGiverGim
Copy link
Member Author

Rebased against master

@haslinghuis
Copy link
Member

Would love a solution which not only includes Android but also IOS support

@McGiverGim
Copy link
Member Author

True. I don't have Mac or Iphone devices, so other must do this work. But yes, the library selected for serial must be compatible with both systems to simplify things.

@McGiverGim
Copy link
Member Author

@haslinghuis rebased.

If we plan to move forward with this, I think we need to merge this as is. I've tried to make this work (Betaflight in Android), but I was not able to make hot reload working with capacitor on Android. The app crashes. And without this, it's a nightmare to develop against this (I tried to add a serial library but without hot reloading it's very difficult and slow).

I think is better to merge, and let others try with little PRs to make this advance. If for some reason we decide to remove this later, it's as easy as remove the Android folder, the capacitor.config.json and revert the changes in the package.json of this commit.

I've added a little of branding with Betaflight icon to this PR, but it does not work too well, but for a first version it's ok while we make this work.

@McGiverGim McGiverGim marked this pull request as ready for review June 26, 2024 10:54
It's only the basic code to start as base. It needs a lot of fixes/changes to make it functional.
@McGiverGim
Copy link
Member Author

Rebased again against master...

@McGiverGim
Copy link
Member Author

I think I have it working with "live reload", so it's a first step. The problem is that it needs some "manual" changes, that I can't push.
Maybe someone knows how to automate it as an "alternate" build/run.
I detail here the changes:

  • Start the vite server with yarn dev --host. This will publish the server with a "private" address appart of the habitual localhost:8000.
  • Add to the capacitor.config.json the server url of the previous step:
  "server": {
    "url": "http://192.168.100.15:8000"
  }
  • Add permission for clear text traffic to the AndroidManifest.xml:
android:usesCleartextTraffic="true"
  • Now you can start it with yarn android

@McGiverGim
Copy link
Member Author

Added new commit with "basic" reload.
Instructions:

  • Start the server with yarn dev --host
  • Copy the IP of the server (not the localhost one) to the capacitor.config.dev.json
  • Execute a yarn android:dev

I will try to make the copy IP step automatic, but I don't know if I will be able.

@McGiverGim
Copy link
Member Author

Sorry, it seems the --configuration parameter only works with the ionic command, not with the npx one. So I need to rethink this...

@McGiverGim
Copy link
Member Author

I reverted the latest change. We will need to do the live reload manually at this moment.

The documentation says that the config file can be a .ts file, so it can be generated dynamically. I don't know if this can be a good approach.

@McGiverGim
Copy link
Member Author

I've added some very basic instructions for Android to the README, only development at this stage, because it's not functional, but can help if someone want to give it a try.

@nerdCopter
Copy link
Member

nerdCopter commented Jun 28, 2024

this PR's netlify on android 14 phone, Chrome :
image

(no i did not read everything if this test was not valid 😆 )

@nerdCopter
Copy link
Member

i had to chmod +x ./android/gradlew as per

 Running Gradle build - failed!
[error] gradlew file does not have executable permissions. This can happen if the Android platform was added on a
        Windows machine. Please run chmod +x ./android/gradlew and try again.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

afterward, i could not continue the entire yarn android:dev because i do not have SDK installed.

@McGiverGim
Copy link
Member Author

The result using PWA it's the same than with this PR if you build it. The problem it's the web serial, fails and crashes the loading.
We need to clean and unify all the serial implementations and then add another one for Android.
This PR only adds the base to start with the Android work.

Copy link
Member

@nerdCopter nerdCopter left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • may need another rebase :( i saw flashing bar not on bottom; otherwise still works on PC.
  • approving for the workflow

@haslinghuis haslinghuis merged commit 2339486 into betaflight:master Jun 28, 2024
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Development

Successfully merging this pull request may close these issues.

3 participants