Ionic 4 , Angular 7 & Django [ Picture]

สร้างโปรเจคโดยให้ Django เป็น server ที่บันทึกข้อมูล และให้ Ionic ทำงานในส่วนของ client ในการติดต่อรับส่งข้อมูลมาแสดงผล

1.สร้าง server ที่ Django

install rest_framework และ แอพพลิเคชัน upload

 สร้าง model มาเก็บค่าที่จะรับจาก client

เพิ่มฟังก์ชันในการรับค่าจาก client

create url ในการเรียกค่า

จากนั้น runserver Django รอไว้

2.ทำงานในส่วน client

start ionic project ด้วยคำสั่ง ionic start upload 

ทำการ Importing HttpClientModule ใน app.module.ts

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

           และเพิ่ม  HttpClientModule ลงในส่วน import

เรียกใช้ service โดย

      ionic generate service uploading

จากนั้นใส่ link ที่ต้องการเรียกใช้ server

  DJANGO_API_SERVER: string = "http://127.0.0.1:8000";

  constructor(private http: HttpClient) { }

  public uploadFormData(formData) {

    return this.http.post<any>(`${this.DJANGO_API_SERVER}/upload/`, formData);

  }

สร้างหน้าการ upload ด้วยคำสั่ง

     ionic generate page upload

พิมพ์คำสั่ง npm install --save ng2-file-upload ลงในคอมมานเพื่อใช้งาน package สำหรับการจัดการการอัพโหลด

import คำสั่ง import { FileUploadModule } from 'ng2-file-upload'; ใน upload.module.ts

ประกาศตัวแปร และ สร้างฟังก์ชันสำหรับเรียกข้อมูลจาก server และส่งข้อมูลไปยัง server

แก้ไขหน้า html สำหรับการแสดงผล

จะได้ผลลัพธ์ดังนี้

 เมื่อเข้าไปตรวจสอบในส่วนของ server ก็พบว่าสามารถ เพิ่มข้อมูลไปบันทึกที่ฐานข้อมูลของ server ได้