Shubham Ankit

Shubham Ankit

1566442790

Using NoSQL PouchDB and SQLite with Ionic 4 & Angular: A CRUD Example

Originally published  at techiediaries.com on 23 Jun 2019

We will cover these points:

  • What is PouchDB?
  • How to create a new Ionic 4/Angular project using the Ionic CLI 5?
  • How to install the SQLite 2 Cordova plugin?
  • How to add the PouchDB library?
  • How to add the SQLite adapter for PouchDB?
  • How to create a database service for working with PouchDB?
  • How to create different pages for showing, creating, editing and deleting the database records?
  • Finally how to serve the app locally and using a real device?

This tutorial assumes you already have a development machine ready and setup with:

  • Node.js and NPM installed.
  • The Ionic CLI 5 installed.
  • Java and Android SDK tools installed in case you want to build your app for Android.
  • macOS and Xcode for building iOS apps.

So if you are ready! let's get started.

What's PouchDB?

PouchDB in an open source NoSQL (Not only SQL) browser database based on CouchDB. It's created for the sake of enabling developers to build offline first web applications i.e apps which are capable of working offline when there is no network connection, by storing data locally on the browser's databases such as the local storage or IndexedDB and also SQLite in case of mobile apps. And syncing data with a CouchDB server when the user is back online.

For Ionic 4, you can either use local storage, IndexedDB or SQLite. The first two options have storage limits but they are faster. For an unlimited storage on mobile devices, either Android or iOS, you can use SQLite.

PouchDB has many features. Let's see them briefly:

  • It's cross-browser: it works in all major browers such as Mozilla Firefox, Google Chrome, Opera, Apple Safari, Microsoft IE (and maybe Edge?) and Node.js platform.
  • It's lightweight: PouchDB is only 46KB in size, when gzipped. You can include it with a simple <script> tag in the browser, or install via npm in NodeJS.
  • It has a short learning curve: the PouchDB API is easy to learn and use.
  • It has syncing capabilities with a CouchDB server out of the box.

Create a New Ionic 4/Angular Project

Let's start by creating a new Ionic 4 project based on Angular, using Ionic CLI 5 (The latest version as of this writing). So go ahead and open the terminal on Mac/Linux or the command prompt in Windows the run the following command to generate a new project.

$ ionic start ionic-pouchdb-sqlite blank --type=angular

Wait for the project to setup the dependencies then navigate inside the root folder:

cd ionic-pouchdb-sqlite

Next, you need to add a bunch of dependencies for enabling PouchDB and SQLite to work.

Installing SQLite Cordova Plugin

On Ionic 4, the native SQLite database is the most adequate choice when it comes to storing data locally, because it allows you to have unlimited storage which is, unfortunately, not the case for localStorage or IndexedDB. Also SQLite is a file based and portable database.

You can add SQLite support to your Ionic 4 application using various Cordova plugins such as:

  • Cordova-sqlite-storage: The original Cordova plugin for SQLite.
  • cordova-plugin-sqlite-2: A fork of the previous plugin with extra features.

Let's install the fork with:

$ ionic cordova plugin add cordova-plugin-sqlite-2

Adding PouchDB

To be able to use PouchDB, you need to install a third party library available from npm:

$ npm install pouchdb --save

Adding PouchDB Cordova Adapter for SQLite

Next you’ll need to install another third part adapter to use SQLite with PouchDB

$ npm install pouchdb-adapter-cordova-sqlite --save

That’s all what you need to install in order to start using PouchDB with SQLite in your Ionic app. Now let’s start coding!

We will build a small application that allows you to do CRUD operations i.e create, read, update and delete employees data from a PouchDB + SQLIte database.

The application has many screens:

  • The employees screen which lists employees,
  • The screen to create an employee,
  • The screen to update an employee.

The Database Service

The first thing we need to create is the database service that connects to PouchDB and provides different methods to work with the employees database.

So go ahead and create a service provider using ionic g service <name>

Make sure you are inside the project’s root folder then run the following:

ionic g service employee

You should have an EmployeeService provider generated inside the src/app/employee.service.tsfile.

Next, add the following code:


import { Injectable } from ‘@angular/core’;

import * as PouchDB from ‘pouchdb’;
import cordovaSqlitePlugin from ‘pouchdb-adapter-cordova-sqlite’;

