Skip to content
This repository has been archived by the owner on Nov 29, 2023. It is now read-only.

meumobi/infomobi

BranchesTags

Repository files navigation

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

  • Shared module
  • Lazy loading / Deep-linking
  • Unit and e2e tests
  • Continuous integration

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

PWA on desktop

Desktop progressive web apps can be 'installed' on the users device much like native apps. They're fast. Feel integrated because they launched in the same way as other apps, and run in an app window, without an address bar or tabs. They're reliable because service workers can cache all of the assets they need to run. And they create an engaging experience for users.

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

  • Live feed display a list of comments
  • Comments are posted by App users directly on live feed or as comment of a post.
  • Comments of post could be promoted to live feed by admin.
  • A comment include:
    • description
    • (picture|media ???)
    • (link)
    • (postId) // when from post
  • When promoted, comment include a link (label + url) to post source
    • should be improved, at the moment we add a itemId property on comment (same value of postId from original comment but rename it to not fetch the comment on post). Unique way we've find to preserve the navigationHistory and transition but not represent a generic solution for external links.
  • Each comment could be deleted by its owner and admin.
  • Each user is defined by:
    • first_name
    • last_name
    • (picture)
    • email
  • Admin can respond by email to a comment
  • Comments could be published = {true|false} by admin
  • By default all comments.published == true if admin
    • default commment.published if user should be customizable by app
  • Admin can filter comments by published property
  • Admin can toggle published property
  • User can react once to comment by Like/Clap, and discard its reaction
  • User should be notified by a visual marker when new post is available since its last view.
  • When promoted the comment is copied to appear o live feed
    • comment's post have a postId propery to identify them
  • Add actions on left side of sliding-item: promote, remove, hide/show
    • should be improved, at the moment it's the best solution to not conflict with swipeable tabs. Another option could be a 3 dots button to show actions menu (like youtube).

Image optimization

https://imageresizing.net/docs/basics

User authentication and restricted access

  • save user token on login
  • On bootstrap load userAuth (auto-login)
    • set X-Visitor-token for meumobi api calls on httpInterceptor
    • if userAuth missing redirect to /login (=>prevent access if not logged)
  • If meumobi api call return a 401 (Unauthorized) redirect to login
    • done using httpInterceptor and Observable (logout)

@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

About

Ionic2 Employee App

Resources

Readme
Activity
Custom properties

Stars

3 stars

Watchers

3 watching

Forks

2 forks
Report repository

Releases

12 tags

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages