Báo cáo TTNN 2022 DH CNTT

Báo cáo thực tập Nghề nghiệp Trường đại học Công nghệ Thông TIn và Truyền thông đại học thái nguyên, đâu là 1 bản báo cáo đã được xét duyệt cho đi bảo cáo và chỉnh sửa đẹp trước khi đi in, Tìm hiểu và cài đặt framework Flutter và ngôn ngữ lập trình DartTìm hiểu cách sử dụng Visual Studio code để triển khai ứng dụng mobile bằng framework FlutterThiết kế giao diện tĩnh cho ứng dụng Edumail

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

KHOA CÔNG NGHỆ THÔNG TIN -

BÁO CÁO THỰC TẬP NGHỀ NGHIỆP TẠI TRUNG TÂM PHÁT TRIỂN PHẦN MỀM ICTU

Sinh viên thực hiện: Trần Minh Long Lớp: KTPM-K17B

Người hướng dẫn tại doanh nghiệp: Nguyễn Văn Sự Giáo viên quản lý: Th.s Quách Xuân Trưởng

Trưởng Đoàn: Ths Quách Xuân Trưởng

Thái Nguyên, tháng 10 năm 2022

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

KHOA CÔNG NGHỆ THÔNG TIN -

Đề tài:

NGHIÊN CỨU FRAMEWORK FLUTTER VÀ NGÔN NGỮ

LẬP TRÌNH DART CHO ỨNG DỤNG MOBILE

Sinh viên thực hiện: Trần Minh Long Lớp: KTPM-K17B

Người hướng dẫn tại Doanh Nghiệp

LỜI CAM ĐOAN

Em xin cam đoan báo cáo thực tập này do chính em thực hiện, dưới sự hướng dẫn của anh Nguyễn Văn Sự , các kết quả được trình bày trong báo cáo là sản phẩm do em thực hiện trong quá trình thực tập Em xin hoàn toàn chịu trách nhiệm về kết quả thực hiện đề tài này

Thái Nguyên, tháng 10 năm 2022

Sinh viên

Trần Minh Long

LỜI CẢM ƠN

Trong suốt quá trình học tập, rèn luyện kỹ năng trên ghế nhà trường và sau thời gian

2 tháng thực tập thực tế tại Trung tâm phát triển phần mềm ICTU Mặc dù thời gian không dài nhưng đã giúp em học hỏi được nhiều kinh nghiệm thực tế hài hòa giữa kiến thức lý thuyết vào trong quá trình thực hành Với sự giúp đỡ, quan tâm tận tụy của các thầy, cô giáo, cùng các anh chị nhân viên trong công ty đã giúp em học hỏi được nhiều kinh nghiệm quý báu khi ra trường

Để có được những kiến thức quý báu đó, em xin gửi lời cảm ơn chân thành đến các thầy cô giáo Trường Đại học Công nghệ thông tin và truyền thông Thái Nguyên nói chung, các thầy cô giáo trong Bộ môn Công nghệ phần mềm nói riêng, giảng viên hướng dẫn – Ths Quách Xuân Trưởng đã hết lòng tận tụy, chỉ bảo, hướng dẫn chúng em trong suốt quá tình học tập, gắn liền kiến thức lý thuyết giảng dạy, cũng như hiểu biết về thực tế trong chuyên ngành để khi chúng em ra trường nắm chắc được những kiến thức quan trọng, chuẩn

bị cho tương lai sau này

Bên cạnh đó, với sự giúp đỡ, chỉ bảo tận tình ở bên Trung tâm phần mềm nói chung, anh Nguyễn Văn Sự và các anh chị trong văn phòng nói riêng, đã chỉ bảo tận tình, tạo mọi điều kiện thuận lợi để em thực hiện tốt đợt thực tập vừa qua Với lòng biết ơn chân thành,

em xin chúc toàn thể anh chị trong công ty luôn có một sức khỏe tốt, một tâm thế chiến binh để có thể hoàn thành tốt mọi nhiệm vụ được giao

Trong quá trình thực tập và làm báo cáo, do còn nhiều thiếu sót về mặt kinh nghiệm thực tế nên em rất mong nhận được sự đóng góp và chỉ bảo từ các thầy cô giáo để em có thể hoàn thành đợt thực tập một cách tốt hơn Em xin chân thành cảm ơn!

