Web, Wap, nebo Desktop? Vše v jednom umožní .NET

Scénář číslo jedna: Firma xy vydává odborný internetový magazín o bezpečnosti a administraci serverů. Protože chce, aby jeho čtenáři byli zásobováni aktuálními informacemi bez prodlevy, posílá při vydání nové zprávy SMS registrovaným uživatelům. Aby mohli mít čtenáři přístup k článku okamžitě, padne rozhodnutí zpřístupnit obsah magazínu pro mobilní zařízení s podporou WAPu nebo cHTML.

Ti z vás, kteří již měli tu možnost vytvářet aplikace pro WAP určitě ví, že to procházka růžovým sadem není. Každý s mobilních telefonů a prohlížečů má svoje specifika, která velice stěžují výrobu takové aplikace. Ku příkladu stačí vzpomenout různou maximální délku stránky, nestandardní formátování, rozlišení obrazovky, podpora barev a grafických formátů a mnoho dalších.

Scénář číslo dvě: Firma abcd provozuje online registrační hotelový systém. Má mnoho partnerů jak na straně ubytovacích zařízení, tak na zákaznické straně – spousty různých malých, či velkých cestovních kanceláří, jednotlivců nebo skupin. Registrační systém je plně v provozu jako webová aplikace pracuje ke spokojenosti všech stran. Jednoho dne se rozhodne do systému přistoupit velká cestovní kancelář, která již má svůj interní software a chtěla by jeho chod automatizovat začleněním služeb registračního systému. Nyní vyvstává otázka, jak se bude řešit propojení obou systémů.

Služba: Poštovní směrovací čísla

Jak může .NET pomoct realizovat řešení pro oba uvedené scénáře si ukážeme na praktických ukázkách. Jako ukázkovou službu jsem zvolil vyhledávání míst v ČR podle PSČ. Tato služba může fungovat na webu, má opodstatněný význam i na mobilním telefonu. A v neposlední řadě by tuto službu mohla např. nabízet Česká Pošta pro integraci do různých desktopových aplikací.

Aplikace bude obsahovat rozhraní pro web, wap, a web service – webovou službu. Součástí ukázky bude také jednoduchý windows klient využívající tuto službu. Pokud bychom chtěli architekturu takové aplikace znázornit obrázkem, vypadala by asi takto:

Jak můžete vidět ze schématu, základním kamenem celého systému je webová služba (web service), poskytující data všem ostatním částem. Vytváří v podstatě databázový interface, aby klienti nemuseli pracovat se samotnými tabulkami v databázi.

Všechny zdrojové kódy k dnešnímu článku si můžete stáhnou zde. (237 Kb)

Webová služba

Co to vlastně webová služba je ? Velice zjednodušeně se dá říct, že je to jakákoliv třída se svými metodami. Co takovou třídu dělá webovou službu je, že její funkce může používat ve svých programech kdokoliv na internetu – není omezena pouze na existenci v rámci daného jednoho počítače, na kterém je aplikace nainstalována. Vzdálené volání funkce je ale pro uživatele naprosto skryté, pracují jako kdyby knihovna pořád „seděla“ na jejich počítači. Sami vidíte 2 největší výhody webové služby:

• Pracuje se s ní stejně jako s lokálními knihovnami a třídami.
• Umožňuje přístup ke službám vzdáleného počítače.

Jak vypadá hotová webová služba se můžete podívat zde. Na uvedeném odkazu sídlí webová služba, která nabízí metodu PSC2Place. Odzkoušet si ji můžete, pokud kliknete na její jméno:

Jak se můžete sami přesvědčit, poté, co zadáte vaše PSČ, metoda vrátí jméno vašeho sídla ve XML.

To co můžete vidět na stránkách této služby je automaticky generováno .NETem ze zdrojového kódu – vývojář se nemusí o nic starat. Tyto automatické stránky mají nabízet první kontakt vývojáře s webovou službou – ten se zde seznámí s nabízenými metodami, které pak jednoduše začlení do svého kódu, jak si ukážeme později .Teď je načase ukázat si, jak se dá webová služba velice jednoduše vyrobit. Před tím, než začneme se samotným psaním kódu, ujistěme se, že máme nainstalované .NET Framework SDK. Pokud aplikace nechcete vyvíjet a chcete si pouze vyzkoušet, jak bude chodit windows aplikace stačí vám nainstalovat daleko menší .Net Framework Redistributable.

Začneme databází. Tu si můžete stáhnout ze stránek České Pošty. Databáze je velice jednoduchá – skládá se z jedné tabulky ZV_PSCOB:

V aplikaci jsou používané pouze sloupce PSC a NAZOBCE. Vytvoříme nový soubor PSCService.cs a vytvoříme funkci, která bude konvertovat zadané PSČ na název místa (obce):

