Hoofdstuk 11 Social media, telefoneren, SMS, camera en e- mail

4 – Social media, telefoneren, SMS, camera en e-‐mail

1

Hoofdstuk 11 Social media, telefoneren, SMS, camera en e-‐mail In dit hoofdstuk behandelen we enkele functies die van belang zijn voor veel apps: updates posten op Facebook en Twitter, bellen, sms’en en e-‐mailen en ten slotte het gebruiken van de camera om foto’s te versturen naar Facebook of als attachments bij e-‐mails. Al deze onderdelen gaan dus over het communiceren met de buitenwereld. Zoals dit een essentieel voor het internet is geworden, zal dit ook de standaard worden voor apps. 11.1 In dit hoofdstuk -

Dialoog-‐ en actievensters Foto’s maken met de camera of selecteren uit de filmrol E-‐mail en SMS versturen Een nummer bellen Updates posten op Facebook en Twitter

11.2 Dialoogvensters 11.2.1 Waarschuwingsvenster Een waarschuwingsvenster is een eenvoudig modaal scherm dat een waarschuwing als boodschap bevat. Dit venster verschijnt in het midden van het scherm. Een dialoogscherm kan één of meer knoppen bevatten. Je maakt het venster aan met de methode Titanium.UI.createAlertDialog(eigenschappen) of met de alias alert(boodschap). Deze methode levert een object op van het type Titanium.UI.AlertDialog. Zoals al eerder vermeld, is deze methode asynchroon. Dit houdt in dat de uitvoering van de code doorgaat terwijl het waarschuwingsvenster wordt getoond. Methoden Het waarschuwingsvenster heeft de methoden hide en show. Eigenschappen eigenschap

datatype beschrijving

buttonNames cancel message title

array integer string string

array van knopnamen als strings (maximaal 3) index die aangeeft welke knop de annuleerknop is boodschap van het dialoogvenster titel van het dialoogvenster


2

Events Het enige event is het click-‐event. Het event-‐object is uitgebreid met de eigenschappen cancel en index. De eerste geeft aan of de annuleerknop is ingedrukt en index geeft het indexnummer van de ingedrukte knop. 11.2.2 Actievenster (actionsheet) Het actievenster lijkt op het waarschuwingsvenster. Toch zijn het twee verschillende gebruikersinterface-‐componenten in Titanium. Het actievenster is een modaal window met één of meerdere knoppen. Het venster schuift van onderen in beeld. Het actievenster maak je aan met de methode Titanium.UI.createOptionDialog(eigenschappen). Deze methode geeft een object terug van het type Titanium.UI.OptionDialog. Een actievenster is geen view en heeft dus niet de View-‐ eigenschappen, methoden en events. Ook het actievenster is asynchroon. Methoden Je kunt het scherm verbergen met de hide-‐methode en tonen met show. Eigenschappen eigenschap

datatype

beschrijving

buttonNames array

cancel destructive message options title

array van knopnamen als strings; maximaal 3 knoppen; de knoppen worden horizontaal gepositioneerd; er moet gekozen tussen buttonNames en options indexnummer geeft aan welke knop de annuleerknop is indexnummer geeft aan welke knop de destructieknop is string boodschap, verschijnt onder de titel array array van knopnamen als strings; als gebruik wordt gemaakt van options mag je message niet opgeven string titel van het actiescherm

Events Het actievenster heeft maar één event: het click-‐event. Het event-‐object is uitgebreid met de eigenschappen cancel, destructive en index. De eigenschap cancel geeft aan of de annuleerknop is ingedrukt, destructive of de destructieknop is ingedrukt en index geeft het indexnummer van de ingedrukte knop. Voor Android is er één extra eigenschap: button. De boolean button geeft aan of index verwijst naar een knop (true) of naar een item (false).


3

Voorbeelden: Utrecht Inside Aan het detailscherm gaan we een tipknop toevoegen. Met deze knop kun je een locatie tippen via e-‐mail, Facebook of Twitter. Naast een tekst waarmee je de locatie tipt, kun je ook een foto meesturen. Eerst gaan we de tipknop toevoegen en als hierop geklikt wordt, wordt een tipvenster geopend. Voeg de onderstaande code toe in detailscherm.js ná de regel met items.push(flexRuimte);. Deze regel komt ná de event-‐listener voor de telKnop. var tipKnop = Ti.UI.createButton({ title: 'TIP' }); items.push(tipKnop); items.push(flexRuimte); tipKnop.addEventListener('click', function() { tipping(locatie); });

