Generation App – Día 18 – Extender la experiencia de búsqueda con App Connect

Con Windows Phone OS 7.1, aplicaciones pueden usar App Connect para extender la experiencia de búsqueda de Windows Phone. Este tópico describe como crear una aplicación que utiliza App Connect y realizar búsquedas desplegando resultados en listas de fichas informativas de productos, películas y lugares. Esta aplicación extrae parámetros del enlace de App Connect y las despliega en una página de la aplicación.

NOTA IMPORTANTE: Aplicaciones que abusen del App Connect arriesgan ser retirados del marketplace. Puedes registrar extensiones de búsqueda que solo sean relevantes en tu aplicación. El propósito del App Connect es ahorrarle tiempo al usuario. Aplicaciones que utilicen el App Connect deben usar los parámetros de una manera importante. Por ejemplo, utiliza App Connect para que automáticamente realice una búsqueda en tu aplicación cuando es ejecutado de una ficha informativa.

Este tópico involucra hacer los siguientes pasos:

  • Configurando el manifesto de la aplicación

  • Creando el archivo Extras.xml

  • Mapeando el URI desde el Quick Card

  • Creando el data model

  • Creando el ViewModel

  • Creando la pagina quick card target

  • Completando la aplicación

  • Probando con quick cards

  • Depurando la aplicación

En el proceso, iremos modificando y creando los siguientes archivos:

  • WMAppManifest.xml: Modificamos este archivo de manifesto de la aplicación para especificar las extensiones de búsqueda correspondientes con la aplicación.

  • Extensions\Extras.xml: Creamos este archivo para especificar el titulo de la aplicación que va aparecer en la pagina pivote del quick card correspondiente.

  • App.xaml: Modificamos este archivo para especificar el URI mapping desde el link del quick card hacia la pagina quick card target.

  • App.xaml.cs: Modificamos este archivo para habilitar el URI mapping en la aplicación.

  • Model\QuickCardUriParameters.cs: Creamos esta clase para representar un parámetro en un enlace URI de App Connect. Esta clase implementa la interfaz INotifyPropertyChanged.

  • ViewModel\QuickCardViewModel:  Creamos esta clase para representar el ViewModel de la pagina quick card target. Esta clase extrae los parámetros del enlace URI de App Connect  e  implementa la interfaz INotifyPropertyChanged.

  • QuickCardTargetPage: Modifica esta pagina para crear un objeto ViewModel y cargar los parámetros en el ViewModel cuando la pagina es cargada.

  • MainPage.xaml: Modificamos esta pagina para presentar texto para en la ejecución de una aplicación estándar. Esta pagina no es iniciada por App Connect.

Para modificar el manifiesto de la aplicación

  1. Ejecuta Visual Studio 2010 Express para Windows Phone.

  2. Crea un nuevo proyecto seleccionando haciendo clic en Archivo | Nuevo Proyecto

  3. La ventana de Nuevo Proyecto aparece. Expande las plantillas de Visual C#, y selecciona la plantilla Silverlight para Windows Phone.

  4. Ahora selecciona la plantilla Aplicación Windows Phone. Coloca de nombre de proyecto tu preferencia.

  5. Da clic a OK. La ventana de selección de plataforma Windows Phone aparece. Selecciona Windows Phone OS 7.1 para la versión de Windows Phone objetivo.

  6. Da clic a OK. El proyecto nuevo es creado y se despliega el archivoMainPage.xamlen el diseñador de Visual Studio.

  7. En el Solution Explorer, expande Properties y da doble clic enWPAppManifest.xml para modificarlo.

  8. En WPAppManifest.xml , agrega el siguiente código en el elemento App, de los elementos Tokens.

    <Extensions>
          <!-- Production extensions, for products: video games -->
          <Extension
            ExtensionName="Bing_Products_Video_Games"
            ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5661}"
            TaskID="_default"
            ExtraFile="Extensions\\Extras.xml" />
    
          <!-- Production extensions, for movies. -->
          <Extension
            ExtensionName="Bing_Movies"
            ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5661}"
            TaskID="_default"
            ExtraFile="Extensions\\Extras.xml" />
    
          <!-- Production extensions, for places: travel, food, and dining. -->
          <Extension
            ExtensionName="Bing_Places_Food_and_Dining"
            ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5661}"
            TaskID="_default"
            ExtraFile="Extensions\\Extras.xml" />
        </Extensions>

