Báo cáo Đồ Án tốt nghiệp công nghệ thông tin Đề tài phát triển tính năng tài khoản sinh viên cho app tbd

 Nếu bạn đang tìm kiếm các phương pháp thay thế để phát triển ứng dụngAndroid, bạn nên cân nhắc thử Flutter của Google, một framework dựa trênngôn ngữ lập trình Dart.. Nếu bạnchưa có ki

Nội dung và các yêu cầu cần giải quyết trong nhiệm vụ đề tài tốt nghiệp

- Tìm hiểu về Flutter, cài đặt, biên dịch hệ thống

- Tìm hiểu về App “open day” , viết ứng dụng đọc website trên di động, và biên dịch hệ thống lên các thiết bị Android và iOS Đề tài : phát triển tính năng tài khoản sinh viên cho app TBD

Các tài liệu, số liệu, thiết bị cần thiết

- Sách Flutter Fast: 65 Example Apps

- Khóa học Flutter cơ bản của Cafedev

- Thiết bị: o Máy tính chạy hệ điều hành Windows o Điện thoại di động chạy hệ hiều hành Android và ios

TỔNG QUAN

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

Tại sao App OPEN DAY chọn Flutter mà không phải là ngôn ngữ khác?

 Nếu bạn đang tìm kiếm các phương pháp thay thế để phát triển ứng dụng Android, bạn nên cân nhắc thử Flutter của Google, một framework dựa trên ngôn ngữ lập trình Dart.

 Các ứng dụng được xây dựng với Flutter hầu như không thể phân biệt với những ứng dụng được xây dựng bằng cách sử dụng Android SDK, cả về giao diện và hiệu suất Hơn nữa, với những tinh chỉnh nhỏ, chúng có thể chạy trên thiết bị iOS.

 Phát triển ứng dụng thống nhất: Flutter có các công cụ và thư viện để giúp bạn dễ dàng đưa ý tưởng của mình vào cuộc sống trên iOS và Android Nếu bạn chưa có kinh nghiệm phát triển trên thiết bị di động, thì Flutter là một cách dễ dàng và nhanh chóng để xây dựng các ứng dụng di động tuyệt đẹp Nếu bạn là một nhà phát triển iOS hoặc Android có kinh nghiệm, bạn có thể sử dụng Flutter cho các View của bạn và tận dụng nhiều code Java / Kotlin / ObjC / Swift hiện có của bạn.

 Framework hiện đại và reactive: Dễ dàng tạo giao diện người dùng của bạn với framework hiện đại, reactive của Flutter và tập hợp các platform, layout và widget phong phú Giải quyết các thách thức giao diện người dùng khó khăn của bạn với các API mạnh mẽ và linh hoạt cho 2D, animation, gesture, hiệu ứng và hơn thế nữa.

 UI đẹp và biểu cảm: Thỏa mãn người dùng của bạn với các widget built-in đẹp mắt của Flutter theo Material Design và Cupertino (iOS-flavor), các API chuyển động phong phú, scroll tự nhiên mượt mà và tự nhận thức được nền

 Người dùng được tạo ra với Flutter thực thi tốt hơn nhiều so với những ứng dụng được tạo ra với các framework phát triển đa nền tảng khác chẳng hạn như React Native và Ionic Một số lí do khiến bạn có thể hứng thú với Flutter: o Flutter sử dụng Dart, một ngôn ngữ nhanh, hướng đối tượng với nhiều tính năng hữu ích như mixin, generic, isolate, và static type. o Flutter có các thành phần UI của riêng nó, cùng với một cơ chế để kết xuất chúng trên nền tảng Android và iOS Hầu hết các thành phần giao diện người dùng, đều sẵn dùng, phù hợp với các nguyên tắc của Material Design. o Các ứng dụng Flutter có thể được phát triển bằng cách4 sử dụng IntelliJ IDEA, một IDE rất giống với Android Studio.

Hiện nay có rất nhiều ngôn ngữ hổ trợ da nền tảng một cái tên lớn phải nhắc đến là React Native Các công ty lớn như UberEats, Discord và Facebook đã chuyển sang React Native – như một phần tất yếu của sự dịch chuyển công nghệ. Nhưng Google cũng không chịu thua Họ đã nhận thấy độ phủ sóng của React Native Sau 2 năm nghe ngóng, Google cho ra mắt phiên bản alpha của Flutter.

Thông thường với lập trình Android bằng Android Studio Mỗi lần chúng ta thay đổi một dòng code thì đều phải build và chạy lại ứng dụng.

Hot reload sẽ giúp chúng ta không phải build lại ứng dụng và chỉ reload lại màn hình đã thay đổi code mà thôi Điều này sẽ tiết kiệm rất nhiều thời gian cho developer.

Ngược với React Native, Flutter không tách biệt data, style, và templates. Mình biết bạn có thể cảm thấy kì lạ nếu như bạn đã quen với React native Tuy nhiên, cách tiếp cận này cũng thuận tiện và được khá nhiều người chấp thuận.

Flutter không cần thêm ngôn ngữ tạo giao diện như JSX hoặc XML hay các công cụ đặc biệt để tạo layout.

Khi sử dụng Flutter, bạn có thể tiết kiệm thời gian khi không cần phải chuyển từ chế độ thiết kế sang code và ngược lại Flutter cho phép bạn làm mọi thứ trong cùng một màn hình Ngoài ra, tất cả các công cụ cần thiết đều có thể truy cập từ cùng một vị trí.

Cài đặt môi trường phát triển:

Flutter được đơn giản hóa quá trình cài đặt Framework này cũng cung cấp một công cụ hữu ích để kiểm tra lỗi hệ thống được gọi là ” Flutter doctor”.