Om dit ook te laten werken op Android, moet je rij.add(tipKnop); toevoegen na de regel met de code rij.add(telKnop);. Waarschijnlijk moet je ook de breedte (width) van tipKnop aanpassen. De tipping-‐methode, die wordt aangeroepen als op de tipknop wordt gedrukt, schrijven we in een ander bestand met als naam tipping.js. Om deze functie beschikbaar te stellen, sluiten we dit bestand in aan het begin van detailscherm.js. Meteen onder het commentaar op regel 1, plaatsen we de coderegel: Ti.include('tipping.js'); Maak vervolgens tipping.js aan in de js-‐map. var android = (Ti.Platform.osname == 'android'); var tipping = function(location) { var foto = null; var tipWin = Ti.UI.createWindow({ modal:true, fullScreen: true, barColor: ui.BALKKLEUR, translucent: true, title: 'TIPPEN', backgroundColor: ui.RIJKLEUR }); // invoervak voor boodschap var sendTekst = Ti.UI.createTextArea({ autocapitalization: Ti.UI.TEXT_AUTOCAPITALIZATION_SENTENCES, autocorrect: false, borderWidth: 1, borderColor: 'black', borderRadius: 10, color: 'black', backgroundColor: 'white', font: {fontSize:20}, keyboardType: Ti.UI.KEYBOARD_ASCII, textAlign: 'left',


4

top: 55, height: 85, width: '93%' }); sendTekst.value = 'Ik ben nu in Utrecht. ' + location.titel + ' is echt een aanrader!' tipWin.add(sendTekst); // beperk invoer tot 70 tekens sendTekst.addEventListener('change', function(e) { if (e.value.length > 80) { sendTekst.value = e.value.substr(0,80); } }); // fotovak var fotoBeeld = Ti.UI.createImageView({ top: 145, width: '93%', height: 165, backgroundColor: 'black', borderColor: ui.BALKKLEUR, borderWidth: 1, borderRadius: 10 }); tipWin.add(fotoBeeld); var sluitKnop = Ti.UI.createButton({ title: 'Sluit' }); tipWin.rightNavButton = sluitKnop; sluitKnop.addEventListener('click', function() { tipWin.close(); }); var verstuurKnop = Ti.UI.createButton({ title: 'Verstuur', bottom: 20, left: 20, width: 80, height: 24 }); tipWin.add(verstuurKnop); // als op de verstuurknop wordt gedrukt openen we een // actievenster om te kiezen welk medium de gebruiker // wil om zijn tekst/foto te versturen verstuurKnop.addEventListener('click', function() { var kiesMedium = Ti.UI.createOptionDialog({ options: ['E-mail', 'Facebook', 'Twitter', 'Annuleer'], cancel: 3, title: 'Kies medium' }); kiesMedium.show(); }); var fotoKnop = Ti.UI.createButton({ title: 'Foto', right: 20, bottom: 20,


5

width: 80, height: 24 }); tipWin.add(fotoKnop); }

tipWin.open();

11.3 Camera en de opslag van foto’s 11.3.1 Camera Naast GPS is de camera één van de belangrijkste functies van de telefoon. Je kunt er foto’s mee maken of video opnemen en met zogenaamde overlays (zie de overlay-‐eigenschap) kun je ook Augmented Reality (AR) apps maken. Hier gaan we alleen in op het nemen van foto’s. De interface hiervoor is makkelijk te gebruiken en vereist dus weinig specifieke kennis. Eerst geven we de methoden en eigenschappen voor het gebruik van de camera. Al deze methoden en eigenschappen maken deel uit van de module Titanium.Media. Methoden methode

beschrijving

hideCamera()

