Thursday, 26 June 2014

Working With Parse.com For Mobile Application Data Storage - Javascript API Connecting NoSql Datastore

Nowadays we are always tempt to use mobile applications on Android/iOS/ BBos and Windows 8 and etc...where these apps have to store the data for future reference.Particularly concentrating HTML5 apps powered by javascripts are more powerful and easy to build across different platforms.The User data is better to store in cloud and could be searched with the help of API provided.although Parse stands Easy for me for saving data,Where Bluemix Also supports that ,I have tried Parse since it gives Class-Object approach to save data with few lines of Javascript code.And Application can be easily scalable and Searched efficiently.Not Only mobile applications,Apps that is data-driven can also use this feature for easy storage and tension free and forget about Database design,Support and code for connecting database.Where parse provides simply efficient datastore with Access Tokens and Application ID and save your data.And it is also part of Facebook :)

Working With Parse.com For Mobile Application Data Storage - Javascript API Connecting NoSql Datastore
parse.com - i-visionblog - Mobile apps Storage

Scope:

This Post can Give you a Experience to store data as Objects via Class using Javascript API provided by Parse.com.Not only Data, You could upload files and others too save in the Datastore,with few lines of Javascript Code and Application ID and Secret Code.

Installation :

As Like Normal Javascript include it in normal part and You can Download from Official Parse Site.click to Download

                  <script src="./parse-1.2.18.js"></script>

Understanding the Concept Of Saving Data : 

Storing data on Parse is built around Parse.Object. Each Parse.Object contains key-value pairs of JSON-compatible data. This data is schemaless, which means that you don't need to specify ahead of time what keys exist on each Parse.Object. You simply set whatever key-value pairs you want, and our backend will store it.
Create a Object by extending the Parse.Object.extend and this could create new class and then we could save as Keys must be alphanumeric strings. Values can be strings, numbers, booleans, or even arrays.

example for raw data :

                    email: "s.shivasurya@gmail.com", phone: 9788012345

JavaScript API to Handle Data :

I have Chosen JQuery to Handle my data and operation to perform with Parse javascript functions with callbacks,since it is basically network operation.

1) Create Application in Parse.com  and You may receive Application ID and Secret Keys for various platforms for your application.

Initialize Your Application to Connect Parse :
First Initiative step is to save the Data as objects with particular class in Parse.com.So,Create a Class in parse dashboard.

2) just use Parse.initialize method to configure your application and get connected to the Parse Datastore.

Parse.initialize("Your App ID", "Your Javascript Key");

CRUD functionality:

3) First let us see how to create a Row(Record) with unique object ID that contains User Data, and by default it has Created Time ,Updated Time with ACL(Access Control List).

To Create a record just extend the parse object with suitable created class and create object with that and invoke the function save to save our data in Datastore.Well see the example below.

   var createobject = Parse.Object.extend("users");
   var objectwithdata = new createobject();
   objectwithdata.save({email: email,phone: phonenumber},{
         success: function(object) {
         console.log("success");
         $("#load").hide();
         },
        error: function(model, error) {
         console.log("error");
           }
    });

In above code we have just extended to class user and created object of User class.and we have added few data by invoking a function save() with a callback function with success and Error handlers.since it is time consuming operation to save data in parse.so whenever the return is success a row is added automatically with Object ID ,it is better to retrieve and keep it in HTML5 storage for later queries and other operations.

Retrieve Data : 


   var retreiveobject = Parse.Object.extend("users");
   var retrievedata = new retreiveobject();
   retrievedata.get("Your Object ID for Particular Client",{
         success: function(object) {
         console.log("success");
         console.log(object);
         },
        error: function(model, error) {
         console.log("error");
           }
    });

In above code we have just extended to class user and created object of User class.and we have read few data by invoking a function get() with a callback function with success and Error handlers.

Update Data :


   var retreiveobject = Parse.Object.extend("users");
   var retrievedata = new retreiveobject();
   retrievedata.get("Your Object ID for Particular Client",{
         success: function(object) {
         console.log("success");
         console.log(object);
         retrievedata.set("email","suriya1180@gmail.com");
         retrievedata.set("phonenumber",9876543210);
         retrievedata.save();
         },
        error: function(model, error) {
         console.log("error");
           }
    });

