Báo cáo thực tập lập trình WEB FRONT END

1 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 LẬP TRÌNH WEB FRONT-END Công ty thực tập : Công Ty Wee Digital Người phụ trách : Trình Lê Thiên Phú Thực tập sinh : Trần Minh TP Hồ Chí Minh, tháng năm 2020 LỜI MỞ ĐẦU 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 Việt Nam với kinh tế đà phát triển khơng thể thiếu phần đóng góp to lớn ngành cơng nghệ thơng tin nói chung ngành làm web nói riêng Web giúp doanh nghiệp quảng bá sản phẩm thương hiệu họ cho khách hàng, 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 nhỏ lẻ, hộ gia đình hoạt động 24/7 Web 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 vời khác mà trang web mang lại cho sống người Mặc dù Việt Nam non trẻ lĩnh vực công nghệ thông tin Tuy nhiên, đất nước ta phát triển mạnh mẽ, sản sinh nguồn nhân lực chất lượng cao đóng góp cho kinh tế cho hịa nhập với cơng ty IT hàng đầu giới Một số công ty có tên tuổi nước Spiraledge góp phần lớn vào phát triển tích cực cho phát triển công nghệ đất nước 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 SpiralEdge – môi trường động, chuyên nghiệp – nơi giúp em thực kế hoạch thân TRẦN MINH HIẾU LỜI CẢM ƠN Trân trọng gửi lời cảm ơn công ty Wee Digital 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 hồn thành đợt thực tập Đặc biệt cảm ơn anh Trình Lê Thiên Phú 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 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 TRẦN MINH HIẾU NHẬN XÉT CỦA KHOA TRẦN MINH HIẾU MỤC LỤC LỜI MỞ ĐẦU LỜI CẢM ƠN NHẬN XÉT CỦA KHOA .4 CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP 1.Giới thiệu công ty Wee Digital: CHƯƠNG 2: NỘI DUNG THỰC TẬP 1.Tìm hiểu cơng ty kỹ công ty: 2.Nghiên cứu kỹ thuật: a)Các công cụ làm việc: b)Tìm hiểu ngơn ngữ Javascript, HTML, CSS, ReactJS: 3.Thực dự án thực tế: 10 4.Lịch làm việc: 10 CHƯƠNG 3: CHI TIẾT VỀ PROJECT .11 TÀI LIỆU KHAM KHẢO .12 TỔNG KẾT 13 TRẦN MINH HIẾU TRẦN MINH HIẾU CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP Giới thiệu công ty Wee Digital: - Wee Digital công ty khởi nghiệp trẻ tiên phong tiên phong nhận diện khuôn mặt công nghệ nhận dạng sinh trắc học khác cho dịch vụ khác Việt Nam, bao gồm ngân hàng du lịch Kể từ mắt ba năm trước, thiết lập mạng lưới khách hàng hàng đầu bao gồm ngân hàng nhóm doanh nghiệp lớn nước Để phù hợp với tầm nhìn phủ xã hội khơng tiền mặt, cơng nghệ nhận dạng khn mặt Wee Digital giúp việc chuyển tiền liên ngân hàng điện thoại di động trang web dễ dàng thuận tiện - Wee Digital người bán công nghệ, mà đầu nối kỹ thuật Nền tảng cho phép người dùng kết nối với nhà cung cấp dịch vụ kết nối với Wee Digital - Ngoài lĩnh vực ngân hàng, Wee Digital phát triển công nghệ nhận diện khuôn mặt lĩnh vực khác du lịch khách sạn Chẳng hạn, công ty nghỉ dưỡng Vingroup hộ khu nghỉ dưỡng trở thành doanh nghiệp Việt Nam áp dụng công nghệ nhận dạng khuôn mặt Jun Digital để phục vụ khách hàng 8 CHƯƠNG 2: NỘI DUNG THỰC TẬP Đợt thực tập với chủ đề “Lập trình front-end với React JS” nhằm mục đích giúp sinh viên thực tập đào tạo kĩ lập trình web, đồng thời rèn luyện kĩ mềm tư logic, thuyết trình, làm việc nhóm Tại cơng ty, sinh viên có hội học tập trải nghiệm môi trường làm việc chun nghiệp Ngồi ra, cơng ty cịn đào tạo thực tập sinh cách để trở thành lập trình viên tài 1.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, 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 email công việc… Kết : Hiểu thêm công ty Wee Digital, 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 2.Nghiên cứu kỹ thuật: a)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 trình làm việc Trong thời gian này, anh mentor 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ố Tortoise SVN - sử dụng làm việc nhóm, visual studio code– trình duyệt file trực quan với nhiều tiện ích, git bashcơng cụ giúp lập trình viên push pull code dự án từ git về, bit-bucket theo dõi commit branch tạo dự án jira – cơng cụ giúp quản lí quy trình nghiệp vụ tích hợp sử dụng Agile 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 TRẦN MINH HIẾU b)Tìm hiểu ngơn ngữ Javascript, HTML, CSS, ReactJS: Thời gian : 15 ngày (3 tuần)  Nội dung : Được hướng dẫn kỹ thuật lập trình với ngơn ngữ Javascript để làm việc với ReactJS Làm quen với ES6 lập trình Web application đơn giản ReactJS  Học vể html: cách sử dụng thẻ để tạo nên trang web theo chuẩn HTML5, kết hợp với Javascript để hiểu DOM (bao gồm virtual, real shadow dom)  Học css: cách viết css class, cách sử dụng css atributes theo chuẩn BEM Áp dụng styled components để viết CSS React  Học cách sử dụng thư viện Redux Thunk, Redux Saga, Axios để quản lý state thực action bất đồng  Tìm hiểu JSON: thực tập sinh tìm hiểu JSON ứng dụng việc trao đổi liệu web  Học cách sử dụng Web Socket Để giao tiếp server client thông qua socket dễ dàng  Biết cách sử dụng Figma để sáng tạo, cắt giao diện cho Web App Thực :  Tham gia đầy đủ buổi training công ty  Ứng dụng kiến thức thân vào thực tế Kết :  Nâng cao kỹ lập trình với ngơn ngữ Javascript Tổ chức code cách hợp lý Áp dụng tiêu chuẩn khắt khe nhằm hạn chế nhiều lỗi phát sinh TRẦN MINH HIẾU 3.Thực dự án thực tế: Sau tháng training thực hành, thực tập sinh nắm kiến thực JS làm việc với đồ án công ty Trong tháng tiếp theo, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để thực số chức nhỏ dự án dần tăng mức độ khó lên nhằm thử thách thực tập sinh 4.Lịch làm việc: Thán g 4,5 Công việc -Tìm hiểu cơng ty, cách tổ chức 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 ngơn ngữ lập trình JS, HTML, CSS - Lập trình với ReactJS - Áp dụng React hooks, thunk Saga để làm việc với ReactJS - Làm việc với đồ án công ty mức độ nhỏ Người hướng dẫn Mức độ hoàn thành Nhận xét người hướng dẫn Anh Trình Lê Thiên Phú Anh Lê Phú - Làm việc với đồ án công Anh ty mức độ cao Lê Phú - Dựa vào kiến thức kinh Anh nghiệm có để làm việc với Lê mức độ đồ án với khách Phú hàng Trình Thiên Trình Thiên Trình Thiên TRẦN MINH HIẾU 1 CHƯƠNG 3: CHI TIẾT VỀ PROJECT Vì sách bảo mật cơng ty nên em tiết lộ chi tiết đồ án em thực cơng ty Nhưng thầy/cơ tham khảo dự án nho nhỏ thực tuần thử sức với ReactJS công ty em: https://bitbucket.org/hieutran-individual/ecommerce/src/master/ TRẦN MINH HIẾU TÀI LIỆU KHAM KHẢO -Tài liệu ngôn ngữ javascript, html, css, naming convention, ReactJS: https://developer.mozilla.org/en-US/docs/Web/HTML https://developer.mozilla.org/en-US/docs/Web/CSS https://developer.mozilla.org/en-US/docs/Web/JavaScript http://getbem.com/naming/ https://reactjs.org/docs/getting-started.html https://redux.js.org/ https://styled-components.com/ TRẦN MINH HIẾU TỔNG KẾT Sau đợt thực tập công ty Wee Digital, em học nhiều điều bổ ích từ thực tế mà nhà trường chưa thể cho em trải nghiệm Đồng thời, em đạt thành cơng vị trí lập trình viên Front-End đội ngũ Wee Digital Và lần nữa, em xin cảm ơn thầy cô tạo điều kiện cho em để trải nghiệm môi trường làm việc chuyên nghiệp ngồi ghế nhà trường TRẦN MINH HIẾU ... NỘI DUNG THỰC TẬP Đợt thực tập với chủ đề ? ?Lập trình front- end với React JS” nhằm mục đích giúp sinh viên thực tập đào tạo kĩ lập trình web, đồng thời rèn luyện kĩ mềm tư logic, thuyết trình, làm... 3 .Thực dự án thực tế: Sau tháng training thực hành, thực tập sinh nắm kiến thực JS làm việc với đồ án công ty Trong tháng tiếp theo, trainer hướng dẫn thực tập sinh áp dụng kiến thức học để thực. .. TỔNG KẾT Sau đợt thực tập công ty Wee Digital, em học nhiều điều bổ ích từ thực tế mà nhà trường chưa thể cho em trải nghiệm Đồng thời, em đạt thành cơng vị trí lập trình viên Front- End đội ngũ Wee