Skip to content

Modifying the Android App with CapacitorJS

cynber edited this page Nov 11, 2024 · 5 revisions

Capacitor & Android App

See the official Capacitor documentation if you have any issues.

Before Starting:

  • Clone the repo and go through the basic setup steps from the homepage to make sure that the website can run.
  • Install Android Studio if you don't have it already. See also the Capacitor notes on what SDK you need during installation

Setup

  1. Build the site with npm run docs:build so that the most recent changes are exported. Capacitor is already set up to look in the appropriate directory.
  2. Run npx cap sync to sync our web application to the Capacitor project
  3. Open Android Studio and open a new project and select the ./android directory of our repository (NOT the root directory). Wait for the project to finish setup. You can see the progress in the bottom bar. (While you can open the project with a command, you may run into errors.)
  4. Go to File > Sync project with Gradle files. If you don't see the menu, click the 4-bar icon in the top left.

The app is now ready for you to run on the tablet or on an emulator.

Run app on the tablet

  1. See the Guide on how to 'Run apps on a hardware device '. We recommend using a wired conenction with the actual tablet device.
  2. Once you see the tablet listed in the top bar (ex. LENOVO Lenovo TB-8506F), you can click the play button to run the app. It will take some time to build and install the app.

Updating Icons

Source (Capacitor Docs)

  1. If needed, install npm install @capacitor/assets --save-dev
  2. Add new icon and splash screen images to the assets folder in the root directory:
    • Icon files should be at least 1024px x 1024px.
    • Splash screen files should be at least 2732px x 2732px.
    • The format can be jpg or png.
assets/
├── icon-only.png
├── icon-foreground.png
├── icon-background.png
├── splash.png
└── splash-dark.png
  1. Generate the assets with npx capacitor-assets generate. Additionally, run npx capacitor-assets generate --android to generate the Android assets.

Initial Installation

Caution

You likely won't need to do this. This section is for reference in case we need to rebuild the project from scratch.

Install Capacitor and the CLI

npm i @capacitor/core
npm i -D @capacitor/cli

Initialize Capacitor with your app information

npx cap init

Details:

  • App Name: Digital Literacy
  • App Package ID: org.artjusticeresearch.digitalliteracy
  • Directory: docs/.vitepress/dist

Add the platform you want to build for. For example, Android:

npm install @capacitor/android

npx cap add android         # Add the Android platform