@Injectable({
providedIn: ‘root’
})
export class EmployeeService {
public pdb;
public employees;

createPouchDB() {
PouchDB.plugin(cordovaSqlitePlugin);
this.pdb = new PouchDB(‘employees.db’,
{ adapter: ‘cordova-sqlite’ });
}

}

This code will create a SQLite database file named employees.db and initialize the PouchDB database by setting the adapter to cordova-sqlite which instructs PouchDB to use SQLite for storage instead of the browser’s storage.

Make sure to import the provider into the src/app/app.module.ts file and add it to the providers array.

Also make sure to import the service provider and inject it in the constructor of any component before you can use it.

Now let’s add the CRUD methods:

create(employee) {
return this.pdb.post(employee);
}

This method creates a new employee in the database.

The post() method belongs to the PouchDB API and allows you to create new objects in the PouchDB database.

Next, we’ll add the update() method:

update(employee) {
return this.pdb.put(employee);
}

This method updates an existing employee in the database. Please note that you need to pass an employee object which has the id of the employee to update.

Next, we’ll add the delete() method:

delete(employee) {
return this.pdb.delete(employee);
}

This method deletes an employee from the database.

Finally, we’ll add the read() method:

read() {
function allDocs(){
this.pdb.allDocs({ include_docs: true})
.then(docs => {
this.employees = docs.rows.map(row => {
row.doc.Date = new Date(row.doc.Date);
return row.doc;
});

            return this.employees;
        });
      }

      this.pdb.changes({ live: true, since: 'now', include_docs: true})
                .on('change', ()=&gt;{
                    allDocs().then((emps)=&gt;{

                    this.employees = emps;
                    });
                });
    return allDocs();

}

The read() method simply gets all the employees from the database by invoking the .allDocs() method which returns a Promise that resolves to an array of all the employees in the database. The map() method maps the docs array to the docs.rows array which contains data only without PouchDB specific information which, obviously, we don’t need!

The code also converts row.doc.Date (stored as JSON) to JavaScript’ Date().

We are also listening for the changes of the PouchDB database so whenever there is a change (create, delete or update after we have retrieved all employees in the start), the function allDocs() gets called again for updating the employees array.

Note: Please note that this is not the most efficient way to update the employees array when any changes occur. In a production application, you can change this code to only update or delete the affected items not the full array.

Building App UI Screens

Now that we have created our service provider which takes care of connecting to PouchDB and SQLite and provides all CRUD methods to interface with the PouchDB database. Let’s create different pages that allow us to list and do operations on the employees database.

We already have a home page which lives in src/app/home. Open the home.page.html file update update it to show the list of employees using <ion-list>.

<ion-header>
<ion-navbar>
<ion-title>The Employees Database</ion-title>
<ion-buttons end>
<button ion-button (click)=“addEmployee()”>
<ion-icon name=“add”></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>

<ion-content padding>

&lt;ion-list&gt;
    &lt;ion-item *ngFor="let emp of employees" (click)="showDetails(employee)"&gt;
      &lt;div&gt;{{ emp.firstName }} {{emp.lastName}}&lt;/div&gt;
    &lt;/ion-item&gt;
  &lt;/ion-list&gt;

</ion-content>

Next, we need to add the code to get the employees in the src/home/home.page.ts file. So open the file then update as follows:

import { Component, , OnInit  } from ‘@angular/core’;
import { ModalController } from ‘ionic-angular’;
import { EmployeePage } from ‘./…/employee/employee.page.ts’;
import { EmployeeService } from ‘…/employee.service’;

@Component({
selector: ‘app-home’,
templateUrl: ‘home.page.html’,
styleUrls: [‘home.page.scss’]
})
export class HomePage implements OnInit {
public employees : [] = [];
constructor(public modalCtrl: ModalController, public employeeService : EmployeeService) {

}
ngOnInit() {

        this.employeeService.createPouchDB();

        this.employeeService.read()
            .then(employees =&gt; {
                this.employees = employees;
            })
            .catch((err)=&gt;{});

}

showDetails(employee) {
    let modal = this.modalCtrl.create(EmployeePage, { employee: employee });
    modal.present();
}  

}

Next we need to generate a new page for the employee details, so go ahead and run the following command in your terminal:

$ ionic g page employee

This will generate an employee folder inside app/. Open the src/app/employee/employee.page.htmland update it as follows:

<ion-header>