In the above method we had retrieved the data and we just used set() function to update values and finally call save() function to update the data in database.

Delete Object :

   var destroyclass = Parse.Object.extend("users");
   var destroyobject = new destroyclass();
   destroyobject.destroy("Your Object ID for Particular Client",{
         success: function(object) {
         console.log("successfully deleted");
         },
        error: function(model,error) {
         console.log("error");
           }
    });

In the above method we have just called the destroy() function to destroy the row of particular Object ID from Datastore.
There are still Lot arrays,Datatypes,queries,compound query,relating data and so on.visit here to Learn more

My sample :

I have created a class named users with phone numbers and email storing data in parse and when success function runs it is redirected to List.html file in my mobile application.

       //consider jquery.js included
     <script src="js/parse-1.2.18.js"></script>
     <script>
   
        $(document).ready(function(){
   
        $("#login").click(function()
            {
                var email=$("#email").val();
                var phonenumber=$("#phonenumber").val();
                console.log(email);
                console.log(phonenumber);
                $("#search").hide();
                $("#load").show();
                Parse.initialize("My APP ID", "My javascript Secret Key");
                var TestObject = Parse.Object.extend("users");
                var testObject = new TestObject();
                testObject.save({email: email,phone:phonenumber},{
                  success: function(object) {
                   console.log("success");
                  $("#load").hide();
                   window.location="./list.html";
                },
                error: function(model, error) {
                console.log("error");
      }
});        
 }
        );
            });
    </script>


My simulated application results:

I had made a simple form to trigger with sign up button and call parse.save function to save data in Datastore.

Cautions:

1)Always concentrate Errors on Console Log of chrome to minimize the Errors

2)However it is javascript client code it is showing both keys public manner.so just use ACL and permissions,Sessions to prevent Illegal data transactions in Parse Dashboard.

3)Handle the Errors and print the errors to guide the project to success.




My result:

my Class with Data populated on Parse.

Beware of Securing the Data.Just Try out Parse for Mobile apps and make use of Cloud code for efficient scaling.For further doubts/Bugs/reports Mail me s.shivasurya@gmail.com or let us disqus as comment below.Share is care

Wednesday, 18 June 2014

Node.js With Express Framework Basic App on IBM Bluemix - Deploying Cloud Foundry

As i got request from +Yogesh Asthana brother by Google+ on Node.js app basics and other frameworks to build Highly scalable application that can be real time usage.Node approaches different manner in responding requests and while other scripting language make threads and use the RAM and core with full fledge usage and blocking approach.But Nodejs take care since it is written as Asynchronous functions with non blocking I/O behavior ,where when u Do some task in Nodejs like Database operations or file upload ,which is cost effective, network based and time consuming operations are made asynchronous where it will return the results later.here the next line code executes without any blocking.Thats why it is faster and may be due to other reasons to.This is built based on Google Chrome Run Time Javascript V8 compiler,by Google Engineers.
Node.js With Express Framework Basic App on IBM Bluemix - Deploying Cloud Foundry
nodejs with express i-visionblog

Demo | Download | Contact 

Scope : 

By this Post You could successfully Run a simple app Nodejs with Express in Blumix Cloud,IBM.
I have explained to build a simple app in my Youtube Video Channel.Any way i will Provide Explanation also by words below.

Downloads :

Visit Nodejs website and based on the operating system install the Nodejs in Your local machine for Locally testing your app before deploying cloud.

As my Last post gave You idea of IBM Bluemix,Just Create account in Bluemix and install Cloud Foundry Tool. - refer Here to install

Let Us Code : 

Basic Nodejs App contains Package.json file through which you can download all the dependencies and maintain your app efficiently even if you migrate from System.simply by using npm command you can fetch and install the dependency modules.You can simply initialize your package.json By command line

npm init  // will ask you one by one and you can provide details corresponding.

here i am explaining a simple app named sample and with description and others too.
package.json 

