ebhybrid

#EBHybrid Setup

The ebhybrid command-line utility is meant as a bootstrapping tool for Ekstra Bladets hybrid app platform. The script can set up a blank project or start an app from a git repo. Once set up, the ebhybrid utility takes care of tasks like bundling your source, running the app in various emulators – and even, if you set up the build tool in your source corretly, compile everything in one go.

• EBHybrid Setup
  • Requirements
  • Instalation
  • Usage
    • Package help
    • Create a project
    • Add platform
    • Cordova
      • Plugins
      • Emulate
    • Telerik
      • Plugins
      • Emulate
  • SRC

Requirements

The ebhybrid utility requires various components to be installed beforehand – and as the installation process for these components change over time, it is a sisyphean task to maintain a one-click installer. So instead, you get a list of things to install under your own steam:

• Node.js and npm (node package manager)
• The Android SDK and emulator
• The Genymotion emulator
• The Cordova utility
• The Telerik appbuilder CLI
• The iOS Simulator (if you're on a Mac)
• The ios-sim command-line utility (if you're using the iOS Simulator)

Node.js and npm are usually installed together. Head on over to https://nodejs.org/ to get yours.

The Android SDK lives here: https://developer.android.com/sdk/ – the path of least resistance is to install the entire Android Studio.

The Genymotion emulator is here: https://www.genymotion.com/ – it's a faster Android Emulator. The default one from Google is bordering on useless.

Get Cordova here: https://cordova.apache.org/ – Cordova is the foundation upon which almost all hybrid apps are built.

Install the Telerik appbuilder CLI from here: http://www.telerik.com/appbuilder/command-line-interface. After installing, make sure to run appbuilder login before building using Telerik.

The iOS Simulator is part of Apple's XCode IDE, so you need to install the whole thing to get the juicy morsel that is the emulator.

You also need the ios-sim command-line utility to be able to build directly to the emulator with the ebhybrid utility. This you can install via npm using [sudo] npm install ios-sim -g.

Instalation

npm install ebhybrid  -g

Usage

Package help

ebhybrid --help

Create a project

ebhybrid create dirname [ProjectName]  [platforms] [--bundleid bundleid] [--git gitaddress]

The available [platforms] are:

• --cordova
• --telerik
• Both can be used at the same time

[ProjectName] The name of the project. If more than 1 word, use quotes. eg 'Live Score'.

[-- bundleid bundleid] The projects Bundle ID. Should be in the form of com.example.ProjectNameWithOutSpaces

[--git gitaddress] in case a git repo will be used for the source.

Add platform

In case you didn't add Cordova or Telerik for your project.

ebhybrid add [platform]

Where [platform] should be cordova or telerik. No dash

Cordova

Once Cordova is added to your project, you can add plugins and emulate with EBHybrid, you can do this from the root of your project or from the src folder.

Plugins

The src directory should contain a file called .ebplugins, if it doesn't exist, it will be created for you. This file contains the list of Cordova Plugins needed for the project. You can add a plugin directly to the file, or use the command line.

ebhybrid cordova add [plugin]

Emulate

To emulate using EBHybrid, there must be a build folder in the src. Everything in that folder will be copied to the appropriate folder in the Cordova directory and run the emulator.

ebhybrid cordova emulate [platform]

Where platform must be ios or android

Telerik

Once the Telerik is setup, it is possible to use EBHybrid to build and emulate using appbuilder.

Plugins

Plugins have to be added manually as appbuilder asks for a specific version, and Telerik has some different versions than Cordova. But Telerik offers all the core plugins as default.

appbuilder plugin add [plugin]

Emulate

ebhybrid telerik emulate [platform]

Where platform must be ios or android.

It is required, that there exists a build folder in src. As it will be copied to the telerik folder.

SRC

This is the file structure of just creating a project.

EBHybrid Project
    ┣━ .ebhybrid
    ┗━ src
        ┣━ .preprocessor.js
        ┣━ gulpfile.js
        ┣━ webpack.config.js
        ┣━ htdocs
        ┃   ┗━ template.html
        ┣━ img
        ┃   ┗━ EBUD.png
        ┣━ js
        ┃   ┗━ app.js
        ┗━ less
            ┗━ style.less

It is important that if you have a different src structure, after building your source, there is a build folder.