Este artigo foi traduzido por máquina.

Windows 8.1

Crie uma microficha moderna com a API do Chronicling America

Tim Kulp

Baixar o código de exemplo

Hoje, o jornal está sendo substituído por outras fontes de notícias na Web.Ao mesmo tempo, porém, os jornais foram a principal fonte de informações sobre eventos atuais.Através do projeto América narrando (chroniclingamerica.loc.gov), Estados UnidosBiblioteca do Congresso e várias instituições têm trabalhado para tornar a rica história dos E.U.jornais disponíveis na Web através de uma API padronizada.Essa API permite que os desenvolvedores utilizam mídia do projeto América narrando para construir aplicativos de pesquisa, notícias apps com contexto histórico ou apps para anexar conteúdo a genealogia familiar.Neste artigo, apresentarei o API de América narrando e construir uma app Store do Windows que permite aos usuários pesquisar e ver os jornais digitalizados.

Visão geral da API do América Chronicling

Narrando a América tem duas componentes principais para sua API: o protocolo OpenSearch e URLs padronizadas para navegar o conteúdo.Para cada publicação, a URL segue um formato padrão que você pode modificar para fornecer dados diferentes.Por exemplo, recuperar uma página específica requer a estrutura de URL a seguir: http://chroniclingamerica.loc.gov/lccn/sn83030214/1913-08-12/Ed-1/Seq-1/.Este formato quebra para baixo para: solicitando uma publicação específica (/ lccn/sn83030214 /), fornecendo a data e o identificador da edição e edição (1913-08-12/ed-1) e o número da página (seq-1 /).Se eu quero solicitar a segunda página, apenas atualizar seq-1 seq-2.Ao longo deste artigo, usarei a URL padronizada para tornar a navegação simples e rápida sem ter que procurar objetos com muitas solicitações pontuais para o servidor.

Você pode usar a URL para recuperar conteúdo específico e o protocolo OpenSearch para pesquisar títulos e páginas.Pesquisas em relação a títulos e páginas usam diferentes estruturas de URL.Estruturas de pesquisa de título podem ser encontradas em 1.usa.gov/1a0GOpF, e estruturas de pesquisa da página podem ser encontradas em 1.usa.gov/188T1HB.Esses arquivos XML fornecem todos os formatos de saída e os parâmetros que podem ser usados na América narrando.Vou me concentrar na página pesquisas neste artigo para ter a maioria das propriedades contra o qual deseja pesquisar.

Construindo uma App de microfichas

Se você não é idade suficiente para lembrar a microficha, era uma parte clara do filme na qual miniatura imagens foram impressas.Estas imagens foram mal legíveis a olho nu, mas colocando a folha de microfilme em um projetor especial, você pode obter acesso a centenas de imagens (ou mais).Foi um ótimo meio de armazenamento em massa para imagens e ajudou os usuários a mover-se rapidamente entre documentos usando a roda de controle do projetor.

Microficha é minha inspiração para um aplicativo de exemplo que exibe jornais da América narrando.O app começa com uma lista de publicações exibida em um GridView.Os usuários podem pesquisar este conteúdo (um aprimoramento da microficha) e examinar uma questão, bem como usando um eReader.A biblioteca do Congresso já construiu um bom aplicativo de Web com recursos robustos de JavaScript.Você pode aprender com este site e traduzir o JavaScript da Web para construir o app Store do Windows.

Eu construí meu app América narrando em JavaScript para Windows 8.1.Para começar, crie um aplicativo de navegação dos modelos de app Store do Windows de JavaScript no Visual Studio.Use o código pré-existente no modelo (por exemplo, o código de navegação em navigator.js) e o manipulador de eventos de ativação de app no js para que você não tem que manualmente construir infra-estrutura do seu aplicativo.

Faz hoje 100 anos...

A homepage América narrando exibe primeiras páginas de jornal para data de hoje há 100 anos.Este é um divertido lugar para começar a minha app e imediatamente apresentar pessoas ao conteúdo.Para começar, eu preciso para se conectar a dados América narrando e puxe.O aplicativo executa muitas funções em torno de seus dados, então na pasta js, criar um novo arquivo JavaScript chamado data.js, onde todas as interações de dados ocorrerá.Pense nisso como minha camada de dados.