using System;
using System.Data.OleDb;
using System.Web.Services;

public class PSCService : System.Web.Services.WebService
{
object QueryDatabase(string SQL)
{
OleDbConnection Connection = new OleDbConnection(@"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=D:\Projects\ziveCD\17 - PSC\db\psc.mdb;");

OleDbCommand    Command    = new OleDbCommand(SQL,Connection);

Connection.Open();
object r = Command.ExecuteScalar();
Connection.Close();

return r;
}

[WebMethod]
public string PSC2Place(int PSC)
{
string Place;
Place = (string)QueryDatabase("SELECT NAZOBCE FROM ZV_PSCOB WHERE PSC = `" + PSC + "`;");
return Place;
}
}

Funkce PSC2Place zavolá další metodu QueryDatabase, která vykoná zadaný SQL dotaz. Tato metoda nejdříve vytvoří spojení Connection, následně jej použije jako argument pro vytvoření příkazu Command. Poté už stačí spojení do databáze otevřít, přečíst hodnotu a následně spojení zase uzavřít. Nakonec stačí udělat z funkce webovou službu. To je velice jednoduché - před metody, které chceme nabídnout jako služby napíšeme atribut WebMethod, a funkce zabalíme do třídy, která dědí ze System.Web.Services.WebService.

Pokud soubor přeložíme pomocí kompilátoru csc.exe, získáme DLL knihovnu, kterou musíme umístnit do podadresáře bin virtuálního adresáře naší aplikace.

Jako poslední krok vytvoříme soubor PSCService.asmx, který obsahuje jediný řádek:

<%@ WebService Language="c#" Class="PSCService" %>

Pokud v prohlížeči nyní zavoláme URL na tento soubor, ASP.NET vyvolá webovou službu sídlící ve třídě určené parametrem Class. Zobrazí se nám stránka ze začátku této kapitoly.

Nyní tedy máme hotovou službu, kterou můžou využívat uživatelé ve svých aplikacích. Webovou službu můžeme samozřejmě využít i na lokálním počítači – serveru. Vytvořme nyní webové rozhraní k této službě. To bude velice jednoduché, formulář bude obsahovat jedno vstupní políčko a tlačítko pro vyhledávání:

V celém formuláři bude vyvolána pouze jedna událost – a to Click tlačítka Vyhledat. Podívejme se, jak bude vypadat soubor PSCWeb.aspx:

<%@ Page language="c#" AutoEventWireup="true"%>

<SCRIPT runat=server>
private void FindButton_Click(object sender, System.EventArgs e)
{
int psc;
Place.Text="<b>Výsledek : </b>";
try
{
psc = Convert.ToInt32(PSC.Text); // Zkonvertuje hodnotu zadanou uživatelem na int
PSCService Sluzba = new PSCService(); // Vytvoří instanci třídy webové služby
string p = Sluzba.PSC2Place(psc); // Zavolá webovou metody
if (p==null) throw(new Exception()); // Jestliže záznam nebyl nalezen, signalizuj výjimku
Place.Text += p; // Zobraz nalezené sídlo
}
catch
{
Place.Text += "PSČ nebylo nalezeno !";
}
}
</SCRIPT>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
  <title>Vyhledávání sídel podle PSČ</title>
</HEAD>
<body >
<form id="Form1" method="post" runat="server">
<P>Vítejte na vyhledávači míst podle <STRONG>PSČ</STRONG></P>
<table>
<tr>
  <td>
    <b>Zadejte PSČ : </b>
    <asp:TextBox id="PSC" runat="server"/>
  </td>
</tr>
<tr>
  <td align="right">
    <asp:Button id="FindButton" runat="server" Text="Vyhledat" onclick="FindButton_Click"/>
  </td>
</tr>
<tr>
  <td>
    <asp:Label id="Place" runat="server"/>
  </td>
</tr>
</table>
</form>
</body>
</HTML>

Na stránce můžeme vidět 3 komponenty – tlačítko FindButton, nápis Place obsahující výsledek vyhledávání a input PSC, který obsahuje poštovní směrovací číslo zadané uživatelem. Po kliknutí na tlačítko FindButton se vyvolá událost Click a metoda FindButton_Click se napojí na webovou službu:

PSCService Sluzba = new PSCService();

Můžete sami vidět, že napojení je naprosto skryté – vytváříme normální instanci třídy, jako kdybychom ji měli přímo na svém počítači. Zavolání funkce pro konverzi PSČ do názvu sídla je také stejné jako volání každé jiné metody:

p = Sluzba.PSC2Place(psc);

V čem je tedy ten vtip? Jak .NET ví, jak vypadá třída PSCService – jaké obsahuje metody a vlastnosti? Tyto informace jsou přeci nutné pro vytvoření instance a volání metod...

