amad4biz / ionic2-nfc-app

Ionic 2 sample app using NFC

[OUTDATED] CROSS PLATFORM NFC

Presentation

An NFC Reader application based on ionic2 and TypeScript (ES6)

Screenshots

IDE

IntelliJ v15.0.3 or later is recommended for a better TypeScript support

Features

• JWT authentication
• Left menu
• Login
• Remember me (user saved in local storage)
• Scan an nfc tag
• Save a tag in local storage
• List all saved tags
• My account
• Language selection
• i18n application: French and english with dynamic reload
• Unit tests

Stack

• Angular v2
• Ionic Framework v2
• Webpack
• Karma
• Jasmine
• PhantomJS
• Angular translate v2

Project Structure

- app: Application files (TypeScript)
    -- app.ts: Ionic2 entry point
    -- classes: Common classes
    -- pages: Ionic views
        --- app.html
        --- login
            ---- login.ts
            ---- login.scss
            ---- login.html
        --- account
        --- nfc
        --- qr
        --- tags
    -- pipes: Angular2 @Pipe components
    -- utils: Utility classes
- www: Assets folder
    -- index.html: Entry point
    -- build (not in git repository): Production folder where sources are minified
    -- css
    -- i18n: 18n files
        --- en.json
        --- fr.json
    -- img: Images of the application
    -- js
    -- res
    -- spec: Unit tests folder
        --- mocks: Cordvoa api mocks
        --- src
- typings: TypeScript interfaces for libraries
    -- cordova
    -- jasmine
    -- lodash
    -- moment
	-- phonegap-nfc
- platforms (not in git repository): Installed platforms (android, ios, etc..) using ```$ionic add platform``` command
- reports (not in git repository): Unit tests reports
    -- junit (used by jenkins)
    -- html
- coverage (not in git repository): Coverage reports
    -- Format text, json ,html and cobertura (xml)
- doc (not in git repository): Generated TypeScript documentation
- node_modules (not in git repository): NPM dependencies
- plugins (not in git repository): Cordova plugins
    -- cordova-plugin-barcodescanner
    -- cordova-plugin-statusbar
    -- cordova-plugin-vibration
    -- phonegap-nfc
    -- cordova-plugin-whitelist
- ionic.config.js: Ionic configuration file
- spec-bundle.js: Used for unit tests only with Karma, webpack and ES6
- karma.conf.js: Karma configuration file for unit tests
- webpack.test.config.js: Build configuration file used for unit tests
- webpack.config.js: Build configuration file
- tsconfig.json: TypeScript configuration file
- tslint.json: TSLint configuration file
- typedoc.json: TypeDoc configuration file
- package.json: For managing npm dependencies
    -- Scripts: ```$ npm test``` for executing unit tests through karma
- config.xml: Phonegap configuration file
- resources: Icons and splash resources for every platforms

Installation

Install the node dependencies:

$ npm install

You need to install the ionic command in version 2:

$ npm install -g ionic@beta

You need to install the karma command:

$ npm install -g karma

You need to install the cordova command

$ npm install -g cordova

Typings

To search for typings :

$ typings search jasmine

To add a typing :

$ typings install jasmine --save --ambient

Files will be added to the typings folder.

# Execution on desktop
For starting the project on desktop:
```bash
$ ionic serve

Install the following cordova plugins

Always use cordova (not phonegap) to add a new plugin

$ cordova plugin add cordova-plugin-barcodescanner
$ cordova plugin add cordova-plugin-statusbar
$ cordova plugin add cordova-plugin-vibration
$ cordova plugin add cordova-plugin-whitelist
$ cordova plugin add phonegap-nfc

Edit the config.xml file and add the following entries:

<gap:plugin name="phonegap-nfc" source="npm" />
<gap:plugin name="cordova-plugin-statusbar" source="npm" />
<gap:plugin name="cordova-plugin-barcodescanner" source="npm" />
<gap:plugin name="cordova-plugin-whitelist" source="npm" />

Allow external links

To allow externals links such as mailto,tel,sms etc: Add allow intents in the config.xml files:

<allow-intent href="mailto:*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />

Execution on real Android device

• First you need to retrieve the android sdk, then run the android SDK manager and download the last android version
• Then you need to configure the ANDROID_HOME environment variable based on the location of your Android SDK folder.
• You have to add the android platform in ionic

$ ionic platform add android

• Plug in your device to your computer via USB
• Run:

$ ionic run android

• The application should be installed to your device and start automatically.
• If you've got a "wrong api version" error, then edit the config.xml file in the source project and change the android preference: android-minSdkVersion

TypeScript compilation in IntelliJ v older than 15.0.3

• First, read this link: https://www.jetbrains.com/idea/help/transpiling-typescript-to-javascript.html
• Basically you need to:
  • Install TypeScript via npm

  $ npm install -g typescript 

  • Download the typescriptServices.js, lib.d.ts, and lib.es6.d.ts files from https://github.com/Microsoft/TypeScript/.
  • Go to File -> Settings and click TypeScript under Languages & Frameworks
  • Set the NodeJS installation folder path
  • Select "Enable TypeScript Compiler"
  • Click "Edit" in the Compiler version area
  • In the Configure TypeScript Compiler dialog box that opens, choose Custom directory and specify the folder where the downloaded typescript files are stored
  • In the "Command line options" input, set this value: "--module "commonjs" --experimentalDecorators"
  • Click "Apply" then "OK"
• The TypeScript compiler should be set correctly.

TypeScript compilation in IntelliJ v 15.0.3 or later

• First, read this link: https://www.jetbrains.com/idea/help/transpiling-typescript-to-javascript.html
• Basically you need to:
  • Install TypeScript via npm

  $ npm install -g typescript 

  • Go to File -> Settings and click TypeScript under Languages & Frameworks
  • Set the NodeJS installation folder path
  • Select "Enable TypeScript Compiler"
  • Select "Use tconfig.json"
  • Click "Apply" then "OK"
• The TypeScript compiler should be set correctly.

Unit tests

Unit tests are using:

• Webpack (webpack.test.config.js)
• Karma (karma.conf.js)
• Jasmine Tests file are under www/spec folder with suffix .spec.ts

To run tests:

$ npm run test

Generate reports in junit and HTML.

To run test in browser mode, edit the karma.conf.js file and set 'singleRun' property to false

Quality code

TSLint checks TypeScript code for errors, readability and maintainability. tslint.json is the configuration file for TSLint To run TSLint:

$ npm run quality