Instructions for an Ionic App Continuous Development

This is the first in a series of posts detailing our construction of an Ionic mobile app whose backend is Backand Backand As A Service (BAAS) solution.

Ionic is an all encompassing framework for building a hybrid mobile app based on AngularJS technology.

Our app whose source code is to be released incrementally, will use Backand REST API to perform the full range of data managment operations required by a mobile app, including CRUD operations on data and much more.

While constructing this app, we encountered some missing explanations in the large body of instructions. As we filled them up for ourselves, we thought they would be useful for the community in general. So here provide some useful instructions for the continuous development of your app.

The Ionic Backand App

The app was released on the Ionic marketplace.

To create the app do:

ionic start myApp https://github.com/backand/backand-ionic-starter

cd myApp

Set the App Details

In the file config.xml,

  1. Package name: modify the line, to match your desired package name

    <widget id="com.backand.backandbaasapp"

  2. App name: in the <name> tag

  3. Description: in the <description> tag

  4. Author and email: in the <author> tag

Enable SASS

In file www/index.html, comment these lines:

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">

<link href="css/style.css" rel="stylesheet">

Uncomment this line:

<link href="css/ionic.app.css" rel="stylesheet">

Build

Install Node.js packages

npm install

Install JavaScript libraries with bower

node_modules/gulp/bin/gulp.js install

Sass

node_modules/gulp/bin/gulp.js

Live Reload

Browser

Open two terminal windows:

  • live reload of html and js:

    ionic serve

  • live reload of scss

    node_modules/gulp/bin/gulp.js watch

Ionic Lab

  • Does live reload of html and js.

  • For live reload of scss open terminal window:

    node_modules/gulp/bin/gulp.js watch

SASS Structure

Imports in file scss/ionic.app.scss. Place these imports after the line:

@import "www/lib/ionic/scss/ionic";

The order of imports is important.

  • Variables definitions.

    @import “my_variables.scss";

Overriding of variables, fonts, etc. from Ionic. For example,

      $stable: $brand; // overriding of stable color of ionic

Definition of your variables:

    $my-brand-color: green;
  • Mixins

    @import “my_mixins.scss"

For example,

  @mixin writing($color){

   font-family: $font-family-regular;

     color: $color;

     font-size: 30px;

     line-height: 40px;

     direction: $direction;

     text-align: center;

 }
  • Common elements

    @import "my_elements.scss";

For example,

 .side-menu {

      font-family: $font-family-regular;

      font-size: $large-font-size;

      .side-menu-item {

          text-align: $text-align-direction;

      }

 }
  • Screens

    @import "my_screens.scss";

For example,

 .welcome {

      .top {

         height: 300px;

         background-color: $white;

     …

   }

 }