Este código agrega tres extensiones, uno por cada tipo de fichas informativas: ficha producto, ficha película y ficha lugar. Un ficha informativa que no este asociada con estas extensiones no se desplegarán en las páginas pivote correspondientes.

Creando el archivo Extras.xml

  1. En el Solution Explorer, da un clic derecho de tu proyecto y selecciona Add -> New Folder.

  2. Nombra el nuevo directorio Extensions.

  3. En el Solution Explorer, da un clic derecho sobre el directorio Extensions, y selecciona Add -> New Item.

  4. En la ventana de Add New Item, selecciona un archivo XML y nómbraloExtras.xml, luego da clic en Add.

  5. En Extras.xml, reemplaza el código con lo siguiente:

    <?xml version="1.0" encoding="utf-8" ?>
    <ExtrasInfo>
    
      <!-- Application title -->
      <AppTitle>
        <default>Display App Connect URI Parameters</default>
      </AppTitle>
    
      <!-- Search-related captions -->
      <Consumer ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5661}">
    
        <!-- Products caption for video games -->
        <ExtensionInfo>
          <Extensions>
            <ExtensionName>Bing_Products_Video_Games</ExtensionName>
          </Extensions>
          <CaptionString>
            <default>Product URI Details</default>
          </CaptionString>
        </ExtensionInfo>
    
        <!-- Movies caption -->
        <ExtensionInfo>
          <Extensions>
            <ExtensionName>Bing_Movies</ExtensionName>
          </Extensions>
          <CaptionString>
            <default>Movie URI Details</default>
          </CaptionString>
        </ExtensionInfo>
    
        <!-- Places caption for food and dining -->
        <ExtensionInfo>
          <Extensions>
            <ExtensionName>Bing_Places_Food_and_Dining</ExtensionName>
          </Extensions>
          <CaptionString>
            <default>Place URI Details</default>
          </CaptionString>
        </ExtensionInfo>
      </Consumer>
    </ExtrasInfo>

Este código especifica como el titulo de la aplicación aparecerán en la pantalla pivote Apps, dependiendo del tipo de ficha. En la página pivote de App para todas las fichas, el titulo de la aplicación será Display Apps Connect URI Parameters. El titulo será:

  • Para las fichas de productos (asociados con la extensión Bing_Products_Electronics): Product URI Details

  • Para las fichas de películas (asociados con la extensión Bing_Movies):Movie_URI_Details

  • Para las fichas de lugares (asociados con la extensión Bing_Places_Food_and_Dinning): Place URI Detals.

