Pixi’VN

Appearance

Mobile distribution ​

There are various ways to distribute mobile applications. In our case you will use Ionic to build the mobile application and Capacitor to deploy it to the mobile devices.

For add in the project the mobile implementation, you need install Ionic Extension Pack in Visual Studio Code.

After install the extension, you need Add Capactior Integration in the project.

image

image

Open capacitor.config.ts and make sure webDir matches the folder intended for the build. If you have use the template, the folder is dist.

ts
// capacitor.config.ts
import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'my.app',
  appName: 'my-app',
  webDir: 'dist'
};

export default config;

Android ​

For Android, you need to install Android Studio.

After install Android Studio, you must go to Ionic Extension Add Android Project.

image

image

After add the Android project, you need Build and Sync the project, this way the android project will be updated with the latest changes in the main project.

image

You need to set the screenOrientatio, in the android\app\src\main\AndroidManifest.xml.

xml
<!-- AndroidManifest.xml -->
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application>
        <activity
            <!-- For horizontal orientation -->
            android:screenOrientation="sensorLandscape"
            <!-- For vertical orientation -->
            android:screenOrientation="sensorPortrait"
            <!-- ... -->
            >
        </activity>
    </application>
</manifest>

Ok, now if everything went well, after Android studio has finished compiling the project,

image

You can run the project on an emulator.

image

Run project on your android device ​

If you have an android device, you can run (and debug) the project on it.

First, you need to install the OpenJDK, you can download it from Microsoft OpenJDK and set the JAVA_HOME environment variable.

bash
// Windows
$env:JAVA_HOME="C:\Program Files\Microsoft\jdk-21.0.4.7-hotspot"
// Linux
export JAVA_HOME=/usr/lib/jvm/java-11-openjdk-amd64
// MacOS
export JAVA_HOME=$(/usr/lib/jvm/java-11-openjdk-amd64)

Second, you need to install the ADB (Android Debug Bridge) and add ADB to your Path environment variables. You can read the instructions here.

After that, you need restart your computer.

Now, you need to enable Developer Options on your device and enable USB Debugging. After that, connect your device to your computer and run the project.

Ok, now you can go on Ionic Extension and run the project on your device (remenber to run Build and Sync before).

image

iOS ​

For IOS the documentation is currently under review.

image