1

Homework 9: Stock Search Android App with Facebook Post – A Mobile Phone Exercise

1.Objectives

Ø BecomefamiliarwithAndroidStudio,AndroidAppdevelopmentandFacebookSDKforAndroid.

Ø Buildagood-lookingAndroidappusingtheAndroidSDK.Ø AddsocialnetworkingfeaturesusingtheFacebookSDK.

2.Background

2.1AndroidStudio

AndroidStudioistheofficialIDEforAndroidapplicationdevelopment,basedonIntelliJIDEA(https://www.jetbrains.com/idea/).OntopofthecapabilitiesyouexpectfromIntelliJ,AndroidStudiooffers:

• FlexibleGradle-basedbuildsystem• Buildvariantsandmultipleapkfilegeneration• Codetemplatestohelpyoubuildcommonappfeatures• Richlayouteditorwithsupportfordraganddropthemeediting• Linttoolstocatchperformance,usability,versioncompatibility,andotherproblems• ProGuardandapp-signingcapabilities• Built-insupportforGoogleCloudPlatform,makingiteasytointegrateGoogleCloud

MessagingandAppEngine

ThehomepageoftheAndroidStudioislocatedat:http://developer.android.com/tools/studio/index.html

2.2.Android

Android is amobileoperating system initiallydevelopedbyAndroid Inc., a firmpurchasedbyGooglein2005.AndroidisbaseduponamodifiedversionoftheLinuxkernel.AsofDecember2013,Androidwasthenumber1mobileOS,inunitsales,surpassingiOS,whileiOSwasstillthemostprofitableplatform.

The Android operating system software stack consists of Java applications running on a JavabasedobjectorientedapplicationframeworkontopofJavacorelibrariesrunningontheDalvikvirtualmachinefeaturingJITcompilation.

TheOfficialAndroidhomepageislocatedat:

2

http://www.android.com/

TheOfficialAndroidDeveloperhomepageislocatedat:

http://developer.android.com/index.html

2.3Facebook

Facebook is a social networking service launched in February 2004, owned and operated byFacebook, Inc. Users can add friends and send them messages, and update their personalprofilestonotifyfriendsaboutthemselvesandwhattheyaredoing.

Users canadditionallypostnews feeds to their profiles, and these feedsmay include images,besidestextmessages.

TheFacebookhomepageisavailableat:

http://www.facebook.com

Facebookprovidesdeveloperswithanapplication-programminginterface,calledtheFacebookPlatform.

2.4MarkitonDemand

MarkitonDemandAPIprovidesdetaileddescriptionaboutthestockinformationofcompanyaswellashistoricalstockvalues.YoucanrefertotheAPIdescriptiononthefollowinglink:

http://dev.markitondemand.com/MODApis/

2.5AmazonWebServices(AWS)

AWS is Amazon’s implementation of cloud computing. Included in AWS is Amazon ElasticComputeCloud(EC2),whichdeliversscalable,pay-as-you-gocomputecapacityinthecloud,andAWS Elastic Beanstalk, an even easier way to quickly deploy andmanage applications in theAWScloud.Yousimplyuploadyourapplication,andElasticBeanstalkautomaticallyhandlesthedeploymentdetailsofcapacityprovisioning,loadbalancing,auto-scaling,andapplicationhealthmonitoring. Elastic Beanstalk is built using familiar software stacks such as the Apache HTTPServer,PHP,andPython,PassengerforRuby,IIS7.5for.NET,andApacheTomcatforJava.

TheAmazonWebServiceshomepageisavailableat:http://aws.amazon.com/

2.6GoogleAppEngine(GAE)

GoogleAppEngineapplicationsareeasytocreate,easytomaintain,andeasytoscaleasyourtrafficanddatastorageneedschange.WithAppEngine,therearenoserverstomaintain.Yousimplyuploadyourapplicationandit’sreadytogo.AppEngineapplicationsautomaticallyscalebased on incoming traffic. Load balancing, micro services, authorization, SQL and NoSQL

3

databases,memcache, traffic splitting, logging, search, versioning, roll out and roll backs, andsecurityscanningareallsupportednativelyandarehighlycustomizable.

TolearnmoreaboutGAEsupportforPHPvisitthepage:

https://cloud.google.com/appengine/docs/php/

3.Prerequisites

Thishomeworkrequirestheuseofthefollowingcomponents:

1. Thishomeworkrequirestheuseofthefollowingcomponents:

A. DownloadandinstallAndroidStudio.YoumayuseanyotherIDEotherthanAndroidStudiosuchasEclipse,butyouwillbeonyourownifproblemsspringup.

B. FirstyouneedtoinstallJavaonyourlocalmachine.YoucandownloadJDK8from-http://www.oracle.com/technetwork/java/javase/downloads/index.html.Forwindowsusers,afterinstallingtheJDK,youneedtoaddenvironmentvariablesforJDK.• Properties->Advanced->EnvironmentVariables->Systemvariables->New

Variable

Name:JAVA_HOME,VariableValue:<FullpathtotheJDK>

• Typically,thisfullpathlookssomethinglikeC:\ProgramFiles\Java\jdk1.8.0.

ThenmodifythePATHvariableasfollowsonMicrosoftWindows:C:\WINDOWS\system32;C:\WINDOWS;C:\ProgramFiles\Java\jdk1.8.0\binThispathmayvarydependingonyourinstallation.

• Note:ThePATHenvironmentvariableisaseriesofdirectoriesseparatedbysemicolons(;)andisnotcase-sensitive.MicrosoftWindowslooksforprogramsinthePATHdirectoriesinorder,fromlefttoright.YoushouldonlyhaveonebindirectoryforaJDKinthepathatatime.Thosefollowingthefirstinstanceareignored.Ifyouarenotsurewheretoaddthepath,addittotherightofthevalueofthePATHvariable.ThenewpathtakeseffectineachnewcommandwindowyouopenaftersettingthePATHvariable.

• Rebootyourcomputerandtype“java–version”intheterminaltoseewhetheryourJDKhasbeeninstalledcorrectly.

SetuptheAndroidStudioenvironmentsothatyoucanrunanysampleandroidapponyourphone/tablet/virtualdevicefromit.Thenyoucanstartwiththishomeworkapp.Youwillneedtoenable“DeveloperOptions”and“USBdebugging”ifyouareusinganactualdevice.ThereareendlessresourcesasimplesearchawayonhowtosetupyourAndroidStudio.

4

2. YoualsoneedtocreateaFacebookDeveloperapplicationasyoudidforyourhomework8.Followthefollowingstepstogetstarted:

a. DownloadSDK:DownloadthelatestFacebookAndroidSDKLink:https://developers.facebook.com/docs/android

b. InstructionstoimportinAndroidStudio:https://developers.facebook.com/docs/android/getting-started

c. CreateanewapponFacebookdeveloper:https://developers.facebook.com/apps/

d. SpecifyAppInforelatedtotheHW9androidapplicationyouaredeveloping.

e. KeyHashes:SpecifyAndroidkeyhashforthedevelopmentenvironmentusingthecommandsmentioned.

f. TrackAppInstallsandAppOpens:Notrequired.

g. NextSteps:UtilizeLogin(optional)andSharetutorialstoachievethefunctionalityrequiredfortheexercise.Note:InyourFacebookapplicationsettings,youshouldgotothe“Status&Review”sectionandchoose“Yes”forthequestion“Doyouwanttomakethisappandallitslivefeaturesavailabletothegeneralpublic?”asyoudidforhomework8.

4.HighLevelDesign

In this exercise, you will develop an Android Mobile application, which will have followingfunctionality:

AnAuto-completeeditbox isprovided toenter the stocknameor symbol.Theusercan thenselect a stock from the suggestions. This feature would be developed using the Android's‘AutoCompleteTextView’component.DetailsonhowtousetheAPIwouldbecoveredinSection5.

5

Figure1.SearchForm

Oncetheuserhasprovideddataandselectedaresultfromtheautocompletelisthewouldclickon‘GetQuote’,whenvalidationmustbedonetocheckthattheentereddataisvalid.

Oncethevalidationissuccessful,wewouldgetthestockdetailsusingourPHPscripthostedonAmazonWebServices/GoogleAppEngine,whichwould return the result in JSON format.WewoulddisplaythestockdetailsinaListViewcomponentinthe‘Current’tab.Furthermore,ourPHP script would be responsible for rendering the HighCharts in the ‘Historical’ tab and alsorendingthenewsarticlesinthe‘News’tab.

5. Implementation

5.1 SearchForm

YoumustreplicatetheSearchForm,asshowninFigure1.ThefieldnamesremainthesameasinHomework8.

Theinterfaceconsistsofthefollowing:• An ‘AutoCompleteTextView’ component allowing the user to enter the company

nameorsymbol.• TwobuttonsforinteractionintheSearchForm.

• Abutton‘CLEAR’toclearthe‘AutoCompleteTextView’component.• Abutton‘GETQUOITE’togetthequote,aftervalidation.

• TheFavoriteListViewshowingthelistoffavoritestocks.

6

• TheFavoriteListstartswithanemptyfavoritelist.

Theformhastwobuttons:a) GET QUOTE: Validations are first performed, when the button is clicked. If the