Mapping el URI desde el Quick Card

  1. En el Solution Explorer, da un clic derecho sobre tu proyecto y selecciona Add -> Class

  2. Nombra esta nueva clase QuickCardUriMapper.cs

  3. En la clase  QuickCardUriMapper.cs, agrega las siguientes directivas:

    using System;
    using System.Windows.Navigation;
    using System.Net;
  4. Actualiza la declaración de la clase, que hereda la clase UriMapperBase:

    public class QuickCardUriMapper : UriMapperBase
  5. En la clase QuickCardUriMapper, agrega el siguiente código. Este código re-implementa cada uno de los valores de parámetros del App Connect URI. La pagina destino del URI esta determinado por el string estático nombradoTargetPageName:

    // Navigation destination. 
    private static string TargetPageName = "QuickCardTargetPage.xaml";
    private string tempUri;
    
    public override Uri MapUri(Uri uri)
    {
        tempUri = uri.ToString();
    
        // Parse URI when launched by App Connect from Search
        if (tempUri.Contains("/SearchExtras"))
        {
            // Decode all characters in the URI.
            tempUri = HttpUtility.UrlDecode(tempUri);
    
            // Create a new URI for product cards.
            if (tempUri.Contains("Bing_Products"))
            {
                return GetProductCardUri(tempUri);
            }
    
            // Create a new URI for place cards.
            if (tempUri.Contains("Bing_Places"))
            {
                return GetPlaceCardUri(tempUri);
            }
    
            // Create a new URI for movie cards.
            if (tempUri.Contains("Bing_Movies"))
            {
                return GetMovieCardUri(tempUri);
            }
        }
    
        // Immediately return the URI when it is not related to App Connect for Search.
        return uri;
    }
    
    // Return a parsed Product Card URI.
    private Uri GetProductCardUri(string uri)
    {
        // Extract parameter values from URI.
        string ProductNameValue = GetURIParameterValue("ProductName=",uri);
        string CategoryValue = GetURIParameterValue("Category=",uri);
    
        // Create new URI.
        string NewURI = String.Format("/{0}?ProductName={1}&Category={2}", 
                                TargetPageName, ProductNameValue, CategoryValue);
    
        return new Uri(NewURI, UriKind.Relative);
    }
    
    // Return a parsed Place Card URI.
    private Uri GetPlaceCardUri(string uri)
    {
        // Extract parameter values from URI.
        string PlaceNameValue = GetURIParameterValue("PlaceName=", uri);
        string PlaceLatitudeValue = GetURIParameterValue("PlaceLatitude=", uri);
        string PlaceLongitudeValue = GetURIParameterValue("PlaceLongitude=", uri);
        string PlaceAddressValue = GetURIParameterValue("PlaceAddress=", uri);
        string CategoryValue = GetURIParameterValue("Category=", uri); 
    
        // Create new URI.
        string NewURI = String.Format("/{0}?PlaceName={1}&PlaceLatitude={2}&PlaceLongitude={3}&PlaceAddress={4}&Category={5}", 
                                TargetPageName, PlaceNameValue, PlaceLatitudeValue, PlaceLongitudeValue, PlaceAddressValue, CategoryValue);
    
        return new Uri(NewURI, UriKind.Relative);       
    }
    
    // Return a parsed Movie Card URI.
    private Uri GetMovieCardUri(string uri)
    {
        // Extract parameter values from URI.
        string MovieNameValue = GetURIParameterValue("MovieName=", uri);
        string CategoryValue = GetURIParameterValue("Category=", uri);
    
        // Create new URI.
        string NewURI = String.Format("/{0}?MovieName={1}&Category={2}",
                    TargetPageName, MovieNameValue, CategoryValue);
    
        return new Uri(NewURI, UriKind.Relative);
    }
    
    // This method extracts the string values that correspond to parameters in an App Connect URI.
    private string GetURIParameterValue(string parameteridentifier, string uri)
    {
        string tempValue = "";
    
        // If the parameter exists in the string, extract the corresonding parameter value.
        if (uri.Contains(parameteridentifier))
        {
            string subUri; 
    
            // Extract the characters that contain and follow the parameter identifier.
            subUri = uri.Substring(uri.LastIndexOf(parameteridentifier));
    
            // Remove the parameter identifier from the substring.
            subUri = subUri.Replace(parameteridentifier, "");
    
            // Obtain the position of the next parameter in the substring.
            int nextParameterPosition = FindNextParameter(subUri);
    
            if (nextParameterPosition < int.MaxValue)
            {
                // Remove the characters that contain and follow the next parameter.
                tempValue = subUri.Substring(0, nextParameterPosition);
            }
            else
            {
                // No more parameters follow in the string. 
                tempValue = subUri;
            }
    
            // Encode the parameter values to help prevent issues in the URI.
            tempValue = HttpUtility.UrlEncode(tempValue);
        }
    
        return tempValue;
    }
    
    // Returns the string position of the next App Connect URI parameter, if applicable.
    private int FindNextParameter(string subUri)
    {
        int lowestPosition = int.MaxValue;
        int tempPosition;
    
        tempPosition = subUri.IndexOf("&ProductName");
        if ((tempPosition > -1) && (tempPosition < lowestPosition)) lowestPosition = tempPosition;
    
        tempPosition = subUri.IndexOf("&Category");
        if ((tempPosition > -1) && (tempPosition < lowestPosition)) lowestPosition = tempPosition;
    
        tempPosition = subUri.IndexOf("&PlaceName");
        if ((tempPosition > -1) && (tempPosition < lowestPosition)) lowestPosition = tempPosition;
    
        tempPosition = subUri.IndexOf("?PlaceName");
        if ((tempPosition > -1) && (tempPosition < lowestPosition)) lowestPosition = tempPosition;
    
        tempPosition = subUri.IndexOf("&PlaceLatitude");
        if ((tempPosition > -1) && (tempPosition < lowestPosition)) lowestPosition = tempPosition;
    
        tempPosition = subUri.IndexOf("&PlaceLongitude");
        if ((tempPosition > -1) && (tempPosition < lowestPosition)) lowestPosition = tempPosition;
    
        tempPosition = subUri.IndexOf("&PlaceAddress");
        if ((tempPosition > -1) && (tempPosition < lowestPosition)) lowestPosition = tempPosition;
    
        tempPosition = subUri.IndexOf("&MovieName");
        if ((tempPosition > -1) && (tempPosition < lowestPosition)) lowestPosition = tempPosition;
    
        return lowestPosition;
    }

