QRコードイベント登録アプリ

このチュートリアルでは、あなたの携帯電話にインストールすることができます簡単なPWAを作成する方法を示します.このPWAはQRコードを作成して読むことができます.このアプリでは、あなたの次のイベントのためのあなたのゲストのより多くのコントロールがあります!


このアプリでは、我々はあなたのイベントの登録アプリであるふりをするつもりです.
最後のコード
https://github.com/devpato/angular-pwa-qrcode
ライブアプリケーション
https://qr-app-79289.firebaseapp.com/
角度のアプリを作成しましょう!
1 )実行し、ルーティングを作成するように求められたら、「はい」をクリックします.次に、CSSプロセッサを選択するように依頼された場合、SCSSを選択します.

ng new qr-app

2)我々は我々の電話でアプリをインストールすることができますので、PWA(進歩的なWebアプリ)に我々のアプリを作成しましょう.プロジェクトの内部で、コマンドラインで実行します.

ng add @angular/pwa

3)登録コンポーネントを作成します.

ng g c registration

4 )スキャナコンポーネントを作成します.

ng g c scanner

5 )ゲストリストコンポーネントを作成します.

ng g c guest-list

6 )ゲストサービスを作成する.

ng g s guest

7 ) Navbarコンポーネントを作成する

ng g c navbar

8 )プロジェクトの内部に次のパッケージをインストールします.

//This is the package that scans QR codes
npm i @zxing/ngx-scanner

//This is the packages that generates QR codes
npm i ngx-qrcode2

//This is the package used to generate a random id for your users
npm i uuid

9 )あなたの索引に行きなさい.HTMLと私たちのアプリにいくつかのスタイルを与えるためにセマンティックUIのCDNを追加します.

<link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
      integrity="sha256-9mbkOfVho3ZPXfM7W8sV2SndrGDuh7wuyLjtsWeTI1Q="
      crossorigin="anonymous"
    />

10 )登録に移動します.コンポーネント.次に、次のコードをコピー/ペーストします.

import { FormBuilder } from "@angular/forms";
import { Validators } from "@angular/forms";
import { v4 as uuid } from "uuid";
import { GuestService } from "../guest.service";
import { Router } from "@angular/router";
.
.
.
export class RegistrationComponent implements OnInit {
  registrationForm = this.fb.group({
    firstName: ["", Validators.required],
    lastName: ["", Validators.required]
  });

  constructor(
    private fb: FormBuilder,
    private guestService: GuestService,
    private router: Router
  ) {}

  ngOnInit() {}

  onSubmit(): void {
    const guest = { ...this.registrationForm.value, id: uuid() };
    guest.qr = JSON.stringify(guest);
    this.guestService.addGuest(guest);
    this.registrationForm.reset();
    this.router.navigate(["/guests"]);
  }
}

11 )登録に移動します.コンポーネント.次にscssファイルを次のコードをコピー/ペーストします.

.registration {
  text-align: center;
  margin: 8px;
  &-form {
    form {
      display: flex;
      flex-direction: column;

      .field {
        margin: 8px;
      }
    }
  }
}

12 )登録に移動します.コンポーネント.次に、次のコードをコピー/ペーストします.次のコードは、QRコード内の情報となる新しいゲストを生成します.

<div class="registration">
  <h2>QR Code Registration App!</h2>
  <span>Please enter your information to register for the event.</span>
  <div class="registration-form">
    <form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
      <div class="ui left corner labeled input field">
        <input
          type="text"
          placeholder="Fist Name"
          formControlName="firstName"
        />
        <div class="ui left corner label">
          <i class="asterisk icon"></i>
        </div>
      </div>
      <div class="ui left corner labeled input field">
        <input type="text" placeholder="Last Name" formControlName="lastName" />
        <div class="ui left corner label">
          <i class="asterisk icon"></i>
        </div>
      </div>
      <button
        class="ui inverted orange button"
        type="submit"
        [disabled]="!registrationForm.valid"
      >
        Registration
      </button>
    </form>
  </div>
</div>

13 ) Navbarに移動します.コンポーネント.次に、次のコードをコピー/ペーストします.

