and_181206

ionic g provider loader

import { HttpClient } from '@angular/common/http';

import { Injectable } from '@angular/core';

import { LoadingController } from 'ionic-angular';

/*

Generated class for the LoaderProvider provider.

See https://angular.io/guide/dependency-injection for more info on providers

and Angular DI.

*/

@Injectable()

export class LoaderProvider {

private loading: any;

constructor(public loadingCtrl: LoadingController) {

console.log('Hello LoaderProvider Provider');

}

show(){

this.loading = this.loadingCtrl.create({

content:'잠시만 기다려주세요...'

});

this.loading.present();

}

hide(){

this.loading.dismiss();

}

}

login.ts

import { Component } from '@angular/core';

import { IonicPage, NavController, NavParams } from 'ionic-angular';

import * as firebase from "firebase";

import { SignupPage } from '../signup/signup';

import { ResetemailPage } from '../resetemail/resetemail';

import { LoaderProvider } from '../../providers/loader/loader';

@IonicPage()

@Component({

selector: 'page-login',

templateUrl: 'login.html',

})

export class LoginPage {

private account : any ={

email : '',

password : ''

};

constructor(public navCtrl: NavController,

private loader : LoaderProvider,

public navParams: NavParams) {

}

ionViewDidLoad() {

console.log('ionViewDidLoad LoginPage');

}

login(){

this.loader.show();//로딩 돌아가는거

firebase.auth().signInWithEmailAndPassword(

this.account.email,

this.account.password)

.then((result)=>{

console.log(result);

})

.catch((error)=> {

// Handle Errors here.

var errorCode = error.code;

var errorMessage = error.message;

console.log(errorMessage);

});

this.loader.hide();//로그인 성공이라 숨김

}

signup(){

//intent 역할

this.navCtrl.push(SignupPage);

}

resetEmail(){

//intent 역할

this.navCtrl.push(ResetemailPage);

}

}

appmodule

import { BrowserModule } from '@angular/platform-browser';

import { ErrorHandler, NgModule } from '@angular/core';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { SplashScreen } from '@ionic-native/splash-screen';

import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

import { LoginPage } from '../pages/login/login';

import { SignupPage } from '../pages/signup/signup';

import { ResetemailPage } from '../pages/resetemail/resetemail';

import { LoaderProvider } from '../providers/loader/loader';

@NgModule({

declarations: [

MyApp,

HomePage,

LoginPage,

SignupPage,

ResetemailPage

],

imports: [

BrowserModule,

IonicModule.forRoot(MyApp)

],

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage,

LoginPage,

SignupPage,

ResetemailPage

],

providers: [

StatusBar,

SplashScreen,

{provide: ErrorHandler, useClass: IonicErrorHandler},

LoaderProvider

]

})

export class AppModule {}

프로바이더에 등록 

프로바이더와 서비스의차이는 화면의 존재 유무에따른다 

프로바이더가 화면이 없다 

https://firebase.google.com/docs/auth/web/manage-users?hl=ko

비밀번호 재설정 이메일 보내기

sendPasswordResetEmail 메소드로 사용자에게 비밀번호 재설정 이메일을 보낼 수 있습니다. 예를 들면 다음과 같습니다.

var auth = firebase.auth();
var emailAddress = "user@example.com";

auth.sendPasswordResetEmail(emailAddress).then(function() {
  // Email sent.
}).catch(function(error) {
  // An error happened.
});

또한 Firebase 콘솔 '인증' 섹션의 '이메일 템플릿' 페이지에서 비밀번호 재설정 이메일의 템플릿을 맞춤설정할 수 있습니다. Firebase 고객센터의 이메일 템플릿 항목을 참고하세요.

alertcontroller 컨스트럭터 추가 

import { Component } from '@angular/core';

import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';

import * as firebase from "firebase";

import { SignupPage } from '../signup/signup';

import { ResetemailPage } from '../resetemail/resetemail';

import { LoaderProvider } from '../../providers/loader/loader';

@IonicPage()

@Component({

selector: 'page-login',

templateUrl: 'login.html',

})

export class LoginPage {

private account : any ={

email : '',

password : ''

};

constructor(public navCtrl: NavController,

private loader : LoaderProvider,

private alertCtrl : AlertController,

public navParams: NavParams) {

}

ionViewDidLoad() {

console.log('ionViewDidLoad LoginPage');

}

login(){

this.loader.show();//로딩 돌아가는거

firebase.auth().signInWithEmailAndPassword(

this.account.email,

this.account.password)

.then((result)=>{

console.log(result);

})

.catch((error)=> {

// Handle Errors here.

var errorCode = error.code;

var errorMessage = error.message;

console.log(errorMessage);

});

this.loader.hide();//로그인 성공이라 숨김

}

signup(){

//intent 역할

this.navCtrl.push(SignupPage);

}

resetEmail(){

let alert = this.alertCtrl.create({

title: 'Login',

inputs: [

{

name: 'username',

placeholder: 'Username'

},

{

name: 'password',

placeholder: 'Password',

type: 'password'

}

],

buttons: [

{

text: 'Cancel',

role: 'cancel',

handler: data => {

console.log('Cancel clicked');

}

},

{

text: 'Login',

handler: data => {

if (User.isValid(data.username, data.password)) {

// logged in!

} else {

// invalid login

return false;

}

}

}

]

});

alert.present();

//intent 역할

//this.navCtrl.push(ResetemailPage);

// var auth = firebase.auth();

// var emailAddress = "user@example.com";

// auth.sendPasswordResetEmail(emailAddress).then(function() {

// // Email sent.

// }).catch(function(error) {

// // An error happened.

// });

}

}

