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

Cú pháp syntax lập trình, đặt tên công thức và xây dựng điều khiển lưu lượng control-flow cơ bản của JavaScript phần lớn dựa theo ngôn ngữ lập trình Java, đó cũng là lý do tại sao JavaSc

Đ 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ệp

2 V ki n th cề ế ứ

2.1: JavaScript

a 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ác nhau ở cái khác Ngôn ngữ JavaScript có lẽ giống giống với ngôn ngữ Java nhưng JavaScript không có khai báo static cũng như không có "tính mạnh

về kiểu" (strong type checking) như Java Cú pháp (syntax) lập trình, đặt tên công thức và xây dựng điều khiển lưu lượng (control-flow) cơ bản của JavaScript phần lớn dựa theo ngôn ngữ lập trình Java, đó cũng là lý do tại sao 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ủa cá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ện cho số, boolean và dữ liệu các chuỗi JavaScript có một mô hình ít phổ biến hơ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ên nguyên mẫu cung cấp khả năng thừa kế năng động, nghĩa là, những gì được

kế 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ương thức có thể là một trong các thuộc tính (property) của các đối tượng, thực thi 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ông cầ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ặc protected, 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ông cần phải rõ ràng

2.2: React Native

a 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ệu nă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, ầ ế ầ ả ọ ấ ứ ữ

b n đã có th chi n đ u trên m i m t tr n.ạ ể ế ấ ọ ặ ậ

c u và nh c đi m c a React NativeƯ ượ ể ủ

u đi m:

● S d ng ít native code h nử ụ ơ

● 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%)ả ử ụ

● Tr i nghi m ng i dùng r t t tả ệ ườ ấ ố

● Không c n nhi u ki n th c n nầ ề ế ứ ề

Nh c đi m:ượ ể

● Ch h tr 2 n n t ng Android và iOSỉ ỗ ợ ề ả

● Hi u năng s th p h n v i ng d ng thu n native codeệ ẽ ấ ơ ớ ứ ụ ầ

● B o m t không caoả ậ

● Có m t s th vi n c n tr phíộ ố ư ệ ầ ả

● 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àm sao để 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ên page Để 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ết bằng cách sử dụng một phiên bản bộ nhớ của DOM hay nói cách khác

là 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ôi khi làm công ty là dựa trên quá nhiều HTML hơn là môi trường phát triển gố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ành phần UI cho iOS bằng một luồng JavaScript Họ quyết định tổ chức cuộc thi 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 đầu tiê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 trong phá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 Adobe

XD 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 Photoshop hoặ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àng

sử 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ếp theo để 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ạn

là một coder hay từng sử dụng Xcode thì việc chuyển hướng qua Adobe

XD 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 khi bạ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ụng trong thử nghiệm các API Với Postman, ta có thể gọi Rest API mà không cần viết dò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ất tiện cho việc sử dụng lại khi cần

e Reactotron

Reactotron là ng d ng dành cho máy tính đ bàn cho phép b n g l i choứ ụ ể ạ ỡ ỗ

ng d ng React và React Native M t s tính năng chính g m inspecting (ki m

tra), modifying (s a đ i) và đăng ký tr ng thái ng d ng, theo dõi các yêu c uử ổ ạ ứ ụ ầ HTTP đ c th c hi n thông qua ng d ng, đánh giá hi u su t ng d ng và truyượ ự ệ ứ ụ ệ ấ ứ ụ nguyên các l i V i vi c s d ng Redux trong React Native, taỗ ớ ệ ử ụ th m chí có th g iậ ể ử

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ợ

Ứng dụng có các chức năng:

- Luồng xác thực (Authentication): đăng nhập, đăng ký, quên mật khẩu, đổi mật khẩu

- Luồng chính (Main): theo dõi danh mục các địa điểm du lịch nổi tiếng do người dùng cung cấp (người dùng đi du lịch và chụp ảnh, đăng bài về địa điểm mà mình đã đến tham quan), xem thông tin về địa điểm du lịch, thêm vào danh sách địa điểm ưa thích

3.

CÔNG VI C TRI N KHAI Ệ Ể

CÁC K T QU ĐÃ Đ T Đ Ế Ả Ạ ƯỢ C

PH L C Ụ Ụ

NH N XÉT V SINH VIÊN TH C T P Ậ Ề Ự Ậ

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: ứ ệ