verbergt de camera. Moet alleen aangeroepen worden ná de methode showCamera en alleen als de autohide-‐eigenschap op false is gezet zorgt ervoor dat de camera actief wordt de success callback-‐functie wordt aangeroepen als de camera klaar is en er een foto is genomen; de error-‐functie als het nemen van de foto mislukt is; de cancel-‐functie als de gebruiker de annuleerknop heeft ingedrukt en dus besloten heeft om geen foto de nemen. Naast deze callback-‐functies kun je een aantal eigenschappen opgeven: met allowEditing geef je aan of de foto na het nemen bewerkt kan worden met de standaard controls. Of de controls getoond worden bepaalt de eigenschap showControls. De eigenschap animated geeft aan of de camera met of zonder animatie wordt getoond en verborgen. De autohide-‐eigenschap geeft aan of de camera verborgen wordt als de foto is genomen (standaard: true). Met mediaTypes geef je op welke mediatypen geaccepteerd worden en ten slotte gebruik je saveToPhotoGallery om aan te geven of de foto bewaard wordt in de filmrol gebruikt de camera van het toestel om een foto te maken. Deze methode moet je aanroepen nadat showCamera is aangeroepen en alleen als

showCamera(success: callback-‐functie: het event-‐object heeft de eigenschappen cropRect: object met de eigenschappen x, y, height en width; daarnaast heeft het even-‐object de eigenschappen media: Blob en mediaType: constante die aangeeft van welk type het media-‐ object is, cancel: callback-‐functie, error: callback-‐functie: event-‐object heeft eigenschap code (is een constante zoals NO_CAMERA, zie hieronder), allowEditing: boolean, animated: boolean, autohide: boolean, mediaTypes: array van constanten, saveToPhotoGallery: boolean, showControls: boolean )

takePicture()


6

de eigenschap autohide op false is gezet. Deze methode zorgt ervoor dat het toestel een foto neemt en de success callback-‐functie wordt aangeroepen selecteert de camera aan de voor-‐ of achterzijde

switchCamera(constante)

Constanten constante

beschrijving

CAMERA_FLASH_OFF CAMERA_FLASH_ON CAMERA_FLASH_AUTO CAMERA_FRONT CAMERA_REAR MEDIA_TYPE_PHOTO MEDIA_TYPE_VIDEO NO_CAMERA NO_VIDEO UNKNOWN_ERROR

flash uit flash aan kies de standaard flashoptie camera aan voorzijde toestel camera aan achterzijde toestel mediatype is foto mediatype is video geen camera beschikbaar geen video beschikbaar onbekende media fout

Eigenschappen eigenschap

datatype

beschrijving

availableCameras

array

availableCameraMediaTypes

array

availablePhotoMediaTypes

array

cameraFlashMode

constante

isCameraSupported

boolean

geeft aan camera’s beschikbaar zijn, zie constanten hierboven geeft aan welke mediatypen ondersteund worden door het toestel, zie constanten hierboven geeft aan welke mediatypen ondersteund worden voor foto’s bepaalt of flash al dan niet gebruikt wordt, zie constanten hierboven. Is zowel lees-‐ als schrijfbaar geeft aan of het toestel een camera heeft

