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

ปัญหา :

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

Ionic 4 & Angular 7 CRUD Mobile Apps

ศึกษาตาม tutorial จากเว็บไซต์ https://www.djamware.com/post/5be52ce280aca72b942e31bc/ionic-4-angular-7-and-cordova-tutorial-build-crud-mobile-apps ซึ่งเนื้อหาภายในเป็นการสร้างแอพพลิเคชันที่แสดงข้อมูลสินค้าได้แก่ ชื่อสินค้า ราคา และ คำอธิบาย โดยสามารถทำการ เพิ่ม ลบ เรียกดู และ แก้ไขข้อมูลได้ โดยแบ่งการสร้างเป็น 9 part ดังนี้

1: Create a New Application

เริ่มสร้างโปรเจคด้วยคำสั่ง ionic start ionic4-angular7-crud ใน command line จะได้โฟลเดอร์ของโปรเจค

2: Install Material and CDK

ติดตั้งสิ่งที่จำเป็นในการใช้งานลงไปในโปรเจค โดย

- พิมพ์คำสั่งใน command line

ng add @angular/material

- import Module ใน app.module.ts

import {

  MatInputModule,

  MatPaginatorModule,

  MatProgressSpinnerModule,

  MatSortModule,

  MatTableModule,

  MatIconModule,

  MatButtonModule,

  MatCardModule,

  MatFormFieldModule } from "@angular/material";

import { DragDropModule } from '@angular/cdk/drag-drop';

import { ScrollingModule } from '@angular/cdk/scrolling';

- register all module in @ngModule

imports: [

  BrowserModule,

  IonicModule.forRoot(),

  AppRoutingModule,

  BrowserAnimationsModule,

  DragDropModule,

  ScrollingModule,

  MatInputModule,

  MatPaginatorModule,

  MatProgressSpinnerModule,

  MatSortModule,

  MatTableModule,

  MatIconModule,

  MatButtonModule,

  MatCardModule,

  MatFormFieldModule

],

3: Create RESTful API Service

REST ย่อมาจาก Representational State Transfer เป็นรูปแบบหนึ่งในการออกแบบ open web technology เป็นการทำให้ข้อมูลอยู่ในรูปแบบของ resource ส่วนการกระทำต่าง ๆ เป็นไปตาม HTTP  Method (GET, POST, PUT, DELETE) และทำงานแบบ Stateless ทำให้สามารถสามารถพัฒนาได้ง่ายเนื่องจากอยู่บนมาตรฐาน HTTP และมีประสิทธิภาพในการทำงานที่ดี

- import module

- สร้าง class Product

- generate service ด้วยคำสั่ง ng g service api ใน command line

- กำหนด constant ใน src/app/api.service.ts

const httpOptions = {

  headers: new HttpHeaders({'Content-Type': 'application/json'})

};

const apiUrl = "/api/v1/products";

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

4: Modify Tabs Page

- สร้าง tab Details ด้วยคำสั่ง ionic g page details

- แก้ไขหน้า tab1 tab2 tab3 เดิมที่มีอยู่เป็น Home Edit Add และแก้ไข code ภายในให้เรียบร้อย

- import หน้าต่างๆมาที่ tabs และกำหนด router ในการ route ไปยังหน้าการใช้งานต่างๆ โดยกำหนดให้หน้าแรกเป็นหน้า Home

const routes: Routes = [

  {

    path: 'tabs',

    component: TabsPage,

    children: [

      {

        path: 'home',

        children: [

            {

              path: '',

              loadChildren: '../home/home.module#HomePageModule'

            }

          ]

      },

      {

        path: 'add',

        children: [

          {

            path: '',

            loadChildren: '../add/add.module#AddPageModule'

          }

        ]

      },

      {

        path: ':id',

        children: [

          {

            path: '',

            loadChildren: '../edit/edit.module#EditPageModule'

          }

        ]

      },

      {

        path: ':id',

        children: [

          {

            path: '',

            loadChildren: '../details/details.module#DetailsPageModule'

          }

        ]       

      }

    ]

  },

  {

    path: '',

    redirectTo: '/tabs/home',

    pathMatch: 'full'

  }

];

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

Touch Typing [update]

ทดสอบผ่านเว็บไซต์ https://10fastfingers.com/typing-test/english

Angular

Angular
คือ เฟรมเวิร์ค (framework) ที่พัฒนาโดย Google สำหรับสร้างแอพลิเคชั่นในฝั่ง Client ในรูปแบบ Single Page Applications ก็คือแอพพลิเคชันถูกโหลดมารวมในหน้าเดียว โดยติดตั้ง npm คือ
Node Package Manager เป็นการจัดการ Package ต่างๆ ที่ถูกติดตั้งบนแอพพลิเคชันที่ถูกติดตั้งมาพร้อมกับ Node.js โดยมีการใช้งานผ่านไฟล์หลัก 3 ไฟล์ คือ :
app.component.ts เป็นการ code ส่วนของ logic โดยเขียนในรูปแบบ TypeScript.
app.component.html เป็นการกำหนด template โดยเขียนในรูปแบบ HTML.
app.component.css เป็นการกำหนด CSS styles