{
"name":"sample",
"description":"second app with node js",
"version":"0.0.1",
"private":true,
"dependencies":
{
"express":"3.x"
}
}

For Further Create a directory and do all the above operations.
now create app.js file to regulate and control our app.here app.js name is optional you can name it as per your needs.[main.js is mostly recommended]

app.js : 



var http = require("http");
var express= require("express");
var app= express(); // here we are defining our app and initializing with express 

//i am going to make basic routes for app

app.get("/",function(req,res){
res.send("<h1>this page is from Node js Express APP - Shivasurya - </h1>");
});

app.get("/welcome",function(req,res)
{
res.send("This welcome page ");
});


app.get("/about",function(req,res)
{
res.send("This is from About page ");
});

app.get("/example",function(req,res)
{
res.sendfile('example.html');
//the above fun send html file to browser so that browsers can intrepret
});


//similarly you could add routes and send the text as html or even html files to the browser using res.sendfile();


http.createServer(app).listen(3000); //here 3000 is port number for app



//thus we have created a simple web app using Express framework

In the Above Code we created Express object of response and request and we accessed send() and sendfile() functions.there are still more functions can be invoked,by next post i will brief it about the Routing techniques and best practices.Open Your browser point to localhost:3000 and check the routes we defined already in app.js

Time To Deploy On Cloud :


Check that You have Installed by Using the Command in Your Command prompt.

C:\>cf -v  

must output the version number of your CF Tool installed currently.Move to Your Current Directory where your project lies.We need Small Changes in Our code since it is Production Environment however your going to test in on Cloud as Sand Box mode.

Code Changes For deploying at Cloud :

thus we had Simply added VCAP service Port Number and Host to work perfectly on cloud environment.

var port = (process.env.VCAP_APP_PORT || 8192);
var host = (process.env.VCAP_APP_HOST || 'localhost');
var http = require("http");
var express= require("express");
var app= express(); 


app.get("/",function(req,res){
res.send("<h1>this page is from Node js Express APP - Shivasurya - </h1>");
});

app.get("/welcome",function(req,res)
{
res.send("This welcome page ");
});


app.get("/about",function(req,res)
{
res.send("This is from About page ");
});

app.get("/example",function(req,res)
{
res.sendfile('example.html');

});


http.createServer(app).listen(port,host); 



now create a Manifest.yml file to instruct Bluemix to allocate Nodejs Applications,space Instance and others.i have explained in my Last Post on Creation and Usage of Manifest.yml.

Manifest.yml


---
applications:
- name: sampleapp1995
  memory: 256M
  instances: 1 
  host: sampleapp1995shiva
  command:node app.js

Just Push the App using the command below in Command prompt

$ cf push
Progress :


finally after deploying
during installation depedencies automatically screenshot


note: Work with caution because cloud may costs you money for over usages and scalling instance.And you can use HTTPS connections too.

I have deployed my application on Bluemix.just have a try since it is free till june month 2014.just share your experience with comments and post errors.Contact with me in s.shivasurya@gmail.com.Share is care.

Thursday, 29 May 2014

Working with impress.js to create presentations using HTML & CSS3 - impress.js

Impress.js was awesome plugin to create awesome presentation because it uses HTML and CSS3 to animate and make the presentation still more lively for users.at the sametime the Author of impress.js warns about the usage of the presentation will be nice only if it is interesting and it's not suitable for the official meets presentations.however it is easy to set up the plugin environment and start our presentation slides.I hope it works only on modern browsers.i have already used Fathom.js but it was regular for official purpose but this one is quite interesting to display interesting streams.
preview img from presentation slide impress.js
  


Browser compatibility: 

Currently impress.js works fine in latest Chrome/Chromium browser, Safari 5.1 and Firefox 10. With addition of some HTML5 polyfills (see below for details) it should work in Internet Explorer 10 (currently available as Developers Preview). It doesn't work in Opera, as it doesn't support CSS 3D transforms.As a presentation tool it was not developed with mobile browsers in mind, but some tablets are good enough to run it, so it should work quite well on iPad (iOS 5, or iOS 4 with HTML5 polyfills) and Blackberry Playbook.


Installation:

