Post Pingeon – Ionic 3 messenger app for iOS and Android based on Angular 5 and Firebase

Introduction

In this tutorial, we will be building a complete messenger app using Ionic 3, Angular 5, and Firebase. The app will allow users to send and receive messages, as well as share files and images. We will be using Firebase for authentication, real-time database, and storage.

The app will be built using the following technologies:

• Ionic 3: A popular framework for building hybrid mobile apps using web technologies such as HTML, CSS, and JavaScript.
• Angular 5: A JavaScript framework for building single-page applications.
• Firebase: A cloud-based platform for building web and mobile applications.

The app will have the following features:

• User authentication using Firebase Authentication
• Real-time messaging using Firebase Realtime Database
• File and image sharing using Firebase Storage
• User profiles and chat history

Step 1: Setting up the project

To start building the app, we need to set up a new Ionic project. Open a terminal and run the following command:

ionic start post-pigeon-starter blank --type=angular

This will create a new Ionic project with the name "post-pigeon-starter" using the Angular template.

Step 2: Installing dependencies

We need to install the following dependencies:

• Firebase Authentication
• Firebase Realtime Database
• Firebase Storage
• Ionic Firebase plugin

Run the following command to install the dependencies:

npm install firebase firebase-auth firebase-database firebase-storage ionic-firebase

Step 3: Configuring Firebase

To use Firebase in our app, we need to configure it. Create a new file called firebase.config.js in the root of our project and add the following code:

import * as firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';
import 'firebase/storage';

const config = {
  apiKey: '<API_KEY>',
  authDomain: '<AUTH_DOMAIN>',
  databaseURL: '<DATABASE_URL>',
  projectId: '<PROJECT_ID>',
  storageBucket: '<STORAGE_BUCKET>',
  messagingSenderId: '<MESSAGING_SENDER_ID>'
};

firebase.initializeApp(config);

Replace the <API_KEY>, <AUTH_DOMAIN>, <DATABASE_URL>, <PROJECT_ID>, <STORAGE_BUCKET>, and <MESSAGING_SENDER_ID> with your Firebase project's credentials.

Step 4: Creating the user interface

Create a new file called app.component.html in the src/app directory and add the following code:

<ion-header>
  <ion-navbar>
    <ion-title>Post Pigeon</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let message of messages">
      {{ message.text }}
    </ion-item>
  </ion-list>
  <ion-input [(ngModel)]="newMessage" placeholder="Type a message"></ion-input>
  <ion-button (click)="sendMessage()">Send</ion-button>
</ion-content>

This code creates a basic user interface with a list of messages, an input field for typing a message, and a send button.

Step 5: Creating the user service

Create a new file called user.service.ts in the src/app/services directory and add the following code:

import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase } from 'angularfire2/database';

@Injectable()
export class UserService {
  constructor(private afAuth: AngularFireAuth, private afDatabase: AngularFireDatabase) { }

  async login(email: string, password: string) {
    try {
      await this.afAuth.auth.signInWithEmailAndPassword(email, password);
    } catch (error) {
      console.error(error);
    }
  }

  async logout() {
    try {
      await this.afAuth.auth.signOut();
    } catch (error) {
      console.error(error);
    }
  }

  async sendMessage(text: string) {
    try {
      const message = {
        text,
        timestamp: Date.now()
      };
      await this.afDatabase.database.ref('messages').push(message);
    } catch (error) {
      console.error(error);
    }
  }

  async getMessages() {
    try {
      return await this.afDatabase.database.ref('messages').once('value');
    } catch (error) {
      console.error(error);
    }
  }
}

This code creates a user service that provides methods for logging in, logging out, sending a message, and getting the list of messages.

Step 6: Using the user service

Open the app.component.ts file and add the following code:

import { Component } from '@angular/core';
import { UserService } from './services/user.service';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  messages = [];
  newMessage = '';

  constructor(private userService: UserService) { }

  async ngOnInit() {
    this.messages = await this.userService.getMessages();
  }

  async sendMessage() {
    await this.userService.sendMessage(this.newMessage);
    this.newMessage = '';
  }
}

