Pull to refresh

Как создать свое приложение для Мой мир@Mail.ru на Silverlight 4 за 10 минут

Reading time 6 min
Views 5.9K
Я рад поделиться с вами новостью, что сегодня мы анонсировали Silverlight SDK для разработки приложений для социальной сети Мой мир@Mail.Ru. Этот продукт является плодом тесного сотрудничества компаний Mail.Ru, Microsoft и нас.

Здесь я бы хотел рассказать о том, каким образом любой желающий может сделать свое приложение за 10 минут. Итак, поехали.


Установка SDK



Для создания приложения вам понадобятся установленная Visual Studio 2010, среда исполнения Silverlight 4, инструменты разработчика Silverlight 4 и непосредственно Мой мир@Mail.Ru Silverlight SDK. Для загрузки последнего можно воспользоваться официальным сайтом, загрузить из Visual Studio Gallery или воспользоваться встроенными механизмами Visual Studio Extension Manager по загрузке расширений.

Visual Studio Extension Manager

Установка SDK представляет собой стандартную процедуру из последовательности “Next – Next — Next” и подтверждения добавления расширения в Visual Studio 2010. После установки SDK расширение должно появится в Extension Manager. Следует убедиться активно ли оно, если нет, то активировать.

После этих шагов при создании новых проектов у вас должен появиться шаблон для создания приложения для сети Мой мир.

Шаблон для создания приложения Мой мир@Mail.Ru

На этом установка закончена и можно переходить к непосредственно созданию приложения.

Создание приложения



После того, как установка SDK закончена самое время перейти к созданию приложения. Для этого нужно выбрать пункт меню “New Project” и создать новый проект, используя шаблон “Мой мир@Mail.Ru” из раздела “Silverlight”. После создания приложения можно увидеть, что проект – это типичное Silverlight-приложение, в котором присутствует ссылка на сборку “Oogsoft.MyMir.SilverlightAPI”. Кроме того, вместо стандартного класса приложения Application используется новый класс SocialApplication. Это необходимо для того, чтобы приложение могло автоматически получить параметры от сети Мой мир.

<SilverlightAPI:SocialApplication xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                                  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                                  xmlns:SilverlightAPI="clr-namespace:Oogsoft.MyMir.SilverlightAPI;assembly=Oogsoft.MyMir.SilverlightAPI"
                                  
                                  x:Class="FriendsApp.App">
    <SilverlightAPI:SocialApplication.Resources>

    </SilverlightAPI:SocialApplication.Resources>
</SilverlightAPI:SocialApplication>


Сейчас мы можем перейти в основную форму приложения и добавить туда необходимые элементы управления. Давайте создадим приложение, которое будет получать список друзей текущего пользователя и отображать на экране. Для этого добавим на форму элемент управления ListBox и кнопку, по нажатию на которую будет происходить обращение к социальной сети.

<UserControl x:Class="FriendsApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <ListBox Height="276" HorizontalAlignment="Left" Margin="12,12,0,0" 
                 Name="listBox1" VerticalAlignment="Top" Width="232" />
        <Button Content="Друзья" Height="23" HorizontalAlignment="Left" 
                Margin="250,12,0,0" Name="button1" VerticalAlignment="Top" Width="75" />
    </Grid>
</UserControl>


Теперь нужно определить обработчик события на кнопку. В нем мы обратимся к ресурсам социальной сети и попробуем получить данные.

Для работы с ресурсами социальной сети используются объекты, имеющие публичные интерфейсы. Например, для работы со списком друзей должен использоваться интерфейс IFriends, а для работы с фотографиями – IPhotos. Полный список объектов для работы с социальной сетью можно найти в документации к SDK.

Для получения соответствующих объектов используется специальная фабрика – SocialFactory. Этот объект имеет статический метод Create с generic-параметром. Этот параметр необходим для того, чтобы указать фабрике какой именно объект нам нужен в данный момент. Например, если нам нужно работать со списком друзей, то в качестве параметра следует передать интерфейс IFriends.

private void button1_Click(object sender, RoutedEventArgs e)
{
    var friends = SocialFactory.Create<IFriends>();
}


