báo cáo chuyên đề thực tập doanh nghiệp 3 nơi thực tập công ty cổ phần công nghệ lansium tên đề tài xây dựng giao diện cho ứng dụng lansium

LỜI CẢMƠNSau thời gian học tập tại trường, sinh viên được hệ thống lại toàn bộ lýthuyếtchuyên ngành và được tham gia kiến tập một số khâu nghiệp vụ cơ bản của cáckiếnthức lý thuyết đã đư

XÂY DỰNG GIAO DIỆN CHO ỨNGDỤNGLANSIUM

NGƯỜI HƯỚNG DẪN TẠI ĐƠN VỊ: Nguyễn Văn VõGIẢNGVIÊNHƯỚNGDẪN:ThS.Lê Từ MinhTrí

SINHVIÊNTHỰC HI Ệ N : ĐinhHả iD ươ ng MÃSỐSV:1924801030155

D19PM02NIÊNKHÓA:2019 -2024

2019-2024

2

LỜI CẢMƠN

Sau thời gian học tập tại trường, sinh viên được hệ thống lại toàn bộ lýthuyếtchuyên ngành và được tham gia kiến tập một số khâu nghiệp vụ cơ bản của cáckiếnthức lý thuyết đã được học Được sự cho phép của Viện Kỹ thuật – Công nghệ vàsựtiếpnhậncủaCôngtyCổphầnCôngnghệLansium;đượcsựquantâm,chỉđạocủaquýthầycôtrongkhoaViệnKỹthuật–CôngnghệvàcácthầycôbộmôntrongTrường;embắt đầu quá trình thực tập của mình tạiCông ty Cổ phần Công nghệ Lansium Khoảngthời gian thực tập tuy ngắn ngủi nhưng em đã được học

nhữngcôngviệcthựctế.Thờigiannàyđãchoemnhữngbàihọckinhnghiệmquýbáu,nhữngkỹnăng cần thiết mà trong thời gian học tập tại trường em chưa có, để em tự tin bướcvàomôitrườnglàmviệc saunày.

Vì bài thực tập được thực hiện trong phạm vi thời gian hạn hẹp và hạn chếvềmặt kiến thức chuyên môn, do đó bài báo cáo của em không thể tránh khỏi nhữngsaisótnhấtđịnh.Đồngthờibảnthânbáocáolàkếtquảcủamộtquátrìnhtổngkết,thuthậpkếtquảtừviệckhảosátthựctế,nhữngbàihọcđúcrúttừtrongquátrìnhthựctậpvàlàmviệc của em Em rất mong có được nhữngý kiến đóng góp của thầy, cô để bài báo cáovàbảnthânemhoànthiệnhơn.

Qua bài báo cáo này, em xin cảm ơn thầy Lê Từ Minh Trí – Thạc sĩ, giảngviênViệnKỹthuật–CôngnghệTrườngĐạihọcThủDầuMột,anhNguyễnVănVõ–Giámđốc Công tyCổ phần Công nghệ Lansium, cũng như các anh/chị trong công ty đãgiúpđỡvàchỉdẫntậntình,tạođiềukiệuđểemhoànthànhbáocáocủamình.

Emxinchânthànhcảmơn.

Hình2.10-Giao diện mờingườidùngvào workspace 21

Hình2.11-Giaodiện xemlời mời 21

Hình2.12-Giaodiệntinnhắnkhi chưacóemoji 22

Hình2.13-Giaodiệncủatinnhắn khiđã cóemoji 22

Hình2.14-Giao diện dichuyểnthẻ 23

Hình2.16-Giaodiện quảnlýdanhsáchphânquyền 24

Hình2.17-Giaodiện chitiếtphânquyền 24

Bảng môtảactor 9

Usecasetừchốilờimờivào workspace 11

Usecasethảemoji chotin nhắn 12

Usecasephânquyềntrongdanhmục 15

