CHƯƠNG 1: TỔNG QUAN 1. Giới thiệu đề tài Đề tài xây dựng ứng dụng học tiếng Nhật trên nền tảng IOS, được sử dụng các công nghệ mới nhất và được ưa thích nhất hiện nay là MERN stack, ứng dụng được thiết kế phù hợp với tất cả màn hình trên di động, giao diện thân thiện, dễ sử dụng, performance tốt, đề tài được xây dựng hướng tới cho người học có thể vừa học vừa chơi, tạo động lức để học, với các chủ đề , video, từ vựng đa dạng, chơi game tạo nên môi trường giải trí trong học tập. Lý do chọn đề tài Với niềm đam mê đất nước xứ mặt trời mọc và ham muốn chinh phục ngôn ngữ Nhật Bản, qua thời gian tìm hiểu các ứng dụng học tiếng Nhật, nhóm thực hiện nhận thấy các ứng dụng còn quá nhiều thiếu sót, các tính năng chưa ổn định và số lượng từ vựng, hội thoại còn quá ít, nên nhóm thực hiện đã quyết định làm app học tiếng Nhật với mong muốn để cải thiện những thiếu sót của các ứng dụng khác, đồng thời phát triển cho ứng dụng được nhiều người biết đến. Mục đích của đề tài Xây dựng ứng dụng học tiếng Nhật với mong muốn giúp cho người dùng có thể học ngôn ngữ tiếng Nhật hiệu quả, một ứng dụng có thể vừa học vừa chơi, học theo flashcards, học theo từng lộ trình, với bộ chủ đề đa dạng, ngoài ra người dùng có thể tự note các tự vựng muốn học với tính năng tạo khoá học và từ vựng của chính mình, ngoài ra nhóm thực hiện muốn xây dựng một cộng đồng cùng nhau học tiếng Nhật vói tính năng chat cùng, đăng tin để chia sẻ kinh nghiệm học tập, với các tính năng vừa chơi vừa giải trí theo dạng quiz, có thể chơi với nhau tại cùng thời điểm đó.
Phạm vi nghiên cứu Khảo sát các ứng dụng học tiếng Nhật trên google play (android) và app store (ios) tập trung chủ yếu vào các ứng dụng liên quan đến học ngôn ngữ. Phương pháp nghiên cứu + Sử dụng và phân tích ưu và nhược điểm của các ứng dụng. + Tìm ra các tính năng thiếu sót từ đó áp dụng để xây dựng ứng dụng. 2 do an CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG 2.1 Khảo sát hiện trạng 2.1 Ứng dụng English Pop Quiz Ưu điểm: + Các chủ đề và từ vựng đa dạng, mỗi chủ đề ứng với level khác nhau, học theo dạng quiz vừa học vừa chơi, giải trí phù hợp với mọi lứa tuổi.
+ Không cần kết nối Internet để chơi. Nhược điểm: + Chủ đề ít chỉ có 12 chủ đề, ít tính năng, chỉ có tính năng chơi game quiz để học, màu hơi khó nhìn. + Quảng cáo nhiều, kết thúc một lượt chơi, tải quảng cáo 15s để có thể chơi tiếp 3 do an 2.2 Ứng dụng Quizlet Ưu điểm: + Học với flashcards. + Tự viết từ vựng mình muốn nhớ để học.
+ Có thể học nhiều ngôn ngữ khác nhau. Nhược điểm: + Không có lộ trình học cụ thể. + Các tính năng nâng cao không được sử dụng free, phải nâng cấp quizlet-plus.3 Ứng dụng Takoboto: Japanese Dictionary Hình 1: Giao diện ứng dụng Takoboto Ưu điểm: + Nhiều từ vựng + Đầy đủ chữ kanji, hiragana, katakana + Translate là tiếng anh nên không phù hợp với người không biết tiếng Anh + Tra cứu rất tiện Nhược điểm: + Giao diện xấu, khó sử dụng + Không có phát âm 5 do an 2.4 Kết luận từ khảo sát Những điểm cần tiếp thu của ứng dụng: • Giao diện đơn giản dễ thao tác • Game đơn giản, dễ hiểu và sử dụng Những hạn chế cần tránh: • Quảng cáo nhiều • Chưa có lộ trình cụ thể 6 do an CHƯƠNG 3: CƠ SỞ LÝ THUYẾT 3.1 React Native là gì? React Native là một framework xây dựng ứng dụng di động Native sử dụng ngôn ngữ Javascript do Facebook phát hành. Sử dụng React Native để xây dựng ứng dụng iOS và Android chỉ cần 1 ngôn ngữ javascript duy nhất.
Để hiểu rõ về React Native là gì, chúng ta cần phân biệt sự khác nhau giữa ứng dụng Native và Hybrid. Trang chủ của React Native: https://facebook.io/react-native/ Hình 2: Phân biệt ứng dụng native và hybrid [1] 7 do an 3.2 Ứng dụng Hybrid Hybrid mobile apps giống bất kỳ những app khác trên điện thoại di động. Chúng có thể cài đặt được trên điện thoại của bạn. Bạn có thể tìm chúng trên các chợ ứng dụng.
Với chúng, bạn có thể chơi game, kết nối bạn bè qua các mạng xã hội, chụp ảnh, theo dõi sức khoẻ, và nhiều hơn nữa. Giống như những trang web khác trên internet, hybrid mobile apps cũng được xây dựng bằng sự kết hợp của các công nghệ web như HTML, CSS và Javascript. Chỉ khác là các ứng dụng hybrid mobile được lưu trữ bên trong một ứng dụng native sử dụng WebView. (Bạn có thể tưởng tượng rằng một WebView như là một cửa sổ trình duyệt được cấu hình chạy fullscreen bên trong một ứng dụng) Chính nhờ điều này, nên chúng có thể truy cập được vào các chức năng dựa trên phần cứng của điện thoại như là cảm biến gia tốc, camera, contacts, và nhiều hơn nữa.
Đây là những khả năng thường bị hạn chế khi truy cập trên các trình duyệt di động. Hơn nữa, những ứng dụng hybrid mobile có thể còn bao gồm các thành phần Native UI trong những trường hợp cần thiết. Hình 3: Hybrid và Native. 8 do an • Ưu điểm của Hybrid app: o Viết một lần chạy mọi nơi, tiết kiệm được rất nhiều chi phí.
o Native app làm được những gì thì Hybird app cũng làm được. o Không cần biết Java hay Objective-C để tạo ra các ứng dụng mobile. o Ứng dụng Hybrid có thể đưa lên các chợ ứng dụng App Store và Play Store như Native app. • Tuy nhiên, Hybrid app cũng có một số nhược điểm: o Ứng dụng có thể chậm và giật hơn Native app.
o Gặp vấn đề với giao diện trên nhiều thiết bị. o Một số task vụ khi làm sẽ khó hơn native app, đặc biệt là những task phải can thiệp tới phần cứng 3.3 Ứng dụng Native Là ứng dụng được phát triển trực tiếp bằng ngôn ngữ của hệ điều hành đó cung cấp. Ví dụ với iOS là Objective-C, Swift và Android là Java, Window phone là C++ hoặc C#. Các ứng dụng viết bằng ngôn ngữ này được biên dịch ra ngôn ngữ máy trên điện thoại và có toàn bộ tính năng mà hệ điều hành đó cung cấp.
Do là ngôn ngữ trực tiếp cũng như không phải thông qua ứng dụng nào khác nên tốc độ là nhanh nhất. Tốc độ ở đây bao gồm tốc độ hiển thị (độ mượt), và tốc độ xử lý. Nếu để ý kỹ bạn sẽ thấy các thao tác của ứng dụng native như chuyển trang, điều hướng, cuộn trang đều rất mượt. Với việc hơn hẳn về tốc độ xử lý, nên ứng dụng hybrid khó có thể làm được ứng dụng nặng đồ hoạ như game, mặc dù vẫn có thể làm được nhưng không mượt mà nên hầu như hiếm ai dùng hybrid cho lập trình game cho điện thoại di động (ngoại trừ một số game đơn giản như xếp hình, giải câu đố, 2048…) 9 do an Hình 4: Android, IOS và Window Phone • Ưu điểm của Native app: o Về tính năng: Ứng dụng Native App có khả năng truy cập các phần cứng như: GPS, Camera, thiết bị thu âm… Đồng thời, nó cũng có quyền truy cập đến quyền Local như: tạo, ghi, sao chép, đọc tập tin, thực hiện cuộc gọi, nhắn tin….
o Về tính năng native app có khả năng truy cập các phần cứng (như camera, GPS, thiết bị thu âm… ) và có thể truy cập đến các quyền local như : sao chép, tạo, ghi, đọc tập tin (trên bộ nhớ của mobile), các thông tin danh bạ, thông tin cá nhân, thực hiện cuộc gọi, nhắn tin… Nói cách khác, native app có thể khai thác được sức mạnh phần cứng nhiều nhất của nền tảng. Trong khi Mobile Web app thì không thể (có trường hợp có thể đọc file, như upload). o Ở chế độ offline: Native app có lợi thế so với mobile web app (luôn phải chạy online). Ở offline-mode, native app sẽ dùng những dữ liệu đã cache trước đó ở lần cuối cùng mà người dùng truy cập online.
10 do an • Nhược điểm của Native app: o Không thể cross platform: một native app chỉ có thể chạy trên một hệ điều hành nhất định. o Mất nhiều thời gian khi bảo trì hoặc nâng cấp vì phải sửa chữa từng hệ điều hành. o Tính đa dạng phiên bản của hệ điều hành làm cản trở việc phổ dụng các native app. Các thiết bị chạy phiên bản hệ điều hành cũ hơn sẽ không cài đặt được.4 Tính năng của React Native React Native là framework giúp lập trình viên viết ứng dụng Native chỉ bằng Javascript, React Native phủ nhận định nghĩa về ứng dụng native ở trên.
Ứng dụng RN truy cập trực tiếp đến toàn bộ APIs của ngôn ngữ Native. Như vậy một ứng dụng được xây dựng bằng react native cho hiệu năng và cảm nhận tương tự như một ứng dụng native. Đầu tiên, có thể dễ dàng giả định rằng React Native sẽ biên dịch ngôn ngữ JS code trực tiếp sang ngôn ngữ native tương ứng. Nhưng điều này thật sự khó khăn vì Objective C hay Java đều là những ngôn ngữ khá chặt chẽ.
Thay vì thế, RN hoạt động một cách thông minh hơn. Về bản chất RN được xem như là một tập hợp các thành phần React (React components), mỗi component thế hiện tương ứng với view hay component nào đó của native. React Native giúp cho lập trình viên web có thể viết ứng dụng native để khắc phục các điểm yếu của ứng dụng web và hybrid. Chỉ với một lập trình viên thành thạo javascript, bạn có thể chiến đấu trên mọi mặt trận web, desktop, server và bây giờ là mobile.
Điều này không những có lợi cho lập trình viên web mà nó giúp cho các doanh nghiệp phát triển sản phẩm đầu cuối với ít nhân lực hơn. Khi xây dựng React Native, điều tuyệt vời là đã được tích hợp tính năng Live Reload tương tự tính năng Hot Replacement Module trong Webpack. Tính năng Live Reload 11 do an khác tính năng Reload, trong khi Live Reload chỉ tải lại chức năng/tập tin nào thay đổi, thì Reload sẽ tải lại toàn bộ mã nguồn. Ngoài ra, bạn cũng dễ dàng debug javascript trong Chrome và Safari.
Đối với những lỗi thuộc Native thì phải cần đến XCode cho iOS hoặc Android Studio cho Android. Hình 5: Menu develop của ứng dụng React Native 12 do an 3.5 Kiến trúc của React Native Cả IOS và Android có một cấu trúc tương tự nhau với những điểm khác biệt nhỏ. Nếu chúng ta nhìn vào tổng thể thì platform này bao gồm 3 phần: 1.