Đề tài xây dựng ứng dụng chỉnh sửa ảnh

Nhóm được thành lập nhằm phát triển một ứng dụng chỉnh sửa ảnh có đầy đủ các công cụ cơ bản hoạt động trên nền tảng android 4.0 trở nên.. Đối với người sử dụng Để sử dụng ứng dụng chỉnh

Xây dựng phần mềm

Đề tài: Xây dựng ứng dụng

chỉnh sửa ảnh

Thực hiện bởi:

Trần Minh Hải - 20161327 (trưởng nhóm)

Bế Trần Văn - 20164603

I Giới thiệu về nhóm………3-5

1 Giới thiệu chung……… 4

2 Mục tiêu, khó khăn và cách tiếp cận………4

3 Cách thức hoạt động……….4-5 a) Cách lam việc của cả nhóm……….4

b) Cách làm việc của mỗi thành viên……… 4-5 c) Phân chia công việc cụ thể……… 5

d) Báo cáo tiến độ công việc theo tuần……… 5

4 Những gì học được sau dự án……… 5

5 Kết quả làm việc và đánh giá………5

II Hướng dẫn sử dụng………6-16 1 Đối với người sử dụng……… 6-8 2 Đối với người phát triển………8-16 a) Thiết kế hệ thống……… 9

b) Thiết kế giao diện………9-11 i Phác thảo logo bằng công cụ vẽ trên máy tính…………9-10 ii Thiết kế giao diện trong android studio……… 10-11 iii Sử dụng resources……… 11

c) Lập trình cho hệ thống……… 12-15 i Các class có trong hệ thống……… 12-14 ii Các bẫy lỗi đã sử dụng……… 15

d) Đánh giá……….15

e) Định hướng phát triển……… 15-16 III Thảo luận………16-17 IV Kết luận……… 17

Lời mở đầu

Chụp ảnh là nhu cầu cần thiết trong cuộc sống hiện nay Để có một bức ảnh đẹp, ghi lại những khoảnh khắc đáng nhớ, không thể thiếu ứng dụng chỉnh sửa ảnh

Chính vì điều này, nhóm V_CH group đã quyết định làm một ứng dụng chỉnh sửa ảnh có tính cạnh tranh Ứng dụng này cần đảm bảo yếu tố: đủ một số công cụ cơ bản như chỉnh sửa màu sắc, tốc độ nhanh và dung lượng thấp Từ đó, ứng dụng có thể được sự tin tưởng của người dùng

Sau hơn 3 tháng triển khai, nhóm V_CH group đã 1 phần hoàn thành được những chỉ tiêu trên

Chúng em xin phép được cảm ơn thầy Vũ Hải, người hướng dẫn chính trong khi chúng em thực hiện dự án này

Trưởng nhóm V_CH group,

Trần Minh Hải

I Giới thiệu về nhóm

1.Giới thiệu chung

Nhóm có tên VCH_Group, với VCH lấy theo ba chữ cái đầu tronng tên của ba thành viên ban đầu của nhóm gồm Văn , Hải và Cường Nhóm được thành lập nhằm phát triển một ứng dụng chỉnh sửa ảnh có đầy đủ các công cụ cơ bản hoạt động trên nền tảng android 4.0 trở nên Hiện tại

vì nhiều nguyên nhân khách quan VCH_Group có hai thành viên hoạt động thường xuyên gồm:

- Trần Minh Hải (trưởng nhóm)

- Bế Trần Văn Ngoài ra, không thể không kể đến sự hỗ trợ đắc lực, cùng với những lời nhận xét thẳng thắn và khách quan đến từ thầy Vũ Hải cùng với tập thể các bạn trong lớp CLC_THCN K61

2.Mục tiêu, khó khăn và cách tiếp cận

 Mục tiêu khi bắt đầu dự án:

 Ra được ứng dụng chỉnh sửa ảnh trên điện thoại với các công cụ cơ bản

 Các thành viên cùng thực hiện dự án, hiểu về dự án

và có khả năng thuyết trình về công việc của mình khi dự án kết thúc

 Ứng dụng có tốc độ nhanh và dung lượng nhẹ

 Khó khăn:

 Chuyên môn của từng thành viên chưa đồng đều, chưa sử dụng phần mềm android studio thành thục

 Kỹ năng làm việc nhóm còn kém

 Chưa có kinh nghiệm thiết kế app trên nền tảng di động

 Thời gian làm việc hạn chế

 Cách tiếp cận:

 Mô hình thác nước

 Chuyên môn hóa từng thành viên