thựctếcùngvớinhữngkiếnthứcmàsinhviênđượctiếpthutrêngiảngđườngthìthựcsựrấtcần thiết Hoạtđộng đó sẽ giúp sinh viên biết được việc thật làm thật là như thếnào,kiếnthứctrêngiảngđườngkhácvớiviệcthựchànhtạicôngtylànhư thếnào.Chínhvìvậy cáctrường đại học hiện nay đã áp dụng các chưng trình khảo sát thực tế còn gọi là“thực tập” cho các sinh viên dễ dàng,nhanh chóng tiếp thu kiến thức giữa việc học đivớiviệchành.

Thực tập còn giúp sinh viên không còn bỡ ngỡ khi kết thúc chương trình họctạitrườngmàvẫnkhôngxácđịnhđượclàbảnthânsẽlàmnhữnggìsauđó.Nólàmtăngsựtựtintrongnghềnghiệpcủabảnthân,giúpvượtquanỗisợhãikhôngtênmàmìnhphảiđốimặtởmôitrườnglàmviệckhácnhau.Thôngquacáchoạtđộngđósinhviêncòncócơ hội làm việc tại các tập đoàn lớn, mở ra một tương lai tươisáng Vì thế em đã lựachọnCôngtycổphầnCôngnghệLansiumlànơiđểthựctập.

Lansium là một Công ty startup Mục tiêu của công ty là phát triển ứngdụngLansium trên nhiều nền tảng khác nhau để hỗ trợ cho các doanh nghiệp trong quátrìnhchuyểnđổisố.Thậtmaymắnkhiemđược

2 MỤCTIÊUTHỰC TẬP

Thứhailàđểchúngemcócơhộiđượcvậndụngnhữngkiếnthứcđãhọcởtrườnglớpvàomộtdựánthựctế.Giúpchúngemcũngcốkiếnthức,khinhnghiệmmới.Từđógiúpchúngemtự tin,vữngbướctrênconđườngtươnglaisựnghiệpsắptới.

3 ĐỊAĐIỂMTHỰCTẬP

CôngtyCổphầnCông nghệLansium.4 BỐCỤC BÀIBÁOCÁO

Chương 1: Tổng quan về Công ty Cổ phần Công nghệ Lansium.Chương2:Nộidungthực tập

Chương3:Đánhgiákếtquảvàhướngpháttriển

- Ngườiliênhệ:ÔngNguyễnVăn Võ- Điệnthoại:0984459500

- Email:vo.nguyen@lansium.com - Website:https://lansium.com - Tầmnhìn–giátrịcốtlõi:

o Sựsốnglàsựtraođổi,mỗikhitraođổigiátrịmớiđượcsinhra,conngườicần công cụ để quảnlý sự trao đổi một cách tự nhiên, đơn giản và hiệuquả.

o Chuyểnđổisốsẽđơngiảnnếuchúngtachuyểnđổitừnggiaodịch.

o Côngnghệsẽlànềntảngcủasựkếtnốicácgiaodịch.

1.2 KHÁIQUÁTVỀỨNGDỤNG

Hình1.2 -G i ớ i t h i ệ u v ề ứngdụng

- Ápdụngtrongcáclĩnhvựcsảnxuất,chuỗicungứng,nôngtrại,giáodục,đơnvịhànhchánh- Chạytốttrênđiệnthoại,máytính bảngvàcácthiếtbịdiđộng

- Thânthiện ngườidùng, khôngcần kiếnthứcIT

- Truyxuấtnguồngốcgiaodịch vàkếthợp dễdàngvớicáchệthốngkhác- Tíchhợp nhiềunềntảngvào1hệthống

o Traođổinộibộ

o Quảnlýkếhoạch,quảnlýtheochủđềo Quảnlýtàiliệu

o NềntảngERPo NềntảngIoT

o Cáctiệních (hệthống chỉđường,coupon, )

Hình1.3 -C h i t i ế t s ả n p h ẩ m

