Frontend, multiplatform mobile application

Contributors: Johan Berndtsson, Pontus Stjernström, Nicole Ascard

Information for students of the Software Engineering Project Course

How to build the Android version of the application from scratch

Requirements

Nodejs with npm accessible from your terminal (preferably version <= 5)
Git installed and accessible from your terminal
Android Studio version >= 3.0.1

Might need to add npm or git to your PATH in your operating system in order to access them from the terminal. Both can be tested with command 'git --version' or 'npm --version'.

Forking the base project repo

If you don't have a gihub account, create one
Go to https://github.com/avajadi/portablecdm
Fork the repository by clicking the Fork button in the upper right corner

Cloning your repo

Use the terminal to CD into your destination folder
Get the clone URL from your repository and use in the git clone command below
Run command: git clone

Installing EXPO

CD into the App folder in the repo
Run npm install
Install exponent CLI with: npm install -g exp
Run exp start and create an account if you don't have one already. One per application should be enough.
Make sure your development url is visible in terminal.

Installing and building with Android Studio

Start Android Studio and select Open project.
Open the folder 'android' inside App in the repo.
Press OK or the default button all the way.
Follow gradle prompts and install missing SDK platforms and build tools. (there are quite a lot) 4.1. If you get the error similar to 'A problem with running prepare-detached-build.sh' when syncing with gradle, you might need to change the rights to the script. This happened on both Ubuntu and Mac OS. Go through the terminal to the repo portcdm-mobile-app/App/android/detach-scripts and run command 'sudo chmod +x prepare-detached-build.sh'.
If and only if you can successfully build the project (with or without warnings) by pressing the green hammer up to the right, navigate to the MainActivity class in app/java/host.exp.exponent/MainActivity and change line 21 to your account. For example, if your account name is kalle88, your expo publishedUrl would be exp://exp.host/@kalle88/portcdm-app'.
Click Play button

The following steps are optional but recommended, if you want to run the App on an emulator and not on a real Android phone connected with USB to your machine. If you previously have developed Android apps you also might have an installed emulator already.

Click 'Create New Virtual Device'.
Select Nexus 5X (at least recommended) and click Next
Download and select a system image with preferably API level 25 (Android 7.1.1). It is recommended to download a x86_64 for 64 bit operating systems. Other versions will probably work as well.
Name your AVD (Android Virtual Device) and press Finish.
Select your emulator that you just created and press OK. Don't forget that exp needs to be started in the background with exp start.
The phone should now start and connect to your exp account.

Building an APK that can be distributed

Run command exp --publish to compile and publish the JavaScript parts of the project.
In Android studio, go to Build -> Generate Signed APK...
To sign your app you need to create a key store. One per group should be enough and it can be saved in the repo as long as you keep the password secret. Click 'Create new...' and enter some information. Everything is not mandatory.
When you have selected your key, press Next. Select flavor 'prod' and check both checkboxes and click 'Finish'.
The building can take a while and when successful, the apk can be found in portcdm-mobile-app/App/android/app/prod/release/app-prod-release.apk.

General tips and tricks for students :)

React Native is a JavaScript based library for developing mobile apps.
exp = Expo = Exponent is a kind of platform for React Native and distributing JavaScript code
exp can be buggy. If it cannot be started, simply restart or run with exp start --tunnel to force tunnel mode. Read more about how to use exp here: https://docs.expo.io/versions/latest/guides/exp-cli.html
If, for some reason, your app can't find your expo account, you sometimes must change the DEVELOPMENT_URL under app/java/host.exp.exponent/generated/DetachBuildConstants but it shouldn't be needed.
When the device is running, you can see options with Ctrl + M or Cmd + M.
If something breaks with the emulator, always try restarting first.
When developing in JavaScript and exp is running, live reload should be enabled. Everytime someting is saved in a file inside the App folder, the app will reload automatically. If it does not, you can use Cmd / Ctrl + M.
Google is your friend.

Developer info

Build version

iOS

Change Expo account in .plist
Targets->Build Settings->Packaging->Product Bundle Idenfifier = SET
Targets->Build Settings->Packaging->Product Name = SET
Targets->Info->Bundle name = SET
Targets->Info->Bundle Identifier = SET
Targets->Info->Bundle display name
Archive

For ad hoc

Export->Select Ad-Hoc->Manual sign->Select correct provisioning profile->Export

Android

Change Expo account in MainActivity
Change applicationId to choice in build.gradle
Change app_name value in strings.xml

Deployment checklist

Check config/version.js
Check components/about-view/index.js and append Changelog
ALWAYS publish on staging (pontusstjerna) before production (avajadi)
Push to git :)

avajadi/portablecdm