Windows Azure Mobile Service újdonságok I.

Ahogy korábban olvasóinknak ígértük, igyekszünk folyamatosan frissíteni a blogot a könyv megjelenése után bejelentett Azure frissítésekkel és új szolgáltatásokkal, amik bizonyos időközönként bekerülnek majd a könyv elektronikus kiadásaiba is. A fejlesztői oldalról legtöbb újdonsággal a Mobile Services szolgáltatás bővült, így egy több részes blogbejegyzés sorozatban mutatjuk be az újdonságokat:

Android

A Windows Azure Mobiles Services széleskörű fejlődését mutatja, hogy a könyv kiadása után hamarosan megérkezett az Android platform teljes körű támogatása.  Az Android Client SDK letölthető a GitHubról. Ha egy meglévő vagy újonnan létrehozandó androidos alkalmazásnál szeretnénk kihasználni a Mobile Services előnyeit, akkor nincs más dolgunk, mint a létrehozott Mobile Service beállításainál a „Create a new Android app” vagy a „Connect an existing Android app lehetőséget választani:

Új Android Mobile Service létrehozása

Új Android Mobile Service létrehozása

A Mobile Services szolgáltatás nagy előnye, hogy könnyen tudunk push üzeneteket küldeni az alkalmazásunkat futtató mobil eszközökre. Ha Androidon szeretnénk ezt használni, akkor szükségünk lesz egy egyedi API kulcsra, melyhez a Google Cloud Messaging weboldalán juthatunk hozzá, és az adott Mobile Service Push beállításainál adhatjuk hozzá:

Push beállítások

Push beállítások

iOS

Természetesen az iOS fejlesztők sem maradnak újdonságok nélkül, számukra elkészült egy rövid videó tutorial sorozat, melynek segítségével könnyedén megismerkedhetnek a rendszer működésével és használatba vételével.

HTML5/JavaScript

Egyre népszerűbb a HTML5/JavaScript fejlesztés, hiszen már nem csak webes alkalmazásokat, hanem asztali vagy akár keresztplatformos mobilalkalmazásokat is fejleszthetünk a fenti nyelvek segítsévégel, így felmerült az igény, hogy ezeknek az alkalmazásoknak is lehetőségük legyen felhős adattárolásra és authentikálásra. A könyv 14.fejezetében már említett identity providerek segítségével könnyedén használhatunk HTML5-alapú alkalmazásainkban külső szolgáltatótól (Microsoft Account, Google, Facebook, Twitter) származó authentikációt.
Támogatott böngészők: IE8+, Google Chrome, Firefox, Safari legfrissebb változatai, valamint a PhoneGap 2.3.0 és annál újabb mobil fejlesztői keretrendszer.

Weboldali Facebook hitelesítés megvalósítása Azure Mobile Services segítségével