CHƯƠNG2.NỘI DUNGTHỰCTẬP

2.1 MÔTẢCÔNGVIỆC

- Xâydựnggiao diệnchocácmodulechứcnăngtrongứngdụngLansium

- Tốiưusửalỗicácvấnđềnảysinhởcácchứcnăngcũcũngnhưlàchứcnănghiệntại- Thamgiađánhgiáđónggópýkiếnxâydựngchức năng

- Họchỏicáccôngnghệmàcôngtysửdụng ReactJs

- ReactJSlàmộtthưviệnJavaScriptmãnguồnmởđượcthiếtkếbởiFacebookđể tạo ranhững ứng dụng web hấp dẫn, nhanh và hiệu quả với mã hóa tốithiểu Mục đích cốt lõi của ReactJSkhông chỉ khiến cho trang web phải thậtmượtmàcònphảinhanh,khảnăngmởrộngcaovàđơngiản.

- Sức mạnh của nó xuất phát từ việc tập trung vào các thành phần riênglẻ.Chính vì vậy, thay vì làm việc trên toàn bộ ứng dụng web, ReactJS chophépmột developer có thể phá vỡ giao diện người dùng phức tạp thành các thànhphầnđơngiảnhơn.

- Tínhnăng: JSX–

JSXlàphầnmởrộngcúphápJavaScript.KhôngnhấtthiếtphảisửdụngJSXtrongpháttriểnReact,nhưngnó đượckhuyếnkhích.

 Cácthànhphần–Reactlàtấtcảvềcácthànhphần.Bạncầnnghĩmọithứnhư

mộtthànhphần Điềunàysẽgiúpbạnduytrìmãkhilàmviệctrêncác dựánquymôlớnhơn.

 TáisửdụngcácComponent:NếubạnxâydựngcácComponentđủtốt,đủ flexible để cóthể thoả các “yêu cầu” của nhiều dự án khácnhau,bạnchỉtốnthờigianxâydựngbanđầuvàsửdụnglạihầunhưtoànbộởcácdựánsau.KhôngchỉriêngmỗiReactJSmàcácframeworkhiệnnaycũngđềuchophépchúngtathựchiệnđiềuđó,vídụFlutterchẳnghạn.

 Có thể sử dụng cho cả Mobile application: Hầu hết chúng ta đềubiếtrằngReactJSđượcsửdụngchoviệclậptrìnhwebsite,nhưngthựcchấtnóđượcsinhrakhôngchỉlàmmỗiđềuđó.NếubạncầnpháttriểnthêmứngdụngMobile,thìhãysửdụngthêmReactNative–mộtframeworkkhác được phát triển cũng chính Facebook, bạncó thể dễ dàng “chiasẻ” các Component hoặc sử dung lại các Business Logictrong ứngdụng.

 Thân thiện với SEO: SEO là một phần không thể thiếu để đưathôngtinwebsitecủabạnlêntopđầutìmkiếmcủaGoogle.BảnchấtReactJSlà mộtthư viện JavaScript, Google Search Engine hiện nay đãcrawlvàindexđượccodeJavaScript,tuynhiênbạncũngcầnthêmmộtvàithưviệnkhácđểhỗ trợ điều nàynhé!

Hình2.1 -R e a c t j s l à gì?

 Tauri

- Taurilàmộtcôngcụpháttriểnứngdụngmáytínhđểbàn(desktopapplication) đanền tảng, kết hợp giữa framework JavaScript React vàcôngcụđónggóiứngdụngTauri.TauriReactchophéplậptrìnhviênsửdụngcáccôngnghệ web hiện đại như HTML, CSS, JavaScript và React để xây dựngcácứngdụngmáytínhđểbànchoWindows,macOSvàLinux,vớikhảnăngđónggói

