Tweakers live 3.1 - Twitter Tile

Door deathgrunt op vrijdag 30 januari 2015 17:33 - Reacties (0)
Categorie: Apps voor Windows Phone en Android, Views: 597

...

- tweakers.net live ... nu met extra-gratis twitter stream -

...

Another day, anther tile... en voor vandaag is dat... (tromgeroffel)... de Twitter Tile!

Want als we dan toch langzaam maar zeker de volledige pressroom van Tweakers H.Q. aan het overnemen zijn, dan kan daar een live twitter-stream ook nog wel bij.


Kortom, wil je op de hoogte blijven van de verse tweets van Android Wokke, Female Taken en Mooi-Boi Wout? Ga dan naar http://tweakers.deathgrunt.nl , kies voor "twitter", "push the button" en pin die page!

...

- bovenin het nieuws

- bovenin het nieuws, onderin de tweets -


- tweakers tweets op je tablet / pc / laptop -

- tweakers tweets op je tablet / pc / laptop -


...

HOE HET WERKT

"Vroegahhhh" kon je per Twitter-user gewoon een RSS-stream inlezen, later werd dat een JSON-stream en nu mag je niets meer...

Om toch een live Twitter-feed te krijgen, heb ik een simpele DOM-parser geschreven die om het half uur de timeline van Tweakers' Twitter inleest.

Die ruwe data wordt via een eenvoudig scriptje op de server omgezet naar de 15 meest recente tweets en die tweets worden weer netjes uitgesmeerd over een vijftal XML-bestanden.

Deze XML-bestanden worden tenslotte uitgelezen door de live-tile API van je telefoon / tablet / pc en random geshuffeld - zodat je niet te vaak dezelfde tweets ziet (afhankelijk van hoe vaak iemand een tweet de wereld inslingert, natuurlijk).

Het maken van de Tweaker-Twitter-Tile (r) was wederom minder dan een half uur werk... tijd dat Tweakers dit zelf implementeert?

- van Twitter naar PHP naar XML naar je live-tile -

- van Twitter naar PHP naar XML naar je live-tile -


...

Tweakers live-tile 3.0

Door deathgrunt op woensdag 28 januari 2015 10:16 - Reacties (25)
Categorie: -, Views: 2.225

- tweakers.net live ... nu met extra-gratis keuze-vrijheid -

...

- tweakers.net live op je phone (in het echt is die mooier) -

- tweakers.net live op je phone (in het echt is die mooier) -


- tweakers.net live op je computer (zes live-tiles in vier formaten) -

- tweakers.net live op je computer (zes live-tiles in vier formaten) -


- tweakers.net live (is niet moeilijk ... ook jij kunt het) -

- tweakers.net live (is niet moeilijk, ook jij kunt het) -

...

Tweakers live-tile 2.0

Door deathgrunt op donderdag 22 januari 2015 22:28 - Reacties (27)
Categorie: Apps voor Windows Phone en Android, Views: 2.699

...

UPDATE - ER IS INMIDDELS EEN 3.0 VERSIE

...

pin de site aan je startscherm
...


- tweakers live op je phone, tablet, laptop, dildo ... framerate is butt -
...

Tweakers.net - live!

...

Tweakers.net live-tile Windows (Phone)

Door deathgrunt op vrijdag 16 januari 2015 13:37 - Reacties (45)
Categorie: Apps voor Windows Phone en Android, Views: 2.598

...

UPDATE - ER IS INMIDDELS EEN 3.0 VERSIE

...


C#: tweakers live-tile
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
[Veel gevraagd, maar nooit gemaakt...
...dus dan heeft jullie eigenste deathgrunt de broncode maar gekraakt.]

Okay, dat slaat nergens op - maar het is bijna Sinterklaas, dus een
rijmpje op zijn tijd is altijd goed.

// Anyhow - iedereen wil een Windows (Phone) live-tile van Tweakers.net
// hebben. Is ook maar 5 seconden werk, maar Tweakers.net doet het niet...

...dus wat dan?

Juist! Dan maak je het zelf... en omdat ik toch al vervend gebruiker ben
van Windows Phone en dus maar wat graag in de app-gap spring, bij deze
een echte live-tile - voor je telefoon / tablet / laptop / desktop...

