touch typing

ภาษาอังกฤษ

โปรเจค instargram

code in : https://github.com/Freezzes/ProjectImage

วิดีโอ demo https://youtu.be/JRPGrTMEIJc

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 ได้

Ionic 4 & Angular 7 สูตรคูณ แบบ Local storage

ทำแอพพลิเคชันสูตรคูณ โดยให้ใส่ตัวเลขแม่สูตรคูณที่ต้องการลงในช่อง ENTER Number จากนั้นกดปุ่ม SHOW จะแสดง สูตรคูณแม่นั้นๆ โดยมีวิธีทำดังนี้

1 start project ด้วยคำสั่ง ionic start multiplication tabs

จะทำการสร้างโปรเจคชื่อ multiplication โดยมี tabs เริ่มต้น 3 tabs

2. แก้ไขหน้าการแสดงผลให้แสดงผล 2 tab คือ calculate และ history

3.ทดสอบการรับค่าจากช่องอินพุต

แก้ไขหน้า html เป็น

และแก้ไขในส่วน page.ts ให้ @ViewChild เพื่อเรียกค่าที่รับจาก html และเพิ่มฟังก์ชัน onclickMul() โดยเมื่อใรชีการกดปุ่มที่เรียกใช้ฟังก์ชันนี้จะให้ส่งค่าที่รับมาออกไปแสดง 

จะได้หน้าการแสดงผลดังนี้

ภาพซ้าย : หน้าเริ่มต้นก่อนการใส่ตัวเลข

ภาพขวา : การแสดงผลเมื่อใส่ตัวเลขและกดปุ่ม SHOW

4.ทำฟังก์ชันการคูณ

เปลี่ยนฟังก์ชัน onclickMul()ให้ทำการคูณค่าและส่งผลลัพธ์กับตัวคูณไปเก็บไว้ใน list 

จากนั้นแก้ไขหน้า html ให้ทำ loop เรียกค่าจาก list ที่เก็บค่าผลลัพธ์ไว้ออกมาแสดงผล

จะได้การแสดงผลดังนี้

4. ทำการเก็บค่าตัวเลขที่ใส่ลงในช่องรับข้อความด้วยการใช้ local storage เก็บค่าไว้

import storage ด้วยคำสั่ง
import { Storage } from '@ionic/storage';

ประกาศใน constructor

constructor(private storage: Storage){}

เพิ่มฟังก์ชัน savemul() ให้ทำการบันทึกข้อมูลลง storage และ showmul() เพื่อแสดงข้อมูลที่เก็บไว้ใน storage

จากนั้นในหน้าแสดงผลให้แสดงค่าตัวเลขที่มีการบันทึกไว้ด้วยจะได้ผลลัพธ์ดังนี้

ภาพซ้าย : ใส่เลข 1 ครั้งแรก เมื่อกด SHOW จะทำการแสดงสูตรคูณและบันทึกเลข 1 ลงในฐานข้อมูลครั้งแรก และเมื่อกด CONUT จะแสดงจำนวนครั้งที่บันทึกลงไปคือ 1 ครั้ง

ภาพกลาง : ใส่เลข 1 ลงไป กด SHOW และกด COUNT เป็นครั้งที่ 6

ภาพขวา : ใส่เลข 6 ลงไป กด SHOW และกด COUNT เป็นครั้งที่ 4

Ionic 4 & Angular 7 [ Firebase ]

Firebase คือ Platform ที่รวบรวมเครื่องมือต่าง ๆ สำหรับการจัดการในส่วนของ Backend หรือ Server side ซึ่งทำให้สามารถสร้าง Mobile Application ได้อย่างมีประสิทธิภาพ โดยใช้งานในส่วนของ Cloud Firestore ซึ่งเป็นบริการทางด้าน Database โดยได้ศึกษาการใช้งานและการติดต่อกนระหว่าง ionic กับ firebase ผ่านลิงก์ https://www.djamware.com/post/5b74e54f80aca74669894413/ionic-4-and-angular-6-tutorial-firebase-realtime-crud-mobile-app โดยในตัวอย่างแบ่งเป็น 6 ส่วน ดังนี้

