BÁO CÁO THỰC TẬP TỐT NGHIỆP LẬP TRÌNH WEB FRONT END

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC GIA ĐỊNH KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO THỰC TẬP TỐT NGHIỆP LẬP TRÌNH WEB FRONT END Giảng viên hướng dẫn: TỪ LÃNG PHIÊU Sinh viên thực hiện: LÊ THỊ HỒNG THỦY MSSV: 1911080022 Lớp: K13DCPM01 Khóa: 13 Thành phố Hồ Chí Minh, tháng 08 năm 2022 LỜI CẢM ƠN Trân trọng gửi lời cảm ơn công ty HT Software tạo điều kiện cho em có hội thực tập công ty Chỉ thời gian ngắn, nhờ dẫn nhiệt tình anh chị team Em tiếp thu kiến thức quan trọng để có hiểu cách vận hành trang web Chân thành cảm ơn anh chị nhóm bỏ nhiều thời gian, cơng sức để hướng dẫn em hoàn thành đợt thực tập Đặc biệt cảm ơn anh Trần Ngọc Hiếu hướng dẫn, giúp đỡ cho chúng em tận tình khó khăn cơng việc, đến khó khăn việc làm quen với môi trường viết trang web Chỉ em cách sửa lỗi thường gặp Cũng xin cảm ơn thầy/cô khoa công nghệ phần mềm nhiệt tình hỗ trợ, tạo điều kiện em làm báo cáo ĐÁNH GIÁ CỦA ĐƠN VỊ THỰC TẬP Thái độ tác phong thời gian thực tập: Kiến thức chuyên môn: Nhận thức thực tế: Đánh giá khác: Đánh giá chung kết quả thực tập: ………………, ngày ……… tháng ……… năm ………… TM Đơn vị thực tập (Ký tên, đóng dấu) ĐÁNH GIÁ CỦA GIẢNG VIÊN HƯỚNG DẪN Thái độ tác phong thời gian thực tập: Kiến thức chuyên môn: Nhận thức thực tế: Đánh giá khác: Đánh giá chung kết quả thực tập: ………………, ngày ……… tháng ……… năm ………… Giảng viên hướng dẫn (Ký tên, ghi rõ họ tên) MỤC LỤC MỞ ĐẦU Việt Nam với kinh tế phát triển, ngành Công nghệ thông tin trở thành ngành mũi nhọn để nước ta sớm hoàn thành mục tiêu cơng nghiệp hóa- đại hóa tất ngành lĩnh vực Và ngành làm web giúp doanh nghiệp quảng bá sản phẩm thương hiệu họ cho khách hang, cho đối tác hiệu so với cách làm truyền thống báo, ấn phẩm, đài tiếng nối truyền hình Web giúp ta dễ dàng tiếp cận , chăm sóc khách hàng tốt Web giúp cho việc kinh doanh doanh nghiệp lớn hay nhỏ lẻ, hộ gia đình hoạt động 24/7 Web làm giảm tải gánh nặng chi phí vận hành doanh nghiệp, giảm nhân công, tăng hiệu suất nhiều lợi ích tuyết i vời khác mà trang web mang lại cho sống người Việc lướt web để nắm bắt thông tin, phục vụ cho việc thư giãn, giải trí trở thành phần khơng thể thiếu Đặc biệt hệ trẻ cần phải truy cập internet để tự mở mang trau dồi kiến thức cho thân Sau khoảng thời gian sức học tập tham gia thi học thuật trường, với mục đích mở rộng vốn kiến thức lập trình cịn non nớt thân Em thực tập nơi em chọn công ty HT Software– môi trường động, chuyên nghiệp – nơi giúp em thực kế hoạch thân Chương 1: GIỚI THIỆU VỀ ĐƠN VỊ THỰC TẬP Giới thiệu công ty HT Software Công ty TNHH HT SOFEWARE hoạt động lĩnh vực phát triển phần mềm, tư vấn giải pháp công nghệ thông tin huấn luyện nguồn nhân lực cho doanh nghiệp Chúng cố gắng hành động để thành công; thành công khách hàng thành công Tiền thân cơng ty cổ phần R2S, Đến tháng 06/2022 tách ra, mục đích để phát triển sản phẩm riêng quảng bá sản phẩm Lĩnh vực huấn luyện: Tạo môi trường để bạn sinh viên trường chuẩn bị trường chưa có kinh nghiệm thực tế trải nghiệm từ làm việc doanh nghiệp mà không cần phải đào tạo thêm có đào tạo phần đặc thù doanh nghiệp Về lâu dài Công ty TNHH HT SOFEWARE hướng đến việc nhận yêu cầu từ doanh nghiệp huấn luyện theo đơn đặt hàng Đồng thời xây dựng thương hiệu cho việc giám định cung cấp nguồn nhân lực có chất lượng phù hợp với nhu cầu doanh nghiệp Hiện tại, Cơng ty TNHH HT SOFEWARE có hai loại huấn luyện Đào tạo lập trình viên doanh nghiệp Triển khai học kỳ dự án/học kỳ doanh nghiệp trường đại học, cao đẳng, dạy nghề Phát triển phần mềm: Công ty TNHH HT SOFEWARE nhận phát triển phần mềm theo đơn đặt hàng từ khách hàng cá nhân, doanh nghiệp nước Với dự án này, học viên thử việc nhận lương thời gian thử việc; Và hết bạn trở thành đội ngũ phát triển phần mềm công ty Tư vấn giải pháp công nghệ thông tin: Công ty TNHH HT SOFEWARE cung cấp dịch vụ tư vấn giải pháp triển khai giải pháp công nghệ thông tin Cung cấp nguồn nhân lực hợp tác triển khai dự án Ngồi Cơng ty TNHH HT SOFEWARE cịn hỗ trợ doanh nghiệp vừa nhỏ triển phận công nghệ thông tin Sản phẩm trang web công ty: Công ty TNHH HT SOFEWARE thiết kế trang web mua sắm hàng trực tuyến, hỗ trợ nông dân làm nông nghiệp buôn bán sản phẩm thô trực tuyến chạy đa tảng Android, Iphone, laptop, mobile web Chương 2: NỘI DUNG THỰC TẬP Tìm hiều HTML,CSS, CSS3 1.1 HTML, CSS HTML, HyperText Markup Language, cung cấp cấu trúc nội dung ý nghĩa cách xác định nội dung đó, ví dụ tiêu đề, đoạn văn hình ảnh CSS, hay Cascading Style Sheets, ngơn ngữ trình bày dùng để tạo kiểu cho xuất nội dung sử dụng, ví dụ phơng chữ màu sắc Hai ngôn ngữ HTML CSS độc lập với giữ nguyên CSS không nên viết bên tài liệu HTML ngược lại Theo quy định, HTML đại diện cho nội dung CSS thể xuất nội dung Các thuật ngữ HTML phổ biến: • Elements: Các element định xác định cấu trúc nội dung đối tượng trang Một số yếu tố sử dụng thường xuyên bao gồm nhiều cấp độ tiêu đề (được xác định đến ) đoạn văn (được xác định

); danh sách tiếp tục bao gồm , , , , , nhiều nhiều 10 Một cách khác để xử lý thuộc tính thành phần sử dụng props Props giống đối số hàm bạn gửi chúng vào thành phần dạng thuộc tính Ví dụ: Props Constructor: Nếu thành phần bạn có hàm khởi tạo, props phải chuyển cho hàm tạo React.Component thông qua phương thức super() Ví dụ: 24 Hook reactjs, Translate với thư viện i18n 5.1 Hook reactjs Hooks bổ sung React 16.8 Hooks hàm cho phép bạn “kết nối” React state lifecycle vào components sử dụng hàm Với Hooks bạn sử dụng state lifecycles mà không cần dùng ES6 Class Sau thời gian làm việc với React có lẽ bắt gặp số vấn đề sau: • “Wrapper hell” component lồng (nested) vào nhiều tạo DOM tree phức tạp 25 • Component lớn • Sự rắc rối Lifecycles class Lợi ích hook: • Khiến component trở nên gọn nhẹ • Giảm đáng kể số lượng code, dễ tiếp cận • Cho phép sử dụng state function component 5.2 Translate với thư viện i18n HOC cổ điển (thành phần bậc cao hơn) nhận tchức i18n thể bên thành phần bạn thông qua đạo cụ Trong hầu hết thời gian bạn cần hàm t để dịch nội dung bạn, bạn nhận phiên i18n để ví dụ Thay đổi ngôn ngữ Sử dụng withTranslationHOC để bọc thành phần (lớp hàm) để truy cập hàm dịch phiên i18n Đang tải không gian tên: 26 Ghi đè phiên i18next: Không sử dụng Suspense: Tìm hiểu api, tìm hiểu tool postman, Redux reactjs: 6.1 Tìm hiểu api API chế cho phép thành phần phần mềm giao tiếp với tập hợp định nghĩa giao thức Ví dụ: hệ thống phần mềm quan thời tiết chứa liệu thời tiết hàng ngày Ứng dụng thời tiết điện thoại bạn “trò chuyện” với hệ thống qua API hiển thị thông tin cập nhật thời tiết hàng ngày điện thoại bạn Kiến trúc API thường giải thích dạng máy chủ máy khách Ứng dụng gửi yêu cầu gọi máy khách, ứng dụng gửi phản hồi gọi 27 máy chủ Như vậy, ví dụ thời tiết, sở liệu quan thời tiết máy chủ ứng dụng di động máy khách API hoạt động theo cách khác nhau, tùy vào thời điểm lý chúng tạo Api Soap: Các API sử dụng Giao thức truy cập đối tượng đơn giản Máy chủ máy khách trao đổi thông đệp XML Đây loại API linh hoạt dùng phổ biến trước Api RPC: Những API gọi Lệnh gọi thủ tục từ xa Máy khách hoàn thành hàm (hoặc thủ tục) máy chủ máy chủ gửi kết cho máy khách Api Websocket: phiên API web đại khác sử dụng đối tượng JSON để chuyển liệu API WebSocket hỗ trợ hoạt động giao tiếp hai chiều ứng dụng máy khách máy chủ Máy chủ gửi thông điệp gọi lại cho máy khách kết nối, điều khiến loại API hiệu API REST Api Rest: Đây loại API phổ biến linh hoạt web Máy khách gửi yêu cầu đến máy chủ dạng liệu Máy chủ dùng liệu đầu vào từ máy khách để bắt đầu hàm nội trả lại liệu đầu cho máy khách 6.2 Tìm hiểu tool postman: Postman loại công cụ cho phép người dùng thao tác với API, mà phổ biến REST Với thử nghiệm API Postman cơng cụ phổ biến thực nghiệm nhiều Nhờ Postman lập trình viên gọi Rest API mà khơng cần phải viết dịng code 28 Postman có khả hỗ trợ phương thức HTTP bao gồm: POST, PUT, DELETE, PATCH, GET, Ngồi ra, Postman cịn cho phép lập trình viên lưu lại lịch sử lần request nên vô tiện lợi cho nhu cầu sử dụng lại Hiện nay, Postman sử dụng vơ rộng rãi nhờ mang lại nhiều lợi ích như: • Postman sử dụng Collection nên người dùng tạo sưu tập cho lệnh gọi API họ Mỗi sưu tập tạo thư mục với nhiều request Đây điểm mạnh giúp trình tổ chức thử nghiệm dễ dàng • Trong Postman Collections environment import export giúp người dùng chia sẻ tệp dễ dàng Ngoài ra, liên kết trực tiếp sử dụng với mục đích chia sẻ sưu tập • Postman có khả test trạng thái phản hồi HTTP • Hỗ trợ gỡ lỗi: Bộ phận bảng điều khiển Postman giúp bạn kiểm tra liệu xuất Từ đó, q trình gỡ lỗi trở nên dễ dàng linh hoạt • Hỗ trợ tạo thử nghiệm: Những điểm kiểm tra thử nghiệm xác định trạng thái phản hồi HTTP thành công Và vai trị xác nhận thêm vào lệnh gọi API nhằm đảm bảo phạm vi kiểm tra • Thơng qua q trình sử dụng sưu tập newman đảm bảo kiểm thử chạy lần lặp lại Từ đó, tiết kiệm thời gian cho thử nghiệm lặp lặp lại • Tích hợp liên tục: Postman có khả hỗ trợ tích hợp liên tục cho hoạt động phát triển trì 6.3 Redux reactjs Redux thư viện quản lý trạng thái (dữ liệu) cho ứng dụng Javascript, có React Redux tổ chức đối tượng store chứa toàn liệu ứng 29 dụng Mỗi component truy xuất trực tiếp đến state đê lưu trữ liệu liên lạc thay phải chuyển liệu từ component đến component khác Redux độc lập với react, muốn dùng redux bạn phải cần thêm thư viện react-redux để làm cầu nối Nhờ mà bạn sử dụng Redux React Cài đặt thư viện project sau: npm install redux react-redux Trong Redux có ba thành phần store ( lưu liệu ứng dụng), action (các thông để thực thực thay đổi) , reducer (thực thi thay đổi theo thông tin từ action) Các thành phần Redux: 30 Action: Mỗi action chứa thơng tin cho biết cần phải làm với store, ví dụ thêm sản phẩm, xóa sản phẩm, thêm loại tin, xóa loại tin… Mỗi action có thuộc tính tên type cho biết hành động cần thực store Ngồi type bạn thêm thơng tin khác tùy ý Ví dụ: Reducer: Reducer thực thi thay đổi state (trong store) dựa theo thơng tin action Ví dụ: thêm liệu, cập nhật, xóa liệu store Reducer nhận tham số state action cần thi hành Các thông tin action giúp reducer thực thi công việc trả state Ví dụ: 31 Store: Store nơi lưu trạng thái (dữ liệu) ứng dụng Có thể truy xuất liệu state, update state…Ví dụ: Tạo store cho ứng dụng: Trong store có hàm dispatch(), cách dùng để cập nhật state: store.dispatch() 32 TÀI LIỆU THAM KHẢO • Tài liệu html, css, css3: https://nordiccoder.com/blog/tong-quan-html-css-ban-can-biet/ • https://codezi.pro/cac-khai-niem-co-ban/css3-la-gi.html - - Tài liệu tham khảo boostrap ,Javascript: • https://freetuts.net/javascript-la-gi-viet-ung-dung-javascript-dautien-263.html - Tài liệu tham khảo Git, ES6 • https://fptcloud.com/git-la-gi/ https://viblo.asia/p/tim-hieu-co-ban-ve-es6DKBedxBZedX - Học reactjs ,Class component reactjs • • • https://vncoder.vn/bai-viet/reactjs-la-gi-huong-dan-hoc-reactjs-cho-nguoibat-dau https://t3h.com.vn/tin-tuc/react-class-component • Hook reactjs, Translate với thư viện i18n https://viblo.asia/p/lam-quen-voi-react-hookOeVKBdnQlkW • https://react-i18nextcom.translate.goog/latest/withtranslation-hoc? _x_tr_sl=en&_x_tr_tl=vi&_x_tr_hl=vi&_x_tr_pto=sc - Tìm hiểu api, Tìm hiểu tool postman, Redux reactjs • https://aws.amazon.com/vi/what-is/api/ • https://itnavi.com.vn/blog/postman-la-gi#:~:text=Postman%20l %C3%A0%20m%E1%BB%99t%20lo%E1%BA%A1i%20c%C3%B4ng,b 33 %E1%BA%A5t%20k%E1%BB%B3%20d%C3%B2ng%20code%20n %C3%A0o • https://longnv.name.vn/su-dung-react/su-dung-redux-trong-react 34 35 Trường Đại học CNTT Gia Định Khoa Cơng Nghệ Thơng Tin Cộng hồ xã hội chủ nghĩa Việt Nam Độc lập - Tự - Hạnh phúc BÁO CÁO THỰC TẬP TỐT NGHIỆP HÀNG TUẦN Họ tên SV: Lê Thị Hồng Thủy MSSV: 1911080022 Lớp: K13DCPM01 Giảng viên hướng dẫn: Từ Lãng Phiêu Tên doanh nghiệp (đơn vị) đến thực tập: CÔNG TY TNHH HT SOFTWARE Địa chỉ: 75/8 Tân Lập, Phường Đơng Hồ, TP Dĩ An, Tỉnh Bình Dương Điện thoại: 0879367919 Tên cán phụ trách thực tập doanh nghiệp: Trần Ngọc Hiếu Thời gian thực tập Từ: 04/07/2022 Đến: 13/08/2022 1Stt Tuần thứ Tuần (Từ ngày 04/07 đến ngày 10/07) Tuần (Từ ngày 11/07 đến ngày 17/07) Tuần (Từ ngày 18/07 đến ngày 24/07) Tuần (Từ ngày 25/07 đến ngày 31/07) Tuần (Từ ngày 01/08 đến ngày 07/08) Nội dung CV thực tập tuần - Tìm hiểu Tool cơng cụ cần thiết để lập trình - Tìm hiểu HTML, CSS, CSS3 - Tìm hiểu boostrap - Tìm hiểu Javascript - Tìm hiểu Git, - Tìm hiểu ES6 - Học reactjs - Class component reactjs - Hook reactjs - Translate với thư viện i18n 36 Nhận xét CB hướng dẫn DN Nhận xét giảng viên hướng dẫn Tuần - Tìm hiểu api, (Từ ngày - Tìm hiểu tool postman 08/08 đến ngày 13/08) - Redux reactjs Hướng dẫn chung: - Sinh viên phải điền vào mẫu báo cáo vào cuối tuần nộp lại cho cán phụ trách thực tập doanh nghiệp - Cán phụ trách thực tập doanh nghiệp nhận xét vào báo cáo đưa lại cho sinh viên vào thứ hai đầu tuần - Sinh viên nộp lại cho giảng viên phụ trách thực tập để duyệt báo cáo thực tập tốt nghiệp hàng tuần theo kế hoạch MỘT SỐ QUI ĐỊNH Hình thức định dạng trang giấy: - Khổ giấy A4; - Lề trái: 3.5 cm; - Lề phải: 2.5 cm; - Lề trên: 3.0 cm; - Lề dưới: 3.0 cm; - Cỡ chữ: 14; - Font chữ: Times New Roman; - Giãn dòng: 1.5 line Đánh số trang giấy: - Bắt đầu đánh số từ trang Mở đầu (giữa trang / Footer); - Báo cáo thực tập tốt nghiệp tối thiểu 30 trang (ĐH & CĐ), 20 trang (TCCN) Danh mục tài liệu tham khảo: - Nếu có tài liệu tiếng Việt tiếng nước ngồi xếp riêng theo thứ tự ngôn ngữ (Việt, Anh, Pháp, Đức, Nga, Trung, Nhật…) 37 3.1 Sách / chuyên khảo / luận văn: 3.1.1 Tiếng Việt: Với tài liệu tham khảo tiếng Việt xếp tài liệu theo vần ABC theo Tên tác giả; Liệt kê đầy đủ theo trình tự sau: Tác giả (Năm xuất bản) Tên sách / Tên viết Nhà xuất bản, Nơi xuất bản, Trang 3.1.2 Tiếng nước ngoài: Với tài liệu tham khảo tiếng nước xếp tài liệu theo vần ABC theo Tên tác giả; Liệt kê đầy đủ theo trình tự sau: Tác giả (Năm xuất bản) Tên sách / Tên viết Nhà xuất bản, Nơi xuất bản, Trang 3.2 Tin từ Internet báo điện tử: 3.2.1 Tài liệu báo, tạp chí xuất bản: Tác giả (Năm xuất bản) Tên báo Tên tạp chí điện tử [trích dẫn ngày]; Số tạp chí (kỳ xuất bản): [số trang/trang hình] Lấy từ: URL: địa internet 3.2.2 Tài liệu tin trang internet, khơng có tên báo, số xuất bản: Tác giả (Năm xuất bản) Tên [Internet] [trích dẫn ngày] Lấy từ: URL: địa internet 3.3 Cơ sở liệu internet: Tác giả (Năm xuất bản) Tên [Internet] Chi tiết xuất có Lấy từ: Tên chi tiết xuất có [Ngày trích dẫn] 38