Ionic2앱에서 서버의 rest api요청하기

1. Ionic2 Rest API호출
kalen.lee@takit.biz
0505-170-3636
www.takit.biz
https://github.com/raceyi/Ionic2Samples/

2. Http post
Import {Http,Headers} from ‘@angular/http’;
…
export class Login{
constructor(private http:Http,private alertController, AlertController, …){
}
login(){
let body=JSON.stringify({username:this.username,password:this.password});
let url=http://www.takit.biz:8080/login;
let headers=new Headers();
headers.append(‘Content-Type’,’application/json’);
this.http.post(url,body,{headers:headers}).subscribe((res:any)=>{
console.log(“res:”+JSON.stringify(res.json()));
let response=res.json();
if(response.result==”success”){
this.navCtrl.setRoot(TabsPage);
}else{
let alert = this.alertController.create({
title:’로그인에 실패했습니다’,
button:[‘OK’]
});
alert.present();
}
},(err)={
console.log(“post-err:”+JSON.stringify(err));
});
}
{
“name”:”restAPI”,
“app_id”:””,
“v2”:true,
“typescript”:true,
“proxies”:[
{
“path”:”/login”,
“proxyUrl”:http://www.takit.biz:8080/login
}
]
}
curl --data-urlencode "username=Ionic2" --data-urlencode "password=123456" www.takit.biz:8080/login

3. Http get
Import {Http,Headers} from ‘@angular/http’;
…
export class HomePage{
serverInfo:string;
constructor(private http:Http,private alertController, AlertController, …){
}
ionViewDidLoad(){
let url=http://www.takit.biz:8080/getInfo?Info=server;
this.get(url).then((response:any)=>{
console.log(“res:”+JSON.stringify(response));
this.serverInfo=”버전:”+response.version+” 이름:”+response.name;
},(err)=>{
this.serverInfo=”서버정보를 알수 없습니다”;
});
}
get(url){
return new Promise((resolve,reject)=>{
this.http.get(url).subscribe((res:any)=>{
resolve(res.json());
},(err)=>{
reject(err);
});
}
curl www.takit.biz:8080/getInfo?Info=server
{
“name”:”restAPI”,
“app_id”:””,
“v2”:true,
“typescript”:true,
“proxies”:[
{
“path”:”/login”,
“proxyUrl”:http://www.takit.biz:8080/login
},{
"path": "/getInfo",
"proxyUrl": "http://www.takit.biz:8080/getInfo"
}
]
}

4. Provider의 사용
ionic g provider serverProvider
Import {Http,Headers} from ‘@angular/http’;
…
export class ServerProvider{
constructor(private http:Http, …){
}
get(url){
return new Promise((resolve,reject)=>{
this.htt.get(url).subscribe((res:any)=>{
resolve(res.json());
},(err)=>{
reject(err);
});
}
post(url,body){
return new Promise((resolve,reject)=>{
let headers = new Headers();
headers.append(‘Content-Type’,’application/json’);
this.http.get(url,JSON.stringify(body),{headers:headers}).subscribe((res:any)=>{
resolve(res.json());
},(err)=>{
reject(err);
});
}
}
import {ServerProvider} from ‘../../providers/server-provider’;
export class Login{
…
constructor(private serverProvider:ServerProvider,…){
}
Login(){
let body={username:this.username,password:this.password};
let url=http://www.takit.biz:8080/login;
this.serverProvider.post(url,body).then((res:any)=>{
if(res.result=”success”){
this.navCtrl.setRoot(TabsPage);
}else{
let alert =this.alertController.create({
title:’로그인에 실패했습니다.’,
buttons:[‘OK’]
});
}
},(err)=>{
….
});

5. 자동 로그인
npm install crypto-js --save
npm install @types/crypto-js —save
ionic g provider storageProvider
ionic platform add android
ionic plugin add cordova-plugin-nativestorage
ionic run android
ionic build ios

6. Promise사용하기
functionName(…){
return new Promise((resolve,reject)=>{
let P1=new Promise(resolve1,reject1)=>{
….
resolve1(…); //함수가 성공적으로 수행된 경우
…..
reject1(err); // 함수 수행이 실패한 경우
});
let P2= new Promise(resolve2,reject2)=>{
….
resolve2(…); //함수가 성공적으로 수행된 경우
…..
reject2(err); // 함수 수행이 실패한 경우
});
Promise.all([P1,P2]).then(()=>{
resolve(); // P1과P2가 모두 성공적으로 수행된 경우
//(resolve1,resolve2) 호출됨.
},(err)=>{
reject(err); // reject1또는 reject2가 호출된 경우
});
});
}
functionName(…){
return new Promise(resolve,reject)=>{
….
resolve(params); //함수가 성공적으로 수행된 경우
…..
reject(err); // 함수 수행이 실패한 경우
}
functionName( ….).then((params)=>{
//성공적으로 수행된 경우 호출됨
},(err)=>{
// 함수 수행에 실패한 경우 호출된
})

7. 자동 재로그인
post(url,body){
return new Promise((resolve,reject)=>{
let headers = new Headers();
headers.append('Content-Type', 'application/json');
console.log("url:"+url+" post:"+body);
this.http.post(url,JSON.stringify(body),{headers:headers}).subscribe((res:any)=>{
console.log("res:"+JSON.stringify(res));
resolve(res.json());
},(err)=>{
if(err.hasOwnProperty("status") && err.status==401){
this.login(this.username,this.password).then((res)=>{
this.http.post(url,JSON.stringify(body),{headers:headers}).subscribe((res:any)=>{
resolve(res.json());
},(err)=>{
reject(err);
});
},(err)=>{
reject(err);
});
}else
reject(err);
});
});
smartphone app의 상태
-foreground, background
https://github.com/raceyi/Ionic2Samples/tree/master/restAPI

8. 서버 버전 확인
login(username, password){
return new Promise((resolve,reject)=>{
let body={username:username,password:password};
let url="http://www.takit.biz:8080/login";
let headers = new Headers();
headers.append('Content-Type', 'application/json');
this.http.post(url,JSON.stringify(body),{headers:headers}).subscribe((res:any)=>{
console.log("res.json().result:"+res.json().result);
if(res.json().result=="success"){
// save id and password
this.storageProvider.saveLoginInfo(username,password);
this.username=username;
this.password=password;
resolve(res.json());
}else{
reject("invalid userInfo");
}
if(parseFloat(res.json().version)>this.version){
console.log("version out-of-date");
this.events.publish('out-of-date');
}
},(err)=>{
reject("network/server err");
});
});
}
ionViewDidLoad() {
console.log('ionViewDidLoad LoginPage');
this.events.subscribe('out-of-date',()=>{
console.log("out-of-date comes in login Page");
let alert = this.alertController.create({
title: '앱을 업데이트 해주시기 바랍니다.'
buttons: ['OK']
});
alert.present();
})
}