Flutter là kiến trúc cho phép chúng ta xây dựng các ứng dụng native, có hiệu suất nhanh Bởi vì Flutter không cần cầu nối, nó có thể hoạt động nhanh hơn nhiều Do đó, Flutter có thể chạy animation với 60 khung hình /giây.

Mục đích nghiên cứu

- Cũng cố và nắm chắc kiến thức về lập trình di động

- Tạo ra một phần mềm ứng dụng vào thực tế.

- Phương pháp để xây dựng một ứng dụng

- Biết được cách để tiếp cận một ngôn ngữ mới

- Nắm được những kiến thức cơ bản về Android Studio

Phương pháp nghiên cứu

- Thu thập tham khảo các tài liệu trên các trang web

- Tham khảo ý kiến của giảng viên hướng dẫn để hoàn thiện phần mềm

- Xây dựng một phần mềm với công cụ hỗ trợ Flutter và ngôn ngữ Dart

CƠ SỞ LÝ THUYẾT

Flutter

Flutter là một Framework viết trên nền ngôn ngữ Dart Flutter được sinh ra như một Cross-platform framework nhưng khác với những Cross-platform hiện tại, Flutter viết mã và build ra các đoạn mã thực thi tương ứng trên các thiết bị khác nhau thay vì build ra thành các đoạn mã được tối ưu và chạy trên những môi trường trung gian.

Flutter được viết chia làm hai tầng Tầng ở trên sử dụng ngôn ngữ cung cấp các đoạn mã xây dựng lên một ứng dụng Flutter Các đoạn mã này cung cấp phương tiện để có thể thay đổi và chỉnh sửa chúng Từ đó giúp ứng dụng của lập trình viên có thể được tùy chỉnh theo mong muốn Tầng Application này giúp lập trình viên thay đổi mã nguồn ứng dụng ở thời điểm compile time Tầng thứ hai của Flutter nằm ở sâu bên dưới và được viết bằng C++ Tầng Shell này chứa các công tụ trợ giúp ứng dụng Flutter trong quá trình chạy Nổi bật cần lưu ý ở tầng này là máy ảo Dart VM Khái niệm máy ảo là khái niệm về một ứng dụng chạy song song với mã nguồn chính như một phần của ứng dụng.

Flutter là SDK dành cho thiết bị di động của Google để tạo ra các giao diện native chất lượng cao trên iOS và Android trong thời gian ngắn Flutter làm việc với source code có sẵn, được sử dụng bởi các nhà phát triển và các tổ chức trên khắp thế giới, đồng thời nó open-source và miễn phí.

Flutter có các công cụ và thư viện để giúp bạn dễ dàng đưa ý tưởng của mình vào cuộc sống trên iOS và Android Nếu bạn chưa có kinh nghiệm phát triển trên thiết bị di động, thì Flutter là một cách dễ dàng và nhanh chóng để xây dựng các ứng dụng di động tuyệt đẹp Nếu bạn là một nhà phát triển iOS hoặc Android có kinh nghiệm, bạn có thể sử dụng Flutter cho các View của bạn và tận dụng nhiều code Java / Kotlin / ObjC / Swift hiện có của bạn.

Flutter sử dụng Dart, một ngôn ngữ nhanh, hướng đối tượng với nhiều tính năng hữu ích như mixin, generic, isolate, và static type.

Flutter có các thành phần UI của riêng nó, cùng với một cơ chế để kết xuất chúng trên nền tảng Android và iOS Hầu hết các thành phần giao diện người dùng, đều sẵn dùng, phù hợp với các nguyên tắc của Material Design.

2.1.2 Mô hình cấu tạo nên một project Flutter:

Hình 1 Mô hình cấu tạo nên một project Flutter

 Phần lớn nhất chính là: My App

 Bên trong Material App sẽ có các thuộc tính: title, theme, và home Trong đó, tên title có ý nghĩa tương đương với Android @string/app_name để được đặt trong AndroidManifest với thuộc tính application:android: name, hay với iOS là Product Name, hay chí ít là Identity#Display name Tên theme này có vai trò tương tự như phần theme trong values/styles của Android Cuối cùng là home Vai trò của tên này tương ứng với việc bạn định nghĩa Activity

 Scaffold: đóng vai trò như phần nền để bố trí các thành phần khác theo phong các Material Design hay Material Theming Nếu bạn đã quen với việc viết ứng dụng Android theo phong cách mặc định là Google cung cấp thông qua theme Theme.AppCompat hay android:Theme.Material thì bạn không còn lạ gì với Scaffold này Nó tương tự như vậy và giống như là sự tổng hợp của DrawerLayout và CoordinatorLayout vậy.

 AppBar: Nó tương tự như Toolbar hay ActionBar trong Android Sdk và

Support Lib Tuy nhiên, nó không đơn giản như Toolbar hay ActionBar, vì thực sự bạn phải chỉ định Widget con của nó bằng tay, thay vì dùng hàng loạt methods để thực hiện các thao tác đã định sẵn với các Widgets mặc định trong Android như setText hay setNavigationIcon.

 Column và Row: Đây sẽ là những widget quen thuộc đối với các bạn chuyên code Android, vì chúng tương đồng với LinearLayout Trong khi Row tương ứng với LinearLayout với orientation là horizontal, tức chiều ngang, thì Column resemble vertical LinearLayout, tức chiều dọc Còn đối với các bạn chưa thao tác với Android Sdk, thì chúng sẽ sắp xếp tuần tự các widget con theo một hướng ngang từ start sang end đối với Row, hay từ top xuống bottom với Column

 Center: Đây sẽ là một Widget có thể gây cho bạn sự lầm lẫn khá tai hại bởi hành vi của nó có khác khi nó đi một mình hay đi chung với ai đó Nếu nó đi một mình, và parent của nó không đi kèm – hay nói theo kiểu vui của tôi là không có cặp kè – với Widget ngang hàng (với tên parent đó) nào khác và bản thân của nó cũng không “nắm tay” ai, thì kích thước của nó sẽ tăng lên chiếm trọn không gian Còn nếu nó phải đi kèm với ai đó, thì nó sẽ e dè mà điều chỉnh kích thước chỉ vừa đủ bọc con/child của nó mà thôi.

