Hello,
Here i am introducing a way, by which an user can click a picture by camera and can upload it on the firebase, with login and register functionality.When an user is login and take a picture. This data will be saved on the firebase beck-end services.And when that user again login , can see his picture.
So,
Let's start with the ionic blank app-
Now we will include cordova.js library in it.
Now your index.html file look like-
Here i am introducing a way, by which an user can click a picture by camera and can upload it on the firebase, with login and register functionality.When an user is login and take a picture. This data will be saved on the firebase beck-end services.And when that user again login , can see his picture.
So,
Let's start with the ionic blank app-
ionic start myapp blank
cd my app
ionic platform add android
Now we will include cordova.js library in it.
bower install ngCordova
Then include following line of code before cordova.js in index.html file-
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
in app.js file include the following dependencies-
var myapp = angular.module('myApp', ['ngCordova'])
Then include the following library-
The latest Firebase JavaScript library
The latest AngularFire AngularJS library
Now your index.html file look like-
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="js/firebase.js"></script>
<script src="js/angularfire.min.js"></script>
<script src="js/app.js"></script>
</head>
Now, we will include the camera plugin-
cordova plugin add org.apache.cordova.camera
Getting Firebase Started-
We're not quite ready to talk about Firebase, but we are at a point
where it would be a good idea to initialize it. At the top of your www/js/app.js file, outside any AngularJS code, you want to add the following line:
var fb = new Firebase("https://INSTANCE_ID_HERE.firebaseio.com/");
Of course you need to replace INSTANCE_ID_HERE with
your personal Firebase instance. By setting it globally, it will load
before AngularJS and can be used throughout your application.
We also need to add firebase to our AngularJS module. In the end it will look something like this:
var myapp = angular.module("starter", ["ionic", "ngCordova", "firebase"]);
In your login.html file add following lines of code-
<ion-view title="Firebase Login">
<ion-content>
<div>
<div class="list list-inset">
<label class="item item-input">
<input ng-model="username" type="text" placeholder="Username" />
</label>
<label class="item item-input">
<input ng-model="password" type="password" placeholder="Password" />
</label>
</div>
<div class="padding-left padding-right">
<div class="button-bar">
<a class="button" ng-click="login(username, password)">Login</a>
<a class="button" ng-click="register(username, password)">Register</a>
</div>
</div>
</div>
</ion-content>
</ion-view>
And in loginCtrl.js file-
myapp.controller("loginCtrl", function($scope, $state, $firebaseAuth) {
var fbAuth = $firebaseAuth(fb);
$scope.login = function(username, password) {
fbAuth.$authWithPassword({
email: username,
password: password
}).then(function(authData) {
$state.go("image");
}).catch(function(error) {
alert(error);
console.error("ERROR: " + error);
});
}
$scope.register = function(username, password) {
fbAuth.$createUser({email: username, password: password}).then(function(userData) {
return fbAuth.$authWithPassword({
email: username,
password: password
});
}).then(function(authData) {
$state.go("image");
}).catch(function(error) {
console.error("ERROR: " + error);
alert(error);
});
}
});
And in image.html file-
<ion-view title="My Images" ng-init="">
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-camera" ng-click="upload()"></button>
</ion-nav-buttons>
<ion-content>
<div class="row" ng-repeat="image in images" ng-if="$index % 4 === 0">
<div class="col col-25" ng-if="$index < images.length">
<img ng-src="data:image/jpeg;base64,{{images[$index].image}}" width="100%" />
</div>
<div class="col col-25" ng-if="$index + 1 < images.length">
<img ng-src="data:image/jpeg;base64,{{images[$index + 1].image}}" width="100%" />
</div>
<div class="col col-25" ng-if="$index + 2 < images.length">
<img ng-src="data:image/jpeg;base64,{{images[$index + 2].image}}" width="100%" />
</div>
<div class="col col-25" ng-if="$index + 3 < images.length">
<img ng-src="data:image/jpeg;base64,{{images[$index + 3].image}}" width="100%" />
</div>
</div>
</ion-content>
</ion-view>
In imageCtrl.js file-
myapp.controller("imageCtrl", function($scope,$state, $ionicHistory, $firebaseArray, $cordovaCamera) {
$ionicHistory.clearHistory();
$scope.images = [];
var fbAuth = fb.getAuth();
if(fbAuth) {
var userReference = fb.child("users/" + fbAuth.uid);
var syncArray = $firebaseArray(userReference.child("imageuploadapp"));
$scope.images = syncArray;
} else {
$state.go("login");
}
$scope.upload = function() {
var options = {
quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : true,
encodingType: Camera.EncodingType.JPEG,
popoverOptions: CameraPopoverOptions,
targetWidth: 500,
targetHeight: 500,
saveToPhotoAlbum: false
};
$cordovaCamera.getPicture(options).then(function(imageData) {
syncArray.$add({image: imageData}).then(function() {
alert("Image has been uploaded");
});
}, function(error) {
console.error(error);
});
}
});
Now your app.js file look like-
var myapp = angular.module('starter', ['ionic','ngCordova','firebase'])
var fb = new Firebase("https://INSTANCE_ID_HERE.firebaseio.com/");
myapp.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
myapp.config(function ($stateProvider,$urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'loginCtrl'
})
.state('image', {
url: '/image',
templateUrl: 'templates/image.html',
controller: 'imageCtrl'
});
$urlRouterProvider.otherwise('/login');
});
In firebase, we will add the following rule in Security & Rules section-
{
"rules": {
"users": {
".write": true,
"$uid": {
".read": "auth != null && auth.uid == $uid"
}
}
}
}
And include the following JSON in data section-
{
"imageuploadapp": {
"unique_image_id_here": {
"image": ""
}
}
}
Thanks...