- Tauri cung cấp một cách tiếp cận linh hoạt cho việc xây dựng các ứngdụngmáy tính để bàn đa nền tảng, và cho phép lập trình viên sử dụng các kỹthuậtweb để phát triển ứng dụng, đồng thời tận dụng các tính năng và khảnăngcủahệđiềuhànhđểcảithiệntrảinghiệmngườidùng.

Hình2.2 -T a u r i h ỗ n h i ề un ề n tảng

- Ưuđiểmcủatauri:

 Đa nền tảng: Tauri React cho phép lập trình viên xây dựng cácứngdụng máy tính để bàn cho nhiều hệ điều hành khác nhau, baogồmWindows, macOSvàLinux.

 TíchhợpReact:TauriReactsửdụngReact,mộttrongnhữngframeworkphổ biến nhấttrong việcxâydựngcácứng dụngwebhiện

đại Điều này giúp cho việc phát triển ứng dụng trở nên dễ dànghơnđốivớicáclậptrìnhviênđãquenvớiReact.

 Khảnăngtùychỉnh:TauriReactchophéplậptrìnhviêntùychỉnhgiaodiện ứng dụngtheo ý muốn, đồng thời cung cấp các API để truy cậpcác tính năng của hệ điều hành nhưquản lý cửa sổ, đọc/ghi file, truycậpcơsởdữ liệu,v.v.

 Hiệu suất cao: Do sử dụng công nghệ web hiện đại và kết hợp vớiTauriđể đóng gói ứng dụng, Tauri React có thể đem lại hiệu suất caochoứngdụngmáytínhđểbàncủabạn.

2.1.2 Mộtsốchứcnăngđã xâydựng

 Modulelờimờivàoworkspace- Tạolờimời

- Xemlời mời

- Chấpnhận, từchốilờimời- Giớihạnquyềntruycập Moduleemojitinnhắn- Thảemojichotinnhắn- Xoáemojichotin nhắn Modulethẻ

- Dichuyểnthẻ- Saochépthẻ

o Đưarahướnggiải quyết

o Tiếnhànhgiảiquyếtcáccôngviệctrongtask

o Sửalỗicácvấnđềnảysinhtrongsuốtquátrìnhlàmkểcảsaukhihoànthànho Tiếpnhậnreviewcủamentervàtiếnhànhsửađổitheoyêucầu

 Modulelờimờivàoworkspace- Tạolờimời:

1.TênUC Tạolờimờivàoworkspace

2.M ô t ả n g ắ n ( m ụ c đ í c h /

ý nghĩa)

Usec a s e n à y m ô t ả c á c h c h ủ s ở h ư u w o r s k s pa c e muốngửilờimờivàoworkspacechoaiđó

3.Tácnhân Chủsởhữu.

4 Điều kiện kích hoạt

5.Tiềnđiềukiện: Chủsỡhưuđãtruycậpvàoứngdụng

6.Luồng sựkiện

6.1.Luồng sựkiệnchính: Chủsởhữu Hệthống-

N h ậ p s ố đ i ệ n t h o ạ icủangườicầnmời

- Hệ thống kiểm

thịra mànhìnhgửilời mời-

Chọnchứcquyềnchongườicầnmời,nhậpthêmnộidụnglời mời nếucóthể

-Hệthốngkiểmtrathôngtinvà sau đótiến hành gửi lờimời

6.2.Luồngsựkiệnthaythế NếuchủsởhữuchọnchứcquyềnchongườimờilàchủsởhữuthìhệthốngsẽbáolỗivàtiếntrìnhsẽbịdừnglạiChủsởhữucóthểdừngtiếntrìnhnàyvàquaytrởlạigiaodiệncàiđặt

7.Hậuđiềukiện: Nếuusecasethànhcôngngườidùngsẽnhậnđượclời mời.

5.Tiềnđiềukiện: Ngườidùngtruycập vào ứngdụng

6.Luồng sựkiện

- Ngườidùngchọntablờimờivàoworkspace- Ngườidùngbấmchấpnhậnlờimời

