Tutorial 1: Fire up a basic FOpen app

The Fieldtrip Open framework is being defined by the diagram below:

https://docs.google.com/drawings/d/1j4RQ4oAaNQhRn2nGWfwGXIsO4itcaAAKgTyXWP9MsiA/edit?usp=sharing

As you can see from the image the project is the one that defines the theme and the plugins that will be included on the final apk. Let's go and create our own project.

• Create my own project:

git init
git add README.md
git commit -m "first commit"
git remote add origin git@github.com:panterz/fieldtrip-panos-example.git
git push -u origin master

• Create the fieldtrip project structure

.
├── platforms
│   └── android
│       └── res
├── src
└── theme

• Add my own theme The Fieldtrip Open is based on jquery mobile. The way to add my own theme is to go and customize jquery mobile. Here's an example of a theme I just built, which I need to download and put it inside my project. The file structure now is:

.
├── platforms
│   └── android
│       └── res
├── src
└── theme
    └── css
        ├── fieldtrip-panos-example.min.css
        └── images
            └── ajax-loader.gif

• Next step is to add the icons that will be used as the icons that will be used from Android on the app list. I've added the opal example ones and here's our new file structure:

.
├── platforms
│   └── android
│       └── res
│           ├── drawable
│           │   └── icon.png
│           ├── drawable-hdpi
│           │   └── icon.png
│           ├── drawable-ldpi
│           │   └── icon.png
│           ├── drawable-mdpi
│           │   └── icon.png
│           └── drawable-xhdpi
│               └── icon.png
├── src
└── theme
    └── css
        ├── fieldtrip-panos-example.min.css
        └── images
            └── ajax-loader.gif

• Next step is to add which branch of Fieldtrip-Open will be used, which cordova plugins need to be included. The file will be saved inside the theme folder as project.json:

{
    "versions":{
        "core": "cobweb",
        "project": "0.0.1"
    },
    "plugins":{
        "cordova": [
            "https://github.com/apache/cordova-plugin-camera.git#0.3.6",
            "https://github.com/apache/cordova-plugin-console.git#0.2.13",
            "https://github.com/apache/cordova-plugin-device.git#0.3.0",
            "https://github.com/apache/cordova-plugin-device-orientation.git#0.3.11",
            "https://github.com/apache/cordova-plugin-file.git#1.3.3",
            "https://github.com/apache/cordova-plugin-media.git#0.2.16",
            "https://github.com/apache/cordova-plugin-media-capture.git#0.3.6"
        ],
        "fieldtrip": {
        }
    }
}

• Finally we need to overwrite the header of the app from "Fieldtrip Open" to "Panos". We need to create a header.json inside the src/templates folder:

{
    "title": "PANOS"
}

Here's our final directory structure:

.
├── platforms
│   └── android
│       └── res
│           ├── drawable
│           │   └── icon.png
│           ├── drawable-hdpi
│           │   └── icon.png
│           ├── drawable-ldpi
│           │   └── icon.png
│           ├── drawable-mdpi
│           │   └── icon.png
│           └── drawable-xhdpi
│               └── icon.png
├── src
│   └── templates
│       └── header.json
└── theme
    ├── css
    │   ├── fieldtrip-panos-example.min.css
    │   └── images
    │       └── ajax-loader.gif
    └── project.json

• Next step is to clone fieldtrip-open project on your local machine:

git clone git@github.com:edina/fieldtrip-open.git
cd fieldtrip-open

• You need to add a configuration file that will define different variables such as pcapi url, name of the app etc. There's an example inside the etc folder of Fieldtrip Open.

cp etc/config.example panos.ini

Then we need to edit panos.ini and replace some fields such as:

name=PANOS
location=panos.ini

; git repository of project
project=ssh://git@github.com/panterz/fieldtrip-panos-example.git

; the install directory
runtime_dir=panos

location=panos.ini

; git repository of project
project=ssh://git@github.com/panterz/fieldtrip-panos-example.git

; the install directory
runtime_dir=panos

• Next step is to create our first apk. There's a list of commands that will help us accomplish this.

fab -l

is giving back:

Available commands:

    _copy_apk_to_servers     Copy APK file to servers
    _stats_run_command
    build                    Build the app for a specific platform
    build_android
    build_ios                Build the ios app
    check_plugins            Check if newer versions of cordova plugin are available.
    clean                    Tidy up app. This should be run before switching projects.
    clean_runtime            Remove the runtime directory
    deploy_android           Deploy to android device connected to machine
    deploy_ios               Deploy to an iOS device connected to machine
    generate_config_js       generate config.js
    generate_docs            Auto generate javascript markdown documentation
    generate_html            Generate html from templates
    generate_html_ios
    install_cordova_plugin   Install cordova plugin from a local directory.
    install_plugins          Set up project plugins
    install_project          Install Cordova runtime
    install_project_android  Install the android project in the cordova runtime
    install_project_ios
    merge_locales            Merge the translations from the core, plugins and project in that order
    release_android          Release android version of fieldtrip app
    release_ios              Release ios version of fieldtrip app
    stats_export             Print authoring tool export stats.
    stats_uploaded_records   Based in the access logs reports the records posted per month
    stats_usage              Print out android app start stats by version.
    update_app               Update the platform with latest configuration (android by default)

• The command for installing the cordova plugins and generating the new html files is:

fab install_project

• Finally let's deploy the app to a device:

fab deploy_android