just like other javascript just include both impress.js and demo-impress.js in your html file in between <head></head> tags.get the orginal source from here.



<link href="/demo-css.css" rel="stylesheet" /> 
<script src="/impress.js" ></script>


Usage :

Lets start with normal Html tags below

<html lang="en">
    <head>
        <meta charset="utf-8" />
           <!-- your CSS and JS files can be included here. --> 
</head>

now lets dive into slides where i have made them in to div tags and mentioned them with classes and ID's.

check browser issues:

before that we must check the browser support if it supports then we could proceed normally! or else we must highlight by showing them Error message and try in latest browsers.

<div id="impress" class="impress-not-supported">

    <div class="fallback-message"> <!-- this fallback message shows when issues exist -->
        <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
        <p>For the best experience please use the latest <b>Chrome</b> or <b>Safari</b> browser. Firefox 10 (to be released soon) will also handle it.</p>
    </div> 

  <!-- your slides div can go here -->


</div> <!-- end of div class="impress-not-supported" -->


slides as div tag : 

before directly creating tags,just imagine a graph sheet in which you reference with X,Y,Z axis in which our div slides are going to be placed.our javascript plugin takes the value from div and moves around accordingly with CSS3.
it is mandatory to use Class step in each of our div slides.and you can mention other options if you want.

General Approach of Div slide:

<div class="step" data-x="Preferred_value" data-y="Preferred_value" data-z="Preferred_valuedata-rotate="Preferred_option" data-scale="Preferred_option">

  <!-- here you could use your own style of HTML coding for contents --> 

</div>


Example for Div slide:
options:
data-x : which moves along x-axis slide
data-y : which moves along y-axis slide
data-z : which moves along z-axis slide
data-rotate : which rotates around and reach your slide normally
data-scale : which scales above the slide(zoom level)

<div class="stepdata-x="200data-y="200data-z="100data-rotate="45data-scale="5">

  <!-- here you could use your own style of HTML coding for contents --> 
<p>welcome to i-visionblog.com</p>
<p>i love to create and share my ideas through my blog </p>
<p>i love to create web/mobile apps as a hobby and my interest is to work with Bigdata and analytics</p>

</div>


additional to this we could add some extra effects 3D with id="its-in-3d" and giving option to rotate in their axis 
data-rotate-x & data-rotate-y & data-rotate-z : which rotates when sliding on their axis corresponding, can be a 3D view.however it is simple and easy to code.


<div class="stepdata-rotate-x="200data-y="200data-z="100data-rotate="45data-scale="-5" id="its-in-3d">

  <!-- here you could use your own style of HTML coding for contents --> 
<p>it's a 3d view here..</p>

</div>

<!-- this is the last slide of the presentation mentioned with id="return" to go back to our first slide -->

<div id="return" class="step" data-rotate="0" data-y="2000" data-x="2000">
<p>join us ! code with us or create ideas | visit www.github.com/shivasurya</p>
    </div>

<!-- this can be hint for users to naviagte with spacebar or arrow keys -->

<div class="hint">
    <p>Use a spacebar or arrow keys to navigate</p>

</div>



contributors have added some audio and other specific functions go through them in Github official impress.js.if you can find more options and bugs in my demo/code comment below!

This can be more innovative and interesting when you can think logically using graphs.other can simply use the template provided.I have mentioned options which i have used in this presentation,if i had missed out or any bugs,comment and notify me via E-mail.share is care.

Tuesday, 20 May 2014

working with ibm bluemix for deploying PHP application on cloud - cloud foundry

As i mentioned about my cloud experience in Heroku and attended a workshop on IBM cloud ,i had an opportunity to deploy my php application on +IBM.I got success in deploying my PHP application instant manner from my windows platform.i am so thankful to +vikas sir for introducing the bluemix through workshop session,as i mentioned in my last post.bluemix is under beta version and open to all till june.





Scope:

we could deploy php application on cloud,Create services and run database.Since i am currently using Windows 8 i would show commands and screenshot from Command Prompt.

Requirements:

