Propelling World-class Cross-platform Hybrid Applications ✈

Table of Contents

• Elevator Pitch
• Say Whaaat
• Getting Started
• Project setup
• Running on Windows
• Workflow
• What has been generated?
• Talk to us
• Want to contribute?
• Our fleet
• Our Values
• History
• License

Elevator Pitch

A Yeoman generator using AngularJS, Express, ngCordova, Gulp and Bower that helps you kickstart highly sophisticated Ionic projects to evolve and upgrade every aspect of your development to the next moonshot.

Say Whaaat

AVIONIC ✈ is an incredibly simple mobile app creation tool for Android and iOS.

Getting Started

Features

AVIONIC ✈ takes care of providing everything needed to get started.

• Gulp jobs for development, building, emulating and running your app
• Compiles and concatenates your Sass
• Local development server with live reload, even inside ios emulator
• Automatically inject all your JS sources into index.html
• Auto min-safe all Angular DI through ng-annotate, no need to use weird bracket notation
• Comes already with ng-cordova and lodash included
• generate icon font from svg files
• Blazing fast

Project setup, installation, and configuration

Project setup

Using Parse to provide a backend for the app

• To start, you should first create an account on parse.com.

• Once logged in, access the Dashboard where you should be able to create a new app.

• Create a brand new app called Avionic.

• After creating the app, you will see in settings/keys your app IDs and keys. These will be used later in the Avionic app configuration.

• Go to Core\Data

• Import the Avionic.json file

• That's it!

Installation

Installing the generator-avionic

Export the repo to your local computer

You should have Yeoman installed globally

npm install -g yo

To install generator-avionic from npm, run:

npm i generator-avionic

Finally, initiate the generator:

yo avionic

after installation, edit:

Edit app/templates/scripts/config/app.config.js to set your application API keys. (FACEBOOK_ID,GOOGLE_ID,TWITTER_ID,TWITTER_SECRET and Parse APP_ID and REST_API_KEY)

Then, just run:

gulp

to start up the build job and file watchers.

In order to compile Sass, you need to have ruby and the sass ruby gem installed: gem install sass.

Running on Windows

The generator should work just like on unix/mac.

You will need Ruby and SASS installed.

1 - Download the ruby installer 2 - Click install and select the option to create environment variables 3 - Open cmd and download the gem of the SASS, typing: gem install sass

We are looking for contributors to help us test and optimise the AVIONIC ✈ for Windows.

Workflow

This doc assumes you have gulp globally installed (npm install -g gulp). If you do not have / want gulp globally installed, you can run npm run gulp instead.

Development mode

By running just gulp, we start our development build process, consisting of:

• compiling, concatenating, auto-prefixing of all .scss files required by app/styles/main.scss
• creating vendor.js file from external sources defined in ./vendor.json
• linting all *.js files app/scripts, see .jshintrc for ruleset
• minifying all images files located within the app/images/ directory
• automatically generate licenses, readme and all necessary documents
• automatically inject sources into index.html so we don't have to add / remove sources manually
• build everything into .tmp folder (also gitignored)
• start local development server and serve from .tmp
• start watchers to automatically lint javascript source files, compile scss and reload browser on changes

What has been generated?

The folder includes an AVIONIC ✈ basic application and backend server as a starting point.

AVIONIC/
├── app/
    └── index.html
    └── favicon.ico
    └── README.md
    ├── fonts/
    ├── icons/
    ├── images/
    ├── languages/
    ├── scripts/
    ├── styles/
    ├── templates/           # This contains the app template
├── bower_components/
├── helpers/
├── hooks/
├── node_modules/
├── resources/
├── server/
├── www
├── gulpfile.js
├── bower.json
├── package.json
├── vendor.json
├── config.xml

AVIONIC ✈ CLI scripts

The AVIONIC ✈ command lines scripts make it easy to start, build, run, and emulate your AVIONIC ✈ app. In addition, it comes with a complete set of scripts to execute all the necessary scripts to build your app on iOS or Android.

1) Step by Step Scripts

For iOS

• [x] Execute build - gulp av:build
• [x] Add iOS platform to Cordova - gulp av:ios
• [x] Prepare resources (app icon and splash screen) - gulp av:resources
• [x] Prepare app icon - gulp av:icon
• [x] Prepare splash screen - gulp av:splash
• [x] Serve app to default system browser - gulp av:serve
• [x] Emulate app - gulp av:emulate

For Android

• [x] Execute build - gulp av:build
• [x] Add Android platform to Cordova - gulp av:android
• [x] Prepare resources (app icon and splash screen) - gulp av:resources
• [x] Prepare app icon - gulp av:icon
• [x] Prepare splash screen - gulp av:splash
• [x] Serve app to default system browser - gulp av:serve
• [x] Emulate app - gulp av:emulate

2) All-In-One Scripts

gulp avionic:ios

Run application in an iOS device attached

• Execute build
• Add iOS platform to Cordova
• Prepare resources (app icon and splash screen)
• Run app on attached iOS device

gulp avionic:android

Run application in an Android device attached

• Execute build
• Add Android platform to Cordova
• Prepare resources (app icon and splash screen)
• Run app on attached Android device

Splash screens and Icons

Replace splash.png and icon.png inside /resources. Then run gulp av:resources . If you only want to regenerate icons or splashs, you can run gulp av:icon or gulp av:splash shorthand.

Talk to us

Our fleet

AVIONIC ✈ is beautifully crafted by these people and a bunch of awesome contributors

| |:---: Sebastien Rousseau |

Credit also to Thomas Maximini for the work and inspiration surrounding the generator-ionic-gulp.

Want to contribute?

• Please read carefully our Contributor License Agreement (CLA)

Our Values

1. We believe perfection must consider everything.
2. We take our passion beyond Code into our daily practices.
3. We are just obsessed about creating and delivering exceptional solutions.

History

• See Avionic ✈ Release list.

License

• MIT License Copyright © Reedia Limited 2015. All rights reserved.