Hello

We are looking for an experienced ionic developer to work in fitness challenging app. If interested please send PM.

Thanx

ෆර්බේස් සොශල් ලොගින් ඇන්ඩ්‍රොයිඩ් ඩිවයිස් එකෙ හරියට වැඩකරන විදියට හදාගන්න විදිය ගැන කියලා දෙන්න පුලුවන්ද? විදි කීපයක් ට්‍රයි කරා සාර්තක උනේ නැහැ.

Introduction to react js...

9612b89a-3983-43d2-94c0-c3f5ccacdffd-image.png

Source Here

In this article i'm going to show you how to integrate firebase email login for ionic apps and pwa's. I'll cover all the basic stuff like login, register, forgot password, logout and profile.

First i will introduce about firebase and ionic 5.

What is Firebase

I'm sure you have heard about firebase before, if not don't worry i'll tell you about firebase. Firebase is a Backend-as-a-Service (BaaS) that started in 2011 and backed by google. The main advantage of using firebase is we don't want to have a server, firebase is the our server, it has rich feature set that can make fully functional dynamic mobile apps without our own API, Database etc… See below for main features of firebase -

Analytics Realtime Database Push Notification Authentication Firestore and many more...

In this article we use firebase authentication feature. Firebase provides many sign-in methods.

image-20200329220353563.png

We use Email/Password sign-in method in this article. In next part i will talk about social logins like Google, Facebook.

What is ionic?

Ionic is a open source SDK for develop high performance hybrid mobile apps and progressive web apps(PWA). It uses HTML5, CSS, JS technologies to develop apps & pwa's, sounds good, no? With that web technologies you can made powerfull and look and feel beautifull apps for any platform or device.

Why you should choose hybrid technologies over native apps? because if you develop a native app, for Android you have to use Java and for iOS you have to use Objective C or Swift, you have to develop seperately for each platform. That is very expensive and take lot of time. In that hybrid technologies you can use same codebase for different platforms like Android, iOS, Windows also you can list them on native app stores.

Steps

Create Firebase Project Create Ionic 5 app Connect Ionic app to Firebase Implementing Email/Password sign-in Implementing Forgot Password

Ok, let's start it.

Step 1 - Firebase Project

If you have used firebase before you can skip this step, for beginners follow below steps,

Go to Firebase Console Sign in with your google account Firebase dashboard should look like this

image-20200329221859778.png

Then click on **Add Project

image-20200329222039975.png

Enter name for the project and click Continue button, for this project i'm use authapp for project name

image-20200329222306396.png

In next step, disable Enable Google Analytics for this project and click on Create Project button, now go inside the project, it look like this,

image-20200329222706304.png

Now click on Authentication located on left side bar

image-20200329223406237.png

And click on Sign-in method tab on the top, then enable the Email/Password option

This step is done.

Step 2 - Create Ionic 5 app

To create ionic app, you have to install ionic-cli, nodejs, npm on your machine. If you havent setup those softwares, please follow this link before proceeding.

Let's create the project, open your terminal and cd to empty directory and enter the following command

ionic start auth-app blank

This will generate an blank starter ionic app on our directory, after project creation, run ionic serve to run in on browser.

Step 3 - Connect Ionic app to Firebase

First we need to generate firebase configuration for our app, to do this go to firebase console and follow the steps,

image-20200331212557750.png

Click on </> icon on the dashboard,

image-20200331212703640.png

Give a nickname and click on Register app button

After copy the below configuration part from the firebase,

// Your web app's Firebase configuration var firebaseConfig = { apiKey: "AIzaSyDkq5rm-**************************", authDomain: "*****************************", databaseURL: "***********************************", projectId: "************", storageBucket: "************************", messagingSenderId: "***********", appId: "************************************" };

Now open src/environments/environment.ts & src/environments/environment.prod.ts file and past the configuration just copied,

image-20200331213532176.png

To communicate with firebase and use firebase methods we use AngularFire2 package. Install package from npm

npm i firebase @angular/fire