1: Setup Firebase
เข้าเว็บไซต์ firebase.google.com กดเพิ่มโครงการใหม่ และ ตั้งชื่อโครงการ

2: Create a New App

โดยใช้คำสั่ง ionic start ionic-firebase-crud blank ในการเริ่มโปรเจคใหม่

3: Install and Configure Firebase Module
- รันคำสั่ง npm install --save firebase ในคอมมาน เพื่อติดตั้ง module
- เปิดไฟล์ app.component.ts และเพิ่ม code ส่วนimport
 import * as firebase from 'firebase';
กด < > ที่หน้าแรกของโปรเจค firebase และคัดลอก code ส่วน config ใส่ในส่วน
const config = { }; และ firebase.initializeApp(config); เพิ่มเข้าไปในส่วน initializeApp() {}

4: Add List of Bulletin Board
- import * as firebase from 'Firebase'; ไปในส่วนที่จะใช้งานฐานข้อมูล
- สร้างตัวแปรสำหรับรับข้อมูลมาเก็บลงในฐานข้อมูล
infos = [];
ref = firebase.database().ref('infos/');
- กำหนดค่าลงในส่วน constructor

constructor(public router: Router, public loadingController: LoadingController) {
  this.ref.on('value', resp => {
    this.infos = [];
    this.infos = snapshotToArray(resp);
  });
}

- เพิ่มฟังก์ชัน
1.สำหรับ response ค่าไปที่ firebase
export const snapshotToArray = snapshot => {
    let returnArr = [];

    snapshot.forEach(childSnapshot => {
        let item = childSnapshot.val();
        item.key = childSnapshot.key;
        returnArr.push(item);
    });

    return returnArr;
};
2.สำหรับเพิ่มหัวข้อ
addInfo() {
  this.router.navigate(['/add-info']);
}
3.สำหรับแก้ไข/เพิ่มคำอธิบาย
edit(key) {
  this.router.navigate(['/edit/'+key]);
}
4.สำหรับลบโดยเลือกจากหัวข้อ
async delete(key) {
  const alert = await this.alertController.create({
    header: 'Confirm!',
    message: 'Are you sure want to delete this info?',
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        cssClass: 'secondary',
        handler: (blah) => {
          console.log('cancel');
        }
      }, {
        text: 'Okay',
        handler: () => {
          firebase.database().ref('infos/'+key).remove();
        }
      }
    ]
  });

  await alert.present();
}
จากนั้นแก้ไขหน้า html ที่ใช้แสดงผล

5: Add Page for Create  Info
- ionic g page create ในคอมมาน เพื่อสร้างหน้าใหม่ที่ชื่อ create เพิ่ม
- import form ใน app/create.module.ts เพื่อใช้งานฟอร์ม
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
- กำหนดตัวแปรสำหรับส่งค่าไป firebase

ref = firebase.database().ref('infos/');
infoForm: FormGroup;

- กำหนดค่าใน constructor

constructor(private route: ActivatedRoute,
  public router: Router,
  private formBuilder: FormBuilder) {
    this.infoForm = this.formBuilder.group({
      'info_title' : [null, Validators.required],
      'info_description' : [null, Validators.required]
    });
  }

- เพิ่มฟังก์ชันสำหรับส่งค่าข้อมูลไป firebase

saveInfo() {
  let newInfo = firebase.database().ref('infos/').push();
  newInfo.set(this.infoForm.value);
  this.router.navigate(['/detail/'+newInfo.key]);
}

แก้ไขหน้า html ที่ใช้แสดงผล

6: Show Time!

[TDD] อธิบาย Commit (จบ)

Commit ที่ 13

742e005
 new URL, view and template to display lists

