Hybrid-10 : Google+ Login Integration

Google+ login one of the most used login integration used by all most all applications and websites. To know how to integrate Google+ login in your Cordova based app follow this tutorial step by step.

Plugins id- “cordova-plugin-googleplus”

Plugins Version- “5.1.1”

Click Here For Plugins Doc.

See The Demo.

#index.html

<div class="views"> <div class="view view-main"> <div class="pages navbar-fixed toolbar-fixed"> <!-- Now we need additional "navbar-fixed" and "toolbar-fixed" classes on Page --> <div data-page="index" class="page"> <!-- Top Navbar--> <div class="navbar theme-teal"> <div class="navbar-inner"> <div class="left"> <a href="#" class="back link"><i class="icon icon-back"></i></a> </div> <div class="center"> <i class="fa fa-book" aria-hidden="true" style="font-size:18px;color:black;">  <span style="font-weight:bold;color:white">Login with Facebook Demo</span></i></div> <div class="right"> <a href="#" class="link" style="margin-right:5px"><i class="fa fa-share" aria-hidden="true"></i></a> </div> </div> </div> <!-- /End of Top Navbar--> <div class="page-content" > <div class="content-block" style="margin-top:-10px"> <center> <img id="image" src="" /></center> <br> <center> <div id="profile_name"> </div> </center> <p id="login_button" class="button active" onclick="trySilentLogin()"> Login with Google+</p> <p id="logout_button" class="button active" onclick="G_logout();"> Logout with Google+</p> </div> </div> <!-- Bottom Toolbar--> <!-- /End of Bottom Toolbar--> </div> </div> </div> </div>

#my-app.js

//Google+ Login function trySilentLogin() { window.plugins.googleplus.trySilentLogin( { 'scopes':'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read https://www.googleapis.com/auth/plus.me https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email', 'webClientId':'144505542324-0hvt349as9vhe553m59gapv4bk8alrpq.apps.googleusercontent.com', 'offline': true, }, function (obj) { myApp.alert("Your have successfully login!"); $$("#login_button").hide(); document.querySelector("#image").src = obj.imageUrl; document.querySelector("#image").style.visibility = 'visible'; document.querySelector("#profile_name").innerHTML = "Welcome, " + obj.displayName + ", " + obj.email; $$("#logout_button").show(); }, function (msg) { alert('error: ' + msg); } ); } //Google+ Logout function G_logout() { window.plugins.googleplus.logout( function (msg) { myApp.alert("You have successfully log out!"); document.querySelector("#image").style.visibility = 'hidden'; $$("#logout_button").hide(); $$("#login_button").show(); }, function (msg) { myApp.alert("Error" +msg); } ); }

Remember:  To communicate with Google+ you need to do some tedious setup. To configure your setup and discover your REVERSED_CLIENT_ID Click Here.
To know the complete setup watch the below video.


Video coming soon...

Hybrid-09 : Login with Facebook.

All most all App now used Facebook login intrgration.User can login with facebook email id and password without pre signup.In this tutorial I will show you how to integrate facebook login with your app and reveal the user information.

Plugins id- “cordova-plugin-facebook4”

Plugins Version- “1.7.4”

Click Here For Plugins Doc.

See The Demo.

***Remember:  This Plugins only works properly with minimum android sdk version 15 and lader. So, be sure you set mimimum android sdk version=15 in your build setting. and be sure you add your proper facebook app_id and app name when add this plugins.

#index.html

<div class="views"> <div class="view view-main"> <div class="pages navbar-fixed toolbar-fixed"> <!-- Now we need additional "navbar-fixed" and "toolbar-fixed" classes on Page --> <div data-page="index" class="page"> <!-- Top Navbar--> <div class="navbar theme-teal"> <div class="navbar-inner"> <div class="left"> <a href="#" class="back link"><i class="icon icon-back"></i></a> </div> <div class="center"> <i class="fa fa-book" aria-hidden="true" style="font-size:18px;color:black;">  <span style="font-weight:bold;color:white">Login with Facebook</span></i></div> <div class="right"> <a href="#" class="link" style="margin-right:5px"><i class="fa fa-share" aria-hidden="true"></i></a> </div> </div> </div> <!-- /End of Top Navbar--> <div class="page-content" > <center> <div id="profile"> </div> </center> <div class="content-block" style="margin-top:-10px"> <center> <div id="profile"> </div> </center> <p id="login_button" class="button active" onclick="fblogin();"> Login with facebook</p> <p id="logout_button" class="button active" onclick="logout();"> Logout with facebook</p> </div> </div> <!-- Bottom Toolbar--> <!-- /End of Bottom Toolbar--> </div> </div> </div> </div>

