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

1 1TRƯỜ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 Spiraledge Người phụ trách : Lê Tuấn Anh Thực tập sinh : Bùi Gia Hịa 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 BÙI GIA HÒA LỜI CẢM ƠN Trân trọng gửi lời cảm ơn công ty SpiralEdge 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 Lê Tuấn Anh 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ảm ơn anh Lê Nguyễn Nhật Trung người hướng dẫn em 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 BÙI GIA HÒA NHẬN XÉT CỦA KHOA MỤC LỤC BÙI GIA HÒA LỜI MỞ ĐẦU LỜI CẢM ƠN NHẬN XÉT CỦA KHOA CHƯƠNG 1: GIỚI THIỆU CÔNG TY THỰC TẬP 1.Giới thiệu công ty Spiraledge: 2.Sản phẩm công ty: CHƯƠNG 2: NỘI DUNG THỰC TẬP 10 1.Tìm hiểu cơng ty kỹ công ty: 10 2.Nghiên cứu kỹ thuật: 10 a)Các cơng cụ làm việc: 10 b)Tìm hiểu ngơn ngữ Javascript, HTML, CSS: 11 c)Lập trình web với angularJS: 12 d)Cách build deploy dự án lên server: 13 3.Thực dự án thực tế: 14 4.Lịch làm việc: 14 CHƯƠNG 3: CHI TIẾT VỀ PROJECT 16 1.Giới thiệu trang web tend: 16 2.Các tính trang web: 16 TÀI LIỆU KHAM KHẢO 21 TỔNG KẾT 22 BÙI GIA HÒA BÙI GIA HÒA CHƯƠNG 1: GIỚI THIỆU CƠNG TY THỰC TẬP Giới thiệu cơng ty Spiraledge: -Spiraledge công ty hàng đầu chuyên mảng sức khỏe mua sắm online có trụ sở đặt CampBell, California với văn phịng Cincinati, Ohio Hồ Chí Minh, Việt Nam Các sản phẩm công ty bao gồm SwimOutlet.com, trang web tiếng sản phẩm bơi lội, YogaOutlet.com trang web bán gói dạy yoga online Swim.cohỗ m tảng kĩ thuật số dạy bơi tập thể dục -Kể từ thành lập vào năm 2001, công nghệ trở thành vấn đề cốt lõi văn hóa cơng ty chìa khóa định cho thành công ngày hôm Spiraledge, cho phép tập trung vào sứ mệnh cốt lõi cơng ty: hồn thiện trải nghiệm mua sắm trực tuyến cho khách hàng họ 2.Sản phẩm công ty: -Spiraledge 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 Nhờ cơng ty có chun mơn lâu năm lĩnh vực công nghệ thông tin Spiraledge sỡ hữu sản phẩm tiếng thân họ làm 8 BÙI GIA HÒA BÙI GIA HÒA CHƯƠNG 2: NỘI DUNG THỰC TẬP Đợt thực tập với chủ đề “Lập trình front-end web” 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, Đợt thực tập với chủ đề “Lập trình web front-end server-render-side” nhằm mục đích giúp sinh viên ứng dụng kiến thức vào thực tiễn, đồng thời rèn luyện kĩ mềm kĩ tư duy, làm việc nhóm, thuyết trình, giao tiếp Tại cơng ty, sinh viên có hội phép sai sửa sai, anh chị trước review code khắc phục lỗi sai đặt tên biến mà không khởi tạo giá trị, khởi tạo hàm không đặt điều kiện chạy vào hàm Tư logic rõ ràng chặn lỗi phát sinh từ người dùng trình deploy sản phẩm đến người dùng 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, 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 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 Spiraledge, 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 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, BÙI GIA HỊA 1 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 b)Tìm hiểu ngơn ngữ Javascript, HTML, CSS: Thời gian : ngày (1 tuần) Nội dung : Được hướng dẫn kỹ thuật javascript, kiến thức quan trọng cho việc tối ưu chương trình chạy trình duyệt web chẳng hạn chrome hay firefox ● Sử dụng closure: tìm hiểu closure gì, đặc tính closure javascript Closure tập hợp bao gồm hàm nơi hàm số khai báo Ở môi trường bao gồm biến cục phạm vi hàm số khai báo mức độ truy cập closure ● Cách khởi tạo biến xác định mức độ truy cập biến, hàm: ● Học vể html: cách sử dụng thẻ để tạo nên trang web Sự khác biệt thẻ div span Ngoài ra, thực tập sinh biết thêm html5, thẻ tính ● Học css: cách viết css class, cách sử dụng css atribute khiến trang web lung linh, giao diện thân thiện với người dùng ● Học cách dùng jQuery, bootstrap: jQuery bootstrap hai thư viện phổ biến mà đa số trang web sử dụng Trong trình thực tập, thực tập sinh anh/ chị trước giới thiệu khái niệm bản, module thường sử dụng jQuery Ví dụ module ajax (xử lí ajax, dùng để gọi api nhận hay truyền liệu cho bên back-end), module atribute (xử lí thuộc tính đối tượng html), module event (xử lí kiện người dùng) Đối với bootstrap, lập trình viên sử dụng để khiến giao diện trang web hiển thị tốt thiết bị android, ios, laptop với nhiều kích cỡ khác ● 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 JSON viết tắt javascript object notation, kiểu định dạng liệu tuân theo BÙI GIA HÒA quy luật định mà hầu hết ngơn ngữ lập trình đọc 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, html, css ● Có kiến thức quan trọng cho việc lập trình web 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 c)Lập trình web với angularJS: Nội dung: Các kiến thức angularJS để làm trang web ● Khái niệm angularJS Năm khái niệm angularJS, framework cho ứng dụng web, phát triển từ năm 2009 Google cập nhật 2.0 Ngồi ra, trainer cịn cung cấp cho thực tập sinh khái niệm cách tạo component sử dụng angular CLI, cách gọi function controller khác ● Cách gọi hàm controller khác sử dụng $broadcast, $emit, $on: Đôi ứng dụng angularJS cần giao tiếp controller khác Chẳng hạn gửi thông báo để truyền liệu controller Một cách giao tiếp sử dụng $broacast, $emit, $on $broacast $emit giúp lập trình viên gửi kiện Sự khác biệt hai hàm là: broadcast dùng để gửi kiện từ cha sang con, emit dùng để gửi kiện từ sang cha Còn $on dùng để nhận kiện biến truyền vào ● Jquery: Học cách dùng jQuery, bootstrap: jQuery thư viện phổ biến mà đa số trang web sử dụng Trong trình thực tập, thực tập sinh anh/ chị trước giới thiệu khái niệm bản, module thường sử dụng jQuery Ví dụ module ajax (xử lí ajax, dùng để gọi api nhận hay truyền BÙI GIA HÒA liệu cho bên back-end), module atribute (xử lí thuộc tính đối tượng html), module event (xử lí kiện người dùng) ● Bootstrap: Học cách dùng bootstrap: bootstrap thư viện Twitter tạo nhằm giúp lập trình viên thiết kế trang web dễ dàng Trong trình thực tập, thực tập sinh anh/ chị trước giới thiệu khái niệm bản, lập trình viên sử dụng bootstrap để khiến giao diện trang web hiển thị tốt thiết bị android, ios, laptop với nhiều kích cỡ khác ● Google chart Là biểu đồ hiển thị giúp cho người dùng có cách nhìn trực quan số liệu tài khoản Google chart hỗ trợ nhiều loại biểu đồ khác Tuy nhiên trình thực tập, thực tập sinh giới thiệu chủ yếu biểu đồ dạng cột Cách khởi tạo biến googleVisualisation, truyền liệu vào nào, cách dán nhãn cột Ngoài ra, thực tập số lỗi thường gặp text overlap, trang html phải hiển thị trước chạy code javascript nhằm vẽ biểu đồ không bị méo ● Thư viện lodash Lodash phiên mở rộng underscore, với nhiều chức cho hiệu cao Các chức lodash chia làm nhóm: nhóm xử lí array, nhóm xử lí object, nhóm xử lí date, nhóm xử lí Date,… Thực : ● Tham gia đầy đủ buổi trainning ● Làm tập thực hành bắt kiện người dùng trang html, ng-click, ng-mouseenter, ng-mousehover ● 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 sử dụng framework angularJS d)Cách build deploy dự án lên server: Nội dung : Các kỹ thuật tạo trang web ● Định nghĩa web reponsive: Là phong cách thiết kế website cho phù hợp với tất thiết bị, độ phân giải hình ● Giới thiệu jenkins: BÙI GIA HÒA Jenkins opensource dùng để thực chức tích hợp liên tục xây dựng tác vụ tự động hóa Nhóm dự án sử dụng jenkins để build code lên server lưu lại log nhằm fix lỗi ● Tạo chức build lên trang web demo cho tester review: Sau viết xong tính năng, dev build code lên server để QC test chức sau deploy lên server thức Thực : ● Tham gia đầy đủ buổi training ● Thêm chức cho trang có sẵn, deploy lên server fix bug Kết quả: ● Đã tạo trang web sử dụng angularJS 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, framework angularJS, jQuery bootstrap 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 số chức fix lỗi dự án thực tế Những tháng tiếp theo, thực tập sinh có hội làm dự án thực tế Học cách làm theo sprint agile, fix bug chức Chi tiết đồ án nói phần sau 4.Lịch làm việc: Mức độ Nhận xét Người Tháng Cơng việc hồn người hướng hướng dẫn thành dẫn -Tìm hiểu cơng ty, cách Anh Lê Tuấn tổ chức công ty Anh -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, ngơn ngữ đánh dấu văn HTML, CSS -Thực hành javascript -Làm chức sử dụng javascript -Tìm hiểu bootstrap, Anh Lê BÙI GIA HÒA 4,5,6 jquery -Làm chức sử dụng bootstrap, jquery -Tìm hiểu web -Cách vận hành trang web -Cách gọi API, lấy liệu trả -Ứng dụng kiến thức thân vào dự án thực tế logic, Nguyễn Nhật Trung Anh Đào Duy Tùng Anh Lê Tuấn Anh BÙI GIA HÒA CHƯƠNG 3: CHI TIẾT VỀ PROJECT 1.Giới thiệu trang web tend: -Tend phần mềm quản lí nơng trại giúp cho nơng dân dễ dàng quản lí trồng họ theo mùa vụ 2.Các tính trang web: -Quản lí trồng: Tend tích hợp việc trồng với quản lí tác vụ để giảm thiểu số liệu giúp dễ dàng để phân tác vụ theo tuần, nhờ người nơng dân vận hành trang trại họ trơn tru BÙI GIA HÒA -Quản lí tác vụ: giúp cho người nơng dân hệ thống hóa tất cơng việc mà thân họ cần làm BÙI GIA HÒA -Mua sắm trực tuyến: nơng dân bán sản phẩm họ trực tiếp cho khách hàng: BÙI GIA HỊA -Pick & Pack: giúp người nơng dân kết nối hoạt đông mua bán với mùa vụ họ BÙI GIA HÒA -Reports: cung cấp biểu đồ trực quan nhằm giúp nông dân đưa định tốt BÙI GIA HÒA BÙI GIA HÒA 2 TÀI LIỆU KHAM KHẢO -Tài liệu ngôn ngữ javascript, html, css: https://www.youtube.com/watch? v=uDwSnnhl1Ng&list=PLsyeobzWxl7qtP8Lo9TReqUMkiOp446cV https://www.youtube.com/watch? v=qoSksQ4s_hg&list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET https://www.youtube.com/watch?v=dD2EISBDjWM&list=PLr6GrHUlVf_ZNmuQSXdS197Oyr1L9sPB https://www.youtube.com/watch? v=TThZIt4r3eg&list=PL0b6OzIxLPbzDsI5YXUa01QzxOWyqmrWw -Tài liệu framework AngularJS: https://www.youtube.com/watch? v=s3qZF4jhgDo&list=PLYxzS 5yYQmX2bItSRCqwiQZn5dIL1gt https://www.youtube.com/watch?v=XO2m53_H06I&list=PLw5h0DiJ-9PCNAMrVQ8-I6Sbooiw8wTw -Tài liệu thư viện bootstrap, jquery https://www.youtube.com/watch? v=QAgrHLtG1Yk&list=PL4cUxeGkcC9jE_cGvLLC60C_PeF_24pvv https://www.youtube.com/watch? v=a59kOE2Ma1Q&list=PL6n9fhu94yhVDV697uvHpavA3K_eWGQap -Tài liệu icon sử dụng cho trang web: https://fontawesome.com/ -Tài liệu vẽ biểu đồ trang web: https://developers.google.com/chart BÙI GIA HÒA TỔNG KẾT Sau đợt thực tập công ty Spiraledge, em kịp hoàn thành số chức trang web https://app.tend.com/ chạy tảng pc, android ios Trang web cải thiện nhiều tính online store (giúp khách hàng mua trực tuyến sản phẩm thô nông dân), pricing (cập nhật lại gói sử dụng dịch vụ với nhiều mức giá ưu đãi hơn), cải thiện giao diện trang web Chân thành cảm ơn giúp đỡ anh chị nhóm Tend, để hồn thành chức cập nhật trình em thực tập BÙI GIA HÒA ... ? ?Lập trình front- end web? ?? 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, ... Đợt thực tập với chủ đề ? ?Lập trình web front- end server-render-side” nhằm mục đích giúp sinh viên ứng dụng kiến thức vào thực tiễn, đồng thời rèn luyện kĩ mềm kĩ tư duy, làm việc nhóm, thuyết trình, ... trình viên thiết kế trang web dễ dàng Trong trình thực tập, thực tập sinh anh/ chị trước giới thiệu khái niệm bản, lập trình viên sử dụng bootstrap để khiến giao diện trang web hiển thị tốt thiết