Fast Development: Tính năng Hot Reload hoạt động trong milliseconds để hiện thị giao diện tới bạn Sử dụng tập hợp các widget có thể customizable để xây dựng giao diện trong vài phút Ngoài ra Hot Reload còn giúp bạn thêm các tính năng, fix bug tiết kiệm thời gian hơn mà không cần phải thông qua máy ảo, máy android hoặc iOS

Expressive and Flexible UI: Có rất nhiều các thành phần để xây dựng giao diện của Flutter vô cùng đẹp mắt theo phong cách Material Design và Cupertino, hỗ trợ nhiều các APIs chuyển động, smooth scrolling

Native Performance: Các widget của fluter kết hợp các sự khác biệt của các nền tảng ví dụ như scrolling, navigation, icons, font để cung cấp một hiệu năng tốt nhất tới iOS và Android.

2.1.4 Các thành phần quan trọng trong Flutter:

Widget chịu trách nhiệm hình thành cấu trúc của Diagnosticable Tree (Cây chuẩn đoán là một cấu trúc dữ liệu dạng cây hỗ trợ việc định nghĩa cấu trúc giao diện được vẽ lên trong ứng dụng viết bằng Flutter) trong khi class element chịu trách nhiệm quản lý trạng thái của từng widget trên cái cây đó.

Tư tưởng cơ bản của Flutter tương tự như một Web Application Tất cả trong một Flutter căng ra một mảnh vải là canvas và vẽ tất cả mọi thứ lên đó Khi trạng thái của dữ liệu thay đổi ví dụ như người dùng chuyển màn hình hay thay đổi dữ liệu trên màn hình được phản ánh thông qua việc xóa đi các widget cũ và vẽ lên các widget mới Chính vì vậy thay vì phải biết đến các StoryBoard (trong iOS) hay các Activity (trong Android), Flutter đưa tất cả các khái niệm liên quan đến giao diện về một khái niệm duy nhất gọi là widget Việc quản lý trạng thái của các widget cũng được đưa về cho lập trình viên thực hiện Điểm khác biệt này cũng đặc biệt hơn khi Dart là

Dart

2.2.1 Giới thiệu ngôn ngữ Dart:

Dart là ngôn ngữ lập trình dạng hướng đối tượng Cũng là một ngôn ngữ viết ở một lần dùng ở nhiều nơi nhưng khác với Java, Dart thay vì tạo ra những môi trường trung gian giữa code thực thi và môi trường thiết bị thì Dart sử dụng những trình biên dịch khác nhau để biên dịch ra mã máy tương ứng Hiện tại Dart đang hỗ trợ để tạo ra những ứng dụng trên iOS, Android, Fuchsia và Web Riêng với Web Application, Dart biên dịch bản thân thành code Javascript (ở trường hợp này, Dart được coi như là một synxtax sugar cho Javascript)

Dart đồng thời cũng là một ngôn ngữ hỗ trợ asynchrony Tức nghĩa là trong Dart chỉ có một dòng chảy tuần tự chảy từ trên xuống dưới Code được đưa vào hàng đợi và hoàn toàn có thứ tự khi được thực thi

Dart là ngôn ngữ lập trình mới, được phát triển bởi Google, hiện đã được chấp thuận bởi tổ chức Ecma

Dart được sử dụng để xây dựng các loại ứng dụng: web, server, di động (IOS và Android với công cụ Flutter)

Dart là ngôn ngữ hỗ trợ lập trình hướng đối tượng, cú pháp kiểu C, mã code Dart có thể biên dịch thành JavaSript để chạy trên trình duyệt Nó hỗ trợ những khái niệm lập trình hiện đại như giao diện lớp, lớp trừu tượng

Từ ngôn ngữ lập trình Dart, Google giới thiệu SDK Flutter để sử dụng ngôn ngữ Dart phát triển ứng dụng di động chạy đa nền tảng (Một lần viết code build ra ứng dụng cho ISO và Android).

Tại sao lại lựa chọn ngôn ngữ Dart?

Các nhà phát triển tại Google và các nơi khác sử dụng Dart để tạo các ứng dụng chất lượng cao, quan trọng cho iOS, Android và web Với các tính năng nhắm đến sự phát triển phía khách hàng, Dart rất phù hợp cho cả ứng dụng di động và web. Dart giúp bạn tạo ra những trải nghiệm đẹp, chất lượng cao trên tất cả các màn hình, với:

 Một ngôn ngữ được tối ưu hóa cho client

2.2.2 Đặc điểm của ngôn ngữ Dart:

Dart đi kèm với trình soạn thảo nhẹ, Bạn có thể dung Dart Editor để viết, chạy và gỡ lỗi các ứng dụng Dart, Dart editor có thể giúp bạn phát hiện các lỗi tiềm năng.

Giúp bạn viết code tốt và nhanh hơn.

Dart được thiết kế để biên dịch sang JavaScript.