<ion-navbar>
<ion-title> Employee Details</ion-title>
<ion-buttons end *ngIf=“canDelete”>
<button ion-button (click)=“delete()”>
<ion-icon name=“trash”></ion-icon>
</button>
</ion-buttons>
</ion-navbar>

</ion-header>

<ion-content>
<ion-list>
<ion-item>
<ion-label>First Name</ion-label>
<ion-input text-right type=“text” [(ngModel)]=“employee.firstName”></ion-input>
</ion-item>
<ion-item>
<ion-label>Last Name</ion-label>
<ion-input text-right type=“text” [(ngModel)]=“employee.lastName”></ion-input>
</ion-item>
</ion-list>
<button ion-button block (click)=“addOrUpdate()”>Add/Update Employee</button>
</ion-content>

Next update the src/app/employee/employee.page.ts file as follows:

import { Component, OnInit } from ‘@angular/core’;
import { NavParams , ViewController } from ‘ionic-angular’;
import { EmployeeService } from ‘…/employee.service’;

@@Component({
selector: ‘app-employee’,
templateUrl: ‘employee.page.html’,
styleUrls: [‘employee.page.scss’]
})
export class EmployeePage implements OnInit {
employee: any = {};
canDelete : false;
canUpdate : false;
constructor(navParams: NavParams, private employeeService: EmployeeService) {

}
ngOnInit(){
var employee = this.navParams.get(‘employee’);
if(employee){
this.employee = employee;
this.canDelete = true;
this.canUpdate = true;
}
}

addOrUpdate() {


    if (this.canUpdate) {
        this.employeeService.update(this.employee)
            .catch(()=&gt;{});
    } else {
        this.employeeService.create(this.employee)
            .catch(()=&gt;{});
    }

    this.viewCtrl.dismiss(this.employee);
}

delete() {
    this.employeeService.delete(this.employee)
        .catch(()=&gt;{});

    this.viewCtrl.dismiss(this.employee);
}

}

Serving the App

We have finished our simple CRUD example with PouchDB and SQLite. Now you can serve your app locally for testing it. Go ahead and run the following command:

$ ionic serve

You can also plug your Android or iOS device to run the app on a real device instead of the browser.

$ ionic run ios
$ ionic run android

Conclusion

Throughout this tutorial, we have seen step by step how create an Ionic 4 and Angular mobile application from scratch using the Ionic CLI 5 and added the essential CRUD methods for creating, reading, updating and deleting items from a SQLIte database using PouchDB.

Originally published  at techiediaries.com on 23 Jun 2019

==========================================

Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Learn More

☞ Angular 8 (formerly Angular 2) - The Complete Guide

☞ Building CRUD Mobile App using Ionic 4, Angular 8

☞ How to Build Mobile Apps with Angular, Ionic 4, and Spring Boot

☞ Ionic 4 & Angular Tutorial For Beginners - Crash Course


☞ Angular & NodeJS - The MEAN Stack Guide

☞ The Complete Node.js Developer Course (3rd Edition)


#angular #ionic #web-development

What is GEEK

Buddha Community

Using NoSQL PouchDB and SQLite with Ionic 4 & Angular: A CRUD Example
Shubham Ankit

Shubham Ankit

1566442790

Using NoSQL PouchDB and SQLite with Ionic 4 & Angular: A CRUD Example

Originally published  at techiediaries.com on 23 Jun 2019

We will cover these points:

  • What is PouchDB?
  • How to create a new Ionic 4/Angular project using the Ionic CLI 5?
  • How to install the SQLite 2 Cordova plugin?
  • How to add the PouchDB library?
  • How to add the SQLite adapter for PouchDB?
  • How to create a database service for working with PouchDB?
  • How to create different pages for showing, creating, editing and deleting the database records?
  • Finally how to serve the app locally and using a real device?

This tutorial assumes you already have a development machine ready and setup with:

  • Node.js and NPM installed.
  • The Ionic CLI 5 installed.
  • Java and Android SDK tools installed in case you want to build your app for Android.
  • macOS and Xcode for building iOS apps.

So if you are ready! let's get started.

What's PouchDB?

PouchDB in an open source NoSQL (Not only SQL) browser database based on CouchDB. It's created for the sake of enabling developers to build offline first web applications i.e apps which are capable of working offline when there is no network connection, by storing data locally on the browser's databases such as the local storage or IndexedDB and also SQLite in case of mobile apps. And syncing data with a CouchDB server when the user is back online.