Adiciono o seguinte código para data.js para criar uma função independente, porque não quero o código em data.js a vazar no namespace global:

(function () {
  "use strict";
  // Code goes here
})();

Este bloco faz nada dentro dela privada para que eu não encontro qualquer conflito de nomeação variável com arquivos que usam data.js. O comentário, "código vai aqui" é substituído com o código em Figura 1.

Figura 1 código inicial para Data.js

var imageList = new WinJS.Binding.List(); // The image list for binding
var pagesList = new WinJS.Binding.List(); // List of pages for a single issue
var urlPrefix =   "http://chroniclingamerica.loc.gov"; // Used to prefix all URLs
var httpClient =   new Windows.Web.Http.HttpClient(); // Default HTTP client to use
function getInitialPages() {
  // Get the date and set it 100 years ago
  var hundredYearsAgo = new Date();
  hundredYearsAgo.setYear(hundredYearsAgo.getYear() - 100);
  var uri =
    new Windows.Foundation.Uri(urlPrefix + "/frontpages/" +
    hundredYearsAgo.getFullYear() + "-" + hundredYearsAgo.getMonth() + "-" +
    hundredYearsAgo.getDate() + ".json");
  httpClient.getStringAsync(uri)
    .then(
    function c(result) {
      var images = JSON.parse(result);
      images.forEach(function (item) {
        item.medium_url = urlPrefix + item.medium_url;
        item.thumbnail_url = urlPrefix + item.thumbnail_url;
        item.url = urlPrefix + item.url;
        imageList.push(item);
    });
  })
}
// Get function goes here
WinJS.Namespace.define("Data", {
  GetInitialPage: getInitialPages,
  ImageList: imageList,
  PageList: pagesList
});

Figura 1 começa com as declarações básicas de armazenam os dados de chamadas de API de América narrando. Configurar algumas variáveis de tarefas domésticas, tais como um prefixo de URL para evitar digitação (e inevitavelmente mistyping) o URL base do América narrando, bem como um HttpClient objeto para ser compartilhado entre funções.

A primeira função em data.js chama as páginas iniciais de 100 anos atrás. Esta função começa com um simples cálculo para obter a data de hoje e depois subtrai 100 anos. Usando as URLs padronizadas da América narrando, montei uma solicitação ao diretório frontpages da API para carregar todas as primeiras páginas de cada edição correspondente à data fornecida. Observe que a URL termina com JSON para denotar que eu quero de volta do servidor de dados JSON.

A API de América narrando permite que você defina este valor para solicitar diferentes tipos de dados, como XML ou HTML. Usando o httpClient.get­StringAsync função, o aplicativo solicita os dados JSON da API e analisa o valor de seqüência de caracteres retornada em um objeto JSON. Porque eu estou chamando getStringAsync, não sei que tipo de dados está voltando do servidor. Meu app espera JSON, então para verificar os dados, a API retorna pode ser convertida em JSON, eu uso JSON.parse. Isso retorna uma matriz de objetos JSON neste caso. Se a seqüência de caracteres retornada pode ser convertida em JSON, o código gerará um erro. Finalmente, o código atualiza as URLs no item para acrescentar o prefixo (porque narrando América fornece as URLs aqui como URLs relativos, não absolutos) para garantir que meu aplicativo pode se conectar às imagens.

Uma nota sobre o uso de Windows.Web.Http.HttpClient: Sempre plano em caso de falha. Seu código está tentando alcançar o servidor pode ser baixo ou não está disponível, por exemplo. Tratamento de erro foi omitido aqui por questões de brevidade, mas eu incluí-lo no código de exemplo on-line.

