Onsen UIでCordovaアプリをさらに進めます

このチュートリアルは、最初の部分に基づいて構築され、OnSen UIを使用してサインインおよびサインアップページのユーザーインターフェイスを作成しました。 次に、AngularJSとFireBaseをバックエンドとして使用して機能を追加します。 完全なソースコードはGitHubで利用できます

重要な概念：

このチュートリアルは、Firebaseと組み合わせて、効率的なモバイルアプリ開発、特に機能的なユーザー認証の作成を可能にする方法を示しています。 Angularjsは、対話性と応答性を高めます

Firebaseセットアップ、インスタンス作成、ユーザー認証用の

など、入力検証とFirebase認証のためにステップバイステップの命令が提供されています。 認証を成功させると、ユーザーをホームページにリダイレクトします
• チュートリアルでは、登録が成功した後、電子メール/パスワードの検証、
を使用したユーザー作成、サインインページへのリダイレクトなど、Firebaseベースのユーザー登録をカバーしています。 エラー処理には、無効な入力のモーダルポップアップが含まれます
• FirebaseSimpleLogin
始めましょう：
• auth.createUser
チュートリアルのソースコードをクローンし、依存関係をインストールしてください：

アプリにアクセスするか、Androidエミュレータを使用してください。

サインインの実装：

git clone https://github.com/sitepoint-examples/OnsenUI--Part1
cd OnsenUI--Part1
npm install
npm install -g gulp
gulp serve

ファイルにはAngularJSコントローラーが含まれています。 サインインロジックで強化します：http://localhost:8901/index.html

：のユーザー名とパスワードの入力フィールドに

ディレクティブを追加します

/OnsenUI--Part1/www/js/app.js検証メッセージのモーダルが

（92行目の周り）に追加されます：

(function() {
    'use strict';
    var module = angular.module('app', ['onsen']);

    module.controller('AppController', function($scope) {
        $scope.data = [];

        $scope.SignIn = function() {
            var user = $scope.data.username;
            var pass = $scope.data.password;
            if (user && pass) {
                // Firebase authentication
                auth.login('password', { email: user, password: pass });
            } else {
                // Show validation modal
                modal.show();
            }
        };

        // ... (rest of the controller)
    });

})();

ng-modelサインインボタンのindex.htmlイベントトリガー

：

<input ng-model="data.username" type="text" placeholder="Username" ... />
<input ng-model="data.password" type="password" placeholder="Password" ... />

index.html

Firebase統合：

<ons-modal var="modal" ng-click="modal.hide()">
    Invalid Username or Password.
</ons-modal>

ng-clickFireBaseアカウントに登録し、FireBase URLを取得します（例：SignIn()）。 FirebaseとFirebaseの簡単なログインスクリプトを

：

<ons-button id="btnSignIn" modifier="large" ng-click="SignIn()">SignIn</ons-button>

に含める

FireBaseインスタンスとインスタンスを作成します：

：

https://your-firebase-app.firebaseio.com index.html FireBaseコンソールで電子メールとパスワードの認証を有効にすることを忘れないでください。

<🎜>
<🎜>

ホームページとログアウト：

FirebaseSimpleLogin app.jscreate

：

var firebaseRef = new Firebase('YOUR_FIREBASE_URL');
var auth = new FirebaseSimpleLogin(firebaseRef, function(error, user) {
    if (!error && user) {
        $scope.username = user.email;
        myNavigator.pushPage('home.html', { animation: 'slide' });
        $scope.$apply(); // Ensure Angular updates the view
    }
});

関数を：に追加します

home.htmlサインアップの実装：

<ons-template id="home.html">
    <ons-page>
        <!-- ... content ... -->
        <ons-icon icon="ion-log-out" ng-click="logout()">Logout</ons-icon>
    </ons-page>
</ons-template>

サインアップページの電子メールおよびパスワードフィールドにlogoutディレクティブを追加します：app.js

$scope.logout = function() {
    auth.logout();
    $scope.data = [];
    myNavigator.popPage();
    $scope.$apply(); // Ensure Angular updates the view
};

：で関数を作成します

サインアップボタンにng-modelディレクティブを追加します：

git clone https://github.com/sitepoint-examples/OnsenUI--Part1
cd OnsenUI--Part1
npm install
npm install -g gulp
gulp serve

サインインモーダルと同様のサインアップ検証エラーのモーダルを追加します。

結論：

この拡張されたチュートリアルは、Onsen UI、AngularJS、およびFirebaseを使用した完全に機能的なサインインおよびサインアップシステムを提供します。 さらなるコンポーネント探索については、Onsen UIドキュメントを参照してください。 FAQSセクションは、コアコードの実装とはほとんど関係のないため、簡潔に省略されています。

以上がOnsen UIでCordovaアプリをさらに進めますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。