Bài đăng

Make AI with State Design Pattern

Hình ảnh
Hôm nay đang trong thời gian chạy deadline nhập môn kỹ thuật phần mềm , cụ thể là con game "The Walker" của team tụi mình , mình cần phải làm một con AI cụ thể là con zombie với các chức năng : tìm đường , tự động tấn công trong phạm vi cố định , chuyển sang trạng thái đứng yên khi ông có người chơi đứng gần , vân vân mây mây. Đây có lẽ là một tính năng rất bình thường , mọi chuyện vẫn suôn sẻ cho đến khi mình thêm 1 state mới và cứ như vậy code của mình hầu như phải sửa đi sửa lại nhìn rất không được clean theo phong cách OOP mà mình hướng đến Trong phạm vi bài viết này mình sẽ nói cách làm ban đầu của mình và sự cải tiến khi dùng State Design Pattern Cách giải quyết ban đầu Mình nghĩ mọi người đều sẽ nghĩ rằng : tạo 1 enum cho zombie , và dùng if else để thay đổi trạng thái của nó ví dụ : enum Status { Idle, Chase, } IEnumerator AIZombie() { float dis = Vector3.Distance(transform.position, player.transform.position); switch (W...

Connect NodeJS Express FW and DB SQL Server

Hình ảnh
Heyyo lại là mình đây. Hôm nay mình sẽ hướng dẫn các bạn cách kết nối back-end Nodejs sử dụng Express frameword với DB là SQL Server. SQL Server thì không phải bàn rồi, nó được ưu tiên khởi đầu ở các trường nên rất được đông đảo các bạn sinh viên biết đến. Thường thì với Nodejs back-end người ta nghĩ ngay đến Database là MongoDB cho phù hợp với MERN (MongoDB, Expressjs, React, Nodejs) hay MEAN (MongoDB, Expressjs, Angular, Nodejs) Stack, nhưng với từng nhu cầu của dự án mà ta có thể chọn một loại DB phù hợp Oke bắt đầu thôi ! Phần SQL Server Trước tiên ta cần enable TCP/IP protocol của SQL Server bằng cách mở Sql Server Configuration Để việc enable này được apply ta cần restart lại Service SQL Server (Right Click >> Restart) Ta đặt một PORT mặc định cho TCP/IP Protocol (Right Click >> Properties). Ở đây là 1433 do Driver SQL Server phía back-end sử dụng PORT này Sau bước này, ta cần Restart lại Service SQL Server tương tự bước trên. Đây là các thiết lập cứng cho SQL Serve...

Connect front-end React and back-end Express

Hình ảnh
Có lẽ khi mới bắt đầu bước vào con đường lập trình website thì còn khá nhiều anh em DEV mơ hồ về việc một website thực thụ có cả front end và back end tích hợp với nhau như thế nào. Chính vì thế, hôm nay mình sẽ DEMO cho các bạn cách để front end và back end giao tiếp với nhau. Trong bài viết này mình chỉ dừng lại ở mức độ minh họa với front end reactjs và back end expressjs, tạm thời chưa tích hợp DB. Các bạn có thể tham khảo cách kết nối với DB tương ứng ở trang tài liệu chính thức nhé Oke bắt đầu thôi Phần Server Chúng ta sẽ bắt đầu với phần Server trước nhé. Ta tạo 1 folder ví dụ: react-express. Sau đó mở bằng vscode và bắt dầu dự án với CLI: npm init Enter các thông tin của project, các bạn có thể bỏ qua cũng không sao. Sau bước này ta được 1 file package.json để quản lí các dependencies của dự án. Tại đây ta cài đặt 3 modules là express, concurrently, cors . Express thì chắc không cần nói đến nữa vì nó khá là quen thuộc với các anh em DEV, còn module concurrently dùng để nối 2 h...

Master về con trỏ this - cách khắc phục các lỗi thường gặp

Trong blog lần này mình sẽ chia sẽ tổng quan về con trỏ this , và một số lỗi thường gặp , các câu hỏi này rất rất hay xuất hiện trong các buổi interview và nó nằm trong các vấn đề nâng cao của javascript  This đối với những bạn mới học thì có vẻ nó khá đơn giản , vì các bạn chỉ nghĩ đơn giản là nó sẽ refer đến object chứa nó ,  đúng nhưng chưa đủ ,  vì có lẽ các bạn chưa gặp qua nhiều vấn đề chuyên sâu về this Tổng quan this keyword Như trên , thì cơ bản this là refer(tham chiếu) đến object chứa nó , nhớ nhé : LÀ OBJECT CHỨA NÓ để tí nữa mình còn nhắc lại , đối với các newbie thì sẽ hiểu như thế này Thái là con trai nhưng anh ấy thích trai Thắng là con trai nhưng anh ấy lại thích ngắm trai 6 múi  ở ví dụ trên , thì Thái và Thắng là một đối tượng , và anh ấy là đại từ nhân xưng thay thế cho Thái và Thắng => this =  anh ấy , và object =  Thái và Thắng Ví dụ: var  user = {     name : "Vo Minh Tan", ...

Static Web Craping với NodeJS và Cheerio

Hình ảnh
Chắc hẳn từ khóa này các bạn đã được nghe đến ở đâu đó. Vậy, nó là gì ? Trong bài viết này mình sẽ giới thiệu với các bạn một kĩ thuật khá là hay ho và được giới Developer sử dụng rất nhiều chứ không riêng gì các bạn viết Web. Web Scraping là kĩ thuật thu thập thông tin của một Website bằng việc request đến url của trang cần lấy dữ liệu và download file html DOM của url đó. Trong Web Scraping chúng ta đã phần nào sử dụng đến Web Crawler. Vậy 2 thằng này khác nhau như thế nào ? Hai khái niệm này có sự liên quan với nhau. Web Scraping là quá trình thu thập thông tin từ một url cho trước. Còn Web Crawler sẽ download toàn bộ nội dung của trang đồng thời tìm tất cả các liên kết trong trang đó và tiếp tục download chúng, khi thao tác tải hoàn tất data sẽ được đánh chỉ số index rồi add on database . Thông thường ta sử dụng kĩ thuật Scraping để thu một số dữ liệu cần thiết của trang chứ không lấy hết toàn bộ. Một số việc mà ta có thể áp dụng kĩ thuật này là: lấy data như giá, hình ản...

Thu Thập Dữ liệu Trang Web (Web Scraping) với PUPPETEER

Hình ảnh
Khi cần dữ liệu của 1 trang web nào đó, trang web đó có thể cung cấp API cho ta kết xuất thông tin ở dạng JSON. Nhưng trong nhiều trường hợp, nếu không có API thì ta phải đi cào dữ liệu từ trang bằng cách mở Google Dev Tools và code qq gì đó lấy thông tin ở các element trong trang và có trích xuất được dữ liệu. Có khá nhiều công cụ phục vụ cho việc scraping, tùy theo ngôn ngữ bạn sử dụng. Trong bài viết này mình sẽ giới thiệu Puppeteer, một thư viện của Nodejs. Một số kiến thức bạn cần có trước khi bắt đầu: + Javascript, Nodejs + Async await trong Javascript + Render được 1 trang html đơn giản (có thể sử dụng Pugjs) (có thể biết sau cũng được) Đầu tiên, chúng ta tạo một project để test nhé (Lưu ý đặt tên khác Puppeteer (tên package) vì khi lưu vào file Package.json sẽ báo lỗi đấy) + Mở cửa sổ cmd tại folder project, gõ lệnh npm init: tạo file package.json lưu thông tin project, các module sử dụng... + Gõ npm install puppeteer --save Bước thiết lập project hoàn tất, chúng ta bắt đầu với...

Quy tắc Tổ chức Properties CSS dễ đọc, dễ hiểu

Hình ảnh
Nếu như HTML là cái khung quy định các element của 1 trang web thì CSS giúp hiển thị các element như ý muốn, giúp tạo ra giao diện trang đẹp hơn, bắt mắt hơn thu hút người truy cập. Với những dự án lớn, 1 element CSS (class, id, tag) có hàng tá các properties với những cách viết khác nhau lộn xộn sẽ làm cho người khác trong team khó đọc hiểu những dòng CSS, nên có những quy tắc chung trong việc viết các thuộc tính (properties) để dễ dàng đọc, dễ dàng refactor sau này. .messy-class { font-size: 20px; margin-top: 50px; width: 100%; border-top-right-radius: 10px; background-color: black; color: white; border: 2px solid lavender; font-weight: bold; } Nhìn vào CSS của class trên, để tìm 1 properties phải dò từ trên xuống dưới, chưa nói đến những đoạn dự án lớn chứa nhiều properties sắp xếp lộn xộn trong 1 group CSS. Đối với class trên, nên có cách viết đẹp hơn. .organized-class { margin-top: 50px; width: 100%; border: 2px solid lavender; border-top-right-radius: 10px; color: ...