Oleggo Design Document€¦ · Angelo Falci - Julián David Gallego García Design and Implementation of Mobile Applications - 1 - Oleggo DESIGN DOCUMENT Falci Angelo Gallego García

AngeloFalci-JuliánDavidGallegoGarcía

DesignandImplementationofMobileApplications

-1-

Oleggo

DESIGN

DOCUMENT

FalciAngeloGallegoGarcíaJuliánDavid

PolitecnicodiMilanoJanuary26,2018



-2-



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



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



-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



-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



-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.



-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.



-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.



-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.



-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



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



-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



-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)


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 /



-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


Pressinthebookyouwanttoseetheconnectednotes

PressMyNotesinthetabmenuontopofthepageorshiftthefingerfromleft

toright

Inputconditions Bookandnotesforthisbookadded

Outputconditions Showallnotesconnectedtoaspecificbook

Exception /



-16-

2.3.10. Seethewordsdefinitionsofaspecificbook

Actor Users

Goal Seeallwords,andtheirmeaning,connectedtoaspecificbook


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



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



-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.



-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.



-20-

2.4.3. Addnewnote

Usercanaddanotepressing“newnote”voiceindrawermenu.

Itcanwritethenoteordictate itusingspeechrecognize.Afterdictatethenoteusercan

modifythetextthatappearafterthetranslationfromvoicetotext.

Ifthereisn’ta“mainactive”booknotecan’tbeaddedtodatabase.

Ifthenoteisaddedsuccessfullyanalertadvicetheuserandthetextboxwillbecleaned.



-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.



-22-

2.4.5. Changethestateofabook

Inthepersonalpageofbookuserusercanchangethestateofthebook.

Itcanbe:

• passive→bookdoesn’tappearin“readingbook”page

• active→bookappearsin“readingbook”page

• mainactive→bookappearsin“readingbook”pageandifuseraddnewnoteorword

theywillbeconnectedtothisbook;onlyonebookfortimescanbe“mainactive”



-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



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


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


-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.


-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.


-29-


-30-

4.2.2. NotesIfwepressnotesinthetabmenuorifweshiftthefingerfromlefttotheright,wearriveinthenotessub-page.Herewecanseeallnoteslinkedtothisbook.Likeinthehomepageherewecanmodify(andsave)andremoveanynote.Wecanalsoaddorremoveanotefromthefavorite.Ifweadditobviouslywewillfinditinthehomepagethenexttimeweopenit.


-31-

4.2.3. DictionaryIfwepressdictionaryinthetabmenuorifweshiftthefingerfromrighttotheleftwearriveinthenotessub-page.Herewecan seeallwords linked to thisbookswith theirdefinitions inalphabeticorder.Wecan’tsearchaspecificwordlikeinthedictionarypageandifweremoveawordherewejustremovethewordlinkedtothisbook.It’smeanthatifthesamewordislinkedtodifferentbookifIremoveitfromhereIwillcontinuetoseeitinthedictionarypageorinthepersonalbookpageofallbooksthatarelinkedwiththiswordbutnotanymoreinthisbook.


-32-

4.2.4. UpdateprogressscreenInthisscreenwecanupdatethebookmarkofthebook insertingthepagewherewearearrivedtoreadandpressingtheupdateprogressbutton.Ifwefinishthebook,wecandirectlypress“Ihavefinishedthebook”button.


-33-

4.3. NotesFirstofall,wemustknowthatwecanreachquicklythispagefromanypageusingtheicononthetoprightpage.Inthiswaywedon’tlosttimeifwemustwriteanoteandwehaveafewtime.Inthispagewecaninsertanewnoteorsearchthedefinitionaboutawordthatwillbeaddedtothedictionary.


-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.


-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.


-36-

4.5. SideDrawermenuWecanaccesstothedrawermenupressingtheiconontopleftofthepageorshiftthefingerfromlefttotheright.Usingitwecannavigatebetweenthedifferentmainpagesoftheapplication.


-37-

4.6. Complementaryscreens

Herewecanseetheiconoftheapplicationinthemainmenuofsmartphone.AndnexttowecanseethesplashoftheappthatappearswhenweopenOleggo,beforethefirstpageisready.


-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.


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

Documents

Oleggo Design Document€¦ · Angelo Falci - Julián David Gallego García Design and Implementation of Mobile Applications - 1 - Oleggo DESIGN DOCUMENT Falci Angelo Gallego García