# Ook zonder live-tile (je kan hem gewoon uitzetten) is het handig, omdat
# je dan een Metro / Modern GUI shortcut krijgt (werkt het best als je geen
# titel er aan meegeeft - die zit toch maar in de weg).

...Navigeer dus snel naar http://tweakers.deathgrunt.nl en pin die site!...

...

- tweakers op je phone - framerate is butt -

...

...

- tweakers op je tablet / pc / whatever -


...

Windows Phone - html apps

Door deathgrunt op zaterdag 10 januari 2015 12:00 - Reacties (8)
Categorie: Apps voor Windows Phone en Android, Views: 1.614



Ongeveer een jaar geleden ben ik begonnen met het maken van apps voor Windows Phone en omdat ik "van huis uit" front-end / back-end webdeveloper ben (anno 1993...) was het toen een logische keuze om te experimenteren met HTML apps.

...

Je had toen natuurlijk al "cross OS / OS agnostische" platforms, waarvan PhoneGapp wellicht de bekendste is (mede doordat het is opgekocht door Adobe, als soort van alternatief voor hun Flash Player). Later kwamen daar nog concurrenten als Titanium Studio bij, maar er zijn inmiddels meer "platform onafhankelijke ontwikkeltools" dan besturingssystemen (straks krijgen we nog een platform onafhankelijke ontwikkeltool voor platform onafhankelijke ontwikkeltools).

...

PSEUDO HTML