Now we have to import Angular Fire Module to our app module, open src/app/app.module.ts ,

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router'; import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; // Angular Fire Module import { AngularFireModule } from '@angular/fire'; import { AngularFireAuthModule } from '@angular/fire/auth'; import { environment } from '../environments/environment'; @NgModule({ declarations: [AppComponent], entryComponents: [], imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, //Initializing Firebase App AngularFireModule.initializeApp(environment.firebaseConfig), AngularFireAuthModule ], providers: [ StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } ], bootstrap: [AppComponent] }) export class AppModule {}

Now our app able to communicate with firebase app, so we can now proceed to implement Email/Password sign-in.

Step 4 - Implementing Email/Password sign-in

For this we need two pages, one for Login other for Register, lets create both pages using ionic cli, run below commands on root of the project,

ionic g page Login

ionic g page Register

Now open login.page.html page and put below code.

<ion-header> <ion-toolbar> <ion-buttons slot="start"> <ion-back-button></ion-back-button> </ion-buttons> <ion-title>Login</ion-title> </ion-toolbar> </ion-header> <ion-content class="ion-padding"> <ion-item> <ion-label position="floating">Email</ion-label> <ion-input [(ngModel)]="email"></ion-input> </ion-item> <ion-item> <ion-label position="floating">Password</ion-label> <ion-input [(ngModel)]="password"></ion-input> </ion-item> <ion-button expand="block" class="ion-margin-vertical" (click)="login()">LOGIN</ion-button> <div class="ion-text-center"> Don't have an account? <span routerLink="/register" routerDirection="forward">Sign-up</span> </div> </ion-content>

It will looks like this,

Now open register.page.html and put below code,

<ion-header> <ion-toolbar> <ion-buttons slot="start"> <ion-back-button></ion-back-button> </ion-buttons> <ion-title>Register</ion-title> </ion-toolbar> </ion-header> <ion-content class="ion-padding"> <ion-item> <ion-label position="floating">Email</ion-label> <ion-input [(ngModel)]="email"></ion-input> </ion-item> <ion-item> <ion-label position="floating">Password</ion-label> <ion-input [(ngModel)]="password"></ion-input> </ion-item> <ion-button expand="block" class="ion-margin-vertical" (click)="register()">REGISTER</ion-button> <div class="ion-text-center"> Already have an account? <span routerLink="/login" routerDirection="backward">Sign-in</span> </div> </ion-content>

Now open login.page.ts and put below code

