BÁO CÁO THỰC TẬP GATSBY TRONG LẬP TRÌNH WEB

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 GATSBY TRONG LẬP TRÌNH WEB Công ty thực tập : Công ty TNHH DESIGNVELOPER Người phụ trách : Đồng Tấn Huy–Nguyễn Thành Công Thực tập sinh : Huỳnh Long Pháp - 18521226 TP Hồ Chí Minh, tháng 06 năm 2022 LỜI MỞ ĐẦU Lời em xin chân thành cảm ơn đến Công ty TNHH Designveloper tạo điều kiện cho em thực tập cơng ty để tìm hiểu thực hành trực tiếp công cụ phần mềm cơng ty q trình tham gia học hỏi tìm hiểu sâu cách hoạt động phần mềm Designveloper công ty phát triển phần mềm ứng dụng hàng đầu Thành phố Hồ Chí Minh, Việt Nam, thành lập vào năm 2013 từ tập thể trẻ đầy nhiệt huyết lập trình viên web, mobile; chuyên viên thiết kế UI/UX chuyên gia VOIP Sau tháng thực tập công ty, em huấn luyện, trải nghiệm với phương pháp làm việc mẻ với kiến thức học ghế nhà trường, từ biết cách thức hoạt động cơng ty, có thêm nhiều kinh nghiệm cơng việc LỜI CẢM ƠN Trân trọng gửi lời cảm ơn công ty TNHH Designveloper (DSV) 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 của anh chị, em tiếp thu kiến thức quan trọng để làm sản phẩm phần mềm mang lại giá trị cho công ty Chân thành cảm ơn anh chị 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 Em xin chân thành cảm ơn anh Đồng Tấn Huy – Team Leader, anh Nguyễn Thành Cơng – lập trình viên FullStack tồn thể anh chị cơng ty giúp đỡ, hỗ trợ em suốt tuần thực tập vừa qua NHẬN XÉT CỦA KHOA MỤC LỤC Chương Giới thiệu công ty thực tập 1.1 Giới thiệu công ty Designveloper 1.2 Sản phẩm công ty 1.2.1 LuminPDF 1.2.2 Swell & Switchboard 1.2.3 Walrus Education 1.2.4 Joyn’it 1.2.5 Bonux Chương Nội dung thực tập 2.1 Tìm hiểu NodeJS 2.2 Khi nên sử dụng NodeJS 2.3 Tìm hiểu Gatsby 2.3 Thời gian thực tập 10 Chương Chi tiết Project 11 3.1 Nội dung chi tiết project 11 3.2 Kết đạt 13 3.2.1 Kiến thức tích luỹ 13 3.2.2 Sản phẩm thực tế 14 Tài liệu tham khảo 16 Tổng kết 17 CHƯƠNG GIỚI THIỆU VỀ CÔNG TY THỰC TẬP 1.1 Giới thiệu công ty Designveloper Designveloper công ty phát triển phần mềm ứng dụng hàng đầu Thành phố Hồ Chí Minh, Việt Nam, thành lập vào năm 2013 từ tập thể trẻ đầy nhiệt huyết lập trình viên web, mobile; chuyên viên thiết kế UI/UX chuyên gia VOIP Hiện Desigveloper có sở với quy mơ 100 nhân viên Văn phòng thứ toạ lạc 14, Đường số 39, Phường Bình An, Quận 2, TP.Thủ Đức Văn phòng thứ 50/4 Quang Trung, Phường 10, Quận Gị Vấp, TP Hồ Chí Minh 1.2 Sản phẩm công ty 1.2.1 LuminPDF Lumin dịch vụ lưu trữ tích hợp tệp PDF phát triển Designveloper Lumin cho phép người dùng chỉnh sửa lưu trữ tệp PDF ứng dụng di động website, đồng hóa tệp PDF thiết bị, chia sẻ tệp PDF với người Hiện Lumin đạt 22 triệu người dùng 1.2.2 Swell & Switchboard Swell & Switchboard tảng quản lý doanh nghiệp ngành công nghiệp lượng mặt trời Đến nay, tảng áp dụng đánh giá cao việc quản lý quy trình làm việc hàng ngày khách hàng Với thành tựu này, Designveloper phát triển nâng cao mơ hình sản phẩm để đạt độ phủ sóng tồn giới 1.2.3 Walrus Education Walrus tảng để kết nối sinh viên, giáo viên trường học Công nghệ React, React Native Nodejs sử dụng để phát triển ứng dụng web mobile cho tảng 1.2.4 Joyn’it Nền tảng Joyn’it cung cấp dịch vụ dành riêng cho cộng đồng để tạo kiện dễ dàng thông báo cho thành viên kiện diễn 1.2.5 Bonux Bonux dự án xây dựng ví tiền điện tử với tính lưu trữ, quản lý thực giao dịch cho người sử dụng Thiết kế giao diện UI-UX số kỹ thuật khác áp dụng vào trình phát triển dự án CHƯƠNG NỘI DUNG THỰC TẬP 2.1 Tìm hiểu NodeJS • Nodejs tảng (Platform) phát triển độc lập xây dựng Javascript Runtime Chrome mà xây dựng ứng dụng mạng cách nhanh chóng dễ dàng mở rộng • Nodejs xây dựng phát triển từ năm 2009, bảo trợ công ty Joyent, trụ sở California, Hoa Kỳ • Phần Core bên Nodejs viết hầu hết C++ nên cho tốc độ xử lý hiệu cao • Nodejs tạo ứng dụng có tốc độ xử lý nhanh, realtime thời gian thực • Nodejs áp dụng cho sản phẩm có lượng truy cập lớn, cần mở rộng nhanh, cần đổi công nghệ, tạo dự án Startup nhanh 2.2 Khi nên sử dụng NodeJS Là tảng phát triển ứng dụng mạnh mẽ, Nodejs thỏa mãn nhu cầu lập trình, phát triển ứng dụng Các chun gia lĩnh vực lập trình, cơng nghệ khun dùng Nodejs phát triển ứng dụng Websocket server, Fast File Upload Client, Ad Server, Cloud Services, RESTful API, Any Real-time Data Application, • Websocket server: Các máy chủ web socket Online Chat, Game Server… • Fast File Upload Client: chương trình upload file tốc độ cao • RESTful API: ứng dụng mà sử dụng cho ứng dụng khác thơng qua API • Any Real-time Data Application: ứng dụng có yêu cầu tốc độ thời gian thực Micro Services: Ý tưởng micro services chia nhỏ ứng dụng lớn thành dịch vụ nhỏ kết nối chúng lại với Nodejs làm tốt điều 2.3 Tìm hiểu Gatsby Gatsby static site generator cho React phát hành phiên vào tháng trước Đó cơng cụ khơng giúp bạn xây dựng dự án (hoặc trang web) mà tuyên bố trang web nhanh chóng hoạt động • Tốc độ Hiệu suất: Gatsby framework xây dựng từ core React JS Và đặc biệt framework để làm web tĩnh, từ lý tốc độ load web nhanh trang khác Việc chuyển qua lại trang website nhanh tất style, html javascript load lần tải Khi người dùng ấn vào viết trang web bạn, nội dung tải dạng JSON hiển thị lên Không cần load lại tồn trang, việc cấu hình plugin cho phép tối ưu việc tải ảnh Và preload (tải trước nội dung link người dùng ghé qua) cho trang web bạn tốc độ cực cao • Nền tảng hỗ trợ tốt: Cũng giống WordPress Gatsby có hệ thống plugin đa dạng hỗ trợ tối đa cho developer gatsby-plugin-image, gatsbytransformer-sharp • SEO Optimizer: Gatsby có hệ thống plugin đa dạng, nên Gatsby có plugin hỗ trợ chọ việc SEO tốt • PWA(Progressive Web Apps): Gatsby cung cấp plugin để chuyển trang web bạn thành từ SPA sang PWA Giúp trang web tải thành ứng dụng desktop lẫn mobile Đa phần CMS hoạt động với Gatsby thơng qua API (Restful Graphql), việc sử dụng CMS phụ thuộc vào việc bạn sử dụng quen CMS Hoặc CMS tiện lợi nhất, CMS tự phát triển Miễn có API lấy nội dung Tuy nhiên, CMS sau tiếng có plugin để lấy nội dung (từ API chuyển liệu graphql Gatsby) • Netlify CMS • Buttercms • Ghost • Contentful • WordPress • Strapi • Prismic 2.3 Thời gian thực tập Thời gian thực tập cơng ty • Từ thứ đến thứ trừ thời gian học trường • Sáng từ 9h – 12h • Chiều từ 13h – 18h CHƯƠNG CHI TIẾT VỀ PROJECT 3.1 Nội dung chi tiết project Xây dựng Website tĩnh giới thiệu công ty, kết nối số lượng lớn người dùng truy cập vào trang LuminPDF STT Tuần Tuần Tuần Tuần Nội dung thực tập • Giới thiệu công ty, tham gia buổi chào hỏi, làm quen với anh chị cơng ty • Cài đặt số phần mềm sử dụng công ty, cơng việc • Tìm hiểu NodeJS, Gatsby lập trình web • Tìm hiểu CMC Prismic, giải u cầu khách hàng • Tìm hiểu Optimize Image sử dụng Gatsby Image • Tìm hiểu Icomoon • Tìm hiểu CRM Hubspot, Hubspot Form • Xây dựng ISTE Landing Page cho khách hàng tham dự hội nghị ISTE Free For Schools • Xây dựng Landing Page cảm ơn người dùng tham dự hội nghị ISTE Free For Schools 4 Tuần • UAT – ISTE Free For Schools, chờ feedback từ khách hàng, thay đổi theo yêu cầu • Xây dựng trang merge file PDF – cho phép người dùng gộp file PDF lại với 3.2 Kết đạt 3.2.1 Kiến thức tích luỹ • Kỹ cơng nghệ o Tìm hiểu cơng nghệ mới, công việc môi trường thực tế o Quen với nghiệp vụ công ty tham gia vào dự án mang tính ưu tiên team Được tham gia giúp sức để đóng góp cho team Va chạm nhiều vấn đề thực tế hồn thành Được tìm hiểu nhiều thơng tin kiến thức cho • Kỹ mềm: o Kỹ tìm kiếm thơng tin o Kỹ lên kế hoạch làm việc o Kỹ giải vấn đề o Kỹ giao tiếp tương tác với leader sếp o Kỹ làm việc theo nhóm làm việc độc lập o Kỹ biết lắng nghe học tập lời phê bình o Kỹ tổ chức cơng việc quản lý thời gian o Kỹ làm việc theo deadline o Kỹ viết báo cáo công việc hàng ngày o Tự tin động cơng việc • Các kết khác: o Rèn luyện tinh thần tự giác, giờ, quy định nơi công sở o Rèn luyện tính cẩn thận, tỉ mỉ nhiệm vụ giao o Hiểu rõ quy trình làm việc quy tắc bảo mật làm việc 3.2.2 Sản phẩm thực tế Trang web khách hang yêu cầu xây dựng để tham dự hội nghị ISTE Free for schools Tại người dùng – người tham dự hội nghị để lại thơng tin, từ mà khách hang liên lạc, kết nối học sinh sinh viên, giáo viên quay lại sử dụng ứng dụng Trang cảm ơn người dùng tham dự hội nghị sau điền form để lại thông tin người dùng TÀI LIỆU THAM KHẢO Thông tin công ty: https://www.designveloper.com/vi/ NodeJS: https://nodejs.org/en/about/ Gatsby: https://www.gatsbyjs.com/docs/ Hubspot: https://developers.hubspot.com/docs/api/overview Prismic: https://prismic.io/docs/technologies/nextjs TỔNG KẾT Như vậy, vịng tháng ngắn ngủi, nhóm kịp tìm hiểu hồn thành nhiệm vụ, bàn giao cho khách hang trang web hoàn chỉnh để tham dự hội nghị Cũng tháng qua, than em tiếp thu số kiến thức quan trọng trình làm việc với nhứng người anh chị dày dặn kinh nghiệm Chân thành cảm ơn giúp đỡ anh chị team Lumin, nỗ lực nhóm Lumin Static giúp đỡ em hồn thành công việc  ... Hồ Chí Minh, Việt Nam, thành lập vào năm 2013 từ tập thể trẻ đầy nhiệt huyết lập trình viên web, mobile; chuyên viên thiết kế UI/UX chuyên gia VOIP Sau tháng thực tập công ty, em huấn luyện, trải... thành đợt thực tập Em xin chân thành cảm ơn anh Đồng Tấn Huy – Team Leader, anh Nguyễn Thành Công – lập trình viên FullStack tồn thể anh chị công ty giúp đỡ, hỗ trợ em suốt tuần thực tập vừa qua... Optimizer: Gatsby có hệ thống plugin đa dạng, nên Gatsby có plugin hỗ trợ chọ việc SEO tốt • PWA(Progressive Web Apps): Gatsby cung cấp plugin để chuyển trang web bạn thành từ SPA sang PWA Giúp trang web