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 1 TỔNG QUAN VỀ ĐỀ TÀI

1 Giới thiệu đề tài

Xã hội ngày nay trở nên hiện đại, những công việc như mua sắm trực tuyến hoặc trực tiếp ngày càng phổ biến, con người không thể chi quá nhiều thời gian cho việc quản lí thu ngân một cách thủ công và không có tính toán chính xác cao Từ

đó, chúng ta không thể thiếu một hệ thống quản lí thu ngân siêu thị giúp chúng ta làm những việc đó

Tại sao việc nên sử dụng một hệ thống thu ngân? Thường ngày chúng ta đã tốn quá bộ nhớ cho những hoạt động quan trọng, và việc sử dụng hệ thống giúp chúng

ta quản lí tốt hơn, hệ thống sẽ ghi nhớ những hoạt động và nhắc nhở chúng ta, hệ thống sẽ hoạt động thông qua điện thoại hoặc một thiết bị điện tử thông qua một ứng dụng, người dùng có thể nhập danh sách các đơn hành để quản lí hiệu quả

2 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 của các siêu thị, nhà hàng, quán cà phê và đặc biệt là tiện ích đối với mọi người

3 Đố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 là tạo ứng dụng với react native và mô phỏng ứng dụng với studio android

4 Phạm vi nghiên cứu

• Tìm hiểu về lập trình app

• Tìm hiểu về ngôn ngữ lập trình javascript, react native

• Tạo môi trường phát triển ứng dụng trên máy tính

• Học về cách lập trình

5 Dự kiến kết quả

Làm ra được app điện thoại với chức năng lưu trữ và xuất nhập các đơn hàng

ra vào cho một công ty

CHƯƠNG 2 THIẾT KẾ VÀ THI CÔNG

1 Thiết lập công cụ, môi trường cần thiết trên laptop

1 Cài đặt Nodejs

Sơ lược: để tạo được 1 ứng dụng, đầu tiền ta cần phải cài Nodejs – vì Nodejs đóng vai trò quan trọng trong việc thực thi code mã javascript Ứng dụng Nodejs rộng rãi và không thể thiếu trong 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 và cấu hình

2 Cài đặt Visual Studio Code

Sơ lược: Visual Studio Code là một chương trình soạn thảo mã nguồn phổ biến nhất để thực thi code Với những ưu điểm nhanh, nhẹ, hỗ trợ đa nền tảng, VS code rất thích hợp để làm điểm kết nối giữa lập trình phần mềm thu ngân và các 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 trên thiết bị

• Nhấp đúp vào file để khởi chạy cài đặt VS code trên win 10

• Chấp nhận các yêu cầu của ứng dụng

• Nhấn nút Next

• Sử dụng vị trí cài đặt mặc định và nhấn nút next

• Sử dụng cài đặt menu Start mặc định và 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 cùng nhấn fish

3 Cài đặt Android Studio

Vai trò của Android Studio trong lập trình hệ thống thu ngân: Android Studio (AS) đóng vài trò quan trọng trong hệ thống thu ngân, bởi vì AS là 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 bởi AS rất tốt, thay thế các 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 sẽ lưu dự án và cài đặt ứng dụng trên thiết bị mô phỏng hoặc vật lí

Các bước tiến hành cài đặt:

• Download AS

• Click vào file vừa tải về và nhấn next

• Để các thông số tiêu chí mặc định và nhấn next

• Sau khi đồng ý điều khoản, phần mềm sẽ tự động cài đặt

• Nhấn finish để kết thúc

Android Studio cũng yêu cầu các hộp sau được 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" và chọn

"Trình quản lý SDK"

Hình 1 Mô tả Cài đặt Android SDK

Chọn tab "Nền tảng SDK" từ trong 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 dưới cùng bên phải Tìm kiếm và mở rộng Android 10 (Q)mục nhập, sau đó đảm bảo rằng các mục sau được chọn:

• Android SDK Platform 29

• Cài đặt Intel x86 hoặc Google APIs

Chọn "Công cụ SDK" và chọn hộp cạnh "hiển thị chi tiết " Tìm kiếm và mở rộng mục nhập "Công cụ xây dựng SDK Android", sau đó đảm bảo rằng mục đó 29.0.2 đã được chọn