validations are successful, then the stock details would be fetched from the server(either hosted on Google App Engine or Amazon Web Services). However, if thevalidationsareunsuccessful,appropriatemessageswouldbedisplayedandno furtherrequestswouldbemadetotheserver.

b) CLEAR: This button would clear the ‘AutoCompleteTextView’ and also clear anyvalidationserror,ifpresent.

5.1.1 AutoComplete

The user can enter the stock name or symbol in the text view to get the stockinformation from our PHP script. Based on the user input, the AutoComplete woulddisplay the all thematching companies and symbols (see Figure 2) bymaking aHTTPrequest. The requests would be made only when the user enters a minimum of 3characters to avoid unnecessary network calls. This needs to be implemented usingAutoCompleteTextView.

Figure2:AutoCompleteSuggestions

5.1.2 Validations

Thefollowingvalidationsneedtobeimplemented:• Empty Entry: If the user does not enter anything in the AutoComplete

component,youneedtodisplayanappropriatemessagetoindicatethesame.• InvalidSelection:Iftheuserentersaninvalidentrywhichdoesnotcorrespond

to any valid stock symbol, you need to display an appropriate message toindicatethesame.

7

Figure3:Validations

Onceiftheuserinputissuccessfullyvalidated,theAPIcallsshouldbemade,otherwiseappropriatemessagesshouldbedisplayed.