Para asignar el URI-Mapper al Application Frame

En App.xaml.cs, agrega el siguiente código al método InitializePhoneApplication. Nota que puede que necesites expandir la región de código titulada “Phone Application initialization” para localizar el método:

// Assign the quick card URI-mapper class to the application frame.
RootFrame.UriMapper = new QuickCardUriMapper();

Este código asigna la clase QuickCardUriMapper a la propiedad UriMapper del application frame. No modifiques nada del código existente en el métodoInitializePhoneApplication; solo agrega la asignación Uri-Mapper, como se muestra en el ejemplo:

private void InitializePhoneApplication()
{
    if (phoneApplicationInitialized)
        return;

    // Create the frame but don't set it as RootVisual yet; this allows the splash
    // screen to remain active until the application is ready to render.
    RootFrame = new PhoneApplicationFrame();
    RootFrame.Navigated += CompleteInitializePhoneApplication;

    // Assign the quick card URI-mapper class to the application frame.
    RootFrame.UriMapper = new QuickCardUriMapper();

    // Handle navigation failures
    RootFrame.NavigationFailed += RootFrame_NavigationFailed;

    // Ensure we don't initialize again
    phoneApplicationInitialized = true;
}

Creando el data model

  1. En el Solution Explorer, da un clic derecho a tu proyecto, y selecciona New Folder.

  2. Nombra el nuevo directorio Model.

  3. En el Solution Explorer, da un clic derecho sobre el directorio recién creadoModel, y selecciona Add -> New Item.

  4. En la ventana de Add New Item, selecciona Code File y nómbraloAppConnectUriParameter.cs y da clic en Add.

  5. En AppConnectUriParameter.cs, agrega el siguiente código

    using System.ComponentModel;
    
    namespace AppConnectExample.Model
    {
        // Represents a parameter from a quick card in an App Connect deep link URI
        public class AppConnectUriParameter : INotifyPropertyChanged
        {
            // The parameter name
            private string _paramName;
            public string ParamName
            {
                get {return _paramName;}
                set
                {
                    if (_paramName != value)
                    {
                        _paramName = value;
                        NotifyPropertyChanged("ParamName");
                    }
                }
            }
    
            // The parameter value
            private string _paramValue;
            public string ParamValue
            {
                get {return _paramValue;}
                set
                {
                    if (_paramValue != value)
                    {
                        _paramValue = value;
                        NotifyPropertyChanged("ParamValue");
                    }
                }
            }
    
            // Class constructor
            public AppConnectUriParameter(string pName, string pValue)
            {
                _paramName = pName.Trim();
    
                if (_paramName == "Category")
                {
                // Place multiple categories on new lines.
                    _paramValue = pValue.Replace(",",",\n");
                }
                else
                {
                    _paramValue = pValue;
                }
            }
    
            #region INotifyPropertyChanged Members
    
            public event PropertyChangedEventHandler PropertyChanged;
    
            // Used to notify that a property changed
            private void NotifyPropertyChanged(string propertyName)
            {
                if (PropertyChanged != null)
                {
                    PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
                }
            }
            #endregion
        }
    }

    Esta clase consiste de propiedades para el parámetro nombre y valor, un constructor que acepta el nombre y valor, y los miembros INotifyPropertyChanged.