Odpověď nám nabízí utilita WSDL.EXE, která je součástí .NET Frameworku. Tento nástroj umí po zadání URL webové služby vytvořit na lokálním počítači tzv. proxy třídu. Vůbec se tohoto nového termínu nelekejte, znamená pouze to, že vytvořený soubor obsahuje třídu, která má všechny metody a vlastnosti dané webové služby. Obsahuje také samotnou implementaci propojení, takže se uživatel služby už skutečně nemusí o nic starat. Stačí pouze při kompilování souboru připojit do seznamu zdrojových souborů vygenerovanou proxy třídu a všechno šlape jako hodinky. Právě tento trik umožňuje ve skutečnosti pracovat s webovou službou jako s lokální knihovnou.

using System;
using System.Windows.Forms;


public class PSCWin : System.Windows.Forms.Form
{
private System.Windows.Forms.TextBox PSC;
private System.Windows.Forms.Label label1;
private System.Windows.Forms.Label Place;

.
.
.


private void PSC_TextChanged(object sender, System.EventArgs e)
{
if(PSC.Text.Length ==5)
{
int psc;
try
{
psc = Convert.ToInt32(PSC.Text);
localhost.PSCService  Sluzba = new localhost.PSCService();
string p = Sluzba.PSC2Place(psc);
if (p==null) throw(new Exception());
Place.Text = p;
}

catch
{
Place.Text="PSC nenalezeno !";
}

}
}
}

Můžete sami vidět, že funkční kód je naprosto stejný. Po přeložení a spuštění aplikace můžete vidět, jak se po zadání 5-ti čísel automaticky zobrazí název sídla pod inputboxem obsahujícím PSČ.

Poznámka : Za pomoci .NET je dokonce možné vytvořit hybridní aplikaci, která poběží ze stejného zdrojového kódu jako webový formulář, wap i windows aplikace. Pro zájemce o tuto tématiku doporučuji článek Logical Controls na serveru www.asptoday.com.

Ve zdrojovém kódu pro windows aplikaci jsem vynechal část která inicializuje hodnoty kontrolů na stránce – ku příkladu zobrazí popisek „Zadejte PSČ“ atd.

Rozhraní pro mobilní zařízení

ASP.NET nám umožňuje přizpůsobovat výstupní HTML kód schopnostem prohlížeče. WebForm komponenty posílají JavaScript a CSS, pokud je prohlížeč schopný jej zpracovat. V případě starších prohlížečů odpovídá výsledný kód standardu HTML 3.2. Už tento přístup velice usnadňuje vývojářům a webmasterům jejich práci.

Microsoft jde ale ještě dále a na podobném principu nabízí i podporu mobilních zařízení.

Programátorovi stačí navrhnout základní schéma stránky a .NET sám zvolí podle schopností cílového zařízení, zda má poslat HTML, cHTML, WML , jaký typ obrázku zařízení podporuje atd.

Pro podporu mobilních zařízení je potřeba si stáhnout zdarma nabízený Mobile Internet Toolkit.

Samozřejmě není ani .NET všemohoucí – vývojář musí sám zvážit, jaké funkce zahrne do verze pro mobilní aplikace. Stačí se podívat na pestrost dnešního webu – každá stránka se skládá s obrovského množství tabulek, formulářů, odkazů a obrázků, které prostě není možné vměstnat na malou obrazovku mobilního telefonu. V případě aplikace pro převod PSČ si můžeme vzhledem k jednoduchosti dovolit přenést skoro všechny prvky, které byli použity při vytváření webového rozhraní.

Při vývoji aplikací pro mobilní zařízení používáme tzv. mobilní formuláře – Mobile Forms. Pro převod PSČ budou stačit dva takové formuláře – do prvního uživatel zadá PSČ, které chce vyhledat a druhý formulář zobrazí výsledek vyhledávání:

Ve zdrojovém kódu takový formulář vypadá (soubor PSCMobile.aspx):

<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile, Version=1.0.3300.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" %>
<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" language="c#" AutoEventWireup="true"%>

<SCRIPT runat=server>
private void FindButton_Click(object sender, System.EventArgs e)
{
int psc;
try
{
psc = Convert.ToInt32(PSC.Text);
PSCService Sluzba = new PSCService();
string p = Sluzba.PSC2Place(psc);
if (p==null) throw(new Exception());
Place.Text = p;
}
catch
{
Place.Text = "PSČ nebylo nalezeno !";
}
ActiveForm=Form2;
}

private void BackButton_Click(object sender, System.EventArgs e)
{
ActiveForm=Form1;
}
</SCRIPT>

