Báo cáo thực tập xây dựng WEBSITE với NEXTJS và PHP PHALCON

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO THỰC TẬP XÂY DỰNG WEBSITE VỚI NEXTJS VÀ PHP PHALCON Công ty thực tập: Công ty Cổ phần CRB Việt Nam Người phụ trách: Nguyễn Đức Anh Thực tập sinh: Bành Thanh Sơn TP Hồ Chí Minh, 14 tháng năm 2021 LỜI MỞ ĐẦU Sự phát triển mạnh mẽ không ngừng công nghệ thông tin mạng internet chuyển nhiều ngành nghề từ hình thức hoạt động thủ cơng sang số hóa hoạt động mạng internet Đóng góp vào cơng số hóa khơng thể phủ nhận tầm quan trọng hệ thống website Công nghệ web từ tạo đến phát triển vượt bậc, công nghệ hỗ trợ cho việc xây dựng website phát triển nhanh vũ bão, đặc biệt năm gần dẫn hầu hết doanh nghiệp, hay chí cá nhân, muốn người dễ tiếp cận với phải cần phát triển website thân thiện với người dùng, phổ biến tin cậy Với mong muốn đơn giản hóa quy trình xây dựng tận dụng hết lợi công nghệ web, nhiều thư viện framework cho đời năm gần đây, ReactJS, NextJS PHP Phalcon số Trong thời gian thực tập Cơng ty Cổ phần CRB Việt Nam, em tham gia vào dự án thực tế dự án thức cơng ty, đóng góp vào dự án tham gia từ mặt ý tưởng lẫn kỹ thuật, áp dụng triệt để công nghệ ReactJS, NextJS PHP Phalcon LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty Cổ phần CRB Việt Nam tạo điều kiện cho em có hội thực tập quý cơng ty Chỉ thời gian ngắn khóa thực tập, nhờ hướng dẫn anh phụ trách anh chị nhân viên khác công ty, em tiếp thu nhiều kiến thức quan trọng để xây dựng website sử dụng NextJS PHP Phalcon Đặc biệt em xin gửi lời cảm ơn lòng biết ơn sâu sắc đến anh Đức Anh, anh hướng dẫn, giúp đỡ cho em tận tình khó khăn cơng việc khó khăn việc làm quen với mơi trường làm việc nhóm Hỗ trợ em nhiều vấn đề cách làm việc trình xây dựng dự án Anh dẫn em cách làm báo cáo, lên kế hoạch, kỹ thiếu, training cho em kiến thức quan trọng để làm sản phẩm suốt thời gian qua Và xin cảm ơn thầy (cô) khoa Công nghệ phần mềm hỗ trợ, tạo điều kiện em làm báo cáo NHẬN XÉT CỦA KHOA Mục Lục LỜI MỞ ĐẦU LỜI CẢM ƠN CHƯƠNG : GIỚI THIỆU CÔNG TY THỰC TẬP CHƯƠNG : NỘI DUNG THỰC TẬP 2.1 Tìm hiểu cơng ty chương trình thực tập 2.2 Nghiên cứu kĩ thuật .7 2.2.1 ReactJS JavaScript ReactJS gì? Ưu điểm? Nhược điểm? 2.2.2 NextJS 10 NextJS gì? 10 Ưu điểm? 10 Nhược điểm? 10 2.2.3 PHP Phalcon 11 PHP Phalcon gì? 11 Ưu điểm? 11 Nhược điểm? 12 2.3 Thực Project 13 2.4 Lịch làm việc 13 CHƯƠNG : CHI TIẾT DỰ ÁN 14 3.1 Giới thiệu ứng dụng công việc thực 14 3.2 Một số giao diện web 14 TÀI LIỆU THAM KHẢO : .18 TỔNG KẾT 19 CHƯƠNG : GIỚI THIỆU CƠNG TY THỰC TẬP Cơng ty Cổ phần CRB Việt Nam thành lập vào năm 2015 Nguyễn Đức Anh – Tổng giám đốc Công ty Cổ phần CRB Việt Nam, công ty công nghệ, đa ngành bất động sản xuất phần mềm, thương mại điện tử Hiện cơng ty có văn phịng Hà Nơi, Đà Nẵng, Thành phố Hồ Chí Minh Trụ sở đặt 68 Lê Thị Riêng, Quận 1, Thành phố Hồ Chí Minh, đội ngũ kỹ thuật team developer đặt CHƯƠNG : NỘI DUNG THỰC TẬP Do cơng ty khơng có chương trình thực tập thức dành cho thực tập sinh nên chương trình thực tập chủ yếu nhằm vào technical stack sử dụng công ty dự án thực tế chương trình thực tập phần nhỏ dự án lớn công ty 2.1 Tìm hiểu cơng ty chương trình thực tập Nội dung : Giới thiệu công ty, cách tổ chức công ty Được nghe người phụ trách giới thiệu cơng ty, q trình thành lập phát triển (như nhắc đến trên), quy trình làm việc từ cao xuống thấp, cách thức tổ chức cơng ty Ngồi ra, thực tập sinh cịn giới thiệu cách thức làm việc công ty thời gian làm, quy định cần phải tuân thủ, cách sử dụng email công việc… Kết : Hiểu thêm cơng ty, q trình thành lập phát triển Có thêm kỹ việc sử dụng email cơng việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm 2.2 Nghiên cứu kĩ thuật 2.2.1 ReactJS JavaScript ReactJS gì? React (còn gọi Reactjs hay React.js) Thư viện javascript tạo cộng tác Facebook Instagram Nó cho phép nhà phát triển web tạo giao diện người dung nhanh chóng Phần Views Reactjs thường hiển thị việc chủ yếu dung component mà chứa component cụ thể thẻ HTML Một đặc trưng Reactjs việc render liệu thực tầng server mà cịn tầng client Nó sử dụng khái niệm Virtual DOM (DOM ảo) Virtual DOM tạo cache cấu trúc liệu ứng dụng nhớ Sau đó, vịng lặp, liệt kê thay đổi sau cập nhật lại thay đổi DOM trình duyệt cách hiệu Điều cho phép ta viết đoạn code thể toàn trang render lại dù thực tế Reactjs render component hay subcomponent thực thay đổi Ưu điểm? - Reactjs hiệu quả: Reactjs tạo cho DOM ảo – nơi mà component thực tồn Điều giúp cải thiện hiệu suất nhiều Reactjs tính tốn thay đổi cần cập nhật len DOM thực chúng Điều giúp Reactjs tránh thao tác cần DOM mà nhiều chi phí Chúng ta viết ví dụ đơn giản ReactJS sau - Reactjs giúp việc viết đoạn code JS dễ dàng hơn: Nó dung cú pháp đặc biệt JSX (Javascript mở rộng) cho phép ta trộn code HTML Javascript Ta thêm vào đoạn HTML vào hàm render mà không cần phải nối chuỗi Đây đặc tính thú vị Reactjs Nó chuyển đổi đoạn HTML thành hàm khởi tạo đối tượng HTML biến đổi JSX - Nó có nhiều công cụ phát triển: Khi bạn bắt đầu Reactjs, đừng quên cài đặt ứng dụng mở rộng Chrome dành cho Reactjs Nó giúp bạn debug code dễ dàng Sau bạn cài đặt ứng dụng này, bạn có nhìn trực tiếp vào virtual DOM thể bạn xem DOM thông thường - Render tầng server: Một vấn đề với ứng dụng đơn trang tối ưu SEO thời gian tải trang Nếu tất việc xây dựng hiển thị trang thực client, người dung phải chờ cho trang khởi tạo hiển thị lên Điều thực tế chậm Hoặc giả sử người dung vơ hiệu hóa Javascript sao? Reactjs thư viện component, vừa render ngồi trình duyệt sử dụng DOM render chuỗi HTML mà server trả Bạn tham khảo cách render side servering - Làm việc với vấn đề test giao diện: Nó dễ để viết test case giao diện virtual DOM cài đặt hồn tồn JS - Hiệu cao ứng dụng có liệu thay đổi liên tục, dễ dàng cho bảo trì sửa lỗi Nhược điểm? - Reactjs phục vụ cho tầng View React View Library khơng phải MVC framework framework khác Đây thư viện Facebook giúp render phần view Vì React khơng có phần Model Controller, mà phải kết hợp với thư viện khác React khơng có 2way binding Ajax - Tích hợp Reactjs vào framework MVC truyền thống yêu cầu cần phải cấu hình lại - React nặng so với framework khác React có kích thước tương tương với Angular (Khoảng 35kb so với 39kb Angular) Trong Angular framework hồn chỉnh - Khó tiếp cận cho người học Web Nội dung : - Tìm hiểu JavaScript ES6 nâng cao: o Tính bất đồng JavaScript: sử dụng callback, promise, async – await o Sử dụng Babel – Webpack để compile transpile JS - Tìm hiểu ReactJS: o Nguyên lý ReactJS sử dụng Virtual DOM – sử dụng object JS để thể nội dung DOM thời điểm o ReactJS có cách dùng Class Component Function Component o Hiểu cycle life ReactJS class component lẫn function component o Sử dụng CRA (create-react-app – package để tạo nhanh project ReactJS) Kết quả: - Nắm bắt ReactJS JS ES6 - Biết cách sử dụng áp dụng vào dự án - Sử dụng framework UI Ant Design 2.2.2 NextJS NextJS gì? NextJs framework nhỏ gọn giúp bạn xây dựng ứng dụng Single Page App - Server Side Rendering với ReactJs cách dễ dàng Ưu điểm? - Mọi thành phần áp dụng SSR cách mặc định - Code phân cắt tự động để giúp tải trang nhanh - Không tải lên phần code khơng dùng tới - Định tuyến (routing) phía client cách đơn giản (page-based) - Môi trường Webpack-based dev có hỗ trợ Hot Module Replacement (HMR) - Lấy liệu cách vơ đơn giản - Có thể triển khai với Express server Node.js HTTP - Có thể tuỳ chỉnh cấu hình Babel Webpack theo ý bạn - Dễ dàng triển khai đâu có hỗ trợ Node.js - Được tích hợp sẵn cơng cụ tối ưu hố tìm kiếm (SEO) cho trang bạn Nhược điểm? - Next.js khơng phải Back-end; bạn cần xử lí Back-end sở liệu, hệ thống tài khoản, bạn cần làm ứng dụng tách biệt phía Back-end - Next vơ mạnh mẽ, dùng để làm ứng dụng đơn giản điều khơng cần thiết (Đừng dùng dao mổ trâu để giết ruồi ) - Mọi liệu cần phải tải phía client server - Việc chuyển giao từ ứng dụng phía server sang ứng dụng Next.js chắn khơng nhanh chút nào, cịn phụ thuộc vào project bạn Đôi khi, bạn phải bỏ nhiều sức lực để làm điều 10 Nội dung: - Tìm hiểu NextJS: o NextJS framework dùng ReactJS dùng môi trường production o Sử dụng create-next-app thay create-react-app o NextJS chia app app nhỏ (gọi pages – trang) o NextJS có công đoạn build client-side server-side độc lập o Có loại pre-render: Static Generation (generate lúc build time tái sử dụng request) Server-side rendering (được generate theo request) o Dùng next/router next/link thay react-router NextJS hỗ trợ routing client-side tồn diện react-router o Hỗ trợ image optimization thông qua next/image giúp hình ảnh thân thiện với SEO Kết quả: - Nắm bắt NextJS - Biết cách sử dụng áp dụng vào dự án 2.2.3 PHP Phalcon PHP Phalcon gì? Phalcon hay cịn gọi Phalcon framework, hiểu PHP framework có hiệu cao mắt vào năm 2012 Nó xây dựng dựa kiến trúc model-viewcontroller (MVC) architecture, đóng vai trị mã nguồn mở Phalcon viết dựa ngôn ngữ C Zephir – ngôn ngữ gần với ngôn ngữ hệ thống nên có tốc độ hiệu suất cao dù đời muộn Phalcon dễ tùy chỉnh nên dù kiến thức chun sâu ngơn ngữ lập trình C, bạn phát triển ứng dụng PHP Ưu điểm? - Phalcon thư viên có tính phong phú viết C biên dịch thành PHP Extension Điều giúp tăng tốc độ xử lý, giảm tối đa nhớ tiêu thụ có nhiều truy cập đồng thời Phalcon dễ học, dễ lập trình so với PHP Framewok khác Lập trình viên dùng ngơn ngữ lập trình PHP thông thường Những hàm thư viện Phalcon tối ưu tốc độ 11 - Các tính có sẵn Phalcon cực phong phú ORM, Caching (ra file, nhớ, Redis), hỗ trợ nhiều loại CSDL: MySQL, Postgresql, Oracle, MongoDB , quản lý người dùng, phân quyền, logging, event manager (tạo hook để can thiệp Drupal WordPress),… Cộng đồng sử dụng, tham gia đóng góp cải tiến mã nguồn tăng nhanh Nhược điểm? - Phalcon khơng chạy mơi trường Shared Hosting Có lẽ nhược điểm lớn Phalcon PHP, cá nhân tơi thấy ngày việc sở hữu VPS chuyện đơn giản, khơng có lý mà khơng thử Phalcon PHP - Có nhiều người cho Phalcon PHP viết C nên việt Debug khó khăn, thật may mắn phiên Phalcon 2.0 viết lại ngơn ngữ lập trình Zephir nên giải vấn đề Nội dung: - Tìm hiểu Phalcon PHP: o Phalcon PHP thư viện PHP đóng gói dạng PHP extension, viết ngơn ngữ C – Zephir gần ngôn ngữ hệ thống nên có hiệu suất cao o Phalcon hỗ trợ app MVC micro hồn chỉnh, hỗ trợ module hóa project o Hỗ trợ dependency injection o Cho phép viết ứng dụng CLI không đơn web o Template Engine sử dụng Volt – biến thể từ Twig o Phalcon hỗ trợ ORM tốt, hỗ trợ builder thông qua ngơn ngữ PHQL gần giống SQL o Có cơng cụ CLI phalcon-devtool để hỗ trợ generate nhanh project, controllers, models,… tạo migration chạy migration Kết quả: - Nắm bắt Phalcon PHP - Biết cách sử dụng áp dụng vào dự án để viết Restful API 12 2.3 Thực Project Sau tháng training thực hành, thực tập sinh nắm kiến thực nâng cao ReactJS, NextJS PHP Phalcon Mentor hướng dẫn thực tập sinh áp dụng kiến thức học để thực project sử dụng công nghệ nêu Chi tiết đồ án nói phần sau 2.4 Lịch làm việc Tuần Cơng việc Người hướng dẫn Mức độ hồn thành • Tìm hiểu cơng ty, cách tổ Anh Đức 100% Anh chức cơng ty • Làm quen với cơng cụ làm việc cơng ty • Tìm hiểu ReactJS, PHP Javascript 2→6 • Tìm hiểu NextJS • Tìm hiểu PHP Phalcon → 10 • Thực Final project 13 Anh Đức Anh 100% Anh Đức Anh 95% Nhận xét người hướng dẫn CHƯƠNG : CHI TIẾT DỰ ÁN 3.1 Giới thiệu ứng dụng cơng việc thực • Giới thiệu Đây website đăng tin rao vặt bất động sản dựa project thức hoạt động cơng ty (https://nhadatso.com) • Cơng việc thực o Xây dựng giao diện theo yêu cầu PM cấp o Hiện thực trang NextJS ReactJS o Viết backend API PHP Phalcon để tương tác với CSDL, lưu thông tin người dùng, đăng,… o Gắn API vào frontend • Kết đạt - Hiểu ưu nhược điểm công nghệ - Cách project thực tế implement - Có project sử dụng 3.2 Một số giao diện web 14 15 16 17 TÀI LIỆU THAM KHẢO : - ReactJS ưu nhược điểm: https://viblo.asia/p/reactjs-uu-diem-va-nhuoc-diem-V3m5WzexlO7 - Next, Nust Nuxt đâu framework đáng lựa chọn https://viblo.asia/p/next-nuxt-va-nest-dau-moi-la-nodejs-framework-dang-duoc-lua-chonYWOZrQYNKQ0 18 TỔNG KẾT Như vậy, vịng hai tháng ngắn ngủi dù chưa hồn thiện hết website Website có đầy đủ tính đề ban đầu Do thời gian có hạn nên tính website cịn đơn giản Nhưng ứng dụng phát triển theo framework có tính kế thừa nên sau có thời gian phát triển lên mức cao Xin chân thành cảm ơn đến anh chị nhóm dự án, anh chị đơn vị đào tạo thực nghiệm giúp đỡ, hỗ trợ để em hồn thành nhiệm vụ giao thời gian thực tập công ty 19 ... DUNG THỰC TẬP Do cơng ty khơng có chương trình thực tập thức dành cho thực tập sinh nên chương trình thực tập chủ yếu nhằm vào technical stack sử dụng công ty dự án thực tế chương trình thực tập. .. Biết cách sử dụng áp dụng vào dự án 2.2.3 PHP Phalcon PHP Phalcon gì? Phalcon hay cịn gọi Phalcon framework, hiểu PHP framework có hiệu cao mắt vào năm 2012 Nó xây dựng dựa kiến trúc model-viewcontroller... Nắm bắt Phalcon PHP - Biết cách sử dụng áp dụng vào dự án để viết Restful API 12 2.3 Thực Project Sau tháng training thực hành, thực tập sinh nắm kiến thực nâng cao ReactJS, NextJS PHP Phalcon