digital media design capstone proposal · specialize in marketing, social media, seo (search engine...

of 32

Digital Media Design Capstone Proposal

Harvard Extension School Harvard University

August 9, 2018

Justin Myre

Start Date: September 4, 2018

Anticipated Graduation Date: March 2019

of 32

1. Project Scope 1.1. Tentative Project Title Tri-CitiesWineHub 1.2. Project Goal Theprimarygoalandunderlyingpassionformycapstoneproject,Tri-CitiesWineHub,istocreateacommunity-focused,feature-richdynamicwebapplicationforwineenthusiastsintheTri-Cities’wine-growingregionofWashingtonstate(myhometown).Currently,theTri-Cities,whichislocatedinSoutheasternWashingtonandiscomprisedofthemedium-sizedcitiesofKennewick,Richland,andPasco,hasafairlyminorinternetpresencewithinthewinehobbyistcommunityandisoftentimesovershadowedonthelargerplatformsbymorepopularwineregions,suchasCalifornia’sNapaandSonomavalleys.InotonlyrealizedthisasIpreparedandresearchedideasformycapstone,butIalsocametothisrealizationasawinetouristandenthusiast.IfeelthatTri-CitiesWineHubcanaddressthevacuumthatcurrentlyexistsforwhatisotherwiseaburgeoningandrobustwineregion.Tri-CitiesWineHubwillnotmerelybeaninformationalwebsitenorawineratingwebapplicationbutwillembraceanall-encompassingapproachtolocalwinetastinginSoutheasternWashington.Userswillbeabletobrowselocalwineriesthatarelocatedwithinanapproximatedrivingdistanceof40milesfromtheTri-Cities,theywillbeabletocreateawinevisitationitinerarythatisconfigurablefromabrowsableandsortablewinerylisting,andtheywillbeabletomaintainandcustomizeawinejournalthatcanthenbeusedforreferentialpurposesinordertokeeptrackofpreviouslytastedwines.Furthermore,fromtheinformationputintotheirwinejournals,userscanoptionallysharetheirownwineratings,andbrowsethereviewssubmittedfromotherusers.Someaspectsoftheapplicationwillbeforusers’personaluse,suchastastingnotesanditineraries,whileotherswillbeshareable,suchaswinereviewsandwinerycomments.Additionally,somefeatureswillbefullyaccessibletouserswithoutloggingin,suchasacquiringinformationaboutthewineriesandreadingreviews,butaloginwillberequiredformoreadvancedfeatureslikecommentingoraccessingtheplannerandjournalcomponents.Therearenumerousinformationalwebsitesthatconcernwine-makingandwine-tastingfromageneralperspective,suchaswinefolly.com,winepurchasingplatforms,suchaswine.com,orwineratingforumsandapplications,suchaswines.comandtheandroid/iOSappDelectable,butnothingtomyknowledgeexistsspecificallyfortheTri-Citieswinecommunity.WheremywebapplicationideatrulyexcelsisinitsunderstandingandexecutionofthewholewinetastingprocesswithanintegralfocusontheTri-Citieswineregionitself.Winenovicesanddevoutenthusiastsalike,fromlocalnovicestotouringaficionados,willbeabletorefertoTri-CitiesWineHubforalloftheirrespectivewinehobbyistneedsinthisregion.

of 32

1.3. Learning Goals InKateGaniukova’sarticle“WhatisaFullStackDeveloperin2018andHowDoIBecomeOne”,shethoughtfullyandsystematicallylaysouttheskills,fromHTMLandCSSonthefrontendtodatabaseandmulti-languagefluencyonthebackend,thatarenotonlyinhighdemandforwebdevelopmentjobsinthisdayandagebutarealsobecomingincreasinglynecessary.1Ifullyunderstandthatin“real-world”scenarios,whenlargedevelopmentfirmstakeonlargeprojects,mostwebdevelopmenttasksarecompartmentalizedanddelegatedtospecificteammemberswhospecializeinparticularareas.Thisapproachpromotesefficiency.DesignersdesignandmayneverhavetouseanythingmorethanPhotoshoporIllustrator.Frontenddevelopersdealstrictlywithclient-sidedevelopmentandmakesurealloftheHTMLandCSSassetsaresemanticallyoptimized.Thereareevenindividualswhospecializeinmarketing,socialmedia,SEO(SearchEngineOptimization)integration,ordatabasearchitecture.WhenIbegantheDigitalMediaDesignprogramatHarvard,however,allIknewwasthatIwantedtomakeimpactfulwebsites,learnwhateverIcould,andeventuallyapplythoseskillsinwhatevercapacityIcouldwithintherealmofwebdesignanddevelopment.FormycapstoneIwanttopurposefullysynthesizetheclassesIhavetakenthroughoutthisdiverseDigitalMediaDesignprogramandapplythemtoonefocusedbutwell-roundedproject.Iwanttopayequalattentiontotheuserinterface,frontenddevelopment,informationarchitecture,databasedesign,andbackenddevelopmentwhileIfurtherstrengthenmyunderstandingoflanguageslikePHPandclient-sideJavaScript.Tri-CitiesWineHubwillonlybeinitsinfancywhenthesemesterconcludes,astimewillpermitmetodoonlysomuch,butalloftheseareaswillatleastbesynergizedintoafocuseddesignandfinalimplementation.Intheend,I’msureIwillcometoappreciatehowalloftheseelementsofwebdevelopmentanddesigncometogetherasIlearnwhatparticularareasIhaveaproclivityforand,hopefullyduringtheprocess,strengthenmyweaknesses.IlookforwardtohavingtheopportunitytodigdeeperintothediverseareasI’vecoveredthroughmycourseworkasIcreateawebapplicationthatisnotonlymorecomplexthananythingIhaveeverdonebeforebutisalsobuiltfromthegroundup. 1.4. Target Audience Firstly,itisimportanttoaddressthesignificanceofthewineindustrybothinWashingtonstateasawholeandtheTri-Citiesareaspecifically,asmanypeopleoutsideofthisregionareunawareofjusthowimportanttheTri-CitiesistothewineindustryintheUnitedStatesorthemultitudesofpeoplewhovisittourregion’swineriesorconsumeitswines.AccordingtotheWashingtonStateWineCommission,winetourismgeneratesapproximately4.8billiondollarsintotaleconomicimpactthroughoutthestateofWashingtonandhasbecomethesecondlargestproducerofwineintheUS.2Furthermore,

1 Ganiukova,Kate.WhatisaFullStackDeveloperin2018andHowtoBecomeOne.Retrievedfromhttps://hackernoon.com/what-is-a-full-stack-developer-in-2018-and-how-to-become-one-ca82e8906c872 WashingtonStateWineCommission.WashingtonStateWineFastFacts.Retrievedfromhttps://www.washingtonwine.org/wine/facts-and-stats/state-facts

of 32

inBentonCounty,wheretheTri-Citiesisthecounty’spredominantmetroareawithanurbanpopulationofover250,000people,localwineries“producedjustunder9.5millioncasesofwinein2014”,whichisthemostinanyWashingtoncountybyover7millioncases.3Moreover,VisitTri-Citiesclaimsthatover99%ofthegrapesusedforwine-makinginWashingtonstatecomefromtheColumbiaValleyAVA,whichnotonlyencompassestheentiretyoftheTri-Cities,butswathesofsurroundingruralareasinadjacentcounties.ThereareseveralothernotableAmericanViticulturalAreasneartheTri-Citiesaswell.Althoughitisdifficulttoascertainhowmanywinetourists,consistingofbothlocalwineenthusiastsandvisitingtourists,frequentTri-Citieswineries,itissafetosaythatuniquevisitorscanbeaccountedforinthetensofthousandsonanannualbasis.TheTri-CitiesWineSociety,whichhoststheannualTri-CitiesWineFestival,statesthattherewereover1000visitorsinattendanceatthefestival’sGalaTastingjustlastyear.4Keepinginmindthatthisisjustasingularwine-tastingeventandthattherearenumerousothersinanygivenyear,suchasthespringbarreltastingheldannuallyeveryAprilthroughouttheregion,sufficeittosaythatTri-CitiesWineHubcouldpotentiallyhaveabroadandcompellingappeal.Tri-CitiesWineHubwilldrawmuchofitsuser-basefromtheregion’swineenthusiasts,rangingfromnovicestobonafideconnoisseurs,whoregularlyparticipateinwine-tastingeventsandvisitthe200tastingroomsthatthisareaoffers.TherearethreekindsofusersthatTri-CitiesWineHubcancaterto,andeachcategoryofuserhasspecificneedsthatmayormaynotoverlaptheneedsofotherusers.

User1:WineNoviceThiskindofuserisapersonwhoiseitherstartingoutinthewine-tastinghobbyorisstillintheprocessofacquiringinformationandlearningaboutit.TheusermaynotevenbeawarethattheTri-Citiesareahassomanywineriesandtastingroomsthatofferawine-tastingandtouringexperience.Theusermightjustwanttobrowseinformationwithoutputtingeffortintocreatinganaccount,reviewingwines,orparticipatinginaforumofanykind.Forthesereasons,certainpartsofTri-CitiesWineHubwillalwaysbeaccessiblewithoutaloginaccount,suchastheWineryGuideorAVAMapfeatures,whichwillallowuserstosearchforandreaduponthelocalwineries.Theywon’tbeabletointeractwiththeinformation,suchasfavoriteawineryoraddcomments,butatleasttheycanviewthepertinentinformation.Usersinthiscategorymightalsojustwanttopurchaseawineforanevent,likeaweddingorbirthdayparty,andTri-CitiesWineHub’scommunity-generatedwinereviewswillbeaccessibleandsearchable.User2:LocalWineEnthusiastThiscategoryofuserregularlyenjoyswineandalwayslooksforwardtotheopportunitytogowine-tastingandtourthelocalregion.Theymaynotventurefar,butatleasttheygetouttothewineriesonoccasion.Inthiscase,theusermightwantmoredynamicfeatures,such

3WashingtonStateWineCommission.EconomicandFiscalImpactsofWine&WineGrapesinWashingtonState.Retrievedfromhttps://www.washingtonwine.org/.4Retrievedfromwww.tricitieswinesociety.com.

of 32

astheabilitytoplananitineraryorkeeptrackofpreviouslytastedwines.Acertainamountoftimemayhavepassedtowheretheycan’trememberwhatwinestheyreallyenjoyedorwhatwinerytheywenttolast.TheWineJournalandPlannerfeaturesofTri-CitiesWineHubwillcertainlysatisfytheseusers’needs,butaloginandpasswordwillberequired.User3:AvidWineTourist&ReviewerThisusercategoryisfilledwiththekindsofwineenthusiastswholive,sleepandbreathewine.Theygoonwinetoursregularly,havefilledtheircellarswithtoomanybottlesofwinetocount,andgetcallsfromfriendsandfamilymembersaskingthemwhatwineshouldbepairedwithwhatentrée.IdoubtanyinformationcontainedonTri-CitiesWineHubwouldteachtheseusersanythingtheyhaven’theardofbefore.Maybethey’veevenexhaustedthehundredsoftastingroomsinWashingtonstate.However,everycommunityneedstheirleaders,andthesearethetypesofuserswhowouldreviewthemostwines,giveinformativewinerycomments,andactivelygivesuggestionstothewebadmin(namely,me)fortheinclusionoflesserknownwineries.

1.5. Elevator Pitch Tri-CitiesWineHubhassignificantpotentialtoimpactthewinetourismandtastingindustryintheTri-Citiesbybecomingacommunityplatformforwineenthusiastsofallexperienceswhoalreadyactivelyparticipateinorwanttoparticipateinthisregion’swinetasting.AlthoughtherearemanywinetastingapplicationsthatTri-Citieswineenthusiastscanuse,andthereareeasilyaccessibleresourcesthatprovideinformationabouttheregion’swinesandwineries,nothingtrulyexistsasa“hub”tobringalltheseelementstogetherforthisspecificwineregioninasimplified,cohesive,accessibleandfeature-richapplication.Byutilizingastreamlineduserinterface,Tri-CitiesWineHubcanbethego-towebsiteapplicationforbothlocalandvisitingwinetouristswhoprefertohavealloftheseapplicationfeaturesandinformationalresourcesinonemanageablewebsite.BycreatingsynergyfrommycourseworkatHarvard,frombackendapplicationdevelopmenttofrontenddesign,Icanbringthisprojecttofruition. 1.6. Metrics IhadoriginallyoutlinedthreelevelsofsuccessforTri-CitiesWineHubwhereeachlevelcorrespondedtothefunctionalityandintegrationofthefeaturesIhaveplannedforthefinalizedversionoftheapplication.However,Ihavescratchedthatideainfavorofaimingtowardcertainquantifiablemeasuresofsuccesswithmytimelinebasedaroundthecompletionofthecapstone.Thedeadlineandtimelimitationarefairlyobvious–theendofthesemester–butthesemetricswillkeepmeontrackthroughoutthesemesterasIsequentiallyintegratethevariouscomponentsoftheapplication.Firstly,fromatechnicalstandpoint,allHTMLandCSSmustvalidate.Thatmeans0errors(unlesstheyareassociatedwiththefront-endframeworkandnotmyowncode).HTMLerrorcheckswillbeconductedathttps://validator.w3.org/nu/andCSStestsathttps://jigsaw.w3.org/css-validator/.AsIbuildupthefrontendofthesite,Iwillrepeatedlyconductthetestsandcorrectanyresultingerrors.

of 32

Secondly,allforminputsmustvalidateproperly.Iwillencouragealltestuserstoinputasmuchgarbageastheycanthinkofandtrytobreaktheforms(likeputtingnumberswhereonlylettersshouldgo,orinputtinga20-characterlongphonenumbers,ora500-characterstringofcodeforanamefield).Again,Iwant100%validation.Lastly,fromthetechnicalsideofthings,theservermustloadeachwebpageinlessthan3seconds.Thiswillensurethatmydatabasetablesarebeingqueriedproperlyandwithoutredundancyandmybackendprocessesareoptimized.Ultimately,thiskindoptimizationwillgreatlybenefittheusersaswell.Mostimportantly,formoreuser-focusedmetrics,IwillhaveasurveyadaptedfromtheWebsiteUsabilityScale(WUS)accessibleonTri-CitiesWineHubduringtheusabilitytestingphase.Thisisastandardizedscalethatgaugeshowuser-friendlyawebsiteisbasedontensimplequestionsandtheaggregatescoreoftheusers’responses(eitherstronglydisagree,disagree,neutral,agreeorstronglyagree).Ascoreof100issupposedtomeanthatthewebsiteisfullyusablewhiletheaveragewebsitescoreis72.5Mygoalwillbetohaveanaggregatescoreof90orgreaterfrommyusabilitytesters.WUSQuestions5

1.IthinkthatIwouldliketousethiswebsitefrequently

2.Ifoundthewebsiteunnecessarilycomplex

3.Ithoughtthewebsitewaseasytouse

4.IthinkthatIwouldneedthesupportofsomebodytechnicaltobeabletousethiswebsite

5.Ifoundthevariousfunctionsinthewebsitewerewellintegrated

6.Ithoughttherewastoomuchinconsistencyonthiswebsite

7.Iimaginethatmostpeoplewouldlearntousethiswebsiteveryquickly

8.Ifoundthewebsiteveryawkwardtouse

9.Ifeltveryconfidentusingthewebsite

10.IneededtolearnalotofthingsbeforeIcouldgetgoingwiththiswebsite

1.7. Life of the Project Beyond Capstone MyinitialgoalwhiledevelopingthisideaformycapstonewastocreateawineenthusiastwebapplicationforthewholeofSoutheasternWashingtonandNortheasternOregon,includingtheYakimaValleyandWallaWallawineregions,whichalonecompriseseveral 5 WhatUsersDo.WhatistheWUSScale?Retrievedfromhttps://www.whatusersdo.com/what-website-usability-scale

of 32

hundredsofwineries.However,whilethatinitialaimwasperhapsoverlyambitious,itisnotsounfortunatethatIeventuallychosetheTri-Cities,myhometown,tobethestart,thegroundzeroifyouwill,forsomethingthatmightgrowevenbigger.IwillundoubtedlybeabletoexpandthescopeofthisapplicationbeyondtheTri-Citiesifandwhenthetimecomes.ItrulyhopethatwhenIfinishTri-CitiesWineHubandfulfillmycapstone–aftereachprojectdeadlinehaspassedandeachmilestoneaccomplished–thatitslifehasonlyjustbegun.Ihavealreadylinedupanextensive,thoughtentative,listofpotentialfeaturesthatwillcreateanevenricherexperienceforusers(refertosection6)andthegroundworkwillalreadybelaidouttoexecutethoseplans.Ihavediscussedmycapstoneplanswithmyfriendsandfamily,manyofwhomareavidwineenthusiasts,andtheyarequiteexcitedforthisprojectaswell.Fromamorepragmaticandcareer-focusedperspective,I’mplanningonusingthiscapstoneaspartofmyportfolioforprocuringfutureworkinthewebdesignanddevelopmentfield.Ihavealwayspaidattentiontoandadmiredthequalityofthewebsitesthatmanyoftheselocalwinerieshaveandmaybethiscapstonewillgarnersomeattentionforme.Nevertheless,thiscapstonewillatleastsetmeonthepathofbecomingthefullstackdeveloperI’mstrivingtobe,whichwasmymotivationtoentertheDigitalMediaDesignprograminthefirstplace.Icertainlyneedtoacquirealotofhands-onexperienceintheyearsahead,butinthemeantime,IlookforwardtoapplyingandsynthesizingtheskillsI’velearnedduringmycourseworktomakeTri-CitiesWineHubassuccessfulaspossible. 2. Competitor Review 2.1. Visit Walla Walla WallaWallaisacitylocatedalittleoveranhour’sdriveeastoftheTri-Citiesinanadjacentcountyand,muchliketheTri-Cities(thoughwithafractionofthepopulation),itisanotablewine-growingandwine-touringregioninWashingtonstate.AlthoughVisitWallaWalla’swebsite(http://www.wallawalla.org/)isbroadlymarketedtoWallaWallatouristsandcoversawide-rangeofcityactivitiesandgeneralthingstodo,thereisasectiononthewebsite(http://www.wallawalla.org/wineries)thatspecificallyaddressesthewineindustryandlocalwineries.Theprimarycomponentofthe“Wineries”sectiononthewebsiteisasortingfeaturethatgeneratesaWallaWallawinerylist.Thevariouskindsofinformation,suchasthewineryaddress,contactinformation,andwinerywebsitelinkaresimilartowhatwillbeimplementedwithTri-CitiesWineHub.Additionally,aphotographofthewineryisprovided.

of 32

Whentheuserclicksonaspecificwineryfromthesortedlist,theyarepresentedwithadetailedviewthatrevealsmoreinformationaboutthewineryandabriefabstract.Furthermore,inboththelistedanddetailviews,usershavetwobuttonstochoosetoclickon:“KeepIt”and“MapIt”.Iftheuserclickson“MapIt”,heorsheissenttoanexternalgooglemapssitewherethelocationofthewineryisgeneratedonamapanddirectionsaregivenwhentheuserinputsthestartinglocation.Iftheuserchooses“KeepIt”,however,thenthatwineryisaddedtotheuser’s“TripPlannerSuitcase”,whichsequentiallycompilesalloftheotherwineriesthattheuserhasaddedintoanitemizedlist.Theusercanthenprintthepageasanitineraryforvisitingthevariouswineriesthatwereinitiallyselected.Thisinformationisnotsavedtoadatabase,however,andwilleventuallyberemovedwhenthebrowserisclosed,thusexpiringthebrowsersession.ContrastingVisitWallaWalla’simplementationofawineryplanningfeature,Tri-CitiesWineHubwillactuallyhaveadatabasethatstoresuserinformationandwillonlyberemovedonlyiftheuserchoosestodoso.

Figure1.ScreenshotsofVisitWallaWalla’ssortablewinerylistfeature(left)anddetailedwineryview(right).

of 32

VisitWallaWalla’swinerysearchfeaturecoupledwiththe“Suitcase”andmappingfeaturearequitesimilartothewineryguideandplannerthatI’mproposingtomakewithTri-CitiesWineHub.Asopposedtotheirwebsite,however,myapplicationwillactuallyhaveato-dolisttypefeaturewheretheitinerarycanbecustomizedfromacompiledwish-listofwineriesandthosewineriescanthenbedynamicallycrossed-offbytheuser.Moreover,aTri-CitiesWineHubusermayfavorite,likeandcommentonthewineriesfromthewineriesguide,whichisnotavailableonthiscompetitor’swebsite.ThesortingfeaturethatVisitWallaWallaimplementsisquitenotableandtheirexecutionofit,alongwiththekindsofinformationtheyprovideconcerningthespecificwineries,isabsolutelyinlinewithmyplansforTri-CitiesWineHub–Ijustplantotakethingsastepfurther.Thereiscurrentlynologinfeatureeither,asVisitWallaWallareliesonlyonsessioncookieswithouttheuseofauserdatabase.

2.2. Walla Walla Mobile Wine Tour App VisitWallaWallahasalinktoamobileapp,providedbyMobileWineTour,thathasamorestreamlineduserinterfaceforsearchingthroughthewinerieslistbyname(alphabetically),associatedwines,hoursofoperation,or,viaapersonaldigitaldevice’sGPS,thenearestwineriesaccordingtotheuser’scurrentlocation.ThewineryinformationprovidedbytheappseemstocontainthesamecontentasVisitWallaWalla’swebsite,soIcanonlyassumethatthedatabaseinformationhasbeensharedbetweenthetwo.

Figure2.ScreenshotofVisitWallaWalla’s“TripPlannerSuitcase”feature.

of 32

Inthedetailedviewofthewinery(aftertheuserclicksonawineryfromthelisting),therearetwoclickablebuttonsthatareemphasized,oneislabeled“Map”whiletheotheris“Call”.Whentheuserclicksonthemapbutton,directionsaredisplayedonagooglemap(Google’sAPIwasintegratedintotheapplication).Whenauserclicks“Call”,hisorherphoneautomaticallydialsthewinery.Thesearetwoveryinterestingfeatures,particularlyastheypertaintomobiledevices,becausepeoplewhoventureoutwinetastingcanexplorewhat’saroundthemandgetimmediatedirectionsorcallthewinerydirectlywithquestions.2.3. Untappd Untappdhasbothamobileappandatraditionalwebsite,butforthepurposesofthisreviewIwillbereferringtotheactualwebsite(www.untappd.com),whichalsohappenstobemobileresponsive.Untappdis,atitscore,aratingandreviewingapplicationforbeerandbrewerieswithsomeinterestingsocialmediaandforumfeatures.Thewebsitehasanaccountfeatureanduserdatabase,similartowhatIplanonimplementinginTri-CitiesWineHub,whereuserscreateandmaintainanaccountinordertoparticipateandreview.UnlikeTri-CitiesWineHub,however,Untappd’suser-basemusthaveaccountsortheywillnotbeabletoviewanypartofthesite.

Figure3.ScreenshotsoftheMobileWineTourapp(wallawalla.mobilewinetour.com)thatusesdatabaseinformationprovidedbyVisitWallaWalla.Fromlefttoright:theapp’smainhomepage,theVisitOurWineriespage(withwinerieslistedalphabetically),and,onthefarright,adetailedviewofawineryshowingtheMapandCallbuttons.

of 32

Figure4.ScreenshotofUntappd’shomepage.Visitorstothesitewhodonothaveauseraccountorarenotalreadyloggedinaregreetedwiththisscreen.

Figure5.ScreenshotofUntappd’ssigninscreenthatpopsupaftertheuserclicks“SignIn”fromthepreviouspage.

of 32

AlthoughUntappdencompassesamuchbroaderscope(Tri-CitiesWineHubfocusesononeparticularwineregion)andaplethoraofcomplexandinterwovensocialmediafeatures,thewebsitesharesaspectswithTri-CitiesWineHubfromaloginanduserexperienceperspective.Afterlogginginorinitiallysigningup,Untappdusersaredirectedtotheiruniqueprofilehomepagethatdisplayslistsofdatathatisexclusivetothem.Whileonanyotherpageonthewebsite,thenavigationbarhasaniconthat,whenhoveredover,revealsalistofuser-relatedoptions.

TheratingfeaturesfoundonUntappdcouldmorecloselybecomparedtotheWineReviewsfeatureonTri-CitiesWineHub.WithTri-CitiesWineHub,however,thefocusismoreontheregionalwinetastingexperienceinconjunctionwiththewineriesthemselves,whereasUntappdjustcompilesuserreviewsandrelaystheratingstatisticsofthemanybeersfoundonthesite.Untappd’suserinterfaceisstreamlinedandfriendlybutplacesmoreemphasisontheinternet-communalaspectofratingandreviewingbeerandlessonthelocalbeer-tastingexperience.Inotherwords,ithasalotofsocialmediafeatures,whichiscertainlynotabadthing,butitcancreatealessintimateexperienceuntiltheuserhasenoughfriendstosharetheirinterestswith.

Figure6.ScreenshotsofUntappd’shomepageafterloggingin(left)andthedropdownoflisteduseroptionswhenthenavigationbar’siconishoveredoverwhilethebrowserisnotonthehomepage(right).

of 32

2.4 Wine Tripper (Washington State Edition) Mobile App TheWineTripperapp,whichisavailableonbothiOSandandroid,hasseveralinterestingfeaturesthatsharesimilaritieswithmyplansforTri-CitiesWineHub.MostnotablyistheWinesection,whereuserscanaddindividualwines,includinginformationlikethecostofabottle,thevarietal,andthewinerythatthewinecomesfrom,whichisthenallstoredintheiraccountinalistedformatforfuturereference.Furthermore,userscanoptionallyfavoriteparticularwinestheyaddandwritedowntheirtastingnotes.

ThewinerylistingissimilartoothercompetitorwebsitesIhavereviewed,likeVisitWallaWalla,buttherearemoreoptionsavailabletotheuserinthedetailviewofawinerywhenitisselected.Firstly,amapisshownatthetopwhichindicateswherethewineryislocated,thusprovidinggreatdirectionalreferencefortheuser.Moreover,userscanratethewinery,addacomment,favoriteitandevensendanemailcorrectionifanyofthewinery’sinformation,suchasitstastinghours,havechangedsincetheywerelastputinorarealtogetherincorrect.Allofthisinformationisagainstoredandismadeavailabletootherusers.Overall,theappaddsalotmorefunctionalitythansomeoftheotherwine-focusedapplicationsIhavepreviouslyreviewed.

Figure7.ScreenshotsofWineTripper’sWinefeature(left),whichissimilartowhatIhaveplannedforTri-CitiesWineHub’sWineJournalfeature,andadetailviewofaselectedWinery(right).

of 32

3. Technology Requirements 3.1. Web Design/User Interface: Sketch and Adobe Photoshop

Althoughmymainfocuswiththiscapstonewillbefrontendandbackenddevelopmentandtheinterplaybetweenthetwo,therearelotoffeaturesIhaveplannedforTri-CitiesWineHubthatwilldependonagooduserinterfaceandcohesivedesign.Ifeelthatstartingwithanun-codedinitialdesignofTri-CitiesWineHubwillbevitalforwhetherornotitsucceedswhenthebackendisfullyfunctioningorevenbeforeIbegincoding.AlthoughIwantedtotakeJenKramer’sPlanningSuccessfulWebsitesandApplicationscourse,unfortunately,Ididnot,butIdidtakeDGMDE-50VisualCommunicationsandlearnedabitoftheimportanceofthoughtfuldesigninKramer’sothercoursesaswell.Iaminnoway,shapeorformagraphicdesignerofanykindbutIhavebecomefairlyexperiencedwithPhotoshopand,attheveryleast,haveanunderstandingandappreciationforwhatgooddesigntrulyis.IhavealsorecentlybeenlearningaprogramcalledSketch,whichisamac-onlypieceofsoftwarethatwascreatedentirelywithwebdesignersinmind.ThroughoutthissummerIhavebeenworkingmywaythroughvideotutorialsprovidedbyMikeLocke,aUI/UXdesigner,athiswebsite,http://mlwebco.com/,whereIhavebeenlearninghowtouseSketcheffectivelybeforeanyHTMLorCSSisimplemented.Afullyfunctioningmock-upisn’tnecessaryforthiscapstone,asmyconcentrationwon’tnecessarilybeonUI/UXdesign,butIwillhavethefrontendlookofthewebsitelaidoutwithSketchbeforeIbegintheactualcoding(someroughSketchdraftsareevenincludedthroughoutthistutorial)andthefinalfiles,exportedtojpegimagesforcompatibilitypurposes,willbepartofmydeliverablesforthecapstone. 3.2. Frontend Technologies 3.2.1. UIkit, SASS Customization Agoodfront-endframeworkcanreallycutdownonthetimeittakestohand-codeHTMLandCSSandgivesafront-enddeveloperpre-madeCSSclassestousequicklyandeffectively.6Twitter’sBootstrapcurrentlyseemstobethego-tofront-endframeworkfordevelopersasmostsitesIcomeacrosstendtoimplementitinsomewayoranother.IdebatedbetweenjustusingBootstrap,justlikeeveryoneelseseemsto,orthelesserknownbutequallyresponsiveanduser-friendlyUIkit.IusedBootstrapinbothmyapplicationdevelopmentclasses(CSCIE-15DynamicWebApplicationsandCSCIE-31WebApplicationDevelopmentusingNodeJS)butbecamemostfamiliarwithitinJenKramer’sContentManagementSystemsclass(DGMDE-25).WhiletakingKramer’sModern&MobileFront-EndDesignII,however,IwasintroducedtoUIkitandgrewquitefondofit.IlearnedhowtocustomizeUIkit’sprebuiltthemesbyusingSASS(SyntacticallyAwesomeStyleSheets)andthatistheapproachIwillbetakingwiththiscapstone.

6 Schlesselman,Derek.Pros&ConsofFrontendFrameworks.Retrievedfromhttps://envisionitagency.com/blog/2018/04/pros-cons-front-end-web-frameworks/

of 32

UIkitprovidesgreatoff-the-shelfcapability,browsercompatibilityandamobileresponsivegridsystem,whilealsointegratinggooglefontsandcustomiconsandhavingasmalleroverallfoot-printthanBootstrap.7IwillbemanipulatingtherawSASSfilestocustomizeUIkit’sdefaultstyling,suchasthecolorpalate,custombuttons,andforms,butasabasicframeworkthatutilizesagridsystem,UIkitwillallowmetogetTri-CitiesWineHubmobileresponsiveandprofessional-lookingquitequickly.SomefeaturesIwilltakeadvantageofaretheSwitcherComponent,FormComponent,andtheOff-Canvascomponentformobilenavigation.MostoftheiconographythatwillbeusedinTri-CitiesWineHub,suchastheuserandmobilemenuicons,willcomeprepackagedwithUIkitwhichdrasticallyreducesmydesigntimeandeliminatestheneedtoimportglyphiconsfromsomewhereelse. 3.2.2. Client-side JavaScript/jQuery ManyoftheuserinterfaceelementsofTri-CitiesWineHubwillrequiretheuseofJavaScript/jQueryeventhandlerstohideandshowpartsofaformandmaketransitionsbetweenwhattheuserseesordoesn’tsee.BasicDOM(DocumentObjectModel)manipulationmayalsobenecessarytoachievecertaintasks.Forminputswillnotonlybevalidatedthroughthebackend,butalsoclient-sidevalidationwillbeimplementedthroughajQueryValidationpluginfromhttp://www.jqueryvalidation.org/.Atthispoint,Idon’timagineusingJavascriptwithmuchcomplexityforthisparticularproject,andIshouldn’thavetogofarbeyondwhatIcoveredinCSCIE-3WebProgramming/IntrotoJavaScript.ItshouldjustbeamatterofapplyingwhatIalreadyknow. 3.3. Backend Technologies 3.3.1. MVC (Model View Controller) Framework: Laravel 5.5 Afterweighingallofmyoptions,IhavechosentouseLaravel5.5andutilizeModelViewControllerarchitectureforthebackenddevelopmentoftheapplication.IacquiredinitialexperiencewithapreviousiterationofLaravelinSusanBuck’sCSCIE-15DynamicWebApplications,thenotesfromwhichIwillsurelyrefertothroughoutthebuildingofthisLaravelapplication.ThereareafewnewfeaturesthatIlookforwardtousinginthisversionofLaravel,suchasimprovedandsimplifiedcustomvalidationsrules,whichisgreatformeconsideringhowmanyformsanduserinputsTri-CitiesWineHubwillultimatelyhave,andnewBladedirectivesforsimpleruserauthentication(usefulforthelogincomponentofTri-CitiesWineHub).8Laravel5.5alsorequirestheuseofPHP7andmypreviousexperienceiswithPHP5.Ipurchasedathoroughandcomprehensivereferencebook,TheLaravelCompanion:AGuidetoHelpers,Collections,andMore,writtenbyJonathonKoster,whichwillprovidemewithexhaustiveamountsofmaterialforupdatedLaravelreference,thoughLaravel’sdocumentationisalreadyadequateinmostcases. 7 Sivokon,Eugene.WhyUIkitisbetterthanTwitterBootstrap.Retrievedfromhttps://www.eugenesivokon.com/blog/why-uikit-is-better-than-twitter-bootstrap8LaravelNews.Laravel5.5LTS.Retrievedfromhttps://laravel-news.com/category/laravel-5.5.

of 32

3.3.2. Digital Ocean IwilluseDigitalOceanfortheserverandwebhostforTri-CitiesWineHubandtheapplicationwillrunonwhatiscalla“droplet”.IhavegrownquiteaccustomedtousingDigitalOceanfromBuck’scourseandI’malreadyfamiliarwithhowthingsarepushedtoGithubfrommylocalserverandthenpulledintoDigitalOcean.Itissecure,fast,reliableandfullycompatiblewiththeLAMPstackandthenewestversionofPhp.3.3.3. LAMP Stack (Linux, Apache, MySQL, PHP) AlthoughItookacourseontheMEAN(MongoDB,Express,AngularNode)stack,CSCIE-31WebApplicationDevelopmentusingNodeJS,IhavechosentouseaLAMPstackinconjunctionwithLaravelastheMVCframeworkforTri-CitiesWineHubbecause,well,Iwantto.IfoundtheLaraveldocumentationmorethoroughandcomprehensiblethanwhatisavailableforExpress(Laracastsareawesome),IlikethedefaultbladetemplatinglanguagethatLaravelusesoversomethinglikePugforExpress,andIevenlikehowpickyLaraveliswithitsdirectorystructureandnamingofthingsasopposedtothelawlessnessofnodeandexpress.So,ifIwanttouseLaravel,thatessentiallymeansthatI’llbeusingaLAMPstack.Well,that’snotentirelyaccurate.WhatIlearnedisthatIcoulduseaMongodatabasewithLaravelifIreallywantedto.Mongoisacloud-baseddatabasethatisn’tnearlyasconfinedasSQLisbecauseitdoesn’trelyonrelationaltables,and,duetothepopularityoftheMEANstack,hasbecomequitepopular.9However,afterweighingtheprosandcons,Idon’tthinkTri-CitiesWineHubwouldbenefitfromovercomplicatingthingsbyusingMongoDB.LaravelisreallysetupforMySQLandIdon’treallyneedacloud-basedsystem. 3.4. Version Control: Github IwillbetakingadvantageofversioncontrolasIprogressthroughthebuildingofmyapplication.IamveryfamiliarwithGIT,havinguseditwithGithubforbothmyapplicationsclasses,andIwillcontinuetouseGithub.TherepositoryIusewillbeupdatedatleastweeklyandwilleventuallybepartofthedeliverablesforthecapstone.3.5. Why an MVC framework and not a CMS? EventhoughIhavesomewhatofabiasforLaravelbecauseofmyfamiliaritywithitsdocumentation,directorystructure,andjusthowelegantlyeverythingworkstogether,IdidinitiallywanttouseWordPress,whichisthecontentmanagementsystemIammostfondofandexperiencedwithafterhavingtakenJenKramer’sCMSclass.TheonlyproblemisthatthemoreIthoughtofhowtoconstructthisapplicationbyusingaCMSlikeWordPress,Istumbledintoseveralclunkyissues.WithaCMS,youhavetohacksomanypluginsjusttogetthemtodowhatyouwant.Furthermore,frommyresearchinto

9 Wayner,Peter.MEANvsLAMPforYourNextProgrammingProject.Retrievedfromhttps://www.infoworld.com/article/2937159/javascript/mean-vs-lamp-for-your-next-programming-project.html

of 32

WordPress,IreadalotabouthowtheslowdownonWordPresssitesismostoftenduetoaninefficiencyinqueryingtheSQLdatabasebecausesomuchextraneouscodingandredundancyhasbeenimplemented.WhenIstumbleduponanarticlebyVladimirKazankoventitledWordpressvsLaravel,IreadhowseveraldevelopersresolvedtheslowdownoftheirsitesandapplicationsbytransferringthemfromWordPresstoanMVCframeworklikeLaravelandjustdoingabunchofthecodingfromscratch.10Intheend,evenifIneveruseLaravelafterthiscapstone,thebenefitsofbuildingsomethingfromthegroundupwithaframeworklikethiswillallowmetodevelopmyprogrammingskillsandbecomeamoreeffectivedeveloper.IwillprobablyuseWordPressquiteabitforfuturewebsitedevelopment,butIunderstanditslimitationsandknowthatit’sjustahackableblogforcontent-heavysites,notfeature-drivenapplications. 3.6. Summary of Relevant Coursework

CSCIE-3WebProgramming/IntrotoJavaScriptCSCIE-12WebsiteDevelopmentCSCIE-15DynamicWebApplicationsCSCIE-31WebApplicationDevelopmentusingNodeJSDGMDE-20Modern&MobileFront-EndDesignIDGMDE-25ContentManagementSystemsDGMDE-27Modern&MobileFront-EndDesignIIDGMDE-50VisualCommunicationDesign

4. Design Workflow 4.1. Web Application Overview Firstly,whenusersvisitTri-CitiesWineHubwhattheyexperiencewillbe“served”tothemviaaDigitalOceandroplet.Thedomainname,www.tricitieswinehub.com,whichwaspurchasedandacquiredatNamecheap.com,willbeallocatedtothatdroplet,whichbydefaulthasalreadybeenassignedanIPaddress.DigitalOceanitselfwillberunningafreshlyinstalled,fullyupdatedLAMPstack(Linux,Apache,MySQL,andPHP)withUbuntu,whichisbasedontheLinuxkernel,astheoperatingsystem,Apacheasthewebserver,MySQLasthedatabase,andPHP7astheobject-orientedprogramminglanguage.AsTri-CitiesWineHubwillbeutilizingtheLaravelframework,ComposerwillbeinstalledonDigitalOceanandusedforthedependencymanagement.ItisthroughComposerthatvariousLaraveldependencies(mini-programsandbitsofregularlyupdatedcode)canbeproperlyinstalledonDigitalOceanandallowLaraveltofunctionsmoothlywithallnecessaryrequiredpackagesandupdates.

10 Kazankov,Vladimir.WordpressvsLaravel.Retrievedfromhttps://belitsoft.com/laravel-development-services/cms-or-framework-wordpress-or-laravel

of 32

LaravelutilizesModelViewControllerarchitecture,whichessentiallymeansthattheclient-sideinterface(i.e.whattheuserseesandinteractswith)andrelevantdataisdynamicallygeneratedonasinglepageasopposedtostatichtmlsitesthatdeliveruniquepagestotheuserthatcorrelatetowhateverurls(iewebaddresses)areused.ThedynamicfeaturesareachievedbyutilizingLaravel’sroutes(wheredowegonow?),controllerlogic(whatdowedonowoncewe’rehere?),models(howdowestore/deliverdata?)andviews(whatdoestheuserseenow?).WhenauservisitsthewebsiteandsearchesforwineriesintheWineryGuidesection,forexample,whattheyultimatelyseeonthepageaftersubmittingthesearchcriteriaisdeterminedbywhatLaravel'srouterandcontrollerfigureoutfortheuser.WhentheuserhitstheSearchbutton,Laravel’sroutewillutilizeaGETrequestthatwillthenrefertoaspecificcontrollerfunction.Thatcontrollerfunctionwillextractthequerydatafromthesearchrequest,interactwiththemodelthatupdatestheMySQLdatabase,andthenthecontrollerfunctionwillreturnaspecificview(intheBladetemplatelanguage)thatdynamicallyfillsintherelevantdatafromthedatabase.Thefrontenduserinterface,asmentionedpreviouslyinsection3,willbewrappedwithinUIkit,afrontendframework,whichwillusepre-builtCSSclassestodisplaytheupdatedinformationinatidy,pre-organizedandstyledformatthatismobileresponsiveandaccessible.

Figure8.AFlowChartdemonstratinghowMVCarchitectureworks.InthecontextofTri-CitiesWineHub,thiswillbeachievedbyusingacombinationofLaravelwiththeLAMPstackonDigitalOcean.Retrievedfromhttp://grigorov.website/blog/how-to-organize-your-project-with-php-and-laravel-to-get-the-best-structure-in-mvc-pattern

of 32

4.2 Winery Guide TheWineryGuidelistingfeaturewillenableuserstoeasilysearchforwineriesandbrowsepertinentinformationsuchastastingtimes,addressesandwebsites.Userswillbeabletosearchforwineriesviacertaincriteriabyselectingaparticularcityandchoosingwhetherthewineriesshouldbesortedalphabetically,bythemostfavorited,orbytheirhighestaggregatewineratingscore.Userswillalsobeabletocommentonthewineries,addthemtotheirfavorites,readthewinereviews,orclickonanexternallinkthatsendsthemtothewinery’swebsite.Thesefeatureswillbediscussedlater.

Althoughsuchalistofwineriescouldbefairlyexhaustive(thereareover200inthisregionalone),Iwillcompilethelistmyselfwithaninitialaimofaround50orso.ThatmeansthatIwillactuallybeverifyingtastingfees,tastinghours,andeverythingelseeitherbyphoneoronlineandthencompilingthatdata.ThankstomyperusingofRebeccaDoris’sampleproposal,IwasabletocomeacrossareferenceshemadetoSamDeering’sarticle,Laravel5:LoadSeedDataFromJSON,andafterreadingitIdecidedthatIcouldeasilyjustcatalogthewinerydataintoaJSONfileandseeditintothewineriestableoftheMySQLdatabase.TheonlystipulationisthattheformatmustmimicLaravel’smigrationofthattable.ThefollowingcodedemonstrateswhatthisJSONlistmaylooklikewithtwoexamplewineries.

[ { "id": "1", "winery": "Terra Blanca Estates Winery", "street": "34715 Demoss Rd",

Figure9.ASketchdesign(roughdraft)thatIcreatedwhichdemonstratesthedetailviewofawinerylistedintheWineryGuide.Severalitems,likethestarandheart,arebuttonsthataddfunctionality.

of 32

"city": "Benton City", "state": "WA", "zip": 99320, "phone": "509.588.6082", "AVA": "Red Mountain", "website_url": "http://www.terrablanca.com/", "favorites": 0, "tasting_fee": "Yes", "tasting_hours": "Daily: 10:00am to 6:00pm" }, { "id": "2", "winery": "Airfield Estates Winery", "street": "560 Merlot Drive", "city": "Prosser", "state": "WA", "zip": 99350, "phone": "509.588.6082", "AVA": "Yakima Valley", "website_url":"http://www.airfieldwines.com/", "favorites": 0, "tasting_fee": "Yes", "tasting_hours": "Daily: 11:00am to 5:00pm" } ]

4.3. AVA Map ManyofthewineriesthroughouttheTri-CitiesareaharvesttheirgrapesfromvineyardslocatedinseveraldifferentAmericanViticulturalAreas.TheAVAMapcomponentofTri-CitiesWineHuboffersanalternativeformoftheWineryGuidefeature.WineriesarelistedaccordingtotheirrespectiveAVAareasandacolor-codedmapofWashingtonstate,whichwillbeacustomSVG(ScalableVectorGraphic),willshowwherethewine-grapesfromeachparticularlistofwineriesaregrown.ByimplementingthetechniquesoftwoarticlesIhavecomeacross,MatthewCroak’sCreatinganInteractiveMapusingSVGandCSSandDavidMarcus’HowtomakeandInteractiveandResponsiveMapofUSStates&Capitals,IwilluseCSSclassesandjQuerytoachievethiseffect.

of 32

ThesameinformationthatwasseededintothedatabasefortheWineryGuideviaaJSONfilewillbemanipulatedwiththisfeature.TheTri-CitiesissurroundedbyseveralAVAs,andthismapwillhelptheuservisualizewherethewinegrapesareharvestedforanygivenwineryinthedatabase.AswiththeWineryGuide,thebasicinformation(address,contactinformation,etc)ofthewinerieswillbeprovidedtotheuserwithoutloggingin,butinordertoaddtotheirwishlists,favoritewineries,addcomments,orcreatewinejournalentriesfromthewinery,usersmusthaveanaccountandbeloggedin. 4.5. Login and User Dashboard Userswillhavetheoptiontocreateandlogintoanaccountthatwillgivethemaccesstomorefeatures.Laravelhasgreatbuilt-inauthenticationwhichIwilltakefulladvantageof.Also,asmentionedinthepreviousTechnologysection,Laravel5.5comeswithbladedirectivesthatallowmetoeasilyputinafewlinesofcodetobeabletodeterminewhotheuserisandiftheyareauthenticated,thusgrantingthemaccesstoothernon-publicpartsoftheapplication.HavingaTri-CitiesWineHubaccountwillgrantaccesstotheDashboard,PlannerandWineJournalfeaturesalongwiththeabilitytoaddcommentstowineriesandsharewinereviews/ratings.TheWineryGuide,AVAMap,WineReviews(readonly),andallotherinformationwillalwaysbeaccessibletothepublic.Furthermore,theuserwillhaveadashboardthatkeepstrackoftheirpreviousactivities,accountinfo(password,etc),comments,andsharedreviews.

Figure10.AroughdraftversionofanAVAmapIcreatedinPhotoshop.ThefinalversionwillbeaSVGthatwillhighlightthedifferentregionsviaCSSclassesandjQuery.

of 32

4.6. Tasting Planner ThePlannerfeatureallowsuserstoaddwineriesfromthewineryguidesectiontotheirwishlistsand/oraddthewineriestotheirfavorites.Fromthiswishlist,theycancreatea“to-do”listofsortsthatallowsthemtocross-offwineriesastheyvisitthem.AnyfavoritedwineriesfromthewineryguidewillremainontheirFavoritedListuntiltheyaremanuallytakenoff.Thisallowstheusertoconsistentlybeabletoviewtheirfavoritedwineriesandputthemontheiritineraryforawinerytour.Oncetheyvisitawinery,theusercanoptionallycrossitoffthelistor,iftheylike,addittotheirfavorites.Whenawineryhasbeenvisited,itgoestoasectionontheuser’sdashboardthatlistsallpreviouslyvisitedwineriesthattheusercrossedoffoftheirplanner.4.7. Wine Journal TheWineJournalfeatureenablestheusertoselectivelytakenotesonwinesthattheytastefromthewineries.Thesejournal“entries”willbesavedforfuturereferenceandareeditableandthereviewportionoftheentryisoptionallyshareableandwillbeaddedtotheWineReviewsSection.IwillutilizeLaravel’spaginationfeaturetosorttheentriesoutwithpagenumbersonthebottomoftheTastingJournalpanel.

Figures11.(above)ASketchdesign(roughdraft)Imadeofthenavigationbarwhenausereitherdoesn’thaveanaccountorisn’tloggedin.Figures12.(below)ASketchdesign(roughdraft)Imadeofthesamenavigationbarwhenauserisloggedin.Whentheprofileiconisclickedon,user-onlyoptionsarerevealedinadropdown.

of 32

Figure13.(above)SketchdesignofapreviouslyenteredWineJournalEntryin“viewmode”.

Figure14.SketchdesignoftheWineJournal“addmode”,whichisaseriesofforminputs.

of 32

5. Work Plan and Milestones

5.1. Summary of Deliverables TheprimarydeliverableforthecapstoneisafullyoperationaldynamicwebapplicationthatrunsonaDigitalOceanserveratwww.tricitieswinehub.com.Thefollowingisasummaryoftheotherdeliverablesthatwillbesubmittedwiththecapstoneproject.Refertosections5.2and5.3,whichgointodetailaboutthespecifictentativeduedatesanddescriptionsofthedeliverablesviaaMilestonesTable.

• JSONfilethatcataloguesallofthelistedWineries’Information• CustomAVAMapSVGfile• Sketch/PhotoshopDesignsinJPEGformat• CustomizedSASSFilesfortheUIKitframework• UsabilitySurveyResults• Githubrepositoryforaccesstoversion-controlledcodeandLaravel’sdirectory

structure

of 32

5.2. Preliminary Schedule for Project Steps

PROJECT STEPS

1. Initial UI Design/Mockup (using Sketch & Photoshop)

2. Collect & compile assets & resources (Wineries JSON, Domain name, etc.)

3. Write/finalize content (About, Disclaimer, User Survey, AVA map, etc)

4. Get Laravel running on Digital Ocean; transfer Sketch design to UI Kit; Route Laravel’s views.

5. Map out Laravel Controllers, logic, and SQL Database tables.

6. Fully Implement MVC architecture (models, controllers); Seed tables

7. Implement Winery Search Feature, Google Map directions links, & Itinerary Planner checklist Feature

8. Implement Tasting Journal Feature & Wine Reviews

9. Implement User Login functionality, sharing & commenting features

10. User Testing/ UX Tweaks; Test form validation; finalize jQuery client-side effects

11. Error testing/debugging; Server optimization;

Aug 15 Sep 1 Oct 15 Nov 1 Nov 15 Oct 1 Sep 15 Dec 1

3 WEEKS

3 WEEKS

1 MONTH

2 WEEKS

7 WEEKS

5 WEEKS

2 WEEKS

2 WEEKS

3 WEEKS

2 WEEKS

2 WEEKS

of 32

5.3. Milestones and Deliverables Table

Milestone

Completion

Date

DescriptionofDeliverable(s)

Research;DataCollection;CustomContent

Aug.31,2018

• WineryInformationiscollectedandcompiledintoa

JSONfileforseedingofMySQLWineriestable.(Minimumof50wineries).

• ThecustomAVAMapofWashingtonStatethatoutlinestheAVAareasintheTri-Citieswineregionisproduction-ready.

• Regionalreferenceinformationiswritten,proofreadandfinalized.ThisincludescontentsuchastheAboutSection,TastingTips,andinitialdescriptionsoftheapplication’sfeatures,whichwillbeimplementedintouser-clickableInfoButtons.

UserInterface/InitialWebDesign

Sep.14,2018

• TheinitialSketchdesignfiles,exportedintojpeg

imagesforcompatibilitypurposes,willdemonstratea“pre-coded”front-endbasicdesignoftheapplication,includingthelayout,colorpalate,iconographyanduserinterface.

Mobile-responsivesiterunsonDigitalOcean;Frontendcodeisbasicallycomplete;Bladetemplatedviewsarerouted;

Sep28,2018

• Tri-CitiesWineHubsuccessfullyrunsonDigitalOcean

withViewsproperlyroutedbyusingLaravel’sroutes.Userscanvieweachpageandbrowsethroughoutthesite.MockdataisusedforvisualreferenceasthedatabasetableswillnotyetbeseededorcapableofCRUD(CreateReadUpdateDelete)operations.

• Thesiteisresponsiveandcloselyresemblestheinitialstaticdesign,thoughchangeswillsurelyoccuraseachfeatureindividuallyevolves.

ImplementationofWineryGuide&AVAMapFeatures

Oct.12,2018

• TheWineryGuidefeatureenablesuserstofindand

viewwineriesfromcertainsearchcriteria.UserscanviewthewineriesastheyaredynamicallylistedanddisplayedfromtheJSON-seededdatabasetable.

of 32

• TheAVAmapworksbyhighlightingtheregiononthe

customWashingtonSVGmapanddisplayingalistofwineriesfromthatregion.

ImplementationofPlannerFeature

Oct.26,2018

• UserscanaddwineriesfromtheWineryGuideinto

theirPlannerWishlistandFavorites.WithinthePlanner,theywillbeabletocrossoffwineriesastheyarevisitedandcreateaplanneditineraryfromtheirwishlistsandfavorites.

• UserLoginswillbeinbeta-testingwithapre-setLoginauthenticationandpassword.

ImplementationofTastingJournal

Nov.9,2018

• UserscancreatecustomizedTastingJournalentries

andview,editordeletethemaccordingly.

ImplementationofWineReviews

Nov.23,2018

• Userswillbeabletooptionallycreateandsharewine

reviewsfromtheirTastingJournalentryinformation.ThesewinereviewswillbeviewablefromtheWineReviewssectionfromthehomepageandwillalsoformanaggregatewinereviewscoreontheWineryGuidelistinformationthatwillbesortablebymosthighaveragereviewtolowestaveragereview.

UserCommenting;Login/UserFeaturesfullyimplemented;ContactForm

Nov.30,2018

• UserscancommentonwineriesfromtheWinery

GuidesectionandviewtheircommentsintheirMyCommentssectionwiththeabilitytowrite,editanddeletethemaccordingly.

• Userloginfeatureswillbefullyuser-testedbythispointwiththeabilityforuserstocreatetheirownloginpasswordsandaccounts.

• Thebackendofthecontactformworksandisfullyfunctionalforusebyusers.

Capstone/Final

Dec.14,2018

• Usertestingandcross-browsercompatibilityis

completed.Usersurveyresultsarecompiled.• Errorreporting/Debuggingiscompleted.• Laravelvalidationforformsisthoroughlytested.• Tri-CitiesWineHub,initscurrentPhase1form,is

finishedandaccessible.

of 32

6. Other Considerations: Post-Capstone? IfthegoalsofthiscapstonearefulfilledandeverythinggoesaswellasIsurelyhopetheydo,thenTri-CitiesWineHubwillbeauser-friendlyapplicationwitharichfeature-setgearedtowardadiverseaudienceofwineenthusiasts.However,therearemanyconsiderations,somecomplex,somesimple,thatIwanttoincorporateintotheapplicationpost-capstone,or,iftimepermits(whichitprobablywon’t),aspartofthecapstone.

6.1. User Profile Customization & Advanced Social Media Features Iwouldliketoexpanduponthecapabilitiesthattheuserhastocustomizehisorherprofileandperhapssharemoreinformationthansimplecommentsandtheuser’sname.Currently,inregardtomycapstoneproposal,Iwouldbeabsolutelysatisfiedbysuccessfullyimplementingusernames,passwordauthentication,anduser-enabledfeatures(suchastheabilitytocommentorcreatetastingjournalentries)thatproperlyfunction.EspeciallysinceIhavenopreviousexperiencewithLaravel’sauthenticationmiddlewareoreloquentuserfeatures,orfamiliaritywithhowtheMySQLtableswillevenrelatetoeachotheratthispoint,Idon’tthinkthesecustomfeatureswillbedoableforthecapstone.Suchprofilecustomizationwouldincludephotouploads,anoptionalbio,andbadgesthatareawardedfortheuser’scontributionsthatcanshowothersthelevelofexperienceheorshehaswithwinetastingandmakingcontributionstothewebsiteingeneral.Iwouldalsoliketoincorporateauserfollowingfeaturewhereuserswithsimilartastescanfolloweachotherandcomparetastingnotesandperhapsmeetupduringaplannedwinetour.Faroutstuff=PhaseII.

6.2. Planner: Simultaneous Mapping with Google Map API ThecurrentPlannerfeaturethatIproposedismoreakintoa“to-dolist”wherewineriesfromwish-listsareshownaswellasfavoritedwineries,visitedwineries,and,mostimportantly,theuser’scurrent,planneditinerary.IwouldliketotakethingsastepfurtherandincorporateamappingfeaturewithGoogle’sAPIwherethecourseoftheplanneditineraryisactuallymappedoutwithavisualrepresentationofsomekind.Thisisafairlycomplexfeaturetocode(forme,atleast)giventhatIhaveverylittleexperiencewithGooglesmapAPIandIcouldenvisionthisbeingquitealengthyprocesstoexecute.Infact,Ihadinitiallywantedtoincludethisfeature(and,ifIfindthereisenoughtime,Iverywellmayattemptit)butbasicfunctionalityisthemostimportantaspectformeatthispoint.Idon’tfeelthisfeatureisabsolutelynecessarygiventhatpeoplecanjustusetheirsmartphonestoplugtheaddressesinandgofromthere,butitwouldenabletheusertoatleastvisualizetheproximityoftheirintendedwinevisits,sotheycanplanawinetourmoreefficiently.

6.3. Winery Guide Photography IwantedtouseUIkit’sprepackagedlightboxcomponenttocreateajQuerydisplayofphotographsfromeachwinery.Whenthethumbnailisclickedon,thepictureexpandsintoaslideshow.Thedevelopmentpartissimple;however,thiswouldrequiremetospenda

of 32

lotoftimetravelingtowineriesandtakingphotographs.Iplannedonspendingagoodpartofthesummertakingmanyphotographs,butIwantanextensivecatalogueofwineries(atleast50)whichwouldrequirewaytoomuchofmytime.Afterphotographing5or6wineries,Ijusthadtocutthisfeature.ThemostimportantpartoftheWineryGuideistheinformation.Photographyatthisstageoftheprojectsimplyisn’tnecessary.

6.3. Advanced Admin Capabilities Previously,insection4.2.WineryGuide,IcoveredhowIwillseedthewineriestableviaacompiledJSONfile.Mymainidea(post-capstone),however,istocreateanadmininterfacethatenablesme(oranyauthorizedwebadmin)toaddwineriesviaforminputs.Theinitialseedingofthedatabaseisstillnecessarybutforfutureadditionsaninterfacewouldbebetter.Furthermore,asIcurrentlyhaveTri-CitiesWineHubplannedoutforthecapstone,ifauserputprofanityinacommentorsomethingderogatoryinawinereview,Ihavetomanuallygointothedatabaseanddeleteitandmaybeevendeletetheuser.Notideal.Anadmininterfacewouldallowmetodothesethingswithanactualinterfaceonthewebsite.

6.4. RESTful API with Angular Ihadtomakeaseriouswake-upcallandcometotherealizationthatmybackendprogrammingskillsarestillintheirinfancywhenIdecidedtocutthisideaIhad.WhenItookmysecondapplicationclassandlearnedtheMEANstack,Ireallydidnotcarefornode,expressormongoatall.MaybethatwasbecauseIlearnedLaravelfirst,buteitherway,Ijustdidn’tlikethesetechnologies.Withthe“A”ofMEAN(Angular),however,itwaslikeloveatfirstsite(punintended).Ijustabsolutelylovedangularandthingsreallyclickedforme.IjustknewthatIsomehowhadtouseangularformycapstoneandthenIaskedmyself“CanIuseAngularwithLaravel?”And,aftersiftingthroughtheweb,theanswercame.Yes,youcan.Itisawesome.Keepitinmind.Butdon’tgotoocrazyjustyet.MyinitialplanforTri-CitiesWineHub,afterdoingsomeinterestingresearch,wastomeldthetwoapplicationscourseItook,SusanBuck’sLaravelandLarry’sMEAN,intoonecohesiveproject.MyaimwastocreateaRESTAPIwithLaravelanduseAngulartotapintotheservicesfortheapplication,thuscompletelyforgoingBladeoranythingtodowithLaravelonthefrontend.Idiscoveredtwoarticlesthatlaidouthowtoachievethis:CreatingAPIsinLaravel5.5UsingAPIResourcesbyDevlobandLaravel5.5Angular4TutorialbyKrunal.Buttherealityisthatmyskillswitheitherprogramaresomewhatlimited,andIwouldmuchratherconcentrateonLaravelandalltheadditionalfeaturesIhaveneverused,suchasuserauthentication,amorecomplexrelationalMySQLdatabase,pagination,newervalidationfeatures,andthecountlessHelpersIhavenoideahowtouse.IamstillveryinterestedincreatingaRESTfulAPIbecausetheneedarosewhenIbegancollectingWineryinformationintoaJSONfileandrealizedhowmucheasieritwouldbeiftherewasanAPIsomewhereIcouldjusttapinto.

of 32

7. References CreatinganInteractiveMapusingSVGandCSS Croak,Matthew.https://medium.com/@mattcroak718/creating-an-interactive-map-using-svg-and-css-94a688c11bd6ABSTRACT:ThisarticledetailstheprocessofusinganSVG(ScalableVectorGraphic)andCSStocreateaninteractivemapandlaysoutthesteps.CreatingAPIsinLaravel5.5UsingAPIResourcesDevlob.https://medium.com/@devlob/creating-apis-in-laravel-5-5-using-api-resources-9850c1b70efbABSTRACT:ThisarticleisabasictutorialonhowtocreateaRESTfulAPIwithLaravelservices.DWA-15LectureNotes.Buck,Susan.https://github.com/susanBuck/dwa15-spring2017-notes.ABSTRACT:NotesfromSusanBuck’sDynamicWebApplicationsclass.EconomicandFiscalImpactsofWineandWineGrapesinWashingtonStateWashingtonWineCommissionhttps://www.washingtonwine.org/_assets/fbe3541782fbf4b4275d78fc73fb1bed/CAI.WA%20Wine%20Commission%20Wine%20Industry%20Economic%20and%20Fiscal%20Impact%20Study%202015%200825%5B1%5D%20(1).pdfABSTRACT:ThisextensivereportcoversthewineindustryfromaneconomicperspectivethroughoutWashingtonstate.HowLaravelImplementsMVCandHowtoUseitEffectivelyIghodaro,Neo.https://blog.pusher.com/laravel-mvc-use/ABSTRACT:ThisarticlecoversthebasicsofLaravel’sMVCarchitectureandhowtoproperlyuseitforthebestefficiency.HowtoMakeanInteractiveandResponsiveMapofUSStates&CapitalsMarcus,David.https://websitebeaver.com/how-to-make-an-interactive-and-responsive-svg-map-of-us-states-capitalsABSTRACT:Step-by-stepprocessofhowtomakeaninteractivemapbyusingSVGfilesofstatesandcapitalcitiesasexamples.

of 32

HowtoOrganizeYourProjectwithPHPandLaraveltoGettheBestStructureinMVCPatternGrigorov,Lachezarhttp://grigorov.website/blog/how-to-organize-your-project-with-php-and-laravel-to-get-the-best-structure-in-mvc-patternABSTRACT:CoversthebasicsofhowLaravel’sHelperscangreatlyenhancetheMVCworkflowoftheframework.Laravel5.5Angular4TutorialKrunal.https://appdividend.com/2017/09/22/laravel-5-5-angular-4-tutorial-example-scratch/ABSTRACT:Step-by-steptutorialonhowtoincorporateAngularintoaLaravelprojectbyusingaRESTAPIsuppliedbyLaravelonthebackend.Laravel5.5LTSLaravelNews.https://laravel-news.com/category/laravel-5.5ABSTRACT:CoversthenewfeaturesthatcomewiththeLaravel5.5release.Laravel5:LoadSeedDataFromJSONDeering,Samhttp://www.fullstack4u.com/laravel/laravel-5-load-seed-data-from-json/ABSTRACT:AguidetoseedingdataintoMySQLtablesbyusingaJSONfilethatimitatesLaravel’smigrationforthattable.TheLaravelCompanion:AGuidetoHelpers,Collections,andMore.Koster,Jonathon.(2018).Lulu.com.ABSTRACT:AnexhaustivereferencetomanyofLaravel’smostimportantfeatures,particularlyHelpersandCollections.MEANvsLAMPforYourNextProgrammingProjectWayner,Peterhttps://www.infoworld.com/article/2937159/javascript/mean-vs-lamp-for-your-next-programming-project.htmlABSTRACT:CoverstheprosandconsofMEANandLAMPstacksandhowtogoaboutchoosingoneforanygivenproject.MikeLockeTutorialWebsitehttp://www.mlwebco.com/Pros&ConsofFrontendFrameworksSchlesselman,Derekhttps://envisionitagency.com/blog/2018/04/pros-cons-front-end-web-frameworks/ABSTRACT:Simpleprosandconsofeitherusingafrontendframeworkorcodingfromscratch.

of 32

Regions&AVAsofWashingtonStateWashingtonStateWineCommissionhttps://www.washingtonwine.org/wine/facts-and-stats/regions-and-avasABSTRACT:BasicfactsaboutthewineregionsandviticulturaldesignationsthroughoutWashingtonstate.UltimateWineGuide:WashingtonWineCountryWinePressNorthwesthttp://www.tri-cityherald.com/latest-news/article32062341.htmlABSTRACT:AnewspaperarticlethatdescribesthevariousregionsofWashingtonwherewinegrapesareharvestedandwineismade.WhatisaFullStackDeveloperin2018andHowtoBecomeOne?Ganiukova,Kate.https://hackernoon.com/what-is-a-full-stack-developer-in-2018-and-how-to-become-one-ca82e8906c87ABSTRACT:Theauthor,whoisanexperiencedfull-stackwebdeveloper,describeshowthedynamicsofthewebdevelopmentworldareshiftingasdevelopersarebeginningtodiversifytheirskillsets.WhatistheWUSScale?WhatUsersDo.https://www.whatusersdo.com/what-website-usability-scaleABSTRACT:Theconceptofthe“WebsiteUsabilityScale”iscoveredwithalistofthesurveyquestionsandexplanationsofthescoringmechanism.WhyUIkitisbetterthanTwitterBootstrapSivokon,Eugene.https://www.eugenesivokon.com/blog/why-uikit-is-better-than-twitter-bootstrapABSTRACT:Explainsthebenefits,suchaseaseofcustomizationandhavingasmallfootprint,thattheUIkitfrontendframeworkhasoverTwitter’sBootstrap.WordpressvsLaravelhttps://belitsoft.com/laravel-development-services/cms-or-framework-wordpress-or-laravelKazankov,VladimirABSTRACT:DetailstheadvantagesanddisadvantagesofusingacontentmanagementsystemlikeWordPressoveranMVCframeworklikeLaravel.

digital media design capstone proposal · specialize in marketing, social media, seo (search engine...

Documents