No final do código no Figura 1, eu adicionei WinJS.Namespace para registrar o conteúdo de data.js esteja disponível para outros aplicativos. Esta capacidade de namespace converte os objetos particulares em data.js público, acessível por outro código. Usar o WinJS.Namespace.define informa que um app que o objeto definido e os membros estão disponíveis para outras partes do código. Em essência, este é onde você disponibilizar dados e seus membros com IntelliSense em suas páginas.

Ligação para a Home Screen o objeto com os dados definido, você precisa se conectar a página HTML para exibir o conteúdo do site da América narrando. Comece abrindo a página default. html e adicionar uma referência de script para data.js.

Essa etapa faz data.js disponível para todas as páginas no aplicativo. Substitua o código na seção principal do Home. html com o seguinte:

<div id="hundresYearsListView" class="itemslist win-selectionstylefilled"
  aria-label="List of Publications"
  data-win-control="WinJS.UI.ListView" data-win-options=
    "{ selectionMode: 'none', layout: { type:  WinJS.UI.GridLayout } }"></div>

Esse código define um controle ListView que exibe resultados da API do América narrando da pesquisa. O controle ListView usa um modelo com uma imagem de página de jornal e o local de publicação. Usando um controle WinJS.Binding.Template, descrever o que deve aparecer no ListView. Modelos deixem sua equipe de projeto (ou equipe de marketing, se você não tem uma equipe de projeto) trabalhar diretamente com HTML sem se preocupar com a vinculação de dados. Adicione o seguinte diretamente abaixo do corpo < > etiqueta:

<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
  <div class="item">
    <img class="item-image" src="#" data-win-bind=
      "src: thumbnail_url; alt: label" />
    <div class="item-description">
    <h3 class="item-title" data-win-bind="textContent: label"></h3>
    <h4>(<span data-win-bind="textContent: pages"></span> pp.)</h4>
    <h4 class="item-subtitle win-type-ellipsis" data-win-bind="textContent:
      place_of_publication"></h4>
    </div>
  </div>
</div>

Determinar qual propriedade para vincular a qual campo é tratado pelo atributo vitória-vincular dados, que o Windows usa para determinar o que exibir em atributos específicos durante a vinculação. O dataset é um novo atributo em HTML5 que lhe permite construir atributos personalizados para suas necessidades. Apps da loja do Windows fazem uso extensivo do atributo de dados, mas você pode construir seus próprios atributos, tais como publicação de dados neste exemplo, que contém o nome do jornal. Esse atributo pode ser pesquisado usando a função document.querySelector, proporcionando fácil acesso a todos os elementos com esse atributo.

Conexão de dados para o ListView para colocar dados no ListView, abra o arquivo home.js (/ pages/home/home.js) e adicione o código mostrado na Figura 2 à função pronta para o controle de página inicial.

Figura 2 código adicionado à função pronta

ready: function (element, options) {
  // Load the data
  Data.GetInitialPage();
  // Configure the list view
  var hundredYearListView =
     document.getElementById("hundresYearsListView").winControl;
  hundredYearListView.itemDataSource = Data.ImageList.dataSource;
  hundredYearListView.itemTemplate = document.querySelector(".itemtemplate");
  hundredYearListView.oniteminvoked = this._itemInvoked;
  // Process the bindings
    WinJS.Binding.processAll();
},
_itemInvoked: function (args) {
  args.detail.itemPromise.done(function itemInvoked(item) {
  var itemSelected = Data.ImageList.getAt(args.detail.itemIndex);
  WinJS.Navigation.
navigate(
    "/pages/details/details.html", { selectedItem: itemSelected });
  });
}

O código em Figura 2 começa o processo de carregamento de dados da API chamando a função Data.GetInitialPage. Então eu configurar o ListView para buscar dados de ImageList (que é preenchida pela função GetInitialPage) e associar o controle do modelo para o ListView controle. Para encerrar, recursos do controle ListView, para adicionar um manipulador de eventos para ItemInvoked assim quando um usuário clica em uma imagem de jornal, algo acontece. A função pronta termina com uma chamada para WinJS.Binding.processAll para atualizar a interface do usuário baseada em modificações que aconteceu durante a função pronta, como a vinculação de dados.

