BỘ LAO ĐỘNG THƯƠNG BINH VÀ XÃ HỘI TRƯỜNG CAO ĐẲNG KINH TẾ CÔNG NGHỆ TP HỒ CHÍ MINH oOo BÁO CÁO THỰC TẬP TỐT NGHIỆP XÂY DỰNG PHÁT TRIỂN GIAO DIỆN WEBSITE DỰA TRÊN BẢN THIẾT KẾ Giảng viên hướng dẫn Th S Sinh viên thực hiện Lớp C15CTT1 Ngành Công nghệ thông tin Chuyên ngành Công nghệ thông tin TP Hồ Chí Minh, tháng 06 năm LỜI CẢM ƠN Đầu tiên cho em xin trân trọng gửi lời cảm ơn chân thành và sự kính trọng tới các Thầy và Cô ngành Công nghệ thông tin trường Cao Đẳng Kinh Tế Công Nghệ TP HCM, và đặc.
GIỚI THIỆU ĐƠN VỊ THỰC TẬP
Giới Thiệu Chung
Thành lập vào năm 2017, HITIME đã nhanh chóng trở thành một công ty dịch vụ CNTT hàng đầu tại Việt Nam, chuyên về thiết kế website Với niềm đam mê và sự nỗ lực không ngừng, HITIME hỗ trợ khách hàng xây dựng các doanh nghiệp mạnh mẽ, linh hoạt và sáng tạo hơn.
HiTime là một tổ chức được xây dựng dựa trên các nền tảng có sẵn, mang đến công nghệ gần gũi và dễ sử dụng cho khách hàng Với phương châm đơn giản hóa quy trình, HiTime tập trung vào việc cung cấp giải pháp giúp khách hàng đạt được kết quả tối ưu trong công việc kinh doanh.
Đội Ngũ Lãnh Đạo
Founder – CEO : Nguyễn Hoàng Chương
Lead Designer : Vũ Thị Kim Oanh
Lead Developer : Nguyễn Công Vũ
Tầm Nhìn - Sứ Mệnh
Với khát vọng tiên phong và chiến lược phát triển bền vững, HiTime hướng đến việc trở thành công ty công nghệ hàng đầu tại Việt Nam, khẳng định uy tín và vị thế trên bản đồ kinh tế thế giới Chúng tôi cam kết xây dựng các dịch vụ và giải pháp công nghệ nhằm hỗ trợ cộng đồng doanh nghiệp Việt Nam phát triển mạnh mẽ trên thị trường quốc tế.
Cung cấp các giải pháp công nghệ nâng cao hiệu quả hoạt động kinh doanh cho các Doanh nghiệp Việt. c) GIÁ TRỊ CỐT LỖI:
Trung thực – Nhiệt Huyết – Sáng Tạo – Hiệu Quả” d) VĂN HÓA NGƯỜI HITIME:
Yêu nước, Kỷ luật, Văn minh
HiTime là nơi hội tụ những cá nhân lý tưởng, năng lực và bản lĩnh, luôn chủ động tìm kiếm hướng đi riêng để phát triển các giải pháp và dịch vụ hiệu quả, góp phần vào sự phát triển của doanh nghiệp Việt Môi trường làm việc tại HiTime khuyến khích sự sáng tạo và hiệu quả, trong khi văn hóa công ty đề cao tinh thần trách nhiệm, tôn trọng kỷ luật, và coi trọng sự công bằng và văn minh.
NỘI DUNG NHIỆM VỤ CHÍNH ĐƯỢC GIAO
- Thực tập ở vị trí lập trình viên (frontend)
- Làm việc cùng các anh chị tại công ty
- Được các anh chị đi trước hướng dẫn
- Làm việc cùng các bạn thực tập sinh khác
2.2 Các nhiệm vụ được phân công
- Tự học và thực hành dựa trên tài liệu
- Làm bố cục giao diện chung
- Làm giao diện chi tiết
- Sử dụng javascript để tạo popup và thay đổi cần thiết cho web
- Sử dụng thư viện React, giúp phân chia components dễ dàng , có thể tái sử dụng
- Hoàn thành giao diện web của khách hàng đưa ra
NỘI DUNG CÁC CÔNG VIỆC VÀ KẾT QUẢ ĐẠT ĐƯỢC
3.1 Tuần 1: Ôn tập lại kiến thức cũ
- Thực hành và hiểu được chức năng của các thẻ cơ bản trong html
- Thực hành và hiểu được chức năng của các thẻ cơ bản trong css
- Sử dụng các lệnh cơ bản trong photoshop
+ Sử dụng và thao tác với file psd
+ Hiển thị / ẩn các layout đã có
+ Phân chia bố cục web
+ Cắt hình ảnh từ file psd
+ Giảm kích thước ảnh nhằm giảm dung lượng.
3.2 Tuần 2: Thực hiện giao diện dựa trên file psd
3.2.1 Tạo giao diện đơn giản theo mẫu sau:
3.2.2 Sử dụng HTML và CSS để tạo giao diện:
- Phân chia 3 phần : header, main, footer.
- Main gồm nhiều section và các section được chia thành nhiều phần nhỏ
- Nhóm các chi tiết trùng lập lại từng phần chung và riêng để có thể sử dụng lại những phần cần thiết.
3.2.3 Phân bổ thư mục theo cấu trúc
- Phân chia các têp theo từng thư mục riêng bao gồm các thư mục hình ảnh, định dạng, fonts, chức năng, ….
- Các đường dẫn trong khi lập trình phải là các đường dẫn tương đối
3.3 Tuần 3 : Thực hiện và hoàn thành bài mẫu chi tiết
3.3.1 Viết định dạng theo SCSS và cài đặt grunt để tạo file min
- Thực hiện theo cách này thì khi ctrl + s sẽ được tự động biên dịch file scss thành css và nén nó thành file min.css
3.3.2 Tạo dự án và phân chia components trên Visual Studio Code
Chức năng của Responsive giúp website hiển thị tốt trên mọi thiết bị, đồng thời đảm bảo nội dung và giao diện dễ sử dụng.
- Sử dụng flexbox, grid, các giá trị tương đối, các thẻ sẵn có trong css để responsive cho web
- Phân chia từng kích cỡ màn hình để có thể điều chỉnh cho đúng
3.5.1 Trao đổi, phân tích với team và nhận dự án xây dựng giao diện website ( Website bán giày Annanas )
- Giao diện trang web được viết bằng HTML/CSS/Javascript/React trên ứng dụng Visual Studio Code
Visual Studio Code là một trình biên tập mã mạnh mẽ do Microsoft phát triển, tương thích với các hệ điều hành Windows, Linux và macOS Nó cung cấp nhiều tính năng hữu ích như chức năng debug, tích hợp Git, hỗ trợ tô màu cú pháp, tự hoàn thành mã thông minh, và các đoạn mã (snippets) giúp cải thiện hiệu suất lập trình.
HTML (HyperText Markup Language) là ngôn ngữ cung cấp cấu trúc và ý nghĩa cho nội dung trên web, xác định các thành phần như tiêu đề, đoạn văn và hình ảnh Trong khi đó, CSS (Cascading Style Sheets) là ngôn ngữ dùng để tạo kiểu cho sự xuất hiện của nội dung, bao gồm các yếu tố như phông chữ và màu sắc.
HTML và CSS là hai ngôn ngữ độc lập, với HTML đại diện cho nội dung và CSS thể hiện cách thức trình bày nội dung đó Việc viết CSS bên trong tài liệu HTML là không nên, vì mỗi ngôn ngữ có vai trò riêng biệt trong việc xây dựng trang web.
JavaScript là một ngôn ngữ lập trình nhẹ, chủ yếu được sử dụng trong HTML và WEB Nó cho phép thực hiện các script phía máy khách, tương tác với người dùng và tạo ra các trang web động Với khả năng hướng đối tượng, JavaScript là một phần quan trọng trong phát triển web hiện đại.
JavaScript, ban đầu được biết đến với tên gọi Mocha và sau đó là LiveScript, đã được công ty Netscape đổi tên thành JavaScript nhằm tận dụng sự phổ biến của ngôn ngữ lập trình này.
React là thư viện JavaScript hàng đầu cho việc phát triển giao diện người dùng (UI), mang lại tốc độ phản hồi ấn tượng khi người dùng nhập liệu nhờ vào phương pháp render trang web tiên tiến.
Công cụ này, được phát triển bởi Facebook, ra mắt vào năm 2013 dưới dạng mã nguồn mở JavaScript Hiện nay, nó đã vượt qua các đối thủ lớn như Angular và Bootstrap, trở thành một trong những thư viện JavaScript phổ biến nhất.
3.5.2 Tiến hành tạo dự án và phân chia component trên Visual Studio Code
+ File Assets : Là file chứa những hình ảnh Image
+ File App.css : File chứa đoạn code Css
+ App.js : Thư viện gọi Components
+ File Components: Giúp phân chia các UI (giao diện người dùng) thành các phân nhỏ để dễ dàng quản lý và tái sử dụng
• CSS : Là file chứa những Css của components
• Svg: File chứa image có đuổi svg (giỏ hàng, yêu thích, load)
3.6 Tuần 6 : Hoàn thành trang sản phẩm 3.6.1 : Fake IPA sản phẩm
3.7 Tuần 7 : Hoàn trang chi tiết sản phẩm 3.7.1 : Chi tiết sản phẩm
3.7.3: Xóa sản phẩm , trùng sản phẩm
3.8 Tuần 8 : Hoàn thành giao diện trên mobile
KẾT QUẢ QUA ĐỢT THỰC TẬP
+ Có kỹ năng về lập trình cơ bản cũng như khả năng chịu khó học hỏi.
+ Được cung cấp tài liệu, môi trường làm việc.
+ Nhận được sự hỗ trợ gỡ lỗi từ người hướng dẫn cũng như các thành viên trong phòng làm việc.
+ Mất nhiều thời gian làm quen với môi trường làm việc, phương thức làm mới. +Một số lỗi liên quan đến môi trường.
- Những kiến thức, kỹ năng cần có:
+ Tối ưu hóa từ khóa tìm kiếm thông tin.
4.2 Mối quan hệ giữa các đồng nghiệp trong tổ hay bộ phận và đơn vị nơi thực tập
- Để có thể thuận lợi phát triển các mối quan hệ trong công ty cũng như hoàn thành công việc được giao cần phải:
+ Mở rộng, tạo mối quan hệ.
+ Học được những kiến thức chuyên ngành.
+ Có đồng nghiệp hỗ trợ giải quyết vấn đề.
+ Chưa nắm rõ tính cách của nhau trong thời gian đầu.
+ Kiến thức cá nhân còn hạn chế.
4.3 Học hỏi từ các quy định nơi thực tập
4.3.1 Nội quy lao động, học tập, nghỉ ngơi và an toàn lao động
- Thời gian làm việc tại công ty em đã nắm được những quy định, nội quy sau:
+ Làm việc đúng giờ (8h00 - 17h00), có giờ nghỉ trưa (12h00 – 13h00).
+ Không ép buộc làm việc tăng ca.
+ Công việc được phân công và lên kế hoạch từ trước.
+ Công ty không có quy định về đồng phục cho đội ngũ dev.
-Trong quá trình thực tập tại công ty em đã nắm được những tác phong công nghiệp sau:
+ Tuân thủ giờ giấc của công ty.
+ Lịch cũng như lộ trình làm việc rõ ràng.
+ Ứng xử tốt, tôn trọng đồng nghiệp và cấp trên.
4.3.2.Quy định về Phòng cháy chữa cháy, Vệ sinh và môi trường
- Quy định về Phòng cháy chữa cháy và vệ sinh môi trường:
+ Đáp ứng được các tiêu chí Phòng cháy chữa cháy theo quy định.
+ Giữ gìn vệ sinh chung và có ý thức bảo vệ môi trường
+ Môi trường làm việc thoải mái, không gian vừa đủ cho học tập và làm việc.
Việc thiếu kiến thức về an toàn và sức khỏe tại nơi làm việc có thể dẫn đến những rủi ro nghiêm trọng cho nhân viên, đặc biệt trong những tình huống khẩn cấp Để đảm bảo an toàn cho tất cả mọi người, cần thiết phải trang bị đầy đủ kiến thức và kỹ năng cần thiết.
4.4 Đánh giá mối liên hệ giữa lý thuyết và thực tiễn
- Trong quá trình thực tập phát sinh những tình huống như sau:
Tiếp thu công nghệ mới tại công ty thường khác biệt so với môi trường học tập truyền thống Trong khi ở trường, giáo viên cung cấp tài liệu chi tiết và chỉ ra những điểm quan trọng, thì tại công ty, thực tập sinh cần tự học qua internet và từ các đồng nghiệp Điều này yêu cầu sự chủ động và khả năng tìm kiếm thông tin của thực tập sinh để nắm bắt công nghệ mới hiệu quả.
Khi nghỉ phép, tại trường, bạn cần viết đơn và thông báo cho giảng viên, trong khi tại công ty, chỉ cần thông báo trước cho người hướng dẫn từ 3-5 ngày Ngoài ra, bạn cũng phải hoàn thành các công việc được giao trước đầu tuần báo cáo.
Trong môi trường công ty, thực tập sinh cần tự đánh giá khả năng của bản thân, chủ động tìm kiếm thông tin và giải quyết các vấn đề phát sinh trong quá trình thực tập bằng cách sử dụng internet, điều này khác biệt so với cách học tập truyền thống ở trường.
- Để đạt được hiểu quả cao trong công việc cần phải có, trang bị kỹ năng:
+ Khả năng tìm kiếm và sửa lỗi.
- Trong quá trình học tập em nhận được sự giúp đỡ các anh, chị tài phòng làm việc:
+ Kỹ năng làm việc nhóm.
Tại trường, em nhận được sự hỗ trợ tận tình từ các giảng viên khoa Công nghệ Thông Tin, giúp em giải quyết các vấn đề học tập, hướng dẫn cách trình bày và làm báo cáo Họ cũng cung cấp đầy đủ thông tin cần thiết cho quá trình thực tập và làm việc tại công ty.
KẾT LUẬN
- Sau đợt thực tập này em học hỏi được thêm rất nhiều từ thầy cô, các anh chị tại công ty Hitime
- Em có thể tạo được các giao diện web cơ bản
- Làm và hoàn thiện được cơ bản giao diện của khách hàng đưa ra
5.2 Hướng phát triển trong tương lai
- Học thêm ngôn ngữ mới
- Cả thiện kĩ năng các nhân