login.ts

import { Component } from '@angular/core';

import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';

import * as firebase from "firebase";

import { SignupPage } from '../signup/signup';

import { ResetemailPage } from '../resetemail/resetemail';

import { LoaderProvider } from '../../providers/loader/loader';

@IonicPage()

@Component({

selector: 'page-login',

templateUrl: 'login.html',

})

export class LoginPage {

private account : any ={

email : '',

password : ''

};

constructor(public navCtrl: NavController,

private loader : LoaderProvider,

private alertCtrl : AlertController,

public navParams: NavParams) {

}

ionViewDidLoad() {

console.log('ionViewDidLoad LoginPage');

}

login(){

this.loader.show();//로딩 돌아가는거

firebase.auth().signInWithEmailAndPassword(

this.account.email,

this.account.password)

.then((result)=>{

console.log(result);

})

.catch((error)=> {

// Handle Errors here.

var errorCode = error.code;

var errorMessage = error.message;

console.log(errorMessage);

});

this.loader.hide();//로그인 성공이라 숨김

}

signup(){

//intent 역할

this.navCtrl.push(SignupPage);

}

resetEmail(){

let alert = this.alertCtrl.create({

title: '비밀번호 변경',

message : "패스워드를 재설정 링크받을 이메일 주소 입력",

inputs: [

{

name: 'email',

placeholder: 'E-MAIL'

}

],

buttons: [

{

text: '취 소',

role: 'cancel',

handler: data => {

console.log('Cancel clicked');

}

},

{

text: '확 인',

handler: data => {

var auth = firebase.auth();

var emailAddress =data.email;

auth.sendPasswordResetEmail(emailAddress)

.then(()=> {

// 이메일 보냈을시

let alert = this.alertCtrl.create({

title : '비밀번호 변경 이메일',

subTitle: '재설정 메일 전송 . 확인바람',

buttons:['확 인']

});

alert.present();

}).catch((error)=> {

// An error happened.

});

}

}

]

});

alert.present();

}

}

실제 파이어베이스에 등록되지 않은 이메일은 400에러가 뜨면서 보내내지지않는다 

경고창 

도착한 메일에서 확인하고 새로운 비번을 입력하고 확인하면 비밀번호가 바뀐다 .

https://firebase.google.com/docs/

https://firebase.google.com/docs/database/web/start

https://firebase.google.com/docs/database/web/save-data

Firebase 실시간 데이터베이스에 데이터를 쓰는 메소드는 다음과 같이 4가지입니다.

메소드	일반적인 용도
set()	정의된 경로(예: users/<user-id>/<username>)에 데이터를 쓰거나 대체합니다.
push()	데이터 목록에 추가합니다. push()를 호출할 때마다 Firebase에서 고유 식별자로도 사용할 수 있는 고유 키(예: user-posts/<user-id>/<unique-post-id>)를 생성합니다.
update()	정의된 경로에서 모든 데이터를 대체하지 않고 일부 키를 업데이트합니다.
transaction()	동시 업데이트에 의해 손상될 수 있는 복잡한 데이터를 업데이트합니다.

set은 new 덮어쓰기  1명

update는 일부만 바뀜 

push 목록추가 리스트를 집어넣음 여러개 

set이 insert 

트랜잭션은 쿼리를 일괄로 처리 

ionic g page manager

기본적으로 페이지추가할때할 작업을 한다 

html

<ion-header>

<ion-navbar color='primary'>

<ion-title>manager</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-list>

<ion-item *ngFor="let menu of menus" (click)='gotoMenu(menu)'>

{{menu.title}}

</ion-item>

</ion-list>

</ion-content>

*ngFor="let menu of menus" (click)='gotoMenu(menu)'

Jquery : for each 같은것

https://angular.io/guide/structural-directives

You'll learn in this guide that the asterisk (*) is a convenience notation and the string is a microsyntax rather than the usual template expression.

스프링의 어노테이션같은것 

C:\Users\kgitbank\helloWorld4>ionic g page manager

[OK] Generated a page named manager!

C:\Users\kgitbank\helloWorld4>ionic g page news

[OK] Generated a page named news!

C:\Users\kgitbank\helloWorld4>ionic g page user

[OK] Generated a page named user!