#my-appp.js

var fblogin = function () { if (window.cordova.platformId == "browser") { var appId = "REPLACE_WITH_YOUR_FACEBOOK_APP_ID"; facebookConnectPlugin.browserInit(appId); alert(JSON.stringify(facebookConnectPlugin)) } facebookConnectPlugin.login( ["email"], function (response) { myApp.alert("Your have successfully login!"); $$("#login_button").hide(); try{ facebookConnectPlugin.api( "me/?fields=first_name,last_name,picture", ["public_profile"], function (response) { $$("#profile").html('<h2> '+response.first_name+' '+response.last_name+'</h2> <img src="'+response.picture.data.url+'" />'); }, function (response) { myApp.alert(JSON.stringify(response)) }); } catch(err) { message.innerHTML = "Input is " + err; } $$("#logout_button").show(); }, function (response) { myApp.alert(JSON.stringify(response)) }); } var logout = function () { facebookConnectPlugin.logout( function (response) { myApp.alert("You have successfully log out!"); $$("#login_button").show(); $$("#logout_button").hide(); $$("#profile").html(" "); }, function (response) {"Failed to Logout"+ myApp.alert(JSON.stringify(response)) }); }

Don't forgot to replace your valid facebook app id in my-app.js file.

How to get Facebook App ID.

Login facebook developer account with your facebook account and add a new app from MyApp option of right upper corner. After Successfully create your App you need to set some Setting of your app from Setting Option. For better understanding you can watch my video.

Video coming soon...
Generate Hash key On LINUX:
Open Terminal and type following command to get your Hash Key.
For Debug Build: keytool -exportcert -alias androiddebugkey -keystore debug.keystore | openssl sha1 -binary | openssl base64
For release Build: keytool -exportcert -alias Replace_your_aliasName -keystore Replace_your_keystore_FilePath | openssl sha1 -binary | openssl base64

For more Click here.

Hybrid-08 : Social Sharing

This tutorial is about social sharing. In this tutorial I will show you how to share any photos, links, media file or shareable document to the social media such as Facebook, Twitter, Instagram, WhatsApp etc.

Plugins id- “cordova-plugin-x-socialsharing”

Plugins Version- “5.1.3”

Click Here For Plugins Doc.

To see the demo Click Here.

#index.html

<div class="pages navbar-fixed"> <div data-page="index" class="page"> <!-- Top Navbar--> <div class="navbar theme-teal"> <div class="navbar-inner"> <div class="left"> <a href="#" class="back link"><i class="icon icon-back"></i></a> </div> <div class="center"> <i class="fa fa-book" aria-hidden="true" style="font-size:18px;color:black;">  <span style="font-weight:bold;color:white">Social Sharing</span></i></div> <div class="right"> <a href="#" class="link" style="margin-right:5px"><i class="fa fa-share" aria-hidden="true"></i></a> </div> </div> </div> <div class="speed-dial"> <!-- FAB inside will open Speed Dial actions --> <a href="#" class="floating-button color-teal"> <!-- First icon is visible when Speed Dial actions are closed --> <i class="fa fa-share-alt" aria-hidden="true"></i> <!-- Second icon is visible when Speed Dial actions are opened --> <i class="icon icon-close"></i> </a> <!-- Speed Dial Actions --> <div class="speed-dial-buttons color-teal"> <a href="#"> <i class="fa fa-facebook" aria-hidden="true"></i> </a> <a href="#"> <i class="fa fa-google-plus" aria-hidden="true"></i> </a> <a href="#"> <i class="fa fa-twitter" aria-hidden="true"></i> </a> <a href="#"> <i class="fa fa-instagram" aria-hidden="true"></i> </a> <a href="#"> <i class="fa fa-whatsapp" aria-hidden="true"></i> </a> <a href="#"> <i class="fa fa-envelope-o" aria-hidden="true"></i> </a> <a href="#"> <i class="fa fa-reply" aria-hidden="true"></i> </a> </div> </div> <!-- /End of Top Navbar--> <div class="page-content" style="margin-top:-50px"> <div class="content-block"> </div> </div> <!-- Bottom Toolbar--> <!-- /End of Bottom Toolbar--> </div> </div>

