Báo Cáo Thực Tập Phân Tích Thiết Kế Hệ Thống Thông Tin Tại Công Ty Cổ Phần Công Nghệ Windsoft Việt Nam.pdf

Đ I H C QU C GIA HÀ N IẠỌỐỘTRƯỜNG Đ I H C KHOA H C T NHIẠỌỌỰ

KHOA TOÁN – C - TIN H CƠỌ

- -

BÁO CÁO TH C T PỰẬ

Phân tích thi t k h th ng thông tinếế ệố

Sinh viên th c hi nựệ : Nguy n Văn Th ngễắMã sinh viên: 17000231

- Hà N i, 04/2020 ộ

-Đ I H C QU C GIA HÀ N IẠỌỐỘTRƯỜNG Đ I H C KHOA H C T NHIẠỌỌỰ

KHOA TOÁN – C - TIN H CƠỌ

- -

BÁO CÁO TH C T PỰẬ Phân tích thi t k h th ng thông tinếế ệố

Sinh viên th c hi nựệ : Nguy n Văn Th ngễắMã sinh viên: 17000231

- Hà N i, 04/2020 ộ

M C L CỤỤDANH M C T VI T T TỤỪẾẮ

DANH M C HÌNH NHỤẢL I C M NỜẢƠ

L i đ u em xin g i l i c m n t i th y cô, công ty và các anh ch đãờ ầ ử ờ ả ơ ớ ầ ịt o đi u ki n cho em đ c th c t p tr i nghi m môi tr ng làm vi c trongạ ề ệ ượ ự ậ ả ệ ườ ệsu t th i gian qua V phía nhà tr ng em r t c m n các th y cô đã t oố ờ ề ườ ấ ả ơ ầ ạđi u ki n cho em đ c tr c ti p tham gia vào môi tr ng làm vi c th c t ề ệ ượ ự ế ườ ệ ự ếV phía công ty, trong th i gian th c t p v a qua dù g p nhi u khó khănề ờ ự ậ ừ ặ ềtrong công vi c nh ng các anh, ch đã nhi t tình giúp đ em gi i quy tệ ư ị ệ ỡ ả ếnh ng khó khăn th c m c đ ng th i tin t ng giao cho em nhi m v trongữ ắ ắ ồ ờ ưở ệ ụcông vi c, em r t bi t n v đi u đó.ệ ấ ế ơ ề ề

Báo cáo này là k t q a c a qúa trình sau h n hai tháng th c t p hèế ủ ủ ơ ự ật i công ty C ph n Công ngh Windsoft Vi t Nam, đây th t s là kho ngạ ổ ầ ệ ệ ậ ự ảth i gian giúp em có cái nhìn m i v ngành h c mà mình đang theo đu i.ờ ớ ề ọ ổNó giúp em có thêm các kĩ năng m m khi đi ph ng v n, kh năng gi iề ỏ ấ ả ảquy t công vi c, cách đ trình bày ý ki n c a mình m t cách logic d hi u.ế ệ ể ế ủ ộ ễ ểV m t chuyên môn, th i gian th c t p v a qua là kho ng th i gian đ emề ặ ờ ự ậ ừ ả ờ ểtìm hi u thêm v các công c , ngôn ng l p trình m i, giúp em có thêmể ề ụ ữ ậ ớm t l ng l n ki n th c mà em ch a th trau d i khi đang h c t i nhàộ ượ ớ ế ứ ư ể ồ ọ ạtr ng Có đ c nh ng thành qu nh v y, ngoài s n l c, c g ng c aườ ượ ữ ả ư ậ ự ỗ ự ố ắ ủb n thân, s ch b o nhi t tình c a các anh ch trong công ty WindSoft, cònả ự ỉ ả ệ ủ ịcó s giúp đ nhi t tình c a th y, cô đã tìm ki m và trao cho em c h i l nự ỡ ệ ủ ầ ế ơ ộ ầnày.

Cu i cùng em xin g i l i c m n chân thành, sâu s c nh t đ n th yố ử ờ ả ơ ắ ấ ế ầcô và công ty WindSoft, đã t o đi u ki n cho em có đ c môi tr ng h cạ ề ệ ượ ườ ọt p cũng nh làm vi c hi u q a nh t.ậ ư ệ ệ ủ ấ

