Báo cáo thực tập lập trình FRONTEND cho hệ thống ERP với công nghệ SENCHA EXT JS

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 FRONTEND CHO HỆ THỐNG ERP VỚI CƠNG NGHỆ SENCHA EXT JS Cơng ty thực tập : Công ty TNHH Tin học Viễn thông Tavico Người phụ trách : Anh Nguyễn Nam Thạch - Technical Leader Thực tập sinh : Nguyễn Huỳnh Thanh Tâm TP Hồ Chí Minh, tháng năm 2020 Người phụ trách: anh Nguyễn Nam Thạch Nguyễn Huỳnh Thanh Tâm LỜI MỞ ĐẦU Ngày nay, ngành công nghệ thông tin ngày trở nên lớn mạnh Công nghệ phần thiếu máy hoạt động doanh nghiệp tập đồn lờn Vì với khả quản lý đa chức năng, tích hợp thơng tin từ tất phòng ban vào hệ thống nhất,m hệ thống ERP (Enterprise resource planning) trở thành cách tay đắc lực cho doanh nghiệp hay tổ chức kinh doanh Cùng với xu phát triển giới, Việt Nam ngoại lệ Trước đây, thông thưởng doanh nghiệp Việt Nam, phòng ban người ta dùng loại phần mềm khác Khi dùng phần mềm riêng lẻ cách truyền thống, việc kết nối liệu với khó, khối lượng liệu lớn phần mềm phịng ban khơng tương thích với nhau, nên phối hợp nhiều phận cơng ty trở nên khó khăn, tốn kém, thời gian Chính mà hàng loạt tổ chức, doanh nghiệp, tập đoàn sử dụng ERP công cụ quản lý công việc, lưu trữ thông tin, quản lý việc kinh doanh, không dùng cho nội cịn kết nối liệu nhiều cơng ty khác tập đồn Do đó, nhu cầu nhân lực để tạo hệ thống vơ lớn Vì lý này, em định lựa chọn lập trình ứng dụng web, cụ thể xây dựng hệ thống ERP cho giai đoạn thực tập Sau ba năm học tập trường, với mong muốn có thêm kinh nghiệm làm việc dự án thực tế, muốn tham gia xây dựng trang web đa môi trường chuyên nghiệp, em có dự định thực tập hè Vì vậy, em định chọn Tavico - môi trường lý tưởng, đại, chuyên nghiệp - nơi giúp em thực dự định Người phụ trách: anh Nguyễn Nam Thạch Nguyễn Huỳnh Thanh Tâm LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty TNHH Tin học Viễn Thông Tavico Chỉ thời gian ngắn, nhờ dẫn nhiệt tình thành viên cơng ty nói chung thành viên team lập trình nói riêng, em tiếp thu kiến thức cần thiết bổ ích để đóng góp vào việc xây dựng phát triển sản phẩm công ty Đặc biệt, em muốn gửi lời cảm ơn anh Nguyễn Nam Thạch ngày đầu vào làm việc, anh nhiệt tình hướng dẫn, giúp đỡ em nhiều mặt kĩ thuật cách để code đẹp dễ thay đổi, tìm lỗi cơng cụ Goole Dev Tools, cách sử dụng framework tại; cảm ơn anh Phạm Hữu Vinh tận tình dẫn nghiệp vụ cơng ty giải thích cho em tài liệu thiết kế, cuối em cảm ơn anh chị khác liên tục tạo điều kiện tốt để em hồn thành tốt nhiệm vụ công việc giao, tham gia nhiều dự án lớn rút nhiều học kinh nghiệm cho thân Em xin trân trọng 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 hoàn thành báo cáo Nguyễn Huỳnh Thanh Tâm TpHCM, ngày 28 tháng năm 2020 Người phụ trách: anh Nguyễn Nam Thạch Nguyễn Huỳnh Thanh Tâm NHẬN XÉT CỦA KHOA Người phụ trách: anh Nguyễn Nam Thạch Nguyễn Huỳnh Thanh Tâm MỤC LỤC Chương 1: Giới thiệu công ty thực tập Sơ lược công ty Sản phẩm công ty Chương 2: Nội dung thực tập Tìm hiểu cơng ty Framework công cụ hỗ trợ Tìm hiểu ngôn ngữ Javascript Tìm hiểu backend hệ quản trị sở liệu Chương 3: Chi tiết project 12 Ứng dụng web Calllog Center 12 Ứng dụng web E-Invoice 12 Ứng dụng web Construction Project Management 13 TÀI LIỆU THAM KHẢO 18 Người phụ trách: anh Nguyễn Nam Thạch Nguyễn Huỳnh Thanh Tâm Chương 1: Giới thiệu công ty thực tập Sơ lược cơng ty Website thức: http://tavicosoft.com Tavico khởi đầu công ty startup, thành lập vào năm 2004, công ty phần mềm chuyên cung cấp giải pháp tài chính, kế tốn, bất động sản,… cho doanh nghiệp tập đoàn lớn Công ty khởi đầu với thành viên, thực dự án lớn giải pháp quản lý tài cho tập đồn dầu khí vào năm 2008 Tiếp nối thành cơng đó, sản phẩm cơng ty biết đến rộng rãi Cột mốc Tavico đánh dấu mà cơng ty có hội làm việc với khách hàng lớn tập đoàn Đất Xanh Group, phát triển hệ thống quản lý bất động sản cho họ Đặc biệt, vào đầu năm 2013, Tavico vinh dự trở thành đại diện INFOR – tập đoàn đa quốc gia kế toàn tài Việt Nam Từ năm 2014, cơng ty bắt đầu xây dựng thương hiệu cho việc phát triển nâng cấp sản phẩm độc quyền liên quan nhiều lĩnh vực tuyển dụng, quản lý bất động sản, hóa đơn điện tử, kế tốn, quản lý đặt chỗ,… Từ đến năm 2018, Tavico mở rộng, phát triển mạng lưới quan hệ lên tới 100 đối tác Không thế, công ty không ngừng áp dụng công nghệ mới, nâng cấp sản phẩm, đổi nhân lực, tuyển thêm nhân lực trẻ có kì vọng, đồng thời mở rộng mơi trường làm việc đại tiện nghi Sản phẩm cơng ty Dưới vài sản phẩm công ty: - TVC workspace: Quản lý điểm làm việc, cụ thể quản lý dịch vụ thiết bị, đặt chỗ phê duyệt , quản lý thời gian làm việc, lên lịch chi tiết cho công việc, quản lý báo cáo Người phụ trách: anh Nguyễn Nam Thạch Nguyễn Huỳnh Thanh Tâm - Real Estate Management: Quản lý hoạt động kinh doanh, xây dựng bất động sản, cụ thể quản lý thông tin tịa nhà, hợp đồng kí lịch sử giao dịch, lập in báo cáo chi tiết, báo cáo chức năng, chi tiết hóa đơn,… Phần mềm tích hợp vào hệ thống quản lý tài - Customer Care Application (Android and IOS): công cụ giao tiếp khách hàng mua bất động sản chủ đầu tư Ứng dụng cung cấp thông tin chi tiết liên quan đến giao dịch khách hàng đó, ngồi cịn nơi để họ theo dõi hóa đơn điện, nước, internet, truyền hình cáp, hồ bơi, phịng tập gym,… Người phụ trách: anh Nguyễn Nam Thạch Nguyễn Huỳnh Thanh Tâm Chương 2: Nội dung thực tập Tìm hiểu công ty Thời gian: ngày Nội dung: Giới thiệu cơng ty (q trình thành lập phát triển), cách tổ chức từ cao đến thấp, giới thiệu team cách làm việc team, quy trình làm việc chung cơng ty Ngồi ra, thực tập sinh phổ biến quy định giấc làm, cách sử dụng email công việc… Kết quả: Hiểu thêm công ty, làm quen với đồng nghiệp Đồng thời nắm bắt kiến thức cần trau dồi thêm, hiểu rõ công việc, nhiệm vụ, trách nhiệm thân Framework công cụ hỗ trợ Thời gian: ngày 2.1 Tìm hiểu Sencha Architect Nội dung: Cài đặt mơi trường để lập trình chạy thử máy Được training cách sử dụng Sencha Architect, sau thiết kế module theo thiết kế có sẵn từ dự án trước - MVC: mơ hình bao gồm lớp Model, View Controller View sử dụng để hiển thị liệu lưu Model, hành động xử lý Controller Bằng cách này, lớp định rõ nhiệm vụ mình, giúp phần mềm dễ kiểm tra bảo trì - MVVM: mơ hình gần tương tự với MVC điểm khác biệt nằm lớp ViewModel, xem trừu tượng lớp View MVC ViewModel có khả thay đổi liệu Model hiển thị View kĩ thuật data-binding Việc giúp giảm thiểu loại bỏ logic trực tiếp thao tác với lớp View MVVM sử dụng dự án lớn, phức tạp cần viết unit test - UI components: Sencha Architect cung cấp component có sẵn form, tree, grid,… Ngồi người dùng tự customize component css 2.2 Cài đặt công cụ Total Commander, SVN Nội dung: Cài đặt học cách sử dụng Total Commander, cài đặt môi trường svn, học cách quản lý code svn phân chia công việc với thành viên lại team Thực hiện: Tiến hành cài đặt mơi trường lập trình thực hành sử dụng Sencha Architect Kết quả: Làm quen với framework mới, tự thiết kế form module theo tài liệu thiết kế có sẵn Tìm hiểu ngơn ngữ Javascript Thời gian: ngày Nội dung: Tìm hiểu kiến thức tảng ngôn ngữ Javascript Người phụ trách: anh Nguyễn Nam Thạch Nguyễn Huỳnh Thanh Tâm - Kiến thức bản: câu lệnh điều kiện, vịng lặp, tốn tử so sánh, cách gọi api lấy liệu trả - Callback: function gọi để thực thi sau function khác thực thi xong Callback áp dụng để thực xử lý liệu có sau gọi api để lấy từ backend - Hoisting: khai báo biến đẩy lên phần phạm vi mà biến sử dụng Những hàm khai báo sau trùng tên ghi đè lên hàm khai báo trước Kĩ thuật giúp ta tránh khai báo lại biến tên nơi khác, làm thay đổi giá trị biến cách không mong muốn - Closure: Khi hàm ghi nhớ truy cập lexical scope kể gọi ngồi lexical scope gọi Closure Tìm hiểu backend hệ quản trị sở liệu Thời gian: ngày Nội dung: Tìm hiểu kiến thức C# NET cách truy vấn vào database dự án qua Microsoft SQL Server Vì chun mơn thực tập sinh lập trình frontend nên phần backend giới thiệu sơ lược kiến trúc hệ thống, không training - Mơ hình lớp: backend viết theo mơ hình lớp, gồm BUS, DAO DTO Mỗi bắt đầu dự án mới, hệ thống tự generate model đoạn code có chức thêm, xóa, sửa tầng BUS vào DAO Nhiệm vụ thực tập sinh viết thêm sửa đổi backend tùy theo yêu cầu khách hàng từ dự án - MSSQL: training cách viết truy vấn từ đơn giản đến phức tạp, sử dụng JOIN IN, LEFT JOIN RIGHT JOIN Thực project Sau tuần học việc tháng thử việc, thực tập sinh training thực hành, nắm kiến thức Javascript, cách sử dụng framework Sencha Architect, hiểu rõ luồng chạy trang web, nắm khái niệm hệ thống ERP gì, cách viết api cách gọi api từ frontend để lấy liệu cần thiết Từ tháng thứ trở đi, thực tập sinh giao vài module nhỏ cho dự án E-invoice (hóa đơn điện tử), hướng dẫn làm việc chung với thành viên team Sau kết thúc dự án đó, trainer cảm thấy thực tập sinh đạt yêu cầu mong muốn nên định hướng dẫn cách viết api backend giao số form quan trọng dự án Chi tiết dự án mà thực tập sinh tham gia trình bày chương Lịch làm việc Tuần Cơng việc - Tìm hiểu cơng ty, Người phụ trách: anh Nguyễn Nam Thạch Người hướng dẫn Anh Phạm Mức độ hoàn thành Nhận xét người hướng dẫn Nguyễn Huỳnh Thanh Tâm cách tổ chức công ty - Làm quen với đồng nghiệp - Học cách trao đổi, làm việc qua email - Tìm hiểu ngơn ngữ lập trình Javascript nâng cao - Tìm hiểu framework Ext Js IDE Sencha Architect - Thực hành sử dụng Sencha Architect - Tìm hiểu C# NET - Tìm hiểu mơ hình lớp - Ơn lại câu lệnh truy vấn sql Giai đoạn thử việc - Thiết kế đổ liệu cho form Calllog Center - dạng ghi cho gọi khách hàng gọi đến - Thiết kế frontend cho form đơn giản dự án E-invoice Giai đoạn làm việc thức: - Thực hành viết api backend cho form giao (trước anh Thạch đảm nhiệm việc này) - Tham gia buổi họp chi tiết thiết kế dự án phần mềm quản lý bất động sản - Thiết kế form giao dự án quản lý bất động sản cho tập đoàn Người phụ trách: anh Nguyễn Nam Thạch Hữu Vinh Anh Phạm Hữu Vinh Anh Nguyễn Nam Thạch Anh Nguyễn Nam Thạch Anh Nguyễn Nam Thạch Nguyễn Huỳnh Thanh Tâm Đất Xanh Giai đoạn làm việc thức (tiếp theo): - Giai đoạn fix bug, bảo trì cho dự án E-invoice - Viết lại chức lập hóa đơn theo yêu cầu khách hàng Giai đoạn làm việc thức (tiếp theo): - Viết chức so sánh chi phí hao tổn kế tốn, tài lập kế hoạch cho phần mềm quản lý dự án xây dựng - Thêm chức ghi lại lịch sử thao tác cho tất form giao Giai đoạn nghiệm thu, báo cáo, kết thúc dự án: - Fix bug toàn dự án với team - Chỉnh sửa giao diện theo yêu cầu tester - Báo cáo cuối đợt thực tập Người phụ trách: anh Nguyễn Nam Thạch Anh Nguyễn Nam Thạch Anh Nguyễn Nam Thạch Anh Nguyễn Nam Thạch Nguyễn Huỳnh Thanh Tâm Chương 3: Chi tiết project Ứng dụng web Calllog Center - Mô tả: Ứng dụng ghi lại thông tin gọi - Thời gian thực hiện: tháng - Công việc: + Ghi lại thông tin gọi từ khách hàng (người gọi, thời gian gọi, file ghi âm,…) + Thiết kế giao diện để người dùng bình luận, ghi note thông tin gọi - Kiến thức học được: + Vì Sencha Architect khơng hỗ trợ UI components với mong muốn khách hàng nên thực tập sinh phải tự viết html, css để thiết kế giao diện cho người dùng bình luận, xóa chỉnh sửa bình luận + Học cách sử dụng mơ hình MVC Ứng dụng web E-Invoice Người phụ trách: anh Nguyễn Nam Thạch Nguyễn Huỳnh Thanh Tâm - Mô Tả: Ứng dụng web phát hành hóa đơn điện tử - Thời gian thực hiện: tháng - Công việc: + Thiết kế form quản lý thông tin người dùng, thơng tin đơn vị phát hành hóa đơn, quản lý mẫu hóa đơn/mẫu in, lịch sử đăng ký hóa đơn, quản lý thông tin khách hàng, tải nhập, tải xuất thông tin khách hàng - Kiến thức học được: + Học cách sử dụng mơ hình MVVM, cách gọi api xử lý liệu Các hàm xử lý khơng cịn viết Controller MVC mà thực hết ViewController Ứng dụng web Construction Project Management Người phụ trách: anh Nguyễn Nam Thạch Nguyễn Huỳnh Thanh Tâm - Mô Tả: Ứng dụng web quản lý dự án xây dựng bất động sản Ứng dụng bao gồm chức như: + Lưu trữ thông tin dự án xây dựng (thành viên, tài liệu, tiêu kiến trúc, phân loại hộ) + Lập cập nhật tiến độ dự án: theo dõi tiến độ hạng mục công việc tổng tiến độ dự án biểu đồ Gantt, theo dõi nhân viên phụ trách, theo dõi lịch sử tiến độ dự án, ghi lai thao tác tiến độ + Lập kế hoạch tài chính: tính tổng sơ chi phí, lập khái tốn, lưu trữ thơng tin ngân sách + Lập khái toán, dự toán, hợp đồng + Đề nghị tốn chi phí ngồi hợp đồng + Đánh giá hoàn thành dành cho nhà cung cấp khách hàng: theo dõi đánh giá tiến độ hồn thành cơng trình xây dựng theo % - Thời gian thực hiện: tháng (do ảnh hưởng dịch Covid nên thời gian hoàn thành dự án dài dự kiến) - Công việc: + Thiết kế đổ liệu cho form “Gói thầu”, giúp người dùng lập dự tốn, dự tính chi phí vật tư, nhân công, tải nhập liệu, lưu trữ thông tin nhà thầu, kiện, ghi Người phụ trách: anh Nguyễn Nam Thạch Nguyễn Huỳnh Thanh Tâm + Viết chức (ở backend) so sánh tổng chi phí gói thầu so với tổng ngân sách với giá trị hợp đồng hiển thị thông báo + Thiết kế đổ liệu lên form “Đánh giá hoàn thành”, giúp nhà cung cấp khách hàng theo dõi, đánh giá tiến độ hoàn thành dự án xây dựng Đồng thời, thực tập sinh điều chỉnh tay chức “checkbox” “group by” cho dòng liệu lưới liệu theo yêu cầu khách hàng html css Người phụ trách: anh Nguyễn Nam Thạch Nguyễn Huỳnh Thanh Tâm + Thiết kế đổ liệu dạng cho form “Hạng mục công việc” “Danh mục mã phí”, thể liệu dạng cha + Thiết kế xử lý thêm, xóa, sửa cho form quản lý thơng tin nhân viên, người dùng, danh mục vật tư,… + Thiết kế đổ liệu cho form “Vị trí - khu vực” dạng cây, thực thêm, xóa cho node cha, node trực tiếp menu click phải chuột, không cần phải thông qua nút bấm Người phụ trách: anh Nguyễn Nam Thạch Nguyễn Huỳnh Thanh Tâm - Kiến thức học được: + Nắm vài thuật ngữ quy trình ngành xây dựng: quy trình lập dự tốn, u cầu mời thầu, quy trình lập khái tốn,… + Có thể sử dụng thành thạo hầu hết chức có sẵn Sencha Architect + Học cách giải vấn đề, đưa giải pháp giao diện logic code phù hợp với yêu cầu khách hàng Người phụ trách: anh Nguyễn Nam Thạch Nguyễn Huỳnh Thanh Tâm TÀI LIỆU THAM KHẢO Sencha Architect https://docs.sencha.com/architect Ext JS https://docs.sencha.com/extjs/7.2.0/ Grid filter bar https://fiddle.sencha.com/#view/editor&fiddle/1v2n Người phụ trách: anh Nguyễn Nam Thạch Nguyễn Huỳnh Thanh Tâm TỔNG KẾT Như vậy, vịng năm làm việc cơng ty, em có hội tham gia nhiều dự án lớn quan trọng Đặc biệt, ứng dụng web quản lý dự án bất động sản, em tham gia từ ngày khởi đầu dự án, tham gia họp đề xuất ý kiến Mặc dù thời gian đầu làm việc, em mắc nhiều lỗi sai thói quen xấu cách viết code trường học, cịn thiếu kinh nghiệm khơng quen xử lý với dự án lớn thực tế với lượng người dùng khổng lồ, em dần cải thiện điểm yếu phát triển chun mơn Sau dự án, em lai có sử dụng tính framework mà dùng, giúp em hiểu rõ thành thạo Chân thành cảm ơn giúp đỡ anh chị nhóm trainer tổng giám đốc Tavico, với nỗ lực toàn nhân lực, giúp cho dự án lớn thành công mong đợi Người phụ trách: anh Nguyễn Nam Thạch Nguyễn Huỳnh Thanh Tâm ... này, em định lựa chọn lập trình ứng dụng web, cụ thể xây dựng hệ thống ERP cho giai đoạn thực tập Sau ba năm học tập trường, với mong muốn có thêm kinh nghiệm làm việc dự án thực tế, muốn tham gia... ngành công nghệ thông tin ngày trở nên lớn mạnh Công nghệ phần thiếu máy hoạt động doanh nghiệp tập đồn lờn Vì với khả quản lý đa chức năng, tích hợp thơng tin từ tất phòng ban vào hệ thống nhất,m... nghiệp, tập đoàn sử dụng ERP công cụ quản lý công việc, lưu trữ thông tin, quản lý việc kinh doanh, không dùng cho nội cịn kết nối liệu nhiều cơng ty khác tập đồn Do đó, nhu cầu nhân lực để tạo hệ thống