FaceBook Login Logout using cordova 3.3.0 cli.

In recent past i faced a lot problem in setting up the cordova facebook plugin with cli 3.3.0.After a lot of search i found it is typo from cordova.I am here sharing the easiest steps to setting up cordova facenook plugin using cordova cli 3.3.0 .

How to set up the Facebook plugin With cordova 3.3.0 cli for android ?

before Setting Facebook plugin with cordova 3.3.0 you have to setup these

Prerequisite :

1. JdK
2. Apache Ant
3. Node.js and NPM
4. Git
5. Cordova 3.3.0 CLI

Once you installed all the above properly.Open your command prompt and go to your project directory and run this command

you will see the  screen like above after running the command . You have created a cordova project.Change your directory to facebookTutorial 

Now you are inside cordova project which you just created .Run the below command.

>

Now you installed facebook plugin in your cordova project. But if you will run the command  cordova plateform add android it will get failed and ask you to putt appid and appname.

For removing this error locate the folder \plugins\com.phonegap.plugins.facebookconnect inside your projectfolder.

Open The plugin.xml file from \plugins\com.phonegap.plugins.facebookconnect folder and find the lines

Modify it to

Where value is your app id and your app name.

 Run the command cordova platform add android . The screen similar to below will appear.

 Now you have installed facebook plugin and created android project.
Now we will see how to get login to facebook through cordova facebook plugin ?

 Now open the index.html file from your projectfolder/www in your favorite editor. And delete everything from this .

 You have a Blank index.html file.Write some dom elements inside your body Tag 

Your Dom structure is ready . Now Make reference of cordova.js ,cdv-plugin-fb-connect.js and facebook-js-sdk.js

Now come to your <script></script> portion and check the cordova facebook and cdv agent are included properly inside your project

Write  event handler function for login logout and status change.

Its time to initialize FB sdk now. Here i am initializing it with device ready event

Once the fb is initialize we can  make login to facebook through our application.Here the function for log in

For the Logging out

For getting the login status here is the code snipet

Once all this done run the command 

Your Application will be launch in your emulator.Here are few screenshots of emulator.

Hope you enjoyed reading this.If any doubt i am open to answer .Feel free to ask and do't forget to share with your friends

Fork me on GitHub

Read more ►

Offline App Capability In HTML5

Html5 Offline Apps

Offline app capability in HTML5 bought all the power to store data offline .When we talks about offline people ask offline means without internet ? First take the term ONLINE first . online and Web are kind of synonyms.

So why the term Offline is getting use for web technology . The offline here means run the webpage from file:// uri. But hang on it does not mean the web page will never get connected to server.The term offline will make more sense if we will take it like the web page could survive at the server downtime.There are various apps who connects the cloud server and survives at downtime. Gmail Mobile app and gmail offline are examples

.

In the Older time devs used the technique like cookies,Plugin Based Storage for storage. But the era of HTML5 bought more power to the client side for storage.

 . You can check the application for online/offline using navigator.onLine(). And it works everywhere in latest browser even in IE also.

You can also listen the events for it using.

document.body.addEventListener("online", function () {console.log("Now you are online !!!")}

document.body.addEventListener("offline", function () {console.log("Now you are offline !!!!")}

HTML5 bought many features to make application offline .Few Technique to make app offline

1.Application Cache : CACHE MANIFEST file make you able to store the resourse files locally for offline usage.Make a reference of manifest file inside <html> tag.

<html manifest="MyManifest.appcache">.

</html>

The mime type of the manifest must be text/cache-manifest.Manifest file is a simple text file . It looks like this

CACHE MANIFEST

index.html

index.css

index.js

2.Web Storage : Web storage have two sub category. One is persistent called local storage . In local storage we can set a value to a key using localstorage.key="value"

And we can retrieve it later . The other category of web storage is session storage we use it similar but the data gets lost once the browser gets closed .

We can just match the strings using the web storage.Simplicity is for calling the API is good part of this and bad performance is bad part of it.

3.Web SQL Database : Web sql database is a relational database .It has all the power of storing the complex relational database. it is well supported in all mobile browser the performance is really good .It has robustness. And the best part it is really easy to maintain.One have good command over sql can play with it with lot of ease.

4.Indexed database : Indexed Database is a collection of  stores of objects . Where you can keep the objects for future use.In indexed Db you don't need to define a schema before like  web sql database . In Index db you can have multiple databases and in each database you can have multiple stores.Indexed Database have good search performance and have robustness

Read more ►