3.Cách thức hoạt động

a Cách làm việc của cả nhóm

 Phân chia công việc ngay sau khi báo cáo vào buổi chiều thứ 6 hàng tuần

 Họp online qua facebook cùng nhau giải quyết những khó khăn

b Cách àm việc của mỗi thành viên

 Nhận công việc phù hợp với khả năng cá nhân

 Có trách nhiệm với công việc của bản thân, giúp đỡ các thành viên khác nếu có thể

 Mỗi thành viên là một người giám sát với các thành viên khác trong nhóm

c Phân chia công việc cụ thể

 Trần Minh Hải: Hoàn thành các công cụ cơ bản cho app chỉnh sửa ảnh, là thư kí của nhóm

 Bế Trần Văn: Thiết kế và tạo thành giao diện cho app Tạo và quản lí blog để phân chia công việc cho mỗi cá nhân theo từng tuần

d.Báo cáo tiến độ theo tuần

4.Những gì học được sau dự án

 Làm việc:

- Cách làm việc nhóm: Phân chia công việc

- Vai trò của làm việc có chiến lược(thác nước)

- Tạo và quản lí blogger

 Thuyết trình và viết báo cáo đồ án

 Kĩ thuật:

- Làm việc trên android studio: biết cách thiết kế user interface và lập trình java cho một ứng dụng

- Xây dựng một ứng dụng dễ đọc cho người phát triển sau(resources)

5.Kết quả làm được và đánh giá

Nhóm đã phát triển thành công ứng dụng chỉnh sửa ảnh trên nền tảng android phù hợp với tiêu chí ứng dụng nhanh và gọn Mặc dù ứng dụng chỉ mới có công cụ filter color ảnh do hạn chế về mặt thời gian cũng như

có sự biến động trong số lượng thành viên nhóm, nhưng đây cũng là thành công bước đầu và là nền tảng vững chắc để nhóm tiếp tục phát triển ứng dụng này , cũng như các ứng dụng khác trên nền tảng android trong tương lai

Định hướng phát triển ứng dụng:

- Thêm công cụ crop, add text, emoji…

- Hoàn thiện chức năng load ảnh

- Hoàn thiện chức năng cài đặt

II Hướng dẫn sử dụng

1 Đối với người sử dụng

Để sử dụng ứng dụng chỉnh sửa ảnh này, người sử dụng cần cung cấp cho chúng tôi quyền truy cập vào bộ nhớ của thiết bị

Ứng dụng chỉnh sửa ảnh gồm 3 hoạt động chính:

 Phần mở đầu ứng dụng:

Trong hoạt động này, người sử dụng có 2 lựa chọn như sau:

 Nhấn vào hình ảnh đại diện lớn của nhóm ở giữa màn hình để

đi tới hoạt động tải bức ảnh lên chính sửa

 Nhấn vào dòng chữ:”For more information about us”, 1 hộp tin nhắn sẽ hiện lên như sau:”If you keep this action, the editor application will be paused” Tới đây, người dùng sẽ có 2 lựa chọn Nếu ấn cancel, thì người dùng sẽ trở lại màn hình mở đầu của ứng dụng Nếu ấn OK, người dùng sẽ di chuyển tới blogger của nhóm

 Màn hình tải bức ảnh để chỉnh sửa:

Trong hoạt động này, người dùng sẽ nhìn thấy một bức ảnh lớn ở chính giữa với dòng chữ:”Chọn ảnh đi” Người dùng ấn vào bức ảnh này, sẽ có một hộp tin nhắn hiện lên, yêu cầu người dùng sử dụng thực hiện thao tác chọn gallery Cuối cùng người dùng chọn 1 bức ảnh

 Màn hình chỉnh sửa ảnh:

Trong hoạt động chỉnh sửa ảnh, chúng tôi có cung cấp 17 các mẫu lọc màu cho bức ảnh: Normal, Struck, Clarendon, OldMan, Mars, Rise, April, Amazon, Starlit, Whisper, Lime, Haan, BlueMess, Adele, Cruz, Metropolis, Audrey Sau khi chọn 1 trong các lọc màu sắc trên, người dùng có thể lưu trữ lại bức ảnh bằng cách ấn vào nút SAVE bên góc phải trên cùng (Người dùng cần chú ý, bức ảnh sẽ được lưu trữ vào chính bức ảnh ban đầu) Nếu bức ảnh có thể save được, sẽ có 1 dòng chữ hiện lên ở phía cuối màn hình:”Image saved to gallery” Bên cạnh dòng chữ này, có 1 chữ OPEN màu đỏ Nhấn vào nút này để đi tới gallery, nơi bức ảnh vừa sửa được lưu trữ Nếu bức ảnh không thể lưu trữ, sẽ có một dòng chữ hiện lên ở phía cuối màn hình là:”Unable to save image!”

Sau đó, người dùng có thể tiếp tục hoạt động chỉnh sửa ảnh bằng cách

ấn vào bức ảnh to ở chính giữa màn hình để load 1 bức ảnh khác

2 Đối với người phát triển

Ứng dụng chỉnh sửa ảnh do V_CH group xây dựng và phát triển trên nền tảng phần mềm Android Studio Ngôn ngữ sử dụng là JAVA Chính vì vậy người phát triển cần cài đặt phần mềm Android Studio trên máy tính của mình Link tải phần mềm này được đính kèm sau đây: https://developer.android.com/studio Sau đó, cần tải và cài đặt JDK trên máy tính từ trang web sau:

https://www.oracle.com/technetwork/java/javase/downloads/index.h tml Về phần thiết bị để chạy ứng dụng, người dùng có 2 lựa chọn Lựa chọn 1 là sử dụng Virtual device Để cài đặt Virtual device, người phát triền có thể tham khảo cách cài đặt sau đây:

https://www.youtube.com/watch?v=Wx4KWPZhSHc Lựa chọn 2 là sử dụng thiết bị di động của chính người phát triển Người phát triển lựa chọn cách này thì có thể tham khảo link dưới đây:

https://www.youtube.com/watch?v=p2oHD-06YcM

Mỗi ứng dụng android đều gồm 2 phần chính: user interface hay

UI (được hiển thị bằng file.xml) và code cho từng user interface Trong ứng dụng chỉnh sửa ảnh này, chúng tôi sử dụng ngôn ngữ JAVA Chính vì vậy, để có thể hiểu được phần lập trình cho ứng dụng này, người đọc cần có những hiểu biết cơ bản về ngôn ngữ lập trình JAVA và ngôn ngữ xml

Về ngôn ngữ xml cho thiết kế giao diện, chúng tôi tham khảo

https://www.tutorialspoint.com/android/index.htm

Về ngôn ngữ JAVA, người phát triển có thể đọc qua sách: Beginning Android® Programming with Android Studio 4th Edition (J.F.DiMarzio)

Để lập trình và thiết kế cho hệ thống này, cần thêm vào

implementation 'com.android.support:recyclerview-v7:28.0.0' implementation 'com.android.support:design:28.0.0'

implementation 'com.karumi:dexter:4.1.0' implementation 'info.androidhive:imagefilters:1.0.7' Imagefilter, được chỉnh sửa từ thư viện AndroidHive, trong ứng dụng này, được sử dụng để sử dụng các công cụ color filters

Dexter dùng để request runtime permission và tải ảnh, lưu ảnh

dễ dàng hơn a) Thiết kế hệ thống

b) Thiết kế giao diện

i Phác thảo logo bằng công cụ vẽ trên máy tính Logo của app và nhóm:

ii Thiết kế giao diện trong android studio

 Các view được sử dụng trong app:

- TextView: nhiệm vụ chính của TextView là hiển thị dòng văn bản trên màn hình dung nhằm cung cấp thông tin cho người dùng Người lập trình cũng có thể thay đổi nội dung dòng văn bản này bằng cách sử dụng câu lệnh android:text= “information”

- ImageView: là view dùng để hiện thị hình ảnh lên màn hình sử dụng Các hình ảnh này có thể là tài nguyên lưu trữ trong app hay các hình ảnh tải xuống

từ bộ nhớ máy hay internet

- Button: button tiếp nhận hành động click của người dùng và thực hiện một thao tác đã được lập trình từ trước đó