<div class="ui three item menu">
  <a class="item" [routerLink]="['']">Registration</a>
  <a class="item" [routerLink]="['/scanner']">QR Scanner</a>
  <a class="item" [routerLink]="['/guests']">Guest</a>
</div>

14 )ゲストリストに移動します.コンポーネント.次に、次のコードをコピー/ペーストします.

import { GuestService } from "../guest.service";
.
.
.
guestList$ = this.guestService.guests$;
  elementType: "url" | "canvas" | "img" = "url";
  constructor(private guestService: GuestService) {}
ngOnInit() {}

15)ゲストリストに移動します.コンポーネント.次に、次のコードをコピー/ペーストします.

<div class="guest-list">
  <table class="ui celled table" *ngIf="guestList$ | async as guestList">
    <tbody>
      <tr *ngFor="let g of guestList">
        <td data-label="firstName">{{ g.firstName }}</td>
        <td data-label="lastName">{{ g.lastName }}</td>
        <td data-label="qr">
          <ngx-qrcode
            [qrc-element-type]="elementType"
            [qrc-value]="g.qr"
            class="qrcode"
          ></ngx-qrcode>
        </td>
      </tr>
    </tbody>
  </table>
</div>

16 )ゲストリストに移動します.コンポーネント.次にscssファイルを次のコードをコピー/ペーストします.

.qrcode {
  display: flex;
  justify-content: center;
}

17 )スキャナに移動します.コンポーネント.次に、次のコードをコピー/ペーストします.

import { Guest } from "../guest.model";
import { GuestService } from "../guest.service";
import { map } from "rxjs/operators";
.
.
.
availableDevices: MediaDeviceInfo[];
  currentDevice: MediaDeviceInfo = null;
  hasDevices: boolean;
  hasPermission: boolean;
  qrResult: Guest;
  guestExist: boolean;

  constructor(private guestService: GuestService) {}

  ngOnInit(): void {}

  //Clears the QR code scanned
  clearResult(): void {
    this.qrResult = null;
  }

  //Scans the QR code
  onCodeResult(resultString: string): void {
    this.guestExist = null;
    if (this.checkQRJSON(resultString)) {
      this.qrResult = JSON.parse(resultString);
      this.checkInGuest(this.qrResult);
      this.clearMessage();
    } else {
      this.guestExist = false;
      this.clearMessage();
    }
  }

  //Permission for the app to use the device camera
  onHasPermission(has: boolean): void {
    this.hasPermission = has;
  }

  //Checks if the QR code belongs to a valid guest
  checkInGuest(guestQR: Guest): void {
    this.guestService.guests$
      .pipe(
        map(guests =>
          guests.find((guest: Guest) => guest.id === guestQR.id)
        )
      )
      .subscribe(guest => {
        if (guest !== null && guest !== undefined) {
          this.guestExist = true;
        } else {
          this.guestExist = false;
        }
        this.clearResult();
        this.clearMessage();
      });
  }

  clearMessage() {
    setTimeout(() => {
      this.guestExist = null;
    }, 3000);
  }

  //This function check if the QR code has a valid JSON as data
  checkQRJSON(qrString: string): boolean {
    if (
      /^[\],:{}\s]*$/.test(
        qrString
          .replace(/\\["\\\/bfnrtu]/g, "@")
          .replace(
            /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,
            "]"
          )
          .replace(/(?:^|:|,)(?:\s*\[)+/g, "")
      )
    ) {
      return true;
    } else {
      return false;
    }
  }

18 )スキャナに移動します.コンポーネント.次に、次のコードをコピー/ペーストします.

<div class="qr-scan-area">
  <!-- This is the NPM package in-charge of scanning the QR -->
  <zxing-scanner
    #scanner
    [(device)]="currentDevice"
    (scanSuccess)="onCodeResult($event)"
    (permissionResponse)="onHasPermission($event)"
  ></zxing-scanner>
  <div class="qr-area">
    <div class="area"></div>
  </div>
</div>

<!-- Displays message on the screen if guest is valid or not -->
<div class="guest">
  <ng-container *ngIf="guestExist">
    <div class="ui success message">
      <i class="close icon"></i>
      <div class="header">
        Welcome!!
      </div>
      <p>Guest has been found on the guest lists</p>
    </div>
  </ng-container>
  <ng-container #notFound *ngIf="guestExist === false">
    <div class="ui negative message">
      <i class="close icon"></i>
      <div class="header">
        Warning!
      </div>
      <p>This person is not a guest!</p>
    </div>
  </ng-container>
</div>

19 )スキャナに移動します.コンポーネント.SCSSファイルを次のコードをコピー/ペーストします.このCSSでは、我々はスキャナを冷却するように赤の広場を描画しているが、それはスキャナが動作するために必要ではありません.