คำสั่งหลัก

ng new my-app      สร้างแอพใหม่ชื่อ my-app

ng serve แสดง link http://localhost:4200/ ให้นำไปใช้งาน

ng serve --open                               เปิด browser http://localhost:4200/ โดยอัตโนมัติ

ng generate component heroes สร้าง component ใหม่ชื่อ heroes

Test ครั้งที่ 2

ทดสอบการเปิดเว็บไซต์
ดู Header ว่าตรงหรือไม่
ทดสอบการเพิ่มคำถามเข้าไป

https://github.com/Freezzes/testtwo

Touch typing

ทดสอบผ่านเว็บไซต์ https://10fastfingers.com/typing-test/english

ภาษาอังกฤษ

ภาษาไทย

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

Commit ที่ 9

caa1dd6
Model for list Items and associated migration

เริ่มนำ models เข้ามาใช้งาน และทดสอบการบันทึก object ใหม่ลงใน model โดยเมื่อเรายังไม่ได้ทำการสร้างตัว model เมื่อเราทำการ test จะหา model ไม่พบ และเมื่อเราสร้าง model แล้วก็ต้องทำการ migrate model ด้วย เพื่อบอกให้ฐานข้อมูลรับทราบว่ามีการเปลี่ยนแปลง model และเมื่อมีการเปลี่ยนแปลงข้อมูลใน model จะต้องทำการตั้ง default และ makemigrations ใหม่ทุกครั้ง


Commit ที่ 10

f894a48
Redirect after POST, and show all items in template

บันทึกข้อความที่ใส่ลงในช่อง input เข้าฐานข้อมูลโดยเริ่มจากการ test ว่ามีการบันทึกข้อมูลหรือไม่โดยการรับคำที่ใส่ลงใน input มาเก็บในตัวแปร และ save ลงในฐานข้อมูล(เมื่อเปิดขึ้นมาจะเกิด error เนื่องจากยังไม่มี input) หลังจากนั้นเพิ่มฟังก์ชันให้บันทึกลงในฐานข้อมูลโดยการกำหนด test ให้เป็นข้อความหนึ่ง เมื่อมีการรัน test ข้อความนั้นจะไปปรากฏในส่วนของช่อง input และถูกส่งมาบันทึกลงบนฐานข้อมูลด้วย method POST และแสดงผลบนเว็บไซต์ด้วยการ return redirect มาที่หน้าเดิม และให้แสดงผลครั้งที่รันกับข้อความที่แสดงแต่ละครั้งที่รัน

Commit ที่ 11

eb983d5 

make functional_tests an app, use LiveServerTestCase

แก้ไขฟังก์ชัน functional test โดยไม่ใช้ setUp และ tearDown โดยการเปลี่ยนไปใช้ class LiveServerTestCase ซึ่งเป็นความสามารถของ Django โดยเมื่อเรารัน test ใหม่ข้อมูลเดิมที่ได้รันและบันทึกไว้ก็จะหายไปและเป็นการเริ่มใหม่เสมอ และจะสังเกตุเห็นได้ว่า url เปลี่ยนไป จาก 8000 เป็น 62582 ซึ่งเป็น url จาก LiveServerTestCase

Commit ที่ 12

0d4e613 

try to get url

เปลี่ยน time.sleeps เป็น ฟังก์ชัน wait_for_row_in_list_table และกำหนดเวลาในการรอ test ให้มีขอบข่ายที่ชัดเจน 

เพิ่ม url สำหรับการทำงานเฉพาะอย่าง ใช้ assertRegex สำหรับตรวจสอบ regular expression แล้วจึงเพิ่มการ test เพื่อดู url

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

Commit ที่ 5

28ed91e
Functional test now checks we can input a to-do item

เพิ่มความสนใจการ test ไปที่ส่วน header ด้วย ทำให้เกิด error เนื่องจากไม่มีการกำหนด header ไว้

Commit ที่ 6

6dc0830
Refactor home page view to use a template

สร้างเทมเพลตมาใช้งาน และ ทดลอง test การเรียกใช้งานเทมเพลตในตอนแรกจะมีการ error เนื่องจากยังไม่มีการ install apps และเมื่อ installs app แล้วก็จะใช้งานได้

Commit ที่ 7

c540754
Front page HTML now generated from a template

เพิ่มในส่วนของ header ลงไปในเทมเพลต ทำให้เทมเพลตสามารถเรียกใช้งานได้แล้วไม่เกิด error เมื่อ test ที่ส่วน header

Commit ที่ 8

1940dd3
change functional test and home.html

ใช้งาน method POST ในเทมเพลต โดยการใส่ลงใน form และทำการเพิ่ม time.sleep จาก 1 เป็น 10 (time.sleep เป็นการกำหนดค่าเวลาที่จะทำการหยุดการทดสอบชั่วคราวและแสดงผลหน้าต่างเว็บไซต์ที่ได้) ซึ่งเมื่อมีการใช้ method POST ทำให้หน้าเว็บแสดงค่า error เนื่องจากไม่มีการใส่ tag CSRF

