About Monaeo's Traveler App

Monaeo Traveler is the new application for the Calendar and Dashboard, enhancing the current features with the changes introduced in the Tardis project. This Single Page Application is also intended to be multi-platform, in a way that it can be deployed as a standalone app, a mobile app (for Android and iOS), as replacement of the Dashboard and Calendar features in Rails (See monaeo/MONAEO-Backend), and eventually as a Desktop Application.

Developing for Traveler

Getting Traveler up and running is a simple process, as we have created a Dockerfile that will let you quickly get a container with all the requirements to run the app. However, since the application relies on the rails backend to work, we recommend following the instructions at our Engineering Google Site to set up Monaeo's stack using Docker and docker-compose.

If you still want to run only traveler under Docker:

1. Make sure you have Docker installed
2. Checkout this repository
3. CWD to this repository root, and run:

$ docker build -t monaeo-traveler .

This will create an image called monaeo_traveler. To view your images:

$ docker image ls

If no errors occured when running docker build and your image is listed then you can run the container:

$ docker run -v /path/to/your/electraeo:/opt/traveler monaeo-traveler

After running all the commands necessary to get the app's dependencies, the image will run the dev server as your entry point. From then on, you should be able to access the app at port 9000.

Commands

In order to simplify the build process for the different platforms and environments there is a group of commands defined in package.json. The most relevant commands at the moment are:

npm run app:clean Cleans the build directories (all but the rails directory which we'll discuss later) npm run dev:web Starts the dev server in port 9000. The dev server watches for changes on the files, so it will 're-transpile' code when it changes. Built files are placed in the app directory. npm run prod:web Builds the production version of the app for the web. Places the build files in the web directory. npm run dev:rails Builds the development version of traveler for rails. Places the build files under the rails directory. npm run prod:rails Builds the production version of traveler for rails. Places the build files under the rails directory. npm run demo Will deploy the files built with prod:web to the demo server.

For our mobile apps:

npm run dev:cordova:(ios|android) this will generate a development build of traveler for iOS or Android. npm run prod:cordova:(ios|android) this will generate a production build of traveler for iOS or Android.

These builds are placed in the www/ directory and then used as the web-side of the mobile app for iOS or Android. Once the build is done, you can compile the app using XCode or Android Studio.

Traveler for Rails

The traveler version for rails (placed in the MONAEO-Backend repo) is aimed to replace the Dashboard and Calendar features currently implemented in the rails app. Using the npm run prod:rails or npm run dev:rails command will generate a build that is used by the rails app's bower to obtain these files as a package.

If you need to make changes that need to be reflected in traveler for rails, once you have made the build and pushed the files to the repository, ask an administrator to run bower update monaeo-traveler on the proper installation of MONAEO-Backend that you want to see the changes. At the moment, the bower.json entry for the monaeo-traveler package in MONAEO-Backend will download the package from the react branch of the electraeo repository.

Traveler for Mobile

As mentioned before, traveler is also the project from where the new versions of the Android and iOS apps are built.

Build the Mobile App

Based on the platform you want to build for (Android or iOS) you will need to use different tools.

Building for iOS

1. Get XCode
2. Make sure that you have XCode installed, and that you have access to both itunes connect and as a developer for the Monaeo organisation in the Apple developer portal.
3. Make sure that Brew is installed (it will make your life so much easier
4. Install cocoapods using brew install cocoapods
5. Depending on the environment, make sure that the key for mixpanel is set to the proper environment in the ios source code
6. Run npm run app:clean && npm run prod:cordova:ios && npx cordova platform add ios -d --nofetch --nosave && npx cordova prepare ios -d
7. Open Xcode, and under the platforms/ios directory open the Monaeo.xcworkspace file (do not open the .xcodeproj file as it will not compile)
8. Go to the Monaeo project settings and on the Signing section click 'Add Account'. enter your itunes connect credentials and then select the Monaeo LLC Team. Now depending on which environment you want to build for make sure to set the follwing:
9. production

• Set Generic iOS Device as target in iOS
• Verify that the build number for the release is higher than the current release number
• In the project settings, uncheck the "Automatically manage signing" option
• The following steps must be done for both the Signing (debug) and Signing (release) sections
  • Select "Monaeo LLC" as the team
  • Choose the "Traveler App - App Store" Provisioning profile
  • You will get a warning No signing certificate "iOS Distribution" found. Click the "Manage Certificates" button.
  • Here you can Download and import from the apple developer console the current distribution certificate. Otherwise, Create a new iPhone Distribution certificate clicking on the lower left "+" button, and from the apple developer console then set it as the "Traveler App - App Store" provisioning profile current certificate.
• In Xcode, go to Product -> Archive. After the product compiles, you will be asked for your kechain password a bunch of times. Then the Archives window will be displayed.
• Choose the version that you want to submit to the App Store, and click the "Validate..." button. Choose the proper iOS Distribution certificate (which should be automatically selected anyways) and the Traveler App - App Store provisioning profile. You will be asked for your keychain password a bunch of times again, and then the "Validate" button should be displayed. Click it. If you don't get any warnings, then you're good to go.
• Back in the Archives window, click the "Upload to App Store" button. This step is exactly the same than the previous one, but it will finish with the application being uploaded to the App Store.
• From this point, you can either create a new beta release, or send the application for review and later push it to production. All these options should be available from the iTunes Connect portal.

10. development

• In the Project settings, make sure the "Automatically manage signing" option is checked and choose Monaeo LLC as the team (if you haven't signed in to your apple development console, then do so using the Log in button in the project settings and then the team should be available).
• Choose the iOS simulator device that you want to run the development build on in the target section of XCode
• Click the Play icon. Wait for the simulator to load and automatically launch the app

Building for Android

1. Get the latest Java JDK
2. Get Android Studio
3. Make sure that you have the proper keystore file available somewhere in your computer. You can get it from this S3 Bucket. The file to be downloaded is monaeo_upload.keystore. Place it in the root directory of the project.
4. Depending on the environment, make sure that the key for mixpanel is set to the proper environment in the android source code
5. Run npm run app:clean && npm run prod:cordova:android && npx cordova platform add android -d --nofetch --nosave && npx cordova prepare android -d
6. Start Android Studio and open the project under the platforms/android directory
7. Now depending on which environment you want to build for, make sure to do the following:
8. Production

• Make sure that your monaeo_upload.keystore file is in the root of your project's directory (right where the config.xml file for cordova is)
• From Android studio, Go to Build -> Generate Signed APK.... You will be prompted for the keystore file, look for the monaeo_upload.keystore file. The keystore password is in a file in the same S3 Bucket from where you downloaded the keystore file. The keystore alias is monaeo and the key password is the same as the Key store password. Then click Next.
• Set the APK Destination folder to where you want the apk to be generated. Select the build type to release and check both Signature Version options (V1 and V2). Then click Finish.
• If you get the following error when building: java.lang.RuntimeException: Failed to create component for 'dialog' reason: java.awt.HeadlessException, edit the file cordova.gradle under Gradle Scripts in the project explorer and make the doPromptForPassword function return null (you can just remove all the code in that function and put a return null statement). Then try the build once again. Remember that if this happens, every time you run npx cordova prepare android this file will be reset to its original form.

9. Development

• To run the application in development mode, make sure that your android phone is in developer mode and plug it to your computer. Then just click the green play icon in Android Studio and select your phone.
• To run the application on a simulator, click the green play icon in Android Studio, create a new virtual device with the API version that you need and then select it for running the application.