Em xin chân thành c m n!ả ơ

Hà N i, tháng 4ộnăm 2021

Sinh viên

GI I THI UỚỆI.Tìm hi uể

1 Đôi nét v Công ty C ph n Công ngh Windsoft Vi t Namề ổ ầ ệ ệ1.1: L ch sị ử

Windsoft thành l p năm 2018, chuyên cung c p các gi i pháp ph n m m ngậ ấ ả ầ ề ứd ng mobile giúp qu n tr - chuy n đ i s doanh nghi p và nâng cao tr i nghi mụ ả ị ể ổ ố ệ ả ệkhách hàng th i đ i công ngh 4.0 T tháng 05/2020 Windsoft tr thành thành viênờ ạ ệ ừ ởc a CleverGroup – Công ty hàng đ u trong lĩnh v c Digital Marketing, đ i tác l n c aủ ầ ự ố ớ ủGoogle và Facebook t i Vi t Nam.ạ ệ

1.2: D ch v c a Windsoftị ụ ủ

- Thi t k ph n m m cho di đ ng:ế ế ầ ề ộ+ Android, iOS

+ ng d ng di đ ng tr c tuy nỨ ụ ộ ự ế+ ng d ng bán hàngỨ ụ

+ ng d ng chăm sóc khách hàngỨ ụ+ ng d ng qu n lý doanh nghi pỨ ụ ả ệ- Ứng dụng web và thiết kế website:

+ Thi t k và phát tri n Website d ch vế ế ể ị ụ+ ng d ng n n t ng webỨ ụ ề ả

- Phần mềm quản trị doanh nghiệp:

+ Giải pháp quản lý trung tâm đào tạo+ Giải pháp chăm sóc khách hàng

+ Giải pháp hệ thống doanh nghiệp vận chuyển- Tư vấn triển khai giải pháp chuyển đổi số:

+ Giải pháp bán hàng tích điểm+ Giải pháp ứng dụng kinh tế chia sẻ

+ Bảng điện tử online

+ Dịch vụ quảng bá thông tin doanh nghiệp2 V ki n th cề ế ứ

2.1: JavaScripta JavaScript là gì?

JavaScript là m t ngôn ng l p trình đa n n t ng (cross-platformộ ữ ậ ề ả ),

ngôn ng l p trình k ch b n, h ng đ i t ng JavaScript là m t ngôn ngữ ậ ị ả ướ ố ượ ộ ữnh và nh (small and lightweight) Khi n m bên trong m t môi tr ngỏ ẹ ằ ộ ườ(host environment), JavaScript có th k t n i t i các object c a môi tr ngể ế ố ớ ủ ườđó và cung c p các cách qu n lý chúng (object).ấ ả

JavaScript ch a các th vi n tiêu chu n cho các object, ví d nh :ứ ư ệ ẩ ụ ưArray, Date, và Math, và các y u t c t lõi c a ngôn ng l p trình nh : toánế ố ố ủ ữ ậ ưt (operators), c u trúc đi u khi n (control structures), và câu l nh.ử ấ ề ể ệJavaScript có th đ c m r ng cho nhi u m c đích b ng vi c b sungể ượ ở ộ ề ụ ằ ệ ổthêm các object, Ví d :ụ

● Client-side JavaScript - JavaScript phía máy khách, JavaScript đ c m r ngượ ở ộb ng cách cung c p các object đ qu n lý trình duy t và Document Object Modelằ ấ ể ả ệ(DOM) c a nó Ví d , ph n m r ng phía máy khách cho phép m t ng d ng tácủ ụ ầ ở ộ ộ ứ ụđ ng t i các y u t trên m t trang HTML và ph n h i gi ng các tác đ ng c aộ ớ ế ố ộ ả ồ ố ộ ủng i dùng nh click chu t, nh p form, và chuy n trang.ườ ư ộ ậ ể

● Server-side JavaScript - JavaScript phía Server, JavaScript đ c m r ng b ngượ ở ộ ằcách cung c p thêm các đ i t ng c n thi t đ đ ch y JavaScript trên máy ch Víấ ố ượ ầ ế ể ể ạ ủd , ph n m r ng phía server này cho phép ng d ng k t n i v i c s d li uụ ầ ở ộ ứ ụ ế ố ớ ơ ở ữ ệ(database), cung c p thông tin m t cách liên t c t m t yêu c u t i ph n khác c aấ ộ ụ ừ ộ ầ ớ ầ ủ