หลังจากนั้นมีการกำหนดค่า functional test สนใจไปที่การใส่ input และ การเรียกข้อความออกมาแสดงผล โดยการกำหนดให้รับข้อความจากช่อง input มาแสดงในส่วนของ table โดยการเรียกมาใช้แบบ dict.get โดยเมื่อทำการใส่ข้อความลงไปในช่อง input และกด enter ข้อความที่ใส่จะไปปรากฏทางด้านล่างในส่วนที่เรียกผลลัพธ์ออกมาแสดง

ใส่ตัวอักษร y ลงในช่อง input

แสดงผลเป็นตัวอักษร y ที่ด้านล่าง

[TDD] อธิบาย Commit

commit ที่ 1

f26b0fe
First commit

เริ่มสร้าง functional_tests.py เพื่อทดสอบว่า Django พร้อมใช้งานแล้วและทดสอบการทำงานโดย
- webdriver แสดงผลการเปิดหน้าเว็บบน Firefox
- เปิดหน้าเว็บที่คาดว่าจะได้จาก local
- ดูว่า title ที่แสดงเหมือนกับชื่อที่ assert
จากนั้นสร้างโปรเจคชื่อ superlists ไว้


commit ที่ 2

e8533ab
Add app for lists, with deliberately failing unit test

บทที่2
ลอง test ว่ามี To-Do อยู่ใน title หรือไม่ จากนั้นเปลี่ยนวิธีการทดสอบโดยการ import module unittest มาใช้โดย
- สร้าง class ที่ใช้ในการทดสอบ ซึ่งใน class สามารถมีได้หลายฟังก์ชันทดสอบ
- setUp และ tearDown เป็น method พิเศาษที่จะทำงานตอนเริ่มและยุติการ test
- ถ้ามีการ test แล้ว fail จะแสดง error message 'Finish the test!'
บทที่3
ต้องการสร้างหน้า Home page
- สร้างแอพใหม่ชื่อ lists
- ทำการ test ทั้ง 2 แบบ คือ test ด้วย functional_tests.py และ test ด้วย unittest เนื่องจาก
functional_tests.py  เป็นการ test โดยการเปิดหน้าเว็บขึ้นมาและแสดงในแบบของการใช้งานของผู้ใช้ ซึ่งหากมีส่วนที่เออเร่อ จะทำให้เว็บไม่ทำงาน
unittest เป็นการ test ในส่วนของผู้พัฒนา ซึ่งจะไม่มีการเรียกเปิดหน้าเว็บใดๆขึ้นมา ซึ่งการ test จะสามารถแยก test เป็นส่วนๆได้

ทดสอบผ่าน py functional_tests.py 

ทดสอบผ่าน py manage.py test

Commit ที่ 3

0c5dfe2
First unit test and url mapping, dummy view

- test การใช้งาน url และ ฟังก์ชันใน views โดยการ import จาก views.py มา test ใน test.py จะเห็นว่า error เนื่องจากใน views.py ยังไม่มีการตั้งค่า home page
- เมื่อตั้งค่า homepage ใน views.py แล้ว ก็ต้องตั้งค่า url ด้วย เพื่อเรียกใช้งานฟังก์ชันใน views.py เมื่อ test ด้วย py manage.py test จะเห็นว่าสามารถทำงานได้แล้ว


Commit ที่ 4

816aef3
Basic view now returns minimal HTML

เพิ่มการ test เพื่อทดสอบดูหน้า homepage ให้แสดง title เป็น To-Do lists การทดสอบให้รันด้วย unit test หากเจอข้อผิดพลาดก็ให้แก้ไขและรันซ้ำจนกว่าจะได้ผลลัพธ์ตามที่ต้องการ
- เปลี่ยนแปลงฟังก์ชันใน views.py ให้ def Home_page return title เป็น To-Do lists
- เมื่อทดสอบ unit test ได้ผลลัพธ์ตามที่ต้องการแล้ว ก็ให้ทดสอบด้วย functional_tests ซ้ำอีกครั้ง
- ทดสอบเปิดหน้าเว็บ ทำงานได้

หน้าเว็บแสดง title เป็น To-Do lists ตามที่ต้องการ

TDD

            TDD ย่อมาจาก Test Driven Development ที่หมายถึงการพัฒนาโดยการสร้าง test ขึ้นมาก่อน และทำการ test ตามการทำงานย่อยของโปรแกรมที่เราออกแบบ และเมื่อ test ผ่านแล้วจึงนำโค้ดไปใช้งานได้อย่างมั่นใจ ทำให้การทำงานมีประสิทธิภาพมากขึ้น
 

            โดยในการ test ครั้งนี้ จะใช้ selenium 3 และ geckodriver test ผ่าน Firefox