- Hệthốnghiểnthịdanhsáchlờivàoworkspace

- Hệthốnghiểnthịworkspacemàngườidùngchấpnhận

6.2.Luồngsựkiệnthaythế Người dùng có thể chọn trở về đầu dòng sựkiệnchính hoặc hủy bỏ việc chấp nhận lời mời, lúcnàyusecasekếtthúc.

7.Hậuđiềukiện: Trở về màn hình trang chủ Dữ liệu workspacemớiđược thêm vào tài khoản của người đó(nếuthànhcông).

8.Cácyêucầukhác Không

Usecasechấpnhậnlời mờivàoworkspace- Từchốilờimời

1.TênUC Từchốilời mờivào workspace

5.Tiềnđiềukiện: Ngườidùngtruycập vào ứngdụng

6.Luồng sựkiện

- Ngườidùngchọntablờimờivàoworkspace- Người dùng bấmtừchốilờimời

- Hệthốnghiểnthịdanhsáchlờivàoworkspace

6.2.Luồngsựkiệnthaythế Người dùng có thể chọn trở về đầu dòng sựkiệnchính hoặc hủy bỏ việc từ chối lời mời, lúc nàyusecasekết thúc.

7.Hậuđiềukiện: Trởvềmànhìnhtrangchủ.Dữliệudanhsáchlờimờiđượccậpnhật(nếuthànhcông).

8.Cácyêucầukhác Không

Usecasetừchối lờimời vàoworkspace

 Moduleemojicủatinnhắn

3.Tácnhân Ngườidùng.

4 Điều kiện kích hoạt

Usec a s e n à y b ắ t đ ầ u k h i n g ư ờ i d ù n g c ó c u ộ c t rò chuyệnvớiaiđóhoặctrongmộtnhóm.

5.Tiềnđiềukiện: Ngườidùngđãđăngnhậpthànhcông

6.Luồng sựkiện

- Ngườidùngchọntinnhắnmuốnthảbiểucảm- Ngườidùngchọnbiểucảm

- Hệ thống hiển thị cácbiểucảm

- Hệ thống kiểm chứngcácthông tin sau đó tiếnhànhlưuvàohệ thống

7.Hậuđiềukiện: Dữliệucóthêmbiểucảmmớiđượcthêmvào(nếuthànhcông).

3.Tácnhân Ngườidùng.

4 Điều kiện kích hoạt

-Hệthốngtiếnhànhxoácácemoji màngườiđóđã thả

7.Hậuđiềukiện: Dữliệutinnhắnđược cậpnhật(nếuthành công).

8.Cácyêucầukhác Không Modulethẻ

3.Tácnhân Ngườidùng.

4 Điều kiện kích hoạt

5.Tiềnđiềukiện: Ngườidùng đăngnhậpthànhcông

6.Luồng sựkiện

- Ngườidùngchọnchứcnăngdichuyển- Ngườidùngchọncác thông tin cầnthiếtnhư vị trí bảng và vịtríthẻ

-H ệ t h ố n g t i ế n h à n h d i chuyểnthẻ

6.2.Luồngsựkiệnthaythế Người dùng có thể chọn trở về đầu dòng sựkiệnchính hoặc hủy bỏ việc di chuyển thẻ, lúc nàyusecasekết thúc.

7.Hậuđiềukiện: Trởvềmànhìnhtrangchủ.Dữliệucậpnhậtlạivịtrícủathẻ(nếuthànhcông).

8.Cácyêucầukhác Không

Usecasedichuyểnthẻ- Saochépthẻ

1.TênUC Saochépthẻ

2.M ô t ả n g ắ n ( m ụ c đ í c h /

ý nghĩa)

3.Tácnhân Ngườidùng.

4 Điều kiện kích hoạt

-Ngườidùngchọncácthông tin cần thiếtnhư vịtrí bảng và vịtríthẻ

