[morse]Ionic 檢查設備硬件功能是否已啟用或對應用程序可用

Install
    ionic cordova plugin add cordova.plugins.diagnostic
    npm install @ionic-native/diagnostic



Example 1:

import { Diagnostic } from '@ionic-native/diagnostic/ngx';
constructor(private diagnostic: Diagnostic) { }
...
let successCallback = (isAvailable) => { console.log('Is available? ' + isAvailable); }
let errorCallback = (e) => console.error(e);
this.diagnostic.isCameraAvailable().then(successCallback).catch(errorCallback);
this.diagnostic.isBluetoothAvailable().then(successCallback, errorCallback);

this.diagnostic.getBluetoothState()
.then((state) => {
    if (state == this.diagnostic.bluetoothState.POWERED_ON){
    // do something
    } else {
    // do something else
    }
}).catch(e => console.error(e));

Example 2:

app.module.ts

import { Diagnostic } from '@ionic-native/diagnostic/ngx';

@NgModule({

  providers: [

    Diagnostic

  ]

})

xxx.page.ts

  import { Diagnostic } from '@ionic-native/diagnostic/ngx';

  constructor(private _diagnostic: Diagnostic) { }

  

  Gpsstart() {

    // 檢查GPS

    this._diagnostic.isGpsLocationEnabled().then(

      (OnSuccess) => {

        if (OnSuccess){

          alert('GPS 開啟中');          

          this.showWatch();  

        }

        else{

          alert('GPS 沒開啟!');

          // 進入 GPS 啟用設定畫面

          this._diagnostic.switchToLocationSettings();  

        }

      },

      (OnFail) => {

        alert('GPS 檢查時出現錯誤!');

        this._totast.presentToastWithOptions('GPS 檢查時出現錯誤! '+ OnFail.message);

        //cordova.plugins.diagnostic.switchToLocationSettings();

      }

    ).catch(

      (OnError) => {

        this._totast.presentToastWithOptions('Catch error: ' + OnError.message);

      }

    );    

  }

  

  gpsWatch() {

    this.watchPosition = undefined;

    const options = {

      enableHighAccuracy: true,

      timeout: 5000,

      maximumAge: 0

    };

    this.gpsWatchId = this._geolocation.watchPosition(options).subscribe(

      (p) => {

        if (p) {

          this.watchPosition = p;

        }

        //alert(p.coords.latitude);

      },

      error => {

        // console.log('GPS Watch fail!');

        // console.error(error);

        // this._totast.presentToastWithOptions(error.message);

        alert(error.message);

      }

    );

  }

referance :

如何檢查是否啟用了gps

https://stackoverflow.com/questions/35304103/phonegap-how-to-check-if-gps-is-enabled

診斷-檢查設備硬件功能是否已啟用或對應用程序可用，例如相機，GPS，WiFi

https://ionicframework.com/docs/native/diagnostic

[morse]Using WifiWizard2 with Ionic

安裝WifiWizrd2插件
ionic cordova plugin add wifiwizard2



 home.page.html

< ion-header>
  < ion-toolbar>
    < ion-title>
     List Wifi AP
    < /ion-title>
  < /ion-toolbar>
< /ion-header>

< ion-content padding>

    < ion-button color="primary" (click)="getNetworks()">Get Networks< /ion-button>
    {{info_txt}}
    < ion-list>
        < ion-item *ngFor="let data of results">
            {{data.SSID}} -
            {{data.BSSID}}
        < /ion-item>
      < /ion-list>
< /ion-content>

 home.page.ts

import { Component } from '@angular/core';

declare var WifiWizard2: any;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  results = [];
  info_txt = "";
  async getNetworks() {
    this.info_txt = "loading...";
    try {
      let results = await WifiWizard2.scan();
      this.results = results;
      this.info_txt = "";
    } catch (error) {
      this.info_txt = error;
    }
  }
}

注意: 需在模擬器或手機上才能試出效果。

[morse]使用Cordova插件和Ionic Native

在開發使用 Capacitor 的應用程序時，可以同時使用 Cordova 和 Ionic Native 插件。

安裝 Cordova 插件

只需安裝所選插件，同步項目，完成所有必需的本機項目配置，即可開始：

npm install cordova-plugin-name
npx cap sync

更新 Cordova 插件

與安裝步驟相似。只需將cordova插件更新為最新版本，然後Capacitor即可獲取更改：

npm install cordova-plugin-name@latest
npx cap update

如果你不想冒險引進重大更改，使用npm update cordova-plugin-name，而不是@latest作為update方面semver。

安裝 Ionic 本機插件

Ionic Native提供TypeScript包裝器以及一致的API和命名約定，以使Cordova插件的開發更加輕鬆。Capacitor支持此功能，因此，只要找到要使用的Ionic Native包裝器，就安裝JavaScript代碼，安裝相應的Cordova插件，然後同步項目：