Hozzunk létre egy egyszerű Todo webalkalmazást, melynél a felhasználók a Facebook segítségével jelentkezhetnek be a szolgáltatás használatára.

  1. Hozzunk létre egy új Mobile Service-t a New -> Compute -> Mobile Service -> Create menü segítségével
  2. Adjuk meg a létrehozáshoz szükséges adatokat, beleértve az adatbázist
  3. Válasszuk a HTML/Javascript lehetőséget, majd a Create a new HTML app linket

    HTML Mobile Service létrehozása

    HTML Mobile Service létrehozása

  4. Válasszuk a “Create TodoItem Table” gombot, ezzel létrejön az adattáblánk. Ezután már könnyen hozzáférhetünk a szükséges fájlokhoz összecsomagolva, ezek letöltéséhez válasszuk a Download gombot. Ha Windows rendszeren szeretnénk szeretnénk kipróbálni az oldalunkat, akkor szükségünk lesz az IIS Expressre (a Web Platform Installer segítségével könnyedén telepíthető), Max OS X és Linux rendszeren a legújabb verziós Python szükséges.
  5. Csomagoljuk ki a letöltött ZIP fájlt, majd kattintsunk duplán a server mappában helyet foglaló launch-windows linkre. Ez egy parancssoros felület nyit meg nekünk, ahol az R gombbal tudjuk engedélyezni a futtatást.

    IIS indítása

    IIS indítása

  6. Nyissuk meg a böngészőnkben a http://localhost:8000/ URL-t
  7. Valósítuk meg az authentikációt külsős Identity Provider segítségéel, hogy a felhasználók csak Facebook bejelentkezés után férhessenek hozzá az adatokhoz! Ehhez látogassunk el a Facebook fejlesztőknek szóló weboldalára, ahol egy rövd regisztráció után készíthetünk Facebook alkalmazásokat. Válasszuk a felső menüsorban az App menüpontot, majd azon belül a “Create new App” gombot.
  8. Adjuk meg az alkalmazásunk nevét, névtér megadása nem szükséges
  9. Töltsük ki az alkalmazás adatait az alábbiaknak megfelelően, a Site URL résznél adjuk meg a Mobile Service-hez tartozó egyedi URL-t, amit a Dashboardon könnyen megtalálunk. A Sandbox módot kapcsoljuk ki:

    A Facebook alkalmazás beállításai

    A Facebook alkalmazás beállításai

  10. Térjünk vissza az Azure Management portálra, válasszuk ki a Mobile Service beállításainál az Identity menüpontot, majd itt adjuk meg a Facebook alkalmazásunkat egyedileg azonosító adatokat, és kattintsunk a Save gombra.

    Facebook APP ID és App Secret megadása

    Facebook APP ID és App Secret megadása

  11. Állítsuk be, hogy csak a bejelentkezett felhasználók használhassák az oldalunkat. Válasszuk a Mobile Service beállításainál a Data menüt, majd kattintsunk a TodoItem táblára. A tábla beállításainál nézzük meg a Permission fülön állítsuk be a szükséges hozzáféréseket:

    Engedélyek

    Engedélyek

  12. Módosítsuk a korábban letöltött fájljainkat, az index.html fájlba szúrjuk bele az alábbi kódsorokat a <h1> tag alá:
    <div id="logged-in">
        You are logged in as <span id="login-name"></span>.
        <button id="log-out">Log out</button>
    </div>
    <div id="logged-out">
        You are not logged in.
        <button>Log in</button>
    </div>
  13. Az app.js fájlban a referTodoItems függvény helyére illesszük az alábbi kódsorokat:
    function refreshAuthDisplay() {
        var isLoggedIn = client.currentUser !== null;
        $("#logged-in").toggle(isLoggedIn);
        $("#logged-out").toggle(!isLoggedIn);
    
    if (isLoggedIn) {
        $("#login-name").text(client.currentUser.userId);
        refreshTodoItems();
    }
    
    }
    
    function logIn() {
        client.login("facebook").then(refreshAuthDisplay, function(error){
            alert(error);
        });
    }
    
    function logOut() {
        client.logout();
        refreshAuthDisplay();
        $('#summary').html('<strong>You must login to access data.</strong>');
    }
    
    // On page init, fetch the data and set up event handlers
    $(function () {
        refreshAuthDisplay();
        $('#summary').html('<strong>You must login to access data.</strong>');          
        $("#logged-out button").click(logIn);
        $("#logged-in button").click(logOut);
    });
  14.  Teszteljük a hitelesítést. Indítsuk el a weboldalt, majd kattintsunk a Login gombra. Ekkor felugrik a Facebook hitelesítő ablak:
    Facebook hitelesítés

    Facebook hitelesítés

    A kész alkalmazás

    A kész alkalmazás

Ezeket az újdonságokat Te is kipróbálhatod! Regisztrálj az ingyenes, 90 napos Azure előfizetésre, és vegyél részt az AzureConf.HU eseményünkön, ahol képbe kerülhetsz mind a fejlesztői, mind pedig az üzemeltetői oldal újdonságaival!

2 thoughts on “Windows Azure Mobile Service újdonságok I.

  1. Visszajelzés: Windows Azure Mobile Service újdonságok IV. | Felhők között

  2. Visszajelzés: Windows Azure Mobile Service újdonságok IV. - A magyar Windows Azure közösség blogja - devPortal

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s