README
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.
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.