5.1.3 GetQuoteExecutionOncethevalidationissuccessful,youshouldexecuteanHTTPrequesttransactiontothePHPscriptwhichislocatedintheGoogleAppEngine/AmazonWebServices.ThePHPscriptonGoogleAppEngine/AmazonWebServices,modifiedafterHomework6,isusedtoretrievedatafromMarkitonDemand.YoushouldpassthecompanysymbolasaparameterofthetransactionwhencallingthePHPscript.Forexample,ifyourGoogleAppEngine/AmazonWebServicesserviceislocatedathttp://example.appspot.com

andtheuserenters‘AAPL’asthecompanysymbol,thenaqueryofthefollowingtypeneedstobegenerated:http://example.appspot.com/?symbol=AAPLThePHPscriptrunningontheGoogleAppEngine/AmazonWebServiceswouldextractthestockdetailsofthecompanysymbol,performanAPIrequesttoMarkitonDemand,andreturnsthedatainJSONdata.AfterobtainingthequeryresultsfromthecallbackoftheAJAXrequest,wewouldbedisplayingtheresultsinadrop-downsuggestionlist.Notice:InHomework6yourPHPscriptproducedHTML.Inthisexercise,theoutputmustbechangedtoJSONandthePHPcodemustrunonGoogleAppEngine/AmazonWebServices.

8

5.2 FavoriteListTheFavoritestockswouldbedisplayedinalistasperFigure4.Thedataforthefavoritelistshouldbeloadedfrom‘SharedPreferences’.Formoreaboutsharedpreferencespleaserefertotheappendix.

Figure4:FavoriteStocks

Everyentryinthefavoritelistshouldcontainsthefollowing:

Field DescriptionSymbol DisplaysthesymbolofthecompanyCompanyName DisplaysthenameofthecompanyStockPrice DisplaysthecurrentstockpriceofthecompanyChangePercentage Displaysthepercentagechangeofthepriceofthecompany.It

shouldberoundedto2decimalplacesandthebackgroundshouldindicateanincreaseordecreaseinthechange.Forexample,thebackgroundshouldbegreenifthechangeispositiveandredifitisnegative.E.g.+1.50%ingreenbackground.

MarketCap Displaysthemarketcapofthecurrentstock.Possiblesuffixesare{Billions,Millions,None}.Eachvalueshouldbecalculatedandappendedwithappropriatesuffixandroundedto2decimals.E.g.5.71Billionor5.71Millionor571000.

Additionally,thereneedstobeafewimportantfeatures:

• AutomaticRefresh–Aswitch(RefertoSection7):whenitisonitshouldrefreshonlythepriceandchangepercentagecolumnevery10seconds.

• Refreshbutton–Shouldrefreshonlythepriceandchangecolumnfieldsandnottherestofthetable.

• StockDetails–ThestockdetailsactivityshouldbeloadedwhentheuserclicksonanyentryofthelistView.

5.3 StockDetails

TheStockDetailssectionshouldbedesignedasperFigure5.TheStockdetailsshouldbeimplemented using the ViewPager and TabLayout to render the tabs – ‘Current’,‘Historical’and‘News’.

9

Thestockdetailsectionshouldhave3tabs:

• CurrentStock• HistoricalCharts• NewsFeeds

ThebackbuttonintheheadershouldnavigatebacktotheSearchForm.

Figure5:StockDetails

TheStockDetailswouldbestartingwiththe‘Current’tabasloadedbydefault.Furthermore,thestockdetailswouldhavealistshowingallthestockvalues.ThelistofthestockdetailswouldbeimplementedusingaListView.Thefollowingstockwouldbedisplayed:

Field DescriptionCompanyName DisplaysthenameofthecompanySymbol DisplaysthesymbolofthecompanyStockPrice DisplaysthecurrentstockpriceofthecompanyChange(ChangePercentage)

Displaysthechangeandpercentagechangeofthepriceofthecompany.Itshouldberoundedto2decimalplaces,followedbyanindicator(image)whichindicateswhetherthechangeispositiveornegative.Forexample,theimageshouldbeagreenupwardarrowifthechangeispositiveandreddownloadarrowifitisnegative.

TimeStamp Displaythetimestampofthelastupdatedprice.MarketCap Displaysthemarketcapofthecurrentstock.Possiblesuffixes

are{Billions,Millions,None}.Eachvalueshouldbecalculatedandappendedwithappropriatesuffixandroundedto2decimals.E.g.5.71Billionor5.71Millionor571000.

Volume Displaysthevolumeofthecurrentstock

10

ChangeYTD(ChangeYTDPercentage)

DisplaystheChangeofthestockfromthebeginningofthecurrentyeartilldate.Itshouldberoundedto2decimalplaces,followedbyanindicator(image)whichindicateswhetherthechangeispositiveornegative.Forexample,theimageshouldbeagreenupwardarrowifthechangeispositiveandreddownloadarrowifitisnegative.

High Displaysthehighestvalueofthestock’spriceforthecurrentdate.

Low Displaysthelowestvalueofthestock’spriceforthecurrentdate.

Open Displaystheopeningvalueofthestock’spriceforthecurrentdate.

Belowthelistofstockdetails,youneedtoshowthetoday’sstockactivityintheformofanimage.ThiswouldbeimplementedusinganImageView.TheimageofthecurrentdailychartofthestockofthecompanyshouldberetrievedviaYahoochartsAPI,aswasdoneinHW8.

5.4 HistoricalChartsThistabrepresentsthehistoricalchartsshowingthevalueofthestockinthepast.IthastorenderedasperFigure6.

Figure6:HistoricalCharts

ThishastoimplementedusingaWebViewusingHighChartsAPI.ThisissimilartoimplementationinHW8.

11

Itshouldhavethefollowingdetails:• Itshouldhavethefollowingzoomlevels:1week,1month,3months,6months,

1year,YTDandAll.• Itshoulddefaulttoshowing1weekworthofstockdata.• Thetitleofthechartshouldbecompanysymbolstockvalue.• TheXAxisshouldbedatetime.• TheYAxisshouldbeStockValue

5.5 NewsFeed

Thistabrepresents4newsarticlesrelatedtothecurrentstock.ThiswouldberenderedasperFigure7.

Figure7:NewsFeed

ThenewsarticlesneedtoimplementedinaListView.Eachoftheentryinthelistshoulddisplaythefollowingdetails:

Field ValueArticleTitle RepresentsthetitleofthenewsarticleArticleContent RepresentsthecontentofthenewsarticlePublisher RepresentsthepublisherofthenewsarticleDate Representsthedateofthenewsarticle

YouwillbeusingtheGoogleNewsFeedAPIorBingSearchAPI.

12

5.6 FacebookShareThe“Facebook”iconshouldbeprovidedtopoststockinformationonFacebook(similarto HomeWork #8). The Facebook post from the Android appwill contain exactly thesamecontentsasfromHomeWork#8.WhentheuserpostsinformationonFacebook,asuccessmessageshouldbedisplayedon the Android screen.When the user cancels the Facebook dialog, a correspondingmessageshouldbedisplayedonthescreen.While posting information on Facebook, the app will authorize (log in) the user toFacebook; requests the user permission to access the user’s data; and then post themessagetoFacebookjustlikewhatwasdoneinHomework#8.

Figure8.Facebook

6.ImplementationHints

SeetheHW9IOSCluesfile.

7.MaterialYouNeedtoSubmit

Unlike other exercises, youwill have to “demo” your submission “in person” during a specialgrading session. Details and logistics for the demo will be provided in class, in theAnnouncementpageandinPiazza.

YoushouldalsoZIPyourAndroidsourcedirectoryandSUBMITtheresultingZIPfile.Makesurethatthesourcepathdoesnotincludethe.apkbinaryfile.