> IBM ID (mandatory) with developer registration(may be useful for forums)
> Sign Up for Beta Bluemix with IBM ID (Click Here)
> Constant Internet Connection ;)
> A small php project

Installation:

Go to Official Download page for cloud foundry tool for connecting with cloud.

1) It's better to download the Stable version.
2) Select the appropriate OS and download the zip and extract.
3) Run the installer with Admin Permissions only then You won't get errors.

After Installation:

Just it will be installed In Program files in your Windows Local Disk.
1) Now open your Command prompt with Administrative Permission.
2) And type "cf" and space "-v" (option)

    C:/>cf -v   // it must output with version number of the Cloud foundry tool Application


thus CF tool is working in your command prompt.lets start initial steps to deploy our application.


manifest.yml:

This is the important step in deploying app.This is the basic app settings ,it speaks with the cloud that you need the particular setup to run your corresponding app.Simply saying it is going to initialize cloud environment for deploying.So,let us concentrate on creating manifest.yml file.note this file must be with your project files while uploading.


---
applications:
- name: NAME-OF-YOUR-FOLDER-APP
  memory: 256M
  instances: 1 
  host: WEBSITE_ADDRESS_FOR_YOUR_APP(host)
  buildpack: https://github.com/dmikusa-pivotal/cf-php-build-pack


Actual manifest.yml of my app (note that above three hyphens must be mandatory and hyphen before name is also must)

don't change Buildpack(pulling it from git php built pack),memory(actual RAM memory limit) and instance(balance load using instance).if you change it you may be charged accordingly as per price plans.



---
applications:
- name: myapp
  memory: 256M
  instances: 1 
  host: shivamyapp
  buildpack: https://github.com/dmikusa-pivotal/cf-php-build-pack


see through that your host must be unique(app web address).may be in future you can make it your custom domain.

Deployment of app:

1) Just point your API .type this in your command prompt(ADMIN)
C:/> cf api https://api.ng.bluemix.net

2) and change directory where your project file to be uploaded.
C:/> cf login

3) Enter your E-Mail ID and Password of IBM ID
just click on it and view cf login
4) after changing directory where your project exisit.(move inside where manifest.yml present) and type the command
$ cf push myapp

since i had named my folder project name i had written as myapp(replace with your app project folder name and must be same as application name in manifest.yml)

5) by executing above command just you must get like this below image.That your upload works and moving to cloud foundry.
your project file uploading via CMD
6) After that it executes many configuration and restarts the application.this mean that your Host name is correct and working.
go to Provided_Host_name.ng.bluemix.net (hostname provided in manifest.yml)
eg: myapp.ng.bleumix.net

7) While updating your application just use step number 4,5.

note: Work with caution because cloud may costs you money for over usages and scalling instance.And you can use HTTPS connections too.

I have deployed my application on Bluemix.just have a try since it is free till june month 2014.just share your experience with comments and post errors.Contact with me in s.shivasurya@gmail.com.Share is care.

Sunday, 18 May 2014

working with qrcode.js for generating qr code - powerful chrome app by varun raj

Learning programming language doesn't matters at all.Because applying it real world for the end users comfort matters here.The same way last week i was learning with QR code to generate from javascript code and i was wondering where to use it and how users could easily benefited.at the same time +Varun Raj was working with QR code generator javascript and successfully create the application which helps sync between desktop to mobile phones with this QR code generator.

QR code it javascript.

   








Installation of qrcode.js:

just like other javascript include just include the script in to the web page or ur preferred projects.

<!--- include this in your header -->
<script src="qrcode.js">
</script>

Generate the QR code :

so what do we need for QR code is URL alone.this QR code.js gives to create new object for developers to just pass the url to the process the function.

<script>
new QRCode(document.getElementById("YOUR_DESIRED_ID_TO GENERATE_QR")
   , "http://www.i-visionblog.com/");
</script>

thus running this script will generate the QR code instant manner for your webpage in the given ID.

so,now how could we make user friendly for other users.and comes here is Chrome App. +Varun Raj had just created the simple extension for chrome browser and which could work with Chrome API to interact with browser Title and URL.then it is processed using popup.html of the app and generate the QR code for the users to capture it and use it later in their smartphones.

