Ionic

Ionic and PouchDB

Cross-platform apps.
Powered by the Web.

This logo image consists only of simple geometric shapes or text. It does not meet the threshold of originality needed for copyright protection, and is therefore in the public domain.

Starting an app

$ npm install -g @ionic/cli

$ ionic start <name>

In this case we will create a todo Progressive Web Application (PWA)

$ ionic start haddley-todo

React

blank

Running

$ cd <name>

$ ionic serve

ionic serve

blank

Visual Studio Code

$ code .

Visual Studio Code

IndexDB

Modern browsers support IndexDB.

The Localbase package makes it easier to work with IndexDB.

$ npm install localbase --save

npm install localbase

localbase.d.ts

Localbases does not include typescript type definitions.

To workaround this issue create a localbase.d.ts file

localbase.d.ts

contents

localbase.d.ts

todos.ts

Create a TypeScript file that defines the "Todo" interface and uses Localbase to fetch, create and update todo items.

data/todos.ts

todos.ts

TodoListItem

A react component to display each todo item.

Created using Ionic Web Components {IonItem, IonCheckbox and IonLabel}

components/TodoListItem.tsx

TodoListItem

Home.tsx

The home page fetches todo items from browser's IndexDB using the getTodos() method defined in todos.ts.

The home page uses the setComplete(...) method to toggle the completed value.

The home page uses the addToDo(...) method to add a new todo item.

The home page uses Ionic Web Components to display a text box and a list of TodoListItems {IonButton, IonContent, IonHeader, IonInput, IonItem, IonList, IonPage, IonRefresher, IonRefresherContent, IonTitle and IonToolbar}.

The IonRefresher Web Component allows a user to refresh the list by swiping the list from top to bottom.

pages/Home.tsx

Home.tsx

Web Inspector (Safari)

pwa-asset-generator

The pwa-asset-generator can be used to generate a set of application icons from a single .jpg image

pwa-asset-generator

index.html

Update public/index.html to include the links

generated icons

manifest.json

The public/manifest.json file provides details of the web application.

Update the manifest.json file to reference the generated icons

default manifest.json

updated manifest.json

Update the application name.

public/manifest.json

Updated manifest.json

Service Worker

Service Worker allows the PWA to run offline.

Service Worker allows the PWA to upgrade while online.

index.tsx

serviceWorkerRegistration.register(...)

build

$ ionic build

ionic build

Deploy to Azure

Deploy to Static Website via Azure Storage...

Deploy to Static Website...

Create new Storage Account...

haddleytodo

Creating...

Deployment complete

Running in safari (from Azure)

Running on iPhone Simulator (Safari)

Add to Home Screen

Add

Icon on home screen

Running (online)

Updated version available

IonItemSliding

Add the IonItemSliding tag and the user is able to swipe an item from right to left to reveal a Delete option.

IonItemSliding

Swipe list item right to left

PouchDB

PouchDB is an open-source JavaScript database inspired by Apache CouchDB that is designed to run well within the browser.

PouchDB was created to help web developers build applications that work as well offline as they do online.

todos.ts

CouchDB

% docker run -p 5984:5984 -e COUCHDB_USER=admin -e COUCHDB_PASSWORD=password -d couchdb

% curl localhost:5984

http://localhost:5984/_utils/

The code below demonstrates how the todo application was updated to use PouchDB and CouchDB.