Nghiên ứu và xây dựng ông ụ hỗ trợ họ trự tuyến ho họ sinh và sinh viên

Trang 64 Hình trái là màn hình chàserver.

V phía n i dung h c t p

Trong nhi ng h p, không th i dung quá ph c t c bi t là n i dung liên quan t i thí nghi m, th c hành mà Công ngh thông tin không th hi n c hay th hi n kém hi u qu H th ng h c tr c tuy n th thay th c các ho ng liên quan t i vi c rèn luy n và hình thành k bi t là k ng.

V v y u t công ngh

S h n ch v k c i h c s làm gi ng d y h c tr c tuy n Bên c t ng công ngh thông tin (m ng k t i ti , ch n

Các h th ng h c tr c tuy n hi n nay

Moddle

Là h th ng qu n lý h c t p mã ngu n m cho phép t o các khóa h c trên m ng internet hay các website h c t p tr c tuy n [2] Moddle bao g m h u h m t h th o T o l p và qu n lý khóa h c o i dung bài gi ng t i h c o Tr giúp giáo viên t ch c các ho ng nh m qu n lý khóa h c o lu n, ki m tra cu i khóa, bài t p l o Qu n lý h c viên o Qu n lý tài nguyên c a t ng khóa h c o Báo cáo ti n trình h a h c viên

Hình i là c u trúc kh i c a h th ng Moddle [14]

Hình 1 C u trúc kh i h   thng Moddle

H th ng t i m ng tham gia vào h th h c sinh, nhà qu n lý th c s d ng r ng rãi và có r t nhi trong vi c t o, qu n lý bài gi ng tr c truy p m o Là h th ng bao g m t t c ng m ng nên vi t , ph c t i v i v i m t s ng không thành th o công ngh o c bi t forum chia s tài li c video tr c tuy n hay h c th i gian th c o Chú tr ng phát tri ng d ng Tuy có h tr cho thi t b ng d c phát tri n trên các n n t ng riêng bi t.

Sakai 11

Sakai 11, gi t gi i pháp LMS mã ngu n m h tr h u ch n c a m t h th m khác c

Java Sakai 11 có giao di n d s d c s d ng ng, h tr t t vi c giao bài t ngh cho h c sinh và thi t k bài gi ng [14]

Hình Giao di2 n h th ng Sakai 11 

15 c tích h p v i Google Góc và bao g m các công c h tr tra c u, ki m th online, trình chi u slide và cho phép s d ng Dropbox Tuy nhiên, Do vi v n các d án giáo d c l n, có chi c phát tri

(website, ng d ng) nên h n ch ng s d ng C ng phát tri n c khá h p, không nhi u plug-in hay add-ons h tr

Dokeos

Dokeos là m t gi i pháp LMS mã ngu n m c build trên PHP Công c này c phát tri n t c s d ng trên 60 qu c gia khác nhau [14]

Dokeos xây d t công c c, thi t k các m u bài thi, h riêng r và h tr chat gi tr trình li , D c i h c, qu n lý h tr vi c h bài gi c t i lên v nh d ng g c nên t truy n t i còn khá ch

Tóm l i, ạ qua vi c trình bày các v c a vi c h c tr c tuy m t s h th ng h c tr c tuy n hi n hành, tôi xin nêu ra các chi ti tài c n gi i quy

Thứ nh t, c n h ấ tr t t bài gi ng video (ch vi t tay và tài li u) t vi c t o bài gi n vi c truy n tài, hi n th , gi m thi u chi phí t o bài gi ng B studio hay o o h o có

Hướng thứ nhất là đơn giản hóa việc lưu trữ, truyền tải bài giảng: theo

Hướng thứ hai là hỗ trợ chương trình chạy trên đa nền tảng: n : PhoneGap, AppCelerator, Xamarin, React Native, Senc Touch

Công ngh phát tri n   ng dng n tng

V i s ng c a thi t b ng và s khác bi t c a m i n n t ng, ngày nay các phát tri n ng d ng g p nhi cho ra các ng d i dùng phân b nhi u platform khác nhau Trong ngành giáo d c tr c tuy n y, h c sinh và ph huynh có th s d ng các thi t b và n n t ng b t k vi c t o ra ng d ng h tr nên r ph c vi c ph i t o mã ngu n nhi u l n trên t ng n n t ng, hi n nay có nhi u công ngh phát tri n ng d n t ng v i nh m nh nh [3]

Apache Cordova: Ti n thân là PhoneGap, là m t framework n i ti ng c a Adobe System ng c a Cordova là t o ra ng d ng lai (hybrid mobile application) s d nHTLM , CSS và Javascript Nh ng ng d ng này có th ch y trên nhi u n n t ng khác

Hình 4 Apache Cordova m n i b t c a Cordova là th i gian phát tri n ng d t nhi vi c phát tri n t ng ng d ng native, ch c n s d ng JavaScript nên không c n ph i bi t t ng ngôn ng l p trình cho m i h u hành m tr l n nh t c a công ngh này l i là t ng, hi d ng Hi u su t c a các hybrid app ch u so v i native app nên không th dùng xây d ng ng d ng l n, ph c t p yêu c u nhi u d li u và ch ra, các plugin c a Cordova có th c v i m t s thi t b và m t s c h tr giao ti p v i thi t b

React native: là công ngh c t o b i Facebook, cho phép các nhà phát tri n s d ng làm ng d ng trên c Android và iOS v i c m nh n và native M t ví d làm rõ cách v n hành c a React Native là wrapper c a code native

Có r t nhi u thành t c t ho t c r t nhi u traction k t ngày ra i game v m n theo nhi u cách

Phát tri n ng d ng s d ng React native ch c n ngôn ng Java ch s d ch mã JavaScript thành mã native c a t ng n n t giúp ng d ng có th ch m c a React native là vi c phát tri n ng d ng ti m c n native ch c m t ngôn ng , không c n s khác bi t c a h sinh thái m i n n t ng, d ng l i m c t t cho t ng n n t ng, c ng phát tri i nhiên, vi c không h tr cross-platform l m y u c a Reac native, t c là v i Reactt vi t mã ngu n m t l n cho nhi u n n t tr windows phone, thi u m t s thành ph n giao di n phát tri n ng d m tr l n nh t c a React native, khi ngh này không th phát tri c các ng d ng có quy mô l n, ph c t p

Xamarin [4] : m t công ngh l p trình ng d n t ng hi i, có nh m riêng bi t, hi m có so v i các frameworks hi n t i trên th ng mà kh p và tr i nghi i dùng native v

Xamarin s h u logic ng d c chia s trên nhi u n n t mã ngu n ng d n c a l p giao di nh g i c tác v d li u và tích h p backend integration m l n nh t c a Xamarin [5] là s làm vi c c ng tác và chia s mã ngu n d dàng

S d ng Xamarin có th vi t mã ngu n m t l n và biên d ch cho nhi u n n t ng Xamarin h tr ngu ng giao di n d n giao di n c tùy bi n hay các web service bên th ba Ngoài ra, công c phát tri n Xamarin là visual studio, m t IDE r t chuyên nghi p v i nhi u ch tr biên d ch, ki m th hay tri n khai trên thi t b th a, c ng phát tri l n m nh, h a h là công ngh phát tri n ng d ng di ng c m c a các công ngh phát tri n ng d theo hình

Hình 5 So sánh công ngh phát tri n ng dn tng

Công ngh n th bài gihi  ng

Bài giảng ch vi t tay ữ ế

Vi c hi n th ng nét, ch vi t tay hi n nay có nhi n, SDK h tr cho m i t ng Ph i k n System.Drawin vi c v ng nét hay SPEN SDK là là b Kit h tr r t m nh cho vi c dùng bút n tho i Samsung hay UIKit h tr v cho các ng d ng iOS i tóm t m c a các công ngh thông d ng nét hi n nay:

Hình 6 Công ngh hin th ch  vi t tay

Nh n NetFramework hay u h tr r t t t vi c v n t ng n n t m y u l n nh t c h tr n t ng nên chúng ta không th s d ng nó trong d án n bên th ba SkiaSharp n mã ngu n m h th ng nét c 2D và 3D ng th i có th build ng d n t ng Chính v xu t s d ng công ngh hi n th bài gi n ti t công ngh , tôi xin trình bày ph n ti p theo

Hình 7 Công ngh hin th d u PDF  li n

Tóm l i, theo nh ng phân tích gi i quy c v , tôi s s d ng c ngh o Cho vi c phát tri n ng d n t ng: S d ng Xamarin

25 o Cho vi c hi n th bài gi ng XML: S d ng công ngh hi n th ng nét vi t tay - SkiaSharp o Cho vi c hi n th bài gi ng PDF: S d ng công ngh hi n th PDF PDFjs o Cho vi c ch y d li u audio: S d ng d ch v hi n t i trên t ng n n t ng

Ph n ti p theo, tôi xin trình bày chi ti t các công ngh c s d ng

Hình 8 Quá trình hình thành và phát tri n c a Xamarin  

- o Data Access Layer APIs o Business Layer o Service Access Layer o Application Layer o User Interface Layer dùng.

Hình Ki9 n trúc t ng c a xamarin  

Hình Ki10 n trúc liên k t c a Xamarin

Thứ nhất, Write Once, Run Anywhere

Hình 11 Các nn tng h tr  b i Xamarin

Xamarin. trên Windows, Android, nên có

C nay [8] Các phiên b o Android 4.0 + o iOS 6.1 + o Windows 10 o Windows 8.1 o Windows Phone 8.1

Hình 12 Chia s mã ngu n trong Xamarin.Form 

Hình 13 Chia s mã ngu n trong t ng n  n tng

T ng trên cùng là ng d ng phát tri n b i Xamarin theo t ng n n t ng Vi c s d ng các d ch v , control giao di n s

Project Ti có b chuy i (g i là adapter), chuy n mã ngu d ng nh i t ng n n t c này, các ng d m t ng d ng native

Hình 14 K t qu ng d   ng to b ng Xamarin.Form 

Sau b chuy i (adapter), mã ngu n s c biên d t ng d ng native, control giao di n lúc này s c hi n th m t cách riêng bi t theo t ng n n t ng

(sẽ được trình bày ở phầ

Hình Ho15 ng chia s mã ngu n c  a Shared Project

Hình Ho16 ng chia s mã ngu n c  a PCL

{ public void Play (String Source);

[assembly: Xamarin.Forms.Dependency(typeof(PlayAudioImplement))] namespace Project.Droid

{ public void Play (String Source)

{ var Player = new MediaPlayer(); var fd = OpenFd(Source);

Player.Prepared += (s, e) => Player.Start(); Player.SetDataSource(fd.FileDescriptor, fd.StartOffset,fd.Length); Player.Prepare();

[assembly: Xamarin.Forms.Dependency(typeof(PlayAudioImplement))] namespace Project.Windows

{ public async void Play (String Source)

Folder = await InstalledLocation.GetFolderAsync("Assets");

StorageFile sf = await Folder.GetFileAsync(Source);

Player.SetSource(await sf.OpenReadAsync(), sf.ContentType);

, ta tách code- Ngoài ra,

 Windows Classic Desktop (Windows.Forms / WPF)

 Windows UWP (Desktop / Mobile / Xbox / HoloLens)

Bng 1 t SkiaSharp nuget install SkiaSharp thêm vào project

Hình 18 Render ch t tay vvi i SkiaSharp

, void OnPainting(object sender, SKPaintSurfaceEventArgs e)

Hình Hi19 n th d  liu PDF vi PDFjs

H th ng h c tr c tuy c t o ra v i nhi m v gi i quy t các v t , h c th i gian th c ph n trên ph n, ch a h th ng

Hình 20 Mô hình h thng

Hình 21 C u trúc d u mô t video  li  i

Bng 2 Chi ti t d u mô t video   li 

Hình bên trái là chi ti t d li u mô hình hóa c a bài gi ng PDF v

Document List: Cho bi t nh ng tài li c s d ng trong su t bài gi ng

LectureDetail: Chi ti t mô hình hóa d li u bài gi ng v : o Time: Th i gian chuy n trang o Document: Tên tài li o Page: Trang hi n t n th

Hình bên ph i là chi ti t mô hình hóa d li u c a bài gi ng vi t tay v

DOWN: Tr ng thái nh n bút xu ng v i t bút trên màn hình là x và y

MOVE: Tr ng thái bút di chuy n, v trên màn hình v i t ng là x và y

UP: Tr ng thái bút nh c lên v i t m t né c ghi nh n là k ng time th hi n th m k

T ng time ta có th tính kho ng th i gian gi a nét bút th nh t và nét bút th hai, i th i gian render nét bút

Bng 3 C u trúc d u bài tr c nghi li  

Vi u trúc d li u mô hình hóa là m m li u này v i vi c d dàng ch nh s a d li u, tùy bi n theo cách riêng c a m i

Trong quá trình h tránh s nhàm chán c a bài gi i th y có th t o các b a bài gi ng Trong khuôn kh lu y bài ki m tra tr c nghi m xen gi i th y có th t c ng s c t m ng ng cho h t c h c hoàn thành.

, visual studio 2013 update 3, visual studio 2015 update 2, visual studio

.Hình 22 ng phát tri n xamarin 

3.2.3 ng d ng h tr h c tr c tuy n cho h c sinh (E- c t o ra nh quy t các v , truy n t i, hi n th ng d n n Xamarin.Form, s d ng ngôn ng C#, ngôn ng thi t k giao di n XAML trên mô hình MVVM Các ch a ng d : o Qu n lý tài kho n p o Li t kê bài gi ng Li t kê bài gi ng t p o ng b bài gi ng nh k ng b , li t kê bài gi ng o T i bài gi ng Download bài gi ng t server o H c tr c tuy n Bài gi ng th i gian th c gi i th y và h tri n) o H c ngo i tuy n H c viên t i bài gi ng l i r i h c ngo i tuy n o ng xen gi a bài gi

Các ph n ti p theo tôi xin trình bày các bi s d ng, tu n t , ho ng c a t ng ch

Hình 24 Bi usecase t ng quát ng quát, có tác nhân chính là o o

Hình 25 Usecase lit kê bài ging

Hình 27 u khi n bài gi ng

Bi ho ng trên mô t lu ng d li i - p h th ng ng d ng s ki p b ng p lên server, webserivce s truy v u r i tr v cho ng d p này có h p l hay không

Bi ho ng trên mô t n h p, k t qu c c x lý b s hi n th thông báo tùy theo k t qu tr v

Hình 32 Sequence Li t kê bài gi ng

Hình 33 Activity Lit kê bài ging

Hình i là bi tu n t ng h c bài c a h c viên

Hình trái là màn hình chà server Qua t ác

Bng 4 Các yêu c u ki m th

Bng 5 Các tình hung kim th 