Chrome App Structure:

 APP Extension
 |
 |---------- manifest.json //initalize app with permissions,icons and other API mentions
 |
 |---------- popup.js //handles the extension events,clicks and responds in chrome
 |
 |---------- Jquery.min.js //here just to append the title text in extension
 |
 |----------  popup.html //our extension html markup where we generate QR code
 |
 |----------  qrcode.js //Javascript main file to generate the QR code.it acts like library.
 |
 |----------  icon.png //our extension icon

Live Demo for non Chrome Users:


new QRCode(document.getElementById("qrcode")
, "http://www.i-visionblog.com/");
See the Pen working with QR code.js ~ i-visionblog by s.shivasurya (@shivasurya) on CodePen.

Snapshot:


Snapshot on the chrome app.

about developer:


Developer : +Varun Raj , skcript.com
CHENNAI - INDIA
facebook  | Google | Twitter 




Thus we had seen the qrcode.js make our life easier without typing long urls and makes easy transfer for smartphones.report for bug and share is care.

Thursday, 15 May 2014

introduction to cloud computing - new way approach for business by IT industry - post snippet by @nancy joslin

workshop

+SHIVA SURYA , (author of @i-visionblog) myself attended the recent workshop on cloud computing and big data analytics with my department members +siddarth velmurugan , +venkat raman , +SRIRAMAMOORTHY S & +Varshi Ramesh.

a video that explains very well on cloud computing.
The team from +IBM , +Vikas Manoria ,sir was explaining in awesome manner about the usage,needs and other aspects technically about #cloud computing and it's working and last we had a great demo on Bluemix,a cloud based application deployment startup from IBM with J2EE simple application running on cloud integrating with Twitter API.I had previously guided you guys deploying the web application on cloud.the same way IBM provides excellent solution to deploy apps on cloud with many configuration.I will be writing a post within a week to deploy a PHP based web application with mongoDB as database on Bluemix.

so let us see about some basic concepts on cloud concept :

When a new business is started, they spend time and money to build IT infrastructures which provide hardware, software, services and they need power, larger data center, storage, servers, networks etc. But their growth get slower. In this case Cloud Computing can be implemented. It provides virtual data centers with software, and hardware and information resources, reduces money spending and avoids huge capital investments. 

Cloud computing is simply a service in which computers are connected to 

• connected to larger data centers with lot of software so they need not spend money to buy individual license 

• connected to hardware sources so they need not build, upgrade, maintain infrastructure 

• connected to information resources so they need not go all around the world for collecting information 

This doesn’t require much, all it need is internet and an account as we create in Gmail for example. But the serious problem is the security data to be stored in data centers go through networks and are sometimes hacked by black hats and lot more.however we have SSL(priavate/public key encryption) and other algorithms to encrypt data and data protection by particular operating systems.

To rectify this, cloud computing is available in three models as

Private - secure, to one company alone, not much efficient.

Public - not much secure, highly efficient.

Hybrid - combination of private and public models, secure and more efficient.

Cloud computing provides all service as 


IaaSInfrastructure as a service(demanding infrastructure particularly).

PaaSPlatform as a service(demanding platform such as OS particularly).

SaasSoftware as a service(instant for testers to include add-ons like mysql,mongodb).

More than half of US are pulled into this. By the 3rd into Everything as a Service (EaaS) instead of infrastructure, platform, software as individual service. They are expecting that the total market of cloud will reach $158.8 billion. In forth coming years Hybrid cloud will be more adopted and total market rises to great extends.

so which industry,application needs cloud storage,hosting ?


> Applications such as pinterest runs on cloud based service where the traffic would be quite large and to manage them.

> Industries such as logistics and other industries which need real time statistics and data to manage customers and provide opt services on time.

> growing industry for big data analysis to challenge their opponents with present data.

> finally marketing feedbacks,data etc for products a needs a huge storage where they can be stored and retrieved without loss of data and perfomance.

and where the industry could handle large amount of data.

And finally cloud is vast concept to describe ,and only you can experience it when you really work it on by deploying small applications and experiencing how cloud manages the and traffic.share is care.