[Số trang] 1 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦNMỀM BÁO CÁO THỰC TẬP FRONT END DEVELOPER Công ty thực tập Công ty THHH TOS Thực tập sinh N[.]
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN [Số trang] KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO THỰC TẬP FRONT-END DEVELOPER Công ty thực tập : Công ty THHH TOS Thực tập sinh : Nguyễn Hồng Hải TP Hồ Chí Minh, tháng 12 năm 2022 LỜI MỞ ĐẦU [Số trang] Ngày nay, website phần thiếu sống người Với tốc độ phát triển vô mạnh mẽ,ngành lập trình web giúp khơng kinh tế mà đời sống người phát triển cách nhanh chóng Cùng với xu phát triển giới, Việt Nam ngoại lệ Ngành công nghiệp web Việt Nam xuất vài năm gần phát triển xuất hàng ngày sống người Website không nơi giải trí, cung cấp thơng tin mà cịn thị trường vô hứa hẹn doanh nghiệp hay cơng ty start up Vì lý này, em định chọn lập trình game làm định hướng cho việc học tập Sau bốn năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, muốn tham gia làm game mơi trường chun nghiệp, em có dự định thực tập hè Để hiểu rõ cách triển khai website cách mà website giúp ích cho doanh nghiệp nào, nâng cao khả lập trình nên e định chọn Công ty THHH TOS nơi gửi gắm dự định [Số trang] LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty THHH TOS 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 nhóm trainer, em tiếp thu kiến thức quan trọng để làm trang web Chân thành cảm ơn anh chị nhóm trainer bỏ nhiều thời gian,công sức để hướng dẫn chúng em hoàn thành đợt thực tập Đặc biệt cảm ơn anh Nguyễn Hoài Nam, training, 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 mới; 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 [Số trang] NHẬN XÉT CỦA KHOA [Số trang] MỤC LỤC Chương 1: Giới thiêu công ty thực tập .5 Giới thiệu công ty Toponseek Dịch vụ công ty Chương 2: Nội dung thực tập Tìm hiểu cơng ty kỹ công ty Nghiên cứu kỹ thuật 2.1 Các công cụ làm việc 2.2 Tìm hiểu Framework ReactJS 2.3 Lập trình web với HTML, CSS Jquery, Ajax .10 2.4 Tạo trang web sử dụng Shopify 11 Thực project 12 Lịch làm việc 12 Chương 3: Chi tiết project 15 Money24h.vn 15 Outdoorfurni.com 16 Paxpacking.com 18 Insite.toponseek.com 19 4.1 Giới thiệu trang web 19 4.2 Thực 19 TÀI LIỆU THAM KHẢO 22 TỔNG KẾT .23 Chương 1: Giới thiêu công ty thực tập Giới thiệu công ty Công ty THHH TOS Công ty THHH TOS thành lập từ 2016 ông Nguyễn Đức Hiếu ông Bùi Vũ Long Hai nhà sáng lập TOS năm kinh nghiệm quản lý dự án lập trình phát triển website từ cơng ty bán lẻ thương mại điện tử [Số trang] Lazada, Thegioididong Với sứ mệnh mang lại cho Doanh Nghiệp giải pháp Search Marketing toàn diện Khơng tăng thứ hạng từ khóa kết tìm kiếm Google, Bing, Yahoo, tỉ lệ chuyển đổi, mang lại nguồn doanh thu ổn định, bền vững Phương pháp SEO an toàn, lấy tảng kỹ thuật nội dung website làm nội lực để thúc đẩy tăng trưởng bền vững Dịch vụ cơng ty TopOnSeek cung cấp dịch vụ SEO tồn diện cho website bao gồm: Auditing/Kiểm tra lỗi SEO giải pháp xử lý Tư vấn chiến lược SEO – Nghiên cứu từ khoá, so sánh đối thủ ngành, tiềm thị trường Thiết kế xây dựng website theo chuẩn Google Viết theo chủ đề, đánh giá chỉnh sửa theo xếp hạng cập nhật cơng cụ tìm kiếm Với đội ngũ nhân giàu kinh nghiệm SEO, TOS mong muốn hỗ trợ Giám đốc/Quản lý/Trưởng nhóm Marketing người chịu trách nhiệm cho KPIs truy cập từ kênh không trả tiền (Unpaid Traffic) để tối ưu hố chi phí quảng cáo/Marketing doanh nghiệp [Số trang] Chương 2: Nội dung thực tập Đợt thực tập với chủ đề “Front-end developer” nhằm mục đích giúp sinh viên thực tập đào tạo tồn diện lập trình frront-end cho website, đồng thời rèn luyện kỹ mềm làm việc nhóm, thuyết trình, giao tiếp Tại cơng ty, sinh viên có hội học tập, khám phá làm việc môi trường phát triển web chuyên nghiệp Tìm hiểu cơng ty kỹ công ty Thời gian : ngày Nội dung : Giới thiệu công ty, cách tổ chức công ty Được nghe người phụ trách giới thiệu cơng ty, q trình thành lập phát triên (như nhắc đến trên), quy trình làm việc từ cao xuống thấp, cách thức tổ chức công ty Ngồi ra, thực tập sinh cịn giới thiệu cách thức làm việc công ty thời gian làm, quy định cần phải tuân thủ, cách sử dụng email công việc… Kết : Hiểu thêm cơng ty Toponseek, q trình thành lập phát triển Có thêm kỹ việc sử dụng email cơng việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm Nghiên cứu kỹ thuật 2.1 Các công cụ làm việc Thời gian : ngày Nội dung : Tìm hiểu cơng cụ sử dụng q trình làm việc [Số trang] Trong thời gian này, supervisor hướng dẫn thực tập sinh tìm hiểu cơng cụ giúp ích cho công việc sau Một số phần mềm số Bitbucket- cơng cụ để quản lý mã nguồn từ github dành cho công ty, Gitlab CI/CD- Công cụ tự động deploy ứng dụng, Visual studio code- trình soạn thảo mã nguồn phát triển Microsoft dành cho Windows, Shopify CLI- công cụ để quản lý theme shopify Thực : Thực hành sử dụng phần mềm nêu Kết : Lập trình sử dụng cơng cụ miễn phí, giúp dễ dàng kết hợp công cụ với nhau, so với việc dung IDE 2.2 Tìm hiểu Framework ReactJS Thời gian : ngày Nội dung : Được trainning kĩ ES6, sử dụng TypeScript để dùng để thiết kế xây dựng dự án ứng dụng quy mơ lớn mang tính chất phức tạp Sử dụng NextJS để xây dựng trang web chuẩn SEO - Sử dụng TypeScript Các khái niệm TypeScript, cách sử dụng TypeScripts dự án ReactJS, ưu điểm nhược điểm sử dụng TypeScripts o Static Typing: Khai báo kiểu cho biến, trình biên dịch compile code giảm rủi ro biến bị sai giá trị nảy sinh lỗi o Interfaces: Dùng để kiểm tra xem đối tượng có phù hợp với cấu trúc khai báo trước hay không Thường xử dụng để định nghĩa cấu trúc model o Class: Tương tự C# hay Java, TypeScripts cung cấp hệ thống class tương tự C# hay Java, có tính nghiêm ngặt so vớ Javascripts o Module: Modules quan trọng dự án lớn Giúp phân chia code thành nhiều phần nhỏ, thuận lợi trình tái sử dụng bảo trì dự án TypeScripts cung cấp tình export import module o Generics: Cho phép sử dụng hàm với nhiều kiểu tham số truyền vào khác - NextJS : [Số trang] NextJS framework ReactJS, cho phép tối ưu hóa hiệu năng, hỗ trợ SEO trải nghiệm người dùng thông qua Sever Side Rendering Static Site Generation NextJS lấy lợi ReactJS bổ sung tính khác để giúp tối ưu hóa hiệu hỗ trợ SEO tốt User thay phải đợi Client render HTML, sau call API lấy liệu NextJS, cách sử dụng Sever-Side Rendering, Máy khách gửi yêu cầu đến máy chủ nhận toàn trang HTML thay yêu cầu thành phần riêng lẻ với client-side rendering - Shopify Ecommerce Thực tập sinh tìm hiểu Shopify system: Shopify theme liquid Shopify CLI for developing Thực : - Tham gia đầy đủ buổi training công ty - Làm thực hành, kiểm tra kiến thức học [Số trang] Kết : - Nâng cao kỹ lập trình Front-end với TypeScripts, NextJs, Shopify Liquid - Có kiến thức quan trọng cho việc lập trình front-end sau - Ngồi cịn biết thêm số quy tắc việc viết code cho chuẩn, dễ đọc, dễ hiểu 2.3 Lập trình web với HTML, CSS Jquery, Ajax Nội dung: Các kiến thức website, html, css, js,… - Khái niệm Html Html khung xương trang web Thông qua thẻ html, định hình hình hài trang web trông tổ chức cho hợp lý Nếu khơng có HTML, trang web khơng thể hoạt động, HTML đóng vai trị móng cho trang web - Khái niệm Css: Nếu HTml móng, khung xương cho trang web Css da thịt quần áo khiến cho trang web hiển thị cách dễ nhìn giúp người dùng dễ dàng thao tác sử dụng website Css đóng vai trò quan trọng để giúp tối ưu trải nghiệm người dùng giúp trang web dễ nhìn - Js Javascript ngơn ngữ chun dùng cho lập trình trang web Nếu Css cung cấp cho Html dom thuộc tính màu sắc, cách hiển thị, … Javascript cung cấp cho Html dom hành động Giả sử ấn vào nút xảy hành động gì? Javascript cung cấp hành động cho trang web - Jquery Khi lập trình với HTML, Css JS, lấy HTML DOM để sử lý việc hiển thị mô tả hành động cho element Jquery thư viện JS, giúp rút ngắn việc khai báo, lấy element dom Nếu vannila JS, tức JS thuần, việc lấy element diễn việc dùng đến document.GetElementById hay 10 [Số trang] GetElementByClassName Jquery, cần gọi trực tiếp classname hay id lấy element - Ajax Việc hiển thị trang web hiển thị liệu cứng Với Ajax gọi API để lấy liệu từ database hiển thị Jquery Thực : - Tham gia đầy đủ buổi trainning - Cắt trang web HTML, Css JS từ Figma - Tìm kiếm tài liệu mạng để tìm hiểu thêm Kết : - Hiểu khái niệm lập trình Web với HTML, CSS, JS - Đã cắt trang web hoành chỉnh 2.4 Tạo trang web sử dụng Shopify Nội dung : Cách tạo website shopify - Định nghĩa Shopify: Shopify tảng cho phép người dùng tạo trang web ECommerce template sử dụng ngôn ngữ Liquid, Css JS - Tạo Website Shopify: Được trainner hướng dẫn tạo website shopify Tạo tài khoản shopify để quản lý thông tin CMS, tải template Shopify lên khởi tạo sản phẩm để hiển thị lên website Sử dụng Shopify CLI để quản lý source code shopify theme Thực : - Tham gia đầy đủ buổi training - Tạo website bản, lập trình Shopify liquid push code lên live 11 [Số trang] Kết quả: - Đã tạo website shopify Thực project Sau tháng training thực hành, thực tập sinh nắm kiến thực ReactJS, Liquid, Html, Css Trong tháng thứ hai, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để thực project cho công ty Lịch làm việc Tuần - - - Mức Người hướng độ Công việc dẫn hồn thành Tìm hiểu cơng Anh Nguyễn Hồn ty, cách tổ chức Hồi Nam thành cơng ty Làm quen với công cụ làm việc công ty Học cách trao đổi, làm việc qua email Tìm hiểu Shopify Anh Nguyễn Thực hành tạo Hoài Nam trang web Shopify, quản lý source code shopify cli Cắt giao diện web html, css, js Khởi tạo trang Anh Nguyễn Outdoorfurniture Hoài Nam Shopify Custom theme Nhận xét người hướng dẫn 12 theo ý khách hàng - Add script Google Analytics Google Merchant Center để tối ưu SEO - Follow khách hàng để bảo trì chỉnh sửa - Clone source code chạy local, debug để hiểu luồng liệu trang Money24h.vn - Tạo tab control hiển thị tab panel Giá Coin, Lãi suất tiết kiệm Lãi suất vay - Clone source code chạy local debug trang web nội công ty, trang Insite Toponseek - Tạo module Skillset - Cắt front-end ráp API cho module skillset - Thêm filter theo công ty trang QUản lý nhân dự án quản lý runrate - Tạo tài khoản, tạo theme, dựng liệu mẫu cho trang paxpacking.com [Số trang] Anh Nguyễn Hoài Nam Anh Nguyễn Hoài Nam Anh Nguyễn Hoài Nam 13 Shopify - Custom lại giao diện Shopify liquid - Tạo sản phẩm mới, custom lại field CMS - Add scripts Google analytisc Google merchant center Research module Trello Backlogs - Nghiên cứu cách tạo backlogs, progress trello tạo ứng dụng react tương tự Research module Master-timeline : - Tạo module master timeline để quản lý task giống Google Calendar [Số trang] Anh Nguyễn Hoài Nam Anh Nguyễn Hoài Nam 14 [Số trang] Chương 3: Chi tiết project 1.Money24h.vn Money24h.vn website tin tức thị trường tài chính, trang web xây dựng NextJS sử dụng dotnet làm backend Sở dĩ website sử dụng NExtJS NextJS framework ReactJS, thay render lại giao diện bên phía CLient NextJS render lại bên phía server để lấy thông tin nhận request từ phía client Nói cách khác, việc giúp hiểu nhu cầu người dùng từ gắn thêm thơng tin hữu ích khác, giúp tối ưu hóa cho SEO Trong vịng tháng thực tập, cơng việc e project bảo trì thêm module, widget 1.1 Widget tab hiển thị bảng giá coin, lãi suất tiết kiệm, lãi suất vay Thêm tab panel hiển thị giá coin, lãi suất tiết kiệm lãi suất vay trang chủ trang Money24h.vn 15 [Số trang] 1.1Thực - Nguyễn Hoàng Hải - Và giúp đỡ tận tình anh Nguyễn Hồi Nam-Leader team Dev 1.2Kết : Đã hoàn thành toàn tính trên, trừ việc thực map vừa 2.Outdoorfurni.com 2.1 Giới thiệu trang web Outdoorfurni.com trang web E-commerce xây dựng shopify liquid, quản lý thơng tin Shopify CMS Trong vịng tháng thực tập, giúp đỡ nhiệt tình anh Nguyễn Hoài Nam, em hoàn thành xây dựng trang web tối ưu hóa SEO cho trang web Ngồi e cịn học thêm Shopify liquid, ngơn ngữ shopify theme học cách quản lý theme shopify cli 16 [Số trang] 2.2 Thực hiện: Khởi tạo trang web, tạo tài khoản Shopify, custom theme Lezada theo yêu cầu khách hàng Giao diện shopify CMS sau khởi tạo Giao diện web sau khởi tạo: Nguyễn Hoàng Hải giúp đỡ anh Nguyễn Hoài Nam 17 [Số trang] 2.3 Kết quả: Đã hoàn thành toàn nhữn tính trang web, add scripts để tối ưu hóa cho SEO 3.Paxpacking.com 3.1 Giới thiệu trang web Paxpacking.com trang web E-commerce xây dựng shopify liquid, quản lý thơng tin Shopify CMS Trong vịng tháng thực tập, giúp đỡ nhiệt tình anh Nguyễn Hoài Nam, em hoàn thành xây dựng trang web tối ưu hóa SEO cho trang web Ngồi e cịn học thêm Shopify liquid, ngơn ngữ shopify theme học cách quản lý theme shopify cli 3.2 Thực hiện: Giao diện shopify CMS sau khởi tạo Giao diện web sau khởi tạo: 18 [Số trang] Nguyễn Hoàng Hải giúp đỡ anh Nguyễn Hoài Nam 3.3 Kết quả: Đã hồn thành tồn nhữn tính trang web, add scripts để tối ưu hóa cho SEO 4.Insite.toponseek.com 4.1 Giới thiệu trang web Insite.toponseek.com trang web nội công ty, xây dựng ReactJS, tháng thực tập công ty, em trực tiếp tham gia sử dụng phát triển trang web Module mà em thực trang Skillset, nơi để leader vào điền kĩ cần có nhân viên, quản lý danh sách kĩ 4.2 Thực Giao diện module: 19 [Số trang] Chức chính: Thêm nhóm kĩ năng: Khi người dùng click vào nút thêm nhóm kĩ xuất modal yêu cầu nhập thông tin nhóm kĩ Ấn vào icon Ấn vào icon Ấn vào icon để chỉnh sửa nhanh nhóm kĩ để chỉnh sửa chi tiết nhóm kĩ để xóa nhóm kĩ 20 Ấn vào tên kĩ để vào chi tiết nhóm kĩ Giao diện chi tiết nhóm kĩ năng: [Số trang] Chức chính: Thêm kĩ Tích vào ô checkbox để xác định có kĩ năn Xóa kĩ Cập nhật kĩ Người thực hiện: Nguyễn Hoàng Hải giúp đỡ anh Nguyễn Hoài Nam 4.3Kết quả: Đã hồn thành tồn nhữn tính trang web, add scripts để tối ưu hóa cho SEO 21 [Số trang] TÀI LIỆU THAM KHẢO Shopify: https://shopify.dev/ https://shopify.github.io/liquid/ https://www.shopify.com/partners/shopify-cheat-sheet ReactJS, Next JS https://reactjs.org/docs/getting-started.html https://nextjs.org/docs/getting-started For Error https://stackoverflow.com/ 22 [Số trang] TỔNG KẾT Như vậy, vòng hai tháng, em học cách tạo trang web shopify, cách xây dựng module NextJS ReactJS Khôn thế, trình thực tập, em nâng cao khả lập trình, khả xử lý tình huống, khả thuyết trình Cùng với đó, em cịn học tác phong làm việc môi trường công ty, cách quản lý source code, cách làm việc nhóm, triển khai mơ hình scum team,… Chân thành cảm ơn đến anh chị Công ty THHH TOS giúp trainning giải đáp thắc mắc em trình thực tập Đặc biệt cảm ơn anh Nguyễn Hồi Nam anh Nguyễn Đức Hiếu tận tình dạy cho em kĩ cần thiết để hồn thành cơng việc Đồng cảm ơn thầy Khoa Công Nghệ Phần Mềm giúp đỡ, đặc biệt thầy Huỳnh Tuấn Anh giúp em hoàn thành báo cáo này! Xin trân trọng cảm ơn 23 ... quảng cáo/ Marketing doanh nghiệp [Số trang] Chương 2: Nội dung thực tập Đợt thực tập với chủ đề ? ?Front-end developer” nhằm mục đích giúp sinh viên thực tập. .. shopify Thực project Sau tháng training thực hành, thực tập sinh nắm kiến thực ReactJS, Liquid, Html, Css Trong tháng thứ hai, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để thực project... làm định hướng cho việc học tập Sau bốn năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, muốn tham gia làm game mơi trường chun nghiệp, em có dự định thực tập hè Để hiểu rõ cách triển