#my-app.js

function onDeviceReady() { } document.addEventListener("deviceready", onDeviceReady, true); function shareToFacebook(){ window.plugins.socialsharing.shareViaFacebook( 'Message via Facebook', null /* img */, null /* url */, function() {console.log('share ok')}, function(errormsg){alert(errormsg)} ); } function shareToTwitter(){ window.plugins.socialsharing.shareViaTwitter( 'Message via Twitter', null /* img */, null /* url */, function() {console.log('share ok')}, function(errormsg){alert(errormsg)} ); } function shareToSMS(){ window.plugins.socialsharing.shareViaSMS( 'Message via SMS', '1234567890' /* phone numbers comma seperated */, function() {console.log('share ok')}, function(errormsg){alert(errormsg)} ); } function shareToWhatsapp(){ window.plugins.socialsharing.shareViaWhatsApp( 'Message via WhatsApp', 'https://www.google.nl/images/srpr/logo11w.png' /* img */, null /* url */, function() {console.log('share ok')}, function(errormsg){alert(errormsg)} ); } function shareToInstagram(){ window.plugins.socialsharing.shareViaInstagram( 'Message via Instagram', 'https://www.google.nl/images/srpr/logo11w.png', /*img*/ function() {console.log('share ok')}, function(errormsg){alert(errormsg)} ); } function shareToOptions(){ window.plugins.socialsharing.share( 'Message via Share' ); }

Hybrid-07 : Geolocation: Google Map

In this tutorial I will show you step by step how to integrate Google map and find user’s current location using JavaScript in cordova app.

Plugins id- “cordova-plugin-geolocation”

Plugins Version- “2.2.0”

Click Here For Plugins Doc.

See The Demo App.

#index.html

<div class="pages"> <div data-page="index" class="page"> <!-- Top Navbar--> <div class="navbar theme-teal"> <div class="navbar-inner"> <div class="left"> <a href="#" class="back link"><i class="icon icon-back"></i></a> </div> <div class="center"> <span style="font-weight:bold;color:white">Geolocation Demo App</span></div> <div class="right"> <a href="#" class="link" style="margin-right:5px" onclick="shareToOptions()"><i class="fa fa-share" aria-hidden="true"></i></a> </div> </div> </div> <!-- /End of Top Navbar--> <div class="page-content"> <div id="googleMap" style="width:100%;height:100%;"> <center> No GPS Found. Try Again</center> </div> </div> <!-- Bottom Toolbar--> <!-- /End of Bottom Toolbar--> </div> </div>

#my-appp.js

//Google map js myApp.onPageInit('googleMap', function(page) { console.log('map page initialized'); var app = { // Application Constructor initialize: function() { this.bindEvents(); }, // Bind Event Listeners // // Bind any events that are required on startup. Common events are: // 'load', 'deviceready', 'offline', and 'online'. bindEvents: function() { document.addEventListener('deviceready', this.onDeviceReady, false); }, // deviceready Event Handler // // The scope of 'this' is the event. In order to call the 'receivedEvent' // function, we must explicitly call 'app.receivedEvent(...);' onDeviceReady: function() { // app.receivedEvent('deviceready'); navigator.geolocation.getCurrentPosition(app.onSuccess, app.onError); }, onSuccess: function(position){ var longitude = position.coords.longitude; var latitude = position.coords.latitude; var latLong = new google.maps.LatLng(latitude, longitude); var mapOptions = { center: latLong, zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("googleMap"), mapOptions); var marker = new google.maps.Marker({ position: latLong, map: map, title: 'my location' }); }, onError: function(error){ alert("the code is " + error.code + ". \n" + "message: " + error.message); }, }; app.initialize(); })

