BÁO CÁO CHUYÊN ĐỀ: CÔNG NGHỆ PHẦN MÊM BÁO CÁO MÔN CHUYÊN ĐỀ CÔNG NGHỆ PHẦN MỀM BÀI TẬP LỚN Đề tài: Xây dựng ứng dụng “Ví điện tử” cho android App Inventor2 Giáo viên hướng dẫn : Nguyễn Mạnh Sơn Sinh viên thực : Nhóm 1: Phạm Thế Anh Lương Thị Huệ Lớp : L14CN NHOM 1: PHAM THE ANH, LUONG THI HUE BÁO CÁO CHUYÊN ĐỀ: CÔNG NGHỆ PHẦN MÊM LỜI NÓI ĐẦU Ngày với phát triển công nghệ thông tin lĩnh vực di động Các ứng dụng phần mềm thúc đẩy tiếp cận tới người dùng rộng rãi Chính lí đó, ứng dụng hỗ trợ lập trình ngày xuất nhiều ứng dụng App Inventor Google phát triển Vấn đề quản lý chi tiêu cá nhân trở thành nhu cầu thói quen hàng ngày người Dựa hiểu biết tìm tòi thân App Inventor 2, chúng em xây dựng ứng dụng “Ví điện tử” đảm bảo đơn giản, tiện lợi để dùng ghi chép vào lúc phát sinh việc chi tiêu “Ví điện tử” giúp người dùng ghi chép chi tiết khoản thu chi (chi vào việc gì, tiền, chi kiện/chuyến nào? ) lúc, nơi Bất kể có khoản chi phí phát sinh (nhận lương, cho tiền ăn tiệm, mua quần áo ) người dùng cần bỏ điện thoại ra, nhập liệu xong Chúng em xin cảm ơn thầy Nguyễn Mạnh Sơn hỗ trợ đồng ý cho chúng em tiếp tục thực đề tài Mục lục NHOM 1: PHAM THE ANH, LUONG THI HUE BÁO CÁO CHUYÊN ĐỀ: CÔNG NGHỆ PHẦN MÊM Bảng phân công công việc Công việc Người tham gia Phân tích thiết kế hệ thống ứng Lương Thị Huệ dụng “Ví điện tử” Xây dựng ứng dụng “Ví điện tử” Phạm Thế Anh Tìm tài liệu, viết báo cáo, viết slide Lương Thị Huệ, Phạm Thế Anh CHƯƠNG 1: GIỚI THIỆU CHUNG VỀ APP INVENTOR Tìm hiểu lịch sử phát triển thành công App Inventor Ngày 12/7/2010, Google thức giới thiệu công cụ lập trình trực quan App Inventor dùng để phát triển phần mềm ứng dụng hệ điều hành Android Được công bố dạng phần mềm tự (free software), App Inventor trở thành tượng chưa có lĩnh vực lập trình cho thiết bị di dộng Dựa ý tưởng “những bạn thấy bạn có” (WYSIWYG), App Inventor giúp dễ dàng tiếp cận xây dựng ứng dụng NHOM 1: PHAM THE ANH, LUONG THI HUE BÁO CÁO CHUYÊN ĐỀ: CÔNG NGHỆ PHẦN MÊM Android Với giao diện trực quan, dễ hiểu, cho phép truy cập đến chức điện thoại kể GPS, công cụ giúp cho sưu tập ứng dụng Android ngày dồi phong phú Tháng 8/2010, lập trình viên mang tên Clark Wimberly tạo tảng Twitter client App Inventor chứng minh khả sức mạnh chương trình Đáng tiếc, năm sau đời, App Inventor bị Google vùi dập, việc truy cập sử dụng mã nguồn mở cách thoải mái khiến Google không đồng tình không nằm chiến lược ông lớn Sau đó, Google chi tiền để hỗ trợ học viện Công nghệ Massachusetts (MIT) thực dự án, với mục đích đào tạo lập trình viên cách tiếp phổ biến App Inventor Ngày nay, MIT hoàn thiện App Inventor chia sẻ tài khoản Google Các lập trình viên bắt đầu muốn tạo ứng dụng Android cần vào địa web MIT, nhập thông tin tài khoản Google, từ mảnh ghép nhỏ, xây dựng ý tưởng Tuy có cách dùng đơn giản App Inventor "hào phóng" cho phép bạn truy xuất đến chức thường dùng điện thoại chức tự động nhắn tin, xác định vị trí qua GPS kể giao tiếp với ứng dụng web Amazon, Facebook hay Twitter Tại hội thảo Activate 2010 (1/7/2010), Eric Schmidt - giám đốc điều hành Google - khẳng định: "Công nghệ di động lĩnh vực phát triển nóng Những lập trình viên giỏi ưu tiên tạo phần mềm ứng dụng cho thiết bị di động, thay phần mềm cho máy tính cá nhân Windows Apple Mac Một nguyên nhân xu hướng thiết bị di động có tính cá nhân sâu sắc nhiều so với máy tính cá nhân" Các thiết bị di động (chủ yếu điện thoại thông minh) có lực xử lý thông tin ngày mạnh, trở thành chủng loại "máy tính cá nhân" Khác với máy tính cá nhân thông thường, thiết bị di động có đo gia tốc (accelerometer), quay hồi chuyển (gyroscope), định vị GPS có thêm cảm ứng khác tương lai, từ mở lĩnh vực ứng dụng mẻ rộng lớn Với công cụ App Inventor, Google tạo điều kiện để người tự xây dựng phần mềm ứng dụng cho thiết bị di động dùng hệ điều hành Android Trang web dự án App Inventor nêu rõ: "Với App Inventor, bạn xây dựng phần mềm ứng dụng theo ý tưởng Nhiều người bắt đầu với việc tạo trò chơi đơn giản trò "bắt chuột chũi" (bắt chuột chũi nhảy ngẫu nhiên hình) phần mềm vẽ "râu ria" hình chân dung bạn bè Dựa vào cảm ứng có sẵn điện thoại, bạn tạo trò chơi di chuyển bóng "mê cung" cách nghiêng điện thoại Việc lập trình ứng dụng không giới hạn trò chơi đơn giản Bạn tạo phần mềm để cung cấp thông tin phục vụ cho việc dạy học, chẳng hạn phần mềm giúp bạn bạn học ôn tập NHOM 1: PHAM THE ANH, LUONG THI HUE BÁO CÁO CHUYÊN ĐỀ: CÔNG NGHỆ PHẦN MÊM kiến thức để chuẩn bị cho kỳ thi Do Android có sẵn chức đọc từ thành tiếng, phần mềm bạn đọc to câu hỏi ôn tập Để dùng App Inventor, bạn không thiết lập trình viên Thay viết câu lệnh, bạn thiết kế mặt ứng dụng theo ý cách trực quan lắp ráp thẻ lệnh để diễn đạt chức phần mềm App Inventor có sẵn đủ loại thẻ lệnh giúp bạn làm việc với điện thoại Android: thẻ lưu giữ thông tin, thẻ lặp lại thao tác nhiều lần, thẻ thực thao tác với điều kiện định trước Thậm chí có thẻ lệnh giúp bạn liên lạc với dịch vụ mạng Twitter App Inventor dễ dùng mạnh mẽ Phần mềm ứng dụng bạn lưu trữ liệu người dùng tạo sở liệu.Bạn tạo loại ứng dụng giáo viên lưu trữ nhiều câu hỏi để tự động tạo nên đề thi Vì App Inventor cho phép truy xuất định vị GPS, bạn tạo ứng dụng phụ thuộc vị trí bạn Bạn tạo ứng dụng giúp bạn ghi nhớ vị trí đậu xe mình, ứng dụng hiển thị vị trí bạn bè buổi trình diễn ca nhạc, hiển thị vị trí đồng nghiệp hội thảo ứng dụng hướng dẫn lại trường học, quan, ứng dụng hướng dẫn tham quan viện bảo tàng Bạn tạo ứng dụng tự động gửi tin nhắn cho người thân yêu, tự động trả lời tin nhắn với nội dung "Xin lỗi, lái xe Tôi gọi lại sau".Bạn tạo ứng dụng có chức đọc to tin nhắn cho bạn Chúng tạo App Inventor thấy có thay đổi cách thức người sử dụng thiết bị di động Các loại điện thoại thông minh nay, có điện thoại Android iPhone, thiết bị truy cập internet hoàn chỉnh Do việc sử dụng web di động thoải mái trước nhiều, muốn giúp người có điều kiện tự tạo ứng dụng dịch vụ di động, dù chưa có kiến thức lập trình App Inventor giúp thử nghiệm điều Trong lĩnh vực giáo dục, App Inventor công cụ mạnh mẽ cho phép giáo viên hướng dẫn học sinh làm quen với việc lập trình, giúp học sinh trở thành người sáng tạo công nghệ, thay người thụ hưởng công nghệ" App Inventor thực chất ứng dụng web, chạy trình duyệt máy tính cá nhân.Nhóm dự án App Inventor hoạt động đạo tiến sĩ Harold Abelson thuộc Học viện Kỹ thuật Massachusetts (Massachusetts Institute of Technology - MIT) MIT nơi khai sinh phương pháp dạy lập trình phi truyền thống dựa vào phần mềm có tính đột phá Logo (thập niên 1960) Scratch Mã nguồn App Inventor có liên mật thiết với mã nguồn công cụ lập trình Scratch dành cho trẻ em NHOM 1: PHAM THE ANH, LUONG THI HUE BÁO CÁO CHUYÊN ĐỀ: CÔNG NGHỆ PHẦN MÊM Gian triển lãm ứng dụng di động sinh viên Đại học San Francisco tham dự lớp huấn luyện App Inventor Một sinh viên Đại học San Francisco tham gia lớp huấn luyện App Inventor tạo ứng dụng cho phép gửi tin nhắn đồng thời theo hai kênh: tin nhắn SMS thông thường tin nhắn Twitter Một nữ sinh viên ngành điều dưỡng Đại học Indiana dùng App Inventor để tạo nên ứng dụng "cấp cứu", có khả tự khởi động người dùng điện thoại bị ngã Nếu người dùng không bấm nút Cancel hình không đứng dậy sau thời gian định, ứng dụng tự động gửi tin nhắn đến người thân định trước để thông báo nơi bị ngã Abelson giải thích: "Việc tạo ứng dụng thực điều tài tình.Mọi người bình thường làm việc tương tự vài phút" Ứng dụng trả lời tin nhắn tự động lái xe tạo cụm thẻ lệnh đơn giản NHOM 1: PHAM THE ANH, LUONG THI HUE BÁO CÁO CHUYÊN ĐỀ: CÔNG NGHỆ PHẦN MÊM Ứng dụng "cấp cứu" tự động chạy người dùng té ngã Những người hâm mộ Apple cho App Inventor phương tiện chiến thuật Google nhằm công kích tính đóng kín điện thoại iPhone Dường điện thoại Android dự định dựa vào số lượng áp đảo ứng dụng đơn giản để cạnh tranh với chất lượng ứng dụng chuyên nghiệp iPhone Tuy nhiên, mục tiêu công nghệ mục tiêu xã hội nhóm dự án App Inventor không hạn hẹp Vai trò "máy tính" điện thoại thông minh ngày rõ nét Nhu cầu "cá nhân hóa" điện thoại thông minh lại cao nhiều so với máy tính cá nhân thông thường diện cảm ứng thể tình trạng người dùng cách chi tiết App Inventor mở rộng cánh cửa cho khả Đó nỗ lực đáng trân trọng NHOM 1: PHAM THE ANH, LUONG THI HUE BÁO CÁO CHUYÊN ĐỀ: CÔNG NGHỆ PHẦN MÊM CHƯƠNG 2: GIỚI THIỆU VỀ CHỨC NĂNG CỦA APP INVENTOR 2 Các tool chức - Button (nút nhấn) thành phần mà người dùng chạm vào để thực hành động bên ứng dụng - Laybel(nhãn) thành phần dùng để hiển thị văn - TextBox (ô nhập liệu) - ListView ( xem danh sách) - DatePicker TimePicker ( ngày hệ thống ứng dụng) - CheckBox (ô lựa chọn) - Password TextBox (ô nhập mật khẩu) - Image (hình ảnh) cho phép tạo thời gian để kiện xảy - Notifier thành phần dùng để hiển thị thông báo, cảnh báo tới người sử dụng ghi lại nhật ký để người dùng dễ dàng chỉnh sửa chức ứng dụng - Screen (màn hình) thành phần mặc định tạo dự án, thêm hình khác - HorizontalArrangement (vùng xếp theo chiều ngang) dùng để hiển thị nhóm thành phần bố trí theo chiều từ trái sang phải - TableArrangement (vùng xếp theo bảng biểu) dùng để hiển thị nhóm thành phần bố trí theo kiểu bảng biểu - VerticalArrangement (vùng xếp theo chiều dọc) dùng để hiển thị nhóm thành phần bố trí theo chiều tử xuống - Player (chương trình phat nhạc) dùng để mở tập tin âm phim có thời lượng dài dùng để bật chức rung thiết bị - Sound (chương trình phát nhạc) dùng để mở tập tin âm phim có thười lượng ngắn dùng để bật chức rung thiết bị - TinyDB (cơ sở liệu) thành phần dùng để lưu trữ liệu, có tác dụng ứng dụng mở - TinyWebDB (cơ sở liệu web) thành phần dùng để lưu trữ liệu web, có tác dụng web dù ứng dụng không mở NHOM 1: PHAM THE ANH, LUONG THI HUE BÁO CÁO CHUYÊN ĐỀ: CÔNG NGHỆ PHẦN MÊM - Canvas thành phần dùng lập trình game, thiết kế thành phần di chuyển va chạm - Bluetooth thành phần cho phép xây dựng ứng dụng với bluetooth - Web thành phần xây dựng liên kết ứng dụng với web - GPS thành phần xây dựng ứng dụng với GPS - PhoneCall PhoneNumberPicker thành phần xây dựng ứng dụng với gọi - Twitter Sharing thành phần xây dựng ứng dụng với mạng xã hội - EmailPicker thành phần xây dựng ứng dụng với hộp thư điện tử Và nhiều thành phần khác như: VideoPlayer, Camcorder, Camera, SpeechRecognizer, ImagePicker, SoundRecoder, GyroscopeSensor, BarcodeScanner, LocationSensor, OrientationSensor, NearField, AccelerometerSensor, ProximitySensor, FirebaseDB CHƯƠNG 3: ÁP DỤNG APP INVENTOR VÀO ỨNG DỤNG CỦA BẢN THÂN NHOM 1: PHAM THE ANH, LUONG THI HUE BÁO CÁO CHUYÊN ĐỀ: CÔNG NGHỆ PHẦN MÊM Các thành phần sử dụng thân App Inventor 2: - Screen: với lệnh When Screen Initialize, When Screen BackPresed - Button: với lệnh ButtonClick - TextBox: với lệnh get, set - Laybel: với lệnh get, set - Image: với lệnh get, set, hind - HorizontalArrangement - DatePicker Time Picker - ListView: với lệnh get, set - Notifier: Với lệnh call, get, set - PaswordTextBox: Với lệnh get, set - TinyDB: với lệnh call, get, set NHOM 1: PHAM THE ANH, LUONG THI HUE 10 BÁO CÁO CHUYÊN ĐỀ: CÔNG NGHỆ PHẦN MÊM 4.9.5 Giao diện kế hoạch chi tiêu: NHẮC NHỞ CHI TIÊU CHỌN THỜI GIAN NHẮC NHỞ Ngày Tháng Năm Nhập lí nhắc nhở Lưu nhắc nhở Xem nhắc nhở NHOM 1: PHAM THE ANH, LUONG THI HUE 30 BÁO CÁO CHUYÊN ĐỀ: CÔNG NGHỆ PHẦN MÊM 4.9.6 Giao diện “Thông báo” Thông báo Bạn có muốn thoát khỏi ứng dụng không? Có Không Thông báo Bạn có muốn xóa số tiền tiêu không? Có Không CHƯƠNG 5: XÂY DỰNG Xây dựng ứng dụng “Ví điện tử” 5.1 Screen1: Đăng nhập - Ở screen chung ta sử dụng:      Laybel: Loi_ chao, mat_khau, nguoi_dung, laybel_nhac_nho, tac_gia textbox: nhap_nguoi_dung PasswordTextBox: nhap_mat_khau Button: dang_nhap, thoat_ung_dung Notifier: Thongbao - Được thiết kế sau: NHOM 1: PHAM THE ANH, LUONG THI HUE 31 BÁO CÁO CHUYÊN ĐỀ: CÔNG NGHỆ PHẦN MÊM Đầu tiên ta xử lý kiện người dùng click vào button dang_nhap Khi tên người dùng mật “admin” ứng dụng gọi tới screen 2, không thông báo nhập lại laybel_nhac_nho xóa giữ liệu sai vừa nhập Sau ta xử lý kiện người dùng click vào button thoat_ung_dung người dùng ấn nút back điện thoại android Lúc có thông báo nhắc nhở notifier tạo yêu cầu người dùng chọn “có” hay “không” Nếu người dùng chọn “có” ứng dụng thoát NHOM 1: PHAM THE ANH, LUONG THI HUE 32 BÁO CÁO CHUYÊN ĐỀ: CÔNG NGHỆ PHẦN MÊM 5.2 Screen2: Tính toán, lưu trữ, nhắc nhở - Để xây dựng screen ta cần:         Laybel: von, tien_von, tieutien, tien_tieu, canhbao, nhap_tien, nhap_lido, lich_su_chi_tieu Image: hinhcanhbao TextBox: tien_nhap, lido Button: them_tien, tieu_tien, xoa_tien_tieu, xoa_lich_su, Thoat_ung_dung DatePicker 1TimePicker: Ngay_chi_tieu, Gio_chi_tieu ListView: Danh_sach_lich_su Notifier: canh_bao_xoa_lich_su, thongbao, canh_bao_xoa_tieu TinyDB: du_lieu - Được thiết kế sau: NHOM 1: PHAM THE ANH, LUONG THI HUE 33 BÁO CÁO CHUYÊN ĐỀ: CÔNG NGHỆ PHẦN MÊM Đầu tiên ta xử lý kiện Screen khởi động Lúc Laybel tien_von tien_tieu lấy hiển thị giá trị từ TinyDB Du_lieu với tag tienco tientieu Sau giá trị tag lichsu rỗng sẽ: cho listview danh_sach_lich_su hiển thị list lưu tag lichsu, cuối cho list hành với tên global name lấy giá trị từ tag lich su (mục đích để người dùng chi tiêu lưu tiếp xuống list thay ghi đè liệu) NHOM 1: PHAM THE ANH, LUONG THI HUE 34 BÁO CÁO CHUYÊN ĐỀ: CÔNG NGHỆ PHẦN MÊM Tiếp ta xử lý kiện Button them_tien click: Ta cho Laybel tien_von lấy giá trị giá trị trước cộng với giá trị vừa nhập TextBox Tiếp lưu lại giá trị Laybel tien_von vào csdl TinyDB Du_lieu với tag tienco Sau đưa cảnh báo hình cảnh báo Tiếp theo lưu lại hiển thị list lichsu, cho chiều cao listview tăng lên 90 pixel NHOM 1: PHAM THE ANH, LUONG THI HUE 35 BÁO CÁO CHUYÊN ĐỀ: CÔNG NGHỆ PHẦN MÊM Làm tương tự người dùng click vào Button tieu_tien cộng thêm tiền cho laybel tien_tieu trừ tiền cho laybel tien_von NHOM 1: PHAM THE ANH, LUONG THI HUE 36 BÁO CÁO CHUYÊN ĐỀ: CÔNG NGHỆ PHẦN MÊM NHOM 1: PHAM THE ANH, LUONG THI HUE 37 BÁO CÁO CHUYÊN ĐỀ: CÔNG NGHỆ PHẦN MÊM Tiếp theo xử lý kiện người dùng click vào Button Thoat_ung_dung người dùng ấn nút back điện thoại giống với cách xử lý Screen1 Tiếp theo xử lý kiện người dùng click vào Button xoa_lich_su_chi_tieu xoa_tien_tieu tương tự thông báo đưa bên trên, nhiên việc xóa tiền tiêu đưa giá trị tiền tiêu vê 0, xóa lịch sử việc đưa list NHOM 1: PHAM THE ANH, LUONG THI HUE 38 BÁO CÁO CHUYÊN ĐỀ: CÔNG NGHỆ PHẦN MÊM global TinyDB lichsu empty chiều cao listview trạng thái NHOM 1: PHAM THE ANH, LUONG THI HUE 39 BÁO CÁO CHUYÊN ĐỀ: CÔNG NGHỆ PHẦN MÊM 5.3 Form lịch sử chi tiêu Ở form ta sử dụng thêm listview để show giá trị list lịch sử chi tiêu NHOM 1: PHAM THE ANH, LUONG THI HUE 40 BÁO CÁO CHUYÊN ĐỀ: CÔNG NGHỆ PHẦN MÊM 5.4 Form thống kê Ở form ta gọi sở liệu lưu tính toán khoản thống kê cho thu nhập chi phí NHOM 1: PHAM THE ANH, LUONG THI HUE 41 BÁO CÁO CHUYÊN ĐỀ: CÔNG NGHỆ PHẦN MÊM 5.5 Form kế hoạch chi tiêu Ở lưu vào sở liệu người dùng nhập/chọn ngày tháng năm lí Form đăng nhập ban đầu xuất người dùng vào phần mềm đưa thống báo ngày hôm trùng với ngày họ lựa chọn nhắc nhở Và ứng dụng vào hoạt động ta buid file apk NHOM 1: PHAM THE ANH, LUONG THI HUE 42 BÁO CÁO CHUYÊN ĐỀ: CÔNG NGHỆ PHẦN MÊM • Tài liệu tham khảo: http://echip.com.vn/google-app-inventor -canh-cua-mo-ronga20130415171158143-c1107.html https://www.youtube.com/watch?v=DaeQDWIXiyA • Kết luận: Sau thời gian tìm hiểu cố gắng xây dựng ứng dụng “Ví điện tử” chúng em nhận thấy App Inventor công cụ hỗ trợ lập trình tốt, giúp chúng em dễ dàng phát triển ứng dụng hơn, qua chúng em hiểu hàm mà trước chúng em chưa nắm vững Trong trình xây dựng ứng dụng giúp chúng em thành thạo việc phân tích thiết kế hệ thống phần mềm, rèn luyện kỹ cho báo cáo Và môn Chuyên đề công nghệ phần mềm giúp chúng em tự tạo cho ứng dụng, dù chưa thật hoàn hảo đáp ứng điều mà chúng em hướng tới Và để xây dựng ứng dụng thực thành công quan trọng ý tưởng, thời gian với miệt mài đam mê NHOM 1: PHAM THE ANH, LUONG THI HUE 43