Ionic XMPP Client and SQL-DB : PART 4

This is continuation of my previous article : Ionic XMPP chat Client using Strophe.js: Part 3.

So if you have any problem understanding, Please go through my previous articles in this series. This article will cover on how to implement a local database for saving the chat message. We are using WebSQL for browsers and cordova-sqlite-storage for native platforms.

You can download my complete project here :

Donwload

UPDATE:

For those who are interested in connecting this XMPP chat to a Remote server, follow this article :

HTML5 XMPP Client build in Ionic Cordova : PART 5

Configuring SQL

  1. Add the Ionic SQLite / Cordova SQLite plugin:
  2. Add ngCordova to your project. Download ngCordova. Copy the ng-cordova.min.js to www\lib\ngCordova\dist
    folder_view1
  3. Finally the lib folder contains all the libraries as follows.
    folder_view2
  4. Now add the libraries in the index.html.

  5.  Note: It’s very important to put the ng-cordova.min.js  before cordova.js.
  6. Now you need to create a SQL_DB  (if not exist) when the app opens. So add the database implementation code here:

Now the database is ready to use. Let us move on to building the application.

Building Application:

SQL SERVICE :

CHAT LOGS :

1

HTML:

CONTROLLER (chatlogsCtrl) :

CHAT MESSAGES:

3

HTML:

CONTROLLER (chatDetailsCtrl):

NOTE:

For Debugging Purpose, I use Google Chrome –> Developer Tools ( Ctrl + Shift + I )

  • You can use console readings for debugging.

chrome 2

  • You can view the WebSQL Database Created inside Chrome.

chrome