This code uses the user service to get the list of messages and send a new message.

Step 7: Adding authentication

To add authentication to our app, we need to create a new file called auth.component.html in the src/app directory and add the following code:

<ion-header>
  <ion-navbar>
    <ion-title>Post Pigeon</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let user of users">
      {{ user.email }}
    </ion-item>
  </ion-list>
  <ion-input [(ngModel)]="newEmail" placeholder="Email"></ion-input>
  <ion-input [(ngModel)]="newPassword" placeholder="Password"></ion-input>
  <ion-button (click)="login()">Login</ion-button>
  <ion-button (click)="register()">Register</ion-button>
</ion-content>

This code creates a basic authentication interface with a list of users, input fields for email and password, and login and register buttons.

Step 8: Creating the user profile

To create the user profile, we need to create a new file called user-profile.component.html in the src/app directory and add the following code:

<ion-header>
  <ion-navbar>
    <ion-title>Post Pigeon</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label>Email</ion-label>
      <ion-input [(ngModel)]="email"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Username</ion-label>
      <ion-input [(ngModel)]="username"></ion-input>
    </ion-item>
  </ion-list>
  <ion-button (click)="saveProfile()">Save</ion-button>
</ion-content>

This code creates a basic user profile interface with input fields for email and username, and a save button.

Step 9: Saving the user profile

To save the user profile, we need to create a new file called user-profile.component.ts in the src/app directory and add the following code:

import { Component } from '@angular/core';
import { UserService } from './services/user.service';

@Component({
  selector: 'app-user-profile',
  templateUrl: 'user-profile.component.html',
  styleUrls: ['user-profile.component.css']
})
export class UserProfileComponent {
  email = '';
  username = '';

  constructor(private userService: UserService) { }

  async saveProfile() {
    try {
      await this.userService.updateProfile(this.email, this.username);
    } catch (error) {
      console.error(error);
    }
  }
}

This code uses the user service to update the user profile.

Step 10: Adding file and image sharing

To add file and image sharing to our app, we need to create a new file called file-share.component.html in the src/app directory and add the following code:

<ion-header>
  <ion-navbar>
    <ion-title>Post Pigeon</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label>File</ion-label>
      <ion-input type="file" [(ngModel)]="file"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Image</ion-label>
      <ion-input type="file" [(ngModel)]="image"></ion-input>
    </ion-item>
  </ion-list>
  <ion-button (click)="shareFile()">Share File</ion-button>
  <ion-button (click)="shareImage()">Share Image</ion-button>
</ion-content>

This code creates a basic file and image sharing interface with input fields for file and image, and share buttons.

Step 11: Sharing files and images

To share files and images, we need to create a new file called file-share.component.ts in the src/app directory and add the following code:

import { Component } from '@angular/core';
import { UserService } from './services/user.service';
import { AngularFireStorage } from 'angularfire2/storage';

@Component({
  selector: 'app-file-share',
  templateUrl: 'file-share.component.html',
  styleUrls: ['file-share.component.css']
})
export class FileShareComponent {
  file = '';
  image = '';

  constructor(private userService: UserService, private storage: AngularFireStorage) { }

  async shareFile() {
    try {
      const fileRef = this.storage.ref('files/' + this.file.name);
      await fileRef.put(this.file);
    } catch (error) {
      console.error(error);
    }
  }

  async shareImage() {
    try {
      const imageRef = this.storage.ref('images/' + this.image.name);
      await imageRef.put(this.image);
    } catch (error) {
      console.error(error);
    }
  }
}

This code uses the user service and Firebase Storage to share files and images.

Conclusion

In this tutorial, we have built a complete messenger app using Ionic 3, Angular 5, and Firebase. The app allows users to send and receive messages, as well as share files and images. We have also added user authentication, user profiles, and file and image sharing to the app.