TỔNG QUAN VỀ CÔNG TY TMA BÌNH ĐỊNH
Tổng quan về công ty
1.1.1 Thông tin về công ty
Công ty TMA Solution, viết tắt là TMA, được thành lập vào năm 1997 và đã phát triển mạnh mẽ trong suốt 25 năm qua, trở thành một trong những công ty phần mềm hàng đầu tại Việt Nam TMA hiện nằm trong Top 10 doanh nghiệp xuất khẩu phần mềm, Top 10 doanh nghiệp Fintech và AI-IoT Với đội ngũ hơn 3,500 kỹ sư tài năng và nhiệt huyết, TMA luôn nhận được sự đánh giá cao từ khách hàng, khẳng định vị thế là đối tác tin cậy trên bản đồ công nghệ thông tin toàn cầu.
- Tháng 6 năm 2018, TMA đã mở chi nhánh tại Bình Định, sau 4 tháng, TMA Bình Định đã phát triển nhanh chóng với trên 50 kỹ sư.
Vào tháng 8 năm 2018, TMA đã chính thức khởi công xây dựng Công viên Sáng tạo TMA Bình Định (TIP) trên diện tích 10 hecta tại Thung lũng Sáng tạo Quy Nhơn (QNIVY), với tổng vốn đầu tư lên tới hàng trăm tỷ đồng.
Hình 1.1 Logo TMA Bình Định
+ Tài chính, ngân hàng và bảo hiểm
+ Thương mại điện tử và phân phối
+ Nông nghiệp và chế biến thực phảm
+ Khách sạn và du lịch
1.1.2 Tầm nhìn và sứ mệnh
- Tầm nhìn: Trở thành 1 trong những công ty hàng đầu về cung cấp giải pháp phần mềm tại Việt Nam và các nước trong khu vực.
Sứ mệnh của chúng tôi là cung cấp cho khách hàng những giải pháp phần mềm chất lượng cao với chi phí hợp lý, đồng thời xây dựng mối quan hệ tin cậy và uy tín với các đối tác trong lĩnh vực công nghệ thông tin để cùng nhau phát triển.
1.2 Tổng quan về vị trí Front – End Developer
Phần front-end của một trang web là yếu tố chính tương tác với người dùng, bao gồm mọi thứ mà người dùng có thể nhìn thấy, chạm vào và lướt qua trên màn hình Tất cả những trải nghiệm này đều là kết quả của công việc lập trình của các Front End Developer.
Lập trình Front End không chỉ đơn thuần là thiết kế giao diện với các tính năng riêng biệt, mà còn yêu cầu lập trình viên đảm bảo tính tương thích với nhiều loại thiết bị Mỗi thiết bị có kích thước màn hình và độ phân giải khác nhau, thậm chí sử dụng các hệ điều hành khác nhau.
Lập trình viên Front End (Front End Developer) đảm nhận vai trò phát triển giao diện người dùng của website, dựa trên các bản thiết kế đã được cung cấp Giao diện này là phần mà người dùng tiếp xúc đầu tiên khi truy cập vào trang web qua trình duyệt, đóng vai trò quan trọng trong trải nghiệm người dùng.
Để xây dựng front-end cho ứng dụng một cách nhanh chóng và dễ dàng mở rộng, bạn cần nắm vững một số công nghệ chính và làm quen với các framework như Angular, React hoặc Vue Việc sử dụng các framework này không chỉ giúp thay đổi giao diện người dùng (UI) một cách linh hoạt mà còn giữ cho mã nguồn front-end được tổ chức một cách hiệu quả hơn.
1.3 Cài đặt công cụ : Visual Studio Code
Hình 1.2 Logo công cụ Visual Studio Code
Visual Studio Code là ứng dụng biên tập mã nguồn hỗ trợ nhanh chóng trong việc xây dựng và thiết kế website, hoạt động mượt mà trên Windows, macOS và Linux Nó cung cấp nhiều chức năng như Debug, tích hợp Git, và Syntax Highlighting, cùng với tính năng tự hoàn thành mã thông minh và Snippets Với khả năng tùy chỉnh cao, lập trình viên có thể thay đổi Theme, phím tắt và nhiều tùy chọn khác Dù nhẹ, Visual Studio Code vẫn sở hữu các tính năng mạnh mẽ.
HTML, viết tắt của Hypertext Markup Language, là ngôn ngữ đánh dấu siêu văn bản dùng để định dạng bố cục và các thuộc tính hiển thị của văn bản Nó được sử dụng để trình bày nội dung trên các trình duyệt web.
Bố cục HTML của một trang web:
- là phần khai báo kiểu dữ liệu hiển thị là html để trình duyệt (Browser) biết.
- và là cặp thẻ nằm ngoài cùng và nó có nhiệm vụ là bao hết nội dung của trang web lại Thẻ này là bát buộc.
- và : khai báo các thông tin meta của trang web như: tiêu đề trang, charset.
- và : cặp thẻ nằm bên trong thẻ , dùng để khai báo tiêu đề của trang.
- và : cặp thẻ dùng để đóng gói tất cả các nội dung sẽ hiển thị trên trang.
- ,
: định dạng dữ liệu dạng heading Thông thường có6 cấp độ heading trong HTML, trải dài từ tới Trong đó, là cấp độ heading cao nhất và là cấp độ heading thấp nhất.
-
và
: Cặp thẻ chứa các đoạn văn bản của trang web.CSS, viết tắt của Cascading Style Sheets, là ngôn ngữ dùng để tìm kiếm và định dạng lại các phần tử được tạo ra bởi HTML Nói một cách đơn giản, CSS là công cụ tạo phong cách cho trang web Trong khi HTML định hình các phần tử như đoạn văn, tiêu đề và bảng, CSS cho phép chúng ta thêm các yếu tố thiết kế như thay đổi bố cục, màu sắc trang, màu chữ, font chữ và cấu trúc tổng thể.
- Git là một hệ thống quản lý phiên bản phân tán (Distributed Version
Hệ thống kiểm soát phiên bản phân tán (DVCS) là một trong những công cụ quản lý mã nguồn phổ biến nhất hiện nay Git cho phép mỗi lập trình viên sở hữu một kho lưu trữ riêng, lưu trữ toàn bộ lịch sử thay đổi của dự án.
- Một số lệnh cơ bản:
+ Tạo một kho chứa Git
+ Sao chép một kho chứa đã tồn tại
$ git clone https://github.com/user/repository.git
+ Nhánh trong git Để tạo mới một branch:
$ git branch Để chuyển và tạo mới:
$ git push origin
JavaScript là ngôn ngữ lập trình thông dịch, chủ yếu được sử dụng để phát triển ứng dụng web động và tương tác trên trình duyệt Ngôn ngữ này cho phép lập trình viên tạo ra các chức năng và hiệu ứng động, đồng thời tương tác với người dùng thông qua các sự kiện trên trang web Được phát triển bởi Netscape vào năm 1995, JavaScript hiện nay là một trong những ngôn ngữ lập trình phổ biến nhất toàn cầu.
- JS syntax: Cú pháp của JavaScript, bao gồm các quy tắc để viết mã JavaScript, bao gồm biến, điều kiện, vòng lặp, hàm, và nhiều hơn nữa
JavaScript là ngôn ngữ lập trình hướng đối tượng, cho phép tạo ra các đối tượng để đại diện cho các thực thể trong ứng dụng web Một đối tượng bao gồm một tập hợp các cặp khóa-giá trị không có thứ tự, trong đó mỗi cặp được gọi là thuộc tính.
Hàm trong JavaScript là một khối mã được thiết kế để thực hiện các tác vụ cụ thể Các hàm này có thể được gọi bởi các sự kiện trong ứng dụng web hoặc từ các đoạn mã khác trong chương trình.
HTML DOM (Document Object Model) là tiêu chuẩn W3C cho phép truy cập và chỉnh sửa các phần tử HTML trên trang web thông qua JavaScript Với HTML DOM, JavaScript có thể thực hiện nhiều thao tác như thêm, xóa phần tử HTML, và thay đổi nội dung của các phần tử.
HTML-CSS
HTML, viết tắt của Hypertext Markup Language, là ngôn ngữ đánh dấu siêu văn bản được sử dụng để định dạng bố cục và các thuộc tính hiển thị của văn bản Nội dung này được trình bày thông qua các trình duyệt web.
Bố cục HTML của một trang web:
- là phần khai báo kiểu dữ liệu hiển thị là html để trình duyệt (Browser) biết.
- và là cặp thẻ nằm ngoài cùng và nó có nhiệm vụ là bao hết nội dung của trang web lại Thẻ này là bát buộc.
- và : khai báo các thông tin meta của trang web như: tiêu đề trang, charset.
- và : cặp thẻ nằm bên trong thẻ , dùng để khai báo tiêu đề của trang.
- và : cặp thẻ dùng để đóng gói tất cả các nội dung sẽ hiển thị trên trang.
- ,
: định dạng dữ liệu dạng heading Thông thường có6 cấp độ heading trong HTML, trải dài từ tới Trong đó, là cấp độ heading cao nhất và là cấp độ heading thấp nhất.
-
và
: Cặp thẻ chứa các đoạn văn bản của trang web.CSS, viết tắt của Cascading Style Sheets, là ngôn ngữ dùng để tìm và định dạng các phần tử do HTML tạo ra, giúp tạo phong cách cho trang web Trong khi HTML định dạng các phần tử như đoạn văn, tiêu đề và bảng, CSS cho phép thêm các yếu tố thiết kế như bố cục, màu sắc trang, màu chữ, font chữ và cấu trúc, nâng cao trải nghiệm người dùng trên website.
Git
- Git là một hệ thống quản lý phiên bản phân tán (Distributed Version
Hệ thống kiểm soát phiên bản phân tán (DVCS) là một trong những công cụ quản lý mã nguồn phổ biến nhất hiện nay Git, với khả năng cung cấp cho mỗi lập trình viên một kho lưu trữ riêng, cho phép lưu trữ toàn bộ lịch sử thay đổi của dự án một cách hiệu quả.
- Một số lệnh cơ bản:
+ Tạo một kho chứa Git
+ Sao chép một kho chứa đã tồn tại
$ git clone https://github.com/user/repository.git
+ Nhánh trong git Để tạo mới một branch:
$ git branch Để chuyển và tạo mới:
$ git push origin
JavaScript
JavaScript là ngôn ngữ lập trình thông dịch chủ yếu được sử dụng để phát triển ứng dụng web động và tương tác trên trình duyệt Ngôn ngữ này cho phép lập trình viên tạo ra các chức năng và hiệu ứng động, đồng thời tương tác với người dùng thông qua các sự kiện trên trang web Được phát triển bởi Netscape vào năm 1995, JavaScript hiện nay là một trong những ngôn ngữ lập trình phổ biến nhất toàn cầu.
- JS syntax: Cú pháp của JavaScript, bao gồm các quy tắc để viết mã JavaScript, bao gồm biến, điều kiện, vòng lặp, hàm, và nhiều hơn nữa
JavaScript là một ngôn ngữ lập trình hướng đối tượng, cho phép tạo ra các đối tượng để đại diện cho các thực thể trong ứng dụng web Một đối tượng bao gồm một tập hợp các cặp khóa-giá trị không có thứ tự, trong đó mỗi cặp được gọi là thuộc tính.
Hàm trong JavaScript là một khối mã được thiết kế để thực hiện các tác vụ cụ thể Hàm có thể được kích hoạt bởi các sự kiện trong ứng dụng web hoặc được gọi từ các đoạn mã khác trong chương trình.
HTML DOM (Document Object Model) là tiêu chuẩn W3C cho phép truy cập và thay đổi các phần tử HTML trên trang web bằng JavaScript Thông qua HTML DOM, JavaScript có thể thực hiện nhiều thao tác như thêm, xóa phần tử HTML, và thay đổi nội dung của các phần tử.
ReactJS Basic
ReactJS là một thư viện JavaScript phổ biến, được phát triển bởi Facebook, chuyên dùng để xây dựng các ứng dụng web động và tương tác Nó được ứng dụng rộng rãi trong nhiều nền tảng lớn như Facebook, Instagram, Netflix và Airbnb.
Các components phân chia giao diện người dùng thành những phần độc lập và có thể tái sử dụng, giúp xây dựng các phần tử trên trang web thông qua JavaScript hoặc JSX.
JSX là cú pháp mở rộng giúp lập trình viên kết hợp HTML và JavaScript trong một tệp, nâng cao hiệu quả phát triển Virtual DOM trong ReactJS tối ưu hóa hiệu suất ứng dụng, cho phép cập nhật thay đổi nhanh chóng và hiệu quả.
+ State được sử dụng là nơi lưu trữ các giá trị thuộc tính thuộc về component.
Khi state object thay đổi, component đó sẽ được cập nhật và hiển thị lại + Props được sử dụng để truyền dữ liệu từ component cha sang component con.
ReactJS là một công nghệ phổ biến trong cộng đồng phát triển web hiện nay, nổi bật với tính linh hoạt, hiệu suất cao và khả năng tái sử dụng mã nguồn.
Redux
Redux là thư viện quản lý trạng thái hiệu quả cho ứng dụng web, được phát triển bởi Dan Abramov và Andrew Clark Thư viện này giúp đơn giản hóa việc quản lý trạng thái, đặc biệt trong các ứng dụng có nhiều thành phần phức tạp và tương tác lẫn nhau.
- Trong một store bao gồm:
+ Trạng thái: là dữ liệu hiện tạo được lưu trữ trên trạng thái
+ Reducer: được sử dụng để xử lý các actions và cập nhật chuyển trạng thái cũ sang trạng thái mới.
+ Dispatcher: quản lý middlewares và chuyển dữ liệu xuống reducer
Các actions trong Redux là sự kiện quan trọng để gửi dữ liệu từ ứng dụng đến store Để gửi actions, bạn sử dụng phương thức store.dispatch() Các actions này được tạo ra bởi các creator và trả về một đối tượng hoặc một hàm hành động thông qua Redux Thunk.
Redux operates by maintaining the application's state in a single store, allowing components to access and update this state Actions are utilized to describe events within the application, while reducers process these actions to update the state in the store.
Redux cải thiện việc quản lý trạng thái ứng dụng, tăng cường tính tái sử dụng mã nguồn và nâng cao hiệu suất Nó được áp dụng phổ biến trong các ứng dụng web quy mô lớn như Netflix, Twitter và Airbnb.
TRIỂN KHAI DỰ ÁN XÂY DỰNG “CLEMENT
Phân tích yêu cầu của hệ thống
2.1.1 Yêu cầu chức năng của hệ thống
Bảng 1 Bảng yêu cầu chức năng của hệ thống
1 Xác thực tài khoản Đăng ký Đăng ký tài khoản khách hàng Đăng nhập Đăng nhập với tư cách khách hàng Đăng xuất Đăng xuất khỏi trang web
Xem phòng Người dùng có thể xem chi tiết thông tin của các phòng trong khách sạn Thêm phòng vào giỏ hàng
Người dùng lựa chọn được phòng mình muốn đặt và thêm vào giỏ hàng
Xóa phòng trong giỏ hàng Người dùng không muốn lựa chọn phòng để đặt nữa và xóa khỏi giỏ hàng
3 Quản lý đơn đặt phòng
Xem các phòng mình đã đặt Người dùng sau khi đã đặt phòng và thanh toán muốn xem lại thông tin mình đã đặt.
Người dùng có thể dễ dàng tìm kiếm phòng phù hợp bằng cách chọn ngày check-in, check-out và số lượng người Hệ thống sẽ hiển thị danh sách các phòng để người dùng lựa chọn.
Người quản lý có thể dễ dàng xem chi tiết đơn đặt phòng, cũng như thực hiện việc sửa đổi hoặc hủy đơn đặt phòng theo yêu cầu của khách hàng.
6 Thêm, sửa, xóa phòng - Người quản lý có thể thêm phòng khi khách sạn có xây thêm phòng
- Người quản lý có thể sửa thông tin phòng nếu cần thiết
- Người quản lý có thể xóa phòng trong website nếu như phòng đó không thể sử dụng được nữa.
Phân tích hệ thống
Bảng 2 Bảng các tác nhân
Tác nhân Ý nghĩa và nhiệm vụ
Customer - Tác nhân khách hàng có thể truy cập vào website, view Home page, view Rooms page, view Restaurant page, view Explore page, view Gallery page.
Khách hàng có thể truy cập trang đặt phòng, nhưng trước khi thực hiện đặt phòng, họ cần đăng ký tài khoản nếu chưa có hoặc đăng nhập nếu đã có tài khoản Sau khi đăng nhập, khách hàng có thể tìm kiếm phòng theo nhu cầu của mình, bao gồm ngày nhận phòng, ngày trả phòng và số lượng phòng Họ có thể xem và đặt phòng, kiểm tra danh sách đặt phòng đã thực hiện, cũng như quản lý giỏ hàng của mình bằng cách thêm hoặc xóa phòng không còn nhu cầu.
Người quản lý có quyền truy cập vào website để theo dõi thông tin các đơn đặt phòng Họ có thể chỉnh sửa thông tin đơn đặt phòng nếu phát hiện thiếu sót hoặc xóa đơn đặt phòng khi khách hàng quyết định hủy.
Người quản lý khách sạn có thể dễ dàng quản lý danh sách phòng bằng cách thêm phòng mới khi khách sạn xây dựng thêm, sửa đổi thông tin phòng khi phát hiện sai sót, và xóa phòng không còn sử dụng nữa.
Thiết kế dự án
2.3.1.1Quản lý công việc trên nền tảng Trello
- Link Trello của dự án: https://trello.com/b/qWzH7xcD/hotel- management
2.3.1.2 Quản lý source code trên nền tảng GitHub
- Link GitHub của dự án: https://github.com/tranhoaiviet/Hotel_Management
2.3.2 Quy trình thiết kế giao diện Web bằng ngôn ngữ lập trình
Mỗi thành phần trong website sẽ tương ứng với mỗi component Chia
UI thành các phần dễ quản lý và tái sử dụng.
Hình 2.4 Các Components có trong dự án
Trong website được chia thành nhiều trang
Hình 2.5 Các Pages trong dự án
- Redux là thư viện của JavaScript để quản lý các state của ứng dụng.
Hình 2.6 Redux trong dự án
Hình 2.7 Trang chủ2.3.3.2Trang Rooms
Hình 2.8 Trang Rooms2.3.3.3 Trang Restaurant
Hình 2.9 Trang Restaurant2.3.3.4 Trang Explore
Hình 2.10 Trang Explore2.3.3.5 Trang Gallery
Hình 2.11 Trang Gallery2.3.3.6 Trang Booking
Hình 2.12 Trang Booking2.3.3.7 Trang Cart
Hình 2.14 Trang thanh toán 2.3.3.9 Trang đăng ký
2.3.3.11 Trang quản lý đơn đặt phòng
Hình 2 17 Trang quản lý đơn đặt phòng
Hình 2.18 Trang quản lý phòng
KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC
Kết quả đạt được
Qua quá trình tìm hiểu, nghiên cứu và triển khai, dự án đã đạt được những kết quả như sau:
- Về mặt lý thuyết, dự án đã đạt được:
+ Xây dựng một hệ thống website bằng HTML, CSS, JavaScrip, React JS, Redux.
+ Đã học hỏi và ứng dụng những kiến thực được truyền tải tại trường và tại công ty TMA Solutions Bình Định
- Về mặt thực tiễn ứng dụng, dự án đã đạt được:
Website khách sạn Clement được thiết kế để giới thiệu dịch vụ và cho phép người dùng đặt phòng trực tuyến Trang quản trị giúp quản lý dễ dàng theo dõi và quản lý các đơn đặt phòng cùng với thông tin về phòng.
+ Giúp tăng doanh thu cho khách sạn bằng cách cung cấp một nền tảng trực tuyến để khách hàng đặt phòng một cách dễ dàng.
+ Ngoài ra, hệ thống quản lý đơn đặt phòng và quản lý phòng giúp khách sạn quản lý hoạt động kinh doanh của mình hiệu quả hơn
+ Việc khách hàng dễ tiếp cận cũng giúp khách sạn thu hút được nhiều khách hàng hơn và nâng cao trải nghiệm của họ.
Mặc dù rất nỗ lực nhưng dự án vẫn còn những mặt hạn chế như sau:
Do thời gian hạn chế trong kỳ thực tập và nhiều yếu tố khác, việc khảo sát yêu cầu của khách hàng không thể thực hiện được, dẫn đến giao diện sản phẩm còn nhiều thiếu sót và chưa hoàn thiện để đáp ứng nhu cầu của khách hàng.
+ Vì khả năng chưa cho phép chưa thể làm phần thành toán phòng mình đã đặt
KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN
Trong quá trình nghiên cứu và thực hiện báo cáo, bản thân em đã đạt được một số kiến thức cũng như rút ra nhiều kinh nghiệm:
Quá trình thực hiện báo cáo đã giúp em củng cố kiến thức đã học trong ba năm qua và làm quen với môi trường doanh nghiệp Dự án này không chỉ nâng cao khả năng làm việc nhóm mà còn rèn luyện tư duy logic và kỹ năng giải quyết vấn đề.
Qua những bài học, em đã nâng cao kiến thức và kinh nghiệm trong việc phân tích và thiết kế hệ thống Điều này không chỉ giúp em phát triển tư duy lập trình mà còn nắm rõ hơn về các ngôn ngữ lập trình như HTML, CSS, JavaScript và các thư viện như ReactJS Bên cạnh đó, em cũng hiểu rõ quy trình quản lý và thực hiện một dự án công nghệ thông tin.
- Còn hạn chế về ngôn ngữ nên còn gặp một số khó khăn
- Thời gian thực tập ngắn nên một số phần kiến thức chưa thể tìm hiểu sâu và kỉ hơn.
Sau khi hoàn thành kỳ thực tập, tôi đã xác định được lĩnh vực mà mình muốn theo đuổi và học hỏi được nhiều kiến thức bổ ích Tuy nhiên, do chưa tìm hiểu sâu nên tôi sẽ trở về tự học và cân nhắc tham gia khóa học để nâng cao kỹ năng của mình.
- Trong tương lai gần, tìm hiểu và sử dụng phần thư viện ReactJs và thư viện Redux thành thạo và nhiều hơn.
Bảng 3 Bảng phân công công việc
Ngày Công việc Người thực hiện Tiến độ Ghi chú
03/08 Xây dựng trang giao diện đăng ký Phạm Quốc An Hoàn thành 100%
Xây dựng trang giao diện đăng nhập
Phạm Quốc An Hoàn thành 100%
03/08 Xây dựng giao diện header, footer cho trang Lưu Thị Hoài Thu Hoàn thành 100%
08/08 Xây dựng trang giới thiệu
Bao gồm (trang chủ, trang rooms, trang restaurant, trang explore, trang gallery)
Xây dựng trang giao diện booking
Phạm Quốc An Hoàn thành 100%
-10/08 Xây dựng trang giao diện giỏ hàng , thanh toán Huỳnh Ngọc Thiện Hoàn thành 100%
09/08 Xây dựng trang giao diện my booking Trương Đình Thắng Hoàn thành 100%
10/08 Xây dựng trang giao diện quản lý phòng Trần Hoài Việt Hoàn thành 100%
Xây dưng trang giao diện quản lý đơn đặt phòng
Trần Hoài Việt Hoàn thành 100%
12/08 Xác nhận và gửi dữ liệu khi đăng ký Phạm Quốc An Hoàn thành 100%
Xác nhận và gửi dữ liệu khi đăng nhập
Phạm Quốc An Hoàn thành 100%
08/08 Kết nối trang giới thiệu và trang booking Lưu Thị Hoài Thu Hoàn thành 100%
Quản lý giỏ hàng (Thêm phòng vào giỏ hàng, xóa phòng khỏi giỏ hàng)
Huỳnh Ngọc Thiện Hoàn thành 100%
Quản lý trang my booking
Trương Đình Thắng Hoàn thành 100%
16/08 Tìm kiếm phòng Lưu Thị Hoài Thu Hoàn thành 100%
Quản lý phòng ( Thêm phòng, sửa thông tin phòng, xóa phòng)
Trần Hoài Việt Hoàn thành 100%
21/08 Quản lý đơn đặt phòng
( xem đơn đặt phòng, sửa đơn đặt phòng, xóa đơn đặt phòng)
Trần Hoài Việt Hoàn thành 100%