• Tidak ada hasil yang ditemukan

Xây dựng ứng dụng di động Android ghi nhật ký chi tiêu online

Protected

Academic year: 2023

Membagikan "Xây dựng ứng dụng di động Android ghi nhật ký chi tiêu online"

Copied!
53
0
0

Teks penuh

Tôi xin gửi lời cảm ơn chân thành nhất đến các thầy cô Trường Đại học Quản lý và Công nghệ Hải Phòng, những người đã tận tình hướng dẫn và cho tôi những kiến ​​thức, bài học quý giá trong suốt thời gian qua. Tôi học ở trường. Tôi xin chân thành cảm ơn các thầy cô trong Bộ môn Công nghệ thông tin, đặc biệt là ThS. Phùng Anh Tuấn, cô giáo đã tận tình hướng dẫn, giúp đỡ em trong suốt quá trình tốt nghiệp.

Dưới sự hướng dẫn của thầy, em đã định hướng tốt cho mình cách thực hiện và thực hiện các yêu cầu trong quá trình tốt nghiệp. Tôi xin gửi lời cảm ơn đến người thân, người thân đã quan tâm, động viên và luôn tạo điều kiện tốt nhất cho tôi trong suốt quá trình học tập và ra trường. Ngoài ra, tôi cũng xin gửi lời cảm ơn đến tất cả các bạn bè, đặc biệt là các bạn lớp CT1901C đã luôn thân thiết, cùng nhau học tập và giúp đỡ tôi trong suốt thời gian qua cũng như trong suốt quá trình thực hiện đồ án này.

TỔNG QUAN VỀ LẬP TRÌNH DI ĐỘNG

Hệ điều hành Android

  • Tổng quan hệ điều hành Android
  • Kiến trúc của hệ điều hành Android
  • Nhân Linux

Display Manager: Điều khiển việc hiển thị trên màn hình cũng như nhận các điều khiển của người dùng trên màn hình (chuyển động, chạm...). Các thiết bị Android sẽ hiển thị màn hình chính sau khi khởi động, điểm bắt đầu với các thông tin chính trên thiết bị, tương tự như khái niệm desktop trên máy tính để bàn. 9 như dự báo thời tiết, hộp thư người dùng hay tin tức thời sự trực tiếp trên màn hình chính.

Màn hình chính có thể bao gồm nhiều trang có thể được xem bằng cách vuốt tiến hoặc lùi, mặc dù giao diện màn hình chính của Android có khả năng tùy biến cao, cho phép người dùng tự do thiết lập giao diện và hoạt động của màn hình chính. Các ứng dụng của bên thứ ba có trên Google Play và các cửa hàng ứng dụng khác cũng cho phép người dùng thay đổi "chủ đề" của màn hình chính, thậm chí bắt chước giao diện của các hệ điều hành khác như Windows Phone. . Phía trên cùng màn hình là thanh trạng thái, hiển thị thông tin về thiết bị và trạng thái kết nối.

Hình 1.1.2.1: Kiến trúc hệ điều hành Android  1.1.3. Nhân Linux
Hình 1.1.2.1: Kiến trúc hệ điều hành Android 1.1.3. Nhân Linux

Môi trường lập trình Android Studio

  • Giới thiệu Android Studio
  • Cài đặt môi trường lập trình Android Studio
  • Cài đặt chương trình Android Studio
  • Cài đặt máy ảo Genymotion giả lập điện thoại
  • Sơ lược về cấu trúc một dự án Android Studio

Vì trình giả lập điện thoại trong Android Studio không hỗ trợ chức năng chụp ảnh cho các ứng dụng sau này nên ở đây chúng tôi sử dụng phần mềm của bên thứ ba là máy ảo Genymotion. 14 Bước 2: Mở file cài đặt Genymotion, chọn đường dẫn ổ đĩa bạn muốn cài đặt hoặc để mặc định như hình bên dưới và chỉ cần nhấn Next cho đến khi chương trình hoàn tất cài đặt. 15 Ở đây có rất nhiều phiên bản Android nhưng ở đây chúng tôi chọn phiên bản Android 5.1 đến 8.0 để phù hợp với cấu hình máy tính.

16 Khi phần mềm được cài đặt, chỉ cần nhấp đúp để mở máy ảo hoặc nhấp chuột phải và chọn "Bắt đầu". Sau khi mở chương trình Android Studio, chúng ta sẽ bắt đầu tạo một dự án mới bằng cách vào File chọn New -> New Project chúng ta sẽ được hình ảnh bên dưới. Ở đây chúng tôi chọn Hoạt động trống để xây dựng dự án từ đầu mà không tuân theo các mẫu hiện có của Android Studio.