ng d ng, ho c th c hi n thao tác v i các t p tin trên máy ch

b JavaScript và Java

JavaScript và Java thì giống nhau ở những cái này nhưng lại khácnhau ở cái khác Ngôn ngữ JavaScript có lẽ giống giống với ngôn ngữ Javanhưng JavaScript không có khai báo static cũng như không có "tính mạnhvề kiểu" (strong type checking) như Java Cú pháp (syntax) lập trình, đặttên công thức và xây dựng điều khiển lưu lượng (control-flow) cơ bản củaJavaScript phần lớn dựa theo ngôn ngữ lập trình Java, đó cũng là lý do tạisao JavaScript được đổi tên từ LiveScript thành JavaScript.

Ngược lại với hệ thống thời gian biên dịch (compile-time) Java củacác lớp được xây dựng bởi các khai báo, JavaScript hỗ trợ nền tảng hệthống thời gian chạy dựa trên một số lượng nhỏ các loại dữ liệu đại diệncho số, boolean và dữ liệu các chuỗi JavaScript có một mô hình ít phổ biếnhơn là mô hình đối tượng dựa trên nguyên mẫu (prototype-based) thay vìcác mô hình đối tượng dựa trên lớp (class-based) Các mô hình dựa trênnguyên mẫu cung cấp khả năng thừa kế năng động, nghĩa là, những gì đượckế thừa có thể khác nhau cho các đối tượng khác nhau JavaScript cũng hỗtrợ các phương thức (function) không khai báo bất cứ gì ở trong Phươngthức có thể là một trong các thuộc tính (property) của các đối tượng, thựcthi như là một phương thức đã được định kiểu (loosely typed methods).

JavaScript là một ngôn ngữ rất tự do so với Java Bạn có thể khôngcần khai báo tất cả biến (variable), lớp (class) và cả phương thức (method).Bạn không cần quan tâm cho dù phương thức đó là public, private hoặcprotected, và bạn không cần phải implement interfaces Biến, tham số(parameters), và kiểu trả về của phương thức (function return) cũng khôngcần phải rõ ràng.

2.2: React Nativea React Native là gì?

React Native là một framework được tạo bởi Facebook, cho phép developer xây dựng các ứng dụng di động trên cả Android và iOS chỉ với một ngôn ngữ lập trình duy nhất: JavaScript

Sự ra đời của React Native là lời giải cho bài toán liên quan đến hiệunăng Hybrid và sự phức tạp khi phải viết nhiều loại ngôn ngữ native cho từng nền tảng di động trước đó.

b H c React Native đ làm gì?ọ ể

H c React Native s giúp b n ti t ki m đ c nhi u th i gian và côngọ ẽ ạ ế ệ ượ ề ờs c n u mu n xây d ng m t ng d ng đa n n t ng (multi-platform) Ch ứ ế ố ự ộ ứ ụ ề ả ỉc n bi t JavaScript, không c n ph i h c thêm b t c ngôn ng nào khác, ầ ế ầ ả ọ ấ ứ ữ

● Th i gian phát tri n ng d ng đ c rút ng nờ ể ứ ụ ượ ắ

● Ti t ki m chi phí nhân l c cho doanh nghi pế ệ ự ệ

● Kh năng tái s d ng code cao (75% – 80%)ả ử ụ

● Kh năng tùy bi n không th c s t t v i m t vài moduleả ế ự ự ố ớ ộ

2.3: React Native ho t đ ng nh th nào?ạ ộ ư ế

Ý tưởng viết mobile apps trong JavaScript có vẻ hơi lạ Làmsao để sử dụng React hoạt động đới với môi trường phát triển mobile.Để hiểu về nền tảng kỹ thuật của React Native Đầu tiên chúng ta sẽcần nhớ lại một trong những tính năng của React đó là Virtual DOM