::ng-deep {
  .qr-scan-area {
    position: relative;
    zxing-scanner {
      max-width: 100%;
    }

    .qr-area {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      height: calc(100% - 50px);
      top: 0;
      width: 100%;
      .area {
        height: 200px;
        width: 200px;
        border: 2px solid red;
      }
    }
  }
}

20)アプリケーションフォルダの内部に、以下の名前を持つ新しいインターフェイスを作成します.モデル.TS
21)ゲストの中.モデル.TSコピー/ペーストします.

export interface Guest {
  id: string;
  firstName: string;
  lastName: string;
  qr?: string;
}

22 )以前に作成したゲストサービスに移動します.ゲスト.サービス次のコードは、インストールされたダミーデータを処理するコードだけでなく、ゲストの配列に作成されたすべての新しいゲストを追加するコードです.

import { Guest } from "./guest.model";
import { BehaviorSubject } from 'rxjs';
.
.
.
private guestSource = new BehaviorSubject<Guest[]>(null);
  guests$ = this.guestSource.asObservable();
  private guests = [
    {
      id: "7558e6e5-3cfa-4c24-b5b7-653ecbd49925",
      firstName: "Pato",
      lastName: "Vargas"
    },
    {
      id: "4847498c-b57f-4ceb-8c0c-8831b9972158",
      firstName: "Diego",
      lastName: "Maradona"
    }
  ];

  constructor() {
    this.populateQR();
    this.guestSource.next(this.guests);
  }

  populateQR(): void {
    this.guests.forEach((g: Guest) => (g.qr = JSON.stringify({ ...g })));
  }

  addGuest(newGuest: Guest): void {
    this.guests.push(newGuest);
    this.guestSource.next(this.guests);
  }

23あなたのアプリに移動します.モジュールです.次のモジュールをコードに追加します.

import { NgxQRCodeModule } from "ngx-qrcode2";
import { ZXingScannerModule } from "@zxing/ngx-scanner";
import { ReactiveFormsModule } from "@angular/forms";
.
.
.
imports: [
    BrowserModule,,
    AppRoutingModule,
    ServiceWorkerModule.register("ngsw-worker.js", {
      enabled: environment.production
    }),
    ReactiveFormsModule,
    ZXingScannerModule,
    NgxQRCodeModule
]

24)最後に、我々のアプリケーションのルートを作成する必要があります.次のコードをコピーして貼り付けます.

import { RegistrationComponent } from "./registration/registration.component";
import { GuestListComponent } from "./guest-list/guest-list.component";
import { ScannerComponent } from "./scanner/scanner.component";

const routes: Routes = [
  {
    path: "",
    component: RegistrationComponent
  },
  {
    path: "guests",
    component: GuestListComponent
  },
  {
    path: "scanner",
    component: ScannerComponent
  }
];

25あなたのアプリに移動します.コンポーネント.HTMLとそこにあるすべてを消去し、次のようにコピー/ペーストします.

<app-navbar></app-navbar>
<router-outlet></router-outlet>

26私たちのアプリをテストする時間.NGサーブでアプリケーションを実行してください.

時間は私たちの携帯電話でpwaを使用します。

1 )最初のラン

ng build --prod

2お好みのホスティングプロバイダにアプリケーションを展開します.私はFirebaseが好きです.展開するのはとても簡単です.(どうすればよいのかを表示するつもりはないので、Googleにお願いします).
3)あなたのアプリが展開されている場合は、お使いの携帯電話に移動し、アプリケーションに住んでいるURLに移動します.
一度アプリが開くと、それはあなたのホーム画面にあなたのアプリを追加する場合、それはあなたの質問になりますので、PWA;下記の写真のように.