ĐỒ án xây DỰNG ỨNG DỤNG kế TOÁN

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MÌNH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM - ĐỒ ÁN ĐỀ TÀI: “XÂY DỰNG ỨNG DỤNG KẾ TOÁN TRUNG GIAN” Giảng viên hướng dẫn: Nguyễn Công Hoan Sinh viên thực hiện: Võ Phi Nhật Duy 17520407 Trương Viết Huy Phong 17520879 TP Hồ Chí Minh, ngày 22 tháng 01 năm 2021 MỤC LỤC Giới thiệu 1.1 Đặt vấn đề 1.2 Mục đích đề tài Công nghệ sử dụng 2.1 JavaScript 2.2 NodeJS – Framework ExpressJS 2.3 Mongo DB 2.4 ReactJS – Framework 2.5 ReduxJS 2.6 Redux-saga 12 Phân tích 15 3.1 Objective 15 3.2 Objective Model 16 3.3 People Model 18 3.4 System Model 20 3.5 Data Model 21 Thiết kế 22 4.1 Thiết kế liệu 22 4.2 Thiết kế kiến trúc hệ thống 24 4.3 Thiết kế giao diện 25 Triển khai ứng dụng 33 Tài liệu tham khảo 34 1 Giới thiệu 1.1 Đặt vấn đề - Sản phẩm nhóm đồ án cung cấp phẩn mềm cho công ty kế toán trung gian nhỏ, nhân viên kế tốn tự Thơng qua sản phẩm nhóm, cơng ty nhỏ, nhân viên kế tốn tự quản lý hóa đơn dễ dàng, tạo báo cáo tài theo quy định Tài Chính Sau quan sát nhóm thấy yếu tố quan trọng ảnh hưởng đến hài lòng khách hàng việc chưa có phần mềm tập trung vào phục vụ đối tượng khách hàng Hiện nay, cơng ty kế tốn trung gian nhỏ nhân viên kế toán tự phải sử dụng phần mềm lớn yêu cầu chi phí cao sử dụng phần mềm lậu Việc dẫn đến tốn chi phi không hỗ trợ từ phần mềm lâu dài Do làm việc sử dụng sản phẩm chúng tơi cơng ty kế tốn trung gian nhỏ nhân viên kế toán tự dễ dàng việc lưu trữ quản lý hóa đơn cách thuận tiện xác tạo báo cáo tài - Nhóm muốn đưa đến giải pháp làm việc online giá thành rẻ hơn, tập trung vào trải nghiệm khách hàng nhiều Đảm bảo việc update theo thời gian với thay đổi từ thơng tư phủ Hỗ trợ tốt việc lưu liệu tránh mát người dùng 1.2 Mục đích đề tài - Với bước khởi đầu mơn Đồ án 2, nhóm thực đề tài mong muốn nghiên cứu tìm cơng nghệ có thể áp dụng vào đề tài - Từ công nghệ tìm hiểu, nhóm chọn cơng nghệ phù hợp, mở rộng nâng cấp thêm để ứng dụng hoàn thiện theo hướng mong muốn nhóm 2 Cơng nghệ sử dụng 2.1 JavaScript Giới thiệu: - JavaScript theo phiên ngôn ngữ thông dịch phát triển Brendan Eich hãng truyền thông Netscape JavaScript xuất lần đầu tháng năm 1995 với tên gọi ban đầu Mocha, sau đổi tên thành LiveScript cuối JavasScript - Phiên JavaScript ECMAScript ECMAScript phiên chuẩn hóa JavaScript, quy chuẩn để sử dụng JavaScript tốt cho lập trình viên Phiên ECMAScript quy chuẩn sử dụng rộng rãi lập trình viên sử dụng JavaScript dành cho phát triển sản phẩm framework Lí sử dụng đồ án: - JavaScript ngôn ngữ phổ biến việc phát triển ứng dụng web, ứng dụng di động, làm việc với server, thông qua việc sử dụng thư viện, framework mã nguồn mở - Vì JavaScript sử dụng việc phát triển ứng dụng phía khách hàng sử dụng để làm việc với server nên nhóm đồ án sử dụng chung ngơn để phát triển dự án hỗ trợ tốt - JavaScript dùng để phát triển nhiều thư viện, framework mã nguồn mở, cộng đồng sử dụng JavaScript lớn nhóm thực đồ án dễ dàng việc phát triển đồ án 2.2 NodeJS – Framework ExpressJS Giới thiệu: - NodeJS JavaScript runtime xây dựng dựa Chrome’s V8 JavaScript engine V8 Engine JavaScript engine mã nguồn mở chạy trình duyệt Chrome, Opera Vivaldi Nó thiết kế để tập trung vào hiệu chịu trách nhiệm cho việc dịch mã JavaScript sang mã máy để máy tính hiểu chạy - 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 tổng thể, quan trọng bên NodeJS hầu hết viết C++ nên tốc độ xử lý hiệu cao - NodeJS sử dụng để phát triển ứng dụng cần tốc độ xử lý nhanh theo thời gian thực, sản phẩm cần mở rộng nhanh, đổi công nghệ, … - ExpressJS framework xây dựng tảng NodeJS Nó cung cấp tính mạnh mẽ để phát triển web mobile ExpressJS hỗ trợ method HTTP midleware tạo API vô mạnh mẽ dễ sử dụng - Một số chức ExpressJS:  Thiết lập lớp trung gian để trả HTTP request  Define router cho phép sử dụng với hành động khác dựa phương thức HTTP URL  Cho phép trả trang HTML dựa vào tham số Lí sử dụng đồ án: - NodeJS tảng phổ biến với lập trình viên sử dụng JavaScript, có cộng đồng vơ lớn, với nhiều thư viện, module mã nguồn mở giúp xử lý toán cách đơn giản dễ dàng - ExpressJS framework phổ biến NodeJS để thực xử lý với server ExpressJS cho phép xây dựng API dựa phương thức HTTP cách nhanh chóng đơn giản 2.3 Mongo DB Giới thiệu: - MongoDB hệ quản trị sở liệu mã nguồn mở, CSDL thuộc NoSql hàng triệu người sử dụng - NoSQL dạng CSDL mã nguồn mở viết tắt bởi: NoneRelational SQL hay có nơi thường gọi Not-Only SQL - MongoDB database hướng tài liệu (document), liệu lưu trữ document kiểu JSON thay dạng bảng CSDL quan hệ nên truy vấn nhanh - So với RDBMS MongoDB collection ứng với table, cịn document ứng với row, MongoDB dùng document thay cho row RDBMS - Các collection MongoDB cấu trúc linh hoạt, cho phép liệu lưu trữ không cần tuân theo cấu trúc định - Thông tin liên quan lưu trữ để truy cập truy vấn nhanh thông qua ngôn ngữ truy vấn MongoDB 2.4 ReactJS – Framework Giới thiệu: - ReactJS thư viện Javacript hỗ trợ lập trình viên xây dựng giao diện cho ứng dụng web (SPA) phát triển Facebook - Mục tiêu cốt lỗi thư viện nhằm cung cấp hiệu suất làm việc cao nhất, thông qua việc tập trung component riêng lẻ lại với - ReactJS tiện lợi việc chia nhỏ tái sử dụng component cách hiểu giúp không bị lặp lại code nhiều giúp việc code thuận tiện Lí sử dụng đồ án: - ReactJS cho phép lập trình viên viết ứng dụng trực tiếp Javasript Thêm vào JSX – tính khơng làm cho ReactJS dễ dàng mà thú vị Nếu AngularJS Framework cho phép nhúng code Javasscript code html thơng qua attribute ngmodel, ng-repeat với react library cho phép nhúng code html code Savascript nhờ vào JSX, dễ dàng lồng đoạn HTML vào JS.Tích hợp Savascript HTML vào JSX làm cho component dễ hiểu tường minh - Dễ tiếp cận người kiến thức lập trình Javascript - Do react cung cấp cấu trúc dựa component, tức component mảnh logo ghép lại thành trang web Mỗi component tự định render logic riêng bên - Có thể tái sử dụng lại component nơi - Bộ cơng cụ phát triển cho lập trình yếu tố quan trọng chọn tền phát triển Vì React có cơng cụ tuyệt vời mà em sử dụng: React Developer Tools Redux Developer Tools Cả hai cài đặt dạng tiện ích mở rộng Chorme - React Developer Tools: dùng để kiểm tra thành phần phản ứng hệ thống phân cấp element quan sát thay đổi state - Redux Developer Tools: dùng để quan sát hành động (actions) gửi state store theo dõi thay đổi phản ánh view 2.5 ReduxJS Giới thiệu: - Khi mà ứng dụng ngày trở nên phức tạp (SPA) phải quản lý nhiều state với so trước Những state bao gồm liệu trả từ server liệu cache liệu nội không đảm bảo toàn vẹn so với server Để quản lý state mà ln ln thay đổi điều khó Ví dụ model cập nhật model khác, view update model nói trên, đồng nghĩa update ln model lại… Và thể dẫn đến việc state thay đổi đâu Thế nên phải sử dụng thử viện để giải việc Reduxjs - Reduxjs thư viện Javascript giúp tạo lớp quản lý trạng thái ứng dụng, xây dựng nên tảng tư tưởng ngôn ngữ kiến trúc Flux Facebook giới thiệu - Do Redux thường đôi kết hợp hồn hảo với React Tuy nhiên hồn tồn sử dụng với framework khác Angular, Angular2, Backbone, Falcor, Deku - Nguyên lý hoạt động Redux xây dựng dựa nguyên lý:  Nguồn dư liệu tin cậy nhất: State toàn ứng dụng chứa objecttree nằm Store (chỉ có store ứng dụng web)  Trạng thái phép đọc: cách để thay đổi State ứng dụng phát Action (là object mơ tả xảy ra)  Thay đổi hàm tuý: Để cách mà State biến đổi Action dùng pure-function gọi Reducer - Về Redux có thành phần sau:  Action: nơi mang thông tin dùng để gửi từ ứng dụng đến store Các thông tin key object mơ tả xảy  Reducer: nơi xác định State thay đổi  Store: nơi quản lý State, cho phép truy cập qua getState(), cập nhật State qua dispatch(action) 11 Lí sử dụng đồ án: - Do React xây dựng theo hướng chi nhỏ thành component dẫn đến việc quản lý nội state chúng mà không cần thư viện cơng cụ Nó hoạt động tốt với ứng dụng có component ứng dụng phát triển ngày phức tạp việc quản lý state chia sẻ component khó khăn - Ví dụ: React để chia sẻ State thông qua component con, state phải live component cha Một method để update state phải cung cấp để component cha truyền Props đên component - Điều kiến cho việc quản lý State trở nên phức tạp bừa bộn Đó lý em sử dụng thư viện 2.6 Redux-saga Giới thiệu: - Redux-Saga thư viện redux middleware, giúp quản lý side effect ứng dụng redux trở nên đơn giản Bằng việc sử dụng tối da tính Generators (function*) ES6, cho phép ta viết hàm bất đồng (async) nhìn giống hàm đồng (synchronos) - Side effect: tất xử lý Reducer sử dụng hàm đồng hàm Nhưng ứng dụng thực tế cần nhiều xử lý bất động với server Như thực lấy liệu từ server ta cần phải đợi kết kết không trả Như lập trình hàm gọi side effect 12 3.4 System Model a) Ecosystem Map 20 3.5 Data Model a) Business Data Diagram b) Data Dictionary Data Type String Currency Description Câu, đoạn văn bao gồm chữ số kí tự đặc biệt Tiền tệ đơn vị VNĐ Date Thời gian Boolean True/False 21 Thiết kế 4.1 Thiết kế liệu 22 23 4.2 Thiết kế kiến trúc hệ thống - Hệ thống gồm server logic phụ trách lưu thông tin vào database, xử lý yêu cầu từ client gọi request để crawl liệu gửi thông tin render liệu cho người dùng - Server phụ trách logic:  Logic: Server nhận liệu từ Client thông qua giao thức HTTP, liệu qua Middleware kiểm tra liệu người dùng gửi có với yêu cầu 24 4.3 Thiết kế giao diện a) Màn hình đăng nhập b) Màn hình chi tiền mặt 25 c) Màn hình danh sách cơng ty d) Màn hình thêm cơng ty 26 e) Màn hình danh sách loại cơng ty f) Màn hình thêm loại cơng ty 27 g) Màn hình phần quyền h) Màn hình thêm vai trị 28 i) Màn hình chọn gói dịch vụ j) Màn hình tùy chọn gói dịch vụ 29 k) Màn hình tốn gói dịch vụ l) Màn hình cài đặt số hệ thống 30 m) Màn hình danh sách loại tiền tệ n) Màn hình thêm loại tiền tệ 31 o) Màn hình danh sách tài khoản kế tốn p) Màn hình thêm tài khoản kế tốn 32 Triển khai ứng dụng - Server: Ubuntu 18.06 - Reverse Proxy: Nginx Nginx máy chủ reverse proxy mã nguồn mở cho giao thức HTTP, HTTPS, SMTP, POP3 IMAP, máy chủ cân tải (load balancer), HTTP cache web - Trình quản lý tiến trình NodeJS: PM2 PM2 trình quản lý process (tiến trình) dành cho ứng dụng Nodejs Nó viết Nodejs Shell PM2 tích hợp cân tải (load balancer) Chúng ta giữ cho process server sống reload/restart với zero downtime - Cơ sở liệu: Mongodb version 4.2.8 - Quản lý source code: GitLab - Đường dẫn ứng dụng: https://pd-mobile-web.tk - Đường dẫn source code Backend: https://gitlab.com/17520897/doan2-server/ - Đường dẫn source code Frontend: https://gitlab.com/17520407/pd-accounting https://gitlab.com/17520407/pd-accounting-client 33 Tài liệu tham khảo - Diễn đàn công nghệ lập trình viên: https://stackoverflow.com/ - Bách khoa tồn thử mở: https://vi.wikipedia.org/wiki/Wikipedia - Trang web thức nginx: https://www.nginx.com/ - Trang web thức tổng hợp thư viện mã nguồn mở lập trình viên: https://www.npmjs.com/ Tài liệu hướng dẫn cài đặt sở liệu - mongodb: https://www.mongodb.com/ - Diễn đàn cơng nghệ lập trình viên Việt Nam: https://viblo.asia/ - Trang web hướng dẫn lập trình web tổ chức W3C – tổ chức World Wide Web: https://www.w3schools.com/ - Trang web chích thức ReactJS – Framework: https://reactjs.org/ - Trang web thức thư viện hỗ quản lý state: https://redux.js.org/ - Trang web thức thư viện hỗ việc giao tiếp với backend: https://redux-saga.js.org/ - Trang web cung cấp tài liệu WebAPI: https://developer.mozilla.org/enUS/docs/Web/API/Window/open - Trang web cung cấp giao diện mẫu miễn phí: https://freefrontend.com/ 34 ... với công ty kế toán trung gian, nhân viên kế toán tự 15 - Tổng hợp liệu hóa đơn, báo cáo tài năm số cơng ty để làm mẫu Persona(s) - Nhân viên kế toán tự do, bán thời gian - Cơng ty kế tốn trung... quy chuẩn sử dụng rộng rãi lập trình viên sử dụng JavaScript dành cho phát triển sản phẩm framework Lí sử dụng đồ án: - JavaScript ngôn ngữ phổ biến việc phát triển ứng dụng web, ứng dụng di động,... sử dụng thư viện, framework mã nguồn mở - Vì JavaScript sử dụng việc phát triển ứng dụng phía khách hàng sử dụng để làm việc với server nên nhóm đồ án sử dụng chung ngôn để phát triển dự án hỗ