Ở đây, do máy ảo Android Studio tích hợp sẵn không hỗ trợ chụp ảnh cho các ứng dụng sau này nên chúng ta sẽ sử dụng máy ảo Genymotion đã cài đặt ở trên và kiểm tra. Trên màn hình chính của chương trình, chọn thiết bị máy ảo chúng ta vừa cài đặt trong Genymotion và nhấn nút RUN ngay bên cạnh.

Hình 1.2.3.1: Giao diện trang web tải bộ cài đặt Android Studio
Hình 1.2.3.1: Giao diện trang web tải bộ cài đặt Android Studio

PHÂN TÍCH THIẾT KẾ HỆ THỐNG

Phát biểu bài toán

Phân tích thiết kế dữ liệu

Phân tích thiết kế chức năng

  • Sơ đồ phân rã chức năng
  • Chức năng Thêm khoản chi
  • Chức năng Xem khoản chi
  • Chức năng Sửa khoản chi
  • Chức năng Xóa khoản chi
  • Chức năng Thống kê tiền chi

Sau đó, chúng tôi tiến hành chuyển đổi thông tin sang JSON để dịch vụ web có thể đọc được. 27 - Xây dựng chức năng xử lý các thông tin thanh toán được upload lên cơ sở dữ liệu thông qua dịch vụ web. Chức năng này được thiết kế để xem thông tin trong một khoảng thời gian nhất định.

Trên màn hình xem chi phí sẽ có lựa chọn thời gian từ ngày nào đến ngày nào để người dùng xác định được thời gian cần tìm kiếm. Do người dùng không nhớ chính xác ngày giờ đã chi tiêu nên tìm kiếm theo thời gian, lấy khoảng thời gian cụ thể là dễ dàng và trực quan nhất. 30 Dịch vụ web sẽ lấy thông tin từ cơ sở dữ liệu và gửi đến ứng dụng khi chúng ta nhấn nút Xem chi phí.

Đôi khi trong khi nhập dữ liệu thông tin chi phí có sai sót hoặc sai sót, chúng ta muốn sửa lại thông tin thì đây chính là chức năng Chỉnh sửa chi phí cho phép người dùng chỉnh sửa thông tin chi phí một cách dễ dàng. Để làm cho tính năng chỉnh sửa chi phí trở nên trực quan, tính năng này đã được thiết kế trực tiếp trong phần Chế độ xem chi phí. Chúng ta cũng cần tạo các tính năng như nắm bắt thông tin chi phí, xem phản hồi, mã hóa dữ liệu dưới dạng JSON và các tính năng như DatePicker và TimePicker, tương tự như Thêm chi phí, vì giao diện của hai tính năng này tương tự nhau.

33 Sau khi chỉnh sửa xong thông tin chúng ta muốn chỉnh sửa, hãy nhấn vào nút Cập nhật. Dịch vụ web tìm ID của chi phí cần sửa, chuyển thông tin mới và lưu ID vào cơ sở dữ liệu. Tính năng này cho phép người dùng xóa những chi phí không còn cần quan tâm.

Để thực hiện hành động xóa này một cách trực quan và dễ dàng, người dùng chỉ cần nhấn vào nút xóa chi phí ở bên phải tên chi phí. Sau đó, một bảng xác nhận sẽ xuất hiện. Sau đó, chúng tôi sử dụng mã xử lý để cộng số tiền của từng khoản chi phí. Số tiền của mỗi khoản chi sẽ là một phần tử và bạn chỉ cần cộng các phần tử lại với nhau để có được tổng số tiền chúng ta đã bỏ ra và hiển thị trên màn hình. 37 Dịch vụ web giúp lấy ngày bắt đầu, ngày kết thúc, gửi dữ liệu về ứng dụng và hiển thị số tiền từng khoản chi.

Hình 2.3.2.1: Code xử lý chọn ngày
Hình 2.3.2.1: Code xử lý chọn ngày

CHƯƠNG TRÌNH THỰC NGHIỆM

Kết quả đã đạt được

Một số giao diện chính của chương trình

  • Giao diện chính
  • Chức năng Thêm khoản chi
  • Chức năng Xem khoản chi
  • Chức năng Sửa khoản chi
  • Chức năng Xóa khoản chi
  • Chức năng Thống kê tiền chi

