-
Notifications
You must be signed in to change notification settings - Fork 1
Modifying the Android App with CapacitorJS
cynber edited this page Nov 11, 2024
·
5 revisions
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
- 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. - Run
npx cap sync
to sync our web application to the Capacitor project - 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.) - 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.
- See the Guide on how to 'Run apps on a hardware device '. We recommend using a wired conenction with the actual tablet device.
- 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.
- If needed, install
npm install @capacitor/assets --save-dev
- 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
- Generate the assets with
npx capacitor-assets generate
. Additionally, runnpx capacitor-assets generate --android
to generate the Android assets.
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