2.2.3 Những ưu điểm của Dart:

 Năng suất Cú pháp Dart rõ ràng và súc tích, công cụ của nó đơn giản nhưng mạnh mẽ Type-safe giúp bạn xác định sớm các lỗi tinh tế Dart có các thư viện cốt lõi và một hệ sinh thái gồm hàng ngàn package.

 Nhanh Dart cung cấp tối ưu hóa việc biên dịch trước thời hạn để có được dự đoán hiệu suất cao và khởi động nhanh trên các thiết bị di động và web.

 Di động Dart biên dịch thành mã ARM và x86, để các ứng dụng di động của Dart có thể chạy tự nhiên trên iOS, Android và hơn thế nữa Đối với các ứng dụng web, chuyển mã từ Dart sang JavaScript.

 Dễ gần Dart quen thuộc với nhiều nhà phát triển hiện có, nhờ vào cú pháp và định hướng đối tượng không gây ngạc nhiên của nó Nếu bạn đã biết C ++,

C # hoặc Java, bạn có thể làm việc hiệu quả với Dart chỉ sau vài ngày.

 Reactive Dart rất phù hợp với lập trình Reactive, với sự hỗ trợ để quản lý các đối tượng tồn tại trong thời gian ngắn, chẳng hạn như các widget UI, thông qua phân bổ đối tượng nhanh và GC Dart hỗ trợ lập trình không đồng bộ thông qua các tính năng ngôn ngữ và API sử dụng các đối tượng Future và Stream.

Tuy nhiên việc chỉnh sửa song song rất khó trên màn hình nhỏ như máy tính xách tay hoặc màn hình cũ hơn, nhưng với Visual Studio Code điều đó đã được giải quyết Nó có tính năng Dynamic panel, giúp điều chỉnh các bảng tài liệu nếu mở quá hẹp sẽ tự động mở rộng khi chỉ con trỏ vào nó Nếu thích sử dụng độ phân giải gần 720p, bạn sẽ thích tính năng này.

 Đổi tên tất cả các biến hoặc phương thức cụ thể:

Tái cấu trúc là một việc cần thiết để viết và duy trì code sạch, nhưng nó có thể khá đau đầu, đặc biệt khi bạn đang tái cấu trúc một module lớn hoặc một đoạn code lớn Vì vậy, thay vì tìm kiếm trong hàng chục file để thay đổi tên biến hoặc phương thức, hãy để Visual Studio Code làm điều đó cho bạn.

Nếu chọn một biến/phương thức và nhấn F2, bạn có thể chỉnh sửa tên và nó sẽ thay đổi trên toàn bộ dự án đang làm việc Nếu chỉ muốn thay đổi tên trong một file, sử dụng phím tắt Ctrl+F2 và Visual Studio Code sẽ hiển thị một con trỏ ở các instance trong file đó.

 Tìm kiếm trên nhiều file:

Nếu đang làm việc với các file không phải là mã nguồn, các tính năng tìm kiếm biểu tượng ở trên (trong mẹo số 6) sẽ không thể sử dụng được Vì vậy,

17 khi muốn tìm một câu hoặc một từ mà không nhớ tên file, bạn có thể sử dụng hàm find cơ bản.

Firebase Realtime

Firebase là một dịch vụ hệ thống backend được Google cung cấp sẵn cho ứng dụng Mobile của bạn, với Firebase bạn có thể rút ngắn thời gian phát triển, triển khai và thời gian mở rộng quy mô của ứng dụng mobile mình đang phát triển Hỗ trợ cả 2 nền tảng Android và IOS, Firebase mạnh mẽ, đa năng, bảo mật và là dịch vụ cần thiết đầu tiên để xây dưng ứng dụng với hàng triệu người sử dụng Sử dụng Firebase bạn sẽ có được hưởng các lợi ích sau:

Xây dựng ứng dụng nhanh chóng mà không tốn thời gian, nhân lực để quản lý như phân tích, cơ sở dữ liệu, báo cáo hoạt động và báo cáo các sự cố lỗi để bạn có thể dễ dàng phát triển, định hướng ứng dụng của mình vào người sử dụng nhằm đem lại các trải nghiệm tốt nhất cho họ.

 Uy tín chất lượng đảm bảo từ Google: Firebase được google hỗ trợ và cung cấp trên nền tảng phần cứng với quy mô rộng khắp thế giới, được các tập đoàn lớn và các ưng dụng với triệu lượt sử dụng từ người dùng.

 Quản lý cấu hình và trải nghiệm các ứng dụng của Firebase tập trung trong một giao diện website đơn giản, các ứng dụng này hoạt động độc lập nhưng liên kết dữ liệu phân tích chặt chẽ.

2.4.2 Những thành phần trong Firebase Realtime:

Hệ thống theo dõi và lưu trữ thông tin lỗi của ứng dụng đang chạy trên máy người dùng Các thông tin lỗi này được thu thập một các toàn diện và ngay tức thời Cách trình bày hợp lý với từng chu trình hoạt động đến khi xảy ra lỗi, các báo cáo trực quan giúp người phát triển có thể nắm bắt và xử lý kịp thời các lỗi chính của ứng dụng.

Lưu trữ và đồng bộ dữ liệu giữa người dùng và thiết bị – ở quy mô toàn cầu – sử dụng cơ sở dữ liệu noSQL được lưu trữ trên hạ tầng cloud Cloud Firestore cung cấp cho bạn tính năng đồng bộ hóa trực tuyến và ngoại tuyến cùng với các truy vấn dữ liệu hiệu quả Tích hợp với các sản phẩm Firebase khác cho phép bạn xây dựng các ứng dụng thực sự ngay cả khi kết nối internet bị gián đoạn.

