Guide: crea una applicazione per Phone 7

E' facile e programmi sono gratuiti.

ragazze-notebook-stadio-619x400_210054
|

Sviluppare un’applicazione “personalizzata” con Windows Phone 7

 

Sviluppare applicazioni per Windows Phone 7 è veramente molto semplice, e gli strumenti necessari allo sviluppo sono tutti gratuiti.

 

Per partire bisogna scaricare gratuitamente i Windows Phone Development Tools, che includono:

 

  • Visual Studio 2010 Express for Windows Phone (lo strumento di sviluppo)

  • Expression Blend for Windows Phone (lo strumento per il design della grafica delle applicazioni)

  • Emulatore (per testare le applicazioni senza avere un telefono)

  •  

    Se si ha già Visual Studio 2010 installato sulla macchina, verranno solo aggiunti i nuovi progetti a quelli esistenti, altrimenti verrà installata la versione Express dedicata al solo sviluppo di Windows Phone 7.

     

    Se vogliamo provare l’applicazione su un telefono vero dobbiamo anche scaricare il client Zune.

     

    Linguaggi e tecnologie supportate

     

    Windows Phone 7 può essere programmato in C# o Visual Basic, usando come tecnologie Silverlight (disponibile anche per il browser e per lo sviluppo desktop) o XNA (con cui si possono realizzare anche giochi per XBOX 360 e PC).

     

    In questo mini tutorial utilizzeremo C# e Silverlight per realizzare un semplice Hello World e poi un lettore di Blog e Twitter.

     

    1. Realizziamo un Hello World

     

    Per realizzare un Hello World bisogna creare un nuovo progetto in Visual C# di tipo Silverlight per Windows Phone, selezionando Windows Phone Application, e poi si potrà mettere un bottone sulla pagina MainPage.xaml, prendendolo dalla toolbox laterale:

     

    Una volta messo il bottone sulla pagina, si potrà fare doppio click sul bottone, per inserire il codice che verrà eseguito una volta che l’applicazione sarà in esecuzione:

     

    private void button1_Click(object sender, RoutedEventArgs e)

     

    {

     

    MessageBox.Show("Hello World!");

     

    }

     

    A questo punto basta lanciare l’applicazione (premendo la freccia verde del play o F5 sulla tastiera) e l’applicazione verrà lanciata sull’emulatore del telefono:

     

    Per interrompere l’esecuzione si potrà premere i tasti Back o Start sull’emulatore, oppure il quadrato blu che serve a interrompere il Debug da Visual Studio.

     

    L’emulatore potrà essere lasciato in esecuzione per velocizzare le prove successive.

     

    2. Realizziamo un’applicazione più complessa

     

    Per realizzare un’applicazione che collezioni dei feed e li presenti all’utente si può partire dal progetto “MyWP7Brand” presente sul sito dei progetti Open Source gestito da Microsoft chiamato CodePlex, in particolare all’URL http://mywp7brand.codeplex.com.

     

    Quest’applicazione mostra un “Panorama” che viene usato per scorrere orizzontalmente tra le varie sezioni dell’applicazione (Blog, Twitter, Info in questo caso) con una metafora nuova ed integrata con quella usata nativamente nel telefono per gli “Hub” dei contatti, musica e video, foto, etc…

     

    Se si va alla sezione codice sorgente, si può scaricare qui tutto il progetto, sia in C#, sia in Visual Basic (noi useremo quello C#, presente nella cartella “trunk\src” all’interno del file ZIP scaricato). Ricordatevi di “sbloccare” il file ZIP scaricato prima di scompattarlo, altrimenti Visual Studio darà problemi:

     

    Se apriamo MyWp7Brand.sln, dopo aver annullato la richiesta di credenziali per CodePlex e aver selezionato di lavorare Offline, è possibile lanciare l’applicazione, e modificarla.

     

    Ricordatevi di lanciarla almeno una volta premendo F5 prima di modificarla, altrimenti il designer di Visual Studio darà degli errori.

     

    3. Struttura dell’applicazione

     

    L’applicazione è già pronta e funzionante, e mostra due volte il feed di twitter di WindowsPhoneIT. Per trasformarla nella “nostra” applicazione personale bisogna prima di tutto sistemare la parte grafica, modificando con Paint, Paint.NET, Photoshop, etc… i seguenti file:

     

  • ApplicationIcon.png – è l’icona piccola che si vede nella lista delle applicazioni del telefono

  • Background.png – è l’icona grande, quando l’applicazione viene messa nella pagina iniziale del telefono

  • MyWp7Brand.png – è l’icona che si vede all’interno dell’applicazione, nella sezione Info con le informazioni sull’autore dell’applicazione

  • PanoramaBackground.png – è lo sfondo dell’applicazione, conviene farlo a 1024x768, poi ci pensa il telefono a ridimensionarlo e a renderlo scrollabile. Se si decide di utilizzare una foto o un’immagine complessa, è meglio usare un file JPEG

  • SplashScreenImage.jpg – è la schermata iniziale che appare durante il caricamento.

  •  

    Per modificare invece i feed RSS del blog e di twitter, oltre al link al marketplace (nel caso decidiate di pubblicarla in modo che tutti gli utenti la possano scaricare), bisogna aprire il file MainPage.xaml.cs e modificare le parti segnate in giallo:

     

    private void BlogRefresh_Click(object sender, RoutedEventArgs e)

     

    {

     

    var rssClient = new RssClient("http://twitter.com/statuses/user_timeline/185968571.rss", this.Blog); //mettere il proprio blog

     

    rssClient.ItemsReceived += new RssClient.ItemsReceivedDelegate(rssClient_ItemsReceived);

     

    rssClient.LoadItems();

     

    this.ShowProgressBar(true);

     

    }

     

    private void TwitterRefresh_Click(object sender, RoutedEventArgs e)

     

    {

     

    var twiClient = new RssClient("http://twitter.com/statuses/user_timeline/185968571.rss", this.Twitter); //mettere l'RSS del proprio twitter

     

    twiClient.ItemsReceived += new RssClient.ItemsReceivedDelegate(rssClient_ItemsReceived);

     

    twiClient.LoadItems();

     

    this.ShowProgressBar(true);

     

    }

     

    private void Marketplace_Click(object sender, RoutedEventArgs e)

     

    {

     

    MarketplaceSearchTask mr = new MarketplaceSearchTask();

     

    mr.SearchTerms = "BlahBlahBlah"; // mettere il proprio nome del Marketplace

     

    mr.Show();

     

    }

     

    Per modificare l’ordine delle sezioni dell’applicazione, o la pagina delle Info bisogna invece modificare il file MainPage.xaml:

     

    4. Installare l’applicazione sul telefono

     

    Per installare l’applicazione sul telefono, bisogna avere un account del marketplace di Windows Phone (http://create.msdn.com). La registrazione è gratuita per gli studenti, a pagamento per individui e società.

     

    Per verificare eventuali promozioni in corso per l’accesso gratuito al marketplace per chi sviluppa applicazioni potete mandare una mail all’indirizzo itamsdn@microsoft.com.

     

    Lanciamo il client Zune che abbiamo scaricato inizialmente e colleghiamo il telefono tramite USB.

     

    A questo punto bisogna lanciare il Windows Phone Developer Registration tool, che richiede l’account con cui ci si è registrati al marketplace per sbloccare il telefono e permettere l’installazione delle applicazioni. Questa operazione deve essere fatta solo una volta per ogni telefono.

     

    Una volta che il telefono è stato sbloccato, è possibile impostare in Visual Studio di utilizzarlo al posto dell’emulatore, e lanciando l’applicazione questa verrà copiata direttamente sul telefono ed eseguita.

     

    5. Come proseguire nello sviluppo

     

    Per creare applicazioni più avanzate, si può partire dal sito dedicato agli sviluppatori italiani di Windows Phone 7: www.microsoft.it/msdn/phone

     

    Prossimamente vedremo come programmare un piccolo gioco, sempre utilizzando Silverlight.

     

    Buona programmazione!

     

    16 luglio 2011