Přejít k navigační liště

Zdroják » Různé » Cappuccino – webové aplikace snadno a rychle

Cappuccino – webové aplikace snadno a rychle

Články Různé

Pokud jste na letošním WebExpo viděli přednášku Lukáše Hurycha s názvem „Příprava Cappuccina za 30 minut“, není třeba vám tento open source framework pro vytváření webových aplikací v jazyce Objective-J představovat. V seriálu, který právě začíná, se na Cappuccino podíváme podrobněji a ukážeme si, jak s ním pracovat.

Co to je a co není

Na začátku bychom si měli ujasnit, co to Cappuccino je a co není. Cappuccino je open-source framework pro psaní webových aplikací, které se dají svým UI i UX srovnat s aplikacemi desktopovými. Podobnou alternativou je např. SproutCore. Hlavním rozdílem však je, že Cappuccino není psáno v čistém JavaScriptu, ale celý framework je napsán v jazyce Objective-J, který byl vyvinut jako součást tohoto frameworku.

Objective-J se považuje za nadstavbu JavaScriptu a klade si za úkol přidat do JavaScriptu ty prvky, které při psaní robustních aplikací scházejí – např. skutečné třídy, dědičnost, import souborů, apod. Co se týče syntaxe, je Objective-J téměř stejné jako Objective-C (programovací jazyk pro aplikace na platformě Mac OS X). I když se to může zdát zpočátku zvláštní, je Objective-J stále jen obyčejným JavaScriptem, a pokud napíšeme do naší aplikaci cokoliv v čistém JavaScriptu, skript se normálně spustí.

Je nutno zdůraznit, že veškerá aplikační logika se děje na straně Objective-J, tedy klienta. Backend (PHP, Ruby on Rails) nám slouží pouze jako REST – přijímá, odesílá a zpracovává data např. ve formátu JSON.

Oproti ostatním JavaScriptovým frameworkům a knihovnám, jako např. jQuery nebo DoJo není Cappuccino určené pro webové stránky, ale hlavně pro komplexní webové aplikace. Od většiny frameworků, které jsou určené pro psaní desktop-like aplikací na webu, se Cappuccino liší filozofií psaní kódu. Samotné Cappuccino vychází z Cocoa (framework pro Objective-C) a vybírá z ní ty nejdůležitější části a zvyklosti pro vývoj aplikací.

Příklady

Než se pustíme do přípravy pracovního prostředí a samotného vývoje, měli bychom si ukázat několik aplikací napsaných pomocí Cappuccina.

První aplikací, kterou bych rád ukázal, je 280slides – webová verze prezentačního nástroje Keynote (pro Windows PowerPoint), která pochází přímo od tvůrců frameworku 280north.

Druhou aplikací je nástroj pro tvorbu wireframů a prototypů webových stránek a aplikací MockingBird.

Příprava pracovního prostředí

Pokud si chceme vývoj v Cappuccinu jen vyzkoušet bez nutnosti instalace jakýchkoliv nástrojů, stačí si na stránkách frameworku stáhnout Starter package, který obsahuje vše potřebné k tomu, abychom se mohli ihned pustit do vývoje.

Stahování a neustálé kopírování celého frameworku nás určitě po chvíli přestane bavit a budeme si chtít psaní aplikací zjednodušit a zpříjemnit, proto se nám vyplatí si nainstalovat základní vývojové nástroje od jeho tvůrců. V této části článku si ukážeme, jak probíhá instalace na čistém počítači s operačním systémem Mac OS X Snow Leopard. Není problém tyto nástroje nainstalovat také na Linux, popř. pomocí cygwin na Windows.

Prvním krokem instalace je stažení GIT repozitáře frameworku (v případě, že nemáme nástroj git k dispozici, stačí si v Terminálu otevřít rozbalený Starter package). To provedeme spuštěním následujícího příkazu v Terminálu: git clone git://github.com/280north/cappuccino. Nasměrujeme se do adresáře s repositářem:  cd cappuccino.

Dále si nainstalujeme rubygem Jake pro usnadnění kompilace frameworku na našem počítači (jedná se o podobný nástroj jako rake, jen je upraven pro potřeby Cappuccina):  sudo gem install jake.

Pro instalaci jednotlivých utilit, které slouží např. pro generování nových projektů, je třeba spustit skript bootstrap.sh, který se nachází v adresáři repositáře. Spuštění skriptu provedeme následovně:  sudo
./bootstrap.sh
.

Pokud proběhlo vše bez problémů, je nyní třeba zkompilovat všechny zdrojové soubory Cappuccina. Pokud se nacházíme stále v adresáři repositáře, učiníme tak příkazem: jake install.