npm install @ionic-native/javascript-package-name
npm install cordova-plugin-name
npx cap sync

更新 Ionic 本機插件

類似於安裝步驟。更新Ionic Native JavaScript庫，刪除然後重新添加Cordova插件，然後更新您的項目：

npm install @ionic-native/javascript-package-name@latest
npm install cordova-plugin-name@latest
npx cap update

如果您不想冒險進行重大更改，請使用npm update cordova-plugin-name代替@latest。

重要說明：配置

Capacitor不支持Cordova安裝變量，自動配置或掛鉤，這是因為我們的理念是讓您控製本機項目源代碼（這意味著不需要掛鉤）。如果您的插件需要設置變量或設置，則需要通過plugin.xml在iOS和Android上的插件設置和必需設置之間進行映射來手動應用這些配置設置。

諮詢 的iOS 和 安卓系統 配置指南，以獲取有關如何配置每個平台的信息。

相容性問題

某些Cordova插件不適用於Capacitor，或者Capacitor提供了相互衝突的替代方案。有關詳細信息和已知的不兼容列表，請參見此處。

[morse]Capacitor 構建一個 Ionic Framework Camera 應用程序

Web框架：Ionic 4 + Angular

平台：Web，iOS，Android

通過Capacitor，可以輕鬆構建可在iOS，Android，台式機和Web上本地運行的Web應用程序。在本指南中，我們會將相機功能添加到可在Web，iOS和Android上運行的Ionic Angular應用中。準備使用一個JavaScript方法調用來捕獲照片嗎？讓我們開始吧。

所需的依存關係

構建和部署iOS和Android應用程序需要其他依賴項，包括iOS和Android設備。請按照此處的說明進行操作 在繼續之前。

準備一個離子應用程序

如果您有現有的Ionic應用程序，請跳過此部分。如果沒有，讓我們先創建一個Ionic應用程序。在終端中，安裝Ionic（這也會更新為Ionic的最新版本）：

npm install -g ionic

接下來，基於“ tabs”啟動程序項目創建一個新的Ionic應用程序，並同樣安裝Capacitor：

ionic start capApp tabs --capacitor

接下來，使用您的應用程序信息初始化電容器。

npx cap init

應用名稱： CapApp
應用包ID： com.example.capapp

添加電容器：現有的離子項目

電容器的設計可插入任何現有的現代JavaScript網絡應用程序-包括Ionic！如果您在--capacitor上面創建Ionic項目時沒有添加標誌，或者有現有的Ionic項目，則沒問題。運行以下命令：

cd capApp
ionic integrations enable capacitor

接下來，使用您的應用程序信息初始化電容器。

npx cap init

應用名稱： CapApp
應用包ID： com.example.capapp

一次構建應用

在向該項目添加任何本機平台之前，必須至少構建一次該應用程序。Web構建會創建Capacitor需要的Web資產目錄（wwwIonic項目中的文件夾）：

ionic build

接下來，添加您要為其構建的所有平台（當然，除了網絡之外）：

npx cap add ios
npx cap add android

運行這些命令後，將在項目根目錄下創建android和ios文件夾。這些是完全獨立的本機項目工件，應將其視為Ionic應用程序的一部分（即，將其檢入源代碼控制中）。

添加相機功能

接下來，我們將添加使用Capacitor Camera API使用設備的相機拍攝照片的功能。

首先，打開src/app/tab2文件夾下的Tab2 HTML頁面。添加一個圖像標籤，以顯示使用相機拍攝的當前照片，並添加一個Ionic fab按鈕，單擊該按鈕將打開相機：

<ion-content>
  <img [src]="photo" >

  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button (click)="takePicture()">
      <ion-icon name="camera"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>

接下來，我們需要添加將為相機功能提供動力的邏輯。打開src/app/tab2/tab2.page.ts並導入電容器插件和相機類：

import { Plugins, CameraResultType, CameraSource } from '@capacitor/core';

接下來，實現takePicture()方法：

export class Tab2Page {
  async takePicture() {
    const image = await Plugins.Camera.getPhoto({
      quality: 100,
      allowEditing: false,
      resultType: CameraResultType.DataUrl,
      source: CameraSource.Camera
    });

    this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
  }
}

注意這裡的魔力：這裡沒有提到iOS或Android！只有一個方法調用-- Camera.getPhoto()將打開設備的相機並允許我們拍照。

接下來，我們需要告訴Angular信任動態圖像數據。為此，請DomSanitizer通過構造函數注入並用於sanitizer.bypassSecurityTrustResourceUrl()允許將圖像數據顯示在我們的應用程序中：

import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

export class Tab2Page {
  photo: SafeResourceUrl;

  constructor(private sanitizer: DomSanitizer) {  }
}

