第一

使用Ionic创建一个应用程序，在Firestore中显示注册的数据。
显示的是一个我经营的滑雪板综合网站的文章。
滑雪板综合网站TWEAK

创建项目

使用以下命令创建项目。

ionic start firestoreList blank --type=angular

安装必要的软件包并进行环境配置。

在Ionic应用内安装In App浏览器以打开网页。

ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser

安裝Firebase和@angular/fire。

npm install firebase @angular/fire --save

请按照以下方式进行环境设置。

export const environment = {
  production: false,
  firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'
  }
};

将数据存入 Firestore

实现页面列表显示功能

将1./src/app/app.module.ts更改如下，以便设置可以使用InAppBrowser和Firebase的功能。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

//Firebase設定情報ファイルをインポート
import { environment } from '../environments/environment';

//Firebaseを利用するためのモジュール
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    InAppBrowser
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

2. 进行一览页面的用户界面实现

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      記事一覧
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-card *ngFor="let trick of groundtricks" class="activated">
    <ion-item (click)="openPage(trick.url)" class="activated">
    <ion-card-header>
      <ion-img src = "{{trick.image}}" class="image"></ion-img>
    </ion-card-header>
      <ion-card-content>
          <p><font size="2">レベル：{{ trick.level }}</font></p><br>
          <p><font size="3" color="#000000">{{ trick.name }}</font></p>
      </ion-card-content>
    </ion-item>
  </ion-card>
</ion-content>

3. 实施显示页面的处理。

import { Component, OnInit } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit{
  groundtricks: any;

  constructor(
    private firestore: AngularFirestore,
    private inAppBrowser: InAppBrowser,
  ) {}

  ngOnInit() {
    this.readGroundtrick().subscribe(data => {
      this.groundtricks = data.map(e => {
        return {
          genre: e.payload.doc.data()['genre'],
          image: e.payload.doc.data()['image'],
          level: e.payload.doc.data()['level'],
          rotation: e.payload.doc.data()['rotation'],
          name: e.payload.doc.data()['name'],
          url: e.payload.doc.data()['url'],
        };
      });
    });
  }

  openPage(url){
    this.inAppBrowser.create(url);
  }

  readGroundtrick() {
    return this.firestore.collection('groundtrick').snapshotChanges();
  }
}

以iOS应用程序的形式输出

对于Cordova，可以使用以下命令将其导出为iOS应用程序。

ionic cordova prepare ios

最后

我用Ionic + Firebase开发了一个可以展示Firestore内容的iOS应用程序。
我非常感动，因为即使什么都不做，它已经支持了暗黑模式。
将来，我还会介绍关于添加功能开发的内容。
【使用Ionic + Firebase进行应用开发】实现收藏功能（2020/6/1更新）

请参考

在Angular项目中引入Firebase
iOS开发 – Ionic Framework 日本语文档