ตั้งค่าการเชื่อมโยง url ในโปรเจค มีการเปลี่ยนมาใช้ assertContains และเพิ่มฟังก์ชัน view_list ใน views.py
สร้างเทมเพลตใหม่โดยการใช้คำสั่งคัดลอกจากเทมเพลตเดิมที่มีอยู่และแก้ไขฟังก์ชันการใช้งานของเทมเพลตให้เหมาะสม


Commit ที่ 14

6b63788
move function to new class and create new url

เพิ่ม url และ ฟังก์ชันใหม่สำหรับ create list และสร้าง class ใหม่สำหรับการ test โดยย้ายฟังก์ชันเดิมมาใส่ไว้

Commit ที่ 15

561f0b3
create new model and test it

สร้าง model ใหม่ชื่อ List และเพิ่มตัวแปรให้ Item ที่มีอยู่ทำการ ForeignKey list มาจาก List

Commit ที่ 16

28ce562
Add unique URLs for each list

เพิ่ม url ใหม่ สำหรับ list ที่สร้างขึ้นมา และทดสอบการเรียกใช้ด้วย id

Commit ที่ 17

6118fbc
new URL + view for adding to existing lists. FT passes :-)

เพิ่มฟังก์ชันสำหรับการเพิ่ม item ใหม่
แก้ไขในเทมเพลตให้ส่งค่าไปที่ url /lists/{{ list.id }}/add_item และให้วน loop ใน list แล้วเรียก item ใน List ออกมาแสดงแทนที่การเรียก item โดยตรง

Commit ที่ 18

4179a2c
create new url for app list

แก้ไข url โดยการเพิ่ม url ของ app list  และให้ superlists include url จาก list ไปเรียกใช้

Ionic 4 & Angular 7 CRUD Mobile Apps [continue]

5: View List of Data and Delete

- แก้ไขหน้า Home สำหรับแสดงข้อมูลสินค้าทั้งหมดที่มี โดยแก้ไขที่ไฟล์ home.page.ts โดยการ import module เข้ามาและสร้าง list สำหรับเก็บข้อมูลสินค้าและ sync ไปที่ฟังก์ชัน getProduct() เพื่อเรียกข้อมูลออกมาแสดง
- แก้ไข html ให้แสดงสินค้าทั้งหมดและเมื่อกดที่สินค้าให้เปลี่ยนไปยังหน้าแสดงรายละเอียด ( Details )

6: Display Data Details

- รับ id ของสินค้าเข้ามา และแสดงรายละเอียดข้อมูลตาม id
- เมื่อแสดงรยละเอียดแล้วผู้ใช้สามารถทำการแก้ไข หรือ ลบ สินค้านั้นๆ ได้ โดยการใช้งานฟังก์ชันลบ หรือ ฟังก์ชันแก้ไข

- แก้ไข html ให้แสดงรายละเอียด ปุ่มลบ และปุ่มแก้ไขข้อมูล

7: Edit and Update Data

- แก้ไขในส่วนของ tab edit โดยการใช้ฟังก์ชัน getProduct ในการเรียกข้อมูลสินค้าผ่าน id ของสินค้า และใช้ฟังก์ชัน onForm มาใช้ในการรับข้อมูลที่แก้ไขและเรียกใช้ฟังก์ชัน updateProduct ในการอัพเดทข้อมูลของสินค้าให้เป็นไปตามที่ได้แก้ไข
- แก้ไข html ให้แสดงฟอร์มการแก้ไข และปุ่ม submit

8: Add Data

- เพิ่มการทำงานในส่วนของการเพิ่มข้อมูลสินค้า โดยการใช้ Form รับ input เข้ามาและนำไปใช้ที่ฟังก์ชัน addProduct เพื่อเพิ่มข้อมูลสินค้า
- แก้ไข html ให้แสดงฟอร์มการเพิ่มข้อมูล และปุ่ม submit

9: Run and Test The App

- save and run App ด้วยคำสั่ง ionic serve -l

การแสดงผล

หน้า HOME

หน้า ADD

หน้า EDIT

ปัญหา :

ไม่มีข้อมูลให้นำมาแสดง