- 110
- 501 344
Boppin' Code
Thailand
เข้าร่วมเมื่อ 4 พ.ย. 2019
สอนเขียน Website เขียนโปรแกรม และเทคนิคใช้งานเทคโนโลยีต่างๆ สำหรับการเป็น Developer
ติดต่อ sapphinebz@gmail.com
ติดตามเพจ facebook BoppinCode
สนับสนุนช่อง เพื่อเป็นกำลังใจในการทำคลิปถัดไป
ธนาคาร ttb เลขบัญชี 203-2-150-43-1
ธนดิตถ์ บุตร์หงษ์
โดย Thanadit Buthong
ติดต่อ sapphinebz@gmail.com
ติดตามเพจ facebook BoppinCode
สนับสนุนช่อง เพื่อเป็นกำลังใจในการทำคลิปถัดไป
ธนาคาร ttb เลขบัญชี 203-2-150-43-1
ธนดิตถ์ บุตร์หงษ์
โดย Thanadit Buthong
สร้าง Validatorใช้เองกับ FormControl ทำยังไง
Custom Validator ของ FormControl สร้างใช้เอง มาตรวจสอบเฉพาะทาง สร้างไม่ยาก
ตัวอย่างโค้ด
stackblitz.com/edit/angular-ivy-mwmetr?file=src/app/app.component.ts
angular-ivy-mwmetr.stackblitz.io
สูตรบัตรประชาชน
memo8.com/check-digit-thai-citizen-id-validator/
สอนเอาโค้ดขึ้น GitHub เอาลงจาก GitHub และการทำ version โค้ดของโปรเจค
th-cam.com/play/PLI_imISwfpmlv7h31LkVqRCr2MH-3yODJ.html
หัดเขียนเว็บด้วย Angular ตั้งแต่เริ่มต้น
th-cam.com/play/PLI_imISwfpmm9BJdhqtTt-vDcGDTsc7Fe.html
หัดเขียนเว็บตั้งแต่เริ่มต้นด้วย React Typescript
th-cam.com/play/PLI_imISwfpmlIOTqN4yAbQBolM5z0hn5i.html
#BoppinCode #Validator #Angular
ตัวอย่างโค้ด
stackblitz.com/edit/angular-ivy-mwmetr?file=src/app/app.component.ts
angular-ivy-mwmetr.stackblitz.io
สูตรบัตรประชาชน
memo8.com/check-digit-thai-citizen-id-validator/
สอนเอาโค้ดขึ้น GitHub เอาลงจาก GitHub และการทำ version โค้ดของโปรเจค
th-cam.com/play/PLI_imISwfpmlv7h31LkVqRCr2MH-3yODJ.html
หัดเขียนเว็บด้วย Angular ตั้งแต่เริ่มต้น
th-cam.com/play/PLI_imISwfpmm9BJdhqtTt-vDcGDTsc7Fe.html
หัดเขียนเว็บตั้งแต่เริ่มต้นด้วย React Typescript
th-cam.com/play/PLI_imISwfpmlIOTqN4yAbQBolM5z0hn5i.html
#BoppinCode #Validator #Angular
มุมมอง: 2 433
วีดีโอ
EP 4.0 เข้าใจพื้นฐานการแสดงผลเบื้องต้น ก่อนไป React Hook การนำค่าตัวแปรมาแสดง และ Event Handler
มุมมอง 1.1K2 ปีที่แล้ว
เข้าการแสดงผลพื้นฐาน จากตัวอย่างโปรแกรมง่ายๆแปลงค่าอุณหภูมิเซลเซียสเป็นฟาเรนไฮน์ นำค่าของตัวแปรมาแสดงผลบนหน้าเว็บ และการผูกเหตุการณ์ event handler และพื้นฐานการแสดงผลก่อนใช้ React Hook เรียน ReactJS reactjs.org/ เรียน Typescript www.typescriptlang.org/ สอนเอาโค้ดขึ้น GitHub เอาลงจาก GitHub และการทำ version โค้ดของโปรเจค th-cam.com/play/PLI_imISwfpmlv7h31LkVqRCr2MH-3yODJ.html หัดเขียนเว็บตั้งแต่...
แค่สร้าง Observable fromMatchMedia ก็ใช้ responsive component ได้แบบชิวๆ ด้วย RxJS
มุมมอง 2.2K2 ปีที่แล้ว
สร้าง Observable เพื่อใช้ responsive component Web API matchMedia developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia Web API mediaQueryList developer.mozilla.org/en-US/docs/Web/API/MediaQueryList StackBlitz Code stackblitz.com/edit/rxjs-r96os4?file=index.ts สอนเอาโค้ดขึ้น GitHub เอาลงจาก GitHub และการทำ version โค้ดของโปรเจค th-cam.com/play/PLI_imISwfpmlv7h31LkVqRCr2MH-3yODJ.html หัดเขี...
EP 25.0 ต่อ Frontend(Angular) ให้ทำงานกับ Backend ยังไง ถ้าติดคอ(CORS) แก้ไง🥹
มุมมอง 8K2 ปีที่แล้ว
เชื่อมต่อ Frontend Angular กับ Backend NestJS ทำยังไง แล้วปัญหา CORS policy เกิดจากอะไร แก้ยังไง หาคำตอบได้ในคลิปนี้ HttpClientModule ใช้งานยังไง th-cam.com/video/mLMtBlOWyRY/w-d-xo.html สร้าง interface เป็น Typescript ยังไง th-cam.com/video/9GkG58ryZws/w-d-xo.html สอนเอาโค้ดขึ้น GitHub เอาลงจาก GitHub และการทำ version โค้ดของโปรเจค th-cam.com/play/PLI_imISwfpmlv7h31LkVqRCr2MH-3yODJ.html หัดเขี...
ViewChild ยังไงให้ง่าย และ reactive ผูก event ยังไงให้ปัง 🤯 !
มุมมอง 3.8K2 ปีที่แล้ว
สอนอ้างอิงถึง Element ด้วย ViewChild แบบ ElementRef set attribute ต่างๆให้กับ element และการผูก event กับ element ด้วยเทคนิค Reactive Programming ด้วย RxJS โดยใช้ BehaviorSubject ViewChild getter setter ตัวแปร getter setter คืออะไรใช้ยังไง th-cam.com/video/GaI4uWVR6go/w-d-xo.html switchMap ทำงานยังไง th-cam.com/video/G4WEKQTFZms/w-d-xo.html code ของคลิปนี้ stackblitz.com/edit/angular-ivy-mdzgxy...
Promise กับ Observable ใครเจ๋งกว่ากัน ใช้งานต่างกันยังไง ?
มุมมอง 7K2 ปีที่แล้ว
Promise ใน javascript ต่างกับ Observable ใน RxJS ยังไง อันไหนใช้ดีกว่ากัน ติดตามได้ในคลิปนี้ โค้ดสำหรับคลิปนี้ stackblitz.com/edit/rxjs-hbxq96?file=index.ts ความเป็นจริงแล้ว Promise กับ Observable สามารถใช้งานร่วมกันได้อย่างมีประสิทธิภาพ โปรดติดตามคลิปถัดไป การใช้งาน Observable ร่วมกับ Promise 👨🔬 สอนเอาโค้ดขึ้น GitHub เอาลงจาก GitHub และการทำ version โค้ดของโปรเจค th-cam.com/play/PLI_imISwfpml...
ทำ Animation หมุนๆ ระหว่างรูปโหลดยังไง ด้วย Angular + RxJS
มุมมอง 4.5K2 ปีที่แล้ว
อย่าปล่อยให้ภาพที่โหลดช้าบนเว็บของเรา ทำให้ผู้ใช้งานหนีได้ มาทำ Animation ระหว่างโหลดภาพกันดีกว่า Directive คืออะไร th-cam.com/video/boJQ2SGGjdc/w-d-xo.html สอนเอาโค้ดขึ้น GitHub เอาลงจาก GitHub และการทำ version โค้ดของโปรเจค th-cam.com/play/PLI_imISwfpmlv7h31LkVqRCr2MH-3yODJ.html หัดเขียนเว็บด้วย Angular ตั้งแต่เริ่มต้น th-cam.com/play/PLI_imISwfpmm9BJdhqtTt-vDcGDTsc7Fe.html หัดเขียนเว็บตั้งแต...
EP 24.0 เริ่มต้นเขียน Back End API ด้วย NestJS ง่ายจริ๊ง !
มุมมอง 20K2 ปีที่แล้ว
สร้าง API ให้กับ Web Shopping ของเรากันต่อด้วย NestJS สอนเอาโค้ดขึ้น GitHub เอาลงจาก GitHub และการทำ version โค้ดของโปรเจค th-cam.com/play/PLI_imISwfpmlv7h31LkVqRCr2MH-3yODJ.html หัดเขียนเว็บด้วย Angular ตั้งแต่เริ่มต้น th-cam.com/play/PLI_imISwfpmm9BJdhqtTt-vDcGDTsc7Fe.html หัดเขียนเว็บตั้งแต่เริ่มต้นด้วย React Typescript th-cam.com/play/PLI_imISwfpmlIOTqN4yAbQBolM5z0hn5i.html NestJS nestjs.co...
ทำไมต้องใช้ switchMap ?
มุมมอง 4.7K2 ปีที่แล้ว
เล่าบอกปัญหา request response จัดการให้อยู่หมัดด้วย subscription และจัดการให้อยู่หมัดด้วย switchMap ยกตัวอย่างเคสด้วย Pokemon API 0:00 เริ่มคลิป 0:19 เขียนโค้ดยิง API 2:12 ผลลัพธ์ API แสดงผลบัค 2:50 เปิด Network Panel 5:50 concept วิธีแก้บัค 6:54 แก้ด้วย unsubscribe subscription 8:30 ใช้วิธี switchMap 11:11 อธิบาย switchMap ด้วย animation 14:57 ช่วง Bonus Tips switchMap มีกี่ท่า ใน RxJS กระบวนท...
Drag Drop ด้วย RxJS โค้ดสั้น รองรับทุก📱platform ทำได้ง่ายๆ
มุมมอง 1.4K2 ปีที่แล้ว
โค้ดของคลิปวีดีโอนี้ สำรวจดูโค้ดกันได้เลย stackblitz.com/edit/rxjs-sqknys?file=index.ts ใช้งานแบบ Angular Typescript stackblitz.com/edit/angular-ivy-uyamjq ใช้งานแบบ React Typescript stackblitz.com/edit/react-ts-yn3vuv?file=Pokemons.tsx ใช้งานแบบ Svelte Typescript ViteTS stackblitz.com/edit/vitejs-vite-qo3p5q?file=src/App.svelte รู้จัก RxJS Observable th-cam.com/play/PLI_imISwfpmmZOx2MvI3mLF0xU...
ขับเครื่องบิน ✈️ บน Web ด้วย 😎 RxJS และ Dynamic Component ของ Angular
มุมมอง 1.2K2 ปีที่แล้ว
GitHub โค้ดของคลิปวีดีโอนี้ สำรวจดูโค้ดกันได้เลย github.com/sapphinebz/ngAnimationPlane 0:00 เครื่องบินบินยังไง 0:48 ติดตั้งโปรเจค 1:52 แนวคิด Reactive Programming 4:21 ใช้ viewChild อ้างอิงถึง plane 4:50 หันหัวเครื่องบินทำยังไง ? 10:20 เคลื่อนที่เครื่องบินทำยังไง ? 14:49 ทำ animation จุดตำแหน่งที่เคลื่อนบินจะบินไปด้วย css Dynamic Component 20:28 จาก concatMap มาลองแบบ switchMap 20:13 แนะนำ ope...
EP 23.0 สร้าง Web Shopping ช่องค้นหาสินค้า และเทคนิค debounceTime และ auditTime - Angular
มุมมอง 4.2K2 ปีที่แล้ว
ในคลิปนี้ เราจะมาสร้าง component ช่องค้นหาสินค้า และทำ output รูปแบบใหม่ ด้วยเทคนิค debounceTime และ auditTime ที่ช่วยให้ประหยัดจำนวนครั้งในการค้นหาด้วยการดึงข้อมูลจาก API ngModel คืออะไร th-cam.com/video/WtOEIAde5Lc/w-d-xo.html RxJS Dev rxjs.dev/ รู้จักวิธีใช้ filter ใน Array th-cam.com/video/spcWAQLejiQ/w-d-xo.html รู้จัก RxJS Observable และ Subject th-cam.com/play/PLI_imISwfpmmZOx2MvI3mLF0xU...
EP 22.0 สร้าง Web Shopping สร้างตะกร้าด้วย primeicon และตกแต่ง Web ด้วย component style - Angular
มุมมอง 3.5K2 ปีที่แล้ว
ในคลิปนี้ เราจะได้รู้จักการใช้ icon การทำ component style css position relative และ position absolute และเทคนิคในการใช้ Angular schemetic ต่างๆ EP 23.0 เขียน CSS style ใน Angular ต้องเริ่มยังไง th-cam.com/video/VUSx7XqR9aw/w-d-xo.html วิธี add class และ attribute ใน Angular angular.io/guide/attribute-binding สอนเอาโค้ดขึ้น GitHub เอาลงจาก GitHub และการทำ version โค้ดของโปรเจค th-cam.com/play/PL...
รู้จัก Live Server, การแสดงผลแบบ block, และ basic CSS EP 3.0
มุมมอง 7312 ปีที่แล้ว
สำหรับเนื้อหาอื่นๆที่น่าสนใจ สามารถดูได้จาก playlist นี้ สอนเอาโค้ดขึ้น GitHub เอาลงจาก GitHub และการทำ version โค้ดของโปรเจค th-cam.com/play/PLI_imISwfpmlv7h31LkVqRCr2MH-3yODJ.html หัดเขียนเว็บด้วย Angular ตั้งแต่เริ่มต้น th-cam.com/play/PLI_imISwfpmm9BJdhqtTt-vDcGDTsc7Fe.html สอน RxJS หรือการเขียนโค้ดแบบ Reactive Programming th-cam.com/play/PLI_imISwfpmmZOx2MvI3mLF0xU0xPIY76.html #BoppinCode ...
Angular State Management ด้วย RxJS ตอนที่ 3 สร้างกระบวนการ Effect
มุมมอง 2.1K3 ปีที่แล้ว
เขียน state management ใน Angular ด้วย RxJS เพื่อใช้ความรู้ปูพื้นฐานก่อนที่จะไปเริ่ม Ngrx ตอนที่ 3 สร้าง Effect Angular State Management ด้วย RxJS ตอนที่ 2 th-cam.com/video/sXC0ksqkKMg/w-d-xo.html สอนเอาโค้ดขึ้น GitHub เอาลงจาก GitHub และการทำ version โค้ดของโปรเจค th-cam.com/play/PLI_imISwfpmlv7h31LkVqRCr2MH-3yODJ.html หัดเขียนเว็บด้วย Angular ตั้งแต่เริ่มต้น th-cam.com/play/PLI_imISwfpmm9BJdh...
มาสร้าง Web ของเราเองด้วยภาษา HTML กันเลย EP 2.0
มุมมอง 1.5K3 ปีที่แล้ว
มาสร้าง Web ของเราเองด้วยภาษา HTML กันเลย EP 2.0
อยากเป็นโปรแกรมเมอร์ อยากเขียนเว็บไซต์ ต้องเริ่มยังไง EP 1.0
มุมมอง 1.9K3 ปีที่แล้ว
อยากเป็นโปรแกรมเมอร์ อยากเขียนเว็บไซต์ ต้องเริ่มยังไง EP 1.0
ทำไมตัวแปรแบบ get set ถึงดีกว่า ใน Angular
มุมมอง 3.4K3 ปีที่แล้ว
ทำไมตัวแปรแบบ get set ถึงดีกว่า ใน Angular
Angular State Management ด้วย RxJS ตอนที่ 2 สร้างกระบวนการ Action, Reducer, Selector
มุมมอง 3.5K3 ปีที่แล้ว
Angular State Management ด้วย RxJS ตอนที่ 2 สร้างกระบวนการ Action, Reducer, Selector
Angular State Management ด้วย RxJS ตอนที่ 1 อธิบายโครงสร้าง state management คืออะไร
มุมมอง 3.8K3 ปีที่แล้ว
Angular State Management ด้วย RxJS ตอนที่ 1 อธิบายโครงสร้าง state management คืออะไร
async await ใน Promise ใช้ยังไง คืออะไร มารู้จักด้วย Pokemon API กันเลย
มุมมอง 2.3K3 ปีที่แล้ว
async await ใน Promise ใช้ยังไง คืออะไร มารู้จักด้วย Pokemon API กันเลย
addEventListener ทำงานยังไง ใช้ตอนไหน - javascript
มุมมอง 4K3 ปีที่แล้ว
addEventListener ทำงานยังไง ใช้ตอนไหน - javascript
อย่ายิง API หลายครั้งเกินความจำเป็น มารู้จัก interceptor และทำ caching กันดีกว่า - Angular
มุมมอง 5K3 ปีที่แล้ว
อย่ายิง API หลายครั้งเกินความจำเป็น มารู้จัก interceptor และทำ caching กันดีกว่า - Angular
เลิกทะเลาะกับ Typescript ได้แล้ว มารู้จักเครื่องหมาย ! กันดีกว่า
มุมมอง 2K3 ปีที่แล้ว
เลิกทะเลาะกับ Typescript ได้แล้ว มารู้จักเครื่องหมาย ! กันดีกว่า
ทำ animation เปิดปิด side menu แบบ ว๊าว! ว๊าว! ด้วยการใช้ css กับ class binding ใน angular
มุมมอง 2.7K3 ปีที่แล้ว
ทำ animation เปิดปิด side menu แบบ ว๊าว! ว๊าว! ด้วยการใช้ css กับ class binding ใน angular
Validate ใน formControl หลายตัวยังไง ใน ReactiveFormsModule
มุมมอง 3.2K3 ปีที่แล้ว
Validate ใน formControl หลายตัวยังไง ใน ReactiveFormsModule
filter หรือกรอง ข้อมูลใน Array ทำยังไง ใน javascript
มุมมอง 1.8K3 ปีที่แล้ว
filter หรือกรอง ข้อมูลใน Array ทำยังไง ใน javascript
สร้างหน้าฟอร์ม EP 2.2 - จัดการหน้าฟอร์มด้วย ReactiveFormsModule
มุมมอง 3.5K3 ปีที่แล้ว
สร้างหน้าฟอร์ม EP 2.2 - จัดการหน้าฟอร์มด้วย ReactiveFormsModule
สร้าง Workspace ด้วย Nx ใช้ Angular (frontend) และ NestJS (backend) ใน Repo เดียวกัน
มุมมอง 3.2K3 ปีที่แล้ว
สร้าง Workspace ด้วย Nx ใช้ Angular (frontend) และ NestJS (backend) ใน Repo เดียวกัน