Post on 24-Jan-2019
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.