Trên màn hình chính của ứng dụng, chúng ta nhấn nút Add Expense và màn hình mới mở ra như hình 3.2.2.1. Tính năng Thêm chi tiêu giúp người dùng nhập các thông tin cần thiết mỗi lần mua hàng và chi tiêu, trong đó có tính năng chụp ảnh sản phẩm mình đang chi tiêu hoặc chọn ảnh có sẵn. Nếu chúng ta nhập sai thông tin hoặc muốn thêm chi phí khác và muốn nhập lại từ đầu người dùng chỉ cần nhấn nút xóa.

42 Sau khi nhập thông tin người dùng nhấn nút Thêm, giữa màn hình sẽ xuất hiện thông báo cho chúng ta biết sự cố đã được thêm thành công. Sau khi thêm phiên bản mong muốn, chúng ta chỉ cần nhấn nút Thoát để quay lại giao diện chính của chương trình. Trên màn hình chính của ứng dụng, chúng ta chạm vào nút Add Expense sẽ mở ra một màn hình mới như hình 3.2.3.1.

Ngay trong màn hình “Xem chi phí”, tính năng “Chỉnh sửa chi phí” sẽ được tích hợp để người dùng có thể chỉnh sửa bất kỳ khoản chi phí nào mình muốn mà không cần phải nhớ thông tin chi phí để tra cứu, tra cứu. Việc chỉnh sửa rất rắc rối và tốn thời gian. 46 Khi nhấn vào chức năng Chỉnh sửa chi phí, một màn hình mới sẽ xuất hiện với giao diện tương tự như chức năng Thêm chi phí nhưng đã có thông tin được lưu từ cơ sở dữ liệu như Hình 3.2.4.2. Sau khi nhận được thông báo chỉnh sửa chi phí thành công, bạn chỉ cần nhấn nút Thoát để quay lại màn hình chức năng Xem chi phí.

49 Quay lại màn hình Xem chi phí và nhấn vào nút Xem để tìm thông tin chi phí trong tháng 6 năm 2020 và như chúng ta thấy, số tiền chi phí cắt tóc đã được thay đổi thành 60.000 đồng. Khi chúng ta nhấn vào dấu tích đỏ cạnh tên chi phí sẽ xuất hiện một bảng thông báo yêu cầu chúng ta xác nhận có muốn xóa chi phí này hay không như hình 3.2.5.1. Nếu nhấn Có thì chi phí sẽ bị xóa ngay, còn nếu nhấn Không thì chúng ta quay lại màn hình Hiển thị Chi phí.

Trên màn hình chính của giao diện khi người dùng nhấn nút Thống kê chi phí sẽ xuất hiện một màn hình mới với giao diện giống giao diện Xem chi phí nhưng sẽ hiển thị số tiền chúng ta đã bỏ ra trong một khoảng thời gian. Ví dụ: Trong hình bên dưới là tổng số tiền chi tiêu trong tháng 6/2020). Tính năng này còn được tích hợp thêm 2 chức năng là Chỉnh sửa chi phí và Xóa chi phí để người dùng thuận tiện hơn trong việc truy cập. Các tính năng như Xem chi phí và Thống kê chi phí không thể tải lại thông tin mới nếu chúng ta chỉnh sửa hoặc xóa một khoản chi phí mà vẫn phải nhấn lại nút Xem để tải lại chi phí.

Hình 3.2.2.1: Giao diện Thêm khoản  chi
Hình 3.2.2.1: Giao diện Thêm khoản chi

Gambar

Hình 1.2.3.3: Giao diện cài đặt Android Studio
Hình 1.2.3.5: Nhấn Install để bắt đầu cài đặt
Hình 1.2.4.1: Trang chủ tải về của Genymotion
Hình 1.2.4.2: Cài đặt chương trình Genymotion
+7

Referensi

Dokumen terkait

Thực hành 3: Em hãy vẽ chiếc điện thoại như hình trong sách hướng dẫn tin học trang 48 và thực hiện xóa bỏ đi một vài chi tiết và vẽ thêm các chi tiết khác để được chiếc điện thoại..

26 Hình 3.12 Màn hình hiển thị thông tin chủ sử dụng - Nếu thực hiện thành công thì thông tin về chủ sử dụng của thửa đất đã tham gia biến động sẽ được cập nhật vào cơ sở dữ liệu để