Onsen UI로 Cordova 앱을 더 가져옵니다

이 자습서는 첫 번째 부분을 바탕으로 Onsen UI를 사용하여 로그인 및 가입 페이지에 대한 사용자 인터페이스를 만들었습니다. 이제 AngularJS와 FireBase를 백엔드로 사용하여 기능을 추가하겠습니다. 전체 소스 코드는 github에서 사용할 수 있습니다 주요 개념 :

이 튜토리얼은 FireBase와 결합 된 OnSen UI가 효율적인 모바일 앱 개발, 특히 기능적 사용자 인증을 만드는 방법을 보여줍니다. AngularJS는 상호 작용과 응답 성을 향상시킵니다 단계별 지침은 Firebase 설정, 인스턴스 작성 및 사용자 인증을 포함한 입력 유효성 검사 및 Firebase 인증을 위해 제공됩니다. 성공적인 인증은 사용자를 홈페이지로 리디렉션합니다 자습서는 이메일/비밀번호 검증, 를 사용한 사용자 생성 및 성공적인 등록 후 로그인 페이지로 리디렉션을 포함하여 Firebase 기반 사용자 등록을 다룹니다. 오류 처리에는 유효하지 않은 입력에 대한 모달 팝업이 포함되어 있습니다

시작하기 : 튜토리얼의 소스 코드를 복제하고 종속성을 설치하십시오 : 에 앱에 액세스하거나 안드로이드 에뮬레이터를 사용하십시오.

• 로그인 구현 :
• 파일에는 angularjs 컨트롤러가 포함되어 있습니다. 로그인 로직 : FirebaseSimpleLogin로 향상시킬 것입니다
• : 의 사용자 이름 및 비밀번호 입력 필드에 지시문을 추가하십시오. auth.createUser 유효성 검사 메시지 모달이
(줄 92)에 추가됩니다.

로그인 버튼의 이벤트 트리거

: Firebase 통합 :

Firebase 계정에 등록하고 Firebase URL을 얻습니다 (예 : ).

: 에 Firebase 및 Firebase 간단한 로그인 스크립트를 포함하십시오.

<code class="language-bash">git clone https://github.com/sitepoint-examples/OnsenUI--Part1
cd OnsenUI--Part1
npm install
npm install -g gulp
gulp serve</code>

: 에서 Firebase 인스턴스와 Firebase 콘솔에서 이메일 및 비밀번호 인증을 활성화해야합니다. http://localhost:8901/index.html 홈페이지 및 로그 아웃 :

생성 :

함수를 /OnsenUI--Part1/www/js/app.js : 에 추가하십시오

<code class="language-javascript">(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)
    });

})();</code>

가입 구현 :

가입 페이지에서 이메일 및 비밀번호 필드에 지시문을 추가하십시오 : ng-model index.html : 에서 함수를 만듭니다

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

가입 버튼에 index.html 지시문을 추가하십시오 :

<code class="language-bash">git clone https://github.com/sitepoint-examples/OnsenUI--Part1
cd OnsenUI--Part1
npm install
npm install -g gulp
gulp serve</code>

로그인 모달과 유사한 가입 유효성 검사 오류에 대한 모달 추가.

결론 :

이 강화 된 자습서는 Onsen UI, AngularJS 및 Firebase를 사용하여 완벽하게 기능적인 로그인 및 가입 시스템을 제공합니다. 추가 구성 요소 탐색을 위해 Onsen UI 문서를 참조하십시오. FAQS 섹션은 핵심 코드 구현과 크게 관련이 없기 때문에 간결하게 생략되었습니다.

위 내용은 Onsen UI로 Cordova 앱을 더 가져옵니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!