For Ionic 4, you can either use local storage, IndexedDB or SQLite. The first two options have storage limits but they are faster. For an unlimited storage on mobile devices, either Android or iOS, you can use SQLite.

PouchDB has many features. Let's see them briefly:

  • It's cross-browser: it works in all major browers such as Mozilla Firefox, Google Chrome, Opera, Apple Safari, Microsoft IE (and maybe Edge?) and Node.js platform.
  • It's lightweight: PouchDB is only 46KB in size, when gzipped. You can include it with a simple <script> tag in the browser, or install via npm in NodeJS.
  • It has a short learning curve: the PouchDB API is easy to learn and use.
  • It has syncing capabilities with a CouchDB server out of the box.

Create a New Ionic 4/Angular Project

Let's start by creating a new Ionic 4 project based on Angular, using Ionic CLI 5 (The latest version as of this writing). So go ahead and open the terminal on Mac/Linux or the command prompt in Windows the run the following command to generate a new project.

$ ionic start ionic-pouchdb-sqlite blank --type=angular

Wait for the project to setup the dependencies then navigate inside the root folder:

cd ionic-pouchdb-sqlite

Next, you need to add a bunch of dependencies for enabling PouchDB and SQLite to work.

Installing SQLite Cordova Plugin

On Ionic 4, the native SQLite database is the most adequate choice when it comes to storing data locally, because it allows you to have unlimited storage which is, unfortunately, not the case for localStorage or IndexedDB. Also SQLite is a file based and portable database.

You can add SQLite support to your Ionic 4 application using various Cordova plugins such as:

  • Cordova-sqlite-storage: The original Cordova plugin for SQLite.
  • cordova-plugin-sqlite-2: A fork of the previous plugin with extra features.

Let's install the fork with:

$ ionic cordova plugin add cordova-plugin-sqlite-2

Adding PouchDB

To be able to use PouchDB, you need to install a third party library available from npm:

$ npm install pouchdb --save

Adding PouchDB Cordova Adapter for SQLite

Next you’ll need to install another third part adapter to use SQLite with PouchDB

$ npm install pouchdb-adapter-cordova-sqlite --save

That’s all what you need to install in order to start using PouchDB with SQLite in your Ionic app. Now let’s start coding!

We will build a small application that allows you to do CRUD operations i.e create, read, update and delete employees data from a PouchDB + SQLIte database.

The application has many screens:

  • The employees screen which lists employees,
  • The screen to create an employee,
  • The screen to update an employee.

The Database Service

The first thing we need to create is the database service that connects to PouchDB and provides different methods to work with the employees database.

So go ahead and create a service provider using ionic g service <name>

Make sure you are inside the project’s root folder then run the following:

ionic g service employee

You should have an EmployeeService provider generated inside the src/app/employee.service.tsfile.

Next, add the following code:


import { Injectable } from ‘@angular/core’;

import * as PouchDB from ‘pouchdb’;
import cordovaSqlitePlugin from ‘pouchdb-adapter-cordova-sqlite’;

@Injectable({
providedIn: ‘root’
})
export class EmployeeService {
public pdb;
public employees;

createPouchDB() {
PouchDB.plugin(cordovaSqlitePlugin);
this.pdb = new PouchDB(‘employees.db’,
{ adapter: ‘cordova-sqlite’ });
}

}

This code will create a SQLite database file named employees.db and initialize the PouchDB database by setting the adapter to cordova-sqlite which instructs PouchDB to use SQLite for storage instead of the browser’s storage.

Make sure to import the provider into the src/app/app.module.ts file and add it to the providers array.

Also make sure to import the service provider and inject it in the constructor of any component before you can use it.

Now let’s add the CRUD methods:

create(employee) {
return this.pdb.post(employee);
}

This method creates a new employee in the database.

The post() method belongs to the PouchDB API and allows you to create new objects in the PouchDB database.

Next, we’ll add the update() method:

update(employee) {
return this.pdb.put(employee);
}

This method updates an existing employee in the database. Please note that you need to pass an employee object which has the id of the employee to update.

Next, we’ll add the delete() method:

delete(employee) {
return this.pdb.delete(employee);
}

This method deletes an employee from the database.

Finally, we’ll add the read() method:

read() {
function allDocs(){
this.pdb.allDocs({ include_docs: true})
.then(docs => {
this.employees = docs.rows.map(row => {
row.doc.Date = new Date(row.doc.Date);
return row.doc;
});

            return this.employees;
        });
      }

      this.pdb.changes({ live: true, since: 'now', include_docs: true})
                .on('change', ()=&gt;{
                    allDocs().then((emps)=&gt;{

                    this.employees = emps;
                    });
                });
    return allDocs();

}

