Gaming Innovation Group JavaScript Challenge.
- 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
-
QR Code:
- Node Package Manager (NPM)
- Donwload and Unzip or clone de repository with git
- Change to project directory
- Run
npm install
to install dependencies
- 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). 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.
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
- Show Application Built in Browser:
npm run show:prod:app
- Package Analysis:
npm run analyze:packages