- Các View Group: Recyclerview, Toolbar, LinearLayout, ConstraintLayout, RelativeLayout, CoordinatorLayout

 Layout: Các layout chính là các View (cụ thể nó kế thừa thừa ViewGroup) được thiết kế với mục đích chứa các View con và điều khiển, sắp xếp vị trí các View con đó trên màn hình, mỗi layout có cơ chế điều khiển vị trí View con riêng của mình Các layout đã được thiết kế trong app:

Activity_starting.xml: là một ConstraintLayout cho

cách dàng buộc đơn giản vào mỗi view con Trong activity_starting.xml chúng tôi thiết kế 2 view con là textview và imageview Textview này dùng để hiển thị dòng văn bản: “for more information about us” Imageview này dùng để hiển thị logo của app

- Activity_loading.xml: là một CoordinatorLayout nó được thiết kế nhằm mục đích có sự tương tác của các view con trong nó Trong activity_loading.xml có chứa 2 layout con là appbarlayout và layout_content Trong appbarlayout sử dụng toolbar có chứa 2 button và một textview, một button với chức năng điều hướng button còn lại thực hiện chức năng save ảnh, textview hiển thị dòng văn bản VCH_Filter

- Layout_content.xml: là một RelativeLayout cho phép sắp xếp các view con ở bất cứ vị trí nào mà người thiết kế muốn Như đã nói ở trên lay_content

là layout con của activity_loading.xml trong đó nó

có chứa 3 view con là imageview, NonSwipeableViewPager và tablayout

- Fragment_filter_list.xml: là một FrameLayout nó cung cấp một vùng màn hình và hiển thị một view con duy nhất là Recyclerview Recyclerview này hiển thị một tập các item gồm các màu sắc khác nhau khi lọc ảnh Nó cho phép thao tác scroll màn hình theo chiều ngang

 Thumbnail_item.xml: là một LinearLayout cho phép các view con sắp xếp nối tiếp nhau theo cột Nó gồm

2 view con là textview dùng để hiển thị dòng text:

“filter name” và một imageview

iii Sử dụng values trong resources Việc sử dụng Values trong thiết kế giao diện của ứng dụng là tất yếu Việc sử dụng Resources làm cho việc thiết kế trở nên rõ ràng hơn cho người phát triển Chính vì vậy, để có một phần thiết

kế hoàn chỉnh, người thiết kế cần sử dụng cả 3 mục: colors, strings, styles Các màu sắc, dòng chữ và các styles dùng trong thiết kế cần lưu trữ trong các mục cùng tên Chẳng hạn, trong dự

án này có dòng chữ:”For more information about us”, cần lưu trữ vào trong mục Strings, để người phát triển sau có thể nắm rõ được các dòng chữ hiển thị trên giao diện của người dùng

c) Lập trình cho hệ thống

i Các class có trong hệ thống

Hệ thống được xây dựng bởi 2 lớp chính:

 Starting Activity: Trong lớp này xử lý 2 nút là

startingButton và informationButton Núi startingButton

sử dụng Intent để dẫn sang LoadingActivity Nút informationButton, cũng sử dụng Intent, chuyển người dùng đến blogger của nhóm Bên cạnh đó, sau khi người dùng nhấn vào nút informationButton này, sẽ có 1 dòng gạch chân dưới dòng chữ “For more information about us” Để thực hiện điều này, chúng tôi sử dụng 1 phương thúc của TextView là setPaintFlags Thêm nữa, cũng trong informationButton, AlertDialog.Builder được thêm vào, nhằm mục đích mở ra 1 tin nhắn cho người dùng: nếu tiếp tục sẽ dừng lại ứng dụng Khi đoạn nhắn hiện lên, để có 2

sự lựa chọn là “OK” hoặc “Cancel” cho người sử dụng, cần dùng lần lượt đến setPositiveButton và setNegativeButton của AlertDialog.Builder Cuối cùng, tạo AlertDialog và dùng hàm show() của AlertDialog để hiện thị hộp thoại

 Loading Activity: đây là nơi chúng tôi đã xử lý phần tải

bức ảnh để chỉnh sửa, chỉnh sửa bức ảnh và lưu trữ lại bức ảnh sau khi chỉnh sửa

- Tải bức ảnh lên để chỉnh sửa: Chúng tôi không sử dụng