The read() method simply gets all the employees from the database by invoking the .allDocs() method which returns a Promise that resolves to an array of all the employees in the database. The map() method maps the docs array to the docs.rows array which contains data only without PouchDB specific information which, obviously, we don’t need!

The code also converts row.doc.Date (stored as JSON) to JavaScript’ Date().

We are also listening for the changes of the PouchDB database so whenever there is a change (create, delete or update after we have retrieved all employees in the start), the function allDocs() gets called again for updating the employees array.

Note: Please note that this is not the most efficient way to update the employees array when any changes occur. In a production application, you can change this code to only update or delete the affected items not the full array.

Building App UI Screens

Now that we have created our service provider which takes care of connecting to PouchDB and SQLite and provides all CRUD methods to interface with the PouchDB database. Let’s create different pages that allow us to list and do operations on the employees database.

We already have a home page which lives in src/app/home. Open the home.page.html file update update it to show the list of employees using <ion-list>.

<ion-header>
<ion-navbar>
<ion-title>The Employees Database</ion-title>
<ion-buttons end>
<button ion-button (click)=“addEmployee()”>
<ion-icon name=“add”></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>

<ion-content padding>

&lt;ion-list&gt;
    &lt;ion-item *ngFor="let emp of employees" (click)="showDetails(employee)"&gt;
      &lt;div&gt;{{ emp.firstName }} {{emp.lastName}}&lt;/div&gt;
    &lt;/ion-item&gt;
  &lt;/ion-list&gt;

</ion-content>

Next, we need to add the code to get the employees in the src/home/home.page.ts file. So open the file then update as follows:

import { Component, , OnInit  } from ‘@angular/core’;
import { ModalController } from ‘ionic-angular’;
import { EmployeePage } from ‘./…/employee/employee.page.ts’;
import { EmployeeService } from ‘…/employee.service’;

@Component({
selector: ‘app-home’,
templateUrl: ‘home.page.html’,
styleUrls: [‘home.page.scss’]
})
export class HomePage implements OnInit {
public employees : [] = [];
constructor(public modalCtrl: ModalController, public employeeService : EmployeeService) {

}
ngOnInit() {

        this.employeeService.createPouchDB();

        this.employeeService.read()
            .then(employees =&gt; {
                this.employees = employees;
            })
            .catch((err)=&gt;{});

}

showDetails(employee) {
    let modal = this.modalCtrl.create(EmployeePage, { employee: employee });
    modal.present();
}  

}

Next we need to generate a new page for the employee details, so go ahead and run the following command in your terminal:

$ ionic g page employee

This will generate an employee folder inside app/. Open the src/app/employee/employee.page.htmland update it as follows:

<ion-header>

<ion-navbar>
<ion-title> Employee Details</ion-title>
<ion-buttons end *ngIf=“canDelete”>
<button ion-button (click)=“delete()”>
<ion-icon name=“trash”></ion-icon>
</button>
</ion-buttons>
</ion-navbar>

</ion-header>

<ion-content>
<ion-list>
<ion-item>
<ion-label>First Name</ion-label>
<ion-input text-right type=“text” [(ngModel)]=“employee.firstName”></ion-input>
</ion-item>
<ion-item>
<ion-label>Last Name</ion-label>
<ion-input text-right type=“text” [(ngModel)]=“employee.lastName”></ion-input>
</ion-item>
</ion-list>
<button ion-button block (click)=“addOrUpdate()”>Add/Update Employee</button>
</ion-content>

Next update the src/app/employee/employee.page.ts file as follows:

import { Component, OnInit } from ‘@angular/core’;
import { NavParams , ViewController } from ‘ionic-angular’;
import { EmployeeService } from ‘…/employee.service’;

@@Component({
selector: ‘app-employee’,
templateUrl: ‘employee.page.html’,
styleUrls: [‘employee.page.scss’]
})
export class EmployeePage implements OnInit {
employee: any = {};
canDelete : false;
canUpdate : false;
constructor(navParams: NavParams, private employeeService: EmployeeService) {

}
ngOnInit(){
var employee = this.navParams.get(‘employee’);
if(employee){
this.employee = employee;
this.canDelete = true;
this.canUpdate = true;
}
}

addOrUpdate() {


    if (this.canUpdate) {
        this.employeeService.update(this.employee)
            .catch(()=&gt;{});
    } else {
        this.employeeService.create(this.employee)
            .catch(()=&gt;{});
    }

    this.viewCtrl.dismiss(this.employee);
}

delete() {
    this.employeeService.delete(this.employee)
        .catch(()=&gt;{});

    this.viewCtrl.dismiss(this.employee);
}

}

