rarouš.weblog

Vloudil jsem se i na letošní WebExpo s tématem Continuous Delivery aneb máme stále co nabídnout. Přednáška o této poměrně nové agilní technice bude vycházet především ze starší techniky Continuous Integration, na které tato nová staví.

Témata, která by měla na přednášce zaznít, najdete v moji prezi, která je je k nahlédnutí již nyní v její rané vývojové fázi. :) Přesně v agilním duchu Continuous Delivery.

Samozřejmě jsem otevřen připomínkám a námětům, co by vás – případné účastníky – zajímalo.

Možná jste postřehli, že před nedávnem vypustil Facebook na svém githubu csharp SDK pro jejich Graph API. Z počátku mě ta zpráva potěšila, protože Facebook Toolkit, který jsem používal, tak nějak nefunguje s novým JS SDK a vůbec má zvláštní problémy.

Po chvilce nadšení přišla chvilka zklamámí. Podíval jsem se na kód a ukázky a zděsil se. S dotnetem to má asi tolik společného jako, že to jde zkompilovat pomocí csc. Tohle opravdu nechcete používat. Na netu jsem objevil i další implementace Graph API, ale stále nic, co bych chtěl používat.

Nakonec jsem se rozhodl napsat vlastní implementaci. Základ je inspirován již zmiňovaným csharp SDK, ale napsanej tak, aby využíval věci, co framework již nabízí, místo vlastní implementace JSON jsem použil osvědčený JSON.NET, přidal podporu pro ověřování pomocí OAuth i klientské JS ověření pomocí tlačítka fb:login.

No a hlavně další vrstvu abstrakce včetně objektů API.

Tohle všechno je moc hezký, mně se to dobře používá, je to IoC ready, ale zatím chybí podpora pro desktopové ověřování. Ale hlavně mi nefunguje postování na wall, což je celkem zásadní problém. Zkoušel jsem už spoustu cest. Práva na publikování publish_stream uživatel potvrdí, ale Facebook s ledovým klidem odpovídá:

Exception: (#200) The user hasn't authorized the application to perform this action

A mě z toho může trefit šlak. :)

Proto moc prosím, zkuste si stáhnout projekt, a trošku si pohrát, jestli třeba nebudete mít větší štěstí. Případného mistra odvšivovače pak pozvu na skleničku něčeho moc dobrého.

Pokud si nebudete vědět rady, jak to rozběhat, klidně mi napište mail nebo na IM. Dám vám klíče pro testovací účely a jistě další dobré rady. :)

Update

Chybu jsem nakonec odhalil a pozval se na pár Black Labelů. Chyba byla v tom, že se nastavavovala špatná hodnota vlastnosti Method objektu HttpWebRequest. Namísto hodnoty POST tam byl Post (hodnota enumerce HttpVerb a ToString). Navíc se ještě špatně encodovalo tělo requestu, kde se encodovalo všechno, ne jen hodnoty. Škoda, že se takováto chyba nedala vyčíst z chybové hlášky, která byla v tomto případě celkem zavádějící. Každopádně GraphApi už je plně funkčí a můžete ho plnohodnotně požívat.

Pořádný techno sound undergroundu.

PS. Nezapomeňte ohodnotit hvězdičkama! :)

Další z řady nesmyslných hudebních počinů z Vinohradské dílny. Tentokrát ve stylu surového techna.

PS. Nezapomeňte ohodnotit hvězdičkama! :)

Dlouho slibovaný odkládaný set s výbornými progressivními tracky v ne zas tak super provedení…

Pokud vás zajímají detaily o nasazení tlačítka Like na vašich i našich stránkách, doporučuji přečíst si článek Open Graph a jeho nasazení, který mi dnes vyšel na Zdrojáku. Krom základního popisu protokolu, tam nejdete i ukázky z reálného provozu a dal jsem si tu práci a prošel jsem pár implementací na českém webu a doporučil některá vylepšení. Třeba tam jsou i vaše stránky.

