ionic2 api http สอบถาม

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
ขอบพระคุณอย่างสูง  ถ้า อยู่กรุงเทพเจ้าของกระทู้เลี้ยงข้าวให้ได้เลยนะครับ
แสดงความคิดเห็น
โปรดศึกษาและยอมรับนโยบายข้อมูลส่วนบุคคลก่อนเริ่มใช้งาน อ่านเพิ่มเติมได้ที่นี่