Serving the App

We have finished our simple CRUD example with PouchDB and SQLite. Now you can serve your app locally for testing it. Go ahead and run the following command:

$ ionic serve

You can also plug your Android or iOS device to run the app on a real device instead of the browser.

$ ionic run ios
$ ionic run android

Conclusion

Throughout this tutorial, we have seen step by step how create an Ionic 4 and Angular mobile application from scratch using the Ionic CLI 5 and added the essential CRUD methods for creating, reading, updating and deleting items from a SQLIte database using PouchDB.

Originally published  at techiediaries.com on 23 Jun 2019

==========================================

Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Learn More

☞ Angular 8 (formerly Angular 2) - The Complete Guide

☞ Building CRUD Mobile App using Ionic 4, Angular 8

☞ How to Build Mobile Apps with Angular, Ionic 4, and Spring Boot

☞ Ionic 4 & Angular Tutorial For Beginners - Crash Course


☞ Angular & NodeJS - The MEAN Stack Guide

☞ The Complete Node.js Developer Course (3rd Edition)


#angular #ionic #web-development

Roberta  Ward

Roberta Ward

1595344320

Wondering how to upgrade your skills in the pandemic? Here's a simple way you can do it.

Corona Virus Pandemic has brought the world to a standstill.

Countries are on a major lockdown. Schools, colleges, theatres, gym, clubs, and all other public places are shut down, the country’s economy is suffering, human health is on stake, people are losing their jobs and nobody knows how worse it can get.

Since most of the places are on lockdown, and you are working from home or have enough time to nourish your skills, then you should use this time wisely! We always complain that we want some ‘time’ to learn and upgrade our knowledge but don’t get it due to our ‘busy schedules’. So, now is the time to make a ‘list of skills’ and learn and upgrade your skills at home!

And for the technology-loving people like us, Knoldus Techhub has already helped us a lot in doing it in a short span of time!

If you are still not aware of it, don’t worry as Georgia Byng has well said,

“No time is better than the present”

– Georgia Byng, a British children’s writer, illustrator, actress and film producer.

No matter if you are a developer (be it front-end or back-end) or a data scientisttester, or a DevOps person, or, a learner who has a keen interest in technology, Knoldus Techhub has brought it all for you under one common roof.

From technologies like Scala, spark, elastic-search to angular, go, machine learning, it has a total of 20 technologies with some recently added ones i.e. DAML, test automation, snowflake, and ionic.

How to upgrade your skills?

Every technology in Tech-hub has n number of templates. Once you click on any specific technology you’ll be able to see all the templates of that technology. Since these templates are downloadable, you need to provide your email to get the template downloadable link in your mail.

These templates helps you learn the practical implementation of a topic with so much of ease. Using these templates you can learn and kick-start your development in no time.

Apart from your learning, there are some out of the box templates, that can help provide the solution to your business problem that has all the basic dependencies/ implementations already plugged in. Tech hub names these templates as xlr8rs (pronounced as accelerators).

xlr8rs make your development real fast by just adding your core business logic to the template.

If you are looking for a template that’s not available, you can also request a template may be for learning or requesting for a solution to your business problem and tech-hub will connect with you to provide you the solution. Isn’t this helpful 🙂

Confused with which technology to start with?

To keep you updated, the Knoldus tech hub provides you with the information on the most trending technology and the most downloaded templates at present. This you’ll be informed and learn the one that’s most trending.

Since we believe:

“There’s always a scope of improvement“

If you still feel like it isn’t helping you in learning and development, you can provide your feedback in the feedback section in the bottom right corner of the website.