Po kompilaci zdrojových souborů nám zbývá poslední věc a tou je export cesty, kde je Cappuccino zkompilováno, to provedeme přidáním následujícího řádku do souboru ~/.bash_login nebo ~/.profile:  export
CAPP_BUILD=~/cappucino/build

Právě se nám úspěšně podařilo nainstalovat Cappuccino a můžeme tedy přejít k tvorbě naší první aplikace. Také po instalaci nesmíme zapomenout restartovat Terminál.

První aplikace

K vygenerování projektu pomocí nainstalovaných nástrojů stačí do Terminálu napsat: capp gen NazevAplikace a nástroj capp už se pro nás postará o zkopírování všech potřebných knihoven a vytvoření základní adresářové struktury. 

Stejný obsah nalezneme i ve Starter Package na stránkách frameworku. Pokud si chceme aplikaci spustit, stačí v prohlížeči otevřít soubor index.html, který se nachází přímo v hlavním adresáři projektu.

Nyní jsme se konečně dostali ke skutečnému vývoji aplikací, vygenerovaná aplikace sice kromě vypsání „HelloWorld!“ na obrazovku nic nedělá, ale zato se na ní dá dobře popsat adresářová struktura a obsah jednotlivých souborů.

S popisem obsahu adresáře začneme hezky shora.

Prvním souborem je AppController.j, který nyní obsahuje tu nejzákladnější aplikační logiku. K detailnějšímu vysvětlení syntaxe Objective-J a účelu třídy AppController se dostaneme v následujícím díle, ale určitě nebude na škodu si popsat již teď ty nejzákladnější věci, které se v souboru AppController­.j dějí.

@import <Foundation/CPObject.j> //importujeme soubor se základním objektem frameworku
@implementation AppController : CPObject //implementujeme třídu AppController, která dědí od základního objektu frameworku - CPObject
{
}
- (void)applicationDidFinishLaunching:(CPNotification)aNotification //první metoda, která se automaticky volá po spuštění aplikace
{
    var theWindow = [[CPWindow alloc] initWithContentRect:CGRectMakeZero() styleMask:CPBorderlessBridgeWindowMask], //inicializujeme samotné okno aplikace
        contentView = [theWindow contentView]; //View aktuálního okna

    var label = [[CPTextField alloc] initWithFrame:CGRectMakeZero()]; //inicializujeme label, který budeme následně nastavovat

    [label setStringValue:@"Hello World!"]; //nastavujeme hodnotu labelu
    [label setFont:[CPFont boldSystemFontOfSize:24.0]]; //nastavujeme velikost fontu pomocí třídy CPFont

    [label sizeToFit]; //velikost labelu nastavujeme tak, aby vyhovoval aktuálnímu obsahu - "Hello World!"

    [label setAutoresizingMask:CPViewMinXMargin | CPViewMaxXMargin | CPViewMinYMargin | CPViewMaxYMargin]; //při změně velikosti okna se label automaticky vystřeďuje
    [label setCenter:[contentView center]];

    [contentView addSubview:label]; //přidáváme label do hlavního View aplikace

    [theWindow orderFront:self]; //zobrazujeme dříve inicializované okno

    // Uncomment the following line to turn on the standard menu bar.
    //[CPMenu setMenuBarVisible:YES];
}
@end

Dalším adresářem je Frameworks, ve kterém se nachází základní části frameworku pro vývoj aplikací – Foundation (nejzákladnější třídy), AppKit (třídy, které se přímo týkají uživatelského rozhraní, např. tlačítka, checkboxy, tabulky, textová pole, apod.) a skript starající se o run-time překlad Objective-J kódu do JavaScriptu.

Důležitým souborem je Info.plist, který obsahuje základní konfigurací naší aplikace. Jedná se o obyčejný XML soubor usnadňující jednoduché nastavení jako např. název aplikace, první inicializovaná třída, apod.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>CPApplicationDelegateClass</key>
    <string>AppController</string>
    <key>CPBundleName</key>
    <string>test1</string>
    <key>CPPrincipalClass</key>
    <string>CPApplication</string>
</dict>
</plist>

Adresář Resources slouží k ukládání našich souborů, se kterými bude aplikace pracovat – soubory vlastního uživatelského rozhraní, ikony, apod.

Soubor index.html je jediným html dokumentem, který se nachází v naší aplikaci a připravuje nám prostředí pro běh aplikace. Volá funkci main(), která se nachází v posledním důležitém souboru main.j a stará se o inicializaci celé naší aplikace.

Dokumentace a zdroje pro vývoj

Časem určitě nastane situace, kdy budeme potřebovat nahlédnout do dokumentace a zjistit, co jaká třída dělá. Bohužel tvůrci zatím oficiální dokumentaci moc nedali a zorientovat se v ní a najít potřebné informace může chvilku trvat.

