Mengambil aplikasi Cordova anda dengan onsen UI

Tutorial ini dibina pada bahagian pertama, di mana kami membuat antara muka pengguna untuk halaman log masuk dan pendaftaran menggunakan UI ONSEN. Sekarang, kami akan menambah fungsi menggunakan AngularJS dan Firebase sebagai backend. Kod sumber lengkap boleh didapati di GitHub.

Konsep Utama:

Tutorial ini menunjukkan bagaimana onsen UI, digabungkan dengan Firebase, membolehkan pembangunan aplikasi mudah alih yang cekap, khususnya membuat pengesahan pengguna berfungsi. AngularJS meningkatkan interaktiviti dan respons.
Arahan langkah demi langkah disediakan untuk pengesahan input dan pengesahan firebase, termasuk persediaan firebase, penciptaan contoh, dan
• untuk pengesahan pengguna. Pengesahan yang berjaya mengalihkan pengguna ke halaman utama. FirebaseSimpleLogin
Tutorial meliputi pendaftaran pengguna berasaskan Firebase, termasuk pengesahan e-mel/kata laluan, penciptaan pengguna menggunakan
• , dan pengalihan semula ke halaman log masuk selepas pendaftaran yang berjaya. Pengendalian ralat termasuk pop timbul modal untuk input tidak sah. auth.createUser

Bermula:

klon kod sumber tutorial dan pasangkan kebergantungan:

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

mengakses aplikasi di

atau gunakan emulator Android. http://localhost:8901/index.html

Melaksanakan log masuk:

Fail

mengandungi pengawal AngularJS. Kami akan meningkatkannya dengan logik logik: /OnsenUI--Part1/www/js/app.js

(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)
    });

})();

tambah : ng-model index.html

modal untuk mesej pengesahan ditambah kepada

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

(sekitar baris 92):

index.html

Button's Button's

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

pencetus acara

: ng-click SignIn()

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

Integrasi Firebase:

Daftar untuk akaun Firebase dan dapatkan URL Firebase anda (mis., ). Sertakan skrip log masuk mudah Firebase dan Firebase dalam

:

https://your-firebase-app.firebaseio.com index.html Buat contoh firebase dan contoh

dalam

<🎜>
<🎜>

:

FirebaseSimpleLogin app.js ingat untuk membolehkan pengesahan e -mel & kata laluan di konsol firebase anda.

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
    }
});

Laman Utama dan Logout:

Buat :

home.html tambah fungsi

ke

<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

Melaksanakan pendaftaran:

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

tambah

Buat fungsi ng-model dalam

:

<input ng-model="reg.email" type="text" placeholder="Email Address" ... />
<input ng-model="reg.pass" type="password" placeholder="Password" ... />

SignUp tambah arahan app.js ke butang pendaftaran:

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

Tambahkan modal untuk kesilapan pengesahan pendaftaran yang serupa dengan modal log masuk.

Kesimpulan:

Tutorial yang dipertingkatkan ini menyediakan sistem log masuk dan pendaftaran yang berfungsi sepenuhnya menggunakan onsen UI, angularjs, dan firebase. Ingatlah untuk berunding dengan dokumentasi UI ONSEN untuk penerokaan komponen lanjut. Seksyen Soalan Lazim telah ditinggalkan untuk keringkasan, kerana ia tidak berkaitan dengan pelaksanaan kod teras.

Atas ialah kandungan terperinci Mengambil aplikasi Cordova anda dengan onsen UI. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!