Bouw een Twitter-zoekapp projectinstellingen

Deze tweedelige tutorialserie laat je kennismaken met de basisprincipes van het werken met RESTful webservices met behulp van de Android SDK. Onderweg leert u hoe u zoekopdrachten uitvoert met de openbare Twitter API!

Het spreekt voor zich dat internettoegang een van de belangrijkste troeven is die u kunt gebruiken op Android-apparaten. Veel populaire sites en sociale netwerken gebruiken webservices om toegang te bieden tot hun gegevens, vaak met behulp van architecturale modellen zoals REST (Representational State Transfer). Twitter is zo'n service, met verschillende API's voor toegang tot tweets en tijdlijnen. In deze tweedelige serie zullen we de Twitter Search API gebruiken om recente tweets op te halen op een door de gebruiker gekozen zoekterm.

In dit eerste deel zullen we de gebruikersinvoer vastleggen en de URL opbouwen om in een HTTP-verzoek naar de Twitter-zoek-URL te gebruiken voor tweets op de invoerterm. In het tweede deel zullen we de resultaten ophalen, die in JSON zullen worden opgemaakt. We zullen de geretourneerde JSON-tweetfeed ontleden en weergeven in een eenvoudige visuele interface.

Deze tutorialserie op Android Twitter Search bestaat uit twee delen:

  • Deel 1: Bouw het zoekverzoek op
  • Deel 2: haal de Twitter JSON-feed op en parseer deze

Stap 1: maak een nieuw project en lay-out

Maak een nieuw Project in Eclipse: kies Bestand> Nieuw> Project en selecteer vervolgens Android Application Project en klik op Volgende. Voer de door u gekozen applicatie-, project- en pakketnamen in. U kunt het standaardminimum en doel-API-niveaus geselecteerd laten. Selecteer de door u gekozen configuratieopties. Selecteer Leeg activiteit in het scherm Activiteit maken. Voer in het volgende scherm "TwitterSearchActivity" in als de activiteitnaam en laat Eclipse het lay-outbestand voor u genereren ("activity_twitter_search" standaard).

Wanneer u op Voltooien klikt, opent Eclipse uw nieuwe lay-outbestand.

Open het manifestbestand voor uw nieuwe project en selecteer het tabblad "AndroidManifest.xml" om de code te bewerken. Voeg het volgende element toe binnen het element Manifest maar buiten alle andere elementen:

 

Dit is nodig voor elke app die toegang heeft tot internetbronnen.


Stap 2: Bouw de gebruikersinterface

Laten we nu de elementen van de gebruikersinterface bouwen. Open uw hoofdbestand met de activiteitenlay-out opnieuw en selecteer het tabblad XML om de code rechtstreeks te bewerken. Afhankelijk van je Eclipse-opstelling, zou je ongeveer het volgende schema moeten hebben:

   

Als je iets anders hebt in je layoutbestand, vervang het dan om te beginnen met deze code.

We kunnen de relatieve lay-out verlaten zoals deze is, maar de bestaande tekstweergave vervangen door een andere enigszins andere:

 

De ID is voor het opmaken van andere items ten opzichte van deze. De andere eigenschappen zijn voor eenvoudige styling en positionering. Open uw "res / values ​​/ strings.xml" -bestand en voeg de string toe waarnaar we hierboven hebben verwezen:

 Voer je Twitter-zoekterm in

Dit is slechts een informatieve tekst. Terug in uw lay-outbestand, voeg na de tekstweergave een tekstbewerking toe om de zoekterm van de gebruiker vast te leggen:

 

We plaatsen het element ten opzichte van de tekstweergave die we al hebben toegevoegd. De meeste andere attributen zijn voor styling; voel je vrij om ze te wijzigen zoals je wilt. Voeg de string toe die wordt genoemd als een hint naar uw bestand "strings.xml":

 Zoekterm

Voeg na het bewerken van tekst een knop toe waarmee de gebruiker zijn zoekopdracht kan uitvoeren:

 

Hier passen we opnieuw relatieve positionering en stylingattributen toe. We specificeren ook een uit te voeren methode wanneer de gebruiker op de knop klikt met behulp van de bij klikken kenmerk - we zullen deze methode later aan de klasse Activiteit toevoegen. Voeg de opgegeven reeks toe aan uw waardenbestand:

 Zoeken

Vervolgens maken we het gebied waarin opgehaalde tweets worden weergegeven. We weten niet hoe lang deze sectie zal zijn wanneer deze op het scherm wordt weergegeven, dus laten we een Scroll View toevoegen zodat gebruikers toegang hebben tot alles - na de knop:

  

Voeg in de Scroll View een definitieve tekstweergave toe:

 

We zullen het ID-kenmerk gebruiken om deze tekstweergave in Java te identificeren wanneer we de opgehaalde tweets weergeven. Naast lay-outeigenschappen, specificeren we ook dat de tekst moet bevriezen, zodat Android deze niet weggooit bij wijzigingen in de oriëntatie. Voeg de laatste reeks toe aan het tekenbestand met tekenreeksen:

 ---

Dat is onze lay-out compleet. U kunt de lay-out uiteraard wijzigen als u dat wilt. In deze zelfstudies concentreren we ons op het ophalen van de tweet-feed via internet. Dit is hoe de app wordt weergegeven als u deze later uitvoert:


Stap 3: bereid de activiteitenklasse voor

Open uw hoofdactiviteitsklasse. De openingszin van uw klassenverklaring zou als volgt moeten verschijnen:

 publieke klasse TwitterSearchActivity breidt activiteit uit 

