Interaction design aanpassen

Aan het eind van het vorige kwartaal kreeg ik de feedback dat ik beter 1 feed kon maken waarin alle andere feeds samen komen. Hier ben ik tijdens de eerste DareThis aan begonnen. Ik heb een kort simpel onderzoekje gedaan naar de verschillende sociale netwerken en heb gekeken hoe hun pagina’s zijn opgedeeld. Als leidend voorbeeld ben ik bij facebook blijven hangen, omdat zij heel mooi een blok voor navigatie hebben en een blok voor content hebben. Ik ben toen gaan wireframen en ben tot de volgende oplossing gekomen:

Visuals aanpassen

Toen ik het wireframe had ben ik thuis mijn ontwerp gaan aanpassen. Tijdens het ontwerpen zijn er nog een aantal kleine dingen aan het interactie ontwerp gewijzigd, maar deze heb ik alleen in de designs door gevoerd, om tijd te besparen. Toen ik ging kijken naar de stijl had ik het eerst in dezelfde stijl als de vorige versie gemaakt. Maar toen ik er naar keek vond ik dit niet clean genoeg, het was te druk en er was teveel kleur. Ik heb toen besloten om zoveel mogelijk wit te gebruiken en alleen waar nodig een kleurtje toe te voegen. Na wat proberen en veel aanpassen ben ik tot het volgende ontwerp gekomen:

Development

Toen ik het nieuwe ontwerp van de stream had, ben ik eerst deze stream gaan omzetten in html/css. Ik heb wat basis functies met jquery eraan toegevoegd. Bijvoorbeeld het uitklappen van het textvak waar je een bericht kan typen en het rechter menu waarin de groene balk verspringt. Toen dit simpele werk gedaan was kwam het moeilijke voor mij. Ik moest met behulp van php en een library een twitter feed inladen. Ik had niet echt een idee waar te beginnen. Dus ik begon met het goed doornemen van de twitter API. Hierin werden een aantal libraries genoemd en ik besloot er een te kiezen. Ik koos voor de Library van¬†Abraham Williams, omdat deze op een aantal blogs goede comments kreeg. Ik heb vervolgens een mapje lib aangemaakt in mijn editor en daar deze files ingezet. Het was toen taak om mijn consumer key en consumer secret in het goede bestand te zetten en het voorbeeld zou moeten werken. En het voorbeeld dat erbij zat werkte ook. Ik dacht kijk aan dat is makkelijk ik neem over wat ik nodig heb en laat de rest voor wat het is. Toen ik dit deed werd ik steeds terug gestuurd naar twitter om toestemming te geven voor het gebruik van de data. Na lang zoeken, kwam ik erachter dat dit te maken had met authenticate en authorize. De ene geeft je toegang tot de data en de andere zorgt ervoor dat je toestemming hebt. Toen ik hierachter kwam was dat probleem al verholpen. Ik logte nu in met mijn allscocial account, moest toestemming geven aan twitter en kwam op een pagina uit het voorbeeld. Ik wilde direct terug op de stream pagina zonder opnieuw inloggen. Ik begon toen de callback die van twitter kwam te checken, deze stond goed, namelijk naar socialstream.php, waar mijn stream wordt opgebouwd. Na verschillende dingen geprobeerd te hebben en flink wat gegoogled te hebben kwam ik erachter waar de fout stond. Ik heb toen de url aangepast, en moest na verificatie bij twitter opnieuw inloggen op allSocial. Voor nu geen probleem. Ik liep toen tegen het volgende probleem op. Ik moest een stream te zien krijgen. Ik heb eerst zelf geprobeerd deze tevoorschijn te toveren, maar dat lukte niet. Toen heb ik de php code vanuit het voorbeeld in de library geplakt in het content deel van de stream en zowaar verscheen er iets op beeld. Dit was de informatie van de gebruiker van het twitter account. Toen ik goed naar die regels code ging kijken, zag ik dat het de url was die ik moest aanpassen. Hierna kreeg ik een Json response met tweets. Ik had geen idee hoe ik json moest gaan parsen, dus hier kwam het volgende probleem. Ik heb veel gegoogled en van alles geprobeerd maar ik kreeg het niet gedaan om van de Json string/array tekst op het beeld te krijgen. Toen ben ik weer gaan kijken in de library of ik daar json niet kon veranderen in xml, ik wist immers wel hoe ik daar doorheen kon loopen. Na een tijdje zoeken vond ik de variabele die ervoor zorgde dat je het in json of xml binnen kreeg. Deze veranderd in XML en toen kreeg ik een xml feed als response. Hier kon ik wel wat mee. Dit was een xml array dus ik ¬†kon hier direct doorheen loopen. ik schreef een for loop die voor de lengte van de array een functie uitvoerde. Tot hier ging deze loop prima. De loop werkte dat checkte ik met echo’s die het nummer in de array liet zien. Het volgende probleem was, hoe benader ik de text van de tweets enz. Ik had eerst geen idee. Maar na wat google werk over het uitlezen en loopen door xml documenten kwam ik erachter dat ik -> kon gebruiken om een tag (letterlijk) aan te wijzen. Hierna was het kijken naar het xml voorbeeld op de developers site van twitter om erachter te komen welke tags ik moest aanspreken. Ik zorgde ervoor dat de html voor een tweet voor iedere tweet werd ingevuld en toen was daar mijn twitter feed. Volgende stap die ik dit kwartaal nog wilde maken was het plaatsen van een tweet. Dit betekende het formulier opsturen naar twitter zodat deze geplaatst werd. Hierbij was het zaak om de waarde(tekst) uit het tekst vlak te halen en deze vervolgens naar twitter te sturen. Toen ik hieraan bezig was heb ik per ongeluk nog een wijziging gemaakt in de callback, waardoor ineens niets meer op het scherm verscheen. Ik kwam er pas na een paar uur zoeken achter wat ik nu had gewijzigd. Het kan zijn dat ik deze zelf had veranderd, of dat er in mijn editor iets mis was gegaan tijdens het uploaden en synchroniseren. Helemaal zeker zal ik het nooit weten, wel weet ik dat ik daar kostbare tijd ben verloren. Toen ik de feed weer werkend had kon ik door met mijn script om een tweet te plaatsen. Na het uitzoeken van de manier waarop je een tweet naar twitter stuurt, had ik deze door en werd mijn tweet op twitter gegooid. Op 18 juni 17:58 werd mijn eerste tweet vanaf AllSocial verstuurd. Op dat moment was mijn doel voor designThis bereikt en ben ik mij gaan focussen op andere vakken. De komende maand ga ik eerst wat andere projecten oppakken en daarna weer verder met dit project, om uiteindelijk het totaal product een keer te kunnen lanceren. Hopelijk na de vakantie en anders richting de winter, afhankelijk van de tijd die ik heb om het door te ontwikkelen.

Source files*: http://www.thijsadrmat.com/allsocial.rar

* het plaatsen van de source files op een server heeft geen zin zonder de config bestanden in de lib, en include map in te vullen. Hiervoor zal je onderandere een app moeten aanmelden bij twitter.