Báo cáo thực tập trang WEB đăng tin bất động sản
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (3.24 MB, 33 trang )
1
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
TRANG WEB ĐĂNG TIN BẤT ĐỘNG SẢN
Công ty thực tập:
CRB Viêt Nam
Người phụ trách:
Nguyễn Đức Anh
Thực tập sinh:
Nguyễn Khánh Nguyên
TP. Hồ Chí Minh, tháng 01 năm 2021
Nguyễn Đức Anh
Nguyễn Khánh Nguyên
2
LỜI MỞ ĐẦU
Ngày nay, với sự phát triển không ngừng của cơng nghệ, con người
đang dần thực
thi hóa những cơng việc thủ công thành những ứng dụng hiện đại. Các
sản phẩm phần mềm trở thành những tiềm năng phát triển – trở thành
nguồn đầu tư quan trọng của các danh nghiệp lớn. Không chỉ phát
triển ở thị trường trong nước một số phần mềm đã được nhiều thành
công rực rỡ ở thị trường quốc tế. Hiện nay nhiều sản phẩm phần mềm
được tích hợp các cơng nghệ hiện đại nhất và bắt kịp với các xu hướng
mới nhất đem lại cho người dung các danh nghiệp những trải nghiệm
tốt nhất. Việt Nam là một trong số quốc gia đứng thứ 6 trong top 55
quốc gia hấp dẫn nhất trong dịch vụ phát triển và gia cơng phần mềm.
Sau q trình học hỏi và thực hiện các đồ án trên lớp, với bản thân là
sinh viên chuyên ngành kỹ thuật phần mềm, em đã tích lũy cho mình
những kiến thức căn bản để có
thể phát triển và ứng dụng vào các dự án thực tế. ReactJs – thư viện
lập trình ứng dụng web đang rất thịnh hành và là sự lựa chọn hang đầu
dung để xây dựng ứng dụng web. Nhận thấy được sự tiềm năng của
môi trường phát triển các phần mềm ứng dụng được viết bằng thư viện
ReactJs, em đã quyết định lựa chọn công ty CRB Việt Nam là công ty
thực tập em áp dụng các kiến thức về ReactJs của mình vào các dự án
thực tế đồng thời là cơ hội để em phát triển nghề nghiệp trong tương
lai.
Nguyễn Đức Anh
Nguyễn Khánh Nguyên
3
LỜI CẢM ƠN
Trân trọng gửi lời cảm ơn Công ty CRB Việt Nam đã tạo điều kiện cho
em có cơ hội được thực tập tại công ty.
Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình của các
anh chị trong
nhóm trainer, em đã tiếp thu được những kiến thức quan trọng để có
thể xây dựng và phát triển ứng dụng sử dụng thư viện lập trình
ReactJs.
Đặc biệt cảm ơn anh Nguyễn Đức Anh, đã training các kiến thức cũng
nhưng các kỹ
thuật lập trình, hướng dẫn, giúp đỡ cho chúng em tận tình cả những
khó khăn trong cơng
việc, đến những khó khăn việc làm quen với mơi trường mới; cảm ơn
anh Bành Thanh Sơn đã hỗ trợ em rất nhiều vấn đề về kỹ thuật trong
quá trình thực hành bảo trì và
phát triển ứng dụng nhadatso.com
Nguyễn Đức Anh
Nguyễn Khánh Nguyên
4
Cũng xin cảm ơn thầy cô trong khoa Công nghệ phần mềm đã nhiệt
tình hỗ trợ, tạo
điều kiện em làm bài báo cáo này.
Nguyễn Khánh Nguyên
Hồ Chí Minh, ngày 09 tháng 01 năm 2021
NHẬN XÉT CỦA KHOA
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
Nguyễn Đức Anh
Nguyễn Khánh Nguyên
5
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
.......................................................................................................................................................
Nguyễn Đức Anh
Nguyễn Khánh Nguyên
6
MỤC LỤC
Chương 1: Giới thiêu công ty thực tập...............................................................................................7
1.Giới thiệu công ty CRB Việt Nam.................................................................................................................7
2.Sản phẩm của công ty.................................................................................................................................7
Chương 2: Nội dung thực tập.............................................................................................................9
1.Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty.................................................................................9
2.Nghiên cứu kỹ thuật....................................................................................................................................9
2.1.Các công cụ làm việc................................................................................................................................................ 9
2.2.Tìm hiểu framework NextJs cơ bản và nâng cao..................................................................................................... 10
2.3.Ứng dụng web đăng tin bất động sản nhadatso..................................................................................................... 12
3.Thực hiện project......................................................................................................................................13
4.Lịch làm việc..............................................................................................................................................13
Chương 3: Chi tiết về project............................................................................................................16
1.Giới thiệu về Ứng dụng web nhadatso......................................................................................................16
2.Hỗ trợ.......................................................................................................................................................29
3.Kế hoạch & kết quả...................................................................................................................................30
3.1.Kế hoạch............................................................................................................................................................... 30
3.2.Thực hiện.............................................................................................................................................................. 30
3.3.Kết quả.................................................................................................................................................................. 31
Nguyễn Đức Anh
Nguyễn Khánh Nguyên
7
Chương 1: Giới thiêu công ty thực tập
1. Giới thiệu công ty CRB Việt Nam
Công ty Cổ Phần CRB Việt Nam, một công ty công nghệ nổi tiếng với những sản phẩm
phát triển dựa trên nền tảng internet và di động, nổi bật là 3 sản phẩm:
MangViecLam.com, NhaDatSo.com và XeHoiViet.com. CRB Việt Nam đã cung cấp
giải pháp hoàn chỉnh hỗ trợ cho ba nhu cầu thiết yếu nhất của đời sống hiện nay là Nhà
đất - Việc làm và Phương tiện đi lại.
2. 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à mạng thơng tin nhà đất đáng tin cậy, luôn luôn cập nhật các thông
tin mua bán, cho thuê nhà đất mới nhất, đồng thời lan tỏa các thông tin này đến hàng
trăm ngàn người khác để tăng cường tính hiệu quả của thơng tin trong kỷ nguyên số. Sứ
mệnh của chúng tôi là giải quyết những khó khăn trong vấn đề tuyển dụng, giúp doanh
nghiệp nhanh chóng có được nhân lực phù hợp với cơng việc cũng như giúp người tìm
việc có thể chọn được công việc phù hợp với khả năng của mình.
• XeHoiViet.com là mạng thơng tin mua bán xe đáng tin cậy, luôn luôn cập nhật các thông
tin mua bán xe cộ mới nhất, đồng thời lan tỏa các thông tin này đến hàng trăm ngàn
người khác để tăng cường tính hiệu quả của thơng tin trong kỷ ngun số. Sứ mệnh của
chúng tơi là giải quyết những khó khăn trong vấn đề tuyển dụng, giúp doanh nghiệp
nhanh chóng có được nhân lực phù hợp với công việc cũng như giúp người tìm việc có
thể chọn được cơng việc phù hợp với khả năng của mình.
Nguyễn Đức Anh
Nguyễn Khánh Nguyên
8
• MangViecLam.com là mạng tuyển dụng đáng tin cậy, ln luôn cập nhật các thông tin
tuyển dụng mới nhất, đồng thời lan tỏa các thông tin này đến hàng trăm ngàn người khác
để tăng cường tính hiệu quả của thơng tin trong kỷ nguyên số. Sứ mệnh của chúng tôi là
giải quyết những khó khăn trong vấn đề tuyển dụng, giúp doanh nghiệp nhanh chóng có
được nhân lực phù hợp với cơng việc cũng như giúp người tìm việc có thể chọn được
công việc phù hợp với khả năng của mình.
Nguyễn Đức Anh
Nguyễn Khánh Nguyên
9
Chương 2: Nội dung thực tập
1. Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty
Thời gian: 1 ngày
Nội dung:
Được các anh chị HR và nhân viên giới thiệu về cơng ty, q trình thành lập và
phát,
quy
trình
làm
việc
từ
cao
xuống
thấp,
cách
thức
tổ
chức của công ty. Làm quen, giao lưu với các anh chị nhân viên, theo từng bộ phận và
theo team. Các anh chị giới thiệu về các sản phẩm và những thành tựu cua công ty đã
đạt được.
Các anh kỹ thuật hướng dẫn và cấp thiết bị, sử dụng các nguồn tài ngun của
cơng ty. Ngồi ra, thực tập sinh cịn được giới thiệu về cách thức làm việc trong công
ty như thời gian đi làm, các quy định cần phải tuân thủ, cách sử dụng email, các công
cụ làm việc. Các anh chị nhân viên chia sẻ kinh nghiệm làm việc hiệu quả đồng thời
hướng dẫn cách về tác phong, các bước làm việc của team và thông tin liên hệ khi quá
trình làm việc gặp vấn đề hoặc gặp sự cố bất ngờ. Được cấp tài khoản tham gia vào các
nhóm tương tác, thảo luận cơng việc trên WorkPlace.
Kết quả: Hiểu thêm cơng ty CRB Vietnam về q trình thành lập và
phát triển. Có thêm các kỹ năng về việc sử dụng email, trong cơng
việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm hơn.
2. Nghiên cứu kỹ thuật
2.1.
Các công cụ làm việc
Thời gian: 3 ngày
Nội dung:
- Tìm hiểu về các cơng cụ sẽ được sử dụng trong quá trình làm việc.
Nguyễn Đức Anh
Nguyễn Khánh Nguyên
10
-
Trong thời gian này, mentor đã hướng dẫn thực tập sinh tìm hiểu các cơng cụ sẽ
giúp cho q trình làm việc với team. Một số tool quản lý source code như: Trello,
-
Gitlab.
Tìm hiểu các nguyên tắc cơ bản, format code trong q 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. Đọc các tài liệu mơ tả
về ứng dụng. Tìm hiểu tính năng cũng quy trình sử dụng ứng dụng
2.2.
Tìm hiểu framework NextJs cơ bản và nâng cao
Thời gian: 14 ngày
Nội dung:
Tự tìm hiểu, nghiên cứu framework NextJs, đọc tài liệu, code và test thử các API của
nó. Hiểu được tại sao đây là framework tốt nhất của ReactJs để dựng trang web nhà
đất.
-
Tìm hiểu NextJs: Khi xây dựng một ứng dụng web với ReactJs từ đầu, có nhiều điểm
quan trọng mà người lập trình cần nên lưu ý do ReactJs chỉ là một thư viện nhỏ
không cung cấp đủ các API để giúp người dung viết ứng dụng một cách nhanh chóng.
NextJs là một framework dùng bên cạnh với ReactJs và giải quyết chính xác vấn đề
đó, mang đến trải nghiệm phát triển sản phẩm nhanh chóng và hiệu quả nhất với các
Nguyễn Đức Anh
Nguyễn Khánh Nguyên
11
tính năng như: hybrid và server side rendering, hỗ trợ Typescript, bundle code thơng
minh, tối ưu hóa hình, hỗ trợ cài đặt route mà không cần phải config nhiều. Tất cả
được đóng gói trong một framework duy nhất giúp người sử dụng có trải nghiệm tốt
nhất ngay từ đầu, hỗ trợ đội để có thể xây dựng một ứng dụng nhanh chóng và hiệu
-
quả.
Đọ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.
Tính năng
Server side rendering
Static generation
Tùy chỉnh cấu hình
Hỗ trợ Typescript
Hỗ trợ Hook
Hỗ trợ Redux
NextJs
X
X
X
X
X
X
CRA
X
X
X
Kết quả:
-
Hiểu rõ và nắm được các kiển trúc và thành phần của NextJs.
Nguyễn Đức Anh
Nguyễn Khánh Nguyên
12
-
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
Thời gian: 7 ngày
Nội dung:
-
Tạo repo và backlog phân chia công việc, dựng project, setup ci/cd, viết script để
build chương trình, setup state management (redux), chạy thử trang đầu tiên, setup
để tự động build và deploy phiên bản demo trên vercel sau mỗi lần đẩy code (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:
o NextJs: Là framework để giúp người dùng viết ứng dụng web ReactJs
nhanh chóng, hiệu quả, tạo nên sản phẩm hoàn thiện hơn
o AntdDesign: Một trong những Framework UI nổi tiếng nhất của ReactJs,
với hang chục component có sẵn giúp người dùng tạo giao diện sản phẩm
nhanh chóng
o Less: là ngôn ngữ stylesheet dùng để tùy chỉnh thêm giao diện hay theme
từ giao diện của AntDesign ban đầu
o Redux + RTK + redux-persist: Là thư viện quản lý global state phổ biến
nhất của ReactJs ở thời điểm hiện tại, giúp quản lý trạng thái và debug dễ
dàng cho những project có tính phức tạp cao. Redux-persist để lưu lại trạng
thái ở các session khác nhau.
o Eslint: Là linter để kiểm tra các lỗi tĩnh trước khi build thông dụng của
Javascript
Nguyễn Đức Anh
Nguyễn Khánh Nguyên
13
o Prettier: Format code tự động, setup với Intellij IDEA để tự động format
toàn bộ file sau mỗi lần save
o React-query: Là thư viện dùng để lấy dữ liệu trên server, dedup, cache kết
quả trả về và tự động cập nhật cache khi giá trị stale. Dùng để giảm tải
gánh nặng quản lý state cho redux.
Kết quả :
-
Ô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
3. 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 những kiến thức đã học để thực hiện tiếp các
tính năng trong ứng dụng web nhadatso bằng ReactJs với hiệu quả cao hơn.
Chi tiết đồ án sẽ được nói ở phần sau.
4. Lịch làm việc
Mức
Tuần
1
Cơng việc
Người hướng dẫn
- Tìm hiểu về cơng ty, cách Anh
Nguyễn
độ
hồn
thành
Đức 100%
Nhận xét của
người hướng
dẫn
tổ chức của cơng ty.
Anh
- 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.
Nguyễn Đức Anh
Nguyễn Khánh Nguyên
14
- Tìm hiểu framework
NextJs cơ bản & nâng cao
- Tạo tài khoản gitlab, Tạo Anh
Nguyễn
Đức 100%
Nguyễn
Đức 100%
Nguyễn
Đức 100%
Nguyễn
Đức 100%
Nguyễn
Đức 100%
Nguyễn
Đức 100%
repo, nhận backlog công Anh
2
việc
- Cài đặt thư viện frontend
- Setup ci/cd, deploy demo
trang đầu trên vercel
- Dựng layout tổng thể cho Anh
ứng dụng: header, sider, Anh
3
footer, main
- Gen api code từ swagger
và kết nối api từ back-end
- Dựng trang đăng ký, Anh
4
đăng nhập
Anh
- Dựng trang loading khi
chuyển route
- Dựng trang thông tin cá Anh
5
nhân
Anh
- Dựng trang thay đổi mật
khẩu
- Dựng trang đăng tin mới Anh
gồm 3 bước: nhập tin cơ Anh
6
bản, nhập tin nâng cao, mơ
tả và upload hình.
- Dựng trang chủ: hiển thị
7
danh sách tin đã tạo
- Tiếp tục dựng trang chủ: Anh
phân trang cho tin, tìm Anh
kiếm, settings thay đổi
layout.
Nguyễn Đức Anh
Nguyễn Khánh Nguyên
15
- 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 Anh
8
tiết.
Đức 100%
Nguyễn
Đức 100%
Anh
- Dựng trang thơng tin
người dùng
- Dựng trang tìm kiếm Anh
9
Nguyễn
nâng cao.
Anh
- Dựng trang chủ cho giao
diện desktop
Nguyễn Đức Anh
Nguyễn Khánh Nguyên
16
Chương 3: Chi tiết về project
1. Giới thiệu về Ứng dụng web nhadatso
Ứng dụng web nhà đất số dùng để xem thông tin nhà đất, được cập nhật các thông tin mua
bán, cho thuê nhà đất mới nhất, đồng thời lan tỏa các thông tin này đến hàng trăm ngàn
người khác để tăng cường tính hiệu quả của thơng tin trong kỷ nguyên số, giải quyết những
khó khăn trong vấn đề tuyển dụng, giúp doanh nghiệp nhanh chóng có được nhân lực phù
hợp với công việc cũng như giúp người tìm việc có thể chọn được cơng việc phù hợp với
khả năng của mình.
Màn hình đăng ký, đăng nhập:
Nguyễn Đức Anh
Nguyễn Khánh Nguyên
17
Màn hình Thơng tin cá nhân:
Nguyễn Đức Anh
Nguyễn Khánh Ngun
18
Màn hình thay đổi mật khẩu
Nguyễn Đức Anh
Nguyễn Khánh Nguyên
19
Màn hình đăng tin (B1)
Nguyễn Đức Anh
Nguyễn Khánh Nguyên
20
Màn hình đăng tin (B2)
Nguyễn Đức Anh
Nguyễn Khánh Nguyên
21
Màn hình đăng tin (B3)
Nguyễn Đức Anh
Nguyễn Khánh Nguyên
22
Trang chủ
Nguyễn Đức Anh
Nguyễn Khánh Nguyên
23
Trang chủ (giao diện desktop)
Nguyễn Đức Anh
Nguyễn Khánh Nguyên
24
Nguyễn Đức Anh
Nguyễn Khánh Nguyên
25
Trang danh mục
Nguyễn Đức Anh
Nguyễn Khánh Nguyên