C:\Users\kgitbank\helloWorld4>ionic g page category

[OK] Generated a page named category

home.html

<ion-header>

<ion-navbar color='primary'>

<ion-title>

HOME

</ion-title>

<ion-buttons>

<button ion-button icon-only (click)="logout()">

<ion-icon name="log-out"></ion-icon>

</button>

</ion-buttons>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-card>

<ion-card-header>

사용자 정보

</ion-card-header>

<ion-card-content>

<ion-item>

<ion-label floating color ='danger'>이 름</ion-label>

<ion-input type='text' [value]="userName" readonly></ion-input>

</ion-item>

<ion-item>

<ion-label floating color ='danger'>이 메 일</ion-label>

<ion-input type='email' [value]="userEmail" readonly></ion-input>

</ion-item>

<ion-item>

<ion-label floating color ='danger'>아이디</ion-label>

<ion-input type='text' [value]="userId" readonly></ion-input>

</ion-item>

</ion-card-content>

</ion-card>

<ion-footer *ngIf="masterSwitch">

<ion-navbar color='primary'>

<button ion-button full clear color='light' (click)="gotoManagerPage()">Manager</button>

</ion-navbar>

</ion-footer>

</ion-content>

ts

import { Component } from '@angular/core';

import { NavController, AlertController } from 'ionic-angular';

import * as firebase from "firebase";

import { ManagerPage } from '../manager/manager';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

private userName : any; //자바의 제네릭 같은 개념

private userEmail : any;

private userId : any ;

constructor(public navCtrl: NavController,

private alertCtrl : AlertController) {

this.initPage();

}

initPage(){

var user = firebase.auth().currentUser;

console.log(user);

if(user){

this.userName = user.displayName;

this.userEmail = user.email;

this.userId = user.uid;

}else{

console.log('로그인된 사용자가 없습니다.');

}

}

logout(){

let confirm = this.alertCtrl.create({

title : '로그아웃',

message : '로그아웃 하시겠습니까?',

buttons:[{

text : '아니요',

handler : ()=>{

console.log('로그아웃 취소');

}

},{

text : '예',

handler : ()=>{

console.log("로그아웃 확인");

firebase.auth().signOut()

.then(()=>{

console.log('로그아웃 실행');

})

.catch(error=>{console.log(error);});

}

}]

});//this로 정의된것은 constructer에 추가해야한다.

confirm.present();

}

//매니저 페이지로 전환

gotoManagerPage(){

this.navCtrl.push(ManagerPage);

}

}

<ion-header>

<ion-navbar color='primary'>

<ion-title>manager</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-list>

<ion-item *ngFor="let menu of menus" (click)='gotoMenu(menu)'>

{{menu.title}}

</ion-item>

</ion-list>

</ion-content>

ngFor는 루프문 for문이다

manager.ts

import { Component } from '@angular/core';

import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { NewsPage } from '../news/news';

import { CategoryPage } from '../category/category';

import { UserPage } from '../user/user';

/**

* Generated class for the ManagerPage page.

*

* See https://ionicframework.com/docs/components/#navigation for more info on

* Ionic pages and navigation.

*/

@IonicPage()

@Component({

selector: 'page-manager',

templateUrl: 'manager.html',

})

export class ManagerPage {

private menus = [

{

code :'001',

title:'News Database'

},{

code :'002',

title:'User Database'

},{

code :'003',

title:'Category Database'

}

];

constructor(public navCtrl: NavController, public navParams: NavParams) {

}

ionViewDidLoad() {

console.log('ionViewDidLoad ManagerPage');

}

gotoMenu(menu){

if(menu.code == "001"){

this.navCtrl.push(NewsPage);

}else if (menu.code =="002"){

this.navCtrl.push(UserPage);

} else{

this.navCtrl.push(CategoryPage);

}

}

}

user.html

<!--

Generated template for the UserPage page.

See http://ionicframework.com/docs/components/#navigation for more info on

Ionic pages and navigation.

-->

<ion-header>

<ion-navbar color='primary'>

<ion-title>user</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-list>

<ion-item *ngFor="let user of users">

<div style='font-size:4vw;font-weight:BOLD;color:rgb(64, 28, 194)'>이름 : {{user.name}}</div>

<div style='font-size:3vw;font-weight:BOLD;color:rgb(108, 89, 177);margin-top:1vw'>등록일 : {{user.date}}</div>

<div style='font-size:2vw;font-weight:BOLD;color:rgb(233, 58, 102);margin-top:1vw'>이메일 : {{user.email}}</div>

</ion-item>

</ion-list>

</ion-content>

http://forest71.tistory.com/165

스튜디오 상단에 빌드 클릭 

generate signedBundel Apk 

APK클릭 

next 

path는 내보낼 위치 

password 는 수정과 삭제에사용

keyalias  -> 별칭 

키패스워드는 그냥 같게 하는게 정신건강에 좋다 

jks 파일 생성