0 Comments

Do prije par godina se dosta spominjao pojam RIA, kako po internetovima tako i na ovom blogu. Uglavnom je kontekst razgovora bio vezan uz razvoj podatkovno-intenzivnih aplikacija za web, bilo internet ili intranet, i preporučena tehnologija za izradu je bio Silverlight + WCF web servisi. Također, dosta o tome se dalo isto pročitati na ovom blogu. Onda se desio Bob Muglia, najavio okretanje HTML-u, ASP.NET je postao open source, težište razvoja aplikacija se prebacilo na klijentsku stranu, Microsoft je prihvatio prvo jQuery, Newtonsoft Json.Net, Knockout.JS, SignalRkao alate za izradu bogatih web aplikacija. umjesto da dalje razvija svoje verzije (da, Microsoft Ajax, UpdatePaneli i slično se ne razvija dalje, iako i dalje dolazi uz ASP.NET). Po mom skromnom mišljenju, ovo je dobar potez, s obzirom na kaos, odnosno brojnost klijentskih biblioteka koje svakodnevno niču i nestaju. Sa serverske strane situacija je jednostavna: imamo WebAPI, MVC ili nešto treće (obični ashx handler, WCF, ServiceStack, OpenRasta, …) [more]

Ako se pitate što Wellness ima sa razvojem web aplikacija, to ne bih znao, ali SPA je već druga priča. Pojam SPA je skovan da bi opisao aplikacije čija se (prezentacijska) logika izvršava u browseru, a podaci dolaze putem web servisa u JSON obliku. Aplikacija se učitava putem jedne stranica, i ta stranica se nikada ne mijenja (npr. default.aspx), a sva kompozicija elemenata na stranici se obavlja putem Javascripta i raznih HTML predložaka. I da, SPA znači Single Page Application.

SPA označava skup serverskih i klijentskih alata s kojima kreiraju web aplikacije, i nije nužno vezan za određene alate, frameworke.

Riješili smo problem wellnesa, SPA-ova, ali nisam objasnio kakve to pak sve ima veze sa ručnicima! Kada idete u Spa, toplice, na zdravstvene i kozmetičke tretmane, uvijek sa sobom uzmete ručnik. Isto tako, kada idete razvijati SPA aplikacije, onda uzmete Hot Towel!

HOT TOWELje samo skup biblioteka i sampleaplikacija na kojoj možete vidjeti kako se razne biblioteke integriraju i rješavaju poznate probleme u izradu aplikacija: bindanje na view, predlošci, navigacija, upravljanje podacima, i slično. To je dobro mjesto za početi proučavati tehnike razvoja SPA aplikacija, a kasnije se onda određene komponente mogu zamijeniti po želji, npr. umjesto KnockoutJS uzeti Backbone.JS, jer ionako odabir pojedine biblioteke ovisi više o osobnih preferencijama nego o nekim tehničkim razlozima. Ono što će te svakako susreti pri razvoju aplikacija možemo grupirati u sljedeće cjeline:

DOM manipulacija: jQuery, tu se nema nekog velikog izbora :/

Klijentski framework(ne pada mi pametniji naziv za ovu grupu): općenito, razlikujemo varijante MVC, MVVM, MVP i sličnih MVx patterna.Svi oni se brinu o upravljanju sučelja, reagiranjem na korisničke unose, prikazivanje podataka, i više, ovisno o biblioteci. ASP.NET dolazi sa KnockoutJS (napravljen od strane člana ASP.NET tima).

Modularizacija:za izradu složenije aplikacije ne možemo koristiti tonu Javascript funkcija u globalnom scopeu, moramo ih nekako organizirati u cjeline. Kako Javascript nema namespace-ove i assemblye, koristimo malo drugačiji pristup, a najpopularnija biblioteka je RequireJS,putem koje definirate svoje module, zavisne module, pozivate ih (asinkrono), i slično.

Navigacija:poznatije pod pojmom routing,omogućava nam da reagiramo na browserove back i forward tipke, pozivanje određenog stanja naše aplikacije (pogodno za bookmarkiranje). Većina frameworka ima ovo riješeno (KnockoutJS koristi sammy.js)

Perzistencija podataka: podatke svakako morate spremiti u bazu: provjeriti koji su novi dodani, koji su promijenjeni, i sukladno s time serijalizirati ih u JSON i poslati na server. Za to se brine Breeze, ali opet, ovisi o klijentskom frameworku; Backbone na primjer ima svoj način spremanja na REST web servise.

Kako početi? Za početak instalirajte Web Tools Update na VisualStudio 2012, a potom dodajte neki od SPA predloška u Visual Studio – Hot Towel, Breeze + KnockoutJSDurandal (od autora odličnog Caliburn i Caliburn.Micro Silverlight/WPF frameworka!), EmberJS, AngularJS (sa Breezon), Sve predloške možete pronaći na ovoj adresi.

