search

meumobi / infomobi

Ionic2 Employee App
3 stars 2 forks source link

readme

meu.starter.ionic-v3

Conventional Commits Travis CI badge Greenkeeper badge

Introduction

Full app for commnunication within restricted access.

Build project

Build with env argument

Repository has a default env config src/environments/environment.ts, you should create an own to your target env, for example for prod src/environments/environment.prod.ts and run:

$ ionic build --env=prod

// "Using PROD environment variables for DEV build." ("DEV build" is defined by Ionic and means not optimized for production).

$ npm ionic:build --prod --env=prod

// "Using PROD environment variables for PROD build."

Coding best practices

Features

Technical features

Features

PWA

Are PWAs really taking off? With all these native-like capabilities, PWAs are here to stay! Here are some reasons why now is the best time to learn them:

Ionic 3 applications included a service worker by default, [sw-toolbox](https://github.com/GoogleChromeLabs/sw-toolbox, that you could simply uncomment to activate. But this project is deprecated and replaced by workbox. Google provides documentation to migrate from sw-toolbox to workbox.

Since Angular 5 the support for building Progressive Web Applications (PWA) with Service Workers has been build into the framework. Angular provides a package and command line tooling that makes it extremely easy to add PWA support to your Ionic/Angular applications with service workers.

Show toast when new version available

we always serve the latest cached version (to show it almost immediately). At the same time, service worker checks if there is a newer version of the app shell. If yes, we download and cache this version to use it for the next application run. Also, we might want to ask the user if they want to reload the current tab with the application right now. PWA: Create a “New Update Available” Notification using Service Workers

On ionic-team/ionic-pwa-toolkit they are doing it, with workbox, using this bit of code (via onstatechange EventListener) for registering the service worker and then listening to that event in one of components and then just showing a toast based on that.

  @Listen('window:swUpdate')
  async onSWUpdate() {
    const toast = await this.toastCtrl.create({
      message: 'New version available',
      showCloseButton: true,
      closeButtonText: 'Reload'
    });
    await toast.present();
    await toast.onWillDismiss();
    window.location.reload();
  }

Furthermore

Desktop Progressive Web App support is available on Chrome OS 67 (currently beta), but work is underway to support Mac and Windows. To experiment with desktop progressive web apps in Chrome an other operating systems, enable the #enable-desktop-pwas flag (chrome://flags/).

See also https://www.xda-developers.com/progressive-web-apps-chrome-how-to/

Web Push

https://documentation.onesignal.com/docs/web-push-typical-setup

Live feed

Image optimization

https://imageresizing.net/docs/basics

User authentication and restricted access

@Injectable() export class AuthService {

public $logged = new Subject();

constructor() { }

}

httpInterceptor: if 401 then AuthService.$logged.next()

import { Storage } from '@ionic/storage'; this.storage.{get|set}('userAuth, response)

export class AppComponent implements OnInit, OnDestroy {

private authObserver: Subscription;

ngOnInit() { this.authState = AuthService.authState; this.authObserver = this.authState.subscribe((user: userAuth) => { if(!user) logout }) }

ngOnDestroy() { if (this.authObserver) { this.authObserver.unsubscribe(); } } }

Http-interceptors

Angular app w/ user authentication

https://scotch.io/tutorials/build-an-ionic-app-with-user-authentication http://jasonwatmore.com/post/2014/05/26/angularjs-basic-http-authentication-example https://devdactic.com/ionic-auth-guards/

Image gallery

The Ionic image gallery is a classic pattern used in many applications which need to display any kind of grid with pictures or photos. For the image gallery. We can make use of the ion-slides component, and the Riron/ionic-img-viewer component which helps us to display a selected picture in fullscreen with zooming options.

Multi-language

ngx-translate is an internationalization library for Angular 2+. It lets you define translations for your content in different languages and switch between them easily. We've followed

Ionic v3 is compatible with @ngx-translate/http-loader@2.0.1 and @ngx-translate/core@9.1.1, upper versions require angular 6. Check breaking changes on changelog of these projects for more details.

Should save selected language on App, and load it when launch.

For unit testing we've tried implementation based on example providing from ngx-translate repo, but it was not successful. An extensive thread about unit testing take place on github repo of the project.

Handle dates and time with ngx-moment

ngx-moment provides moment.js pipes for Angular.

Inspiration

Furthermore