Creando el ViewModel

  1. En el Solution Explorer, da un clic derecho a tu proyecto, y selecciona New Folder.

  2. Nombra el nuevo directorio ViewModel.

  3. En el Solution Explorer, da un clic derecho sobre el directorio recién creadoViewModel, y selecciona Add -> New Item.

  4. En la ventana de Add New Item, selecciona Code File y nómbraloQuickCardTargetPageViewModel.cs y da clic en Add.

  5. En QuickCardTargetPageViewModel.cs, agrega el siguiente código:

    using System.ComponentModel;
    using System.Collections.ObjectModel;
    using System.Collections.Generic;
    
    // Reference the data model.
    using AppConnectExample.Model;
    
    namespace AppConnectExample.ViewModel
    {    
        public class QuickCardTargetPageViewModel: INotifyPropertyChanged
        {
            // Observeable collection for the App Connect deep link URI parameters.
            private ObservableCollection<AppConnectUriParameter> _AppConnectUriParameters;
            public ObservableCollection<AppConnectUriParameter> AppConnectUriParameters
            {
                get {return _AppConnectUriParameters;}
                set
                {
                    if (_AppConnectUriParameters != value)
                    {
                        _AppConnectUriParameters = value;
                        NotifyPropertyChanged("AppConnectUriParameters");
                    }
                }
            }
    
            // Class constructor.
            public QuickCardTargetPageViewModel()
            {
                // Create observeable collection object.
                AppConnectUriParameters = new ObservableCollection<AppConnectUriParameter>();
            }
    
            // Load parameters from quick page; extract from the NavigationContext.QueryString
            public void LoadUriParameters(IDictionary<string,string> QueryString)
            {
                // Clear parameters in the ViewModel.
                AppConnectUriParameters.Clear();
    
                // Loop through the quick card parameters in the App Connect deep link URI.
                foreach (string strKey in QueryString.Keys)
                {
                    // Set default value for parameter if no value is present.
                    string strKeyValue = "<no value present in URI>";
    
                    // Try to extract parameter value from URI.
                    QueryString.TryGetValue(strKey, out strKeyValue);
    
                    // Add parameter object to ViewModel collection.
                    AppConnectUriParameters.Add(new AppConnectUriParameter(strKey, strKeyValue));
                }
            }
    
            #region INotifyPropertyChanged Members
    
            public event PropertyChangedEventHandler PropertyChanged;
    
            // Used to notify that a property has changed.
            private void NotifyPropertyChanged(string propertyName)
            {
                if (PropertyChanged != null)
                {
                    PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
                }
            }
            #endregion
        }
    }

    En el método LoadUriParameters, el ViewModel extra los parámetros del enlace URI del App Connect y los carga en la colección observable del tipoAppConnectUriParameter.

Creando la pagina objetivo de la ficha informativa

  1. En el SolutionExplorer, da un clic derecho sobre el proyecto y selecciona Add -> New Item.

  2. En la ventana Add New Item, selecciona Windows Phone Portrait Page y nómbralo QuickTargetPage.xaml. Da clic en Add.

  3. En el QuickTargetPage.xaml, reemplaza el grid nombrado LayoutRoot con el siguiente código:

    <!--LayoutRoot is the root grid where all page content is placed-->
        <Grid x:Name="LayoutRoot" Background="Transparent">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <!--TitlePanel contains the name of the application and page title-->
            <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
                <TextBlock 
                    x:Name="ApplicationTitle" 
                    Text="QUICK CARD EXAMPLE" 
                    Style="{StaticResource PhoneTextNormalStyle}"/>
                <TextBlock 
                    x:Name="PageTitle" 
                    Text="URI details" 
                    Margin="9,-7,0,0" 
                    Style="{StaticResource PhoneTextTitle1Style}"/>
            </StackPanel>
    
            <!--ContentPanel contains ListBox and ListBox ItemTemplate.-->
            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                <ListBox x:Name="paramsListBox" Margin="0,0,-12,0" ItemsSource="{Binding AppConnectUriParameters}" >
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel >
                                <TextBlock 
                                    Text="{Binding ParamName}" 
                                    TextWrapping="Wrap" 
                                    Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                                <TextBlock 
                                    Text="{Binding ParamValue}" 
                                    TextWrapping="Wrap" 
                                    Margin="12,-6,12,0" 
                                    Style="{StaticResource PhoneTextAccentStyle}"/>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </Grid>
        </Grid>

    En esta pagina, un control ListBox esta enlazado con una colección observable en el ViewModel, , nombrado AppConnectUriParameters. Dentro del ListBox, dos controles TextBlock que están enlazados en cada parámetro de la colección observable. Un control TextBlock enlazado a la propiedad ParamName, otro control TextBlock enlazado a la propiedad ParamValue.

  4. En el código C# para la pagina objetivo de la ficha, QuickCardTargetPage.xaml.cs, agrega la siguiente directiva en el tope de la página:

    // Reference the ViewModel.
    using AppConnectExample.ViewModel;
  5. En QuickCardTargetPage.xaml.cs, agrega el siguiente código dentro del constructor de la clase después de la instrucción InitializeComponent().

    // Create the ViewModel object.
    this.DataContext = new QuickCardTargetPageViewModel();
    
    // Create event handler for the page Loaded event.
    this.Loaded += new RoutedEventHandler(QuickCardTargetPage_Loaded);

    Este código crea un nuevo objeto QuickCardTargetPageViewModel y lo asigna al contexto de datos de la pagina. Este código también crea un manejador de eventoLoaded cuando se carga la pagina.

  6. En QuickCardTargetPage.xaml.cs, agrega el siguiente código en la clase:
    // A property for the ViewModel.
    QuickCardTargetPageViewModel ViewModel
    {
        get { return (QuickCardTargetPageViewModel)DataContext; }
    }
    
    private void QuickCardTargetPage_Loaded(object sender, RoutedEventArgs e)
    {
        // Load the quick card parameters from the App Connect deep link URI.
        ViewModel.LoadUriParameters(this.NavigationContext.QueryString);
    }

    Esto crea una propiedad para el ViewModel para que el métodoLoadUriParameters pueden ser llamados. En el manejador de evento Loaded, la propiedad NavigationContext.QueryString es pasado al ViewModel para que los parámetros pueden ser extraídos desde el enlace URI del App Connect.

