Ionic(v5) でスマホから kintone 連携 (前編)

$ npx -p @ionic/cli ionic start ionicTest tabs

$ cd ionicTest
$ npm install --save-dev @ionic/cli

$ npx ionic serve

$ npx serverless create -t aws-nodejs -n わかりやすい名前

$ npm init
$ npm install --save-dev serverless
$ npm install --save aws-sdk
$ npm install --save @kintone/rest-api-client

$ npx sls plugin install -n serverless-offline

'use strict';

const { KintoneRestAPIClient } = require("@kintone/rest-api-client");

// (実際は、環境変数等を使うべき)
const SUBDOMAIN = あなたのkintone環境のサブドメイン(.cybozu.comの前の部分);
const APP_ID = kintoneアプリのID;
const API_TOKEN = APIトークン;


const client = new KintoneRestAPIClient({
  baseUrl: `https://${SUBDOMAIN}.cybozu.com`,
  auth: {
    apiToken: API_TOKEN
  }
});


const createResponse = (statusCode, data) => {
  return {
    statusCode,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Credentials": true,
      "Cache-Control": "no-cache"
    },
    body: JSON.stringify(data, null, 2),
  };
}

const handler = async (func) => {
  try {
    const data = await func();
    return createResponse(200, data);
  } catch (error) {
    console.log(error);
    return createResponse(500, { error: error.message });
  }
}


module.exports.getAllRecords = async () => {
  // 全レコードを取得
  return handler(async () => {
    const records = await client.record.getAllRecords({
      app: APP_ID
    });
    return { records };
  });
};

module.exports.getRecord = async (event) => {
  // 指定したレコードIDの一件を取得
  return handler(async () => {
    const recordId = event.queryStringParameters.id;
    const record = await client.record.getRecord( {
      app: APP_ID,
      id: recordId
    });
    return { record };
  })
};

module.exports.addRecord = async (event) => {
  // データ登録
  return handler(async () => {
    const body = event.body;
    const data = JSON.parse(body);

    const record = {
      name: { value: data.name },
      latitude: { value: data.latitude },
      longitude: { value: data.longitude },
    };

    return await client.record.addRecord({
      app: APP_ID,
      record
    });
  });
};

module.exports.updateRecord = async (event) => {
  // id, revision のデータを更新
  return handler(async () => {
    const body = event.body;
    const data = JSON.parse(body);

    const recordId = data.id;
    const revision = data.revision;
    const record = {
      name: { value: data.name },
      latitude: { value: data.latitude },
      longitude: { value: data.longitude },
    };

    return await client.record.updateRecord({
      app: APP_ID,
      id: recordId,
      revision,
      record
    });
  });
};

service: あなたが「serverless create」で付けた名前

provider:
  name: aws
  runtime: nodejs12.x

functions:
  get_all_records:
    handler: handler.getAllRecords
    events:
      - http:
          path: records
          method: get
          cors: true

  get_record:
    handler: handler.getRecord
    events:
      - http:
          path: record
          method: get
          cors: true

  add_record:
    handler: handler.addRecord
    events:
      - http:
          path: addRecord
          method: post
          cors: true

  update_record:
    handler: handler.updateRecord
    events:
      - http:
          path: updateRecord
          method: post
          cors: true

plugins:
  - serverless-offline

$ npx sls offline

$ npm install --save axios

$ npx ionic serve

    ...
    <ion-tab-button tab="tab1">
      <ion-icon name="list-outline"></ion-icon>
      <ion-label>一覧</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="add-circle"></ion-icon>
      <ion-label>登録</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="settings-sharp"></ion-icon>
      <ion-label>設定</ion-label>
    </ion-tab-button>
    ...

...
export class Tab3Page {

  private apiUrl: string;    ← apiUrl を追加

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      設定画面            ← Tab3 だったのを変更
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">設定画面</ion-title>     ← Tab3 だったのを変更
    </ion-toolbar>
  </ion-header>

  ↓ <app-explore-container>～は削除して、以下追加

  <ion-list>
    <ion-item>
      <ion-label>APIサーバーURL</ion-label>
      <ion-input [(ngModel)]="apiUrl"></ion-input>
    </ion-item>
  </ion-list>

  <ion-button expand="block" (click)="register()">登録</ion-button>
  ↑ ここまで
</ion-content>

import { Component, OnInit } from '@angular/core';   ← OnInit 追加
import { AlertController } from '@ionic/angular';   ← この行 追加
...
export class Tab3Page implements OnInit {    ← implements OnInit を追加