Cuối cùng, nhấp vào "Áp dụng" để tải xuống và cài đặt Android SDK và các công

cụ xây dựng liên quan

4 Setting up the development environment

Môi trường cài đặt và xây dựng React Native là điều rất cần thiết để tạo ra một ứng dụng hoàn chỉnh Thêm vào đó, nó 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 và

Android Studio

• Đối với Node, cài thêm Chocolately, đây là một tình quản lí gói phổ biến cho Windows

• React Native cũng yêu cầu bộ phát triển java SE (JDK), bộ này có thể được cài bằng 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

và 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 “.

2 Tạo ứng dụng và kết nối với mobile phone

Sau khi tạo được code với React Native, thì dùng lệnh để tạo app ra đ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ó một giao diện dòng lệnh được tích hợp sẵn Thay vì cài đặt và quản lý một phiên bản cụ thể của CLI trên toàn cầu Với

“ npx react-native <command> “

Tại màn hình của Visual Studio Code ta nhấn vào Terminal và tạo Terminal new

Với hệ thống quản lí thu ngân siêu thị thì ứng dụng sẽ được đặt là 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 đi kèm với React Native Metro "nhận vào một tệp mục nhập và các tùy chọn khác nhau và trả về một tệp JavaScript duy nhất bao gồm tất cả mã và các phần phụ thuộc của nó."

Bắt đầu Metro, hãy chạy npx react-native start bên trong thư mục dự án React

Native:

Hình 2 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 nền trên điện thoại:

Hình 3 Hình ảnh minh họa khởi động ứng dụng

3 Ngôn ngữ react native cơ bản và tạo ứng dụng hệ thống quản lí thu ngân

• Tải một 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 các 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 hằng const và tạo phần nhập cho đơn hàng:

Hình 4 Hình minh họa về 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 được nhập thì hệ thống ứng dụng sẽ thông báo lỗi và yêu cầu người dùng nhập đơn hàng từ bàn phím Ngược lại, nếu đã được nhập từ bàn phím thì giá trị đó sẽ được lưu trự ở hàm newTodo:

const newTodo = {

id: Math.random(), // id là địa chỉ được lưu giá trị nhập từ bàn phím

task: textInput, // với nhiệm vụ là giá trị nhập vào

completed: false,

};

• View: là một vùng chứa hỗ trợ bố cục với flexbox, style, some touch handling

và điều khiển trợ năng…

Hình 5 Ví dụ thẻ view trong chương trình code app quản lí thu ngân

Thẻ view ở trên là phần dùng để thêm đơn hàng, giúp hệ thống người dùng thuận tiện trong việc nhập thêm đơn hàng trong app, với style là định dạng font

màu, cỡ chữ, canh lề Ta có < View Style={styles.footer}> là định dạng của thẻ

view đó với định dạng đó là 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 dưới 0

width: '100%', // độ rộng lớn nhất

flexDirection: 'row', // chia khối này theo hướng ngang

alignItems: 'center', // canh lề vật phẩm chính giữa

paddingHorizontal: 20, // khoảng trắng theo trục hoành là 20

backgroundColor: COLORS.white, // màu nền là màu trắng

},

• Tạo chức năng gạch đơn hàng khi hoàn thành, xóa đơn hàng và clear tất cả đơn hàng:

Chức năng đánh dấu đơn hàng khi 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 năng xóa đơn hàng:

const deleteTodo = todoId => {

const newTodosItem = todos.filter(item => item.id != todoId);

setTodos(newTodosItem);

};

Chức năng xóa tất cả đơn hàng:

const clearAllTodos = () => {

Alert.alert('Confirm', 'Clear todos?', [

{

text: 'Yes',

onPress: () => setTodos([]),

},

{

text: 'No',

},

]);

• TextInput: một thành phần cơ bản để nhập văn bản vào ứng dụng thông qua bàn phím Props cung cấp khả năng cấu hình cho một số tính năng, chẳng hạn như tự động sửa, tự động viết hoa, văn bản giữ chỗ và các loại bàn phím khác nhau, chẳng hạn như bàn phím số TextInput cho phép người dùng nhập vào các đơn hàng

Hình 6 Ví dụ về TextInput trong hệ thống quản lí thu ngân siêu thị

vào value sau đó sẽ được tạo giá trị vào text mới với lệnh setTextInput

Hình 7 Ví dụ về TextInput trong app hệ thống quản lí thu ngân

• Thẻ Flatlist: là một giao diện hiệu quả để hiển thị danh sách phẳng, cơ bản, hỗ trợ các tính năng tiện dụng nhất

Trong hệ thống, các đơn hàng cần được sắp xếp theo một hàng dọc có trật tự và

có những chức năng thích hợp để sử dụng nó

Thẻ Flatlist đi kèm với phần tử con renderItems và Data

Hình 8 Danh sách các đơn hàng khi nhập trên ứng dụng

Để tạo được danh sách các đơn hàng xếp dọc, ta có code như sau:

<FlatList

showsVerticalScrollIndicator={false}

contentContainerStyle={{padding: 20, paddingBottom: 100}}

data={todos}

renderItem={({item}) => <ListItem todo={item} />}

/>

• Thẻ Text dùng để hiện thị chữ ra màn hình:

Hình 9 Ảnh minh họa thẻ Text hiện thị các đơn hàng ra màn hình bằng code

• Thẻ Icon dùng để hiện thị một số Icon thường dùng như Delete, Add, Clear…: với chức năng khác nhau, cho phép người dùng tick vào để thực hiện chức năng riêng biệt

Hình 10 Ảnh minh họa icon

• Thẻ TouchableOpacity dùng để thêm đơn hàng khi người dùng nhập vào từ bàn phím

Ví dụ trong hệ thống quản lí thu ngân, ta có phần nhập các đơn hàng từ bàn phím như sau:

<TouchableOpacity onPress={addTodo}>

<View style={styles.iconContainer}>

<Icon name="thêm" color="white" size={30} />

</View>

</TouchableOpacity>

• 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,

elevation: 40,

backgroundColor: COLORS.white,

flex: 1,

marginVertical: 20,

marginRight: 20,

borderRadius: 30,

},

• Code xuất ra 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

1 Hoạt động của hệ thống

Hệ thống quản lí thu ngân siêu thị hoạt động qua một app, khi sử dụng app, người dùng nhập 1 đơn hàng từ bàn phím, sau đó đơn hàng sẽ tự động lưu lại, với đơn hàng đã có, chúng ta có thể xóa đơn hàng, gạch đơn hàng khi đã được hoàn thành và chức năng xóa hết tất cả đơn hàng qua ngày của siêu thị

2 Lưu đồ giải thuật trên điện thoại

Hình 11 Ảnh minh họa hệ thống quản lí thu ngân trên điện thoại

Bàn phím cho người dùng nhập

Danh sách các đơn hàng hiện thị

Icon chức năng clear all, đánh dấu hoàn thành và xóa đơn hàng

CHƯƠNG 4: KẾT LUẬN

1 Ưu điểm

• Dễ sử dụng, dễ quản lí đơn hàng ra vào

• Thiết kế đơn giản

• Có chức năng cơ bản để nhập dữ liệu đơn hàng

• App hoạt động được mọi nơi của công ty,

2 Nhược điểm

• Thiếu chức năng hiện thị giá tiền

• Phần code chưa đẹp do một số lỗi khó sửa

• Tính bảo mật chưa cao

3 Hướng phát triển

Phát triển thêm giá tiền của các đơn hàng gốc và giá tiền bán ra để quản lí rõ ràng thu chi tiền, từ đó suy ra tổng giá tiền lợi nhuận thu được sau 1 ngày của siêu thị

Tạo mật khẩu đăng nhập, thông tin đăng nhập đối với chủ và nhân viên trong việc sử dụng app quản lí

Tạo nơi lưu trữ dữ liệu ra vào, thu chi tiền của hệ thống lên nơi lưu trữ

Tạo mã QR và nhập sản phẩm từ mã

TÀI LIỆU THAM KHẢO

[1] E Masiello, “React Native,” trong Mastering React Native, Birmingham B3 2PB,

Packt Publishing Ltd, January 2017, p www.packtpub.com

[2] B Eisenman, “Learning React Native,” trong 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/