Quản lý người dùng một cách đơn giản và an toàn Firebase Auth cung cấp nhiều phương pháp để xác thực, bao gồm email và mật khẩu, các nhà cung

19 cấp bên thứ ba như Google hay Facebook, và sử dụng trực tiếp hệ thống tài khoản hiện tại của bạn Xây dựng giao diện của riêng bạn hoặc tận dụng lợi thế của mã nguồn mở, giao diện người dùng tùy biến hoàn toàn.

Mở rộng ứng dụng của bạn bằng mã phụ trợ tùy chỉnh mà không cần quản lý và quy mô các máy chủ của riêng bạn Các chức năng có thể được kích hoạt bởi các sự kiện, được phát sinh ra bởi các sản phẩm Firebase, dịch vụ Google Cloud hoặc các bên thứ ba có sử dụng webhooks.

Lưu trữ và chia sẻ nội dung do người dùng tạo ra như hình ảnh, âm thanh và video với bộ nhớ đối tượng mạnh mẽ, đơn giản và tiết kiệm chi phí được xây dựng cho quy mô của Google Các Firebase SDK cho Cloud Storage thêm tính năng bảo mật của Google để tải lên và tải tệp cho các ứng dụng Firebase của bạn, bất kể chất lượng mạng.

 Hosting : Đơn giản hóa lưu trữ web của bạn với các công cụ được thực hiện cụ thể cho các ứng dụng web hiện đại Khi bạn tải lên nội dung web, chúng tôi sẽ tự động đẩy chúng đến CDN toàn cầu của chúng tôi và cung cấp cho họ chứng chỉ SSL miễn phí để người dùng của bạn có được trải nghiệm an toàn, đáng tin cậy, độ trễ thấp, dù họ ở đâu.

Chạy thử nghiệm tự động và tùy chỉnh cho ứng dụng của bạn trên các thiết bị ảo và vật lý do Google cung cấp Sử dụng Firebase Test Lab trong suốt vòng đời phát triển của bạn để khám phá lỗi và sự không nhất quán để bạn có thể cung cấp một trải nghiệm tuyệt vời trên nhiều thiết bị.

Chẩn đoán các vấn đề về hiệu suất ứng dụng xảy ra trên thiết bị của người dùng của bạn Sử dụng dấu vết để theo dõi hiệu suất của các phần cụ thể trong ứng dụng của bạn và xem chế độ xem tổng hợp trong bảng điều khiển Firebase Luôn cập nhật thời gian khởi động của ứng dụng và theo dõi các yêu cầu HTTP mà không cần viết bất kỳ mã nào.

Môi trường phát triển

Vì sao lại chọn Android studio là môi trường phát triển

Hệ điều hành Android đang chiếm hơn 80% thị trường thiết bị di động hiện đại ngày nay. Nhu cầu sử dụng ứng dụng di động cũng ngày càng cao Nhu cầu việc làm về lập trình trên hệ điều hành mobile phổ biến nhất thế giới này cũng vì thế mà tăng mạnh do tính mở và dễ tiếp cận của nó.

Android Studio là gì?

Android Studio là IDE chính thức trong phát triển ứng dụng Android, dựa trên IntelliJ IDEA Ngoài các khả năng đáng mong đợi từ IntelliJ, Android Studio còn cung cấp:

- Hệ thống Gradle-based linh hoạt

- Xây dựng các biến thể và tạo nhiều tệp APK

- Code các mẫu template để hỗ trợ các tính năng app thông thường

- Chỉnh sửa bố cục đa dạng với khả năng kéo và thả theme

- Công cụ lint giúp nắm bắt hiệu suất, khả năng sử dụng, phiên bản tương thích và các vấn đề khác.

- ProGuard và ứng dụng ký app-signing

- Hỗ trợ tích hợp trên Google Cloud Platform, cho phép dễ dàng tích hợp Google Cloud Messaging và App Engine.

- Và nhiều tính năng khác nữa.

Các tính năng cơ bản

Nếu bạn mới sử dụng Android Studio hoặc giao diện IntelliJ IDEA, sau đây là một số tính năng chính của Android Studio.

Project và cấu trúc tệp

Chế độ xem project trên Android

Theo mặc định, Android Studio hiển thị các tệp project trong chế độ xem project trên Android Chế độ xem này cho phép xem cấu trúc project theo lát cắt, cung cấp truy cập nhanh vào các tệp source chính của

- Hiển thị các thư mục gốc quan trọng nhất ở cấp cao nhất của phân cấp module.

- Nhóm các build file cho tất cả các module vào một thư mục chung.

- Nhóm tất cả các file kê khai cho từng module vào một thư mục chung.

- Hiển thị các tệp tài nguyên từ tất cả các tập nguồn nguồn Gradle. java/ - Tệp nguồn cho mô-đun. manifest/ - Tệp kê khai cho mô-đun. res/ - Tài nguyên tập tin cho mô-đun.

Gradle Scripts/ - Các file Gradle thiết kế và cố định

Hệ thống Android Build là bộ công cụ bạn sử dụng để xây dựng, thử nghiệm, chạy và đóng gói ứng dụng của mình Hệ thống xây dựng này thay thế hệ thống Ant được sử dụng với Eclipse ADT Nó có thể chạy như một công cụ tích hợp từ menu Android Studio và độc lập với dòng lệnh Bạn có thể sử dụng các tính năng của build system để:

Tùy chỉnh, cấu hình và mở rộng quá trình thiết kế, kiến trúc.

Tạo nhiều APK cho ứng dụng của bạn với các tính năng khác nhau bằng cách sử dụng cùng một dự án và module.

