codesundar - Medium

Barcode Scanner using PhoneGap

Sundaravel — Sun, 19 Aug 2018 04:49:24 GMT

This article is about working with barcode scanner in PhoneGap based application.

Step1: Create a Cordova Project

cordova create BarCodeScanner com.phonegappro.barcodescanner BarCodeScanner

Step 2: Change your working directory

cd BarCodeScanner

Step 3: Add Platform (Android / iOS)

cordova platform add android

Step 4: Add Plugin

cordova plugin add phonegap-plugin-barcodescanner

Full Source code (http://codesundar.com/tutorials/phonegap-bar-code-scanner-example/)




 
 BarCode Scanner - PhoneGapPro.com
 
 


 BAR CODE SCANNER

Barcode Scanner using PhoneGap was originally published in codesundar on Medium, where people are continuing the conversation by highlighting and responding to this story.

Ionic Chat app using Firebase

Sundaravel — Sun, 19 Aug 2018 04:48:03 GMT

This article, I’m going to explain how to create realtime chat application using Firebase Backend ( A Simple Group Chat)

Download Source: https://github.com/codesundar/ionic2-chat-with-firebase

Technologies used:

Ionic Framework (v3)
Firebase JS SDK(we’re not going to use AngularFire)

Creating new project in Firebase

First, we need to create new project in firebase

Step 1: Login with your Firebase (https://firebase.google.com) & create new project

step 2: Click “add firebase to your web app” & get keys

step 3: Add Rules with your database

{
 “rules”: {
 “.read”: “auth == null”,
 “.write”: “auth == null”
 }
}

Note: we changed authentication to null; so anyone can access to your database

Creating Ionic Project

Once we created project from firebase, we can setup new ionic project for our chat application

Create new Ionic project

ionic start ionicfirechat blank

Change your working directory

cd ionicfirechat

Add your platform (if required)

ionic platform add android

ionic platform add ios

Installing & Setup Firebase (app.component.ts)

Add firebase node_modules to your project

npm install firebase --save

import firbase in app.component.ts

import * as firebase from ‘firebase’;

Add configuration to app.component.ts; Replace with your Firebase Configuration

let config = {
 apiKey: “YOUR_APIKEY”,
 authDomain: “YOUR_AUTH_DOMAIN”,
 databaseURL: “YOUR_DATABASE_URL",
 projectId: “YOUR_PROJECT_ID”,
 storageBucket: “YOUR_STORAGE_BUCKET”,
 };
firebase.initializeApp(config);

Creating UI for chat (home.html)


  
    
      Ionic 2 Firebase Chat


 
  
   {{message.name}}

   {{message.message}}

Chat screen

Here, we need to create a prompt for getting username;

this.alert.create({
  title: 'Username',
  inputs:[{
    name: 'username',
    placeholder: 'username'
  }],
  buttons:[{
    text: 'Continue',
    handler: username =>{
      this.name = username
   }
  }]
 }).present();

Sending Messages to Firebase

When user clicks send button we need to call send() to insert messages in to firebase & clear existing messages

send(){
 this.ref.push({
    name: this.name.username,
    message: this.newmessage
 });
}

Reading Messages from Firebase

When user created new message, we need to display inside

this.ref.on('value',data => {
    let tmp = [];
    data.forEach( data => {
     tmp.push({
      key: data.key,
      name: data.val().name,
      message: data.val().message
     })
    });
    this.messagesList = tmp;
 });

Our Premium Products:

Save your development time with premium starter apps

Ionic firebase Realtime chat: https://mythemebox.com/template/ionic-chat-app/

Ionic Firebase Taxi booking script: https://mythemebox.com/template/ionic-taxi-booking-starter/

Explore more: Ionic Themes & Starters

Ionic Chat app using Firebase was originally published in codesundar on Medium, where people are continuing the conversation by highlighting and responding to this story.

Integrate Facebook login with Ionic 2 / 3

Sundaravel — Sun, 19 Aug 2018 04:47:10 GMT

Originally published at https://codesundar.com/ionic-login-with-facebook/ on March 17, 2017.

This lesson (ionic login with facebook), we’re going to learn how to integrate facebook login for ionic application and fetch user’s information from facebook.

Ionic login with Facebook Video Lesson

https://medium.com/media/72cc1a277ea4493008ac82e5d167be75/href

First we need to create new project then we need to add platform

ionic start fblogin blank
cd fblogin
ionic cordova platform add android

To add a facebook plugin (cordova-plugin-facebook4) we need to create APP_ID and APP_NAME.If you don’t know, how to create APP_ID and APP_NAME, please visit https://codesundar.com/create-facebook-application/

ionic plugin add cordova-plugin-facebook4 --variable APP_ID="YOUR_APP_ID" --variable APP_NAME="YOUR_APP_NAME"

npm install --save @ionic-native/facebook

Now we have to import modules on app.module.ts page then we can write a code for home pages

home.html


 
 
 {{userInfo.first_name}}

 {{userInfo.email}}

Explanation: We’ve created two buttons for login and logout; we also display images, name, and email address

home.ts

loginWithFB(){
    this.fb.login(["public_profile","email"]).then( loginRes => {
      this.fb.api('me/?fields=id,email,first_name,picture',["public_profile","email"]).then( apiRes => {
        
        this.userInfo = apiRes;
        this.isUserLoggedIn = true;

      }).catch( apiErr => console.log(apiErr));

    }).catch( loginErr => console.log(loginErr) )
  }

  logout(){
    this.fb.logout().then( logoutRes => 
      this.isUserLoggedIn = false
    ).catch(logoutErr => 
      console.log(logoutErr)
    );
  }

Explanation: we need to import {Facebook} from '@ionic-native/facebook' then we need to create an object. By using that created object we can call this.fb.login() for login, also we have used this.fb.api() to get user’s information

Originally published at https://codesundar.com/ionic-login-with-facebook/ on March 17, 2017.

Integrate Facebook login with Ionic 2 / 3 was originally published in codesundar on Medium, where people are continuing the conversation by highlighting and responding to this story.