Bài đăng

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: ...

Làm thế nào để Deploy 1 ứng dụng ReactJS sử dụng Github Pages ?

Hình ảnh
Có phải bạn đã từng bắt đầu với một dự án ReactJS và sau khi hoàn thành bạn muốn mọi người có thể thưởng thức thành quả cũng như sử dụng những điều tuyệt vời mà bạn đã tạo ra thì đây chính là bài viết mà các bạn đang tìm kiếm. Chắc hẳn bạn đã nghe nói đến kha khá nhiều cách để mang sản phẩm của mình public đến mọi người chẳn hạn mua một tên miền ( Domain ) rồi thuê một server ( Host ) để up code của các bạn lên và chạy với tên miền đấy. Cách này đang được dùng hầu hết với các trang web hiện nay nhưng đối với các bạn mới bắt đầu thì việc này có vẻ hơi khó khăn một chút. Chính vì thế hôm nay mình sẽ hướng dẫn các bạn một cách để Deploy một dự án tĩnh bắt đầu bằng create react app dễ dàng hơn rất nhiều đó là: sử dụng một package của npm có tên gh-pages để public ứng dụng của các bạn một cách dễ dàng và nhanh chóng. * Yêu cầu: Bạn cần có một tài khoản Github Cài đặt Git CLI trên máy của bạn Cài đặt NodeJS và npm Bạn cần dùng bản Node 8.10.0 trở lên. Nếu bạn đang dùng bản củ hơn thì h...