Thái Nguyên, tháng 10 năm 2022

Sinh viên

Trần Minh Long

Chương I: LỊCH LÀM VIỆC TẠI NƠI THỰC TẬP

dẫn Thời gian Ghi chú

1

1

- Nhận công việc tại

TTPTPM-ICTU (Nghiên cứu Framework

Flutter và ngôn ngữ lập trình

Dart cho ứng dụng Mobile)

Nguyễn Văn Sự

15/08/2022 đến 19/08/2022

- Tìm hiểu ngôn ngữ công cụ

và môi trường làm việc của

flutter và tiến hành cài đặt

công cụ

- Tìm hiểu Ngôn ngữ dart cơ

bản, các thành phần, biến, hàm,

string và mảng

- Tìm hiểu Lớp ,Đối tượng ,

Hàm khởi tạo trong dart

- Thực thi các thao tác thêm

bớt, sửa, xoá 1 danh sách các

đối tượng(object) trong Dart

- Tìm hiểu về final và const

trong Flutter, dữ liệu kiểu Map

vòng đời của 1 wedget

- Thêm package và tuỳ biến

dateTime với intl

Nguyễn Văn Sự

22/08/2022 đến 26/08/2022

TÌm hiểu về layout với

SafeArea, Column,

FlatButton,TextField

- Thực hiện đưa dữ liệu State

lên ListTile (Sử dụng map)

- Thực hiện đưa ListTIle vào

- HIển thị và tuỳ biến Model

Bottom Sheet và thực thi các

Actions trong

ModalBottomSheet

3

Làm quen với GridView,

GridItem và cách truyền dữ liệu

giữa 2 màn hình

Nguyễn Văn Sự

29/08/2022 đến 02/09/2022

Tìm hiểu về Bloc, Bloc widgets

Tìm hiểu về Bloc pattern

Sử dụng Bloc để quản lý State

