GIỚI THIÊU CÔNG TY THỰC TẬP
Giới thiệu công ty CRB Việt Nam
Công ty Cổ Phần CRB Việt Nam là một doanh nghiệp công nghệ hàng đầu, chuyên phát triển các sản phẩm dựa trên nền tảng internet và di động Nổi bật trong số đó là ba sản phẩm chủ lực: MangViecLam.com, NhaDatSo.com và XeHoiViet.com CRB Việt Nam cung cấp giải pháp toàn diện đáp ứng ba nhu cầu thiết yếu trong cuộc sống hiện nay: nhà đất, việc làm và phương tiện đi lại.
Sản phẩm của công ty
Những sản phẩm nổi bật của công ty:
NhaDatSo.com là nền tảng thông tin nhà đất uy tín, cung cấp thông tin mua bán và cho thuê nhà đất mới nhất Chúng tôi cam kết cập nhật liên tục và chia sẻ thông tin đến hàng trăm ngàn người, nâng cao hiệu quả trong kỷ nguyên số Sứ mệnh của chúng tôi là hỗ trợ doanh nghiệp trong việc tuyển dụng nhân lực phù hợp, đồng thời giúp người tìm việc tìm kiếm cơ hội nghề nghiệp tương xứng với khả năng của mình.
XeHoiViet.com là nền tảng mua bán xe uy tín, thường xuyên cập nhật thông tin mới nhất về xe cộ và chia sẻ đến hàng trăm ngàn người, nâng cao hiệu quả thông tin trong kỷ nguyên số Sứ mệnh của chúng tôi là hỗ trợ doanh nghiệp tìm kiếm nhân lực phù hợp và giúp người tìm việc lựa chọn công việc tương xứng với khả năng của họ.
MangViecLam.com là nền tảng tuyển dụng uy tín, cập nhật liên tục thông tin việc làm mới nhất và chia sẻ đến hàng trăm ngàn người, nâng cao hiệu quả trong kỷ nguyên số Chúng tôi cam kết giải quyết khó khăn trong tuyển dụng, giúp doanh nghiệp nhanh chóng tìm được nhân lực phù hợp và hỗ trợ người tìm việc lựa chọn công việc thích hợp với khả năng của họ.
NỘI DUNG THỰC TẬP
Tìm hiểu công ty và các kỹ năng cơ bản trong công ty
Bài viết cung cấp cái nhìn tổng quan về công ty thông qua sự giới thiệu của các anh chị HR và nhân viên về quá trình thành lập, phát triển, và quy trình làm việc từ cấp cao đến cấp thấp Người mới được làm quen và giao lưu với các thành viên trong từng bộ phận và team, đồng thời được giới thiệu về các sản phẩm cũng như những thành tựu nổi bật mà công ty đã đạt được.
Các kỹ thuật viên hướng dẫn và cung cấp thiết bị, đồng thời giới thiệu thực tập sinh về quy trình làm việc trong công ty, bao gồm thời gian làm việc, quy định cần tuân thủ, cách sử dụng email và các công cụ hỗ trợ Nhân viên chia sẻ kinh nghiệm làm việc hiệu quả và hướng dẫn tác phong cũng như các bước làm việc trong nhóm Thực tập sinh cũng nhận thông tin liên hệ để giải quyết vấn đề hoặc sự cố phát sinh trong quá trình làm việc, và được cấp tài khoản tham gia các nhóm thảo luận trên WorkPlace.
Kết quả: Bài viết giúp bạn hiểu rõ hơn về quá trình thành lập và phát triển của công ty CRB Vietnam, đồng thời trang bị các kỹ năng quan trọng như sử dụng email hiệu quả, làm việc có kế hoạch, kỷ luật và trách nhiệm trong công việc.
Nghiên cứu kỹ thuật
2.1 Các công cụ làm việc
- Tìm hiểu về các công cụ sẽ được sử dụng trong quá trình làm việc.
Trong thời gian này, mentor đã hỗ trợ thực tập sinh trong việc tìm hiểu các công cụ cần thiết để làm việc hiệu quả với đội ngũ Một số công cụ quản lý mã nguồn được sử dụng bao gồm Trello và Gitlab.
- Tìm hiểu các nguyên tắc cơ bản, format code trong quá trình làm viêc và summit code.
- Các mô tả quy trình thực hiện một task công việc làm sao dễ hiểu và có thể cho
QA thực hiện các quy trình kiểm thử Các IDE dùng triển khai code và review gồm Inteliji IDEA, Visual Studio Code.
Tìm hiểu về sản phẩm của công ty nhadatso và muaban.net là bước đầu tiên để nắm bắt thông tin chi tiết Đọc các tài liệu mô tả ứng dụng giúp bạn hiểu rõ hơn về tính năng và quy trình sử dụng, từ đó tối ưu hóa trải nghiệm người dùng.
2.2 Tìm hiểu framework NextJs cơ bản và nâng cao
Tìm hiểu và nghiên cứu framework NextJs, đọc tài liệu, viết mã và thử nghiệm các API của nó giúp bạn nhận ra lý do tại sao NextJs là framework tốt nhất cho ReactJs trong việc xây dựng trang web nhà đất.
NextJs là một framework mạnh mẽ hỗ trợ ReactJs, giúp lập trình viên xây dựng ứng dụng web một cách nhanh chóng và hiệu quả Với các tính năng nổi bật như hybrid và server side rendering, hỗ trợ Typescript, bundle code thông minh và tối ưu hóa hình ảnh, NextJs giải quyết những hạn chế của ReactJs Nó cho phép cài đặt route dễ dàng mà không cần cấu hình phức tạp, tất cả được tích hợp trong một framework duy nhất, mang đến trải nghiệm phát triển tốt nhất cho người dùng ngay từ đầu.
- Đọc tài liệu về NextJs và create-react-app để xem xét ưu nhược điểm của từng framework trước khi sử dụng
- Dựng project và dùng thử API của NextJs
Các ưu điểm của NextJs
- SSR và SSG: Hỗ trợ cả hai cách để render trang: Server Side Rendering (SSR) và Static Site Generator (SSG) trong cùng một project
- Tốt cho SEO do phần lớn ứng dụng sẽ được render sẵn trên server
- Static generation: fetch dữ liệu ban đầu ngay trên server ở mỗi request, thích hợp cho các trang tĩnh nhưng trang thông tin người dùng
- Tối ưu hóa ảnh, thay đổi độ phân giải ảnh cho từng thiết bị màn hình để tiết kiệm dung lượng, cache ảnh.
- Hỗ trợ Typescript: Typescript là ngôn ngữ mở rộng của Javascript có thể kiểm tra lỗi tốt hơn, thích hợp để viết các ứng dụng phức tạp.
- Fast Refresh: Là một tính năng mới của ReactJs, khi thay đổi mã nguồn, chương trình sẽ tự động cập nhật và render lại ở chỗ thay đổi đó
- Routing: setup route dễ dàng cho trang web theo file-system Tất cả các component trong thư mục pages/ đều là một route
So sánh giữa NextJs và create-react-app.
- Hiểu rõ và nắm được các kiển trúc và thành phần của NextJs.
- Có cái nhìn tổng quan về các tính năng nổi bật của NextJs.
- Sử dụng, thực thi được các tính năng của NextJs, hiểu rõ về cách để xây dựng sản phẩm của công ty đang phát triển
2.3 Ứng dụng web đăng tin bất động sản nhadatso
Tạo một repo và backlog để phân chia công việc, sau đó dựng project và thiết lập quy trình CI/CD Viết script để build chương trình và thiết lập state management bằng Redux Chạy thử trang đầu tiên và cấu hình để tự động build và deploy phiên bản demo trên Vercel mỗi khi có code mới được đẩy lên (git push).
- Tổng quan công nghệ sử dụng: o Front-end: Typescript, ReactJs, NextJs, AntDesign, Less o Back-end: PHP, Phalcon, ElasticSearch, Redis
Để cài đặt các thư viện cho project front-end, bạn cần sử dụng NextJs, một framework giúp phát triển ứng dụng web ReactJs nhanh chóng và hiệu quả, tạo ra sản phẩm hoàn thiện hơn AntdDesign là một trong những framework UI nổi tiếng nhất của ReactJs, cung cấp hàng chục component có sẵn để tạo giao diện sản phẩm nhanh chóng Less, ngôn ngữ stylesheet, cho phép tùy chỉnh thêm giao diện và theme từ thiết kế ban đầu của AntDesign Redux, cùng với RTK và redux-persist, là thư viện quản lý global state phổ biến, giúp quản lý trạng thái và debug dễ dàng cho các project phức tạp, trong khi redux-persist lưu lại trạng thái giữa các session Cuối cùng, Eslint là công cụ linter hữu ích để kiểm tra các lỗi tĩnh trước khi build.
JavaScript or Prettier: Automatically format your code and set it up with IntelliJ IDEA to format entire files upon saving React Query is a library designed for fetching data from the server, deduplicating responses, caching results, and automatically updating the cache when data becomes stale It helps alleviate the burden of state management in Redux.
- Ôn lại và củng cố các khái niệm cơ bản và nâng cao của ReactJs
- Làm quen với NextJs và AntDesign framework
- Dựng được màn hình đầu tiên, biết cách deploy trên ứng dụng NextJs lên vercel
Thực hiện project
Sau tháng đầu xây dựng ứng dụng, thực tập sinh đã nắm được những kiến thực cơ bản và nâng cao về ReactJs, NextJs và AntDesign.
Trong tháng thứ hai, thực tập sinh đã áp dụng kiến thức học được để phát triển các tính năng mới cho ứng dụng web nhadatso bằng ReactJs, đạt hiệu quả cao hơn.
Chi tiết đồ án sẽ được nói ở phần sau.
Lịch làm việc
Tuần Công việc Người hướng dẫn Mức độ hoàn
Nhận xét của người hướng dẫn thành
- Tìm hiểu về công ty, cách tổ chức của công ty.
- Làm quen với các công cụ làm việc trong công ty.
- Học cách trao đổi, làm việc qua email.
- Tìm hiểu framework NextJs cơ bản & nâng cao
- Tạo tài khoản gitlab, Tạo repo, nhận backlog công việc
- Cài đặt thư viện front- end
- Setup ci/cd, deploy demo trang đầu trên vercel
- Dựng layout tổng thể cho ứng dụng: header, sider, footer, main
- Gen api code từ swagger và kết nối api từ back-end
- Dựng trang đăng ký, đăng nhập
- Dựng trang loading khi chuyển route
- Dựng trang thông tin cá nhân
- Dựng trang thay đổi mật khẩu
6 - Dựng trang đăng tin mới gồm 3 bước: nhập tin cơ
100% bản, nhập tin nâng cao, mô tả và upload hình.
- Dựng trang chủ: hiển thị danh sách tin đã tạo
- Tiếp tục dựng trang chủ: phân trang cho tin, tìm kiếm, settings thay đổi layout.
- Dựng trang danh mục: hiển thị tin đăng theo danh mục (bán, mua, thuê…)
- Dựng trang tin đăng chi tiết.
- Dựng trang thông tin người dùng
- Dựng trang tìm kiếm nâng cao.
- Dựng trang chủ cho giao diện desktop
CHI TIẾT VỀ PROJECT
Giới thiệu về ứng dụng web nhadatso
Ứng dụng web nhà đất số là nền tảng cung cấp thông tin mua bán và cho thuê nhà đất mới nhất, giúp người dùng dễ dàng tiếp cận và chia sẻ thông tin đến hàng trăm ngàn người khác Ứng dụng này không chỉ nâng cao hiệu quả thông tin trong kỷ nguyên số mà còn giải quyết các khó khăn trong tuyển dụng, hỗ trợ doanh nghiệp tìm kiếm nhân lực phù hợp và giúp người tìm việc lựa chọn công việc tương thích với khả năng của họ.
Màn hình đăng ký, đăng nhập:
Màn hình Thông tin cá nhân:
Màn hình thay đổi mật khẩu
Trang chủ (giao diện desktop)
Trang chi tiết tin đăng
Trang thông tin người dùng
Trang tìm kiếm nâng cao
Hỗ trợ
Đội phát triển nhadatso có 2 thành viên:
- Nguyễn Khánh Nguyên: lập trình viên front-end
- Bành Thanh Sơn: lập trình viên back-end
Và sự giúp đỡ tận tình của Anh Nguyễn Đức Anh (giám đốc công ty CRB).
Kế hoạch & kết quả
Hoàn thiện tất cả các màn hình cần thiết cho ứng dụng bao gồm: màn hình đăng ký và đăng nhập, màn hình thông tin cá nhân, màn hình thay đổi mật khẩu, màn hình tạo tin mới, màn hình trang chủ, màn hình danh mục, màn hình chi tiết tin đăng, màn hình thông tin người dùng và màn hình tìm kiếm nâng cao.
- Kết nối với bên back-end thông qua REST API
- Giao diện mobile first ở tất cả các trang, responsive ở một vài trang quan trọng (trang chủ, tạo tin mới)
- Nắm rõ kiến thức về NextJs
- Hoàn thiện tất cả màn hình của ứng dụng.
- Sử dụng Redux, react-query để quản lý state.
- Thực hiện kết nối với backend thông qua việc send và get API
- Hoàn thiện tất cả các chức năng ở những trang quan trọng.
- Fix các bug nảy sinh trong quá trình phát triển.
- Demo cho sếp định kỳ hàng tuần
- Tất cả các chức năng và màn hình đã hoàn thành theo yêu cầu
- Củng cố kiến thức đã biết về ReactJs, học được cánh sử dụng NextJs, AntDesign và ứng dụng nó qua quá trình phát triển các tính năng.
- Học cách giao tiếp với thành viên trong nhóm để làm rõ yêu cầu, lên kế hoạch thực hiện các tính năng.
Kiến thức cơ bản và nâng cao về ReactJs: https://reactjs.org/docs/getting-started.html
Tài liệu NextJs https://nextjs.org/docs
Tài liệu AntDesign https://ant.design/docs/react/introduce
Tài liệu react-query https://react-query.tanstack.com/overview