Completando la aplicación

En el MainPage.xaml, reemplaza el siguiente código con el grid nombrado LayoutRoot

<!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock 
                x:Name="ApplicationTitle" 
                Text="QUICK CARD EXAMPLE" 
                Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock 
                x:Name="PageTitle" 
                Text="main page" 
                Margin="9,-7,0,0" 
                Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="24,0,42,338">
            <TextBlock 
                Text="With App Connect, you can navigate directly to a relevant page in your app from a Bing quick card."
                TextWrapping="Wrap"  
                Style="{StaticResource PhoneTextAccentStyle}" 
                Margin="0,0,12,181" />

            <TextBlock Text="To launch this app from a quick card, perform the testing steps outlined in the documentation."
                TextWrapping="Wrap" 
                Style="{StaticResource PhoneTextAccentStyle}" 
                Margin="0,94,0,83" />
        </Grid>
    </Grid>

Esto completa la implementación de la aplicación.

Probando con Quick Cards

Esta aplicación esta diseñada para ayudar explorar fichas informativas. En esta sección, realizaremos búsqueda de productos, películas y lugares asociados con las extensiones que configuramos en el archivo de manifiesto de la aplicación. Después de localizar una ficha, iniciarás tu aplicación para ver los parámetros que fueron pasados a tu aplicación desde el enlace URI del App Connect.

NOTA: Para usar esta aplicación, debes contar con una conexión de internet.

Demo con las fichas informativas de producto

  1. Presiona F5 para comenzar la depuración del proyecto, ejecutando el emulador con la aplicación.

  2. Una vez la aplicación cargada, da clic sobre el botón de búsqueda de hardware.

  3. En Bing, ingresa un termino para buscar que este relacionado a productos de videojuegos, como un nombre de consola de videojuegos. Por ejemplo, “xbox 360″ te retornara fichas de productos relacionados con la consola Xbox 360. Para probar con fichas de producto, dos cosas son requeridas:Bing debe considerar que el termino a buscar sea relevante a productos de videojuegos.Las fichas de producto relevantes al termino a buscar deben ya existir en Bing  y estar asociados a la extensiónBing_Products_Video_Games

  4. En la pagina de pivote web, selecciona un producto debajo  de la cabecera products. Esto iniciara la ficha relacionado al producto.
  5. En la ficha del producto, realiza un gesto swipe sobre el pivote apps y realiza un gesto Tap en la aplicación titulada Display URI Parameters. Nota que el titulo leeProducts URI Details.

  6. Después de hacer el gesto Tap en la pagina pivote apps, observa que la paginaQuickCardTargetPage.xaml muestra los parámetros del enlace URI del App Connect para el producto