Eclipse zou ook een standaard moeten hebben toegevoegd onCreate methode en optioneel ook een optiemenu-methode. Jouw onCreate methode moet het hoofdlay-outbestand dat we hebben bewerkt als volgt instellen:

 setContentView (R.layout.activity_twitter_search);

Als een van de genoemde items niet aanwezig is in uw klassenbestand zoals gemaakt door Eclipse, raadpleegt u de downloadmap die bij deze zelfstudie is gevoegd.

Voeg de volgende importinstructies toe aan uw klas en vervang die die Eclipse al heeft ingevuld:

 importeer java.io.BufferedReader; import java.io.InputStream; importeer java.io.InputStreamReader; importeer java.net.URLEncoder; import org.apache.http.HttpEntity; import org.apache.http.HttpResponse; import org.apache.http.StatusLine; import org.apache.http.client.HttpClient; import org.apache.http.client.methods.HttpGet; import org.apache.http.impl.client.DefaultHttpClient; import org.json.JSONArray; import org.json.JSONObject; import android.os.AsyncTask; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.View; importeer android.widget.EditText; import android.widget.TextView;

Zoals u ziet, hebben we invoer voor HTTP-aanvraag en responsafhandeling, voor de verwerking van inkomende gegevens, voor het parseren van JSON-gegevens en voor algemene Android-componenten.

Voeg in uw klassenverklaring een instantievariabele toe om bij te houden welke tekstweergave we hebben gemaakt voor het weergeven van de opgehaalde tweets:

 privé TextView tweetDisplay;

In jouw onCreate methode, zoek na de bestaande code een verwijzing op naar de tekstweergave en sla deze op in de variabele:

 tweetDisplay = (TextView) findViewById (R.id.tweet_txt);

Nu kunnen we in de hele klas naar dit gebruikersinterface-item verwijzen. Dit doen we bij het weergeven van de opgehaalde tweet-feed en ook bij het weergeven van foutberichten voor de gebruiker als er iets misgaat.


Stap 4: Geef de klikmethode op

Vergeet niet dat we in het lay-outbestand een bij klikken attribuut aan de knop, specificeert een methode met de naam "searchTwitter" - laten we die methode nu implementeren. Voeg het toe aan je klas na de bestaande methoden:

 public void searchTwitter (bekijk weergave) 

Omdat we het opsloten als een bij klikken attribuut, de methode zal een verwijzing ontvangen naar de View waarop is geklikt. We hebben niet echt de knop nodig waarop is geklikt, we willen de tekstweergave bewerken. Laten we de door de gebruiker ingevoerde tekst terughalen en opslaan als een string:

 EditText searchTxt = (EditText) findViewById (R.id.search_edit); String searchTerm = searchTxt.getText (). ToString ();

We gebruiken de ID die we de bewerkingstekst in het lay-outbestand hebben gegeven om deze te identificeren. Laten we, voordat we verder gaan, controleren of de gebruiker een zoekterm heeft ingevoerd om onnodige verwerking te voorkomen:

 if (searchTerm.length ()> 0)  else tweetDisplay.setText ("Voer een zoekopdracht in!");

Als de gebruiker niets heeft ingevoerd, wordt er eenvoudig een bericht weergegeven in de tekstweergave voor tweetinvoer die we overal in de klas hebben.


Stap 5: Bereid de URL voor en codeer deze

De verwerking die we nu gaan toevoegen, kan uitzonderingen gooien, dus voeg toe proberen en vangst blokken binnen de als verklaring in de "searchTwitter" -methode:

 probeer  catch (Uitzondering e) tweetDisplay.setText ("Whoops - er is iets misgegaan!"); e.printStackTrace (); 

Als een uitzondering wordt gegenereerd, schrijven we gewoon een foutmelding zoals we deden toen de gebruiker geen zoekterm invoerde.

Om de Twitter Search API te gebruiken, voegt u uw zoekterm toe aan een basis-URL voor de service. Als de gebruiker karakters zoals spaties invoert, coderen we hun tekst. Binnen in de proberen blok, voeg het volgende toe:

 String encodedSearch = URLEncoder.encode (searchTerm, "UTF-8");

Laten we nu de API-URL voor Twitter zoeken samenstellen. Dit is het algemene formaat:

 http://search.twitter.com/search.json?q=query

De tekst "query" moet worden vervangen door de tekst waarnaar u zoekt. Om de gebruikerstekst in deze URL te maken, voegt u het volgende toe:

 String searchURL = "http://search.twitter.com/search.json?q="+enoded Search;

U kunt proberen de JSON-tweetfeed in uw webbrowser op te halen door de URL in uw adresbalk te plakken en elke gewenste zoekterm aan het einde te gebruiken, bijvoorbeeld:

 http://search.twitter.com/search.json?q=android

Uw browser zou de JSON-resultaten moeten weergeven, die niet gemakkelijk te lezen zijn, maar u een idee zouden moeten geven van wat uw toepassing zal ontvangen bij het uitvoeren van de zoekopdracht.


Conclusie

We zijn nu klaar om onze Twitter-zoekopdracht uit te voeren. In de volgende zelfstudie maken we een AsyncTask-klasse binnen de hoofdklasse Activiteit. Deze klasse zal omgaan met het ophalen van de tweet-feed met behulp van HTTP-aanvraag- en reactieobjecten in een achtergrondthread, en vervolgens de resultaten weergeven in de UI. We zullen de Java JSON-verwerkingsbibliotheken gebruiken om de tweet-feed te ontleden en deze te presenteren binnen de lay-out die we hierboven hebben gemaakt.