Báo cáo thực tập TMA academy website

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM THỰC TẬP TỐT NGHIỆP TMA Academy Website Công ty thực tập: TMA Solutions Lớp: SE501.L11.PMCL Sinh viên thực hiện: Trần Ngọc Tồn – 17521142 TP Hồ Chí Minh, ngày 15 tháng 01 năm 2021 Trần Ngọc Toàn Thực tập tốt nghiệp NHẬN XÉT (Của giảng viên) 2 Trần Ngọc Toàn Thực tập tốt nghiệp MỤC LỤC 3 Trần Ngọc Toàn Thực tập tốt nghiệp LỜI NĨI ĐẦU Ngày nay, ngành cơng nghiệp phát triển ứng dụng web phận thiếu ngành công nghiệp phần mềm Với tốc độ phát triển vô mạnh mẽ, ngành phát triển ứng dụng web nhân tố kích thích phát triển công nghệ thông tin giới, phần cứng phần mềm Cùng với xu phát triển giới, Việt Nam ngoại lệ Ngành công nghiệp phát triển web non trẻ Việt Nam phát triển mạnh mẽ, để hòa nhập với công ty hàng đầu xây dựng tảng web giới Bên cạnh phát triển web ngành nghề tiếp cận người dùng cách nhanh chóng ta thấy mạng xã hội hay website bán hàng trực tuyến thịnh hành giới lẫn Việt Nam Sau ba năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, muốn tìm hiểu, bổ sung kiến thức mơi trường chun nghiệp, em có dự định thực tập học kì Vì vậy, em định chọn Công Ty TMA Solutions- môi trường lý tưởng, đại, chuyên nghiệp - nơi giúp em thực dự định 4 Trần Ngọc Toàn Thực tập tốt nghiệp LỜI CẢM ƠN Em xin chân thành cảm ơn ban giám hiệu quý thầy cô trường Đại học Công nghệ thông tin cung cấp bồi dưỡng cho em kiến thức suốt năm ngồi giảng đường đại học, để từ em có tảng áp dụng vào đợt thực tập cách hiệu Em xin gửi lời cảm ơn quý Công Ty TMA Solutions tạo điều kiện cho em thực tập công ty cung cấp, bổ sung cho em kiến thức mà em cịn thiếu sót Q cơng ty hỗ trợ em nhiều suốt thời gian thực tập vừa qua, dạy em kỹ cần thiết, truyền đạt cho em kinh nghiệm mà anh chị trải qua trình làm việc, trao đổi với khách hàng, tác phong tinh thần trách nhiệm trước cơng việc giao, suy nghĩ tích cực Các anh chị tạo cho em nhiều điều kiện để ứng dụng kiến thức học vào thực tế để xây dựng dự án thực tiễn từ lúc ban đầu, nâng cao trình độ, tốc độ lập trình trí thức thêm bậc Em xin chân thành cảm ơn Vì kiến thức thân hạn chế lần va chạm tiếp xúc với thực tế, áp dụng lý thuyết vào cơng việc nên thân cịn bỡ ngỡ lúng túng, không tránh khỏi thiếu sót, mong q Thầy (Cơ) đóng góp ý kiến để em hồn thiện Em xin chân thành cảm ơn! Trần Ngọc Tồn TP Hồ Chí Minh, ngày 29 tháng 09 năm 2020 5 Trần Ngọc Toàn Thực tập tốt nghiệp CHƯƠNG 1: GIỚI THIỆU CƠNG TY THỰC TẬP I Giới thiệu cơng ty TMA Solutions Vào tháng năm 1997, bà Bùi Ngọc Anh thành lập công ty TMA với kỹ sư phòng khách nhà bà Sau 20 năm phát triển, công ty sở hữu trụ sở R&D Việt Nam văn phòng đại diện nằm khắp châu lục giới TMA Solutions đứng sau FPT Software xét đội ngũ nhân lực dẫn đầu số lĩnh vực chuyên biệt phần mềm viễn thông, cạnh tranh với cơng ty lớn Ấn Độ II Sản phẩm công ty ● ● ● ● ● ● TMA Solutions chuyên cung cấp sản phẩm phần mềm phục vụ nhiều loại hình dịch vụ khác nhau, đem lại trải nghiệm tốt cho người dùng Các dịch vụ công ty chuyên cung cấp: Visual Design Software Testing Porting & Migration Production Support IT Managed Services Software Development ● ● Cung cấp giải pháp cho nhiều lĩnh vực: Telecom Finance & Insurance 6 Trần Ngọc Toàn ● ● ● Thực tập tốt nghiệp E-Commerce, Retail & Distribution Media & Publishing Logistics & Transportation CHƯƠNG 2: NỘI DUNG THỰC TẬP Đợt thực tập vừa qua giúp sinh viên đào tạo xây dựng thiết kế giao diện trải nghiệm người dùng, thực thiết kế kỹ phát triển website chủ yếu mặt front-end đồ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 chun nghiệp I 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, team T-Design, cách tổ chức team Được nghe anh Team Manager giới thiệu team công ty, 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 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 skype công việc… Kết : Hiểu thêm Công ty TMA Solutions, team T-Design cách công ty đưa giải pháp cho đối tác Có thêm kỹ việc sử dụng skype công việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm II Nghiên cứu kỹ thuật a 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 trình làm việc Qua ngày tiếp theo, anh chị team hướng dẫn công cụ ● Figma: Phần mềm thiết kế giao diện người dùng giúp tạo thiết kế review liên tục dễ dàng thực thành web mobile app ● VSCode: IDE phục vụ cho việc lập trình thực thiết kế ● Gitlab: Hệ thống git phục vụ cho việc trao đổi code bên liên quan 7 Trần Ngọc Toàn Thực tập tốt nghiệp ● Skype: Sử dụng trao đổi meeting bên liên quan dự án team ● Trello: Công cụ quản lý task giao Kết quả: Hiểu cách sử dụng công cụ, cách kết hợp công cụ để phục vụ cho cơng việc b Tìm hiểu cách thiết kế trải nghiệm người dùng Thời gian: ngày Nội dung: Tìm hiểu kiến thức tạo thiết kế trải nghiệm người dùng team Đọc tài liệu thiết kế trải nghiệm người dùng, hiểu quy trình thiết kế team: ● Nghiên cứu phân tích: o Business Goal Analysis Hiểu business goal, user insight để đảm bảo sản phẩm thiết kế hướng để phát triển doanh nghiệp o Personas Design Đại diện cho tập người dùng mục tiêu Phân tích cách họ nghĩ, hành động cảm nhận ngữ cảnh o User Testing Quan sát, thực vấn tập trung nhóm để đánh giá user insight hành vi họ Sử dụng usability testing để hiểu cách người dùng tương tác với ứng dụng website ● Thiết kế UX: o Information Architect Tổ chức thông tin, chức cách rõ rang logic để giúp người dùng dễ dàng điều hướng hình hệ thống o Sketch Phác thảo tinh chỉnh ý tưởng giải pháp thiết kế khác trước định lựa chọn o Wireframe Tạo wireframe, khung trang web, ứng dụng chứa đầy đủ thông tin chức hệ thống ● Thiết kế UI: o Visual Design Tạo giao diện cho hệ thống cách sử dụng kiểu chữ, màu sắc, khoảng trắng, hình ảnh hình minh họa o Style guide Xác định hướng dẫn cho yếu tố thiết kế để đảm bảo tính quán toàn hệ thống 8 Trần Ngọc Toàn Thực tập tốt nghiệp o UI Specification Xác định thông số kỹ thuật cho yếu tố thiết kế thiết kế ● Front-end Development: o Front-end Development Chuyển đổi tất thiết kế giao diện người dùng sang HTML, CSS Javascript, đảm bảo ứng dụng trông xác thiết kế chạy trơn tru tảng khác o UI Testing Xem xét kết đầu từ nhóm phát triển đảm bảo thiết kế triển khai xác Thực hiện: - Tìm hiểu sâu khâu quy trình - Cách sử dụng cơng cụ thiết kế, thiết kế hình mẫu Kết quả: - Tăng thêm hiểu biết kiến thức xây dựng trải nghiệm người dùng - Thiết kế hình phục vụ cho dự án c Tìm hiểu HTML, CSS JavaScript Thời gian: ngày Nội dung; Được training kiến thức quan trọng Html, css, JavaScript - Sử dụng thẻ ,,… xếp hợp lý, dễ đọc, dễ nhìn phải xếp thẻ cho chuẩn SEO Đồng thời tìm hiểu Html5 - Tổ chức css theo cấu trúc từ layout lớn đến layout chi tiết, đặt tên class element html cho phù hợp dễ đọc Và atribute css để trang web có ui/ux tốt thân thiện với người dùng - Responsive cho trang website hoàn chỉnh - Tìm hiểu jQuery (thư viện viết từ Javascript) - Tìm hiểu Bootstrap framework hỗ trợ tốt cho việc lập trình giao diện website Thực hiện: - Tham gia buổi training - Làm giao diện website thiết kế Kết quả: - Nâng cao kỹ lập trình HTML/CSS - Biết số quy tắc viết code html/css cho người dễ đọc, dễ hiểu dễ dàng sử dụng - Hoàn thành giao diện trang thiết kế 9 Trần Ngọc Tồn 10 Thực tập tốt nghiệp d Tìm hiểu Reactjs – Ant Design Thời gian: ngày Nội dung: - Khởi tạo ứng dụng reactjs - Tìm hiểu vòng đời component reactjs - Các kiến thức quan trọng component,router, state, props, cách viết ES6, chuyển từ html phân chia thành component reactjs, cách gọi api axios, Redux, - Kiểm tra api thông qua postman - Biết cách sử dụng ant design – tập hợp hầu hết thư viện reactjs layout, notification, modal, checkbox, upload file, pagination,… Thực hiện: - Tạo ứng dụng mẫu reactjs ant-design Kết quả: - Nắm kiến thức reactjs - Nắm cách để triển khai ứng dụng web với reactjs - Các trang viết reactjs sử dụng component ant-design III Thực dự án Sau tháng training thực hành, thực tập sinh nắm kiến thực để tham gia vào project công ty Các tháng sau thực tập sinh tham gia vào project công ty IV Tuần Lịch làm việc Công việc - - Người hướng dẫn Mức độ hoàn thành Nhận xét người hướng dẫn Tìm hiểu Anh Phạm cơng ty, cách Tuấn Anh tổ chức công ty Làm quen với công 10 10 Trần Ngọc Toàn 11 Thực tập tốt nghiệp - 2-6 - 6-11 12 cụ làm việc công ty - Học cách trao đổi, làm việc qua skype Tìm hiểu quy trình thiết kế, cơng cụ thiết kế trải nghiệm người dùng Thực hành tạo thiết kế cho dự án Thiết kế giao diện cho dự án internal TMA-Academy Review đưa vào để thực web - Tìm hiểu, đọc tài liệu html css - Tìm hiểu reactjs, antdesign - Xây dựng giao diện cho trang web TMAAcademy - Fix bug responsive, lỗi hiển thị - Chỉnh sửa giống design - UI Testing deploy Chị Nguyễn Trần Ái Trinh Anh Trần Ngọc Nông Anh Tuấn Anh a Nông 11 11 Trần Ngọc Toàn 12 Thực tập tốt nghiệp CHƯƠNG 3: CHI TIẾT DỰ ÁN I Giới thiệu dự án Website TMA-Academy coi landing page dùng để phục vụ cho việc thông tin cho người khóa học TMA tổ chức Ngồi cịn có trang chi tiết khóa giúp người đăng ký khóa học Website thiết kế chuẩn SEO website với công nghệ hỗ trợ tối ưu cho kế hoạch truyền thông điều đặc biệt website tối ưu để sử dụng nhiều tảng khác Các hình chính: Homepage 12 12 Trần Ngọc Toàn 13 Thực tập tốt nghiệp 13 13 Trần Ngọc Toàn 14 Thực tập tốt nghiệp Giới thiệu 14 14 Trần Ngọc Toàn 15 Thực tập tốt nghiệp 15 15 Trần Ngọc Toàn 16 Thực tập tốt nghiệp Khóa học 16 16 Trần Ngọc Tồn 17 Thực tập tốt nghiệp 17 17 Trần Ngọc Toàn 18 Thực tập tốt nghiệp Thực tập 18 18 Trần Ngọc Toàn 19 II Thực tập tốt nghiệp Thực Với giúp đỡ tận tình chị Trinh phần design anh Nơng lập trình front end III Kế hoạch Giai đoạn 1: Thiết kế giao diện cho tất trang, review đánh giá chị Trinh chị Ngọc phịng marketing Kết quả: Hồn thành giao diện website thiết kế Giai đoạn 2: - Sử dụng reactjs Ant-design xây dựng trang Kết quả: Hoàn thành giao diện website Giai đoạn 3: - Fix bug, gửi cho anh chị phòng Academy test, anh Tuấn Anh test UI Deploy lên trang www.tma-academy.vn - TÀI LIỆU THAM KHẢO For UI/UX Design: https://uxplanet.org UX Collective (uxdesign.cc) For HTML, CSS, JS https://www.w3schools.com/ https://getbootstrap.com/docs/4.0/getting-started/introduction/ For Reactjs https://reactjs.org/ https://ant.design/ 19 19 Trần Ngọc Toàn 20 Thực tập tốt nghiệp TỔNG KẾT Như vậy, trình thực tập em học nhiều kiến thức kĩ chuyên môn thiết kế UI/UX lập trình web kĩ xã hội làm việc nhóm, giao tiếp, thuyết trình Nhờ tham gia vào dự án thực tế công ty em có kinh nghiệm làm việc góp phần phát triển thân tương lai Chân thành cảm ơn giúp đỡ anh Trần Ngọc Nông chị Nguyễn Trần Ái Trinh dạy giúp đỡ em trình thực tập 20 20 ... nghiệp Khóa học 16 16 Trần Ngọc Toàn 17 Thực tập tốt nghiệp 17 17 Trần Ngọc Toàn 18 Thực tập tốt nghiệp Thực tập 18 18 Trần Ngọc Toàn 19 II Thực tập tốt nghiệp Thực Với giúp đỡ tận tình chị Trinh... 12 12 Trần Ngọc Tồn 13 Thực tập tốt nghiệp 13 13 Trần Ngọc Toàn 14 Thực tập tốt nghiệp Giới thiệu 14 14 Trần Ngọc Toàn 15 Thực tập tốt nghiệp 15 15 Trần Ngọc Tồn 16 Thực tập tốt nghiệp Khóa học... reactjs sử dụng component ant-design III Thực dự án Sau tháng training thực hành, thực tập sinh nắm kiến thực để tham gia vào project công ty Các tháng sau thực tập sinh tham gia vào project công ty