<body Xmlns:mobile="http://schemas.microsoft.com/Mobile/WebForm">
  <mobile:Form id=Form1 runat="server">
    Zadejte PSČ
    <mobile:TextBox id="PSC" runat="server"/>
    <mobile:Command id="FindButton" runat="server" onclick="FindButton_Click">Hledat</mobile:Command>
  </mobile:Form>

  <mobile:Form id="Form2" runat="server">
    <mobile:Label id="Place" runat="server"/>
    <mobile:Command id="BackButton" runat="server" onclick="BackButton_Click">Zpátky</mobile:Command>
  </mobile:Form>
</body>

Opět můžete vidět totožný kód obsluhující vyhledávání pomocí webové služby. Rozdíl je jedině v tom, že byly použity komponenty z Mobile Internet Toolkit – poznáte je podle předpony mobile ve XML tagu dané komponenty.

Aplikaci si můžete otestovat mobilním telefonem s podporou WAPu na adrese:
http://ttichy.net.innerhost.com/PSC/pscmobile.aspx

Na závěr vám předvedu několik zkrácených výpisů výsledků při požadavku z různých mobilních zařízení:

• HTML - Nejdříve obecně prohlížeč podporující HTML (ano, i v Netscape Navigatoru a Internet Exploreru můžete otevřít mobilní stránku:

<html><body>
<form id="Form1" name="Form1" method="post" action="PSCmobile.aspx?__ufps=549106">
<input type="hidden" name="__EVENTTARGET" value="">
<input type="hidden" name="__EVENTARGUMENT" value="">
<script language=javascript><!--
function __doPostBack(target, argument){
  var theform = document.Form1
  theform.__EVENTTARGET.value = target
  theform.__EVENTARGUMENT.value = argument
  theform.submit()
}
// -->
</script>

    Zadejte PSČ
    <input name="PSC"/><br>
<input name="FindButton" type="submit" value="Hledat"/></form></body></html>

• WML – Při otevření stránky pomocí Nokie 7110 odesílá server tuto WML stránku:

<?xml version=`1.0`?>
<!DOCTYPE wml PUBLIC `-//WAPFORUM//DTD WML 1.1//EN` `http://www.wapforum.org/DTD/wml_1.1.xml`>
<wml><head>
<meta http-equiv="Cache-Control" content="max-age=0" />
</head>

<card>
<do type="prev" label="Back"><prev /></do>
<p>Zadejte PSČ<input name="mcsvizkrl0" />
<anchor title="Go">
Hledat
<go href="Default.aspx?__ufps=662971" method="post">
  <postfield name="__EVENTTARGET" value="FindButton" />
  <postfield name="PSC" value="$(mcsvizkrl0)" />
</go>
</anchor>
</p>
</card>

</wml>

• WML – pokud otevřete stránku pomocí Ericssonu 320, uvidíte pořád WML, přizpůsobené ale pro potřeby tohoto mobilního telefonu.

<?xml version=`1.0`?>
<!DOCTYPE wml PUBLIC `-//WAPFORUM//DTD WML 1.1//EN` `http://www.wapforum.org/DTD/wml_1.1.xml`>
<wml><head>
<meta http-equiv="Cache-Control" content="max-age=0" />
</head>

<card>
<onevent type="onenterforward"><refresh><setvar name="PSC" value="" /></refresh></onevent>
<p>Zadejte PSČ<input name="PSC" />
<br/>
<anchor title="Go">Hledat
<go href="Default.aspx" method="post">
  <postfield name="__EVENTTARGET" value="FindButton" />
  <postfield name="PSC" value="$(PSC)" />
</go>
</anchor>
</p>
</card>

</wml>

Závěr

Jak jste mohli z tohoto článku vytušit, .NET Frameworku se povedlo sjednotit vývoj aplikací pro web, wap i windows. Není už potřeba sáhodlouze studovat definici jazyka WML a zkoušet každou stránku na 10 mobilech a strávit hodiny její optimalizací.

Nezanedbatelný je také fakt, že můžete použít stejný jazyk pro vývoj webových služeb, internetových aplikací a windows aplikací. Odpadá tím nutnost ovládat na vysoké úrovni ASP nebo PHP, C++ nebo Delphi a Visual Basic. Stačí si vybrat oblíbený jazyk (u mně zvítězilo C#) z bohaté nabídky jazyků pro platformu .NET.

Samozřejmě není .NET samospasitelné. Není možné jednoduše vzít internetový obchod, plácnout jej do mobilní verze a spoléhat na to, že všechno poběží tak, jak má. Dnešní mobilní zařízení jsou jednoduše velice vzdálené plnohodnotným internetovým prohlížečům, přičemž limitujícím faktorem je hlavně velikost zařízení. Tím ale, že bylo odlehčeno vývojáři, může se více času investovat do rozumného návrhu uživatelského rozhraní pro dané zařízení.

Na konec ještě jednou odkaz pro stažení (237 Kb) zdrojových kódů ke článku.