Trong React, Virtual DOM hoạt động như một layer giữa mô tảvề cách hiển thị mọi thứ và công việc được thực hiện để hiển thị trênpage Để hiển thị UI trên Browser, developer phải sửa DOM(Document Object Model) của Browser Đây là cách tốn hiệu năng vìviết lại DOM nhiều lần sẽ tác động đáng kể đến performance Thay vìthay đổi trực tiếp trên page, React tính toán những thay đổi cần thiếtbằng cách sử dụng một phiên bản bộ nhớ của DOM hay nói cách kháclà một bản sao của DOM và hiển thị lại những thay đổi cần thiết.Dưới đây là hình ảnh mô tả cho hoạt động của React

D i đây là cách mà React Native ho t đ ng Thay vì render ướ ạ ộDOM c a browser, Reat Native g i Objective-C API đ hi n th lên ủ ọ ể ể ịiOS component, ho c Java API đ hi n th Android component.ặ ể ể ị

Bridge là c u n i gi a các React Component v i native UI elementầ ố ữ ớ

Rendering LifeCycle

Component

Sau đó React x lý vi c rendering và rerendering các component nào c n thi tử ệ ầ ế

2.4: L p trình Mobileậ

Ngày nay các thi t b di đ ng không ch tăng lên v s l ng cũngế ị ộ ỉ ề ố ượnh ng i dùng mà còn tăng lên v t n su t s d ng, cùng v i đó là cu cư ườ ề ầ ấ ử ụ ớ ộcách m ng 4.0, các thi t b di đ ng giúp con ng i luôn ti p c n đ cạ ế ị ộ ườ ế ậ ượthông tin m i lúc, m i n i Ch v i nh ng đi u ki n nh trên ta cũng có thọ ọ ơ ỉ ớ ữ ề ệ ư ểth y l p trình mobile hi n đang là m t lĩnh v c r t đ c quan tâm, nh t làấ ậ ệ ộ ự ấ ượ ấtrong k nguyên s ỷ ố

Hi n t i, ph n l n mobile s d ng h đi u hành là Android và iOS,ệ ạ ầ ớ ử ụ ệ ềđi đ u trong phát tri n hai h đi u hành dành cho mobile này là Google vàầ ể ệ ềApple, h đ u có nh ng nguyên t c riêng trong h th ng c a mình đó làọ ề ữ ắ ệ ố ủkhó khăn ban đ u cho các l p trình viên khi ph i l a nh ng ph n riêng đầ ậ ả ự ữ ầ ểl p trình Tr c đây Android v n l p trình s d ng ngôn ng Java là ngônậ ướ ẫ ậ ử ụ ững chính đ l p trình có h tr C/C++ cùng v i s phát tri n c a IDEữ ể ậ ỗ ợ ớ ự ể ủriêng là Android Studio, hi n nay Android đang phát tri n m t ngôn ngệ ể ộ ữm i giành riêng cho mình là Kotlin Bên c nh đó là iOS s d ng ngôn ngớ ạ ử ụ ữ

Objective C và Swift đ l p trình.ể ậ

Năm 2012 Mark Zuckerberg đã phát biểu, "Sai lầm lớn nhất của chúng tôikhi làm công ty là dựa trên quá nhiều HTML hơn là môi trường phát triểngốc".Ông hứa rằng Facebook sẽ sớm cung cấp trải nghiệm di động tốt hơn.

Kỹ sư Jordan Walke tại Facebook đã tìm ra cách xây dựng các thànhphần UI cho iOS bằng một luồng JavaScript Họ quyết định tổ chức cuộcthi Hackathon để hoàn thiện nguyên mẫu hệ thống để có thể xây dựng cácứng dụng di động gốc (native app) bằng công nghệ này

Sau nhiều tháng phát triển, Facebook đã phát hành phiên bản đầutiên cho React Native vào năm 2015 Trong một cuộc hội thảo công nghệ,Christopher Chedeau cho biết Facebook đã sử dụng React Native trongphát triển ứng dụng nhóm và ứng dụng quản lí quảng cáo của họ Và đócũng là lịch sử ra đời của React Native.

2.5: M t s ng d ng h tr vi c l p trìnhộ ố ứ ụ ỗ ợ ệ ậa IDE

IDE đ c s d ng cho l p trình đang đ c s d ng hi n t i là Visual Studioượ ử ụ ậ ượ ử ụ ệ ạCode (mã ngu n m ), Android Studio, Intellij idea dành cho Windows, Linux vàồ ởMacOS, h tr debug đi kèm v i git và các công c check l i khác.ỗ ợ ớ ụ ỗ