Xây dựng Login App(Sự dụng

6

Xây dựng Music App

Nguyễn Văn Sự

19/09/2022 đến 23/9/2022 Xây dựng Plan App

7 Xây dụng giao diện App

26/09/2022 đến 30/09/2022

8 Xây dụng giao diện App

03/10/2022 đến 07/10/2022

Chương 2 Giới thiệu về tổ chức của nơi thực tập

2.1 Một số thông tin về địa điểm thực tập

Tên địa điểm thực tập: Trung tâm phát triển phần mềm ICTU

Địa chỉ:Phòng 105, Nhà C6, Trường Đại học Công nghệ Thông tin và Truyền thông – Quyết Thắng, Thành phố Thái Nguyên, Tỉnh Thái Nguyên

Điện thoại: 0986175777

Email: ttptpm@ictu.vn

2.2 Lĩnh vực hoạt động

Hoạt động chủ yếu trên lĩnh vực: Lập trình và phát triển các ứng dụng CNTT

Ngoài ra công ty còn hoạt động trên một số lĩnh vực khác như:

- Tư vấn, tham mưu cho BGH Trường về giải pháp các ứng dụng CNTT trong mọi hoạt dộng của trường

- Kết nối doanh nghiệp với giảng viên, người học trong xây dựng và chuyển giao các sản phẩm khoa học công nghệ

CHƯƠNG 3 NỘI DUNG NHIỆM VỤ CHÍNH ĐƯỢC GIAO

Trong quá trình thực tập tại trung tâm em được giao cho nhiệm vụ gồm:

- Tìm hiểu và cài đặt framework Flutter và ngôn ngữ lập trình Dart

- Tìm hiểu cách sử dụng Visual Studio code để triển khai ứng dụng mobile bằng framework Flutter

- Thiết kế giao diện tĩnh cho ứng dụng Edumail

Chương 4 Nội dung các công việc và kết quả 4.1 Tuần 1 Thời gian: từ 15/08/2022 đến 21/08/2022

4.1.1.Nội dung công việc

- Đến cơ sở thực tập nộp giấy giới thiệu và xin được thực tập tại cơ sở

- Làm quen với môi trường làm việc, cũng như các cán bộ

- Nghe cán bộ hướng dẫn phổ biến nội quy quy định của cơ sở

- Tìm hiểu khái quát về framework Flutter

- Tìm hiểu ngôn ngữ dart: làm quen công cụ , môi trường, tiến hành cài đặt

- Tìm hiểu biến , hàm , string , mảng, các toán tử trong dart

- Tìm hiểu lớp , hướng đối tượng và hàm khởi tạo trong dart

- Thao tác thêm , bớt , sửa, xoá danh sách một đối tượng

- Final và const , dữ liệu kiểu map

- Khái niệm thẻ widget, StatelessWidget, StatefulWidget

- Xây dựng một StatefulWidget, thay đổi state với textField

4.1.2.Kiến thức lý thuyết

4.1.2.1 Tìm hiểu khái quát về framework Flutter

Flutter là mobile UI framework của Google để tạo ra các giao diện chất lượng cao trên iOS và Android trong khoảng thời gian ngắn Flutter hoạt động với những code sẵn có được

sử dụng bởi các lập trình viên, các tổ chức

Flutter hoàn toàn miễn phí và cũng là mã nguồn mở

Tại sao lại sử dụng Flutter:

• Một codebase cho Android và iOS: Flutter dựa trên codebase duy nhất để phát

triển các ứng dụng hỗ trợ cả hai nền tảng Android và IOS Điều này làm cho nhiệm

vụ của nhà phát triển dễ dàng hơn, tránh các sai sót khi truyển đổi code

• Dart: là ngôn ngữ Flutter sử dụng, được phát triển bởi google Dart rất dễ học, ổn

định, có khả năng mở rộng cao Dart có hỗ trợ 1 số libraries và tools

• Hot Reload: Flutter được hỗ trợ tính năng Hot Reload Điều đó có nghĩa là nếu bạn

thực hiện bất kỳ thay đổi nào trong mã thì bạn có thể thấy chúng ngay lập tức mà không cần chờ đợi hoặc khởi động lại ứng dụng

• Widgets: là thành phần của bất kỳ ứng dụng nào, bằng cachs sử dụng Flutter bạn sẽ

có được 1 bôbj thu viện ưidget với nhiều loại widget để sử dụng trong khi xây dụng

ứng dụng của chính mình Chúng nhanh, trông tự nhiên và cso thể tuỳ chỉnh dễ dành

• MVP: MVP hoặc minimum viable product là một sản phẩm được thiết kế với các

tính năng tối thiểu để có thể làm hài lòng khách hàng ở giai đoạn đầu Nó cũng được

sử dụng để lấy feedback cho những cải tiến trong tương lai Vì vậy, nếu bạn là một trong những nhà phát triển, những người cần MVP của ứng dụng cho khách hàng thì Flutter sẽ là một lựa chọn tuyệt vời Nó đặc biệt hữu ích nếu bạn có ít thời gian hơn

và bạn muốn đưa ra ý tưởng rõ ràng về ứng dụng cho khách hàng của mình

• Phát triển nhanh: Nó được thiết kế để phát triển ứng dụng nhanh hơn các nền tảng

có sẵn khác Do nhiều tính năng của nó, nó cho phép các developers code nhanh hơn

và hiệu quả Như đã thảo luận ở trên, tính năng Hot Reload của nó làm cho toàn bộ

quá trình phát triển ứng dụng nhanh hơn và đơn giản hơn

• Native Features: Flutter cung cấp cho bạn quyền truy cập các tính năng gốc của

thiết bị của bạn như máy ảnh, định vị địa lý và các ứng dụng khác giống như bất kỳ ứng dụng native nào khác Tuy nhiên, các chức năng này có thể được kết hợp bằng

cách sử dụng ngôn ngữ native

• Hỗ trợ chính thức: Vì Flutter được tạo và ra mắt bởi Google, không có gì phải bàn

về cộng đồng hỗ trợ của nó Nó được hỗ trợ bởi một team mạnh và có một cộng đồng với hơn 1000 nhà phát triển luôn sẵn sàng giúp đỡ và làm cho Flutter trở nên tốt hơn

Cài đặt flutter cho Windows

Vào https://flutter.dev/docs/get-started/install tiến hành cài đặt theo hệ điều hành của máy:

• Sau đó các bản tải về flutter SDK Sau khi tải về xong, các bạn giải nén file vừa tải

về (tùy chọn Extract here) ta sẽ được một thư mục tên là flutter Các bạn hãy để thư mục này vào một nơi nào đó mà bạn muốn

Bây giờ bạn đã sẵn sàng để chạy lệnh Flutter Console Nhưng để có thể chạy lệnh

flutter từ Command Prompt, bạn nên cập nhật đường dẫn Các bước thực hiện như sau:

• Click phải chuột vào This PC, chọn Properties

• Chọn Advanced system settings (gần phía trên bên trái) trong cửa sổ System

• Chọn Enviroment Variables… trong cửa sổ System Properties

• Trong phần User variables, các bạn tìm Variable là PATH và nhấn Edit, nhấn New

và thêm đường dẫn đến thư mục “flutter\bin” Ví dụ của mình là “C:\flutter\bin” Nếu như bạn không tìm thấy Variable PATH bạn nhấn New và đặt tên Variable là PATH và đường dẫn đến thư mục flutter\bin của bạn

• Nhấn OK để lưu tất cả các thay đổi lại

Vậy là bạn đã có thể chạy lệnh flutter từ Command Prompt rồi Giờ hãy check thử xem nào Mở Command Prompt lên và chạy lệnh “flutter –version” Nếu như nó hiện lên thông tin Flutter, framwork, dart version… thì bạn đã cài thành công

Sau khi cài đặt xong VS Code chúng ta cài đặt extentions flutter cho VS Code:

• Mở Visual Studio Code

• Vào tab Extentions trên thanh sidebar bên trái

• Search “flutter” và “dart”, các bạn nhấn Install plugin đầu tiên của kết quả tìm kiếm Khác với Android Studio, khi cài plugin Flutter thì plugin Dart cũng sẽ được tự cài theo mà không cần bạn xác nhận

Tạo và chạy Project Flutter

Chọn thư mục chưa project, nhấn chuột phải ở vùng trống và chọn Git bash here, gõ lệnh

“flutter create tên_app” Ví dụ của mình là:

Sau khi create dự án thành công, các bạn dùng lênh “cd tên_dự_an” tiếp dùng lệnh ” flutter run” để chạy project trên máy ảo android đã chạy trước đó

Kết quả sau khi chạy trên máy ảo android:

4.1.2.2 Dart

Dart là ngôn ngữ lập trình hiện đại, hướng đối tượng, được tối ưu hóa cho ứng dụng

khách để xây dựng ứng dụng nhanh chóng cho nhiều nền tảng như android, iOS, máy tính

để bàn web, v.v Tối ưu hóa ứng dụng có nghĩa là được tối ưu hóa để tạo ra một giao diện người dùng đẹp và trải nghiệm chất lượng cao Google đã phát triển Dart như một ngôn ngữ lập trình

Hiện tại, Dart là một trong những ngôn ngữ được ưu tiên học Cần có hiểu biết vững chắc về Dart để phát triển các ứng dụng chất lượng cao Dựa theoGithub, Dart là một trong những ngôn ngữ lập trình được yêu thích nhất trên thế giới

Nếu bạn biết các ngôn ngữ như C , Java , C # , Javascript ,… Dart sẽ trở nên dễ dàng với bạn

• Tìm hiểu biến , hàm , string , mảng, các toán tử trong dart

a, Biến

Khai báo biến bằng từ khoá var:

var myVariable1 = 100; // Data type: int

var là một từ khoá để khai báo một biến

myVariable1 là tên biến

100 là giá trị của biến này

- Khai báo biến kiểu dynamic: Từ khoá dynamic cũng được sử dụng để khai báo một biến, nó khá giống với từ khoá var, điều khác biệt là kiểu dữ liệu của biến này có thể thay

đổi

dynamic v1 = 123; // v1 is of type int

v1 = 456; // changing value of v1 from 123 to 456

v1 = 'abc'; // changing type of v1 from int to String

var v2 = 123; // v2 is of type int

v2 = 456; // changing value of v2 from 123 to 456

v2 = 'abc'; // ERROR: can't change type of v2 from int to String

-Khai báo biến với kiểu dữ liệu cụ thể

String myVariable1 = "My Text";

int myVariable2 = 1000;

- Khai báo biến với từ khoá final

Từ khoá final cũng được sử dụng để khai báo một biến, và bạn chỉ có thể gán giá trị cho biến này nhiều nhất 1 lần Kiểu dữ liệu của biến này sẽ được Dart xác định tại lần gán đầu

tiên

Một biến được khai báo với từ khoá final Dữ liệu tại vùng bộ nhớ mà biến này trỏ tới

vẫn có thể thay đổi một cách nội bộ

final myVariable1; // Declare a variable

myVariable1 = 2; // Assign a value to it

myVariable1 = 3; // ERROR at compile time

- Khai báo biến với từ khoá const

Từ khoá const được sử dụng để khai báo một biến đặc biệt, còn được gọi là hằng số Khi khai báo biến với từ khoá const bạn nên gán giá trị cho nó, nếu không giá trị của nó sẽ

là null Sau khi khai báo bạn không thể gán giá trị cho biến này Vùng dữ liệu mà biến trỏ

tới sẽ trở thành bất biến (immutable), nghĩa là nó không thể thay đổi dữ liệu một cách nội

bộ

Dart hỗ trợ các kiểu dữ liệu dưới đây, chúng ta không cần thiết phải khai báo kiểu dữ

liệu cho biến

Numbers − Được sử dụng cho số – Integer và Double

Strings − Được sử dụng cho chuỗi kí tự Giá trị của String được đặt trong dâu nháy đơn

hoặc nháy kép

Booleans − Được sử dụng cho giá trị Boolean đúng và sai

Lists and Maps − Được sử dụng cho nhóm đối tượng

//How to “map” on array

List<String> stringNumbers = numbers.map((number){

return ‘Value ${number}’

}).tolist();

- Toán tử dot dot( )

Trong ngôn ngữ lập trình Dart, toán tử dot dot ( ) cũng được hiểu là "cascade notation" (ký hiệu xếp tầng) Nó cho phép bạn không lặp lại cùng một mục tiêu

nếu bạn muốn gọi một số phương thức trên cùng một đối tượng

print(list2); // [One, Two, Three]

4.1.2.3 Tìm hiểu lớp , hướng đối tượng và hàm khởi tạo trong dart

- Dart là một ngôn ngữ lập trình hướng đối tượng (object-oriented language) Nó

hỗ trợ một số tính năng của lập trình hướng đối tượng như class, interface,

- Mỗi một class (lớp) định nghĩa cho một loại đối tượng Một class bao gồm những nội dung sau đây:

4.1.2.4.Thẻ widget, StatelessWidget, StatefulWidget

- Trong Flutter, mọi thứ đều là widget Widget (tiện tích) là thành phần giao diện

cơ bản nhất tạo nên toàn bộ giao diện người dùng của ứng dụng

- Chính bản thân chính ứng dụng đã là một widget Mỗi ứng dụng chính là

một top-level widget và nó bao gồm một hoặc nhiều các widget con, mỗi widget này lại

có thể bao gồm một hoặc nhiều widget con khác Nhờ sự kết hợp linh hoạt này chúng ta

có thể tạo ra bất kì ứng dụng phức tạp nào

Hầu hết các Widget Tích hợp có sẵn trong flutter:

• Stateless Widget

• Stateful Widget

- Có internal state và có thể quản lý trạng thái đó

- Tất cả stateful widgets trạng thái đều có các đối tượng trạng thái tương ứng

- Lớp StatefulWidget không có phương pháp xây dựng func Nhưng mọi StatefulWidget đều có một đối tượng trạng thái được liên kết, đối tượng này có một phương thức xây dựng

- Trên thực tế, stateful widget trạng thái là bất biến, nhưng các đối tượng trạng thái liên quan của chúng rất thông minh, có thể thay đổi và có thể giữ trạng thái ngay cả khi Flutter kết xuất lại các widget

4.1.2.5.Xây dựng một StatefulWidget, thay đổi state với textField

Hàm setState trong class kế thừa StatefulWidget , giúp set lại State và build lại màn hình mỗi khi được gọi đến

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

- Đã được cơ quan cho phép được thực tập tại trung tâm

- Đã tìm hiểu và nắm bắt được nội quy của trung tâm

- Tìm hiểu và nghiên cứu các tài liệu liên quan trong quá trình thực tập

- Đã tìm hiểu khái quát về Flutter

- Hiểu ngôn ngữ dart: làm quen công cụ , môi trường, cài đặt thành công

- Hiểu biến , hàm , string , mảng, các toán tử trong dart

- Hiểu lớp , hướng đối tượng và hàm khởi tạo trong dart

- Hiểu Final và const , dữ liệu kiểu map

- Hiểu widget, StatelessWidget, StatefulWidget

- Hiểu xây dựng một StatefulWidget, thay đổi state với textField