Posted on 2 Comments

Creating A POS System With Lumen and Ionic – Part 2

[callaction url=”https://www.youtube.com/user/JPlaya01″ background_color=”#333333″ text_color=”#ffffff” button_text=”Go Now” button_background_color=”#e64429″]Subscribe To My Youtube Page[/callaction]

Before We Begin

Have you already have the Lumen back end micro service up and running? If not head over to part 1 and write your own implementation. Alternatively you can clone the repository from GitHub. Now with that working, let us begin!

Ionic

As with part 1 I will assume you already have the environment set up to begin Ionic development. If you don’t, please head over and read my previous Ionic tutorial. Otherwise let’s create a new project

ionic start ParkerPay

cd into the new application and install the dependencies

bower install ngCordova  

cordova plugin add https://github.com/Paldom/SpinnerDialog.git


cordova plugin add cordova-plugin-dialogs

This will install ngCordova which will allow us to access native APIs via plugins, the two plugins are for accessing native spinner dialogs and alert dialogs. Now let’s edit the application logic, head over to www/js/app.js and paste the following code:


angular.module('parker-pay', ['ionic','ngCordova'])


.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();
}
});
})


.controller('HomeCtrl', function($scope,$http,$cordovaSpinnerDialog,$cordovaDialogs){
$scope.charge = {};
$scope.createToken = function(){
$cordovaSpinnerDialog.show("Processing Payment","Please wait....", true);
Stripe.setPublishableKey('STRIPE PUBLISHABLE KEY');
Stripe.card.createToken({
number: $scope.charge.number,
cvc: $scope.charge.cvc,
exp_month: $scope.charge.exp_month,
exp_year: $scope.charge.exp_year
}, $scope.stripeResponseHandler);
};


$scope.stripeResponseHandler = function(status, response){
if (response.error) {
// Show the errors on the form
$cordovaSpinnerDialog.hide();
$cordovaDialogs.alert('There was an error', 'Alert', 'OK')
.then(function() {
// callback success
});


} else {
// response contains id and card, which contains additional card details
var token = response.id;
//console.log()
// Insert the token into the form so it gets submitted to the server
var data = {token:token,amount:$scope.charge.amount,description:$scope.charge.description}
// and submit


$http.post('http://payment.jyroneparker.com/charge',data).success(function(dta){
console.log(dta);
$cordovaSpinnerDialog.hide();
// beep 1 time
$cordovaDialogs.beep(1);
$cordovaDialogs.alert('Payment was a success.', 'Alert', 'OK')
.then(function() {
// callback success
});

}).error(function(dta){
console.log(dta);
$cordovaSpinnerDialog.hide();
alert('There was an error.');


$cordovaDialogs.alert('There was an error', 'Alert', 'OK')
.then(function() {
// callback success
});


//$cordovaSpinnerDialog.hide();
});
}
}
})

Be sure to put your Stripe key in. Last thing to do programmatically speaking, is to edit the index.html file. Paste the following code:


<!DOCTYPE html>
<html>
<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 type="text/javascript" src="https://js.stripe.com/v2/"></script>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->


<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>


<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>


<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="parker-pay" ng-controller="HomeCtrl">


<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Parker Pay</h1>
</ion-header-bar>
<ion-content
<div class="list list-inset">
<label class="icon icon-left ion-pricetag item item-input">
<input ng-model="charge.amount" type="text" placeholder=" Amount">
</label>
<label class="icon icon-left ion-card item item-input">
<input ng-model="charge.number" type="text" placeholder=" Card Number">
</label>
<label class="ion-calendar icon icon-left item item-input">
<input ng-model="charge.exp_month" type="text" placeholder=" Exp. Month">
</label>
<label class="icon icon-left ion-calendar item item-input">
<input ng-model="charge.exp_year" type="text" placeholder=" Exp Year">
</label>
<label class="icon icon-left ion-card item item-input">
<input ng-model="charge.cvc" type="text" placeholder=" CVC">
</label>
<label class="icon icon-left ion-edit item item-input">
<input ng-model="charge.description" type="text" placeholder=" Description">
</label>
</div>
<div class="row">
<button ng-click="createToken()" class="col-offset-33  icon icon-left ion-social-usd button button-positive">
Charge
</button>
</div>
</ion-content>
</ion-pane>
</body>
</html>