b Máy oả

Máy o hi n t i đang đ c s d ng ph bi n cho Androidả ệ ạ ượ ử ụ ổ ếlà Genymotion l p trình viên có th s d ng máy o này thay vì ph i mua máy th tậ ể ử ụ ả ả ậđ ch y trên các dòng máy Android khác nhau.ể ạ

Ngoài ra, cũng có th s d ng máy o cung c p trên Android Studio và iOSể ử ụ ả ấsimulator có trên h đi u hành MacOS.ệ ề

c Adobe XD

Adobe XD là ph n m m chuyên h tr vầ ề ỗ ợ ề thi t k websiteế ế và App AdobeXD là tên g i t t c a Adobe Experience Design, t p trung nâng cao tr i nghi mọ ắ ủ ậ ả ệng i dùng trên Web/App.ườ

Một số ứng dụng phổ biến mà Adobe XD hỗ trợ:● Hiểu quy trình xây dựng Wireframe

Thiết kế giao diện App Mobile

● Thiết kế Web● Thiết kế Landing Page

Thực tế, bạn có thể thiết kế giao diện người dùng Web/App qua Photoshophoặc Illustrator Dẫu vậy, Adobe XD vẫn là phần mềm ‘vàng’ trong làng thiết kếgiao diện UI UX Nó bắt nguồn từ một số khác biệt sau:

● Giao diện Adobe XD ít công cụ hơn Photoshop hay Illustrator nên dễ dàngsử dụng hơn

● Bạn có thể mở nhiều artboard cùng lúc cho nhiều giao diện màn hình tiếptheo để tiện lợi cho việc thiết kế web.

● Adobe XD là một phần mềm thiết kế website khá tương tự về giao diện vàđiều hướng với phần mềm Xcode (công cụ lập trình iOS) Vậy nên nếu bạnlà một coder hay từng sử dụng Xcode thì việc chuyển hướng qua AdobeXD càng đơn giản.

● Thiết kế giao diện trên Adobe XD có thể chia sẻ Online cho người khác khibạn đã hoàn thành

d Postman

Postman là một công cụ cho phép chúng ta thao tác với API, phổ biến nhất

là REST Postman hiện là một trong những công cụ phổ biến nhất được sử dụngtrong thử nghiệm các API Với Postman, ta có thể gọi Rest API mà không cần viếtdòng code nào.

Postman hỗ trợ tất cả các phương thức HTTP (GET, POST, PUT, PATCH,DELETE, …) Bên cạnh đó, nó còn cho phép lưu lại lịch sử các lần request, rấttiện cho việc sử dụng lại khi cần.

các hành đ ng và theo dõi các sagas t bên trong Reactotron.ộ ừ

II.Bài toán

Lập trình ứng dụng du lịch (Travelling App) sử dụng React Native và các công cụ hỗ trợ.

Sinh viên: Nguy n Văn Th ngễ ắ

Công ty th c t p: ự ậ Công ty C ph n Công ngh Windsoft Vi t Namổ ầ ệ ệ

Ng i h ng d n: Anh Nguy n Tr ng Thăngườ ướ ẫ ễ ườS đi n tho i: ố ệ ạ

Đ a ch e-mail: thangnt@winds.vnị ỉTh i gian th c t p: 08/2020 – 02/2021ờ ự ậ1 Ý th c làm vi c: ứ ệ

2 Kh năng làm vi c/h c h i: ả ệ ọ ỏ

3 M c đ hoàn thành nh ng nhi m v đ c giao: ứ ộ ữ ệ ụ ượ

4 Xác nh n công vi c báo cáo:ậ ệ

5 Xác nh n k t qu đ t đ c: ậ ế ả ạ ượ

6 Nh ng v n đ c n góp ý v i th c t p sinh/ nhà tr ng đ công vi c có th ữ ẫ ề ầ ớ ự ậ ườ ể ệ ểti n hành t t h n:ế ố ơ

7 Nh ng ý ki n khác:ữ ế

8 Đi m đánh giá:ểD u xác nh n c a công tyấ ậ ủ

Xác nh n c a ng i đánh giá ậ ủ ườ

(Kí và ghi rõ h tên)ọ