ubc farm web application design document & report · redux store, redux react patterns it is no...
Post on 22-May-2020
7 Views
Preview:
TRANSCRIPT
UBCFarmWebApplicationDesignDocument&ReportUBCSustainabilityScholarsProgramProject: Stewardshipsciencetechnologyformonitoringthesocio-
ecologicaloutputsoffarmingactivities
XingyuTaoAugust2017
TableofContents
Abstract.......................................................................................................................................................1
SystemArchitectureandRationale.............................................................................................................2
MaterialUI&Bulma................................................................................................................................3
Express.....................................................................................................................................................3
Node........................................................................................................................................................3
Redux&React.........................................................................................................................................4
D3............................................................................................................................................................5
MongoDB.................................................................................................................................................5
DetailedDesign............................................................................................................................................6
DesignPatterns........................................................................................................................................7
ComponentContainerPattern............................................................................................................7
ReduxStore,ReduxReactPatterns.....................................................................................................7
IntroductiontoPages..............................................................................................................................8
Fields........................................................................................................................................................8
GoogleMapsAPI.................................................................................................................................8
Tasks........................................................................................................................................................9
VISTimelineAPI.................................................................................................................................10
Inventories.............................................................................................................................................10
D3API................................................................................................................................................11
Finances.................................................................................................................................................11
Users&Reports.....................................................................................................................................11
DesignChallengesandRecommendation.................................................................................................12
IntegratingModuleswithReact............................................................................................................12
Interconnectivity....................................................................................................................................12
Conclusion.................................................................................................................................................13
1
Acknowledgements
WithspecialthankstoProf.HannahWittmanandDrZiaMehrabiforallthesupportprovidedincompletingthisproject.
Abstract TheUBCFarmSocio-ecologicalMonitoringApplication(hereafter“UBCFarmApp”)isanongoingprojectthataimstodevelopadynamicmonitoringandreportingsystemforUBCFarmthatcanalsobeadaptedtootherscalesoffarmingoperations(local,regional,global).ItsultimategoalistomakefarmingmoresustainablebycloselytrackingandreportingoneveryaspectofaFarm’soperation,fromresourcesused,hoursworked,tobio-diversitylevels,climatechangeimpacts,finances,andfoodproduced.Throughseveralresearch,design,andimplementationcycles,ithasreacheditscurrentiterationwhichcombinesanarrayofintercommunicatingmodulestogethertoofferreal-timetrackingandreportingfunctions. Thisdocumentaimstoprovideadetailedreportonthesystemarchitectureanddesignchoicesoftheapplication’scurrentiteration(April–September2017).Itaccompaniestheonlinedocumentationandcodefortheapplicationfoundhttps://github.com/ubc-farmandincludesanoverviewofthefollowingfeaturescurrentlyintheimplementationqueueoftheproject:
1.Fields Completed2.Tasks Completed3.Inventories Completed4.Finances Completed5.Employees Implementing6.Reports Implementing
2
SystemArchitectureandRationale
Thisapplicationmakesuseofalayeredarchitecturetoseparatethedatabase,businesslogic,andUItohelpfacilitatecodedevelopment.Thisfollowsnaturallyfromthe“MERN”(MongoDB,Express,React,Node)stack’sdesignphilosophy.TherestrictionofimposinganestablishedframeworksuchasReactontheprojectimprovesthestabilityofthewebapplication,anditalsomakesincorporatingnewfeatureseasierduetoextensiveexistingreference.
Thefigurebelowgivesavisualrepresentationofeachcomponent’sroleinthecurrentUBCFarm
application.
EachcomponentintheUBCFarmApp’slayeredarchitecturefulfillsawell-definedrole.Thisseparationoftasksalsofacilitatesthecontrolforthedataflowingbetweeneachlayer,sothatsensitiveinformationcanbekeptsecureasrequiredforprivatefarmownersandasspecifiedbyUBC’sinformationsecuritypolicies.1Briefly,thespecificrolesofeachofthecomponentwillbeelaboratedinthefollowingpages.
1AcceptableUseandSecurityofUBCElectronicInformationandSystems.PDF.Vancouver:TheUniversityofBritishColumbiaBoardofGovernors,June2013.
Figure1-LayeredComponentDiagram
3
MaterialUI&Bulma
Atthetoplevel,forstylingandresponsivedesign,thisappusestwoCSSFrameworks:MaterialUIandBulma.MaterialUIisamobile-firstdesignwidelyusedonAndroidandChrome,whichcontainsawidearrayofready-to-usecomponentssuchassearchbars,formfields,anddateselectors.Bulmaisawebframeworkusefulforitssleekfontsandresponsivecolumns.Togethertheyprovidethestylingforthisapplication’scomponentsandarethemostimportantfactorscontrollingtheaestheticappearanceoftheuserinterface.
Express AsaminimalistandflexibleNodeFrameworkforwebapplications,Expressoffersawaytostandardizedevelopmentofwebapplicationsinanobject-orientedway.ItisaservicethatabstractstheHTMLdocument’selementsintoobjectsbyusingJavaScript.ThewayitaccomplishesthisandmanagestoescapethepitfallsoftheclassicalHTML/CSS/JAVASCRIPTpatternisbytranspiling(translatingcode)fromobjectorientedsyntaxintopureJavaScriptcode,ontopoftherootHTMLdocument.Thisapproachtoprogrammingwebapplicationshasmanybenefitsincludingmoreaccuratemodelingofcomplexobjects,andmorereadablecodeforcollaborationpurposes.
Node
Figure2-NodeWorkflow
4
Nodeprovidesanevent-drivenJavaScriptruntimeforwebapplications.ItsInput/Outputmechanismisnon-blocking,whichallowstheUBCFarmApptosupportasynchronous(random)updates.Thisisanespeciallyimportantcomponentthatdrivesthereal-timeupdatingfeaturesoftheUBCFarmApp.Itspackageenvironmentandonlinelibraries(npm)containsthelargestrepositoryofopensourcecodesthatprovideservicessuchasauthenticationschemes,cssframeworks,anddatabaseAPIs(ApplicationProgrammingInterfaces).VirtuallyallservicesfromGoogleMapstoMongoDBhavetheirAPIsavailableintheformofnpmpackages.
Redux&React ReduxandReactaretwoseparatecomponentsthataretightlylinkedtogether.ReactisessentiallyaJavaScriptlibrarythatallowstheincorporationofstatesintoHTMLelements.Thisiscrucialforbuildinganinteractiveapplicationthatrequirescommunicationacrossdifferentmodules.Reactkeepstrackofeachelement’sstate,alertsmodulesofchanges,andupdatestheUserInterfaceaccordingly,mimickingthefunctionofastatemachine.Anelement’sstatecanbedefinedasanything,butmostoftenitcontainstheelement’scurrentattributes.
ReduxbuildsonReactbyprovidingthelinkbetweenReactstatesandathirdpartyDatabase(in
ourcaseMongoDB).ReduxusesReact’scontrolovertheDocumentObjectModel(DOM)elementtodynamicallyupdatetheUIaccordingthechangesintheDatabase,whichitkeepsacopyofintheStore.Indoingso,Reduxactsastheapplication’seventhandlerforusertriggeredactionssuchascreating,editing,anddeletinginformation.Reduxmaintainsconsistencyacrossallinstancesoftheapplication,soitavoidsracecasesanddeadlocks(twouserstrytochangeonevalueatthesametime,creatinginconsistencies).
2
2Goutay,Nicholas."ReduxWorkflow."Digitalimage.GettingStartedwithReact,ReduxandImmutable:aTest-DrivenTutorial(Part2).March30,2016.AccessedAugust3,2017.https://www.theodo.fr/blog/2016/03/getting-started-with-react-redux-and-immutable-a-test-driven-tutorial-part-2/.
Figure3-ReduxReactWorkflow
5
D3 D3.jsisawell-knownJavaScriptlibrarythatprovidesvariousdatavisualizationfunctionalities.IntheUBCFarmApp,D3isusedtovisualizetime-seriesaswellasgeographicaldataandwiththehelpofReactReduxthevisualscreatedwithD3canbeupdateddynamicallywithuserinputs.
MongoDB MongoDBisadocument-based,object-orientedDatabase.Comparedtotable-basedstructuressuchasSQL,MongoDBoffersaneasierwaytostoredataasobjects,aswellascrossingandnestingthem.Ifneededitisalsoeasilytransformedintotabularform.Thisway,dataaboutobjectscanbestoredthesamewaytheyaremodeled.Thisinturnmakestheapplicationasawholemorescalable,andensuresconsistencyindatamodelsbetweenthefrontendandthebackendoftheapplication.ItalsomakesincorporatingthirdpartydatawithJSONformattingatriviallyeasytask.ForthisapplicationwewillbeinteractingwithMongoDBthroughMongoose.Mongooseisaschemabasedframeworkformodelingapplicationdata,streamlininginteractionswithMongoDB.
3
3Malaya,Victoria.SQLvs.MongoDBTerms/Concepts.Digitalimage.Sql-vs-nosql.November8,2013.AccessedAugust3,2017.http://sql-vs-nosql.blogspot.ca/2013/11/indexes-comparison-mongodb-vs-mssqlserver.html.
Figure4-SQLvs.MongoDBStructure
6
DetailedDesign
Withthehelpofthedifferentservicesandframeworksdiscussedintheprevioussection,theapplicationisbuiltinamodularizedfashion.ThevisualbelowprovidesanUMLdiagramviewoftheoverallrelationshipsbetweendifferentmodulesoftheUBCFarmApp.
Figure5–UBCFarmAppDetailedDesignUMLDiagram
7
DesignPatterns Severalwell-establisheddesignpatternsprovidethefoundationforaddingnewmodulestothecurrentproject.TheComponentContainerPatternseparatesfunctionalcomponentsfrompresentationalcomponentssothatthesetasksarehandledseparately.TheReduxStoreandReduxReactPatternlinkstheapptoathirdpartyDatabase,inthiscaseMongoDB,toperformDatastorageandretrieval.
ComponentContainerPattern TheComponentContainerPatternisamethodtoseparatethetasksofdatainteractionfromthoseconcernedwithUserInterface.Separatingcodebyfunctionisalsoawaytomakecollaborativedevelopmentanddebuggingeasier. ThediagramtotherightdescribesthebasicworkflowofamoduleconstructedaccordingtotheComponentContainerPattern.Asillustrated,theComponentinteractswiththedatasourcewhiletheContainerinteractswiththeUser.Mostofthecomponentsinthisapplicationareconstructedthisway,withaComponentJavaScriptfileinteractingwithMongoosefilesandaContainerJavaScriptfilespecifyingtheUserInterfacelayouts.
ReduxStore,ReduxReactPatterns
ItisnosurprisethatReduxanditsservicesarehighlyconnectedwithReact.Reduxismeanttoactasamiddle-manbetweenDatabasesandReactComponents.Itsmainconcernistokeepthefrontendandbackendconsistentwitheachother.OnedrawbackofReduxandReactworthmentioningisthatitinterruptsthenormalworkflowoftheDOMobject.ThismeansthatotherservicesthatalsointeractwiththeDOMobject(suchasD3)needtheirownReduxwrappersaswellinordertoworksmoothly.
Figure6-ComponentContainerPattern
Figure7-ReduxReactPattern
8
IntroductiontoPages ThemainfunctionalitiesoftheUBCFarmApparegroupedbypages,whichappearastabsinthetopnavigationbarofthewebpage.TheyareFields,Tasks,Inventories,Reports,Finances,andUsers.AllofthemareconnectedtotheReduxStoreviaReducerfiles,whichencapsulateactionsthateachobjecttriggerswhenUsersinteractwiththem.Asaresult,theyarealldynamic,andusercontrolled.DataupdatesandrenderingchangesontheUserInterfaceareinstantaneous,whichisacrucialadvantagethatReduxReactprovides.
Fields
TheFieldspagecontainsaprominentGoogleMapsComponentthatvisualizesthegeographicaldataassociatedwithfarmbuildingsandfields.Userscanusethelisttotherighttofocusonaspecificfieldorbuilding,whichhasitsassociatedattributesandactivetasksdisplayedbelowtheMap.Thepagealsocontainsaweathermodule,whichwillbeexpandedinthefuturetoincludemorefeatures.ThemainfieldsinaFieldobjectmodelareitsname,itsassociatedGEOJsonPolygonrepresentingitsgeographicalarea,andaTaskListrepresentingthecurrenttasksthatareassociatedwiththefield.StandardCRUDactionscanbeperformedonthefield,includingdeleting,fetching,andsaving.TheselectactionisaddedtosupportfieldselectionontheFieldspage.
GoogleMapsAPI
Figure8-FieldObjectModel
Figure9-FieldsPage
9
TheFieldspageusesGoogleMapsAPItovisualizethegeographicalinformationoffieldsandbuildings,includingcalculatingtheircoveragearea,aswellasperformingaccuratedistancemeasurements.TomaketheGoogleMapsAPIcompatiblewithReactComponents,ahelpernpmpackagecalledreact-google-mapsisused,aswellassomecustomJavaScriptcode.
Tasks Thereare8typesoftasksthatcanbesetinthecurrentprototype:seeding,irrigation,pest-control,transplanting,soil-sampling,scouting-harvest,scouting-pest,andfertilizing(additionaltasksfore.g.bedpreparation,weedcontrol,andcustomuserdefinedtasks,willbeincludedpriortorelease).Eachtaskisassociatedwithaspecificfieldorbuilding.Whenauserisloggingatask,resourcescanbesubtractedfromoraddedtoinventories.Thesechangesaretrackedbytheinventories,andformthebasisfromwhichdatacanbegatheredforreportgeneration.
TheTaskspagecontainstwotabsthatallowuserstoswitchbetweenaListviewofthetasksandaTimelineviewofthetasks.
Figure10-TasksListView
Thelistviewclearlyshowsthetype,dates,andfieldassociatedwitheachspecifictask.Buttonsforloggingtasksanddeletingthemarealsoeasilyaccessible.TaskscanalsobesetfromtheFieldspageaswell,whereeachfieldhasitsownTaskListdisplayed,containingonlytasksthatareassociatedwithit.
10
VISTimelineAPI
Figure11-TasksTimelineView
Toprovideamorevisualwayofrepresentingthetasks,thevis.js4Timelinepackagewasused.InordertomakethepackagecompatiblewithReactComponentsusingit,aReactwrapperfilewasnecessary.TheTimelineshowninthefigureaboveadjustsautomaticallytonewtasksbeingset,anduserscanfreelyzoominandouttoadjustthetimeframe.
Inventories TheInventoriespageisacollectionofListsrepresentingallresourcesbeingtracked.The7maincategoriesofresourcesidentifiedare:Seeds,Transplanting,Fertilizers,PestControl,Equipment,Vehicles,andHarvestedProduce. Eachobjectineachcollectionisfurthersubdividedbysupplierifapplicable,toseparatecaseswherethesameresourcehasseveraldifferentsources.Thisincreasesthegranularityofdataavailableandallowsformoreaccuratetrackingofresourceusage.
4Documentationavailableatvisjs.org
Figure12–InventoryItemModalExample
11
Figure13–InventoryPage
D3API InordertovisualizethecompositionofdifferentInventoryItems,D3isusedtocreatelineandpiechartsdetailingtheavailabilityofitemsovertime,asshowninfigure12.Althoughbeingadeclarativewaytobuildvisuals,becauseD3hasitsownupdateworkflowitishardertoincorporatewithReactcomparedtootherAPIssuchasGoogleMapsorVIS.Currently,theD3componentsareupdatedbymanuallytriggeringare-renderingofthecontainingReactcomponent.ThisissueisfurtherdiscussedintheDesignChallengesandRecommendationssectionofthisreport.
Finances TheFinancespageissubdividedinto5tabs:Summary,Clients,Suppliers,Invoice,andPurchaseForm.SummarypresentsanoverviewofthefinancialinputsandoutputsoftheFarmoveraspecifiedamountoftimeadjustablebytheuser.ClientsandSupplierseachmaintainalistofcurrentclientsandsuppliersandkeepsrecordoftheirhistoricactivitiesbytrackingpurchaseandsalesitems.InvoiceandPurchaseFormaretwoformpageswhereuserscreatenewinvoicesandpurchaseforms.
Users&Reports TheUserspagekeepsalistofactiveusers/employeesoftheFarm.Thesecanbeeditedwithadministratoraccess.TheReportspagecontainsvariousreportsgeneratedwithD3usingdatagatheredthroughallthedifferentapplicationmodules.Thedataisaggregatedandcalculatedautomatically.
12
DesignChallengesandRecommendation ThroughoutthedevelopmentofthecurrentiterationoftheUBCFarmApp,therehavebeenmanyobstaclestoovercome.Listedbelowaretwochallengesthathadsignificantimpactonthewaytheapplicationisbuilt.Thesepointsshouldbetakenintoaccountwhendesigningfuturecomponents.
IntegratingModuleswithReact Therearemanydifferentthirdpartypackagesandmodulesincorporatedintothisproject.IntegratingallofthemwithReactsmoothlyisthenveryimportantinordertoassureefficiencyandtoavoidbugs.Thisreportmentionsthreesuchmodules:GoogleMaps,VisTimeline,andD3.
D3inparticularwashardtointegratewithReactsinceithasitsownupdatecycleseparatefromthatoftheDOMobject(thebackboneofanywebsite).ItisthereforeseparatefromReact’sworkflowaswell.Inordertoensurethatupdatesfromoneofthesetwowilltriggerupdatesintheother,thereexiststwopossiblesolutions:
1) Re-rendertheSVGvisualgeneratedbyD3withnewdatawhenchangesoccurPros: DatawillbeconsistentlyupdatedCons: Updatesmightbecomechoppyifinternetisslow(affectsuserexperience)
2) Handthehandlingoftheon-clickeventcompletelytoD3Pros: Updateswillbesmooth,allowingbetteranimationandtransitionCons: Listenersmustbesetuponbothsidestorelayuserinputsandnewdata
Inthiscase,option2waschosenbecauseitcostslittleextraworktosetuplistenersanditprovidesabetteruserexperiencewithsmoothertransitions.
Interconnectivity ThisisanissuethattheReduxReactpatternisaimedatsolving.Withoutit,thestateofeachobjectneedstobemonitoredseparatelyandallmustcommunicatewithashareddatabase.ReduxReacttakescontrolofthisprocess,usingitsStoreasamockupofthedatabase.Whileitseemslikejustacopyofinformationformthedatabase,itfulfillstheimportantjobofkeepingthestateofeveryobjectveryorganizedfromthedeveloper’spointofview.Behindthescene,italsoupdatestheDOMelementaffectedbychangesautomatically,sonoJavaScripteventlistenersneedtobemanuallysetup.
13
Conclusion TheUBCFarmApppresentsgreatpotentialforbuildinganagricultureorientedtaskmanagementandreportingsystemthatincreasesthesustainabilityoffarmingpracticesbytrackingthesocio-ecologicalfootprintoffarming.Thisprojectisagreatopportunityforbothresearchintobuildingscalablesoftwareapplicationsandlearningmoreaboutsustainablefarmingpractices.ThemostimportantresultfromthisSustainabilityScholarsprojectisasolidfoundationonwhichmoreimprovementsandnewmodulescanbeaddedtointhefuture.
top related