Developer Docs

Flybase Web Development Guide


Create an account

The first thing you need to do to get started with Flybase is sign up for a free account.

Once you sign up, create your first app and make a note of your API Key, and the name of your app. We'll use this URL to store and sync data.


Install Flybase

To include the Flybase client library in your website, add a script tag to the <head> section of your HTML file. We recommend including the library directly from our CDN:


	<!-- AngularJS -->
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
	
	<!-- Flybase -->
	<script src="https://cdn.flybase.io/flybase.js"></script>
	
	<!-- Flybase Angular -->
	<script src="https://cdn.flybase.io/angularfly.js"></script>
	
			

You can also install Flybase as a Bower dependency by typing bower install flybase and bower install angularfly.

Inject the AngularFly Services

Before we can use AngularFly with dependency injection, we need to register flybaseResourceHttp as a module in our application.


	var app = angular.module('testApp', ['ngRoute', 'flybaseResourceHttp']);
	app.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.

Create Our Factory

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


	app.factory('Message', function ($flybaseResourceHttp) {
		return $flybaseResourceHttp('messages');
	});
			

Build Our Controllers and Views

As soon as you've created your factory, you are ready to inject and use a freshly created resource in your services and controllers:


	app.controller('AppController', function ($scope, $timeout, Message) {
	    Message.all().then(function(messages){
	        $scope.messages = messages;
	    });
	
		//	grab the Flybase object...
		var Ref = Message.flybase();
		
		//	set up events to listen for changes...
		Ref.on('added', function( data ){
			$timeout(function() {
				$scope.messages.push( data.value() );
			});
		});
	
		Ref.on('changed', function( data ){
			$timeout(function() {
				var snapshot = data.value();
				for( i in $scope.messages ){
					var project = $scope.messages[ i ];
					if( project._id == snapshot._id ){
						$scope.messages[ i ] = snapshot;
					}
				}
			});
		});
	
		Ref.on('removed', function( data ){
			$timeout(function() {
				var snapshot = data.value();
				for( i in $scope.messages ){
					var project = $scope.messages[ i ];
					if( project._id == snapshot._id ){
						$scope.messages.splice(i, 1);
					}
				}
			});
		});
	
	});
	app.controller('MessageController', function ($scope, $route, $window, message) {
		var messageCopy = angular.copy( message );
		$scope.message = message;
	
		$scope.save = function(){
			$scope.message.$saveOrUpdate().then( function(returnData){
				console.log( returnData );
				$window.location.assign('/');
			}, function(error) {
				throw new Error('Sth went wrong...');
			});
		};
		
		$scope.remove = function() {
			$scope.message.$remove(function() {
				$window.location.assign('/');
			}, function() {
				throw new Error('Sth went wrong...');
			});
		};
	
		$scope.hasChanges = function(){
			return !angular.equals($scope.message, messageCopy);
		};
	});
	
	app.config(function ($routeProvider) {
		$routeProvider.when('/list', {templateUrl:'list.html', controller:'AppController', resolve:{
			messages:function(Message){
				return Message.all();
			}
		}}).when('/edit/:id', {templateUrl:'form.html', controller:'MessageController', resolve:{
			message:function(Message, $route){
				return Message.getById($route.current.params.id);
			} 
		}})
		.when('/new', {templateUrl:'form.html', controller:'MessageController', resolve:{
			message:function(Message){
				return new Message();
			}
		}})
		.otherwise({redirectTo:'/list'});
	});
	
						

	<!doctype html>
	<html ng-app="testApp" >
	<head>
		<meta charset="utf-8">
		<title>Flybase resource with promises support</title>
		<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
	
		<!-- AngularJS -->
		<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-route.js"></script>
	
		<!-- Flybase -->
		<script src="https://cdn.flybase.io/flybase.js"></script>
	
		<!-- AngularFly -->
		<script src="https://cdn.flybase.io/angularfly.js"></script>
	</head>   
	<body>
		<header>
			<h1>Flybase Angular</h1>
		</header>
		<div ng-view></div>
	</body>
	</html>
						

	<h3>Messages</h3>
	<ul>
		<li ng-repeat="message in messages">
			
			<a ng-href="#/edit/">edit</a>
		</li>
	</ul>
	<div class="well">
		<a class="btn btn-default" ng-href="#/new">New Message</a>
	</div>
						

	<form name="form">
		<div class="form-group">
			<label>Message</label>
			<input type="text" ng-model="message.text" class="form-control">
		</div>
		<div class="well">
			<a class="btn btn-primary" ng-click="save()" ng-disabled="!hasChanges()||form.$invalid">Save</a>
			<a class="btn btn-warning" ng-href="#/">Go Back</a>
			<a class="btn btn-danger" ng-click="remove()" ng-disabled="!message.$id()">Remove</a>
		</div>
	</form>
						

Further Reading

Since this $resource-like implementation is based on $http and returns a promise.

Each resource created with the $flybaseResourceHttp will be equipped with the following methods:

  • on the class level:
    • Resource.all([options])
    • Resource.query(criteriaObject,[options])
    • Resource.getById(idString)
    • Resource.getByIds(idsArray)
    • Resource.count(criteriaObject)
    • Resource.distinct(fieldName, criteriaObject)
  • on an instance level:
    • resource.$id()
    • resource.$save()
    • resource.$update()
    • resource.$saveOrUpdate()
    • resource.$remove()

Resource all and query supported options:

  • sort: ex.: Resource.all({ sort: {priority: 1} });
  • limit: ex.: Resource.all({ limit: 10 });
  • fields: 1 - includes a field, 0 - excludes a field, ex.: Resource.all({ fields: {name: 1, notes: 0} });
  • skip: ex.: Resource.all({ skip: 10 });

You also have access to all the usual Flybase javascript commands through the Flybase object:


	var ref = Project.flybase();