Em seguida, _itemInvoked é definida para pegar um item selecionado e passá-lo para a página de detalhes de novas acções. Esta é uma operação básica de só passar o objeto de dados diretamente para a página. Tenha em mente o método navigate fornece grande flexibilidade para passar dados de uma página para outra. Para obter mais informações sobre o uso de navegação em aplicativos Windows Store, Confira as amostras na página Windows Dev Center Windows Store apps (bit.ly/153fDXM).

Antes de executar seu aplicativo, adicione os estilos mostrados na Figura 3 para home.css (/ pages/home/home.css) para dar o app um olhar um pouco mais limpo.

Figura 3 estilos para Home.css

.homepage section[role=main] {
  margin-left: 120px;
  margin-right: 120px;
}
.homepage item {
  height: 225px;
  display: block;
  margin-bottom: 5px;
  margin-top: 5px;
  margin-left: 5px;
}
#hundredYearsListView {
  height: 90%;
}

Executar o seu projeto neste momento, e você deve ver algo parecido com Figura 4.

Chronicling America Home Screen
Figura 4 narrando a tela inicial de América

Eu construí uma tela inicial e um pouco de encanamento. O próximo passo é para visualizar as páginas de uma publicação e criar uma tela de detalhes.

Páginas de visualização específicas

Adicionando uma tela de detalhes é simples com a configuração de aplicativo existente. Primeiro, eu preciso adicionar uma nova função para data.js para procurar as páginas de uma edição. Em seguida, eu preciso para construir o Controlarar de página que realmente irá exibir esses dados.

Comece voltando para data.js e substituindo o comentário, "Get função vai aqui," com o código em Figura 5.

Figura 5 obter função para Data.js

function get(url) {
  pagesList.length = 0;
  var uri = new Windows.Foundation.Uri(
    url.replace(/\/seq\-[1-999]{1,3}(\/|\.json)?$/g, ".json"));
  httpClient.getStringAsync(uri)
    .then(
    function complete(result) {
      var editionItem = JSON.parse(result);
      editionItem.pages.forEach(function (item) {
        item.thumbnail_url = item.url.replace(".json", "/thumbnail.jpg");
        item.medium_url = item.url.replace(".json", "/medium.jpg");
        pagesList.push(item);
      })
    })
}

Esse código usa um URL e usa convenções de URL padrão da América narrando para substituir a referência à primeira página (/ 1 seq /) com uma chamada JSON para a edição (convertendo ed/seq-1-1 / a ed-1.json). Para fazer isso, use uma expressão regular que corresponda ao padrão /seq-[número de dígitos de 1-3] / ou seq-[número de dígitos de 1-3] JSON e substituí-lo por apenas JSON. Chamando o objeto da edição JSON, obter informações sobre o assunto e não apenas uma página específica. Eu poderia ir mais longe a URL para obter mais informações sobre a publicação ou problemas em geral, mas por enquanto eu vou ficar com a edição e páginas. Depois de adicionar a função Get, certifique-se de registrá-lo na função WinJS.Namespace.define, como para que outras páginas podem usá-lo para referência.

Criando uma página de detalhes primeiro, sob o diretório de páginas, crie uma pasta chamada "detalhes". Esta pasta irá realizar os três arquivos que compõem um Controlarar de página (os arquivos HTML, JS e CSS). Adicionar um novo item para a pasta, selecione controle de Page (sob a loja do Windows) e nomeie o item details.html. Atualizar agora a marca de corpo de details.html (/ pages/details/details.html) usando o código em Figura 6.

Figura 6 código para Details.html

<div class="listview-itemtemplate"
  data-win-control="WinJS.Binding.Template">
  <div class="item">
    <img class="item-image" src="#" data-win-bind="src: medium_url" />
  </div>
</div>
<div class="details fragment">
  <header aria-label="Header content" role="banner">
    <button data-win-control="WinJS.UI.BackButton"></button>
    <h1 class="titlearea win-type-ellipsis">
      <span class="pagetitle"></span>
    </h1>
  </header>
  <section aria-label="Main content" role="main">
    <div id="flipview" data-win-control="WinJS.UI.FlipView"></div>
  </section>