Sử dụng lại mã và tài nguyên trên các tập hợp nguồn

Tính linh hoạt của hệ thống Android build cho phép bạn đạt được tất cả các yếu tố trên mà không cần sửa đổi các tệp nguồn cốt lõi của ứng dụng.

Thiết lập Flutter trên Android Studio

1 Mở Android Studio và lựa chọn File -> Setting -> Plugin

2 Bạn tìm với từ khóa Flutter sau đó bạn cài Flutter vào trong android studio

3 Click Yes và chờ cho plugin để download

4 Click Restart Android Studio và click Restart để kích hoạt plugin vào trong Android Studio.

Bạn vào trang web của Flutter để tải SDK của Flutter về nhé :

Sau khi khởi động lại Android Studio, Chúng ta sẽ cùng bắt đầu với "Start a new Flutter project" Ở bước này bạn giải nén Sdk của bạn vừa tải về , sau đó trỏ đường dẫn tới file đó :

Và kết quả sau khi mình chạy :

CHƯƠNG IV CHI TIẾT SẢN PHẨM OPEN DAY

GÓI PH THUỘC

Trong lập trình, gói phụ thuộc (dependency) là một tập hợp các thư viện hoặc mã nguồn được sử dụng trong một dự án để cung cấp các tính năng, chức năng và tài nguyên mà bạn không muốn hoặc không có thời gian để phát triển lại từ đầu.

Trong Flutter, gói phụ thuộc được khai báo trong tệp tin pubspec.yaml Tệp tin này liệt kê tất cả các gói phụ thuộc cần thiết để chạy ứng dụng của bạn, bao gồm các thư viện mã nguồn, tài nguyên (hình ảnh, video, font chữ, v.v.) và các công cụ hỗ trợ khác.

Vd : dưới đây là 1 số gói phụ thuộc trong app “ open day “

Là 1 gói phụ thuộc của Flutter để tích hợp Firebase Authentication vào ứng dụng

Firebase Authentication là một dịch vụ xác thực và đăng nhập được cung cấp bởi Firebase Nó cung cấp các tính năng bảo mật, xác thực và quản lý người dùng cho ứng dụng của bạn.

Gói firebase_auth cho phép bạn sử dụng các tính năng của Firebase Authentication, bao gồm đăng ký, đăng nhập, đăng xuất và xác thực người dùng trong ứng dụng Flutter của bạn.

Là 1 gói phụ thuộc của Flutter để tích hợp Firebase Core vào ứng dụng

Firebase Core là một phần của Firebase SDK và là yêu cầu tiên quyết cho việc sử dụng bất kỳ dịch vụ Firebase nào khác Nó cung cấp cơ sở hạ tầng cho ứng dụng của bạn để kết nối và giao tiếp với các dịch vụ Firebase.

Gói firebase_core cho phép bạn sử dụng các tính năng của Firebase Core, bao gồm cấu hình ứng dụng của bạn để sử dụng Firebase và cung cấp cơ sở hạ tầng cho việc kết nối và giao tiếp với các dịch vụ Firebase.

4.2.1 UI Đây là màn hình đăng nhập dành cho sinh viên em sẽ chia 2 hình thành 2 phần

Thông báo lỗi khi không nhập

- Thông báo lỗi khi nhập không cú pháp email

Thông báo khi nhập sai email hoặc mật khẩu đã đăng kí

