About OpenEmojiPlatform

About The Screens

Commit Conventions

Code Quality

Important Commands

How to run with Android Studio

How to run with Visual Studio Code

OpenEmojiPlatform is based on the Emojipedia website which is established by Zedge AS. The app is developed by seven students for the course Informatics Project II IT2901 at Norges teknisk-naturvitenskapelige universitet (NTNU). The purpose of OpenEmojiPlatform is to be the predecessor of the official Emojipedia app, with Zedge retaining the option to continue its development.

OpenEmojiPlatform has seven screens. The four main screens can be accessed from the bottom navigation bar.

The home screen is the first screen the user is met with when launching the app. It allows users to browse the most popular emojis, upcoming events and latest news.

The search screen allows the users to search and filter after specific emojis.

The Game screen allows users to play an emoji themed quiz. Users are confronted with emojis and has to guess among alternatives what the emojis represent. If the guess is wrong, the question remains for the user to retry; Otherwise, the user is taken to the next question.

The favorite screen is all about managing emoji sequences. The user can delete, edit and copy the sequence to clipboard.

The emoji detail screen is accessed by clicking on an emoji icon from either the home or search screen. It allows the user to discover the meaning of an emoji and copy it to the clipboard. Additionally the user can create their own custom emoji sequence.

The event list screen is accessed from the home screen. It gives the user a listview of the latest events & topics.

The event list screen is accessed from the home screen. It gives the user a listview of the latest news.

• no uppercase letter to start the header
• no punctuation at the end of the header
• imperative verbs ("update README.md", not "updated README.md")
• use the message generated by git for PRs (Pull Requests)

• Use ktlint to format your code. You can run ./gradlew ktlintFormat command to format your code and set up your editor to run ktlint on save to make it easier. Some changes like too long lines have to be fixed manually though.
• Use camelCase for variable names and function names and PascalCase for Composables according to the Kotlin style guide.

• ./gradlew ktlintFormat - format your code using ktlint.
• ./gradlew installDebug - build and install the app on the emulator or connected device.
• ./gradlew test - run the tests.
• ./gradlew connectedAndroidTest - run the UI tests on the emulator or connected device.
• emulator -avd EMULATOR_NAME - start the emulator. Replace EMULATOR_NAME with the name of the emulator you want to start.

You need to either pair up your Android phone or set up a virtual device in accordance to the documentation.

You can simply set up the emulator by using the built in AVD Manager. Create a new emulator using the Create Virtual Device button. You can also run the emulator using the Run button in the AVD Manager.

To run the app on the emulator or connected device use the Run button in the top right corner of Android Studio. You can also enable the Instant Run feature to make the app recompile from the changes you make without having to manually run the app.

Disclaimer, using Visual Studio Code is difficult because it relies on the Android Command Line Tools, a bunch of extensions and some custom scripts. Only do this if you really want to. First, install the Android Command Line Tools at the bottom of the page or use a package manager to install it. Next you need to install the necessary dependencies using sdkmanager:

sdkmanager "emulator" "platform-tools" "build-tools;34.0.0"

After that make sure to add both the emulator and platform-tools folders to your PATH. They should be located inside the folder for the Android Command Line Tools.

You also need to install an Android version and a system image for the emulator. These can be included in the command above. For, example here I am installing Android 14 (the newest version) and the google play arm64 system image (because I have an arm64 processor):

sdkmanager "platforms;android-34" "system-images;android-34;google_apis_playstore;arm64-v8a"

This is the same as choosing a system image in the Android Studio AVD Manager, just without a GUI. The image above is equivalent to the Pixel 6a with Google Play and Android 14.

Then you need to create an emulator using the avdmanager:

avdmanager create avd -n "Pixel6a -k "system-images;android-34;google_apis_playstore;arm64-v8a" -d "pixel_6a"

This will create an emulator named "Pixel6a" using the system image we installed earlier. You can also use the avdmanager to list, delete and modify emulators.

Now you can run the emulator using the emulator command:

emulator -avd "Pixel6a"

These are all the tools you need to run the app, but it still is a bad development experience since you need to manually run the emulator and you don't get the nice debugging features of Android Studio, or any syntax highlighting or autocompletion. To fix this we first need to install a handful of extensions:

• Kotlin Language - for syntax highlighting and code snippets.
• Kotlin - code completion, references, hover, go-to-definition and semantic highlighting.
• XML - for the XML layout files, provides syntax highlighting, code snippets and formatting.
• Android - for debugging the app.
• Android iOS Emulator - for running the emulator easily through vscode.
• Gradle Language Support - for syntax highlighting and code snippets in the gradle files.

Now that you have all the extension we need to set everything up. Firstly when developing you need to start the emulator using the Android iOS Emulator extension. Make sure to provide the correct emulator path to the extension in the vscode settings. When that is setup we need to create some scripts for the debugger, for building and running the app and for linting using ktlint. There are extensions for formatting available, but I couldn't get them to work with our Ktlint gradle setup.

All scripts should be put in .vscode. Firstly we need to create a launch.json file for the debugger. This is the file that tells the debugger how to run the app. Here is an example:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "android",
      "request": "launch",
      "name": "Launch",
      "preLaunchTask": "build",
      "appSrcRoot": "${workspaceRoot}/app/src/main",
      "apkFile": "${workspaceRoot}/app/build/outputs/apk/debug/app-debug.apk",
      "adbPort": 5037
    },
    {
      "type": "android",
      "request": "attach",
      "name": "Attach",
      "appSrcRoot": "${workspaceRoot}/app/src/main",
      "adbPort": 5037,
      "processId": "${command:PickAndroidProcess}"
    }
  ]
}

This file tells the debugger to run the app using the build task we will create and to use the app-debug.apk file as the app. The adbPort is the port that the debugger uses to communicate with the emulator. You can use the Attach configuration to attach to a running process if you want to debug a specific part of the app after it has started.

Now for building and formatting with ktlint we need to create a tasks.json file.

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "ktlintFormat",
      "type": "shell",
      "command": "./gradlew ktlintFormat",
      "group": "build",
      "presentation": {
        "reveal": "silent"
      },
      "problemMatcher": ["$msCompile"]
    },
    {
      "label": "build",
      "type": "shell",
      "command": "./gradlew installDebug && adb shell am start -n com.platform.openemoji/.Activity",
      "dependsOn": "ktlintFormat",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "presentation": {
        "reveal": "silent"
      },
      "problemMatcher": ["$msCompile"]
    }
  ]
}

This file tells vscode to run the ktlintFormat task before the build task. The ktlintFormat task runs the ktlint formatter and the build task builds and installs the app on the emulator. The problemMatcher is used to parse the output of the gradle tasks and to show errors and warnings in the vscode problems tab. You can run the build task manually by pressing Ctrl+Shift+B, or set the task up to run automatically. This makes sure that the code gets formatted and the app gets built and opened immediately when you run the build task.