Závěrem chci poděkovat Borkovi za betatestování mého rozverného textu a zároveň za vyzkoušení, pro mne nové, cesty jak spolupracovat na dokumentu ve Wordu a v Live Mesh (a v Recycle Bin). :)

Nejprve pozvánka. Ve čtvrtek 8.4.2010 budou v klubu Touster další Dupačky, které pořádá Peter Pea. Jeho hostem nebude nikdo jiný, než moje maličkost. Pokud si chcete zadupat na groovy techno nebo se nechat unášet na progressivních vlnách housu, jistě si přijdete na své.

Jako malou návnadu přikládám reprýzu první hodiny setu z únorových Dupaček. Tech House přesunující se do Techna… :)

Včera jsem začal implementovat aktualizaci času na výpisu typu friend feed. Dnes se podíváme na to, jak si zjednodušit práci s asynchronním voláním na server. Samozřejmě opět s využitím jQuery a Reactive Extensions.

Asynchronní volání

Asynchronní volání je z pohledu šetření zdroji výhodné, ovšem z hlediska psaní a údržby kódu už to taková sláva není. Proto nám na pomoc přicházejí Rx, které asynchronní operace převádějí na neblokující lineární kód.

Pojďme hned k dnešní ukázce, která bude o dost jednodušší než včera. Ale použitá technika a principy zůstávají stejné:

Rx.Observable.
  Interval(60000).
  Select(getFeedUpdates).
  Switch().
  SelectMany(function(result) {
    return $(result).find('.hentry').toArray().reverse().toObservable();
  }).
  Subscribe(function(entry) {
    var feed = $('.hfeed')
    feed.prepend(entry);
    $('.hentry:last', feed).remove();
  });

Opět vytvářím Observable objekt, který něco vystřelí jednou za minutu. Tajemství funkce getFeedUpdates si nechám na později. A rovnou se vrhnu na zpracování dorazivších výsledků. Výsledkem mého asynchronního volání je kus HTML kódu s vygenerovaným feedem s novými příspěvky. Z tohohle kusu HTML si vyberu jen elementy s třídou hentry. Ty jsou seřazeny podle data sestupně, ale já chci feed aktualizovat postupně od nejstarších příspěvků k nejnovějším, takže je otočím funkcí reverse a pošlu je do světa jako Observable objekty.

Nakonec se přihlásím k odběru těchto jednotlivých příspěvků pomocí operátoru Subscribe. Když mi nějaký příspěvek přilítne, tak ho vezmu a dám ho na začátek feedu a potom odeberu poslední záznam, aby se nám feed na stránce nenatahoval. Takže jsme elegantně zvládli příjem nových příspěvků. A jak je vlastně načítáme?

function getLastActivityDate() {
  return $('.hfeed>.hentry .updated .value-title').first().attr('title');
}

function getFeedUpdates() {
  var subject = new Rx.AsyncSubject();
  var data = { lastActivity: getLastActivityDate() };

  jQuery.post("url", data, function(result, status) {
    if (status == "success") {
      subject.OnNext(result);
      subject.OnCompleted();
    }
    else {
      subject.OnError(result);
    }
  });

  return subject.AsObservable();
}

Funkce getLastActivityDate načte datum posledního zobrazeného příspěvku, které slouží k načtení novějších příspěvků ze serveru. Opět k tomu využívám mikroformátu hAtom a jeho konkrétní implementaci v mé stránce.

Podívejme se ale raději na další funkci. To je výše zmiňovaná getFeedUpdates, která nám transformuje asynchronní volání na objekt Observable a to pomocí třídy AsyncSubject. Povšimněte si, že v callbacku asynchronního volání vrátím přes closure data do subjektu, který už je tou dobou pozorován první ukázkou kódu.

