Import Contacts and Invite New Contacts By Email From Gmail Contacts API - Inspired By Linkedin,Twitter Mail Importer

Inviting by E-Mail is an excellent way for asking new users to try our sites,Which is actually sent by their friends or contacts in Address Book.As Like as LinkedIn,Twitter Gets your Email address especially Gmail and Access all your contacts and Matches with Their Email Database and shows their existing users to follow(connect) and invite New users to try their respective sites.It means enjoying the site with their friends(Especially Twitter does this).Even i too joined LinkedIn and Twitter because of Invitation mail from my friends in Gmail via Twitter,LinkedIn.

Reference :    |  

Script Structure :

• index.php [ Main Html markup and other scripts ]
• mail.php   [ Send Mail with Loop for Users ]
• invite.js    [ javascript file handling JSON data append and processing Gmail Contacts API ] 
• process.php [ Compare exisiting users and new users responding as JSON format to frontend ]

Scope : 

This is simple add-on Application for websites having Email users database.It is similar to Twitter,Linked Contact Importer where they get API access and fetch email from corresponding service and filter them accordingly as existing users and New users.and giving some options such as Follow or Connect and Inviting by Emails.

Javascript API for Gmail Contacts Import :

Gmail API Contacts let you to Read,Update,Create Contacts in Gmail.Core part of the Contacts API below Here.

Installation and Initialization:

check here how to get those keys 

 var clientId = 'Your Client ID here';
 var apiKey = 'Your api key here';
 var scopes = 'https://www.google.com/m8/feeds';

with this we are going to add Javascript plugin Jquery,Client.js from google

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://apis.google.com/js/client.js"></script>

Javascript API to get Contact List as JSON data :

Check my Last post to Authorize a Google User and access their API - Click Here

$.get("https://www.google.com/m8/feeds/contacts/default/full?alt=json&access_token=" + authResult.access_token + "&max-results=700&v=3.0",
      function(response){
if(response.feed.entry.length > 0){
         //Handle Response
       console.log(response);
         var email= [];
console.log(response.feed.entry.length);
        for ( var i= 0 ; i < response.feed.entry.length ; i++)
    {  console.log(i);
          if(response.feed.entry[i].gd$phoneNumber)
           { continue; }
else{
      email[i]= response.feed.entry[i].gd$email[0].address;
      console.log(email[i]); }
 });

Posting the Javascript email array to proccess.php via ajax to filter new users and existing users.

$.post("process.php", { email: email },
    function(Result){
     //use the results to append to show the existing users to new users.
});

process.php

process.php just filter incoming list JSON contact email to existing email database.filter them as new users as object in json ,and existing users with their prof pic we are making another object in JSON.with header JSON/Application we are just encoding output via ajax to index.php

Download the Demo files try in Localhost ,I have added Mailing code via ajax too.If you can Find any error in Javascript (invite.js) just check the console and report error as comments/ or mail me s.shivasurya@gmail.com

Read More

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 :)

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

Read More