#ai #akka #akka-http #akka-streams #amazon ec2 #angular 6 #angular 9 #angular material #apache flink #apache kafka #apache spark #api testing #artificial intelligence #aws #aws services #big data and fast data #blockchain #css #daml #devops #elasticsearch #flink #functional programming #future #grpc #html #hybrid application development #ionic framework #java #java11 #kubernetes #lagom #microservices #ml # ai and data engineering #mlflow #mlops #mobile development #mongodb #non-blocking #nosql #play #play 2.4.x #play framework #python #react #reactive application #reactive architecture #reactive programming #rust #scala #scalatest #slick #software #spark #spring boot #sql #streaming #tech blogs #testing #user interface (ui) #web #web application #web designing #angular #coronavirus #daml #development #devops #elasticsearch #golang #ionic #java #kafka #knoldus #lagom #learn #machine learning #ml #pandemic #play framework #scala #skills #snowflake #spark streaming #techhub #technology #test automation #time management #upgrade

I am Developer

1611112146

Codeigniter 4 Autocomplete Textbox From Database using Typeahead JS - Tuts Make

Autocomplete textbox search from database in codeigniter 4 using jQuery Typeahead js. In this tutorial, you will learn how to implement an autocomplete search or textbox search with database using jquery typehead js example.

This tutorial will show you step by step how to implement autocomplete search from database in codeigniter 4 app using typeahead js.

Autocomplete Textbox Search using jQuery typeahead Js From Database in Codeigniter

  • Download Codeigniter Latest
  • Basic Configurations
  • Create Table in Database
  • Setup Database Credentials
  • Create Controller
  • Create View
  • Create Route
  • Start Development Server

https://www.tutsmake.com/codeigniter-4-autocomplete-textbox-from-database-using-typeahead-js/

#codeigniter 4 ajax autocomplete search #codeigniter 4 ajax autocomplete search from database #autocomplete textbox in jquery example using database in codeigniter #search data from database in codeigniter 4 using ajax #how to search and display data from database in codeigniter 4 using ajax #autocomplete in codeigniter 4 using typeahead js

Einar  Hintz

Einar Hintz

1594631472

Pros and Cons of Ionic Development

Entrepreneurs around the world want a top-notch mobile application for their business in both Android and iOS platforms. Most of them get stuck mid-way where they struggle to pick the best technology suitable for their business. From questions such as native mobile development or cross-platform development? Flutter or Ionic or React Native?. Each technology and development approach has its own Pros and Cons from which you will need to choose the right one for your business. If you think Ionic is the right cross-platform application development, here are a few pros and cons of Ionic development. 

What is Ionic Framework?

Being an open-source SDK for building Hybrid mobile applications in both Android and iOS platforms, Ionic is the best choice for building top of the line mobile applications. This Ionic framework is completely based on Apache Cordova and Angular. More precisely, Ionic is an npm module that requires the installation of Node JS to function.

One can build a full functioning mobile application in both platforms using their Javascript, HTML, and CSS knowledge without requiring the basics of Kotlin or Java. More than 5 Million mobile applications are built using this Ionic framework by leveraging its platform-specific UI elements, innumerable libraries, and more exciting features.

The applications that are built using the Ionic framework are cross-platform, web-based, and have access to native device’s APIs.

Ionic Applications are

  • Cross-platform – Single code base for both platforms (except native components)
  • Web-based – Built using web-views and can be displayed in a browser like PWAs.
  • Access to native API components – They can access native device’s camera, files, and others.

Advantages of Ionic Development

Quick Development and Time To Market

For entrepreneurs and business owners, ionic development can be beneficial if they want to develop a mobile application in both platforms in a short period of time while comparing to native applications. Building native applications specifically for each platform can be time-consuming which can imply a delay in time to market and development cost of native applications are generally expensive.

#mobile app development #ionic 4 advantages #ionic 4 best practices #ionic 5 #ionic appflow #ionic capacitor pros and cons #ionic vs react native #react native pros and cons #what is ionic app development

Laravel AJAX CRUD Example Tutorial

Hello Guys,

Today I will show you how to create laravel AJAX CRUD example tutorial. In this tutorial we are implements ajax crud operation in laravel. Also perform insert, update, delete operation using ajax in laravel 6 and also you can use this ajax crud operation in laravel 6, laravel 7. In ajax crud operation we display records in datatable.

Read More : Laravel AJAX CRUD Example Tutorial

https://www.techsolutionstuff.com/post/laravel-ajax-crud-example-tutorial


Read Also : Read Also : Laravel 6 CRUD Tutorial with Example

https://techsolutionstuff.com/post/laravel-6-crud-tutorial-with-example

#laravel ajax crud example tutorial #ajax crud example in laravel #laravel crud example #laravel crud example with ajax #laravel #php