</div>

Observe que esse código é bastante semelhante ao Home. html, só que eu uso um controle FlipView em vez de um controle ListView. Isso dá o app mais o sentimento de um eReader. Embora eu estou discutindo apenas imagens, narrando América fornece acesso a conteúdo PDF, texto de reconhecimento óptico de caracteres (OCR) e outros tipos de conteúdo para o consumo. Pense sobre como esses tipos diferentes pode adicionar mais profundidade a um app (tais como tecnologias assistivas que contam com recursos de OCR) para um projeto futuro.

O HTML é completo. Agora, vá para o arquivo CSS (/ pages/details/details.css) para adicionar os estilos de limpeza que vão fazer a página parecer decentes:

.details section[role=main] {
  margin-left: 120px;
  margin-right: 120px;
}
#pageListView {
  height: 90%;
  width: 90%;
}
#flipview {
  height: 90%;
  width: 90%;
}

Detalhes de ligação para o FlipView

Abra a página details.js (/ pages/details/details.js) e adicione o seguinte código para a função de pronta do Controlarar de página:

// Step 1: consume the options data
var selectedItem = options.selectedItem;
// Step 2: acquire data for pages
Data.Get(selectedItem.url);
// Step 3: set the page title
var title = document.querySelector(".details .pagetitle");
title.textContent = selectedItem.label;
// Step 4: set up the ListView to display the pages
var fV = document.getElementById("flipview").winControl;
fV.itemDataSource = Data.PageList.dataSource;
fV.itemTemplate = document.querySelector(".flipview-itemtemplate");
WinJS.Binding.processAll();

Este código é o mesmo que home.js, com a exceção de que eu uso options.selectedItem. Este objeto vem da página inicial e é passado para a página de detalhes através da função de navegar. Uso dados do objeto options.selectedItem para chamar Data.Get e preencher o objeto pageList para a ligação com o controle de FlipView. Como o ListView, o FlipView usa um controle de WinJS.Binding.Template para exibir o conteúdo. Eu decidi usar um FlipView porque eu quero exibir apenas uma página de cada vez, e essa página é uma foto. Usar os controles para um FlipView também fornece uma experiência de leitura mais natural para os usuários.

Executar o código, e você deve ver algo como Figura 7.

Sample Details Page
Figura 7 exemplo página de detalhes

Com os detalhes no lugar, há mais um pedaço de embrulhar para o app: capacidade de pesquisa.

Pesquisar conteúdo

A capacidade de Pesquisar o conteúdo do jornal fornece uma ferramenta de grande investigação. É uma melhoria definitiva dos dispositivos microfichas de velhos. Usando OpenSearch, narrando América fornece um recurso de pesquisa poderoso que segue um padrão aberto. Para meu aplicativo, vou procurar contra o conteúdo da página usando os parâmetros de 1.usa.gov/188T1HB.

Começar adicionando uma pasta no diretório páginas chamado "pesquisa". Adicionar um novo item para a pasta de pesquisa e selecione controle de resultados de pesquisa. Para habilitar a pesquisa, você deve adicionar a declaração de busca para seu appmanifest e uma referência para o arquivo searchResults.js para o arquivo default. html. Não há mais a busca do que adicionar alguns arquivos, então se você não estiver familiarizado com o processo de contratos de pesquisa, você pode começar lendo o artigo de Dev Center loja Windows apps em bit.ly/HMtNCo.

O primeiro elemento necessário para construir a capacidade de busca é para adicionar uma nova função de pesquisa para o data.js (/ js/data.js) arquivo. Abra data.js e adicione o código em Figura 8 após a função get.

Figura 8 função de pesquisa