Voorbeelden: Utrecht Inside We gaan aan de fotoknop een event-‐handler koppelen om een actievenster te openen met de mogelijkheid om een foto te nemen, er één te selecteren uit de filmrol of de foto te wissen. Voeg de volgende code toe na de aanmaak van fotoKnop: kiesFoto.addEventListener('click', function(e) { switch(e.index) { case 0: Titanium.Media.showCamera({ success:function(event) { foto = event.media; fotoBeeld.image = event.media;


7

}, cancel:function() { }, error:function(error){ // maak een waarschuwingsvenster var a = Titanium.UI.createAlertDialog({ title: 'Camera' }); // set message for dialog if (error.code == Ti.Media.NO_CAMERA){ a.setMessage('Geen camera beschikbaar'); } else { a.setMessage('Error: ' + error.code); } // show alert a.show(); }, allowEditing: true, mediaTypes: Ti.Media.MEDIA_TYPE_PHOTO, showControls: true }); break; case 1: break; case 2: foto = null; fotoBeeld.image = null; break; });

}

De code moet duidelijk zijn uit het bovenstaande. 11.3.2 Filmrol Er zijn twee methoden beschikbaar in de module Titanium.Media om met de filmrol te werken. Deze methoden vind je in de onderstaande tabel. methode

beschrijving

openPhotoGallery(object) opent de filmrol saveToPhotoGallery(media, callback-‐functie) bewaart media in de filmrol

Eigenschappen van het openPhotoGallery-‐object eigenschap

datatype

beschrijving

success

callback-‐ functie

wordt aangeroepen als een foto is gekozen. Het event-‐object heeft de eigenschappen cropRect: object met de eigenschappen x, y, height en width. Event-‐object heeft ook de eigenschappen media: Blob van de foto of video, en mediaType (constante):


8

mediatype van de ontvangen media cancel


wordt aangeroepen als de gebruiker heeft geannuleerd

error


wordt aangeroepen als er een fout is opgetreden. Het event-‐ object heeft de eigenschap code (constante), die aangeeft welke fout is opgetreden

allowEditing mediaTypes

boolean array

geeft aan of de foto bewerkt kan worden geeft aan welke mediatypen zijn toegestaan

saveToPhotoGallery boolean showControls boolean

geeft aan of foto bewaard wordt in de filmrol geeft aan of de controls getoond worden

iPad-‐eigenschappen eigenschap

datatype

beschrijving

arrowDirection constante

bepaalt het type pijl en de positie van de filmrol (zie hoofdstuk 9)

popoverView

te gebruiken om de popover van de filmrol een bepaalde plaats te geven

view-‐ object

Eigenschappen voor de filmrol eigenschap

datatype

beschrijving

availablePhotoGalleryMediaTypes

array

geeft aan welke mediatypen bewaard kunnen worden in de filmrol

Voorbeelden: Utrecht Inside De volgende code voeg je toe ná de regel met case 1: uit de code van de vorige paragraaf: Titanium.Media.openPhotoGallery({ success:function(event) { foto = event.media; fotoBeeld.image = event.media; }, cancel:function() { }, error:function(error) { },

});

allowEditing:true, mediaTypes: [Ti.Media.MEDIA_TYPE_PHOTO]


9

11.4 E-‐mail, SMS en telefoneren 11.4.1 E-‐mail Vanwege een Apple-‐restrictie kun je geen e-‐mails op de achtergrond versturen. Het is natuurlijk mogelijk om een server dit te laten doen. Wil je het oplossen binnen de app, dan moet je gebruikmaken van het standaard e-‐mail dialoogscherm. Dit doe je door de methode Titanium.UI.createEmailDialog(eigenschappen) aan te roepen. Deze methode geeft een object van het type Titanium.UI.EmailDialog terug. Het dialoogvenster is een modaal window. Methoden methode

beschrijving

addAttachment(attachment: object) boolean isSupported() open(object)

attachment als een Blob of File-‐object geeft aan of het verzenden van e-‐mail wordt ondersteund object met animatie-‐eigenschappen. Geef de animated-‐eigenschap op (als boolean) om aan te geven of het dialoog geanimeerd wordt bij het openen

Constanten constante

beschrijving

CANCELLED FAILED SAVED SENT

geannuleerd mislukt bewaard verzonden



barColor string bccRecipients array ccRecipients

array

html

boolean

messageBody string subject string toRecipients array

balkkleur van het e-‐mail dialoogscherm array van e-‐mail BCC: ontvangers, de array bestaat uit e-‐mailadressen (string) array van e-‐mail CC: ontvangers, de array bestaat uit e-‐mailadressen (string) geeft aan of het e-‐mail messageBody verstuurd moet worden als HTML (standaard: false) e-‐mail boodschap onderwerp van de e-‐mail array van e-‐mail ontvangers, de array bestaat uit e-‐mailadressen (string)


10

Events eventnaam beschrijving complete

wordt aangeroepen als de e-‐maildialoog klaar is met het verzenden van de e-‐mail event-‐eigenschappen error foutmelding of null als succesvol verzonden success: boolean geeft aan of de e-‐mail succesvol is verzonden result resultaatstatus: SENT, SAVED, CANCELLED of FAILED (SAVED en CANCELLED worden niet ondersteund door Android, in die gevallen is SENT het resultaat)

In Android kan slechts één bestand als attachment worden toegevoegd. Voorbeelden: Utrecht Inside Voeg de volgende code toe onder de regel met de code kiesMedium.show();: kiesMedium.addEventListener('click', function(e) { if (sendTekst.value == undefined || sendTekst.value.length == 0) { alert('Geen tekst'); } else { switch(e.index) { case 0: var email = Ti.UI.createEmailDialog({ barColor: ui.BALKKLEUR, messageBody: sendTekst.value, subject: 'Tip' }); var bestand = null; if (foto) { bestand = Ti.Filesystem.getFile(Ti.Filesystem. applicationDataDirectory, 'foto.jpg'); bestand.write(foto); email.addAttachment(bestand); } email.addEventListener('complete', function(e) { if (bestand) { bestand.deleteFile(); } }); email.open(); break; case 1: break; case 2: break; } }


11

11.4.2 SMS en telefoneren Telefoneren of het versturen van een sms is uitermate eenvoudig. Je hoeft niets anders te doen dan de methode Titanium.Platform.openURL aan te roepen met een argument dat begint met de de tekens ‘sms:’ om een SMS te versturen of ‘tel:’ om te bellen. Titanium.Platform.openURL('sms:' + telefoonnummer); Titanium.Platform.openURL('tel:' + telefoonnummer);

Je kunt hiermee niet het SMS-‐bericht in de app zelf sturen. Daarvoor is een module aanwezig, die echter niet gratis is. Het maakt deel uit van de Titanium+Plus modules, waarvoor je moet betalen. Je kunt de module wél uitproberen voordat je hem aanschaft. Ga daarvoor naar het Developer center en klik in de bovenbalk op Ti+Plus. Vervolgens vind je onder de tab Communication de SMS-‐module. Deze module is alleen geschikt voor iOS. 11.5 Facebook 11.5.1 Activiteitsindicator Een activiteitsindicator toont de voortgang van een taak of proces waarvan de duur onbekend is. Zo wordt aan de gebruiker bekend gemaakt dat het toestel bezig is met het uitvoeren van een operatie: de computer is niet op tilt geslagen! Verberg de activiteitsindicator als het proces voltooid is. Je maakt de activiteitsindicator aan met de methode Titanium.UI.createActivityIndicator(). Deze methode geeft een object terug van het type Titanium.UI.ActivityIndicator. Je kunt de activiteitsindicator toevoegen aan een werk-‐ of navigatiebalk van een window of gewoon laten zien op een bepaalde positie van het scherm. De activiteitsindicator kan ook op de plaats van een navigatieknop of titlecontrol verschijnen. Methoden methode beschrijving hide() show()

aanroepen om de activiteitsindicator te verbergen en te stoppen met spinnen aanroepen om de activiteitsindicator te tonen en te beginnen met spinnen

Constanten iPhone stijl constanten: Titanium.UI.iPhone.ActivityIndicatorStyle constante beschrijving BIG DARK PLAIN

grote witte stijl van de indicator standaard grijze stijl van de indicator standaard witte stijl van de indicator


12



bottom

integer

color font height message (iPhone) style top width

string object integer string integer

plaats vanaf de onderzijde van de view waaraan de activiteitsindicator wordt toegevoegd kleur van boodschap font voor boodschap hoogte van de activiteitsindicator boodschap stijl-‐constante van de activiteitsindicator (zie constanten hierboven)

integer integer

plaats vanaf de bovenzijde van de view breedte activiteitsindicator

Voorbeelden var actInd = Titanium.UI.createActivityIndicator({ bottom: 10, height: 50, width: 10 }); actInd.show(); // toevoegen aan de werkbalk van een window var werkbalkActInd = Titanium.UI.createActivityIndicator(); win.setToolbar([werkbalkActInd],{animated: true}); werkbalkActInd.show(); // verbergen toolActInd.hide(); win.setToolbar(null,{animated:true}); // toevoegen aan navigatiebalk var navbalkActInd = Titanium.UI.createActivityIndicator(); win.setRightNavButton(navbalkActInd); navbalkActInd.show(); // verbergen navbalkActInd.hide(); win.setRightNavButton(null); // title control win.setTitleControl(actInd); actInd.show(); // verbergen actInd.hide(); win.setTitleControl(null);

11.5.2 Facebook Titanium heeft een API om met Facebook te communiceren. Om toegang te krijgen tot de gegevens gebruikt Facebook het zogenaamde OAuth authentication scheme. Dit is op dit


13

moment de meest veilige vorm van authenticatie voor webservices. OAuth 2.0 is betrekkelijk ingewikkeld, maar je hoeft niet te weten hoe dit schema werkt: Titanium regelt dit voor je. Voor elke app moet je een App Id van Facebook aanvragen. Dit doe je als een Facebook developer. Op het formulier moet de iOS Bundle ID moet overeenkomen met het Application ID in het Edit-‐tabblad. Voordat je de gebruiker autoriseert met de methode authorize moet je het Facebook applicatie-‐id en de permissies opgeven. Dit doe je met de eigenschappen appid en permissions. De toegestane permissions vind je op dit adres: developers.facebook.com/docs/authentication/permissions. In iOS wordt het autorisatie-‐dialoogscherm geopend buiten de app: hetzij in Safari of in de Facebook-‐app als die is geïnstalleerd. De app wordt opnieuw geopend op de plaats waar je was gebleven als de inlogprocedure is afgerond of geannuleerd. Hiervoor is extra informatie nodig die je opgeeft in tiapp.xml (of Info.plist). Als je tiapp.xml gebruikt moet je de volgende eigenschap toevoegen: <property name="ti.facebook.appid">[Facebook App Id]

In Android wordt standaard een webview in de app gebruikt, tenzij de eigenschap forceDialogAuth op true is gezet. Dan wordt de Facebook-‐app, mits geïnstalleerd op het toestel, gebruikt. Facebook Graph API Op de webpagina developers.facebook.com/docs/reference/api/ kun je vinden welke URL’s en methoden de Facebook Graph API heeft. In ons voorbeeld maken we alleen gebruik van een status-‐update en het plaatsen van een foto. Aan de hand van de beschrijvingen van de Graph API is eenvoudig te zien welke andere bewerkingen mogelijk zijn. Methoden Titanium’s Facebook API heeft de onderstaande methoden voor de Graph API: methodenaam

beschrijving

authorize()

inloggen van de gebruiker als hij nog niet is ingelogd. Je moet de permissions en jouw appid opgeven voordat je deze methode aanroept maakt een loginknop aan; ontvangt View-‐eigenschappen als object . De loginknop regelt de autorisatieprocedure. Je hoeft hier geen gebruik van te maken, maar het is een handige oplossing

Ti.Facebook.LoginButton createLoginButton(object)

dialog(handeling: string, object, callback-‐functie)

opent een Facebook dialoogvenster in een webview; de handeling ‘feed’ is vrijwel de enige bruikbare. Via het object kun je velden van het dialoogvenster van tevoren vullen. De


14

callback-‐functie wordt aangeroepen als het dialoogvenster voltooid of geannuleerd is. Het event-‐object bevat de eigenschappen success (boolean), error (string), cancelled (boolean) en result. De eigenschap result bevat de gegevens die teruggegeven worden door Facebook logout()

maakt accessToken leeg en logt de gebruiker uit

requestWithGraphPath(path: string, object, httpMethod: string, callback-‐functie)

een Facebook Graph API-‐verzoek; httpMethod: ‘GET’, ‘POST’ of ‘DELETE’; callback-‐functie: het event-‐object heeft de eigenschappen success (boolean), error, path, result (gegevens in JSON-‐formaat, teruggegeven door Facebook)



accessToken

string

OAuth-‐token dat verkregen wordt na een succesvolle autorisatieprocedure

appid

string

jouw Facebook App Id

expirationDate

date

tijd wanneer het accessToken afloopt

(Android) forceDialogAuth

boolean

geeft aan of een webview wordt gebruikt voor de inlogprocedure (standaard: true); als je ervoor wilt zorgen dat gebruik wordt gemaakt van de Facebook-‐app (als die is geïnstalleerd) moet je het op true zetten

loggedIn

boolean

geeft aan of de gebruiker is ingelogd

permissions

object

uid

string

Verlangde permissies van Facebook. Deze permissies moet je opgeven voordat je authorize aanroept uniek gebruikers-‐id dat verkregen wordt van Facebook

Voorbeelden: Utrecht Inside Voeg de volgende code toe ná de regel met de code case 1: in de event-‐handler voor kiesMedium. Let erop dat je een Facebook Application Id moet aanvragen voor de applicatie en dat je tiapp.xml moet aanpassen. Ti.Facebook.appid = '[id dat je gekregen hebt van Facebook]'; Ti.Facebook.permissions = ['publish_stream']; var send = function() { if (foto != null) { Ti.Facebook.requestWithGraphPath('me/photos', { message:sendTekst.value, picture: foto }, 'POST', function(e){ if (e.success) { alert('Statuswijziging gelukt'); } else { alert('Mislukt') } }); } else { Ti.Facebook.requestWithGraphPath('me/feed', { message:sendTekst.value }, 'POST', function(e){


15

if (e.success) { alert('Statuswijziging gelukt'); } else { alert('Mislukt') } }); } } if (Ti.Facebook.loggedIn) { send(); } else { Ti.Facebook.addEventListener('login', function(e) { if (e.success) { send(); } }); Ti.Facebook.authorize(); }

11.6 Twitter Eerst moet je jouw app registreren bij Twitter. Doorloop de volgende stappen: • • • •

Ga hiervoor naar dev.twitter.com. Op de webpagina is duidelijk wat je moet doen. Let erop dat het applicatietype ‘Browser’ moet zijn. Je moet een callback-‐URL opgeven die geen redirects heeft op de pagina: twitter.com werkt goed. Als je tweets wilt posten moet je het Default access type op Read & Write zetten.

Twitter vereist ook OAuth-‐autorisatie. Zoals gezegd is de OAuth-‐procedure lastig om zelf te realiseren. Gelukkig is er ook voor Twitter een alternatief. Op dit moment werkt BirdHouse het makkelijkst. Je kunt het downloaden op het volgende GitHub-‐adres: github.com/jpurcell/birdhouse. Naast birdhouse.js heb je twee andere JavaScript-‐bestanden nodig die je kunt downloaden van het adres oauth.googlecode.com/svn/code/javascript. Het gaat om de bestanden oauth.js en sha1.js. Deze bestanden sla je, evenals birdhouse.js, op in de map lib die je zelf moet aanmaken in Resources-‐map van jouw project. In app.js, of een ander JavaScript-‐bestand als de executiecontext verschilt, moet je birdhouse.js insluiten met de methode Titanium.include('lib/birdhouse.js');. Je maakt een BirdHouse-‐object aan op de volgende wijze: var BH = new BirdHouse({ consumer_key: '', consumer_secret: '', callback_url: '' });

De callback_url hoef je alleen op te geven als je naar een andere URL wilt verwijzen dan de URL die je hebt opgegeven bij de registratie van jouw app bij Twitter.


16

De consumer_key en het consumer_secret heb je gekregen bij registratie van jouw app bij Twitter. BirdHouse heeft de volgende methoden: methode

beschrijving

respons api(url, methode: ‘POST’ of ‘GET’, argumenten, callback-‐functie: event-‐object: boolean (succes of geen success))

roept de API aan met de opgegeven URL en de opgegeven methode met argumenten; geeft de respons terug

authorize()

begint de autorisatieprocedure. Als er al is ingelogd worden de sleutels opgeslagen in een bestand. Zolang deze sleutels werken wordt het inlogvenster niet opnieuw geopend

boolean authorized

geeft aan of de gebruiker is geautoriseerd

deauthorize

logt uit en wist het autorisatiebestand

object get_tweets()

geeft de laatste 20 tweets als een object

object tweet(tekst: string)

opent een dialoogvenster voor het versturen van een tweet met de opgegeven tekst; geeft de tweet als een object terug

Je hoeft authorize niet zelf aan te roepen omdat andere de methoden api, get_tweets en tweet deze methode aanroepen als de gebruiker niet is ingelogd. Documentatie van de Twitter API vind je op: dev.twitter.com/doc. Voorbeelden: Utrecht Inside Zorg ervoor dat de verschillende JavaScript-‐bestanden op de goede plaats staan en voeg bovenaan in tipping.js de volgende regels toe: if (android) { Ti.include('/lib/birdhouse.js'); } else { Ti.include('../lib/birdhouse.js'); }

Eventueel moet je de paden van de includes wijzigen in birdhouse.js. Voeg vervolgens de volgende code toe in tipping.js na de regel met case 2: met daaronder de regel met break;. var BH = new BirdHouse({ consumer_key: '[van Twitter verkregen key]', consumer_secret: '[van Twitter verkregen secret]', callback_url: 'http://www.twitter.com' }); BH.api('http://api.twitter.com/1/statuses/update.json', 'POST', 'status=' + escape(sendTekst.value) + '&' + 'lat=' + location.latitude + '&' + 'long=' + location.longitude + '&display_coordinates=true',


});

17

function(e) { if (e) { alert('Tweet gepubliceerd'); } else { alert('Tweet niet gepubliceerd'); }

Hoofdstuk 11 Social media, telefoneren, SMS, camera en e- mail

Recommend Documents