1 ผม install cordova ionic โดยคำสั่งนี้ npm install -g cordova ionic
ทำให้การจัดเรียงไฟล์และ รันต่างจาก คำสั่งนี้ npm install -g cordova ionic@beta
2 ผมไม่ได้ใช้เครื่อง mac ในการทำงาน ทำให้หาข้อมูลในเว็บยาก เพราะตัวอย่างมีแต่แบบใน mac และ ใช้คำสั่ง beta
3 ผม ทำตัวอย่าง จากหนังสือ ionic2
https://www.packtpub.com/sites/default/files/5962_5402_Ionic%202%20Cookbook.jpg
ซึ่งเค้าสอน และผมก็แปะโค้ดตามแบบการจัดเรียง ไฟล์แบบ คำสั่ง npm install -g cordova ionic
4 ในหนังสือสอนสิ้นสุดแค่ การใช้เฟรมเวิค
http://docs.ionic.io/services/auth/ เช่นการ เพิ่ม user
แต่ไม่มีการสอนแบบ api http เช่นการยื่นคำร้องในการ ลบ
http://docs.ionic.io/api/http.html สำหรับ http
http://docs.ionic.io/api/endpoints/auth.html#delete-users-user_uuid สำหรับดูเมธทอด
5 สรุปคือผมประยุกต์ใช้เป็นการลบไม่เป็น ใครพอแม่นเรื่องโค้ดรบกวน หน่อยครับ
ไฟล์ที่ต้องแก้หลังจาก ใช้คำสั่งสร้าง ionic start ชื่อไฟล์ blank ไปแล้ว
1. MySimpleAuth/src/app/app.module.ts
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { CloudSettings, CloudModule } from '@ionic/cloud-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
const cloudSettings: CloudSettings = {
'core': {
'app_id': '302825af'
}
};
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
IonicModule.forRoot(MyApp),
CloudModule.forRoot(cloudSettings)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: []
})
export class AppModule { }
2. MySimpleAuth/src/pages/home/home.html
<ion-header>
<ion-navbar>
<ion-title>
User Authentication
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div *ngIf="!auth.isAuthenticated()">
<h4>
Register or Login
</h4>
<ion-list>
<ion-item>
<ion-label fixed>Email</ion-label>
<ion-input type="text" [(ngModel)]="email"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Password</ion-label>
<ion-input type="password" [(ngModel)]="password"></ion-input>
</ion-item>
</ion-list>
<ion-grid>
<ion-row>
<ion-col width-50>
<button ion-button block (click)="register()">Register</button>
</ion-col>
<ion-col width-50>
<button ion-button block (click)="login()">Login</button>
</ion-col>
</ion-row>
</ion-grid>
<a href="
https://apps.ionic.io/app/302825af/auth/list">ไปยังหน้า App Ionic</a>
<br>
<a href="
https://docs.ionic.io/api/endpoints/auth.html#delete-users-user_uuid">ไปยังหน้า การขอ Delete</a>
<br>
<a href="
https://docs.ionic.io/api/http.html">ไปยังหน้า การขอ Api Http</a>
<br>
<a href="
https://outlook.live.com/owa/?path=/mail/inbox">ไปยังหน้า Hotmail</a>
<br>
<a href="
http://www.thaiseoboard.com/index.php/topic,389495.0.html">ไปยังหน้า เว็บบอร์ดที่ไปถาม 1</a>
<br>
<a href="
https://ppantip.com/topic/36071266">ไปยังหน้า เว็บบอร์ดที่ไปถาม 2</a>
<br>
<a href="
http://www.thaicreate.com/mobile/forum/126223.html">ไปยังหน้า เว็บบอร์ดที่ไปถาม 3</a>
</div>
<div *ngIf="auth.isAuthenticated()">
<h4>
User Profile
</h4>
<ion-list *ngIf="auth.isAuthenticated()">
<ion-item>
<ion-label fixed>Name</ion-label>
<ion-input class="right" type="text" [(ngModel)]="name"></ion-input>
</ion-item>
<ion-item>
<ion-label>Birthday</ion-label>
<ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="birthday">
</ion-datetime>
</ion-item>
<ion-item>
<ion-label>Birthday2</ion-label>
<ion-input displayFormat="text" [(ngModel)]="birthday2">
</ion-input>
</ion-item>
</ion-list>
<ion-grid>
<ion-row>
<ion-col width-50>
<button ion-button color="secondary" block
(click)="save()">
Save
</button>
</ion-col>
<ion-col width-50>
<button ion-button color="dark" block
(click)="logout()">
Logout
</button>
</ion-col>
<ion-col width-50>
<button ion-button color="secondary" block
(click)="delete()">
delete
</button>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-content>
3. MySimpleAuth/src/pages/home/home.scss
.home-page {
ion-input.right > input {
text-align: right;
}
}
4. MySimpleAuth/src/pages/home/home.ts
import { Component } from '@angular/core';
import { NavController, LoadingController, ToastController } from 'ionic-angular';
import { Auth, User, UserDetails, IDetailedError } from '@ionic/cloud-angular';
@Component({templateUrl: 'home.html'})
export class HomePage {
public email: string = "";
public password: string = "";
public name: string = "";
public birthday: string = "";
public birthday2: string = "";
constructor(public navCtrl: NavController, public auth: Auth, public user: User, public loadingCtrl: LoadingController, public toastCtrl:
ToastController) {
this.initProfile();
}
private initProfile() {
if (this.auth.isAuthenticated()) {
this.email = this.user.get('email', '');
this.birthday = this.user.get('birthday', '');
this.birthday2 = this.user.get('birthday2', '');
}
}
register() {
//เริ่มรับค่า register
let details: UserDetails = {'email': this.email+"@hotmail.com", 'password': this.password};
let loader = this.loadingCtrl.create({content: "Registering user..."});
loader.present();
//ฟังก์ชั่นทำงานเมื่อกดปุ่ม register
this.auth.signup(details).then(() =>
{
console.log('User is now registered');
console.log(this.user);
loader.dismiss();
//this.auth.login ตัวทำการ login
return this.auth.login('basic', {'email': this.email+"@hotmail.com", 'password': this.password});}, (err: IDetailedError<string[]>) => { loader.dismiss();
for (let e of err.details) {
if (e === 'conflict_email') {
alert('Email already exists.');
} else {
alert('Error creating user.');
}
}
});
}
login() {
let details: UserDetails = {'email': this.email+"@hotmail.com", 'password':this.password};
//ฟังก์ชั่นนี้ไว้ป้องกันไม่ให้ผู้ลงทะเบียนคลิกปุ่มซ้ำหลายๆครั้ง
let loader = this.loadingCtrl.create({content: "Logging in user..."});
loader.present();
this.auth.login('basic', details).then((data) => {
console.log('Finished login');
this.initProfile();
loader.dismiss();
console.log(data);
console.log(this.user);
}, (err) => {
loader.dismiss();
alert('Login Error');
});
}
save() {
let toast = this.toastCtrl.create({message: 'User profile was saved successfully',position: 'bottom', duration:3000});
toast.present();
this.user.set('email', this.email);
this.user.set('birthday', this.birthday);
this.user.set('birthday2', this.birthday2);
this.user.save();
}
logout() {
this.auth.logout();
this.email = '';
this.password = '';
this.name = '';
this.birthday = '';
}
delete()
{
var request = require("home.html");
var token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjNmJjYmEyZi1iM2Q5LTQ4OGEtYWFhNy0xYmQ4ZDI0YjE0MzgifQ.es1iUVGbq6GR6LEUBbsxIU3DqJrdtw68ZJRHDyMsSrM"
var options = {
method: 'DELETE',
url: '
https://api.ionic.io/auth/users/id'+this.email+"@hotmail.com",
headers: {
'Authorization': 'Bearer ' + token,
'Content-Type': 'application/json'
}
};
request(options, function(err, response, body) {
if (err) throw new Error(err);
console.log(body);
});
}
}
ปล . จากข้อที่ 4 home .ts ในฟังก์ชั่น delete ยังผิดอยู่
เพราะเนื่องจากไม่รุ้จัก require อาจจะเป็นที่ตัวโค้ด api http ที่เอามาจาก ionic เป็นชนิด nodejs
ทำให้ไม่สามารถอ่านได้ในไฟล์ .ts
ปัญหาคือ ไม่รู้วิธีการเขียน ในไฟล์ js ที่สามารถใช้ร่วมกับ home.html home.ts home.scss
เพราะไม่มีตัวอย่างที่ตรงกับแบบตัวเองให้ดูครับ และเพิ่งเริ่มศึกษาเป็นสัปดาที่ 2 เอง
ใครพอทราบรบกวนซักนิดครับ เครียดหนักมากจริงๆ TT__TT
ขอบพระคุณอย่างสูง ถ้า อยู่กรุงเทพเจ้าของกระทู้เลี้ยงข้าวให้ได้เลยนะครับ
ionic2 api http สอบถาม
ทำให้การจัดเรียงไฟล์และ รันต่างจาก คำสั่งนี้ npm install -g cordova ionic@beta
2 ผมไม่ได้ใช้เครื่อง mac ในการทำงาน ทำให้หาข้อมูลในเว็บยาก เพราะตัวอย่างมีแต่แบบใน mac และ ใช้คำสั่ง beta
3 ผม ทำตัวอย่าง จากหนังสือ ionic2 https://www.packtpub.com/sites/default/files/5962_5402_Ionic%202%20Cookbook.jpg
ซึ่งเค้าสอน และผมก็แปะโค้ดตามแบบการจัดเรียง ไฟล์แบบ คำสั่ง npm install -g cordova ionic
4 ในหนังสือสอนสิ้นสุดแค่ การใช้เฟรมเวิค http://docs.ionic.io/services/auth/ เช่นการ เพิ่ม user
แต่ไม่มีการสอนแบบ api http เช่นการยื่นคำร้องในการ ลบ http://docs.ionic.io/api/http.html สำหรับ http
http://docs.ionic.io/api/endpoints/auth.html#delete-users-user_uuid สำหรับดูเมธทอด
5 สรุปคือผมประยุกต์ใช้เป็นการลบไม่เป็น ใครพอแม่นเรื่องโค้ดรบกวน หน่อยครับ
ไฟล์ที่ต้องแก้หลังจาก ใช้คำสั่งสร้าง ionic start ชื่อไฟล์ blank ไปแล้ว
1. MySimpleAuth/src/app/app.module.ts
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { CloudSettings, CloudModule } from '@ionic/cloud-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
const cloudSettings: CloudSettings = {
'core': {
'app_id': '302825af'
}
};
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
IonicModule.forRoot(MyApp),
CloudModule.forRoot(cloudSettings)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: []
})
export class AppModule { }
2. MySimpleAuth/src/pages/home/home.html
<ion-header>
<ion-navbar>
<ion-title>
User Authentication
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div *ngIf="!auth.isAuthenticated()">
<h4>
Register or Login
</h4>
<ion-list>
<ion-item>
<ion-label fixed>Email</ion-label>
<ion-input type="text" [(ngModel)]="email"></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>Password</ion-label>
<ion-input type="password" [(ngModel)]="password"></ion-input>
</ion-item>
</ion-list>
<ion-grid>
<ion-row>
<ion-col width-50>
<button ion-button block (click)="register()">Register</button>
</ion-col>
<ion-col width-50>
<button ion-button block (click)="login()">Login</button>
</ion-col>
</ion-row>
</ion-grid>
<a href="https://apps.ionic.io/app/302825af/auth/list">ไปยังหน้า App Ionic</a>
<br>
<a href="https://docs.ionic.io/api/endpoints/auth.html#delete-users-user_uuid">ไปยังหน้า การขอ Delete</a>
<br>
<a href="https://docs.ionic.io/api/http.html">ไปยังหน้า การขอ Api Http</a>
<br>
<a href="https://outlook.live.com/owa/?path=/mail/inbox">ไปยังหน้า Hotmail</a>
<br>
<a href="http://www.thaiseoboard.com/index.php/topic,389495.0.html">ไปยังหน้า เว็บบอร์ดที่ไปถาม 1</a>
<br>
<a href="https://ppantip.com/topic/36071266">ไปยังหน้า เว็บบอร์ดที่ไปถาม 2</a>
<br>
<a href="http://www.thaicreate.com/mobile/forum/126223.html">ไปยังหน้า เว็บบอร์ดที่ไปถาม 3</a>
</div>
<div *ngIf="auth.isAuthenticated()">
<h4>
User Profile
</h4>
<ion-list *ngIf="auth.isAuthenticated()">
<ion-item>
<ion-label fixed>Name</ion-label>
<ion-input class="right" type="text" [(ngModel)]="name"></ion-input>
</ion-item>
<ion-item>
<ion-label>Birthday</ion-label>
<ion-datetime displayFormat="MM/DD/YYYY" [(ngModel)]="birthday">
</ion-datetime>
</ion-item>
<ion-item>
<ion-label>Birthday2</ion-label>
<ion-input displayFormat="text" [(ngModel)]="birthday2">
</ion-input>
</ion-item>
</ion-list>
<ion-grid>
<ion-row>
<ion-col width-50>
<button ion-button color="secondary" block
(click)="save()">
Save
</button>
</ion-col>
<ion-col width-50>
<button ion-button color="dark" block
(click)="logout()">
Logout
</button>
</ion-col>
<ion-col width-50>
<button ion-button color="secondary" block
(click)="delete()">
delete
</button>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-content>
3. MySimpleAuth/src/pages/home/home.scss
.home-page {
ion-input.right > input {
text-align: right;
}
}
4. MySimpleAuth/src/pages/home/home.ts
import { Component } from '@angular/core';
import { NavController, LoadingController, ToastController } from 'ionic-angular';
import { Auth, User, UserDetails, IDetailedError } from '@ionic/cloud-angular';
@Component({templateUrl: 'home.html'})
export class HomePage {
public email: string = "";
public password: string = "";
public name: string = "";
public birthday: string = "";
public birthday2: string = "";
constructor(public navCtrl: NavController, public auth: Auth, public user: User, public loadingCtrl: LoadingController, public toastCtrl:
ToastController) {
this.initProfile();
}
private initProfile() {
if (this.auth.isAuthenticated()) {
this.email = this.user.get('email', '');
this.birthday = this.user.get('birthday', '');
this.birthday2 = this.user.get('birthday2', '');
}
}
register() {
//เริ่มรับค่า register
let details: UserDetails = {'email': this.email+"@hotmail.com", 'password': this.password};
let loader = this.loadingCtrl.create({content: "Registering user..."});
loader.present();
//ฟังก์ชั่นทำงานเมื่อกดปุ่ม register
this.auth.signup(details).then(() =>
{
console.log('User is now registered');
console.log(this.user);
loader.dismiss();
//this.auth.login ตัวทำการ login
return this.auth.login('basic', {'email': this.email+"@hotmail.com", 'password': this.password});}, (err: IDetailedError<string[]>) => { loader.dismiss();
for (let e of err.details) {
if (e === 'conflict_email') {
alert('Email already exists.');
} else {
alert('Error creating user.');
}
}
});
}
login() {
let details: UserDetails = {'email': this.email+"@hotmail.com", 'password':this.password};
//ฟังก์ชั่นนี้ไว้ป้องกันไม่ให้ผู้ลงทะเบียนคลิกปุ่มซ้ำหลายๆครั้ง
let loader = this.loadingCtrl.create({content: "Logging in user..."});
loader.present();
this.auth.login('basic', details).then((data) => {
console.log('Finished login');
this.initProfile();
loader.dismiss();
console.log(data);
console.log(this.user);
}, (err) => {
loader.dismiss();
alert('Login Error');
});
}
save() {
let toast = this.toastCtrl.create({message: 'User profile was saved successfully',position: 'bottom', duration:3000});
toast.present();
this.user.set('email', this.email);
this.user.set('birthday', this.birthday);
this.user.set('birthday2', this.birthday2);
this.user.save();
}
logout() {
this.auth.logout();
this.email = '';
this.password = '';
this.name = '';
this.birthday = '';
}
delete()
{
var request = require("home.html");
var token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjNmJjYmEyZi1iM2Q5LTQ4OGEtYWFhNy0xYmQ4ZDI0YjE0MzgifQ.es1iUVGbq6GR6LEUBbsxIU3DqJrdtw68ZJRHDyMsSrM"
var options = {
method: 'DELETE',
url: 'https://api.ionic.io/auth/users/id'+this.email+"@hotmail.com",
headers: {
'Authorization': 'Bearer ' + token,
'Content-Type': 'application/json'
}
};
request(options, function(err, response, body) {
if (err) throw new Error(err);
console.log(body);
});
}
}
ปล . จากข้อที่ 4 home .ts ในฟังก์ชั่น delete ยังผิดอยู่
เพราะเนื่องจากไม่รุ้จัก require อาจจะเป็นที่ตัวโค้ด api http ที่เอามาจาก ionic เป็นชนิด nodejs
ทำให้ไม่สามารถอ่านได้ในไฟล์ .ts
ปัญหาคือ ไม่รู้วิธีการเขียน ในไฟล์ js ที่สามารถใช้ร่วมกับ home.html home.ts home.scss
เพราะไม่มีตัวอย่างที่ตรงกับแบบตัวเองให้ดูครับ และเพิ่งเริ่มศึกษาเป็นสัปดาที่ 2 เอง
ใครพอทราบรบกวนซักนิดครับ เครียดหนักมากจริงๆ TT__TT
ขอบพระคุณอย่างสูง ถ้า อยู่กรุงเทพเจ้าของกระทู้เลี้ยงข้าวให้ได้เลยนะครับ