function search(terms) {
  itemList.length = 0; // Clear the list items
  var uri = new Windows.Foundation.Uri(
    urlPrefix + "/search/pages/results/?andtext=" + terms + "&format=json");
  return httpClient.getStringAsync(uri)
    .then(
    function complete(result) {
      var searchList = JSON.parse(result);
      imageList.pop();
      searchList.items.forEach(function (item) {
        item.medium_url = urlPrefix + item.id + "medium.jpg";
        item.thumbnail_url = urlPrefix + item.id + "thumbnail.jpg";
        item.label = item.title;
        imageList.push(item);
      })
  })
}

Esta simples função leva a termos de pesquisa e constrói fora o URI para trabalhar com o URL da página de pesquisa. O parâmetro de andtext permite que você fornecer os termos de pesquisa para usar para o conteúdo da página, mas lembre-se de verificar o arquivo XML de definição de Pesquisar por mais parâmetros que poderiam ser usados. Para completar o data.js, adicionar busca como um item no namespace então aquele searchResults.js (/ pages/search/searchResults.js) pode acessá-lo.

Modificando o controle de resultados de pesquisa quando você adicionar o item, são criados três arquivos (apenas como com um Controlarar de página): um arquivo HTML para exibir seus resultados, um arquivo CSS para modelar seus resultados e um arquivo JavaScript para seus resultados de ligação. Atualizar o arquivo de searchResults.html primeiro, substituindo o itemtemplate para coincidir com o modelo de dados, conforme mostrado no Figura 9.

Figura 9 atualização SearchResults.html

<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
  <div class="item">
    <img class="item-image" src="#" data-win-bind=
      "src: backgroundImage; alt: title" />
    <div class="item-content">
      <h3 class="item-title win-type-x-small win-type-ellipsis"
        data-win-bind="innerHTML: title searchResults.markText"></h3>
      <h4 class="item-subtitle win-type-x-small win-type-ellipsis"
        data-win-bind="innerHTML: publisher searchResults.markText"></h4>
      <h4 class="item-description win-type-x-small win-type-ellipsis"
        data-win-bind="innerHTML:
        place_of_publication searchResults.markText"></h4>
    </div>
  </div>
</div>

Agora abra o arquivo searchResults.js. Este arquivo tem um número de funções nele, mas a maioria das alterações feitas são para a função de _searchData. Substitua o código para _searchData com o código mostrado na Figura 10.

Figura 10 código para _searchData

_searchData: function (queryText) {
  var results;
  if (window.Data) {
    Data.Search(queryText).done(
      function complete(result) {
        if(Data.ImageList.length > 0)
          document.querySelector('.resultsmessage').style.display = "none";
      });
    results = Data.ImageList.createFiltered(function (item) {
      return ((item.title !== undefined && item.title.indexOf(queryText) >= 0)
        || (item.publisher !== undefined && item.publisher.indexOf(queryText)
        >= 0) || (item.place_of_publication !== undefined &&
        item.place_of_publication.indexOf(queryText) >= 0));
    });
  } else {
    results = new WinJS.Binding.List();
  }
  return results;
}

Se você comparar este código para o código que foi gerado, você verá que tudo que fiz foi atualizar o modelo de dados do item do objeto para refletir os componentes e adicionar alguma funcionalidade para ocorrer após concluir a função Data.Search. Usando o código Pre-generated, você pode obter um app assim ao mercado mais rapidamente. Você pode se concentrar em criar as características específicas de seus apps e não preciso ligar separadamente cada peça sempre.

Antes de executar o código, atualize a função de _generateFilters de filtro em searchResults.js para refletir o modelo de dados. Por padrão, dois filtros são adicionados para grupos. Atualize-os para ser algo mais útil para o modelo de dados such as um filtro em valores de cidade de publicação. Com este trabalho concluído, você deve ser capaz de executar seu código e ver algo similar Figura 11.

The Search Results Screen for the Chronicling America App
Figura 11 os resultados da pesquisa de tela para o App de América Chronicling

Para encerrar a tela de pesquisa, você precisa exibir os detalhes de um artigo para ver suas páginas. Atualizar a função de _itemInvoked em pesquisa­Results.js (/ pages/search/searchResults.js) com o seguinte código:

_itemInvoked: function (args) {
  args.detail.itemPromise.done(function itemInvoked(item) {
  var searchResult = originalResults.getAt(args.detail.itemIndex);
  WinJS.Navigation.
navigate(    "/pages/details/details.html",
    { selectedItem: searchResult });
  });
},

Este código captura o item de resultado de pesquisa selecionado e passa para a página de detalhes. O WinJS.Navigation. navegar função pode tomar dois argumentos: o endereço da página e uma declaração de estado inicial. Usando o objeto de initialState, você pode passar parâmetros de uma tela para o próximo. Neste caso, a função de navegar passa o objeto selecionado searchResult para a página de detalhes como antigamente o selectedItem da homepage.

Microfilme para o século XXI

Narrando a América arquivos de jornais históricos e os disponibiliza através de uma API simples. Neste artigo, eu explorei os principais recursos de serviço Web e como consumi-lo em uma loja de Windows app usando alguns controles básicos. 8.1 Do Windows fornece muitas oportunidades para você ser criativo e repensar como as pessoas interagem com a tecnologia.

Neste caso, eu levei o que teria sido uma folha de imagens de jornal e transformou em um app interativo e moderno. Você pode estender este exemplo para compartilhar e armazenar as configurações do usuário pesquisa personalizada com base em seus interesses — e isto é apenas a ponta do iceberg. A biblioteca do Congresso e a doação nacional para as ciências humanas têm fornecido uma rica API para construir. Você pode adicionar esses dados históricos para seu livro de receitas para a construção de grandes apps.

Depoimento: Experiência envolvente, habilidades reutilizáveis

Loja Windows aplicativos permitem que você liberte a sua criatividade com dados. Neste app, você pode explorar informações jornal histórico que poderiam ser usadas para pesquisa, educação ou outras investigações históricas. Através de uma API de mídia rica e codificação de JavaScript simples, combinar América narrando com 8.1 do Windows fornece uma maneira fácil de construir uma experiência profundamente envolvente.

É breve:

Neste artigo, dados são retirados de uma API e procurou, e o conteúdo é explorado — tudo através da reutilização de um conjunto de habilidades. Uma experiência envolvente é criada através da reutilização de código e uma API de mídia rica.

  • Envolver os membros da equipe de desenvolvimento usando suas habilidades existentes para criar experiências ricas para os usuários.
  • Envolver os usuários conectando-se aos recursos de charme Windows 8.1 como pesquisa.
  • Proporcionar uma nova visão de uma tecnologia antiga como um diferencial de mercado.

Resumo da dev:

Desenvolvimento é um exercício criativo e apps da loja do Windows lhe dar muita liberdade. Neste artigo, uma tecnologia retro é reimagined e um conjunto de habilidades (ListView e Windows.Web.Http.HttpClient) é reutilizado para construí-lo para fora. Integração do aplicativo com recursos de pesquisa permite que os usuários para explorar a app do conteúdo de qualquer lugar no Windows 8.1.

  • Encadeamento de promessas para criar fluxos de trabalho do código assíncrono.
  • Reutilizando habilidades de ListView para controles de FlipView.
  • Usando os recursos de protótipo JavaScript para estender dinamicamente objetos.

Mais informações:

Tim Kulp lidera a equipe de desenvolvimento na UnitedHealthcare internacional em Baltimore. Você pode encontrar Kulp em seu blog em seccode.blogspot.com ou no Twitter em twitter.com/seccode, onde ele fala de código, segurança e a cena foodie de Baltimore.

Agradecemos ao seguinte especialista técnico pela revisão deste artigo: Eric Schmidt (Microsoft)
Eric Schmidt é desenvolvedor de conteúdo em equipe de conteúdo do desenvolvedor de Windows da Microsoft, escrevendo sobre a biblioteca de Windows para JavaScript (WinJS). Quando anteriormente na divisão de Microsoft Office , construiu-se amostras de código para os aplicativos para a plataforma Office. Caso contrário, ele passa o tempo com sua família, toca Contrabaixo, compilações de jogos de vídeo HTML5, ou blogs sobre construção de brinquedos de plástico (http://historybricks.com/).