Developer Docs

Ionic

Ionic

Create an account

The first thing we need to do is sign up for a free Flybase account. A brand new Flybase project will automatically be created for you which you will use in conjunction with Ionic to store and sync data.

Creating a New Ionic App

This guide assumes you are familiar with the basics of Ionic. If you're new to Ionic, check out the Ionic getting started page or their comprehensive guide. Here we'll use the Ionic CLI, a command line utility provided by Ionic. To install it, we'll run the command:


$ npm install -g ionic

For Mac users developing on iOS

iOS apps can only be run on a Mac. If you're developing on a Mac and want to run your app on iOS, you'll need to install XCode from the Mac App Store and then ios-sim from npm using the following command:


	$ npm install -g ios-sim
	

Once we've installed the CLI, we can generate a blank Ionic application template by running:


$ ionic start myapp blank

All of the code we'll be writing will be within the www/ directory. To tell Ionic that we want to enable the app for iOS and Android, we'll run the commands:


$ ionic platform add ios
$ ionic platform add android

More details on setting up different platforms can be found in the Ionic documentation.

Including Flybase

We'll include the Flybase and AngularFly libraries as dependencies in our index.html file, right before our app.js include.


<!-- Flybase -->
<script src="https://cdn.flybase.io/flybase.js"></script>

<!-- AngularFly -->
<script src="https://cdn.flybase.io/angularfly.js"></script>
	

Then, in our app.js file we need to add flybase as a dependency in our application module:


angular.module("starter", ["ionic", "flybaseResourceHttp"])
.constant('FLYBASE_CONFIG',{API_KEY:'your key goes here', DB_NAME:'angularjs'})
	

As part of our setup, we've also instructed our app to use our API_KEY and APP_NAME, we don't need to specify collections, as collections will be handled when we create our factory.

Now we're ready to store and sync data with AngularFly

Create Our Factory

Then, creating new resources is very, very easy and boils down to calling $flybaseResourceHttp with a Flybase collection name:


	app.factory('Items', function ($flybaseResourceHttp) {
		return $flybaseResourceHttp('items');
	});
			

Viewing Data

Let's build a simple todo list app. We manage the todo list and connect the Flybase database into the app inside of the ListCtrl controller. The controller code can be found inside app.js.

The <ion-header-bar> is a directive provided by Ionic. It creates a mobile-friendly navigation menu. For now, it just contains a button for adding groceries to the list, which will invoke the addItem() method inside ListCtrl. The css class ion-plus will create a plus sign button using Ionic's Ionicon library.


<body ng-app="starter" ng-controller="ListCtrl">
	<ion-header-bar class="top">
		<h1 class="title">Items
			<button class="button button-icon ion-plus" ng-click="addItem()"></button>
	</ion-header-bar>
</body>
			

Ionic provides some handy tools for dealing with lists: <ion-list> and <ion-item>. We'll nest those inside an <ion-content> directive to indicate that this is the main body of the view. These may look familiar if you're familiar with table cells or list items in mobile.


<ion-content>
	<ion-list>
		<ion-item ng-repeat="item in items"></ion-item>
	</ion-list>
</ion-content>
			

Now that we have a UI for adding items to our list, we'll write a function to save our list items to our database using Flybase.

Saving Data

To save data, we'll create an Items factory that uses $flybaseResourceHttp, a service provided by the AngularFly library to synchronize our local Angular array with our remote data:

Edit app.js and add:


.factory('Items', function ($flybaseResourceHttp) {
	return $flybaseResourceHttp('items');
})
			

This will create a factory called Items which we can use to read and write to our database table called items.

Now we can create our ListCtrl and inject our Items factory as a dependency:


.controller("ListCtrl", function($scope, Items) {
    Items.all().then(function(items){
        $scope.items = items;
    });

	//	grab the Flybase object...
	var Ref = Items.flybase();
	
	//	set up events to listen for changes...
	Ref.on('added', function( data ){
		$timeout(function() {
			$scope.items.push( data.value() );
		});
	});

	Ref.on('changed', function( data ){
		$timeout(function() {
			var snapshot = data.value();
			for( i in $scope.items ){
				var item = $scope.items[ i ];
				if( item._id == snapshot._id ){
					$scope.items[ i ] = snapshot;
				}
			}
		});
	});

	Ref.on('removed', function( data ){
		$timeout(function() {
			var snapshot = data.value();
			for( i in $scope.items ){
				var item = $scope.items[ i ];
				if( item._id == snapshot._id ){
					$scope.items.splice(i, 1);
				}
			}
		});
	});

	$scope.addItem = function() {
		var name = prompt("What do you need to do?");
		if (name) {
			newItem = new Items();
			newItem.name = name;
			newItem.$save().then(function(newData) {});
		}
	};
});
			
This shows the user a prompt to add a new todo item, and then we use AngularFly's $save function to add the item to our synchronized array. Now when we add items, they'll be stored under a unique ID generated in the database.