HỆ THỐNG QUẢN lí THU NGÂN , CÓ CODE

HỆ THỐNG QUẢN LÍ THU NGÂN SIÊU THỊ BẰNG JAVASCRIPT, REACT NATIVE CÓ CODE

HỆ THỐNG QUẢN LÍ THU NGÂN SIÊU THỊ BẰNG JAVASCRIPT, REACT NATIVE CĨ CODE MỤC LỤC DANH MỤC HÌNH VẼ CHƯƠNG TỔNG QUAN VỀ ĐỀ TÀI Giới thiệu đề tài Xã hội ngày trở nên đại, công việc mua sắm trực tuyến trực tiếp ngày phổ biến, người chi nhiều thời gian cho việc quản lí thu ngân cách thủ cơng khơng có tính tốn xác cao Từ đó, khơng thể thiếu hệ thống quản lí thu ngân siêu thị giúp làm việc Tại việc nên sử dụng hệ thống thu ngân? Thường ngày tốn nhớ cho hoạt động quan trọng, việc sử dụng hệ thống giúp quản lí tốt hơn, hệ thống ghi nhớ hoạt động nhắc nhở chúng ta, hệ thống hoạt động thông qua điện thoại thiết bị điện tử thơng qua ứng dụng, người dùng nhập danh sách đơn hành để quản lí hiệu Mục đích nghiên cứu Hệ thống ứng dụng tiện nghi giúp cho việc quản lí đơn hàng siêu thị, nhà hàng, quán cà phê đặc biệt tiện ích người Đối tượng nghiên cứu Đối tượng nghiên cứu bao gồm ngôn ngữ css, javascript… đặc biệt tạo ứng dụng với react native mô ứng dụng với studio android Phạm vi nghiên cứu • Tìm hiểu lập trình app • Tìm hiểu ngơn ngữ lập trình javascript, react native • Tạo mơi trường phát triển ứng dụng máy tính • Học cách lập trình Dự kiến kết Làm app điện thoại với chức lưu trữ xuất nhập đơn hàng vào cho công ty CHƯƠNG THIẾT KẾ VÀ THI CÔNG Thiết lập công cụ, môi trường cần thiết laptop Cài đặt Nodejs Sơ lược: để tạo ứng dụng, đầu tiền ta cần phải cài Nodejs – Nodejs đóng vai trị quan trọng việc thực thi code mã javascript Ứng dụng Nodejs rộng rãi thiếu thực thi hệ thống thu ngân siêu thị Để cài Nodejs ta cần phải: • • • Download Nodejs Cài đặt Kiểm tra cấu hình Cài đặt Visual Studio Code Sơ lược: Visual Studio Code chương trình soạn thảo mã nguồn phổ biến để thực thi code Với ưu điểm nhanh, nhẹ, hỗ trợ đa tảng, VS code thích hợp để làm điểm kết nối lập trình phần mềm thu ngân thao tác Các bước tiến hành cài đặt Visual Studio Code: • • • • • • • • • • Tải file cài đặt VS Code cho windows Lưu file thiết bị Nhấp đúp vào file để khởi chạy cài đặt VS code win 10 Chấp nhận yêu cầu ứng dụng Nhấn nút Next Sử dụng vị trí cài đặt mặc định nhấn nút next Sử dụng cài đặt menu Start mặc định nhấn nút Next Tích vào register code as an editor for supported file types Kiểm tra add to path Cuối nhấn fish Cài đặt Android Studio Vai trị Android Studio lập trình hệ thống thu ngân: Android Studio (AS) đóng vài trị quan trọng hệ thống thu ngân, AS nơi cung cấp giao diện để tạo ứng dụng cho người dùng, thông qua code Ứng dụng tạo AS tốt, thay cơng cụ quản lí file phức tạp phía sau hậu trường Chỉ cần viết code, AS lưu dự án cài đặt ứng dụng thiết bị mơ vật lí Các bước tiến hành cài đặt: Download AS Click vào file vừa tải nhấn next Để thông số tiêu chí mặc định nhấn next Sau đồng ý điều khoản, phần mềm tự động cài đặt Nhấn finish để kết thúc Android Studio yêu cầu hộp sau tick chọn: • • • • • • Android SDK • Android SDK Platform • Android Virtual Device Cài đặt Android SDK: mở Android Studio, nhấp vào nút "Định cấu hình" chọn "Trình quản lý SDK" Hình Mơ tả Cài đặt Android SDK Chọn tab "Nền tảng SDK" từ Trình quản lý SDK, sau chọn hộp bên cạnh "Hiển thị chi tiết gói" góc bên phải Tìm kiếm mở rộng Android 10 (Q)mục nhập, sau đảm bảo mục sau chọn: • • Android SDK Platform 29 Cài đặt Intel x86 Google APIs Chọn "Công cụ SDK" chọn hộp cạnh "hiển thị chi tiết " Tìm kiếm mở rộng mục nhập "Cơng cụ xây dựng SDK Android", sau đảm bảo mục 29.0.2 chọn Cuối cùng, nhấp vào "Áp dụng" để tải xuống cài đặt Android SDK công cụ xây dựng liên quan Setting up the development environment Môi trường cài đặt xây dựng React Native điều cần thiết để tạo ứng dụng hoàn chỉnh Thêm vào đó, yêu cầu Android Studio để bắt đầu Các bước cài đặt: • Cài đặt phụ thuộc: cài Node, giao diện dòng lệnh React Native, JDK Android Studio • Đối với Node, cài thêm Chocolately, tình quản lí gói phổ biến cho Windows • React Native yêu cầu phát triển java SE (JDK), cài Chocolately • Mở Dấu nhắc lệnh dành cho quản trị viên (nhấp chuột phải vào Dấu nhắc lệnh chọn "Chạy với tư cách quản trị viên"), sau chạy lệnh: “ choco install -y nodejs.install openjdk8 “ Tạo ứng dụng kết nối với mobile phone Sau tạo code với React Native, dùng lệnh để tạo app điện thoại: Các bước nhập lệnh tạo app: Tại giao diện dịng lệnh React Native: React Native có giao diện dịng lệnh tích hợp sẵn Thay cài đặt quản lý phiên cụ thể CLI toàn cầu Với “ npx react-native “ Tại hình Visual Studio Code ta nhấn vào Terminal tạo Terminal new Với hệ thống quản lí thu ngân siêu thị ứng dụng đặt ProjectA với lệnh: “ npx react-native init ProjectA“ • Chạy ứng dụng React Native : Bước 1: Bắt đầu tàu điện ngầm Trước tiên, cần khởi động Metro, trình gói JavaScript kèm với React Native Metro "nhận vào tệp mục nhập tùy chọn khác trả tệp JavaScript bao gồm tất mã phần phụ thuộc nó." Bắt đầu Metro, chạy npx react-native start bên thư mục dự án React Native: Hình Hình ảnh minh họa chạy ứng dụng hệ thống thu ngân Bước 2: Code khởi động ứng dụng chạy điện thoại: Hình Hình ảnh minh họa khởi động ứng dụng Ngôn ngữ react native tạo ứng dụng hệ thống quản lí thu ngân • Tải số thư viện từ React Native: import React from 'react'; // tải thư viện React từ thư viện React import { StyleSheet, SafeAreaView, View, TextInput, Text, FlatList, TouchableOpacity, Alert, } from 'react-native'; // tải thư viện thẻ từ reac-native import Icon from 'react-native-vector-icons/MaterialIcons'; // tải thư viện icon import AsyncStorage from '@react-native-async-storage/async-storage'; // tải thư viện màu const COLORS = {primary: '#1f145c', white: '#fff'}; • Khai báo const tạo phần nhập cho đơn hàng: Hình Hình minh họa tạo phần nhập cho đơn hàng if (textInput == '') { Alert.alert('Error', 'Please input todo'); } else { const newTodo = { id: Math.random(), task: textInput, completed: false, }; Ta thấy: Nếu textInput chưa nhập hệ thống ứng dụng thơng báo lỗi yêu cầu người dùng nhập đơn hàng từ bàn phím Ngược lại, nhập từ bàn phím giá trị lưu trự hàm newTodo: const newTodo = { id: Math.random(), // id địa lưu giá trị nhập từ bàn phím task: textInput, // với nhiệm vụ giá trị nhập vào completed: false, }; • View: vùng chứa hỗ trợ bố cục với flexbox, style, some touch handling điều khiển trợ năng… Hình Ví dụ thẻ view chương trình code app quản lí thu ngân Thẻ view phần dùng để thêm đơn hàng, giúp hệ thống người dùng thuận tiện việc nhập thêm đơn hàng app, với style định dạng font màu, cỡ chữ, canh lề Ta có < View Style={styles.footer}> định dạng thẻ view với định dạng footer • Tạo định dạng footer cho thẻ View: const styles = StyleSheet.create({ footer: { position: 'absolute', // khóa phần tử vị trí cứng bottom: 0, // cách bên width: '100%', // độ rộng lớn flexDirection: 'row', // chia khối theo hướng ngang alignItems: 'center', // canh lề vật phẩm paddingHorizontal: 20, // khoảng trắng theo trục hoành 20 backgroundColor: COLORS.white, // màu màu trắng }, 10 • Tạo chức gạch đơn hàng hồn thành, xóa đơn hàng clear tất đơn hàng: Chức đánh dấu đơn hàng hoàn thành: const markTodoComplete = todoId => { const newTodosItem = todos.map(item => { if (item.id == todoId) { return { item, completed: true}; } return item; }); setTodos(newTodosItem); }; Chức xóa đơn hàng: const deleteTodo = todoId => { const newTodosItem = todos.filter(item => item.id != todoId); setTodos(newTodosItem); }; Chức xóa tất đơn hàng: const clearAllTodos = () => { Alert.alert('Confirm', 'Clear todos?', [ { text: 'Yes', onPress: () => setTodos([]), }, { text: 'No', }, ]); • TextInput: thành phần để nhập văn vào ứng dụng thơng qua bàn phím Props cung cấp khả cấu hình cho số tính năng, chẳng hạn tự động sửa, tự động viết hoa, văn giữ chỗ loại bàn phím khác nhau, chẳng hạn bàn phím số TextInput cho phép người dùng nhập vào đơn hàng 11 Hình Ví dụ TextInput hệ thống quản lí thu ngân siêu thị Khi người dùng nhập vào đơn hàng vào TextInput giá trị lưu vào value sau tạo giá trị vào text với lệnh setTextInput Hình • Ví dụ TextInput app hệ thống quản lí thu ngân Thẻ Flatlist: giao diện hiệu để hiển thị danh sách phẳng, bản, hỗ trợ tính tiện dụng Trong hệ thống, đơn hàng cần xếp theo hàng dọc có trật tự có chức thích hợp để sử dụng Thẻ Flatlist kèm với phần tử renderItems Data 12 Hình Danh sách đơn hàng nhập ứng dụng Để tạo danh sách đơn hàng xếp dọc, ta có code sau: } /> • Thẻ Text dùng để thị chữ hình: 13 Hình • Ảnh minh họa thẻ Text thị đơn hàng hình code Thẻ Icon dùng để thị số Icon thường dùng Delete, Add, Clear…: với chức khác nhau, cho phép người dùng tick vào để thực chức riêng biệt Hình • 10 Ảnh minh họa icon Thẻ TouchableOpacity dùng để thêm đơn hàng người dùng nhập vào từ bàn phím Ví dụ hệ thống quản lí thu ngân, ta có phần nhập đơn hàng từ bàn phím sau: • Tạo code style cho hệ thống thêm xinh động: const styles = StyleSheet.create({ footer: { position: 'absolute', bottom: 0, width: '100%', flexDirection: 'row', alignItems: 'center', paddingHorizontal: 20, backgroundColor: COLORS.white, }, inputContainer: { height: 50, paddingHorizontal: 20, 14 elevation: 40, backgroundColor: COLORS.white, flex: 1, marginVertical: 20, marginRight: 20, borderRadius: 30, }, • Code xuất giá trị để tạo app hệ thống thu ngân siêu thị: “export default App; “ CHƯƠNG 3: GIẢI THUẬT VÀ ĐIỀU KHIỂN Hoạt động hệ thống Hệ thống quản lí thu ngân siêu thị hoạt động qua app, sử dụng app, người dùng nhập đơn hàng từ bàn phím, sau đơn hàng tự động lưu lại, với đơn hàng có, xóa đơn hàng, gạch đơn hàng hoàn thành chức xóa hết tất đơn hàng qua ngày siêu thị Lưu đồ giải thuật điện thoại 15 Hình 11 Ảnh minh họa hệ thống quản lí thu ngân điện thoại 16 Bàn phím cho người dùng nhập Danh sách đơn hàng thị Icon chức clear all, đánh dấu hoàn thành xóa đơn hàng CHƯƠNG 4: KẾT LUẬN Ưu điểm • • • • Dễ sử dụng, dễ quản lí đơn hàng vào Thiết kế đơn giản Có chức để nhập liệu đơn hàng App hoạt động nơi công ty, Nhược điểm • • • Thiếu chức thị giá tiền Phần code chưa đẹp số lỗi khó sửa Tính bảo mật chưa cao 17 Hướng phát triển Phát triển thêm giá tiền đơn hàng gốc giá tiền bán để quản lí rõ ràng thu chi tiền, từ suy tổng giá tiền lợi nhuận thu sau ngày siêu thị Tạo mật đăng nhập, thông tin đăng nhập chủ nhân viên việc sử dụng app quản lí Tạo nơi lưu trữ liệu vào, thu chi tiền hệ thống lên nơi lưu trữ Tạo mã QR nhập sản phẩm từ mã 18 TÀI LIỆU THAM KHẢO [1] E Masiello, “React Native,” Mastering React Native, Birmingham B3 2PB, Packt Publishing Ltd, January 2017, p www.packtpub.com [2] B Eisenman, “Learning React Native,” Building Native Mobile Apps with JavaScript, CA, O'Reilly Media, 2015, p http://oreilly.com/catalog/errata.csp? isbn=9781491929001 [3] “reactnative,” [Trực tuyến] Available: https://reactnative.dev/ 19 ... borderRadius: 3 0, }, • Code xuất giá trị để tạo app hệ thống thu ngân siêu thị: “export default App; “ CHƯƠNG 3: GIẢI THU? ??T VÀ ĐIỀU KHIỂN Hoạt động hệ thống Hệ thống quản lí thu ngân siêu thị... thống quản lí thu ngân siêu thị giúp làm việc Tại việc nên sử dụng hệ thống thu ngân? Thường ngày tốn nhớ cho hoạt động quan trọng, việc sử dụng hệ thống giúp quản lí tốt hơn, hệ thống ghi nhớ hoạt... chương trình code app quản lí thu ngân Thẻ view phần dùng để thêm đơn hàng, giúp hệ thống người dùng thu? ??n tiện việc nhập thêm đơn hàng app, với style định dạng font màu, cỡ ch? ?, canh lề Ta có < View