Hybrid-06 : Design Apps With Framework7

This tutorial is about how to design your cordova based hybrid Apps. Hows the structure will be index.html page, another html pages and .js pages.

To create your first project you must included the following code in your index.html file

<!-- Path to Framework7 iOS CSS theme styles --> <link rel="stylesheet" href="path/to/framework7.ios.min.css"> <!-- Path to Framework7 iOS related color styles --> <link rel="stylesheet" href="path/to/framework7.ios.colors.min.css"> <!-- Path to your custom app styles--> <link rel="stylesheet" href="path/to/my-app.css"> ----------------------------- <!-- Path to Framework7 Library JS--> <script type="text/javascript" src="path/to/framework7.min.js"></script> <!-- Path to your app js--> <script type="text/javascript" src="path/to/my-app.js"></script>

Framework7 has two types of App Theme Layout

1. ios App Layout.

2. Android App Layout.

ios App Layout: (index.html).

<!DOCTYPE html> <html> <head> <!-- Required meta tags--> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- Your app title --> <title>Myapp</title> <!-- Path to Framework7 iOS CSS theme styles--> <link rel="stylesheet" href="css/framework7.ios.min.css"> <!-- Path to Framework7 iOS related color styles --> <link rel="stylesheet" href="css/framework7.ios.colors.min.css"> <!-- Path to your custom app styles--> <link rel="stylesheet" href="css/my-app.css"> </head> <body> <!-- Status bar overlay for full screen mode (PhoneGap) --> <div class="statusbar-overlay"> </div> <!-- Panels overlay--> <div class="panel-overlay"> </div> <!-- Left panel with reveal effect--> <div class="panel panel-left panel-reveal"> <div class="content-block"> <p> Left panel content goes here</p> </div> </div> <!-- Views --> <div class="views"> <!-- Your main view, should have "view-main" class --> <div class="view view-main"> <!-- Top Navbar--> <div class="navbar"> <div class="navbar-inner"> <div class="center sliding"> Awesome App</div> <div class="right"> <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a> </div> </div> </div> <div class="pages navbar-through toolbar-through"> <!-- Page, "data-page" contains page name --> <div data-page="index" class="page"> <!-- Scrollable page content --> <div class="page-content"> <p> Page content goes here</p> <!-- Link to another page --> <a href="about.html">About app</a> </div> </div> </div> <!-- Bottom Toolbar--> <div class="toolbar"> <div class="toolbar-inner"> <!-- Toolbar links --> <a href="#" class="link">Link 1</a> <a href="#" class="link">Link 2</a> </div> </div> </div> </div> <!-- Path to Framework7 Library JS--> <script type="text/javascript" src="is/framework7.min.js"></script> <!-- Path to your app js--> <script type="text/javascript" src="js/my-app.js"></script> </body> </html>

Another ios pages Layout:

<div class="navbar"> <div class="navbar-inner"> <div class="left"> <a href="#" class="back link"> <i class="icon icon-back"></i> <span>Back</span> </a> </div> <div class="center sliding"> For Dynamic Navbar</div> <div class="right"> <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a> </div> </div> </div> <div class="pages navbar-through toolbar-through"> <div data-page="forms" class="page"> <div class="page-content"> <div class="content-block-title"> <b>Page Content Title</b></div> <div class="list-block"> <ul> <li> <a href="formelement.html" class="item-link"> <div class="item-content"> <div class="item-media"> <i class="icon icon-f7"></i></div> <div class="item-inner"> <div class="item-title"> Page Content</div> </div> </div> </a> </li> </ul> </div> </div> <div class="toolbar"> <div class="toolbar-inner"> <div class="center"> For Dynamic Navbar</div> </div> </div> </div> </div>

Android App Layout: (index.html).