Svakako preporučujem i sljedeće linkove:

Single Page Application book

Primjeri raznih JS frameworka u izradu Todo aplikacije (korisno za usporedbu)

Uživajte!

11 Comments

image Silverlight po defaultu dolazi sa loader splash ekranom, koji je sve samo ne lijep. Neznam za čitatelje ovog teksta, ali ja čim vidim gradijente, odnosno prijelaze, još u kružnom obliku, dobijem iznenadnu želju za skakanjem sa vrha zgrade. Srećom, da ne bi slučajno došlo do realizacije tih želja gledajući brojna učitavanja Silverlight aplikacija, zamjena ekrana učitavanja je vrlo jednostavna.

Iz sljedećeg prikaza može se vidjeti slijed učitavanja aplikacije:

image

Splash screen i događaji koji ispisuju postotak učitavanja su u biti jedna XAML datoteka i Javascript metoda koja se poziva na promjenu postotka učitavanja i vrši interakciju sa elementima prikazanom XAML ekranu.

Postupak izrade izgleda ovako:

1. U jednoj XAML datoteci je potrebno pripremiti izgled ekrana. Ovdje se nalazi primjer takve datoteke,

2. Javascript metoda služi za prikaz i animiranje tog ekrana (potrebno dodati u posebnu JS datoteku i referencirati ju iz Head elementa od web stranice):

function SourceDownloadProgressChanged(s, e) {
    var bartext = s.findname("bartext");
    var bar = s.findname("bar");
    if (bartext != null || bar != null) {
        var value = Math.round(e.progress * 100)
        bartext.Text = value + "%";
        var newWidth = 3.3 * value;
        bar.Width = Math.round(newWidth)
    }
}

3. Dodatni parametri unutar poziva Silverlight aplkacije (u html/aspx, <object> element):

<param value="preloader.xaml" name="splashscreensource" />
<param value="SourceDownloadProgressChanged" name="onSourceDownloadProgressChanged" />

0 Comments

Forms autentikacija

information security Forms autentikacija je standardni ASP.NET mehanizam koji koristi autentikacijski Cookie za spremanje korisničkih podataka. Može se koristiti sa ASP.NET membership and roles providerom i gotovim kontrolama za logiranje, ali ovdje je opisan način manualnog kreiranja autentikacijskog cookia. Sav promet nije kriptiran (osim mogućnosti binarne serijalizacije .NET objekata), i postoji mogućnost krađe cookia i krivog predstavljanja.

Konfiguracija web.configa ASP.NETa za upotrebu Forms autentikacije je vrlo kompleksna ;) :

<authentication mode="Forms"/>

Konfiguraciju web servisa (WCF) nije potrebno mijenjati kao na prethodnom principu sa SSLom, pošto se sadržaj SOAP poruka ne mijenja. Za autentikaciju klijenta potrebno je napravi web servis koji izvršava provjeru korisničkih podataka i sprema autentikacijski cookie u Response objekt, primjer (bez validacije korisnika):

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class AuthService
{
	[OperationContract]
	public bool Login(string username,string pass)
	{
		// provjera korisnika u bazi ...
		var ticket = new FormsAuthenticationTicket(1, username,								DateTime.Now,DateTime.Now.AddDays(7),true,"id"+username);

		var encrypt = FormsAuthentication.Encrypt(ticket);
		var authCookie = new HttpCookie(FormsAuthentication.FormsCookieName, encrypt);
		HttpContext.Current.Response.Cookies.Add(authCookie);
		return true; // moguce je i vratiti poruku greske ili slicno
	}

	[OperationContract]
	public void Signout()
	{
		FormsAuthentication.SignOut();
	}
}

Primjer autentikacije klijenta: [more]

private void Login_Click(object sender, System.Windows.RoutedEventArgs e)
{
	var client=new AuthServicewClient();
	var success = client.LoginAsync(txtUsername.Text,txtPass.Text);
}

U pozivu na web servis poslovne logike, izvršava se provjera identiteta korisnika:

[OperationContract]
public string GetSomething()
{
	if (HttpContext.Current.User.Identity.IsAuthenticated)
	{
		return "OK: "+ HttpContext.Current.User.Identity.Name;
	}
	return "error, no user";
}

Životni vijek requesta:

1. Instanciranje proxy objekta za autentikacijski servis
2. Slanje korisničkih podataka
    a. Rezultat greške – ispis greške korisniku
3. Instanciranje proxy objekta za servis poslovne logike
4. Poziv metode web servisa
    a. Provjera identiteta (Cookie)
    b. Vračanje poruke o grešci
5. Klijent provjerava rezultat (greška ili validni podaci)

Za kraj, par stripova na temu ;) :

cyber-security-web

 security