https://github.com/yagolopez/gig-address-book

Address Book. GIG JavaScript Challenge
https://github.com/yagolopez/gig-address-book

address address-book angular ionic localstorage service-worker

Last synced: about 1 month ago
JSON representation

Address Book. GIG JavaScript Challenge

• Host: GitHub
• URL: https://github.com/yagolopez/gig-address-book
• Owner: YagoLopez
• Created: 2018-10-21T17:04:13.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-11-04T00:44:25.000Z (about 6 years ago)
• Last Synced: 2024-11-05T19:45:18.287Z (3 months ago)
• Topics: address, address-book, angular, ionic, localstorage, service-worker
• Language: HTML
• Size: 3.52 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Address Book

Gaming Innovation Group JavaScript Challenge.

By [Yago López Salvador](https://yagolopez.js.org)

## Features

- **Progressive Web Application** with offline capabilities enabled by a service worker. The service worker writes files to the *browser cache storage*. 

  - In Chrome, the cache can be showed at: Menu → More Tools → Developer Tools → Application Tab → Cache → Cache Storage

  - Visit the page and then **reload** it to write the files to the cache. 

  - Add an app icon to desktop/home screen from: Menu → More Tools → Developer Tools → Create Shorcut.

  - Disconnect from network

  - Next time the app should load the files from local cache storage

- FrontEnd Framework: **Ionic v3** (Based in Angular+)

- Responsive Layout

- Material Design

- Persistence in browser using **LocalStorage**

- Use of **LoDash** library for JavaScript collection management

- Supported browsers: Chrome, Firefox, Edge (modern versions).

- **Testing**: Ionci v3 does not provide infrastructure for testing by default (like Angular with Jasmine, Karma and Protractor). So Jest testing framework has been used

- Operations on data are logged to browser console

- Input data **validation**

## Demo

- [Link](https://yagolopez.js.org/gig-address-book/www/)

- QR Code:

  ![QR Code](qrcode.png)

## Requirements

- Node Package Manager (NPM)

## Installation

- Donwload and Unzip or clone de repository with git

- Change to project directory

- Run `npm install` to install dependencies

## Architecture and Functionality

- When the app is started, contacts collection is loaded in memory from Browser LocalStorage. If LocalStorage is empty, a dummy data is created programatically.

- When the app is running, operations on data are executed in memory

- When the app is closed, the contacts collection is persisted to Browser LocalStorage

- Use of **MVC Pattern** for separation of concerns

- Use of **Repository Pattern** to manage the contact collection using a *Contacts Repositoy Service*

- Use of **Singleton Pattern**. The *Contacts Repository Service* has only an instance in memory to share data between components.

- Use of **Inversion of Control Pattern** for code modularity and decoupling (*[SOLID principles](https://en.wikipedia.org/wiki/SOLID)*). The injection of dependencies is provided as infrastructure by the Angular Framework

- Use of **Component Pattern**. Ionic provides a library of premade UI components

- Use of a **Contact Model** to represent an **entity** from the model domain.

## Scripts

Run In the commnad line in project directory:

- List available scripts `npm run`

- Run Application: `npm run start`

- Test Application: `npm run test`

- Build Application: `npm run build`

- Build Application for Production: `npm run build:prod`

- Lint Application: `npm run lint`

- Create Coverage Report: `npm run coverage:create`

- Show Coverage: `npm run coverage:show`

  - [View coverage](https://yagolopez.js.org/gig-address-book/coverage/lcov-report/)

- Show Application Built in Browser: `npm run show:prod:app`

- Package Analysis: `npm run analyze:packages`

Back to top ↑