  constructor(private alertController: AlertController) {}    ← constructor()の引数に追加

  ↓ 以下追加

  /** 画面初期化イベント */
  ngOnInit() {
    try {
      this.apiUrl = localStorage.getItem('apiUrl');
    } catch (err)  {
      console.error(err);
    }
  }

  /** 登録ボタンクリック */
  async register() {
    try {
      localStorage.setItem('apiUrl', this.apiUrl);

      // メッセージダイアログの表示
      const alert = await this.alertController.create({
        message: '登録完了',
        buttons: ['OK']
      });

      await alert.present();

    } catch (err)  {
      console.error(err);
    }
  }

$ npx ionic generate service kintone

...
import { KintoneService } from 'src/app/kintone.service';       ← 追加
...
@NgModule({
  ...
  providers: [
    ...
    KintoneService,  ← 追加

...
export class KintoneService {

  private initalized: boolean;
  public apiUrl: string;

  constructor() {}

  async ready(): Promise {
    if (!this.initalized) {
      this.apiUrl = localStorage.getItem('apiUrl');
      this.initalized = true;
    }
  }

  async setParams(apiUrl: string): Promise {
    this.apiUrl = apiUrl;
    localStorage.setItem('apiUrl', apiUrl);
  }
}

import { KintoneService } from 'src/app/kintone.service';  ← 追加
...

  constructor(private alertController: AlertController,
              private kintone: KintoneService) {}   ← constructor()の引数に追加


  async ngOnInit() {   ← async 追加しました
    try {
      ↓ localStorage.getItem() ではなく、KintoneService の ready()を待ってから、apiUrl を取り出すようにしました。
      await this.kintone.ready();
      this.apiUrl = this.kintone.apiUrl;
    } catch (err) {
      ...

  async register() {
    try {
      await this.kintone.setParams(this.apiUrl);   ← localStorage.setItem() ではなく、kintone.setParams() に変更しました

      const alert = ...

...
import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'; ← 追加
...
export class KintoneService {
  ...
  private initalized: boolean;
  public apiUrl: string;
  private client: AxiosInstance;   ← 追加
  ...
  ↓ 追加
  private createClient(baseURL: string): AxiosInstance {
    return axios.create({
      baseURL,
      headers: {
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
      },
      responseType: 'json'
    });
  }
  ↑ ここまで
  ...
  async ready(): Promise {
    if (!this.initalized) {
      this.apiUrl = localStorage.getItem('apiUrl');
      this.client = this.createClient(this.apiUrl);    ← 追加
  ...
  async setParams(apiUrl: string): Promise {
    this.apiUrl = apiUrl;
    this.client = this.createClient(this.apiUrl);    ← 追加
  ...

  ↓ 以下追加

  async getAllRecords(): Promise<[]> {
    const data = await this.request('GET', 'records');
    return data.records;
  }

  private async request(method: 'POST'|'GET', path: string, data: {} = {}): Promise {
    const conf: AxiosRequestConfig = {
      url: path,
      method
    };
    if (method === 'POST') {
      conf.data = data;
    } else {
      conf.params = data;
    }
    const response = await this.client.request(conf);
    if (response.status === 200) {
      return response.data;
    } else {
      console.error(response);
      throw Error('request 失敗');
    }
  }
  ↑ ここまで

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      一覧             ← 修正
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">一覧</ion-title>       ← 修正
    </ion-toolbar>
  </ion-header>

  ↓ <app-explore-container>～は削除して、以下追加

  <ion-spinner *ngIf="loading"></ion-spinner>
  <ion-list *ngIf="records">
    <ion-item *ngFor="let r of records">
      <ion-label>
        <h3>{{ r.name.value }}</h3>
        <p>緯度:{{ r.latitude.value }} , 経度:{{ r.longitude.value }}</p>
      </ion-label>
    </ion-item>
  </ion-list>
  ↑ ここまで
</ion-content>

import { KintoneService } from 'src/app/kintone.service';   ← 追加
...
export class Tab1Page {

  loading: boolean;   ← 追加
  records: object[];   ← 追加

  constructor(private kintone: KintoneService) {}    ← constructor()の引数に追加

  ↓ 以下追加
  async ionViewWillEnter() {
    try {
      this.loading = true;
      this.records = null;
      await this.kintone.ready();
      this.records = await this.kintone.getAllRecords();
    } catch (err) {
      console.error(err);
    } finally {
      this.loading = false;
    }
  }
}

$ npx ionic serve --external

$ npx sls offline --host 0.0.0.0