oleggo design document€¦ · angelo falci - julián david gallego garcía design and...
TRANSCRIPT
AngeloFalci-JuliánDavidGallegoGarcía
DesignandImplementationofMobileApplications
-1-
Oleggo
DESIGN
DOCUMENT
FalciAngeloGallegoGarcíaJuliánDavid
PolitecnicodiMilanoJanuary26,2018
AngeloFalci-JuliánDavidGallegoGarcía
DesignandImplementationofMobileApplications
-2-
AngeloFalci-JuliánDavidGallegoGarcía
DesignandImplementationofMobileApplications
-3-
CONTENTS
1. Chapter1-Introduction...............................................................................................-5-1.1. Purpose.............................................................................................................................-5-
1.1.1. Intendedaudience...................................................................................................-5-1.2. Scope�...............................................................................................................................-5-1.3. Definitions,acronyms,abbreviationsReferencedocuments�........................................-6-
1.3.1. Definitions................................................................................................................-6-1.3.2. Acronyms.................................................................................................................-6-1.3.3. Abbreviations...........................................................................................................-6-
1.4. Goals..................................................................................................................................-7-1.5. Frameworkforappdevelopment....................................................................................-7-1.6. Overview...........................................................................................................................-8-
2. Chapter2-ArchitecturalDesign..................................................................................-9-2.1. Overview...........................................................................................................................-9-2.2. ArchitecturalStyleandPatterns.......................................................................................-9-2.3. Usecasefunctionalrequirementsanalysis....................................................................-11-
2.3.1. Insertnewbook.....................................................................................................-11-2.3.2. Updatebookmark..................................................................................................-12-2.3.3. Searchaspecificwordindictionary......................................................................-12-2.3.4. Insertanote...........................................................................................................-13-2.3.5. Searchworddefinition...........................................................................................-14-2.3.6. Changestateofbook.............................................................................................-14-2.3.7. Seeallfavoritenotes.............................................................................................-15-2.3.8. SeeGeneraldictionary...........................................................................................-15-2.3.9. Seethenotesofspecificbook...............................................................................-15-2.3.10. Seethewordsdefinitionsofaspecificbook.........................................................-16-2.3.11. Removeaword......................................................................................................-16-2.3.12. Removeanote.......................................................................................................-16-2.3.13. Removeanotefromfavoritenotes......................................................................-17-2.3.14. Addanotetofavoritenotes..................................................................................-17-2.3.15. Modifyanexistingnote.........................................................................................-17-
2.4. Sequencediagrams.........................................................................................................-18-2.4.1. Addnewbooks.......................................................................................................-18-2.4.2. Updatebookmark..................................................................................................-19-2.4.3. Addnewnote.........................................................................................................-20-2.4.4. Searchworddefinition...........................................................................................-21-2.4.5. Changethestateofabook....................................................................................-22-
3. Chapter3-Classdiagram...........................................................................................-23-3.1. Database.........................................................................................................................-23-3.2. Pages...............................................................................................................................-23-
4. Chapter4-UserInterfaceDesign..............................................................................-26-4.1. HomePage......................................................................................................................-26-
4.1.1. Library....................................................................................................................-27-4.1.2. FavoriteNotes........................................................................................................-27-
4.2. Book................................................................................................................................-28-
AngeloFalci-JuliánDavidGallegoGarcía
DesignandImplementationofMobileApplications
-4-
4.2.1. Information............................................................................................................-28-4.2.2. Notes......................................................................................................................-30-4.2.3. Dictionary...............................................................................................................-31-4.2.4. Updateprogressscreen.........................................................................................-32-
4.3. Notes...............................................................................................................................-33-4.4. NewBook........................................................................................................................-35-4.5. SideDrawermenu..........................................................................................................-36-4.6. Complementaryscreens.................................................................................................-37-
5. SoftwareSystemAttributes.......................................................................................-38-5.1. Reliability.........................................................................................................................-38-5.2. Availability.......................................................................................................................-38-5.3. Security�.........................................................................................................................-38-5.4. Maintainability................................................................................................................-38-5.5. Usability...........................................................................................................................-38-5.6. Portability........................................................................................................................-38-
6. References..................................................................................................................-39-
AngeloFalci-JuliánDavidGallegoGarcía
DesignandImplementationofMobileApplications
-5-
1. Chapter1-Introduction
1.1. Purpose
Thisdocument is intendedtohelpunderstandandevaluatedesignandprototypingsteps
takenintoaccountforthedevelopmentofthemobileapplicationcall“Oleggo”(namedfrom
olèexaltationofbeinggoodatsomethingandleggofromtheverbleggereItalianwordfor
read),itexplainsboththeapplicationdomainandthesystemforfurtherunderstanding.It
explains the features of Oleggo, the main components we used and the interface we
implementedfortheuser.
Thisproject is implementedasanoutcomeofthecourse“Designand Implementationof
mobileapplications”.
1.1.1. Intendedaudience
Thisdocumentisrealizedforallpeopleparticipatinginand/orsupervisingtheproject:
• Expectedaudienceofthisdocumentisthedevelopersandanyonewhoin-tendsto
developonthisprogram
• Developerswhocanreviewproject'scapabilitiesandmoreeasilyunderstandwhere
theireffortsshouldbetargetedto improveoraddmore features to it (it sets the
guidelinesforfuturedevelopment).
• Projecttesterscanusethisdocumentasabasefortheir testingstrategyassome
bugs are easier to find using this document. This way testing becomes more
methodicallyorganized.
• Endusersofthisapplicationwhowishtoreadaboutwhatthisapplicationcando.
1.2. Scope�
ThegoalofOleggoistocreateanapplicationthatcanbeusedbystudentstotakenotesor
look for aword in a fastway to reduce the dead times. An other advantage is that the
studentscanhavealwayswiththemtheirnotesandapersonaldictionarywiththewords
thatweremorecomplicatedforthem.Theyalsocansavelikefavoritethemostimportant
noteinordertofindtheminthehomepage.
Butitcanalsobeusedbyanyonethatwanttosaveinownphoneallbookshe/sheisreading
orreadinthepastand,foreachbook,savethenotesinsertedorwordsearchedandalso
AngeloFalci-JuliánDavidGallegoGarcía
DesignandImplementationofMobileApplications
-6-
thebookmark.TotakenoteswithOleggowillbefastmostlybecauseitispossibleinsertnote
orwordusingaspeechrecognizedalternativelytowriteit.
1.3. Definitions,acronyms,abbreviationsReferencedocuments�
1.3.1. Definitions
Note:Somethingthatwritetheuser,itcanbeitspersonalnotesoraquotesfromabook.
Architecture:<system>fundamentalconceptsorpropertiesofasysteminitsenvironment
embodiedinitselements,relationships,andintheprinciplesofitsdesignandevolution.
Bar-code:ItisanidentificationcodethatincludetheISBNandusuallyisonthebackfthe
book.
Drawer menu: It is the menu that can appear and disappear on the left or right in an
application.
1.3.2. Acronyms
UML:UnifiedModellingLanguage.
ISBN:InternationalStandardBookNumber
MVVM:ModelViewViewModel
1.3.3. Abbreviations
App:Application.
DB:Database
AngeloFalci-JuliánDavidGallegoGarcía
DesignandImplementationofMobileApplications
-7-
1.4. Goals
Thesystemhastoprovidethesefeatures:
• [G1]UsercaninsertanewbookinsertingtheISBNbywritingitorreadingitusingthe
bar-codereaderintheapp.
• [G2]Foreachbookinserted,usercaninsertandmodifyabookmark.
• [G3] For each book inserted user can insert a note bywriting it or using speech
recognize,andhe/shecanalsoaddthepageofthebook.Thenotewillbeaddedto
the“mainactive”book(explainedfurther).
• [G4]Foreachbook insertedusercansearchthemeaningofawordandadd it in
her/hispersonaldictionary.Thewordwillbeaddedtothe“mainactive”booksouser
haveaglobaldictionaryandmanylittledictionaryforeachbook.
• [G5]Usercanchangethestateofabookin“passive”,“active”(bookuserisreading
andcanchangebookmark),“mainactive”(usercanhaveonlyonemainactivebook,
everywordsearchingornotesaddedwillbeconnectedtothisbook).
• [G6]Usercanchoosetoseeall favoritenotesorallnotesconnectedtoacertain
book.
• [G7]Usercanchoosetoseeallwordsinthedictionaryorallwordsconnectedtoa
certainbook.
1.5. Frameworkforappdevelopment
TodevelopsOleggoweusedtheframeworkNativescript.
This frameworkcanbeused forcross-platformdevelopment, soourappcouldbe run in
AndroidorIOSsystem(atthemomentthechangesnecessarytoIOSinterfacehasn’tbeen
done,thiswillbeaddedtofuturework).ItispossiblecodeforNativescriptinJavaScriptor
inTypeScript,forOleggowechosethefirst.OtherlanguagesusedforthegraphicsareXML
andCSS.
AngeloFalci-JuliánDavidGallegoGarcía
DesignandImplementationofMobileApplications
-8-
WhyNativeScript?Therearealotofmotivations.
Themainreasonisthatitoffersmanypowerfullypluginstoimplementthings,likespeech
recognition,thatinotherframeworkarehardtodo(wewillshowallthepluginsused).
Anotherreasonisforthegraphics.NativeScriptoffersareallyeasyimplementationofthe
componentsfordevelopingtheuserinterfacealsoduetothefactthatwehavepreviously
workedwithJavascriptandXMLfordevelopofwebsitesallowsaneasywaytoimplement
thegraphicsfortheapplication.
AnothermotiveisduetothefactthatNativescriptallowsyoutouploadthechangesliveon
the emulator or cellphonewhere the app is running shorts the time of developing in a
considerway.
Finally,theyarelibrariesandtemplatesformobileapplicationdevelopedbythecommunity
thatallowsustoimplementcomplexinterfacesthatwithoutwouldtakemuchmoretime.
Wecombinesomeofthemtoimplementbeautifulgraphicscomponentsthat,withoutthese
templates,areveryhardtodosobeautiful(forexamplethesidedrawermenu).
1.6. Overview
Thisdocumentisdividedinfourpartswithcleanandnon-ambiguitydescriptionofthewhole
system:
• Chapter1:briefdescriptionoftheidea,goalsandobjectiveofthedocument.
• Chapter2:Explanationofthemainfunctionalitieswithconstraints,assumptionsand
hardwaredependencies.
• Chapter3:Specificationsofthesystemfunctionalitiesandnon-systemfunctionalities
possiblescenarios.
• Chapter4:UsecasesandUMLmodels.
• Chapter5:Softwaresystemattributes.
AngeloFalci-JuliánDavidGallegoGarcía
DesignandImplementationofMobileApplications
-9-
2. Chapter2-ArchitecturalDesign
2.1. Overview
In this section it is provided detailed information of the product structure and the
implementationofthegeneralstructure. Inthefollowingsectionsit isprovideddetailsof
why it was decided the architecture for the system, what are the characteristics of the
architecturethatmakeitthechosenone
Intheusecasesection,itisprovidedthedetailsabouthowusercaninteractwithOleggo
andwhathappen(includingexception)whenuserusedthedifferentservicesofferbythe
application.
Then it continues talking about the general components of the architecture and the
subcomponentsofeachcomponentandtheirinteractions.Followingbyinformationofall
thefunctionsthatdoeachsubcomponent.
Aftertheprimaryinformationonhowitisconstitutedthearchitecture,itsexplainedhowall
thesecomponentsworktomakethesystemtoworkeffetely.
The chapter finish with an explanation about the interface and how some components
interactwithit.
2.2. ArchitecturalStyleandPatterns
ForNativeScriptisusedtousetheMVVMpattern(ModelViewViewModel)where:
• Model:Themodeldefinesandrepresentsthedata.Separatingthemodelfromthe
variousviewsthatmightuseitallowsforcodereuse.
• View:TheviewrepresentstheUI,whichinNativeScriptiswritteninXML.Theviewis
oftendata-bound to the viewmodel so that changesmade to the viewmodel in
JavaScriptinstantlytriggervisualchangestoUIcomponents.
• View Model: The view model contains the application logic (often including the
model), and exposes the data to the view.NativeScript provides amodule called
'Observable',whichfacilitatescreatingaviewmodelobjectthatcanbeboundtothe
view.
AngeloFalci-JuliánDavidGallegoGarcía
DesignandImplementationofMobileApplications
-10-
InOleggoweuseMVVMbutwithsomemodifications.Wepreferredtohaveafolderforeach
pageofourappandsubfoldersifapageincludedmorepages.Wechoosethisbecauseeach
pageusedata indifferentwaysand inorder tohaveamoreorganizationand scalability
becausesomeonecanworkonlytoapagewithoutmodifytheother. It’smeanthateach
viewhasonlyonemodelandeachmodelhasonlyoneviewbut inordertodon’thavea
different class inwhich database is calledwe create shared components that include all
possiblequeriesneedinthepagesandeverypagecanuseitwhenwanttointeractwiththe
database.Inthiswayifwewantmodifysomething,likethenameortypeofthecolumns,in
thedatabasewemustworkonlyinthisclass.
We will see all blue and green components in the chapter “User Interface”.
Thesharedcomponentsaren’tvisiblefortheuser,theyareonlyusedbythepagesabove:
DB→containallthequerytothedatabase,inthiswayifwemodifysomethingtodatabase
wemustmodifyonlythisclass.
DrawerMenu→itisthehidemenuthatappearineverypageifuserclickbuttonontheleft-
toporshiftthefingerfromlefttoright.
Word Definition → it’s include a set of pages that manage the searching of words in
Wiktionary.
AngeloFalci-JuliánDavidGallegoGarcía
DesignandImplementationofMobileApplications
-11-
2.3. Usecasefunctionalrequirementsanalysis
This part of the document shows how users interact with Oleggo in order to reach the
differentgoals.Wewillseealsotheflowofactionstheuserneedstodobutwenotseethe
systeminternals.
Wecanidentifyonlyonegroupofactorsinvolvedinthisapplication:
• Users–whohaddownloadedandinstalledtheapplicationOleggo
Forthemostimportant,andcomplex,functionsthereisthegraphicsrepresentationofuser
case.
2.3.1. Insertnewbook
Actor Users
Goal InsertanewbookusingISBN
Eventflow PressNewBookvoiceinthedrawermenu
InserttheISBNofbookwritingitorscanningthebarcode
PressSendISBN
Ifbookisnotpresentinonlinelibraryinsertthetitleandcontinue
Ifauthorisnotpresentinonlinelibraryinsertitandcontinue
Confirm (or insert if it isn’t present) the number of page in the book and
continue
Outputconditions Bookisinserted
Exception Userinsertanotvalidnumberofpages(forexampleinsertlettersinsteadof
numbers)
InsertanotvalidISBN
AngeloFalci-JuliánDavidGallegoGarcía
DesignandImplementationofMobileApplications
-12-
2.3.2. Updatebookmark
Actor Users
Goal Updatethebookmarkofabook
Eventflow PressHomeorReadingBooksinthedrawermenu
Pressinthebookwewanttomodifybookmark
Pressthecirclebuttonatleftside
Insertanumberandpressupdateprogressorpress“Ihavefinishedbutton”
Inputconditions Bookalreadyadded
Outputconditions Bookmarkupdated
Bookstatechangedandbecome“read”
Exception /
2.3.3. Searchaspecificwordindictionary
Actor Users
Goal Searchaspecificwordintheglobaldictionary
Eventflow Goinglobaldictionarytoseeallthewords(seetableaboveforfurtherdetails)
Insert in Search box on top of the page theword youwant to search the
meaningorapartofthisword
Inputconditions Wordsalreadysearched
Outputconditions Showallthewordthatincludedwhatyouwroteinthesearchbox
Exception /
AngeloFalci-JuliánDavidGallegoGarcía
DesignandImplementationofMobileApplications
-13-
2.3.4. Insertanote
Actor Users
Goal Insertanoteconnectedto“mainactive”book
Eventflow PressNewNoteinthedrawermenu
Insert the notewriting it or using speech recognized (pressing “press and
speak”andspeak)andeventuallymodifyit
Optionallyitpossibleinsertanumberofpage
Pressaddquote
Inputconditions Onebookis“mainactive”
Outputconditions Quoteaddedandconnectedtothe“mainactive”book(ondefaultthequote
isn’tfavorite)
Exception Ifthereisn’tany“mainactive”bookthequoteisn’taddedandanalertadvice
theuser
AngeloFalci-JuliánDavidGallegoGarcía
DesignandImplementationofMobileApplications
-14-
2.3.5. Searchworddefinition
Actor Users
Goal Searchandsavethemeaningofawordconnectedto“mainactive”book
Eventflow PressNewNoteinthedrawermenu
Insert thewordwriting it or using speech recognized (pressing “press and
speak”andspeak)andeventuallymodifyit
Presslookfortheword
Inputconditions Onebookis“mainactive”
Outputconditions Word’smeaningsavedandconnectedtothe“mainactive”book
Exception Ifthereisn’tany“mainactive”bookthewordisn’taddedandanalertadvice
theuser
2.3.6. Changestateofbook
Actor Users
Goal Changethestateofabook(passive,active,mainactiveorread)
Eventflow PressHomeorReadingBooksinthedrawermenu
Pressinthebookyouwanttochangethestate
Press in the big, center buttonmore times to change state in “active” or
“passive”
Pressthelittlebuttononthelefttosetthe"mainactive"state
Ifyoufinishthebookseethe“updatebookmark”tableabove
Inputconditions Bookalreadyadded
Outputconditions Thestateofthebookischanged
Exception /
AngeloFalci-JuliánDavidGallegoGarcía
DesignandImplementationofMobileApplications
-15-
2.3.7. Seeallfavoritenotes
Actor Users
Goal Seeallfavoritenotes
Eventflow PressHome→MyFavoriteNotesinthedrawermenu
Inputconditions Thereisatleastonefavoritenote
Outputconditions Showallfavoritenotes
Exception /
2.3.8. SeeGeneraldictionary
Actor Users
Goal Seeallwordssearchedandsaved
Eventflow PressMyDictionaryindrawermenu
Inputconditions Thereisatleastoneword
Outputconditions Showallwordsinthedictionarywiththeirmeaninginalphabetorder
Exception /
2.3.9. Seethenotesofspecificbook
Actor Users
Goal Seeallnotesconnectedtoaspecificbook
Eventflow PressHomeorReadingBooksinthedrawermenu
Pressinthebookyouwanttoseetheconnectednotes
PressMyNotesinthetabmenuontopofthepageorshiftthefingerfromleft
toright
Inputconditions Bookandnotesforthisbookadded
Outputconditions Showallnotesconnectedtoaspecificbook
Exception /
AngeloFalci-JuliánDavidGallegoGarcía
DesignandImplementationofMobileApplications
-16-
2.3.10. Seethewordsdefinitionsofaspecificbook
Actor Users
Goal Seeallwords,andtheirmeaning,connectedtoaspecificbook
Eventflow PressHomeorReadingBooksinthedrawermenu
Pressinthebookyouwanttoseetheconnectednotesorshiftthefingerfrom
righttoleft
PressMyDictionaryinthetabmenuontopofthepage
Inputconditions Bookandwordsearchedforthisbookadded
Outputconditions Showallwordsandtheirmeaningconnectedtoaspecificbook
Exception /
2.3.11. Removeaword
Actor Users
Goal Removeawordfromdictionary
Eventflow Gointhepagetoseeallwordsindictionaryoronlythewordsconnectedtoa
specificbook(seethetablesabovefordetails)
Pressremovebuttonnearthewordwewantremove
Inputconditions Wordalreadysearched
Outputconditions Ifyouareinglobaldictionaryyouremovefromdictionaryallwordsequalthe
wordyouremove
Ifyouareinthedictionaryconnectedtoaspecificbookyouremoveonlythe
wordconnectedwiththisbook(itmeansthatifawordisconnectedto2books
youremoveonlyoneoccurrenceofthisandtheword ispresentyet inthe
globaldictionary)
Exception /
2.3.12. Removeanote
Actor Users
Goal Removeanote
Eventflow GoinHome→MyFavoriteNotesor inthenotesofaspecificbook(seethe
tablesabovefordetails)
Pressdeletebuttonnearthenoteyouwanttoremove
Inputconditions Notealreadyinserted
AngeloFalci-JuliánDavidGallegoGarcía
DesignandImplementationofMobileApplications
-17-
Outputconditions Thenoteisremoved
2.3.13. Removeanotefromfavoritenotes
Actor Users
Goal Removeanote
Eventflow Gointhenotesofaspecificbook(seethetablesabovefordetails)
Press“notfavorite”buttonnearthenoteyouwanttoremovefromfavorite
notes
Inputconditions Wordalreadysearchedandaddedtofavorites
Outputconditions Thenoteisremovedfromfavoritenotesandthestarcolorchange
Exception /
2.3.14. Addanotetofavoritenotes
Actor Users
Goal Removeanote
Eventflow GoinHome→MyFavoriteNotes
Press“favorite”buttonnearthenoteyouwanttoremovefromfavoritenotes
Inputconditions Notealreadyadded
Outputconditions Thenoteisremovedfromfavoritenotesandthestarcolorchange
Exception /
2.3.15. Modifyanexistingnote
Actor Users
Goal Modifyanexistingnote
Eventflow GoinHome→MyFavoriteNotesor inthenotesofaspecificbook(seethe
tablesabovefordetails)
Modifywhatyouwantinthenoteyouwanttomodify
Pressthebuttonsavenearthechosennote
Inputconditions Notealreadyadded
Outputconditions Themodificationofthisnoteissaved
Exception /
AngeloFalci-JuliánDavidGallegoGarcía
DesignandImplementationofMobileApplications
-18-
2.4. Sequencediagrams
Inthischapterwewillmodeltheflowoflogicwithinoursysteminavisualmannerthatwill
enableustodocumentandvalidateourlogicforfurtheranalysisanddesignpurpose.We
willpresentthemostimportantinteractionsbetweenthesystemandtheuser.
2.4.1. Addnewbooks
Usercanaddabookpress“newbook”voiceindrawermenu.ThenusercanaddISBNwriting
itorscanningbarcode.
Onlinelibrariesdon’thaveallinformationaboutbooks,forthisreasonsometimesappaskto
theusertoinsertthenameoftheauthor.Italsoaskstoconfirm,orinsertifitisn’tavailable,
thenumberofpagesthatcontainthebook.
WhenthebookisaddedanalertadviceuserandthetextboxwithISBNwillbecleaned.
AngeloFalci-JuliánDavidGallegoGarcía
DesignandImplementationofMobileApplications
-19-
2.4.2. Updatebookmark
Inthepersonalpageofbookuserusercanupdatethebookmarkofaspecificbook.
User must click the little button at left and insert the number of page where put the
bookmark.
Finallypress“updateprogress”toconfirmthenewbookmarkor“Ihavefinishedalreadythe
book”. If user insert a number greater than the number of pages that has the book the
bookmarkissettothelastpageofbook.
AngeloFalci-JuliánDavidGallegoGarcía
DesignandImplementationofMobileApplications
-20-
2.4.3. Addnewnote
Usercanaddanotepressing“newnote”voiceindrawermenu.
Itcanwritethenoteordictate itusingspeechrecognize.Afterdictatethenoteusercan
modifythetextthatappearafterthetranslationfromvoicetotext.
Ifthereisn’ta“mainactive”booknotecan’tbeaddedtodatabase.
Ifthenoteisaddedsuccessfullyanalertadvicetheuserandthetextboxwillbecleaned.
AngeloFalci-JuliánDavidGallegoGarcía
DesignandImplementationofMobileApplications
-21-
2.4.4. Searchworddefinition
Usercansearchawordpressing“newnote”voiceindrawermenu.
Itcanwritethewordordictateitusingspeechrecognize.Afterdictatethewordusercan
modifythetextthatappearafterthetranslationfromvoicetotext.
Ifthereisn’ta“mainactive”bookwordcan’tbeaddedtodatabase.
Ifthewordisaddedsuccessfullyanalertadvicetheuserandthetextboxwillbecleaned.
Finally,ifuserlookfora“strange”word,orawordthatdoesn’texistinWiktionary,theword
issavedindictionarywithoutthemeaning.
AngeloFalci-JuliánDavidGallegoGarcía
DesignandImplementationofMobileApplications
-22-
2.4.5. Changethestateofabook
Inthepersonalpageofbookuserusercanchangethestateofthebook.
Itcanbe:
• passive→bookdoesn’tappearin“readingbook”page
• active→bookappearsin“readingbook”page
• mainactive→bookappearsin“readingbook”pageandifuseraddnewnoteorword
theywillbeconnectedtothisbook;onlyonebookfortimescanbe“mainactive”
AngeloFalci-JuliánDavidGallegoGarcía
DesignandImplementationofMobileApplications
-23-
3. Chapter3-Classdiagram
Inthispartofdocument,wewillseethestructureof thedatabaseanddetailsaboutthe
tablesarchitecture.
3.1. Database
Thedatabaseisusedtoorganizeallthe informationimportantfortheapplicationforthe
managementofthebooksandnotes,forthatreasonwecreatedalocaldatabaseusingsqlite
andwedividedtheinformationintotreetablesoneforthebooks,oneforthedictionaryand
oneforthequotes.
3.2. Pages
InthemodelgraphwecanseeallpagesthathasOleggo.Foreachpageitisvisible:
• Title.
• Visibledatainthatpage.
• Methodsthatusercancallinteractingwiththatpage.
Moreover,ineachpageispossibleusedrawermenushiftingthefridgefromlefttorightor
pressingthebuttonontopleft.
Now,foreachpage,weseeabriefdescription:
• Home→This is the firstwindowappearwhenuseropenOleggo, it includes two
pagesselectableusingthetabmenu. In“Library”wecanseeallbooks inserted in
Oleggoinalphabetorderindependentlyoftheirstate.Intheotherpage,“Notes”,we
canseeallfavoritenotesinsertedinOleggoorderbythedateofinsertion.
• AddNewBook→InthispagewehaveadedittextwherewecaninputtheISBNof
bookwewantinserted.Wecanalsousethebarcodereaderpressinganotherbutton
toreadtheISBN.
• AddNote→Inthispagewecanaddanoteconnectedtothe“mainactive”book.We
canwritethenoteorusingthespeechrecognition(andeventuallymodifythetext
AngeloFalci-JuliánDavidGallegoGarcía
DesignandImplementationofMobileApplications
-24-
translatedfromthevoice).Whenthenoteisaddedsuccessfullyanalertadviceus
and the text boxwill be cleanedwhile nothing happen ifwe don’t have a “main
active”book.
• Book→Inthebookpagewecanseetheinformationaboutasinglebook,thepage
whereisthebookmark,howmanynotesandwordareconnectedtothisbookand
thestateofthisbook.Moreover,wecanchangetheimageofbookfromthispage,
it’susefuliftheonlinelibrarydidn’tfoundanyimage.Thelastthingwecandointhis
pageisopenthe“BookProgress”page.
Thenfromthispagewecanmovetoothertwopagesusingthetabmenuonthetop
ofthepage,“Dictionary”and“Notes”.Thefirstpagecontainsallwordsindictionary
connectedtothisbookandwecanchosetoremoveoneofthem(butifthiswordis
connected tootherwords in theglobaldictionarywewill continue tosee it).The
secondpagecontainallnotesconnectedto thisbook, in thispagewecandothe
samethingswecandointhe“Notes”pageincludedin“Home”.Theonlydifference
isthatherewecanaddanoteinthepreferencenotesratherthanremoveitfrom
preferencenotes.
• BookProgress→Inthispagewecanmodifythepagewhereisthebookmark.
• MyDictionary→ In thispagewehaveallwordsadded in theeverybookwith its
meaningorderinalphabeticway.Moreoverwecansearchaspecificwordorasetof
wordswriting a part of it or them. Finally from this pagewe can remove aword
definitely, it’smeans that ifwe removehereawordwewillnot find them in the
“Book”pagebecauseweremoveeachoccurrenceinthedatabaseofthisword.
• ReadingBooks→Inthispagewecanseethelistofall“active”bookand,ifwepress
inabook,wecanreachthe“Book”pagewithallinformationaboutthepagechosen.
Thispageisusefulbecausewecanseeonlythe“active”bookandnotallbookadded
inthepastandfindquicklyaspecificbookwearereadinginthismoment.
AngeloFalci-JuliánDavidGallegoGarcíaDesignandImplementationofMobileApplications
-25-
AngeloFalci-JuliánDavidGallegoGarcíaDesignandImplementationofMobileApplications
-26-
4. Chapter4-UserInterfaceDesignIn this chapter we will see the user interface of each page showing how use thefunctionalitiesofOleggo.Tomajordetailsabouthowworkthedifferentinterfacesandhowhappenifuserwrongtoinsert data is explained in the section 2.3 and 2.4. Here we are interest to explain thefunctionalitiesfromthepointofviewoftheuser.
4.1. HomePageThisisthefirstpagethatuserseeswhenopenOleggo.Itisdividedintwosub-pagesusingatabmenu:
AngeloFalci-JuliánDavidGallegoGarcíaDesignandImplementationofMobileApplications
-27-
4.1.1. Library
This page shows all books inserted in Oleggo independently from their status.Foreachbookwecanseeacoverimage(ifitispresentoninternetwhenuseraddsthebookorifuseraddsafterapersonalimageforthebook),thetitleofthebookandthenameoftheauthor.Allbooksareorderedbytitle.
4.1.2. FavoriteNotesInthispagewecanseeallfavoritenotesofallbooksorderfromthenewesttotheoldest.For each note we have the date when we inserted it, then the title, the author and,optionally,thepageofthebookwhichthenoteisconnected.Belowthenotewehavethreebuttons:
• Star–toremove,oraddagain,thenotetothefavorite.Whenweremovethenotefromthefavoritesnote,itdoesn’tdisappearimmediatelybutonlywhenwerechargethe“favoritenotes”sub-page,inthiswayifwepressthestarbymistakewecanpressagaintoaddthenotetothefavoriteandnotneedtogotothebookpage.
• Pencil – to save themodifications of the note if we want to change something.However,thedateofinsertiondoesn’tchange.
• Trashbin–thisbuttonsimplyremovesthenote.
AngeloFalci-JuliánDavidGallegoGarcíaDesignandImplementationofMobileApplications
-28-
4.2. BookThisissimplythepersonalpageofabook.Itisdividedinthreetabsandafullscreendialog:
4.2.1. InformationWhenweselectabookinthehomepageorinthereadingbookpagethisisthefirstsub-pagesthatappear.Itshowsgeneralinformationofthebook:
• Title.
• Author.
• Howmanywordsandnotesarelinkedtothisbook.
• Statusofthebook(wewillseeitindetailsbelow).
• Howmanypercentageofbookwealreadyreadofthisbook.
Inthispagewecansomeinformationaboutthebook:
• Pressinginthecentralimagewecanselectanewpictureforthecoverofthebook.
• Pressingtheleftbutton,itappearstheupdateprogressscreen(wewillseeitindetailsbelow).
• Pressingthecentralbutton,wecanchangethestatusofthebutton.
• Pressingtherightbutton,wecanchangethestatusofthebuttoninmainactive.
Abookcanhavethreestatuses:
• Passive–itisthedefaultstatewhenbookisadded.Withthisstatethebookisshowedonlyinthelibrarylistinthemainpage.
• Active–whenweputactiveonebookitisshowedalsoinreadingbookspage.Weputactivethebookwearereading.
• MainActive–themainactivebook isthebookwhichare linkedallthenotesandwordsthatwillbeaddedbyus.Itisshowedinreadingbookspageliketheactive.
• Obviouslywecanhavemorepassiveoractivebooksbutonlyonemainactivebook.
AngeloFalci-JuliánDavidGallegoGarcíaDesignandImplementationofMobileApplications
-29-
AngeloFalci-JuliánDavidGallegoGarcíaDesignandImplementationofMobileApplications
-30-
4.2.2. NotesIfwepressnotesinthetabmenuorifweshiftthefingerfromlefttotheright,wearriveinthenotessub-page.Herewecanseeallnoteslinkedtothisbook.Likeinthehomepageherewecanmodify(andsave)andremoveanynote.Wecanalsoaddorremoveanotefromthefavorite.Ifweadditobviouslywewillfinditinthehomepagethenexttimeweopenit.
AngeloFalci-JuliánDavidGallegoGarcíaDesignandImplementationofMobileApplications
-31-
4.2.3. DictionaryIfwepressdictionaryinthetabmenuorifweshiftthefingerfromrighttotheleftwearriveinthenotessub-page.Herewecan seeallwords linked to thisbookswith theirdefinitions inalphabeticorder.Wecan’tsearchaspecificwordlikeinthedictionarypageandifweremoveawordherewejustremovethewordlinkedtothisbook.It’smeanthatifthesamewordislinkedtodifferentbookifIremoveitfromhereIwillcontinuetoseeitinthedictionarypageorinthepersonalbookpageofallbooksthatarelinkedwiththiswordbutnotanymoreinthisbook.
AngeloFalci-JuliánDavidGallegoGarcíaDesignandImplementationofMobileApplications
-32-
4.2.4. UpdateprogressscreenInthisscreenwecanupdatethebookmarkofthebook insertingthepagewherewearearrivedtoreadandpressingtheupdateprogressbutton.Ifwefinishthebook,wecandirectlypress“Ihavefinishedthebook”button.
AngeloFalci-JuliánDavidGallegoGarcíaDesignandImplementationofMobileApplications
-33-
4.3. NotesFirstofall,wemustknowthatwecanreachquicklythispagefromanypageusingtheicononthetoprightpage.Inthiswaywedon’tlosttimeifwemustwriteanoteandwehaveafewtime.Inthispagewecaninsertanewnoteorsearchthedefinitionaboutawordthatwillbeaddedtothedictionary.
AngeloFalci-JuliánDavidGallegoGarcíaDesignandImplementationofMobileApplications
-34-
• Note
We canwrite the note directly in the text box on top of the page orwe can press themicrophoneandspeech.Ourvoicewillbetranslatedintextandprintedinthesametextbox,sowecanmodifyit.Wecanalsoinsertapagethatwillbeshowedtogetherthenote,butitisoptionally.Thenwemustpress“addnote”andnotewillbeaddedandconnectedtothemainactivebook.
• Word
Liketothenotewecaninsertthewordwewanttoknowthedefinitionwritingitorusingthespeechrecognition.Thenwemustpress“getdefinition”tolookforthewordonline,inWiktionary,andadditthedictionary.Iftheapplicationdoesn’tfoundthewordinWiktionaryitaddsthewordstothedictionarywithoutdefinition.Ifwedon’tsetamainactivebook,wecan’taddwordornoteandifwetrytoaddoneofthenanalertadviceustochooseamainactivebookbefore.
AngeloFalci-JuliánDavidGallegoGarcíaDesignandImplementationofMobileApplications
-35-
4.4. NewBookInthispagewecanaddabookinsertingitsISBN.Itcanbeinsertedusingthetextboxorreadingthebar-codeofthebook.Tousethebar-code,wemustpresstheimageofphotocameraandpointthesmartphoneonthebar-codeofthebookcheckingtocenterit.After inserting the ISBNwemustpress the search ISBNbutton that look for informationaboutthebookintwodifferentonlinelibrary.Alsothebookisfoundcanhappenthatitisn’tpresentintheinformationtheauthororthenumberofpages. In thesetwocaseapplicationadvertsuswithadialogandaskingustoenterthenameoftheauthoror/andthenumberofthepages.Inanycaseapplicationasksustoconfirmthenumberofthepagesfoundintheinformationifitis.Inothercase,iftheISBNisn’tpresentintheonlinelibrariesused,applicationasksustoinserttitle,authorandnumberofpages.
AngeloFalci-JuliánDavidGallegoGarcíaDesignandImplementationofMobileApplications
-36-
4.5. SideDrawermenuWecanaccesstothedrawermenupressingtheiconontopleftofthepageorshiftthefingerfromlefttotheright.Usingitwecannavigatebetweenthedifferentmainpagesoftheapplication.
AngeloFalci-JuliánDavidGallegoGarcíaDesignandImplementationofMobileApplications
-37-
4.6. Complementaryscreens
Herewecanseetheiconoftheapplicationinthemainmenuofsmartphone.AndnexttowecanseethesplashoftheappthatappearswhenweopenOleggo,beforethefirstpageisready.
AngeloFalci-JuliánDavidGallegoGarcíaDesignandImplementationofMobileApplications
-38-
5. SoftwareSystemAttributes
5.1. ReliabilityThesystemsavesthedataofuseronlyinthelocaldevice,soOleggodoesn'thaveanytypeofreliabilityforthemoment.
5.2. AvailabilityThenotesandwordssearchedarealwaysavailablefortheuserbecausetheyaresavedinthelocaldevice.
For theonlineservicesobviouslydon'tdependbyOleggo.AnywayweuseWiktionary forsearchthedefinitionofthewordsanditisverydifficultthatitisn'tavailableforaproblem.Fortheotheronlineservice,theISBNsearch,weusetwoexternalservices,inthiswaynotonlywecanhavemoreprobability to findabookbut it is also lessprobability thateachservicesaredowninthesamemoment.
5.3. Security�Theappdoesn'tsaveorshareanythingonlinesothepersonalinformationthatuserinsertsareinviolable.
5.4. MaintainabilityThesystemwillbeverymaintainablethankstoamodularstructure.Theapplicationwillbedocumented in a way that will truly help the future developers, explaining how theapplicationworksandhowithasbeendeveloped.
5.5. UsabilityTheapplicationismeanttobeaseasyandintuitivetouseaspossible.Togetiteasierwealsoputiconsineachbutton.AlltheuserscanprovidefeedbackstoimprovetheappratingitinPlayStore.
5.6. PortabilityThesoftwareforthesystemwillbedevelopedusingNativeScript.ItisacrossplatformthatuseJavaScript,XMLandCSS.It'smeanthatwecanbuildourapplicationforAndroidandIOs.
AngeloFalci-JuliánDavidGallegoGarcíaDesignandImplementationofMobileApplications
-39-
6. References
(1) DesignandImplementationofMobileApplicationscoursematerial[Online],http://home.deib.polimi.it/baresi/dima.htm
(2) OfficialwebsiteofNativeScriptwithusefulguidesandplugins,https://docs.nativescript.org/
(3) Repositorieswhenwetookdifferentpiecesofcodeforgraphicsandtemplate
components,https://github.com/EddyVerbruggen-https://github.com/TobiasHennig
(4) APIusedforsearchthebooksusingISBN,https://openlibrary.org/developers/api-
http://xisbn.worldcat.org/xisbnadmin/doc/api.htm
(5) Pluginforsearchthemeaningoftheword,https://www.npmjs.com/package/word-definition
(6) Icons,http://fontawesome.io/