Каждый интерфейс имеет набор операций, которые разрешено выполнять. Поскольку все операции по работе с внешними ресурсами в Silverlight выполняются асинхронно, то сами операции не возвращают никакого результата. Вместо этого, в качестве параметра для этих операций передается делегат на метод, который будет выполнен после выполнения операции. Второй делегат выполняется в процессе загрузки данных и может использоваться для отображения прогресса загрузки. Если нам не требуется отображать прогресс загрузки, то на месте этого параметра можно указать null.

Код для получения списка друзей и отображения его в ListBox будет выглядеть следующим образом.

var friends = SocialFactory.Create<IFriends>();
friends.Get(delegate(IEnumerable<Friend> result, Exception error)
                {
                    if (error == null)
                    {
                        listBox1.ItemsSource = result;
                    }
                    else
                    {
                        listBox1.ItemsSource = null;
                        MessageBox.Show(error.Message);
                    }
                },
                null);


Теперь давайте поработаем с ListBox. Нам необходимо настроить внешний вид этого элемента управления для отображения данных. Мы будем отображать аватары пользователей. Поэтому поместим в шаблон этого элемента управления объект Image и привяжем его свойство Source к полю Pic, которое содержит адрес аватара для каждого пользователя. В итоге получим  следующую разметку для элемента управления.

<UserControl x:Class="FriendsApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <ListBox Height="276" HorizontalAlignment="Left" Margin="12,12,0,0" 
                 Name="listBox1" VerticalAlignment="Top" Width="232">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Image Source="{Binding Pic}" Width="100" Height="100"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Button Content="Друзья" Height="23" HorizontalAlignment="Left" 
                Margin="250,12,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
    </Grid>
</UserControl>


На этом логика нашего приложения готова и мы можем перейти к публикации приложения.

Публикация приложения



Для получения возможности общения с сообществом разработчиков можно вступить в специальное сообщество для разработчиков приложений. Правила вступления в сообщество также описаны на специальной странице.

Для того, чтобы опубликовать свое приложение нужно перейти в личный кабинет по адресу http://api.mail.ru/apps/my/ и нажать кнопку «Создать приложение».

Создание приложения в Моем мире

Далее следует указать имя приложения и указать тип приложения «iFRAME». После создания приложения в разделе управления приложением можно получить специальный ключ – private key. Его нужно указать в файле App.xaml.cs вашего приложения.

public partial class App
{
    protected override string PrivateKey
    {
        get { return "31ce536824a120e24ea73ad80d5a8dd8 "; }
    }


После этого можно собрать приложение. Для удобства разработчиков SDK сам копирует нужные файлы в папку Publish, а также создает архив для удоства загрузки на сервер. Для размещения приложения вы можете использовать два варианта — разместить полученные файлы на собственном сервере, либо воспользоваться предложением Mail.Ru и разместить приложение на их серверах.

Если вы используете собственный хостинг, то в корне сервера вам следует разместить файл «receiver.html». Например, если вы размещаете ваше приложение по адресу mymir.oogsoft.com/apps/mailru/testapp1, то путь для размещения этого файла должен быть mymir.oogsoft.com/receiver.html.

Если вы хотите использовать ресурсы Mail.Ru для размещения приложений, то следует перейти во вкладку хостинг и загрузить все необходимые файлы.

Загрузка файлов в Мой мир

Как я уже упомянул, Мой мир@Mail.Ru Silverlight SDK автоматически упаковывает все файлы в архив для удобства загрузки. Вам достаточно загрузить один файл «publish.zip» и его содержимое будет распаковано и помещено на сервер.

После размещения вашего приложения на сервере следует задать пути до файлов приложения. Для этого нужно перейти на вкладку «Настройки iFrame» и указать пути.

Загрузка файлов в Мой мир

Теперь можно перейти на страницу приложения. Для того чтобы приложение могло корректно работать с сервисами сети следует установить его для текущего пользователя.

Наше приложение готово к употреблению! После того, как приложение будет готово, его следует объявить публичным. Для этого необходимо сменить статус приложения на вкладке «Публикация».

Ссылки




Кроме того, на портале Techdays.Ru доступен мой доклад про то, как разрабатывать социальные приложения на Silverlight.
Tags:
Hubs:
+18
Comments 36
Comments Comments 36

Articles