這是完整的Camera實施：

import { Component } from '@angular/core';
import { Plugins, CameraResultType, CameraSource } from '@capacitor/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-tab2',
  templateUrl: 'tab2.page.html',
  styleUrls: ['tab2.page.scss']
})
export class Tab2Page {
  photo: SafeResourceUrl;

  constructor(private sanitizer: DomSanitizer) {  }

  async takePicture() {
    const image = await Plugins.Camera.getPhoto({
      quality: 100,
      allowEditing: false,
      resultType: CameraResultType.DataUrl,
      source: CameraSource.Camera
    });

    this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
  }
}

讓我們在瀏覽器中嘗試一下：

ionic serve

打開開發人員工具，然後選擇Console選項卡。然後，導航至選項卡2，然後單擊新創建的Camera fab按鈕。控制台中出現錯誤：

ERROR Error: Uncaught (in promise): TypeError: cameraModal.present is not a function

一些電容器插件（包括相機）通過Ionic PWA Elements庫提供基於Web的功能和UI 。這是一個獨立的依賴項，因此請使用終端安裝（取消ionic serve當前首先運行的命令）：

npm install @ionic/pwa-elements

@ionic/pwa-elements通過編輯導入src/main.ts：

import { defineCustomElements } from '@ionic/pwa-elements/loader';

// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);

現在已正確配置了該配置，重新運行ionic serve並單擊Camera fab按鈕。如果您的計算機有任何類型的網絡攝像頭，則會顯示一個模態窗口，您可以拍照！

 “我很帥。” - 作者

接下來，讓我們在iOS和Android上運行此應用。

的iOS

電容式iOS應用通過Xcode進行配置和管理，依賴性由CocoaPods管理。在iOS設備上運行此應用之前，需要完成幾個步驟。

從終端運行Capacitor copy命令，該命令將所有Web資產（在這種情況下為Ionic Angular應用程序）複製到本地iOS項目中：

npx cap copy

注意：對代碼的本機部分進行更新（例如添加新插件）後，請使用以下sync命令：

npx cap sync

接下來，運行Capacitor open命令，以Xcode打開本機iOS項目：

npx cap open ios

在Xcode中，App在左側的Project Navigator中單擊，然後在該Signing部分中，選擇您的開發團隊。

接下來，要使Camera插件正常工作，我們必須配置“隱私-攝像機使用”權限。首次Camera.getPhoto()調用後，iOS會自動顯示一個模式對話框，提示用戶允許該應用使用相機。要進行設置，Info.plist必須修改文件（這裡有更多細節）。要訪問它，請單擊“信息”，然後展開“自定義iOS目標屬性”。

中的每個設置Info.plist都有一個低級參數名稱和一個高級名稱。默認情況下，屬性列表編輯器顯示高級名稱，但是切換到顯示原始的低級名稱通常很有用。為此，請在屬性列表編輯器中的任意位置單擊鼠標右鍵，然後切換“顯示原始鍵/值”。

找到NSCameraUsageDescription鍵（或添加鍵）並將“值”設置為描述應用程序為何需要使用相機的原因，例如“拍照”。權限提示打開時，該值將顯示給應用程序用戶。

有了權限，我們準備在真實設備上嘗試該應用程序！將iOS設備連接到Mac計算機，然後在Xcode中單擊“構建”按鈕以在設備上構建，安裝並啟動該應用程序：

在選項卡二上點擊“相機”按鈕後，將顯示權限提示。點擊確定，然後用相機拍攝照片。之後，照片顯示在應用程序中：

安卓系統

電容器Android應用是通過Android Studio配置和管理的。在Android設備上運行此應用之前，需要完成幾個步驟。

從終端運行Capacitor copy命令，該命令將所有Web資產（在這種情況下為Ionic Angular應用程序）複製到本地Android項目中：

npx cap copy

注意：對代碼的本機部分進行更新（例如添加新插件）後，請使用以下sync命令：

npx cap sync

接下來，運行Capacitor open命令，這將在Android Studio中打開本機Android項目：

npx cap open android

與iOS相似，我們必須啟用正確的權限才能使用相機。在AndroidManifest.xml文件中配置這些。Android Studio可能會自動打開此文件，但如果沒有打開，請在下找到它android/app/src/main/。

滾動到該Permissions部分，並確保包括以下條目：

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

保存文件。有了權限，我們準備在真實設備上嘗試該應用程序！將Android設備連接到計算機。在Android Studio中，單擊“運行”按鈕，選擇連接的Android設備，然後單擊“確定”以在您的設備上生成，安裝並啟動該應用程序。

再次，在選項卡二上點擊“相機”按鈕時，應顯示權限提示。點擊確定，然後用相機拍攝照片。之後，照片應出現在應用程序中。

下一步是什