cách thông thường là dùng button để tải bức ảnh lên, thay vào đó, chúng tôi sử dụng “ImageView” Để truyền bức ảnh với dòng chữ: “Chọn ảnh đi” (loading_image) vào ImageView, chúng tôi viết hàm loadImage() Trong hàm này, tôi sử dụng 3 thuộc tính kiểu trả về Bitmap: originalBitmap, filterBitmap, finalBitmap Thuộc tính giá trị của originalBitmap (để tránh trường hợp bức loading_image không bị crash trong quá trình tải lên, chúng tôi có viết lớp BitmapUtils với phương thức getBitmapFromAssets và Asset là nơi chứa bức loading_image Phương thức này cho phép lấy bức ảnh, rồi crop nó theo độ dài và độ rộng cho trước) sẽ được truyền vào thuộc tính img_preview, được sử dụng như 1 nút để tải bức ảnh 2 thuộc tính kiểu trả về Bitmap còn lại được dùng trong trường hợp người dùng lưu trữ chính loading_image Khi đó, sẽ không có lỗi xảy ra

Sau khi truyền được bức ảnh loading_image vào img_preview, chúng tôi tiến tới truyền khả năng tải ảnh vào img_preview Các hàm cần viết thêm BitmapUtils (sử dụng phương thức getBitmapFromGallery) Trong lớp LoadingActivity, có 1 phương thức là loadImage Đây là phương thức xử lí “onClick” của image_preview trong layout_content.xml Để load được ảnh, cần phương thức

dụng thư viện Dexter để dễ dàng tải ảnh lên Để có thể tải ảnh lên, cần quyền truy cập vào bộ nhớ của thiết bị:

WRITE_EXTERNAL_STORAGE Nếu người dùng không cấp quyền truy cập, 1 dòng text, nội dung là Permission, được hiện lên nhờ sử dụng Toast.makeText Ngược lại, Intent sẽ giúp chúng ta tải bức ảnh lên và chúng ta sử dụng startActivityForResult Sau đó, tại phương thức onActivityResult, các originalBitmap, filterBitmap, finalBitmap, sẽ cập nhật bitmap của bức ảnh vừa được tải

và cuối cùng, img_preview nhận bức ảnh này: img_preview.setImageBitmap(originalBitmap) trước khi các bức ảnh con ở filter màu sắc dưới cũng đồng loạt update lại bức ảnh này

- Chỉnh sửa bức ảnh: phục vụ cho chỉnh sửa ảnh, chúng tôi

đã viết interface: FilterListFragmentListener và các lớp:

FilterListFragment ViewPageAdapter chúng tôi đã giới thiệu ở mục b) thiết kế giao diện cho hệ thống Tại lớp FilterListFragment, phương thức setListener sử dụng phương thức trong interface FilterListFragmentListener để tạo default cho filter màu sắc, ngay sau khi người dùng vào hoạt động chỉnh sửa ảnh Bên cạnh đó, phương thức onCreateView được tạo Khi biến kiểu trả về FilterListFragment được tạo ở LoadingActivity (setupViewPager), onCreateView được chạy, truyền các filter màu sắc của thư viện AndroidHive với sự hỗ trợ của phương thức DisplayThumbnail trong cùng lớp và của lớp ThumbnailAdapter Sau đó, bức ảnh vừa được tải lên sẽ được truyền vào các ảnh con của các filter này Nếu như bức ảnh được tải lên có giá trị Bitmap là null thì loading_image sẽ được thay thế

Trong lớp LoadingActivity, tại phương thức onFilterSelected, khi 1 filter màu sắc được chọn, thuộc tính filterBitmap sẽ thay đổi màu sắc: filterBitmap= originalBitmap.copy(Bitmap.Config.ARGB_8888, true) và img_preview và finalBitmap sẽ cập nhật sự thay đổi này

- Lưu trữ bức ảnh: Chúng tôi thực hiện việc lưu trữ bức

ảnh nhờ vào thư viện Dexter Trước đó, chúng tôi cũng có yêu cầu người dùng cho các quyền đọc và viết vào bộ nhớ của thiết bị:

Dexter.withActivity(this) .withPermissions(Manifest.permission.READ_E XTERNAL_STORAGE,

Manifest.permission.WRITE_EXTERNAL_STORAGE)