6.2.Luồngsựkiệnthaythế Người dùng có thể chọn trở về đầu dòng sựkiệnchínhhoặchủybỏviệcsaochépthẻ,lúcnàyusecasekếtthúc.

7.Hậuđiềukiện: Trởv ề m à n h ì n h t r a n g c h ủ D ữ l i ệ u c ó t h ê m th ẻ mới(nếuthànhcông).

8.Cácyêucầukhác Không

Usecasesaochépthẻ Modulephânquyềndanhmục

3.Tácnhân Nhânviên.

4 Điều kiện kích hoạt

5.Tiềnđiềukiện: Nhânviên đăngnhậpthànhcông

6.Luồng sựkiện

- Nhân viên vàodanhmụcchọnvàophânquyềnngười dùng

- Hêthốnghiểnthịgiaodiệnphânquyềnngườidùng

- Hệthốngtiến hànhsao lưulạidữliệuvàthiếtlậpquyền

- Nhân viên chọnvàocác quyền hạnmuốnthiếtlập

6.2.Luồngsựkiệnthaythế Nhânviêncóthểchọntrởvềđầudòngsựkiệnchínhhoặc hủy bỏviệc phân quyền, lúc này use case kếtthúc.

7.Hậuđiềukiện: Dữliệuvềcácquyềnhạnđượccậpnhật(nếuthànhcông).

8.Cácyêucầukhác Không

Usecasephân quyền trongdanh mục

 UsecaseTạolờimời

Hình2.3 -S ơ đồ tuần tựTạo lờimời

Hình2.8 -S ơ đồ tuần tựsao chépthẻ

 UsecaseQuảnlý cácquyềnhạn

Hình2.9 -S ơ đồ tuần tự Quản lýcácquyềnhạn

2.4 GIAODIỆNDEMO

 Modulelờimờivàoworkspace

Giaodiệnmờingườidùngvàoworkspacegồmcó:- Thanhtìmkiếmđểnhậpsốđiệnthoạingười muốn mời.- Thôngtinngườimuốnmời.

- Cáctùychọn,nội dungcủa lời mời.

Hình2.10 -G i a o diện mờingười dùngvàoworkspace

Giaodiệnxemlời mời gồmcó:- Danhsáchlờimời.

- Khinhấnvàomộtlờimờithìsẽhiểnthịchitiếtthôngtincũngnhưcáchànhđộngtươngứng.

Hình2.11 -G i a o d i ệ n xem lờimời

- Danhsáchcấpđộphânquyền

Hình2.16-G i a o diện quảnlý danhsách phânquyền

Giaodiệnchitiếtphânquyềngồmcó:- Danhsáchcấpđộphânquyền- Thanh menuđểcập nhậthoặcxóa.- Thanhchọntab.

- Danhsáchcácchứcnăngtheotừngtabcũngnhưquyềnđối vớitừng tab.

Hình2.17-G i a o d i ệ n chi

tiếtphânquyền

CHƯƠNG3.ĐÁNH GIÁKẾT QUẢVÀHƯỚNG PHÁTTRIỂN

1.2 Chứcnăngchưalàmđược

Do một số nguyên nhân khách quan và chủ quan cũng như việc hạn chế vềmặtthờigianmàđềtàivẫnchưahoànthiệnđượcmộtsốchứcnăng,mộtsốmodulevẫncòntồnđọngbugs.

2 HƯỚNGPHÁTTRIỂN

Sauđâylà mộtsốdựđịnh,phươnghướngphát triểntrong tươnglaicủađềtài:- Hoànthiệncácmoduledomình xâydựng

- Xâydựngthêmcácmodulekháctheohướngpháttriểncủacông ty.

(1).NguyễnGiaTuấnAnh-MaiVănCường-BùiDanhHường,Cơsởdữliệunângcao(2019),NhàxuấtbảnĐHQG-HCM.(2) LậptrìnhNode.jsthậtđơngiản,VNTalking.