import { Component, OnInit } from '@angular/core'; import { AngularFireAuth } from '@angular/fire/auth'; import { Router } from '@angular/router'; import { AlertController } from '@ionic/angular'; @Component({ selector: 'app-login', templateUrl: './login.page.html', styleUrls: ['./login.page.scss'], }) export class LoginPage implements OnInit { email: any; password: any; constructor( private fireauth: AngularFireAuth, private router: Router, private alertCtrl: AlertController ) { } ngOnInit() { } login() { this.fireauth.auth.signInWithEmailAndPassword(this.email, this.password) .then((res) => { if (res.user) { // Login Success this.router.navigate(['home']); } }).catch((err) => { let msg = err.message; this.presentAlert("Error", msg); }) } async presentAlert(header, msg) { const alert = await this.alertCtrl.create({ header: header, message: msg, buttons: ['OK'] }); await alert.present(); } }

Now open register.page.ts

import { Component, OnInit } from '@angular/core'; import { AngularFireAuth } from '@angular/fire/auth'; import { Router } from '@angular/router'; import { AlertController } from '@ionic/angular'; @Component({ selector: 'app-register', templateUrl: './register.page.html', styleUrls: ['./register.page.scss'], }) export class RegisterPage implements OnInit { email: any; password: any; constructor( private fireauth: AngularFireAuth, private router: Router, private alertCtrl: AlertController ) { } ngOnInit() { } register() { this.fireauth.auth.createUserWithEmailAndPassword(this.email, this.password) .then((res) => { if (res.user) { // Register Success this.router.navigate(['home']); } }).catch((err) => { let msg = err.message; this.presentAlert("Error", msg); }) } async presentAlert(header, msg) { const alert = await this.alertCtrl.create({ header: header, message: msg, buttons: ['OK'] }); await alert.present(); } }

Now open home.page.html

<ion-header [translucent]="true"> <ion-toolbar> <ion-title> Home </ion-title> </ion-toolbar> </ion-header> <ion-content class="ion-padding"> <strong>Welcome</strong> <ion-button expand="block" class="ion-margin-vertical" (click)="logout()">LOG OUT</ion-button> </ion-content>

Now open home.page.ts

import { Component } from '@angular/core'; import { AngularFireAuth } from '@angular/fire/auth'; import { Router } from '@angular/router'; import { AlertController } from '@ionic/angular'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { constructor( private fireauth: AngularFireAuth, private router: Router, private alertCtrl: AlertController ) {} logout() { this.fireauth.auth.signOut() .then(() => { this.router.navigate(['login']); }) .catch((err) => { let msg = err.message; this.presentAlert("Failed", msg); }); } async presentAlert(header, msg) { const alert = await this.alertCtrl.create({ header: header, message: msg, buttons: ['OK'] }); await alert.present(); } }

Now open app-routing.module.ts, made changes like below

import { NgModule } from '@angular/core'; import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; const routes: Routes = [ { path: '', redirectTo: 'login', pathMatch: 'full' }, { path: 'home', loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)}, { path: 'login', loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule) }, { path: 'register', loadChildren: () => import('./register/register.module').then( m => m.RegisterPageModule) }, ]; @NgModule({ imports: [ RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) ], exports: [RouterModule] }) export class AppRoutingModule { }

Ok now we're done with firebase email sign-in & sign-out, now you can run the app by ionic serve and check our work, in future article i'll cover other more features of firebase auth, stay tuned.

Ionic වල පොඩි දෙයක් දැනගන්න ඕන.

Storage eke තියෙන ඩේටා ටිකක් API එකට pass කරලා. API response එකෙ එන ඩේටා ඇප් එකේ පාවිච්චි කරන්න ඕන. මම මේ පහල විදියට කරලා තියෙනවා. ඒ ක්‍රමය හරිද? එහෙමත් නැත්තම් ඒකෙ ගැටලු එන්න පුලුවන්ද කියන එක දැනගන්න ඕනි. // ex.service.ts async getOrdersStorage() { const data = await this.storageService.get('access_token'); const headers = new HttpHeaders({ Authorization: `${data.token_type} ${data.access_token}` }); return this.http.get(`${environment.apiUrl}/rider/pending/${data.business_id}/${data.user_id}`, { headers: headers }); } //ex.page.ts this.orderService.getOrdersStorage().then(response => { response.subscribe(res => { console.log(res); }); }); මම මේක ටැබ් ලේඅවුට් එකෙන් කරගෙන යන්නේ. යූසර් කෙනෙක් ලොග් වෙලා පලවෙනි ටැබ් එකට එනකොට උඩ තියෙන ෆන්ක්ශන් එක වැඩ කරන්න ඕන. ඒ එන ඩේටා විව් එකේ ඩිස්ප්ලේ වෙන්න ඔනා. ටැබ් මාරු වෙනකොට රීෆ්‍රෙශ් වෙන්න අවශ්‍ය නෑ. මෙකට වඩාත් සුදුසු ක්‍රමය මොකක්ද? ngOnInit() { this.samplefn(); } ionViewWillEnter() { this.samplefn(); } ionViewDidEnter() { this.samplefn(); }

ස්තූතියි.

Are you an experienced developer in Cordova development. Please send your CV to our email. (Portfolio of your recent projects will be an additional advantage) We will contact you.

Requirements
Expert knowledge in JavaScript ,HTMLand CSS
Experience of using Git (optional)
Problem solving and communication skills
Ability work within deadline is very important

Additional Qualifications
Php/Codeigniter/NodeJS knowledge

[email protected]

Hello, I want to emit a custom event on user login, how can I achieve this in framework7?

Please find the very first set of tutorials by me on Xamarin through this link. Please make sure to subscribe and like the channel. Also, do comment on the issues and improvements that are needed.

Made with ❤ in Sri Lanka

Link below...

Xamarin Tutotrial Part 6

Guys don't forget to comment subscribe and share... Mostly comments. Good or Bad they are most welcome! 🙂

Please find the very first set of tutorials by me on Xamarin through this link. Please make sure to subscribe and like the channel. Also, do comment on the issues and improvements that are needed.

Made with ❤ in Sri Lanka

Link below...

Xamarin Tutotrial Part 4 & 5

Guys don't forget to comment subscribe and share... Mostly comments. Good or Bad they are most welcome! 🙂

Please find the very first set of tutorials by me on Xamarin through this link. Please make sure to subscribe and like the channel. Also, do comment on the issues and improvements that are needed.

Made with ❤ in Sri Lanka

Link below...

Xamarin Tutorial Part 3

P/S : Would like to apologize for short video tutorials as I have limited time and creating good content with good quality takes time. Again please post any improvements needed.

Thanks.

Please find the very first set of tutorials by me on Xamarin through this link. Please make sure to subscribe and like the channel. Also, do comment on the issues and improvements that are needed.

Made with ❤ in Sri Lanka

Link below...

Xamarin Tutorial Part 2

Hello Guys and Girls,

Xamarin Image

Please find the very first tutorial by me on Xamarin through this link. Please make sure to subscribe and like the channel. Also, do comment on the issues and improvements that are needed.

Made with ❤ in Sri Lanka

Link below...

https://youtu.be/v7qHVGrydwk

0_1547220209312_start-using-ionic-00001.jpg

What is Ionic Framework

Ionic is a complete open-source SDK for hybrid mobile app development created by Max Lynch, Ben Sperry and Adam Bradley of Drifty Co. in 2013. The original version was released in 2013 and built on top of AngularJS and Apache Cordova. The more recent releases, known as Ionic 3 or simply "Ionic", are built on Angular. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging Cordova.

Installing Ionic

Ionic apps are created and developed primarily through the Ionic command line utility (the “CLI”), and use Cordova to build/deploy as a native app. This means we need to install a few utilities to get developing.

Installing Node and NPM

The quickest way to get Node and NPM installed on your machine is through the NodeJS installer. After installing open a terminal and run npm --version and node --version to verify you have everything installed correctly.

Installing Ionic CLI

Run below command on your terminal

$ npm install -g ionic cordova

Note: The -g means this is a global install, so for Windows you will need to open an Admin command prompt. For Mac/Linux, you might need to run the command with sudo.

Creating Ionic App

To create a blank app run below command

ionic start helloWorld blank

start will tell the CLI create a new app. helloWorld is the App name. blank is starter template

Along with the blank template, Ionic also provides the following official templates:

tabs : a simple 3 tab layout
sidemenu: a layout with a swipable menu on the side
blank: a bare starter with a single page
super: starter project with over 14 ready to use page designs
tutorial: a guided starter project

If you don’t specify a template at the start, you will be prompted to pick one.

Running our App

To run your app, cd into the directory that was created.

$ cd helloWorld
$ ionic serve

In the next article i'll go over the project structure created by the ionic start command

References

Official Ionic Framework Docs

Hello Guys and Girls,

A quick sneak peek on the voted Xamarin Development Tutorial. Spending my time creating content my self so even people who're not interested in dev will also be interested in coding. Please bare with me few more days. WIll promise to give quality content.

0_1547186403257_Screen Shot 2019-01-11 at 11.29.53.png

0_1547186385221_Screen Shot 2019-01-11 at 11.23.37.png

Thanks and have a great day! 🙂

Hi Guys and Girls,

I would like to start my very own Xamarin Mobile Dev tutorial session for you guys. I need to know which medium do you want it from Sinhala or English?

Thanks.