Když přijde odpověď od serveru, je zavolána metoda OnNext, která vyhodí přijatá data dál ke zpracování. A vzhledem k tomu, že na jeden dotaz asi více odpovědí nepřijde, tak taky ukončíme vysílání výsledků pomocí metody OnComplete. Kdyby náhodou něco na serveru selhalo, máme tu ještě metodu OnError, jejíž zpracování nikde neřeším. :)

Ale vězte, že chyby můžete zpracovávat stejně snadno jako normální data.

No a to je pro dnešek vše. Tuhle ukázku si bohužel vyzkoušet nemůžete, protože k ní už je zapotřebí i serverová část a ta ještě není venku. Příště se možná podíváme, jak pomocí Rx snadno a rychle vytvořit poměrně sofistikovaný našeptávač.

Na Facebooku se mi líbí, že se automaticky aktualizuje čas, před jakým byl příspěvek na zeď pověšen. Jak si naimplementovat vlastní pomocí mikroformátu, jQuery a Rx?

Na Tropu máme několik výpisů typu friend feed, které jsou velice podobné výpisu na zdi na Facebooku. Rozdíl je v tom, že se u příspěvků neaktualizuje doba, před kterou byl příspěvek přidán, a ani se asynchronně nenačítají příspěvky nové. Jak vyřešit první problém, se podíváme dnes.

Reactive Extensions

Již nějakou dobu používám na .netu Rx, která přidává další monady pro interaktivní programování nad IEnumerable<T>, podporu paralelního zpracování a zcela nové reaktivní programování postavené nad IObservable<T>. Vysvětlovat tu dualitu IEnumerable<T> a IObservable<T> dnes hodlat nehodlám. Dodám snad jen to, že tyto extenze jsou již dostupné i pro JavaScript a stáhnout si je můžete na MSDN. K čemu je to dobré?

Reaktivní extenze vám pomohou s řešením ne zrovna snadných úloh, jako je práce s událostmi od uživatele, asynchronní volání služeb a práce s kolekcemi. To vše pomocí standardních LINQ operátorů. Tedy snadno a rychle. Doufám, že si ještě někdy najdu čas a popsal bych je trochu blíž. Možná po implementaci druhé části výše nastoleného problému. :)

Pojďme na věc

jQuery a mikroformáty asi přibližovat nemusím, to jsou věci, které tu už s námi nějaký pátek jsou. Já se na Tropu snažím mikroformáty využít všude kde to jen jde, jak jsem již psal, je to můj datový model stránky. U výpisu typu friend feed je aktuálně nefunkční kostra mikroformátu hAtom. Takže to pojďme napravit a rychle jí zprovoznit. Vezmu kus kódu a upravím ho tak, aby to byl platný hAtom:

<li class="hentry" id="activity-2330">
  <p class="entry-title"><a class="vcard author" href="/lide/zbiejczuk">
    <span class="admin" title="Trop Administrator">
     <span class="power" title="Znalec">
      <span class="fn">zbiejczuk</span>
     </span>
    </span></a>
    napsal recenzi pro <a href="/mista/808/ku-bar-praha#review-1096" rel="Bookmark">K.U. Bar</a></p>
  <p class="entry-content">
Hoďte na sebe nevyzývavě značkové oblečení, kupte si drahý cigára,
popíjejte koktejly a konverzujte markeťáckým…
  </p>
  <p class="meta">přidáno
    <span class="updated">
     <span class="text">22. března 2010 ve 12.24</span>
     <span class="value-title" title="2010-03-22T11:24:19Z"></span>
    </span>
  </p>
</li>

Další soustředění budu směřovat na span se třídou updated, protože tam se skrývá ta důležitá věc – čas. Čas, kdy byl příspěvek publikován. Tento čas vezmeme a převedeme ho na „hezčí“ textovou prezentaci. Strojově získatelná data dle ISO8601 máme uložena pomocí value-class-patternu, pro snažší update je tu navíc span s třídou text, kam budeme strkat náš vlastní text. Parsování mikroformátu provádím pomocí jQuery.