<!DOCTYPE html> <html> <head> <!-- Required meta tags--> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- Color theme for statusbar --> <meta name="theme-color" content="#2196f3"> <!-- Your app title --> <title>My App</title> <!-- Path to Framework7 Library CSS, Material Theme --> <link rel="stylesheet" href="css/framework7.material.min.css"> <!-- Path to Framework7 color related styles, Material Theme --> <link rel="stylesheet" href="css/framework7.material.colors.min.css"> <!-- Path to your custom app styles--> <link rel="stylesheet" href="css/my-app.css"> </head> <body> <!-- Views --> <div class="views"> <div class="view view-main"> <div class="pages"> <!-- Now we need additional "navbar-fixed" and "toolbar-fixed" classes on Page --> <div data-page="index" class="page navbar-fixed toolbar-fixed"> <!-- Top Navbar--> <div class="navbar"> <div class="navbar-inner"> <div class="center"> Awesome App</div> </div> </div> <!-- /End of Top Navbar--> <div class="page-content"> <p> Other content goes here</p> ... </div> <!-- Bottom Toolbar--> <div class="toolbar"> <div class="toolbar-inner"> Bottom Toolbar </div> </div> <!-- /End of Bottom Toolbar--> </div> </div> </div> </div> <!-- Path to Framework7 Library JS--> <script type="text/javascript" src="js/framework7.min.js"></script> <!-- Path to your app js--> <script type="text/javascript" src="js/my-app.js"></script> </body> </html>

Another Android pages Layout:

<div class="views"> <div class="view view-main"> <div class="pages navbar-fixed toolbar-fixed"> <div data-page="index" class="page"> <!-- Top Navbar--> <div class="navbar"> <div class="navbar-inner"> <div class="left"> </div> <div class="center"> Title</div> <div class="right"> </div> </div> </div> <!-- /End of Top Navbar--> <div class="page-content" > <div class="content-block"> <p style="text-align:justify"> Page contents goes here............ </p> </div> </div> <!-- Bottom Toolbar--> <div class="toolbar"> <div class="toolbar-inner"> For dynamic Bottom Toolbar </div> </div> <!-- /End of Bottom Toolbar--> </div> </div> </div> </div>

After design App layout with attached Framework7 CSS and JS files you need to initialize app and views.

Initialize Your App: (my-app.js)

// Initialize app var myApp = new Framework7(); // Use framework7 custom DOM var $$ = Dom7; // Add view var mainView = myApp.addView('.view-main', { // To enable dynamic navbar dynamicNavbar: true });

Script For Specific pages: (my-app.js)

// Option 1. Using page callback for page (for "about" page in this case) (recommended way): myApp.onPageInit('about', function (page) { // about page script will be here }) // Option 2. Using one 'pageInit' event handler for all pages: $$(document).on('pageInit', function (e) { // Get page data from event data var page = e.detail.page; if (page.name === 'about') { // Following code will be executed for page with data-page attribute equal to "about" myApp.alert('Here comes About page'); } })

Hybrid-05 : Started First Project with Intel XDK

The Intel® XDK is a comprehensive cross-platform development environment for cost-effectively creating, testing, debugging, building, and deploying HTML5-based hybrid mobile apps and web apps. It also supports developing Internet of Things Node.JS apps that use an Intel maker board

This 15- to 20-minute tutorial helps you get started with the Intel XDK by walking you through a typical end-to-end workflow you can ultimately apply to your own app development process.

After you complete this tutorial, you should be able to:

1. Create your new app.

2. Edit your app files with the built-in Brackets* code editor.

3. Preview app functionality on various virtual devices.

4. Debug your app with the built-in Google Chrome* Developer Tools (CDT) debugger and perform on-device debugging.

5. Evaluate how your app looks and performs on a real physical mobile device.

6. Configure build options to prepare your app for submission to various app stores and/or for hosting on the web and build it as a packaged bundle.

To get the full tutorial Click Here.

*** I collected this tutorial from Intel Xdk developer Zone. All the credits goes to Nancee Moster (Intel), Michael E. (Intel), Anusha M. (Intel), who wrote this article.

Hybrid-04 : Basic Feature of Intel Xdk

Intel Xdk one of the most popular development tool for cordova based hybrid Apps. This is HTML5 IDE with Cordova-specific tools for project configuration, plugin management, integrated emulation and debugging, on-device preview and live reload, cloud-based build and more.

To know the basic feature of Intel Xdk and how to use, developed, test and build cordova based hybrid Apps watch the below video.

Video is upcoming...