Next add your preferred platform by running

ionic platform add <PLATFORM> 

, connect your device and run ionic run <PLATFORM> , THAT’S IT YOU ARE NOW TAKING PAYMENTS!! See how easy that was? You are on your way to being an Artisan! Be sure to check the code out on GitHub

Posted on Leave a comment

Create A Real-Time Chat App With Ionic

[callaction url=”https://www.youtube.com/user/JPlaya01″ background_color=”#333333″ text_color=”#ffffff” button_text=”Go Now” button_background_color=”#e64429″]Subscribe To My Youtube Page[/callaction]

Ionic

I figured Ionic would be a great choice for creating the mobile chat app. This chat app is dirt simple:

  1. Open up a websocket connection to the Lumen service and listen for messages
  2. Post messages to Lumen Service

Follow along, I won’t be adding any target platforms, just testing in browser. However if you want to port this that another platform just follow this guide. Let’s start! If you don’t already have the software installed type in this command npm -g install cordova ionic you may have to run this command as sudo. Afterwards cd into an empty directory and run this command

ionic start messenger-mobile blank

. It will go through the process of creating a new Ionic application, when complete cd into your new app.

Dependencies

Now we need to install our dependencies first off we need to install the socket.io-client to communicate with our real-time chat server. This is available via npm, type in this command

npm install socket.io-client

and copy the folder

node_modules/socket.io-client

to the lib folder (that’s where everything else is ionic related). Next type in this command

ionic plugin add cordova-plugin-whitelist

, this in needed because we have to access remote resources, and need to whitelist them.

Whitelisting

Open up the config.xml file at the root of your application and add this line

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

This allows us to go to any remote resource. Now we won’t get any errors trying to access our websocket. Now lets create our WebSocket factory.
 

WebSocket Factory

Create a seperate file in your www/js folder called services.js. Inside put the following code:


angular.module('services', [])
.factory('WebSocket', function($http) {
// Open a WebSocket connection
var dataStream = io('http://messenger.app:6001');
console.log(dataStream);

var messages = [];
dataStream.on('message',function(data) {
messages.push(data.message);
console.log(messages);
});
var methods = {
messages: messages,
send: function(message) {
$http.post('http://messenger.app/message',{ message:message}).success(function(data){
///messages.push(data);
//console.log(messages);
});
}
};

return methods;
});

Change http://messenger.app to the IP address of your microservice. Right now this code would break because we haven’t included the io dependecy but we will get to that.

App.js

Open www/js/app.js this is our main JS file, we are going to include our services file in here and access the WebSocket factory. Copy this code:

// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('real-time-messaging', ['ionic','services'])
.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();
}
});
})
.controller('HomeController',function($scope,WebSocket){
$scope.socket = WebSocket;
console.log($scope.socket);
$scope.messageModel = {};
$scope.sendMessage = function(){
console.log('SEND MESSAGE PUSHED!');
console.log('Message Sent ' + $scope.messageModel.message);
$scope.socket.send($scope.messageModel.message);
console.log($scope.socket.messages);
};
});

The code is pretty self explanatory, we have a single function in our HomeController that sends a message to the microservice. We have all the real time logic encapsulated in the WebSocket factory, so we are complete here!
 

Index.html

Lastly we need to modify the index.html. For simplicity sake this page only has a list to hold messages and a form to post a message. Copy the following code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<script src="lib/socket.io-client/socket.io.js"></script>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
<!-- your app's js -->
<script src="js/services.js"></script>

</head>
<body ng-app="real-time-messaging" ng-controller="HomeController">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Real Time Messaging</h1>
</ion-header-bar>
<ion-content>
<textarea ng-model="messageModel.message" placeholder="Enter Message"></textarea>
<br>
<button ng-click="sendMessage()" class="icon icon-left ion-paper-airplane button button-positive">
Send Message
</button>

<ion-list>
<ion-item ng-repeat="message in socket.messages track by $index">
Messages:  {{message}}
</ion-item>
</ion-list>
</ion-content>
</ion-pane>
</body>
</html>

 
The app is complete! You can test it in the browser by typing ionic serve in the terminal, or you can add a platform and test on an emulator or physical device. If you have any questions, or want to see some future enhancements, please comment below!