Demo con las fichas rápidas de películas

  1. Presiona F5 para comenzar la depuración del proyecto, ejecutando el emulador con la aplicación en caso que no lo has hecho para la demostración anterior.

  2. Una vez la aplicación cargada, da clic sobre el botón de búsqueda de hardware.

  3. En Bing, ingresa un termino para buscar que este relacionado a películas, que actualmente se encuentran en cartelera. Para probar con fichas de películas , dos cosas son requeridas:Bing debe considerar que el termino a buscar sea relevante a películas que se encuentren en cartelera.Las fichas de películas relevantes al termino a buscar deben ya existir en Bing  y estar asociados a la extensiónBing_Products_Movies

  4. En la pagina de pivote web, selecciona una película debajo de la cabecera web. Esto iniciara la ficha rápida relacionada a la película.

  5. En la ficha rápida de la película, realiza un gesto Swipe sobre el pivote apps y realiza un gesto Tap en la aplicación titulada Display URI Parameters. Nota que el titulo lee Movie URI Details.

  6. Después de hacer el gesto Tap en la pagina pivote apps, observa que la paginaQuickCardTargetPage.xaml muestra los parámetros del enlace URI del App Connect para la película

Demo con las fichas rápidas de lugares

  1. Presiona F5 para comenzar la depuración del proyecto, ejecutando el emulador con la aplicación en caso que no lo has hecho para la demostración anterior.

  2. Una vez la aplicación cargada, da clic sobre el botón de búsqueda de hardware.

  3. En Bing, ingresa un termino para buscar que este relacionado con comida, como “comida” o algún restaurant cerca de donde te encuentras. Para trabajar con fichas de lugares con la extensión Bing_Places_Food_and_Dining, dos cosas son requeridas:Bing debe considerar que el termino a buscar sea relevante a comida y ubicación de locales de comida. Las fichas de lugares relevantes al termino a buscar deben ya existir en Bing  y estar asociados a la extensiónBing_Places_Food_and_Dining

  4. En la pagina de pivote local, selecciona una lugar de comida debajo del mapa que es desplegado. Esto iniciara la ficha rápida relacionada al lugar.

  5. En la ficha rápida del lugar, realiza un gesto Swipe sobre el pivote apps y realiza un gesto Tap en la aplicación titulada Display URI Parameters. Nota que el titulo lee Place URI Details.

  6. Después de hacer el gesto Tap en la pagina pivote apps, observa que la paginaQuickCardTargetPage.xaml muestra los parámetros del enlace URI del App Connect para el lugar

Depurando la aplicación

El proceso de depuración se rompe cuando una aplicación es re-ejecutada desde una ficha rápida. Para depurar una ejecución App Connect a tu aplicación, deberás simular un enlace URI. Para hacer esto, realiza los siguientes pasos para reemplazar de manera temporal el elemento DefaultTask en el archivo WPAppManifest.xml

  1. En el archivo WPAppManifest.xml, comenta de manera temporal el elementoDefaultTask.

  2. Ahora agrega el siguiente elemento DefaultTask al elemento Task.

    <DefaultTask Name="_default" NavigationPage="SearchExtras?MovieName=Test&amp;Category=Bing_Movies" />

    Este elemento DefaultTask simula una ficha de película llamada “Test”

  3. Presiona F5 y depura tu aplicacion instalandola en un Dispositivo o el emulador.

  4. En WPAppManifest.xml, comenta el elemento DefaultTask y descomenta el original. Una vez terminado, el elemento Taskdebería verse como en el siguiente código:

    <Tasks>
      <DefaultTask  Name ="_default" NavigationPage="MainPage.xaml"/>
      <!--<DefaultTask  Name="_default" NavigationPage="SearchExtras?MovieName=Test&amp;Category=Bing_Movies" />-->
    </Tasks>

Autor: Jorge Ramirez      Síguelo en twitter @JorgeRamirezMSP
Publicación original –> http://j.mp/XIyCb6
Fuente 1 –> http://j.mp/TINpiB

Anuncios

1 comentario

Archivado bajo Windows Phone

Una respuesta a “Generation App – Día 18 – Extender la experiencia de búsqueda con App Connect

  1. Pingback: Con Generation App nunca fue tan fácil desarrollar para Windows Phone « El Blog de MSP para Latinoamerica [BETA]

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s