Rx jsou psány tak, aby s jQuery mohly fungovat, ale já jsem mlsná huba a trošku si jQuery osolím, aby se mi s ním a Rx pracovalo trochu líp:

jQuery.fn.toObservable = function (eventType, eventData) {
  if (arguments.length == 0) {
    return Rx.Observable.FromArray(this.toArray());
  }
  return Rx.Observable.FromJQuery(this, eventType, eventData);
}

Pokud zavolám toObservable nad jQuery objektem bez parametrů, převede se výsledek dotazu na pole (nalezených elementů) a to je převedeno na Observable objekt se kterým už pracují samotné Rx. Pokud zadám jako parametr název jQuery události, je vrácen Observable objekt nad těmito událostmi. To ale dnes nevyužiju, ale i tak se může hodit. Ještě by to šlo rozšířit o podporu live událostí, snad jindy.

Dále už se vrhnu rovnou do rozbouřené vody. jQuery na mne začne chrlit nalezené elementy, které musím zkrotit! Jak, kdy, proč? No tak, že mu to řeknu:

Rx.Observable.
  Interval(10000).
  Select(function () {
    return $('.hentry .updated').toObservable();
  }).
  Switch().
  Select(mapToElementValuePair).
  Subscribe(changeElementText);

Nejprve si vytvořim Observable objekt, který na mne jednou za 10 s vyplivne sadu nalezených elementů, které jsou součástí mikroformátu a nesou informaci o čase. Swicht slouží k tomu, že pokud by se nestihli v daném intervalu zpracovat všechny elementy, nezačne chrlit další. Tyhle elementy pak vezmu (druhý Select) a vytvořím si pomocný objekt, který obsahuje element a vyparsovaný objekt Date s časem, který element v sobě nese. Tohle je vše lenivě vyhodnocováno, takže stále nemám vůbec nic. :) To až pomocí metody Subscribe se pověsím na příjem a čekám, až mi nějaký element (v tomto případě už obalový objekt) přilítne. Pak ten element vezmu, datum převedu na text typu před 5 minutami a aktualizuju element se třídou text. A je hotovo. :)

Kompletní ukázku kódu najdete na gitu. Ona se trošku liší a je malinko obšírnější, ale pro její pochopení, jsem tu snad naznačil dost. :) Enjoy!

Bohužel i přes přítomnost skvělého TortoiseGit, který integruje funkce gitu přímo do Windowsího shellu, neexistuje pro git slušná integrace do Visual Studia ala VisualSVN. Dneska se podíváme na alternativní cestu.

Visual Studio 2010

Visual Studio se v poslední verzi dočkalo značného přepsání. Krom toho, že bylo překlopeno do WPF, stalo se i snadno rozšiřitelným díky MEF. Do samotného Visual Studa tak přibyl správce rozšíření podobný tomu, který znáte třeba z Firefoxu. Ano, včetně podpory pro procházení existujícími rozšířeními.

PowerConsole

Jedním z takovým rozšíření je i PowerConsole. Tato konzola umožňuje psát scripty nad Visual Studiem a přímo v něm. Ke scriptování se nabízí hned několik jazyků: PowerShell, IronPython a IronRuby. Možnosti jsou omezeny pouze vaší představivostí, protože máte přístup jak k API Visual Studia, tak i k celému grafu MEF komponent. A samozřejmě v případě PowerShellu i ke všemu, co PS umí.

POSH git

A tím se pomalu dostávám k POSH gitu. Je to sada scriptů pro PowerShell, která zpřehledňuje výpisy gitu, přidává TAB expansion pro rychlejší psaní git příkazů a taky přidává některé vlastní cmdletty.

Když si spojíte všechny tři věci dohromady, máme tu integraci gitu do prostředí Visual Studia! Je to teprve začátek. Ale myslím si, že slibný. Myslím, že by se výstup gitu dal projektovat do Solution Exploreru. Zatím jsem si s tím hrát nestihl, ale vypdá to slibně…