4.2.2 API class _LoginScreenState extends State { final GlobalKey _formKey = GlobalKey(); final TextEditingController _emailController = TextEditingController(); final TextEditingController _passwordController = TextEditingController(); final FirebaseAuth _auth = FirebaseAuth.instance;

_formKey là một GlobalKey được sử dụng để xác thực và kiểm tra tính hợp lệ của dữ liệu đăng nhập được nhập vào trong form. trên khởi tạo một đối tượng TextEditingController mới có tên là

_emailController Biến _emailController sẽ được sử dụng để lưu trữ dữ liệu người dùng nhập vào ô văn bản email trên giao diện đăng nhập Khi người dùng nhập thông tin vào ô văn bản, đối tượng TextEditingController sẽ tự động cập nhật dữ liệu nhập vào Chúng ta có thể sử dụng đối tượng này để truy cập và sử dụng dữ liệu người dùng đã nhập.

DefautButton( onPress: () async { if (_formKey currentState !.validate()) { try {

UserCredential userCredential await _auth.signInWithEmailAndPassword( email: _emailController.text.trim(), password: _passwordController text .trim(),

Code này liên quan đến xử lý sự kiện khi người dùng nhấn vào nút "Sign In" trên màn hình đăng nhập. Đầu tiên, nó kiểm tra xem liệu form hiện tại có hợp lệ hay không bằng cách gọi hàm validate() trên đối tượng _formKey.currentState.

Nếu form hợp lệ, nó sẽ thực hiện đăng nhập bằng email và mật khẩu được nhập bởi người dùng Để đăng nhập, nó gọi phương thức signInWithEmailAndPassword() trên đối tượng _auth (Authentication), một

31 đối tượng của lớp FirebaseAuth Phương thức này trả về một đối tượng UserCredential, chứa thông tin về tài khoản người dùng đã đăng nhập.

Nếu tài khoản người dùng được trả về, nó sẽ đưa người dùng đến màn hình chính Homescreen() bằng cách sử dụng Navigator.pushReplacement() Phương thức này thay thế màn hình hiện tại bằng màn hình mới và loại bỏ màn hình hiện tại khỏi ngăn xếp màn hình.

Đăng ký

4.3.1 UI Đây là màn hình đăng ký tài khoản thông tin gồm có

+ ngày tháng năm sinh + nút đăng kí đăng kí thất bạo do không nhập đúng thông tin

4.3.2 API final GlobalKey _formKey = GlobalKey(); final TextEditingController _fullNameController = TextEditingController(); final TextEditingController _emailController = TextEditingController(); final TextEditingController _dobController = TextEditingController(); final TextEditingController _phoneNumberController = TextEditingController(); final TextEditingController _passwordController = TextEditingController(); Đây là khởi tạo các biến dùng để lưu trữ và thao tác với dữ liệu nhập vào từ người dùng trong giao diện đăng ký tài khoản.

GlobalKey _formKey: Biến GlobalKey được sử dụng để truy cập trạng thái của một Form trong Flutter Nó được khởi tạo với kiểu dữ liệu là FormState và được sử dụng để xác thực và lấy dữ liệu từ các trường nhập liệu trong form.

TextEditingController: Là một lớp dùng để thao tác với nội dung của các trường nhập liệu (TextField, TextFormField) trong Flutter Ở đây, tác giả sử dụng một TextEditingController cho mỗi trường nhập liệu trong giao diện đăng ký tài khoản để lưu trữ dữ liệu nhập vào bởi người dùng và sử dụng chúng để xác thực đăng ký tài khoản.

ElevatedButton( onPressed: () async { if (_formKey currentState !.validate()) { try {

UserCredential userCredential await _auth.createUserWithEmailAndPassword( email: _emailController.text, password: _passwordController text ,

'phone_number': _phoneNumberController.text, Đây là một đoạn mã trong Flutter để tạo một form đăng ký tài khoản người dùng. Ở phía trên, chúng ta khai báo một số biến như _formKey, và

TextEditingController cho các trường dữ liệu cần được điền trong form.

Trong đoạn mã này, ElevatedButton được sử dụng để tạo một nút đăng ký tài khoản Khi người dùng nhấn vào nút này, mã sẽ kiểm tra xem các trường dữ liệu đã được điền đầy đủ và hợp lệ không bằng cách sử dụng

_formKey.currentState!.validate() Nếu các trường dữ liệu hợp lệ, mã sẽ tiến hành tạo tài khoản người dùng bằng cách sử dụng

_auth.createUserWithEmailAndPassword() và lưu thông tin người dùng vào cơ sở dữ liệu Firebase bằng cách sử dụng

_firestore.collection('users').doc(userCredential.user!.uid).set().

Các trường dữ liệu sẽ được lấy từ các TextEditingController mà chúng ta đã khai báo trước đó, và được truyền vào các tham số khi tạo tài khoản người dùng và lưu thông tin người dùng vào cơ sở dữ liệu.

SnackBar( content: Text('Đăng ký thành công!'), backgroundColor: Colors.green,

,) khi người dùng đã đăng ký thành công, ứng dụng sẽ hiển thị một snackbar thông báo rằng đăng ký đã thành công Snackbar là một widget hiển thị một thông báo ngắn tạm thời ở đáy màn hình, thông báo sẽ tự động biến mất sau một khoảng thời gian ngắn. Đầu tiên, ScaffoldMessenger.of(context) được sử dụng để tìm kiếm Scaffold của ứng dụng trong widget tree Sau đó, showSnackBar được gọi để hiển thị một snackbar với nội dung là "Đăng ký thành công!" và màu nền của snackbar là màu xanh lá cây Sau đó, người dùng có thể tiếp tục sử dụng ứng dụng.

4.3 Màn hình chính sinh viên

UI Đây sẽ là giao diện sinh viên căn bản

Màn hình sẽ chia làm 2 phần

+ các sự kiện tham dự

Hóa đơn

Học phí sẽ có + Mã hóa dơn + Học kì + Hạn Trả + học phần + ghi chú

Thông tin sinh viên

Chia thành 2 màn hình thành 2 phần Phần 1 : giới thiệu khái quát sinh viên + 1 avata

+ Tên sinh viên đã đăng kí + ngành

Phần 2 : các thông tin sinh viên + niên khóa

+ chuyên ngành + mã lớp + mã số sinh viên + ngày nhập học + ngày tháng năm sinh + Email

+ Tên ba+ tên mẹ + số điện thoại

Future getUserFullName() async { final user = FirebaseAuth.instance.currentUser; if (user != null) { final userData = await FirebaseFirestore.instance

where('email', isEqualTo: user.email)

get(); if (userData.docs.isNotEmpty) { fullName = userData.docs.first.get('full_name'); setState(() {});

} Đây là một đoạn mã trong Flutter để lấy tên đầy đủ của người dùng đang đăng nhập vào ứng dụng từ cơ sở dữ liệu Firestore.

Cụ thể, đoạn mã trước tiên lấy đối tượng người dùng hiện tại thông qua Firebase Authentication Sau đó, nó truy vấn Firestore để tìm tài liệu người dùng có email tương ứng với người dùng hiện tại, và lấy tên đầy đủ từ tài liệu đầu tiên tìm được.

Cuối cùng, mã này cập nhật trạng thái của widget để hiển thị tên đầy đủ trong giao diện người dùng.

Tổng kết demo

Tính năng Ui Api (kết nối firebase) Đăng nhập x X Đăng kí x X

Màn hình chính sinh viên x

Cơ sở dữ liệu firebase

Dữ liệu người dùng + ngày tháng năm sinh + email

+ họ và tên + số điện thoại

Dữ liệu người dùng được lưa bởi trang đăng kí sinh viên

TỔNG KẾT

Kết luận

Trong đề tài”open day”, em chỉ mới phân tích và xây dựng App đơn giản với các chức năng còn nhiều trở ngại, chưa hoàn tất tất cả chức năng của App.

Qua việc nghiên cứu xây dựng đề tài này, em đã cố gắng phần nào củng cố được các kiến thức về lập trình và nắm được cách làm thế nào để xây dựng được một App Từ đó, em có thể xây dựng được những phần mềm tương tự khác.

Do thời gian làm đồ án có hạn và trình độ còn nhiều hạn chế nên không thể trách khỏi thiếu sót Chúng em rất mong nhận được sự đóng góp ý kiến của các thầy, các giáo viên hướng dẫn cũng như các bạn sinh viên để bài đồ án này hoàn thiện hơn nữa.Một lần nữa chúng em xin chân thành cảm ơn.

Khó khăn và cách khắc phục

Flutter là một framework phát triển ứng dụng di động và web rất phổ biến hiện nay, tuy nhiên cũng có một số khó khăn khi học Flutter như sau:

- Khả năng hiểu biết về Dart : Flutter được viết bằng ngôn ngữ lập trình Dart, vì vậy để hiểu rõ Flutter bạn cần có một kiến thức nền tảng về Dart Nếu chưa quen thuộc với Dart, thì bạn sẽ phải học thêm ngôn ngữ này.

- Thiếu kiến thức về widget: Flutter sử dụng widget để xây dựng giao diện người dùng Việc hiểu rõ về widget và cách chúng hoạt động là rất quan trọng để xây dựng các ứng dụng Flutter.

- Thiếu kinh nghiệm phát triển ứng dụng di động : mới bắt đầu phát triển ứng dụng di động, có thể sẽ cần phải học thêm kiến thức về thiết kế và phát triển ứng dụng di động trước khi bắt đầu học Flutter.

- Tài liệu học tập và hỗ trợ cộng đồng : Flutter là một công nghệ mới, vì vậy sẽ có ít tài liệu học tập và hỗ trợ cộng đồng so với các công nghệ phát triển ứng dụng khác Tuy nhiên, cộng đồng Flutter đang phát triển rất nhanh và cung cấp nhiều tài liệu và hỗ trợ học tập.

- Thiếu kinh nghiệm về quản lý trạng thái : Flutter sử dụng mô hình quản lý trạng thái rất mạnh mẽ để quản lý trạng thái của ứng dụng Nếu không có kinh nghiệm về quản lý trạng thái, việc học Flutter có thể trở nên khó khăn hơn.

5.2.2 Cách khắc phục Để khắc phục những khó khăn khi học Flutter, có thể thực hiện các bước sau đây:

- Nâng cao kiến thức về Dart: Nếu cảm thấy thiếu kiến thức về Dart, hãy bắt đầu học ngôn ngữ này Có thể tìm kiếm các tài liệu trực tuyến hoặc tham gia các khóa học trực tuyến để nâng cao kiến thức của mình về Dart.

- Tìm hiểu về widget: Việc hiểu rõ về widget là rất quan trọng để xây dựng các ứng dụng Flutter Có thể tham khảo tài liệu chính thức của Flutter hoặc các tài liệu trực tuyến khác để tìm hiểu về widget.

- Học kinh nghiệm phát triển ứng dụng di động: Nếu mới bắt đầu phát triển ứng dụng di động, hãy tìm hiểu thêm kiến thức về thiết kế và phát triển ứng dụng di động Bạn có thể tham gia các khóa học trực tuyến hoặc tìm kiếm các tài liệu trực tuyến để học tập.

- Tham gia cộng đồng Flutter: Cộng đồng Flutter đang phát triển rất nhanh và cung cấp nhiều tài liệu và hỗ trợ học tập Bạn có thể tham gia các diễn đàn, nhóm

Facebook hoặc Slack để kết nối với cộng đồng Flutter và nhận được sự hỗ trợ từ những người có kinh nghiệm.

- Thực hành và xây dựng ứng dụng thực tế : Việc thực hành và xây dựng các ứng dụng thực tế là cách tốt nhất để nâng cao kỹ năng Thực hành và xây dựng các ứng dụng thực tế để khắc phục những khó khăn khi học Flutter.

Ưu điểm và khuyết điểm

- Môi trường ứng dụng còn hạn chế do không có đủ kinh phí thử nghiê šm trên hê š thống thực dẫn tới đề tài còn mang tính phát triển.

- Giao diện một số trang quản trị chưa được đẹp, cách bố trí các điều khiển chưa được hợp lý.

- Viê šc tối ưu hê š thống chưa được tốt.

- Độ bảo mật còn hạn chế.

Hướng Phát triển

- Cập nhật sửa xóa thông tin sinh viên

- Cập nhập UI phần đăng kí

- Cập nhập API cho học phí,trang chủ sinh viên

- Tiến hành code các chức năng trong phần trang chủ sinh viên

Đánh giá

Sau dự án này em sẽ cố gắng nghiên cứu sâu hơn về nó, sẽ nâng cấp hệ thống với đầy đủ chức năng mà yêu cầu hiện tại cần có.

Cố gắng hoàn thiện bài báo cáo tốt hơn so với lần này cho các môn học khác Ôn lại các kiến thức hỏng của các bộ môn lập trình cơ bản Tiếp tục làm các sản phẩm khác để áp dụng trong quá trình học tập hiện tại và mai sau.

43 Đề tài “open day” cần được mở rộng và củng cố trên nhiều khía cạnh hơn để app được hoàn thiện Để cho việc quản lý sinh viên ngày càng dễ dàng hơn và thuận tiện hơn trong các cửa hàng hiện nay và mai sau,…