Echter schrijf je in die tools een soort pseudo-html (de syntax lijkt op html, maar is het niet) en de ondersteuning voor (de API's van) Windows Phone waren niet super (ik heb het over 2013 - wellicht is het nu al verbeterd). Ander nadeel was dat de standaard layout toen zwaar leunde op jQuery's Mobile / GUI - waardoor zo'n beetje alle apps op elkaar leken en de performance ook niet echt super was.

Om die reden ben ik zelf maar gaan experimenteren met HTML "als app", ook omdat de kennis die ik daarbij opdeed (het was immer puur HTML) weer leerzaam was voor het gebruik in mobiele sites / responsive design / etc... voor mij was de synergie dus groter en leerzamer, dan wanneer ik me op de bestaande tools zou focussen (ook omdat ik wel mijn geld verdien met webdevelopment - maar niet met appdevelopment, en om de uren die ik er aan besteed toch te kunnen "verantwoorden" is het wel fijn als de opgedane kennis weer kan terugstromen in mijn dagelijkse praktijk(-ervaring).

Zo gezegd, zo gedaan... inmiddels zijn we ongeveer een jaar (en bijna 20 apps) verder - en natuurlijk zou ik het nu heel anders doen... wellicht toch maar via één van de bovengenoemde ontwikkeltools (die ook niet stil hebben gestaan), omdat het je veel tijd scheelt als je telkens je eigen framework zou moeten bedenken. En misschien zelfs in puur (native) C# (de taal van Windows Phone), omdat de performance toch wel beter / sneller is en de "look and feel" (en daarmee de user experience) beter aansluit bij de uniforme design-taal Metro / Modern UI.

Leerzaam is het sowieso geweest; toen ik begon wist ik niet eens wat C# was, ik wist niet van OOP, had geen idee wat XAML betekende en van een XAP en NuGet Reference had ik al helemaal niet gehoord...

Inmiddels kan ik die dingen wel dromen en ken ik de structuur / opbouw / logica van een Windows Phone app - daardoor merk ik dat ik sneller terugval op een C# oplossing, dan een omweg via html. Dus als ik geen kennisvoordeel van html heb opgedaan, dan is het voordeel in ieder geval dat ik me thuis ben gaan voelen in de ontwikkelomgeving van Windows Phone.



...

BELOFTE MAAK SCHULD

Om de apps een beetje te promoten, schreef ik er hier een blogje over en daar kwamen vaak weer vragen over en reacties op - voornamelijk in de trend van "hoe werkt dat" en "hoe doe je dat".

Nu pretendeer ik absoluut niet dat ik het doe "zoals het hoort" en zelfs niet dat mijn manier van werken goed is en mijn html-syntax de beste en de javascripts nooit in "het allerslechtste programmeervoorbeeld ooit forum" terecht zullen komen... maar omdat er blijkbaar vraag naar is, doe ik bij deze een beetje uit de doeken hoe het werkt.

Het is geen 100% dekkend betoog, dus veel zal je zelf moeten uitzoeken via het onvolprezen StackOverflow of deze site met praktijkvoorbeelden van alle standaard opties die je hebt voor Windows Phone apps.

Verder lijkt het me handig dat vragen over mijn specifieke voorbeeld-app hier worden gesteld (onder het blog) en niet via DM - zodat anderen er ook wat aan hebben. Natuurlijk kan je ook vragen stellen op de diverse Tweakers Fora 

Overigens heeft WP een kleine, maar enthousiaste groep ontwikkelaars - het doet mij denken aan de pionierjaren van internet, toen ik via XS4ALL en HackTick illegaal inlogde op de proxy van de VPRO - omdat die toen één keer per week een uur lang toegang gaven tot internet... maar dat was begin jaren '90 en zwaar off-topic)...

...

INGREDIËNTEN

Veel heb je niet nodig om apps voor Windows Phone te maken... hieronder een lijstje van wat ik zelf gebruik;
  • Een developers account - kost je eenmalig 15 euro of is gratis via Microsoft App Studio (maar dan kan je niet publiceren in de store - overigens kan deze site ook handig zijn als je snel een app / prototype wilt bouwen, maar zelfs html niet interessant vindt).
  • Visual Studio 2013 - community edition - de IDE waarin je schrijft, gratis en voor niets en zeer uitgebreid.
  • De SDK voor Windows Phone (zit wellicht al in je download hierboven - maar kan je ook los downloaden).
  • Een computer... of tablet - zelf heb ik een old-skool pc van 2006 waar ik dagelijks op werk en daar draait alles zeer snel en soepel op. Enige nadeel is dat het moederbord te oud is voor de Phone Emulator - zodat ik alleen kan debuggen via USB naar mijn eigen telefoon (Lumia 820). Aan de andere kant werkt dat net zo snel en heb je direct een "toch" ervaring, welke je via de emulator mist. Ik heb ook nog een cheap ass Dell Venue Pro 8 tablet, waar alles ook op draait (met emulator - mits je Windows 64 bits hebt). Dus de systeemeisen zijn erg laag (PhoneGapp eist meer resources, bijvoorbeeld).
Als je alles hebt gedownload en geïnstalleerd, dan dien je je eigen Windows Phone nog te unlocken zodat je kan sideloaden (apps installeren buiten de store om) - sowieso is dit handig om te doen, ook als je niet developped, omdat je dan apps via de SD-card kan installeren (net als Android - al mag je er maar 10 tegelijk hebben draaien op die manier).

...

DE APP

Als voorbeeld voor dit blogje, geef ik één van mijn apps weg - 2IBAN, een tooltje om rekeningnummers om te zetten naar IBAN.



Het volledige bestand (of "project" zoals dat in Visual Studio heet) kan je hier downloaden (*.sln is de solution die je moet opstarten). En aangezien het puur HTML is, kan je het equivalent (met wat missende functionaliteit natuurlijk) ook gewoon in je browser bekijken (overigens zit alle HTML ook in het te downloaden bestand, de website-versie is puur voor mensen die niets willen downloaden, maar wel mee willen kijken).

De app is niet echt responsive gemaakt; het schaalt wel mee in de breedte, maar als je het goed zou doen (onafhankelijk van de diameter van je display) dan zou je units als VW en VH moeten gebruiken; daarmee maak je 100% schaalbare oplossingen, qua flexibiliteit vergelijkbaar met vector-oplossingen als Flash. Om een idee te krijgen van hoe de app werkt, kan je de browser resizen tot een soort van portrait-mode (meer hoogte dan breedte), en dan op "converteer" drukken. Als je een geldig nummer hebt ingevoerd, wordt die omgezet en zie je het logo van de bijbehorende bank. Door op het logo te klikken, krijg je nog wat additionele informatie.

De HTML van de pagina is niet spannend, bijna leeg zelfs... alles wordt aangestuurd via jQuery en CSS - die bestanden zitten natuurlijk ook in de demo app en kan je gewoon aanpassen.

Een laatste opmerking; alhoewel ik de app / code "weggeef" (voor wat het waard is), is het niet de bedoeling dat je de app compileert, je eigen naam er onder zet en hem in de store gooit... dat kán wel, maar is een beetje suf om te doen - dus doe dat maar gewoon niet! Als je de app wil aanpassen, verbeteren, uitkleden of als uitgangspunt wilt nemen voor een eigen app, dan ben je daar natuurlijk vrij in.

...

VISUAL STUDIO

Als je VS opstart, begin je met een nieuw project. Hiervoor zijn een x-aantal templates aangemaakt, zodat je een vliegende start kan maken. Natuurlijk kan je ook vanaf nul beginnen en alles zelf doen, maar die keuze is aan jezelf. In mijn geval kies ik meestal voor Templates - Visual C# - Store Apps - Windows Phone Apps - HTML5 - WP8 (er wordt dan nog gevraagd of je wil collaboreren via een teamserver, maar dat doe ik nooit).

Op die manier creëer je een app-template die feitelijk een fullscreen versie van Internet Explorer 10 (of 11, afhankelijk van je target platform) is. En het leuke is dat de browser op Windows Phone geen "slap aftreksel" is van zijn grote broer (de iOS versie van Safari kan minder dan de desktop-versie van Safari, bijvoorbeeld), maar een 100% kopie (ze delen dezelfde code-base en hebben 100% dezelfde ondersteuning voor CSS en JS - dus wat op je desktop kan, kan je mobieltje ook...).

Anyhow... links in beeld zie je (in het geval van een XAML bestand) de real-time preview van je app, in het midden de code en rechts een file- / solutions-explorer (of andersom, je kan de indeling zelf bepalen).

...

Overigens kan je veel (visuele) zaken ook in Blend oplossen - dit is een extensie van Visual Studio (wordt standaard meegeleverd). In Blend kan je alle buttons plaatsen, voorzien van een icoon, de uitlijning bepalen, etc... Ook kan je hier animaties maken (met timelines en keyframes) en nog veel meer. Wat je doet in Blend, wordt 1 op 1 doorgegeven aan de .XAML bestanden in Visual Studio (en vice versa).

...

...

BASIS BESTANDEN

Ik ga niet uitleggen hoe C#, XAML of HTML werkt - maar in het kort zijn dit de belangrijkste bestanden van een Windows Phone app;
  • mainpage.xaml - dit is de layout pagina van je app / pagina (een soort CSS opbouw, gemixed met HTML-achtige elementen). Hier bepaal je grofweg "welk object waar staat" op je pagina en hoe het er uit ziet / wat het gedrag van de objecten is. Ook is het de plek om storyboards weg te schrijven, waarmee je animaties kan maken (vergelijkbaar met CSS-keyframes, dus geen avondvullende Disney speelfilms). Aangezien wij een HTML app maken, zijn er geen losse objecten, alleen een browser die het hele scherm inneemt... En tenslotte zie je onderin de menu-instellingen van je app. Meestal een viertal iconen en een x-aantal tekst-buttons, welke allen weer een functie hebben (die uitgewerkt wordt in het bestand hieronder).
  • mainpage.xaml.cs - de C# (C Sharp) pagina, die gelinkt is aan het equivalent hierboven. In principe kan die helemaal leeg zijn (je kan alles immers gewoon in HTML / Javascript schrijven), maar vaak ontkom je er niet aan toch een zooi C# regels neer te plempen. Ik schreef niet OOP toen ik startte, dus ik heb een mooie spaghetti-code gemaakt zonder #regions of gelinkte solutions (waarmee je elementen kan hergebruiken en effectiever kan benaderen). Het is dus echt "in your face" en "as is", zonder opsmuk en feitelijk niet hoe het hoort (maar... het werkt wel).
  • app.xaml - de moeder aller bestanden... via dit bestand bepaal je niet de vormgeving van één pagina, maar feitelijk van alle pagina's / elementen in je app - dwars door alle pagina's heen. Vergelijk het met een CSS bestand dat je hele site kan aansturen, in tegenstelling tot inline-CSS dat slechts één object kan beïnvloedden. Normaliter kan je dit bestand ongemoeid laten, maar ik heb er een zooi opmaak-codes ingezet die bijvoorbeeld de kleuren van de message-box beïnvloedt, zodat het er net wat mooier uitziet. Dit gaat via de WP Toolkit Reference, waarover later meer.
  • app.xamls.cs - wederom een belangrijk bestand, omdat het de kern van je app is... maar tegelijk ook een pagina die we hier niet echt gebruiken. Ik heb er zelf wat items ingezet om de status van de app te controleren. Zo kan ik zien of de app actief is, opstart, op de achtergrond draait of uit zijn winterslaap komt... door die status af te vangen, kan je weer interveniëren door bijvoorbeeld een item te resetten of op nul te zetten na een herstart van de app.
  • splashscreens - dit is niet verplicht (Microsoft raad het zelfs af, omdat de app sneller opstart zonder...) maar ik gebruik het altijd wel. Je ziet dan een fractie van een seconde je splashscreen in beeld, met logo en tekst... wat wel goed is voor de corporate identity - zullen we maar zeggen. Tegenwoordig kan je met één bestand af, maar "vroeger" moest je voor elke resolutie een .JPG file maken, die in de root van je app gooien en van een vaststaande syntax voorzien.
  • icons - wat is een app zonder iconen? Die zitten bij mij in de mapp Assets / Tiles (voor de shortcuts) en Assets / Icons (voor de app icon zelf). Daar doen ze niet zo veel, dus via het bestand WMAppManifest.xml kan je die dingen aansturen (en nog veel meer). Dit bestand zit onder "properties" in de "solution explorer" en is een soort handleiding voor je telefoon, zodat die snapt wat je app eigenlijk is... Door te dubbelklikken op het bestand kan je de app fine-tunen; iconen toewijzen, een omschrijving er aan meegeven, bepalen welke hardware je wil aanspreken, in welke taalversie van de store je app mag komen, etc...
...


...

WP TOOLKIT, et al

Standaard is een app nogal leeg, wat references en libraries betreft. Met een library kan je snel extra functies / eye-cande / etc... toevoegen aan je app. Bijvoorbeeld een module om zonder gedoe YouTube films te tonen, of om snel eenvoudige animaties in elkaar te draaien. Dit soort extra's voeg je toen via het "reference" menu, in je solution explorer.

In de voorbeeld-app zit maar één extra reference; WP Toolkit. Dit is een library, geschreven door een Microsoft medewerker, die het mogelijk maakt om de UI van de app te fine-tunen. Ik gebruik het om de buttons / message-box / etc... van een kleur te voorzien en de borders / corner-radius / etc... van de UI aan te passen. Als je een reference toevoegt, gaat dit bijna automatisch - maar je moet nog wel handmatig wat namespaces toekennen aan je C# en XAML bestanden. Dit wordt meestal wel uitgelegd op de ondersteunende pagina, dus daar ga ik verder niet op in.

Wil je een reference toevoegen, dan klik je met rechts op die optie en selecteer je Manage NuGet Package. Dit is een distributie-kanaal waarmee je snel extra's kan opzoeken en bijhouden; je ben altijd verzekerd van de meest recente versie als je het op deze manier installeert. Natuurlijk kan het ook handmatig, en zelfs via de terminal - maar als je daar geen zin in hebt, doe je het gewoon op de automatische manier. Door te zoeken op bijvoorbeeld WP Toolkit, zie je alle libraries die daaraan voldoen. Je kiest er één uit, installeert hem en het werkt... als je tenminste de guidelines opvolgt die samen met die specifieke libary worden vrijgegeven.

Wederom; try and error, check de fora, Google de oplossing, stel een vraag, zoek naar een ondersteunende pagina... de community rondom WP is niet groot, veel libraries zijn al 4 jaar oud en worden nooit meer geupdate, en het is allemaal wat lastiger vinden dan voor Android of iOS - maar met wat doorzettingsvermogen kom je een heel eind).

...

BUILD PROCES

In het verlengde van bovenstaand bestand, kan je de app ook nog fine-tunen door met rechts te klikken op de solution-name (2IBAN - Windows Phone 8.0) en dan te kiezen voor "properties". Daar heb je ook weer een reeks aan instellingen, waarvan de belangrijkste het output-path is van je XAP. Dat is de folder waarin de app zelf wordt geplaatst als je op "build" klikt... Hiermee wordt de app gecompileerd en uitgespuugd als XAP-bestand.

Feitelijk is het pseudo-compilatie, want je kan die XAP gewoon openen in 7ZIP... en dan zie je alle bestanden die nodig zijn voor de app (welke gewoon leesbaar zijn, dus het is nog niet volledig omgezet naar binaries). Dit laatste gebeurd pas als je de app indient in de store; Microsoft checked eerst zelf wat er in die XAP zit en pas als dat is goedgekeurd vindt de echte compilatie plaats.

Overigens gaat het indienen en publiceren van een app gigantisch snel; ik upload soms een update van een app en binnen een half uur (!) staat die dan wereldwijd, geupdate en all in de store... kom daar maar eens aan bij Android of Apple... wel kan het zijn dat de app achteraf nog wordt gechecked (vooraf gebeurd dit alleen op rudimentaire punten) en aangepast moet worden - maar daar heb je dan een week de tijd voor (voordat ze weer gaan zeuren).

Als je geen telefoon / emulator aan je pc hebt hangen, kan je de app alleen compilen en that's it. Met een (unlocked) telefoon krijg je er een optie bij; Device / Debug. Hiermee kan je de app direct naar je telefoon schieten en zien wat er gebeurd. Dit zie je in de output-window, waar van alles en nog wat voorbij schiet... Zelf bouw ik wat rudimentaire checks in via de console (debug writeline), zodat ik zie welke programmacode op dat moment wordt uitgevoerd. Officieel moet je dat allemaal afvangen met try / catch maar daar was ik toen nog niet zo van (2IBAN was mijn eerste app, op de Tweakers WP app na) - dus het waren echt mijn eerste scheden op het WP ontwikkel pad...

...

AFSLUITEND

...

Anyhow... feitelijk zijn dit alle bestanden en processen die je nodig hebt, in vogelvlucht. De browser zelf moet nog voorzien worden van wat variabelen (wel / geen scripting toestaan, wel / niet klikbaar, etc...) en dat doe je allemaal in de mainpage.xaml. Om de browser via C# iets te laten doen, kan je een code er naar toe schieten in de trend van;


code:
1
Browser.InvokeScript("eval", "alert('Hello World');");



En andersom kan ook; vanuit HTML / Javascript iets naar C# gooien, zodat je daar wat mee kan doen (bijvoorbeeld de gegenereerde IBAN naar het klemboard kopiëren of via de inbuild email-app doorsturen);


code:
1
window.external.notify('IBAN:'+iban_nr);



Met deze code geeft de browser aan dat hij wil dat C# iets doet met de variabele IBAN en de waarde iban_nr. Dat wordt afgevangen via de C# functie AppScript() in het bestand MainPage.xaml.cs die daarna kijkt wat de bedoeling is en er een actie aan verbindt.

...

Tenslotte; zoals ik al eerder zei... het was mijn eerste app en zelfs mijn eerste C# project, dus er zitten veel fouten / slordigheden in (de app zal niet crashen, maar ik valideer bijna niets - heb rare constructies om te communiceren tussen Javascript en C#, etc...).

Die-hard programmeurs zullen lachen en gruwelen bij het zien van de codes, als het ik opnieuw zou doen, zou ik vanaf scratch beginnen (kill your darlings). Tegenwoordig werk ik netter en gebruik ik de functies en bestanden "zoals het hoort".

Maar juist doordat dit project zo naïef is opgezet, is het wellicht een laagdrempelige manier om kennis te maken met de wonderlijke en leuke wereld van app-development... voor Windows Phone!

...