Naštěstí je zde aplikace CappKiDo. Ta nám orientaci a vyhledávání v dokumentaci velmi zjednoduší. Velkou výhodou této aplikace je, že přehledně zobrazí hierarchii tříd a hned máme možnost vidět, jaká třída od které dědí.

Co jsme se naučili

V dnešním dílu seriálu o Cappuccinu a Objective-J jsme si pověděli, že Cappuccino slouží pro psaní webových aplikací, nikoliv jednoduchých stránek. Syntaxí a zvyklostmi vychází z desktopového Objective-C. Dále se nám podařilo úspěšně nainstalovat a otestovat nástroje, které zpříjemní vývoj v Cappuccinu. Vygenerovali jsme si náš první projekt HelloWorld a podívali se, co se nachází uvnitř aplikace.

Co bude příště

Příště se podíváme detailněji na jazyk Objective-J, jeho syntaxi, výhody/nevýhody, odlišnosti od ostatních jazyků a napíšeme si několik menších příkladů demonstrujících hlavní aspekty vývoje. Máte se tedy na co těšit.

Komentáře

Subscribe
Upozornit na
guest
13 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Martin Soušek

Jak vypadá tento framework ve srovnání s GWT?

Jan Kodera

Tady máte nějaké srovnání http://www.vierundsechzig.de/blog/?p=189
Také by mě zajímala rychlost těch JS souborů co se vygenerují, přeci jenom GWT dost optimalizuje a Cappuccino se určitě o to bude také snažit.

Jan Kodera

Nebo ještě na stackoverflow http://stackoverflow.com/questions/2933266/gwt-vs-cappuccino
To je myslím velmi dobré srovnání.

blizzboz

podobných JS frameworkov je už dnes viac niektoré umožňujú písať kód priamo v Jave, C# alebo F# a Ocaml nevidím teda dôvod prečo by som sa mal meniť svoje zažité programátorské návyky (volanie metód vs. posielanie správ) a učiť sa jazyk s úplne exotickou syntaxou.

mudroch

Predpokladam, ze to bude extremne rychle, kedze je to napisane „on top of JS“ :)) naco zase novy jazyk a este k tomu postaveny na niecom uplne ne-nativnom a pomalom??? :))

lopata

mě se to docela líbí, ale připadá mi, že ta orientace na přechod z objective-C, cocoa a macosx vůbec je zbytečně omezující, zejména pro ty, co Mac nemají a těch je pořád hodně. Navíc s jestli si pamatuji, tak ten GUI designer je také OSX only, což už je velká brzda.

Nedávám tomu moc šancí, GWT a node.js vidím výhodné zejména z důvodu použijí javy/javascriptu jak na GUI, tak na serveru a to ani s objective-J/C dost dobře nelze.

lopata

Jak je vidět, tak je 280atlas.com je zatím jen beta a už anoncují 20 dolarů za přístup k developer program a nativní IDE zas jen pro Mac.

Další a větší problém je nemožnost použít Objective-C/J na serveru, tady je jasná převaha řešení jako je node.js a GWT. Osobně se mi tedy více líbí node.js, protože mi dává možnost použít jakoukoli klientskou UI knihovnu, kterých je v JS mraky, mnohem více než v javě.

Pepa

podle mě trochu motáš jabka s hruškama. Capuccino je pokud vím MVC framework na straně klienta, kterej prostě pracuje v nějaké další abstrakci JS. naproti tomu node.js je čistě server side záležitost a není to samo o sobě framework. takže říct „node.js se mi líbí víc než capuccino“ vlastně nedává smysl (naopak tyhle dvě platformy se můžou skvěle doplňovat). to je jako říct „jQuery se mi líbí víc než Rails“ – to jsou prostě mimoběžky.

lopata

Ano, motám to dohromady schválně, abych to upřesnil, pro vývoj web aplikace mi přijde lepší použít node.js na serveru a čistě javascript UI knihovnu na klientu lepší = všude jen JS. Při kombinaci node.js na severu a Cappucino na klientu (příklad uvedený níže) jasně ukazuje nevýhodu – čisté js na serveru a Objective-J na klientu.

Problém je, že ta abstrakce js už v podstatě není js a pro toho, kdo nezná Objective-C je to složité.

Pro vývoj web aplikace s Cappucino by pro mne bylo výhodné pouze pokud by šlo použít Objective-C na serveru a Objective-J na klientu.

Teď mě napadlo, že by možná šlo použít Objective-J přímo na serveru s nějakým bridgem k node.js, protože z Objective-J vzniká stejně ten javascript, pak by to bylo ideální.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.