itchy-ionic

A hybrid-native approach to a Scratch mobile app built with the Ionic framework

Developing

Prerequisites

itchy-ionic is built with Ionic Vue, which means you'll need to understand Ionic and Vue.js as well as Capacitor if you're building the app for Android.

Process

Before adding new features, check the issues page to make sure there are no issues you can fix. While developing new features and/or components, please make sure that your code is as modularized and is as reusable as possible.

Capacitor Live Reload

Capacitor provides a very handy hot-reload function that combines the best parts of a native Capacitor app and the Vue CLI's native hot-reload tool. We've aliased this functionality with the following script:

npm run dev

Building for platforms

Requirements

A properly set-up installation of Android Studio
Git
NPM
Node.js
The Ionic CLI: install with npm install -g @ionic/cli

Building for android

First, clone the repository: git clone https://github.com/Scratch-Client-4/itchy-ionic.git Then go into it and install all dependencies:

cd itchy-ionic
npm install

Then run the build script:

npm run production

To run on an emulator, press the "Play" icon in the top toolbar or use Shift+F10.

To build APK's for production, open the "Build" menu, hover over "Build Bundle(s) / APK(s)", and select "Build APK(s)".

Building assets

As a mobile app, there are several assets that are required to be built for different screen sizes. All asset builds use cordova-res, which you can install with:

npm install -g cordova-res

Generating icons

Itchy uses the new standard of Android Adaptive Icons, which means that any icon updates must:

Be high-resolution
Be made up of foreground and background components
Fit the size limits of adaptive icons outlined in the requirements

Building icons is as simple as this:

cordova-res --type adaptive-icon
cordova-res --type icon

The icons are placed in ./resources/android/icon where they can be referenced by the config.xml file.

Generating splash screens

The splash screen displays when the app is opened but still loading. It must be simple and also follow the Cordova splashscreen guidelines. Splash generation is slightly tricky since we have to build for both light and dark mode. Light mode is easy enough:

cordova-res --type splash

However, dark mode is not explicitly supported by cordova-res, so the team created a custom build script for dark splashes, which must be run from the root of the project:

npm run-script genDarkSplashes

Take note that this script is only designed for Unix-based operating systems such as Mac and Linux. The forward slashes will break the script on Windows. The easiest way to get around this when trying to build on Windows is to temporarily replace the forward slashes (/) with escaped backslashes (\\).