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

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

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

<b>KHOA TOÁN – C - TIN H CƠỌ</b>

- ---

<b>--BÁO CÁO TH C T PỰẬ</b>

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

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

<i><b>- Hà N i, 04/2020 </b></i><b>ộ</b> <i><b> </b></i>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

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

<b>KHOA TOÁN – C - TIN H CƠỌ</b>

- ---

<b>--BÁO CÁO TH C T PỰẬ Phân tích thi t k h th ng thơng tin</b>

<b>ếế ệố</b>

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

<i><b>- Hà N i, 04/2020 </b></i><b>ộ</b> <i><b></b></i>

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<b>M C L CỤỤDANH M C T VI T T TỤỪẾẮ</b>

<b>DANH M C HÌNH NHỤẢL I C M NỜẢƠ</b>

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!ả ơ

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

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

Sinh viên

<b>GI I THI UỚỆ</b>

<b>I.Tìm hi uể</b>

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

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

+ 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ộ ữ ậ ề ả <b>),</b>

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 :ụ

<small>●</small> 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.ườ ư ộ ậ ể

<small>●</small> 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.

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

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 ngun 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ênngun 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, ầ ế ầ ả ọ ấ ứ ữ

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

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

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

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

<small>●</small> 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 tố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

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

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.ặ ể ể ị

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

<b>Rendering LifeCycle</b>

Component

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

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ớ ạ ử ụ ữ

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

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 q 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 để hồn thiện ngun 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.ể ạ

Ngồ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ợ:<small>●</small> Hiểu quy trình xây dựng Wireframe

Thiết kế giao diện App Mobile

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

<small>●</small> Thiết kế Web<small>●</small> 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:

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

<small>●</small> 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.

<small>●</small> 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.

<small>●</small> 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

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

là REST. <b>Postman</b> 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.

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

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

<b>II.Bài tốn</b>

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: ị ỉTh i gian th c t p: 08/2020 – 02/2021ờ ự ậ1. Ý th c làm vi c: ứ ệ

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

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:ế ố ơ

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

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á ậ ủ ườ

<b>(Kí và ghi rõ h tên)ọ</b>

</div>