ionic super template code read

イシュー

  • ionic の super テンプレートについて、CODE READ する

参考

#

Pages
The Super Starter comes with a variety of ready-made pages. These pages help you assemble common building blocks for your app so you can focus on your unique features and branding.

The app loads with the FirstRunPage set to TutorialPage as the default. If the user has already gone through this page once, it will be skipped the next time they load the app.

If the tutorial is skipped but the user hasn't logged in yet, the Welcome page will be displayed which is a "splash" prompting the user to log in or create an account.

Once the user is authenticated, the app will load with the MainPage which is set to be the TabsPage as the default.

The entry and main pages can be configured easily by updating the corresponding variables in src/pages/pages.ts.

Please read the Pages readme, and the readme for each page in the source for more documentation on each.

ページ スーパースターターには様々な既製のページが付属しています。これらのページは、アプリの共通のビルディングブロックを組み立てるのに役立ち、独自の機能やブランディングに集中できます。

デフォルトで、FirstRunPageがTutorialPageに設定された状態でアプリケーションが読み込まれます。ユーザーが既にこのページを一度通過した場合、次回にアプリを読み込んだときにスキップされます。

チュートリアルはスキップされてもユーザーがまだログインしていない場合は、ログインまたはアカウントの作成を促す「スプラッシュ」のような開始ページが表示されます。

ユーザが認証されると、デフォルトとしてTabsPageに設定されたMainPageがロードされます。

エントリ/メインページは、src / pages / pages.ts内の対応する変数を更新することで簡単に設定できます。

Pagesのreadmeとそれぞれのページのreadmeを参照してください。

Providers
The Super Starter comes with some basic implementations of common providers.

プロバイダー スーパースターターには、共通プロバイダーの基本的な実装がいくつか付属しています。

User
The User provider is used to authenticate users through its login(accountInfo) and signup(accountInfo) methods, which perform POST requests to an API endpoint that you will need to configure.

ユーザー ユーザープロバイダーは、ログイン（accountInfo）およびサインアップ（accountInfo）メソッドを介してユーザーを認証するために使用されます。これらのメソッドは、構成する必要のあるAPIエンドポイントへのPOST要求を実行します。

Api
The Api provider is a simple CRUD frontend to an API. Simply put the root of your API url in the Api class and call get/post/put/patch/delete

Api Apiプロバイダは、APIに対するシンプルなCRUDフロントエンドです。 apiクラスにAPI urlのルートを置き、get / post / put / patch / deleteを呼び出すだけです

i18n
Ionic Super Starter comes with internationalization (i18n) out of the box with ngx-translate. This makes it easy to change the text used in the app by modifying only one file.

i18n Ionic Super Starterには、ngx-translateを使用してすぐに国際化対応（i18n）が付属しています。これにより、1つのファイルのみを変更することで、アプリケーションで使用されるテキストを簡単に変更できます。

Adding Languages
To add new languages, add new files to the src/assets/i18n directory, following the pattern of LANGCODE.json where LANGCODE is the language/locale code (ex: en/gb/de/es/etc.).

言語の追加 新しい言語を追加するには、LANGCODE.jsonのパターンに従ってLANGCODEが言語/ロケールコード（例：en / gb / de / es / etc）になっている新しいファイルをsrc / assets / i18nディレクトリに追加します。

Changing the Language
To change the language of the app, edit src/app/app.component.ts and modify translate.use('en') to use the LANGCODE from src/assets/i18n/

言語の変更 アプリの言語を変更するには、src / app / app.component.tsを編集し、translate.use（ 'en'）を変更してsrc / assets / i18n /

api と user を書き換えれば、独自の認証機能つきアプリは作れそう

認証ステータスが変わった時に再認証を行うところはどこ？

firebase コード
const unsubscribe = firebase.auth().onAuthStateChanged( user => {
  if (!user) {
    this.rootPage = 'LoginPage';
    unsubscribe();
  } else { 
    this.rootPage = HomePage;
    unsubscribe();
  }
});

ユーザIDとパスワードで認証するところはどこ？

  • app/providers/user/user.ts
    • login(accountInfo: any)
firebase コード
loginUser(email: string, password: string): Promise<any> {
  return firebase.auth().signInWithEmailAndPassword(email, password);
}

パスワードをリセットするところはどこ？

firebase コード
resetPassword(email: string): Promise<void> {
  return firebase.auth().sendPasswordResetEmail(email);
}

ログアウトするところはどこ？

  • app/providers/user/user.ts
    • logout()
firebase コード
ogoutUser(): Promise<void> {
  return firebase.auth().signOut();
}

ディレクトリ構成

|--app
|--assets
|  |--i18n
|  |--icon
|  |--img
|  |  |--speakers
|  |--imgs
|--mocks
|  |--providers
|--models
|--pages
|  |--cards
|  |--content
|  |--item-create
|  |--item-detail
|  |--list-master
|  |--login
|  |--menu
|  |--search
|  |--settings
|  |--signup
|  |--tabs
|  |--tutorial
|  |--welcome
|--providers
|  |--api
|  |--firebase
|  |--items
|  |--settings
|  |--user
|--theme

タブの名前は、./assets/i18n/ja.json に記載されている

  • 名称は、TAB1_TITLE
$ find . -type f -exec grep -H '項目' {} \;
./assets/i18n/zh-cmn-Hant.json:  "TAB1_TITLE": "項目",
./assets/i18n/zh-cmn-Hant.json:  "LIST_MASTER_TITLE": "項目",
./assets/i18n/zh-cmn-Hant.json:  "ITEM_CREATE_TITLE": "新項目",
./assets/i18n/zh-cmn-Hant.json:  "SEARCH_PLACEHOLDER": "搜索項目列表, 例如：\"Donald Duck\""
./assets/i18n/ja.json:  "TAB1_TITLE": "項目",
./assets/i18n/ja.json:  "LIST_MASTER_TITLE": "項目",
./assets/i18n/ja.json:  "ITEM_CREATE_TITLE": "新しい項目",
./assets/i18n/ja.json:  "SEARCH_PLACEHOLDER": "項目一覧を検索 例 \"Donald Duck\""
$

タブの設定

  • ./src/pages/pages.ts
    • タブに対応するページを定義
export const FirstRunPage = 'TutorialPage';
export const MainPage = 'TabsPage';
export const Tab1Root = 'ListMasterPage';
export const Tab2Root = 'SearchPage';
export const Tab3Root = 'SettingsPage';

./src/pages/tabs/tabs.ts