---

2017 年 2 月

第 32 卷，第 2 期

本文章是由機器翻譯。

現代化應用程式 - 可搜尋 Twitter 的公用程式

由Frank La La

在我的專欄上個月，我探討了絕佳通用 Windows 平台 (UWP) 社群的工具組，為社群建置由社群開放原始碼工具組。不過，我大略它可以做什麼。UWP 社群工具組讓建置高度定域機組供電 UWP 應用程式更容易、 更快。在本月的專欄中，我將討論如何建置使用 Twitter 服務和分頁控制項來示範使用的是多麼的 Twitter 搜尋應用程式。

目前，我管理數個 YouTube 頻道標示特定的雜湊標記推文的來源內容。例如，#DCTech 分鐘著重於 DC 區域的啟動和技術場景中發生。我發現反白顯示的內容會根據使用 DCTech 雜湊標記推文。如 #Node.js 分鐘，我用來做相同標示 #Node.js 推文。目前，我很多手動剪下和貼上 Twitter 和 OneNote 之間。它有多好可以搜尋所有關鍵片語我需要全都放在一個視窗，輕鬆地從提取內容推文的 Twitter 的 UWP 應用程式。

設定專案

Visual Studio 中建立新的空白 UWP 專案，從 [檔案] 功能表選擇新的專案。依序展開 [已安裝的範本 |Windows |空白的應用程式 (Windows 通用)。將專案命名為 TagSearcherUWP，然後按一下 [確定]。立即之後，會出現對話方塊，詢問您的應用程式應將目標設的 Windows 版本。至少，您必須選擇 Windows 10 週年紀念日等版本 (10.0;建置 14393）。這是最新版本。因此，目標版本和最小版本將同時做為目標相同的版本中所示**[圖 1**。如果您沒有看到這個任一個下拉式清單中的特定版本，請確定您有適當的軟體安裝在您的系統上。Microsoft.Toolkit.Uwp.UI.Controls NuGet 封裝加入專案後，無法選取正確的版本將會產生執行階段錯誤。 

[圖 1 Windows 正確版為目標

方案載入後，瀏覽至 [方案總管] 中，然後參考上按一下滑鼠右鍵並選擇 [管理 NuGet 封裝，從內容功能表，以顯示 [NuGet 封裝管理員。在 [搜尋] 方塊中，輸入 「 Microsoft.Toolkit.Uwp 」，以帶出 UWP 社群工具組相關聯的所有 NuGet 封裝。此專案將使用的 Microsoft.Toolkit.Uwp.Services 和 Microsoft.Toolkit.Uwp.UI.Controls 套件。安裝這兩個以將它們加入至專案。如果出現提示時檢閱的變更] 對話方塊，請檢閱所做的變更，然後按一下 [確定] 以接受。您也會看到每個套件接受授權] 對話方塊。按一下 [我接受] 以接受授權條款。按一下 [我拒絕]，將會取消安裝。

Twitter 設定

專案設定適當的 NuGet 封裝，它 ' 將應用程式連接到 Twitter 服務的時間。移至apps.twitter.com並以您的 Twitter 帳戶登入。如果您沒有 Twitter 帳戶，您應該現在要其中一個。如果您尚未建立 Twitter 應用程式，您必須按一下 [建立新的應用程式註冊新的應用程式。

您必須填妥應用程式，例如名稱、 描述、 網站和回呼 URL 的相關詳細資料。您可以填寫欄位，如您所願。做為名稱，我選擇 MSDNTagSearchUWPApp。使用者將會看到的描述文字登入，因此最好能夠簡短和描述性。請參閱**[圖 2**指導方針。針對網站和回呼欄位，我將放在我的網站 URL。若是 UWP 應用程式中，回呼 URL 不一定要使用 URL。當您稍後它登入服務時，請記下 URL。檢查開發人員合約旁邊的核取方塊，然後按一下 [建立您的 Twitter 應用程式] 按鈕。

[圖 2 建立新的 Twitter 應用程式

應用程式建立之後，按一下 [金鑰和存取權杖] 索引標籤上，並記下的取用者金鑰 （API） 和消費者密鑰 （API 密鑰） 欄位中所示**[圖 3**。您將短時間內使用它們。

[圖 3] 索引標籤消費者金鑰和存取權杖

建立 UI

開啟 MainPage.xaml 檔案，並加入 XAML 中的**[圖 4**。請注意，UWP 社群工具組中的控制項加入命名空間。這是 BladeView 控制項所在的位置︰

[圖 4 XAML 程式碼，來建立的介面

<Page
  x:Class="TagSearcherUWP.MainPage"
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:TagSearcherUWP"
  xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
  xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
  xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d">
  <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
      <RowDefinition Height="56*"/>
      <RowDefinition Height="35*"/>
      <RowDefinition Height="549*"/>
    </Grid.RowDefinitions>
    <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
      <TextBlock FontSize="24" Margin="5">Twitter Tag Searcher</TextBlock>
      <Button Name="btnLogin" Click="btnLogin_Click" >Log In</Button>
    </StackPanel>
    <StackPanel Name="splSearch" Grid.Row="1"  Orientation="Horizontal"
      VerticalAlignment="Center" Visibility="Collapsed">
      <TextBox Name="txtSearch" Margin="5,0,5,0"  MinWidth="140" Width="156" />
      <Button Name="btnSearch" Click="btnSearch_Click">Search</Button>
    </StackPanel>
    <controls:BladeView Name="bladeView" Grid.Row="2" Margin="12"
      HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
      <controls:BladeItem x:Name="DummyBlade" IsOpen="False" />
    </controls:BladeView>
  </Grid>
</Page

簡介 BladeView 控制項

BladeView 控制項看起來很熟悉 Azure 入口網站的使用者 (portal.azure.com)。如果您已經熟悉它，BladeView 控制項提供容器主機 「 分頁 」 或磚。中的 XAML [圖 4包含 「 DummyBlade 」，防止 XAML 設計工具檢視當機。如果遇到不含任何 BladeItems BladeView，它會擲回例外狀況。因為 IsOpen 屬性設定為 False，使用者永遠不會看到 BladeItem。

登入 Twitter

接下來，應用程式連接到 Twitter API 加 btnLogin_Click 事件的下列事件處理常式︰

private async void btnLogin_Click(object sender, RoutedEventArgs e)
  {
    string apiKey = "pkfAUvqfMAGr53D4huKOzDYDP";
    string apiSecret =
      "bgJCH9ESj1wraCoHBI5OqEqhkac1AOZxujqvnCWKNRJgBMhyPG";
    string callbackUrl = "http://www.franksworld.com";
    TwitterService.Instance.Initialize(apiKey, apiSecret, callbackUrl);
    if (await TwitterService.Instance.LoginAsync())
    {
      splSearch.Visibility = Visibility.Visible;
    }
  }

程式碼會使用 API 金鑰、 API 密碼和回呼 URL 的欄位，並使用它們在 TwitterService.Instance 的 Initialize 方法的參數。TwitterService.Instance 是一個 singleton，將維護整個應用程式的狀態。呼叫 LoginAsync 方法起始 Twitter API 的呼叫。如果登入成功，則方法會傳回 true。在此情況下，您應該要使用搜尋控制項的 StackPanel 可見。

顯示搜尋結果

設定的 Twitter API 呼叫，就建立一個位置以顯示搜尋結果的時間。若要這樣做，您將建立使用者控制項。使用者控制項將包含執行 Twitter API 的搜尋，以及裝載所需的控制項，以顯示搜尋結果的程式碼。

若要開始，以滑鼠右鍵按一下專案，然後選擇 [加入 |在內容功能表中的新項目。在下列對話方塊中，尋找使用者控制項。將使用者控制項 SearchResults 和按一下 [新增] 所示**[圖 5**。

[圖 5 將新的使用者控制項加入至專案

修改 SearchResults.xaml 檔案，以加入 XAML 中找到**[圖 6**。

[圖 6 SearchResults 使用者控制項的 XAML

<Grid>
  <ListView Name="lvSearchResults" Width="350" >
  <ListView.ItemTemplate>
    <DataTemplate>
      <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="0,4,4,0">
        <Image Source="{Binding User.ProfileImageUrl}" Width="64"
          Margin="8"  ></Image>
          <StackPanel Width="240">
            <TextBlock Text="{Binding Text}"
              TextWrapping="WrapWholeWords"></TextBlock>
            <TextBlock Text="{Binding CreationDate}"
              FontStyle="Italic" ></TextBlock>
            <TextBlock Text="{Binding User.ScreenName}"
              Foreground="Blue"></TextBlock>
            <TextBlock Text="{Binding User.Name}"></TextBlock>
          </StackPanel>
        </StackPanel>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>
</Grid>

XAML 包含 ListView 和必要的 DataTemplate 顯示 Twitter 搜尋結果。開啟 SearchResults.xaml.cs 檔案，並搜尋結果類別中新增下列屬性︰

public string SearchTerm { get; private set; }

然後，修改搜尋的字詞加入字串參數的建構函式︰

public SearchResults(string searchTerm)
{
  this.InitializeComponent();
  this.SearchTerm = searchTerm;
  Search();
}

現在，新增下列方法︰

private async void Search()
  {
    lvSearchResults.ItemsSource = await  
    TwitterService.Instance.SearchAsync(this.SearchTerm, 50);
  }

Search 方法呼叫 SearchAsync 方法具有兩個參數︰ 搜尋詞彙，並傳回結果的限制。所有基礎的 REST API 配管工作都是 UWP 社群工具組。  

既然 SearchResults 使用者控制項已準備就緒，就完成應用程式的 MainPage.xaml.cs 檔案中加入程式碼的時間。新增下列事件處理常式，如 btnSearch 按鈕控制項︰

private void btnSearch_Click(object sender, RoutedEventArgs e)
  {
    BladeItem bi = new BladeItem();
    bi.Title = txtSearch.Text;
    bi.Content = new SearchResults(txtSearch.Text);
    bladeView.Items.Add(bi);
  }

BladeView 控制項可以包含任意數目的 BladeItems。上述程式碼片段會建立 BladeItem 控制項，並設定 BladeItem 標題的文字，從 [搜尋] 文字方塊。接下來，它將的搜尋詞彙傳遞至建構函式的 SearchResults 使用者控制項的新執行個體設定 BladeItem 控制項的內容。最後，將會加入 BladeItem BladeView。

現在就執行方案。按一下 [登入] 按鈕。出現提示時，輸入您的 Twitter 認證，並要求提供權限授與應用程式。將會關閉視窗和 [搜尋] 面板就會變成可見。輸入幾個搜尋詞彙之後, 您的畫面應該看起來像**[圖 7**。

[圖 7 標記搜尋應用程式的運作

加入複本函式

您已經有您感興趣整齊地依刀鋒視窗中的推文時，您需要在文字格式取得資料的方法。理想情況下，您將想要能夠以滑鼠右鍵按一下 （或觸控螢幕裝置上點選，） 而推文的內容複製到剪貼簿。加入這項功能需要 SearchResults 使用者控制項的 XAML 和程式碼部分修改。

在 SearchResults.xaml 檔案中，您想要加入至 ListView 控制項的延伸顯示功能表。ListView 標記內加入下列 XAML 來建立 MenuFlyout 為 ListView 控制項中的資源︰

<ListView.Resources>
  <MenuFlyout x:Name="mfCopyMenu">
    <MenuFlyout.Items>
      <MenuFlyoutItem Name="mfiCopy" Text="Copy" Click="mfiCopy_Click"/>
    </MenuFlyout.Items>
  </MenuFlyout>
</ListView.Resources>

雖然仍在 SearchResults.xaml 檔案中新增下列事件處理常式至 ListView 控制項，以偵測 ListView 是以滑鼠右鍵按一下或點選︰

RightTapped="lvSearchResults_RightTapped"

現在 SearchResults.xaml.cs 檔案中新增下列事件處理常式程式碼︰

private void lvSearchResults_RightTapped(object sender, 
  RightTappedRoutedEventArgs e)
{
  var tweet = ((FrameworkElement)e.OriginalSource).DataContext;
  mfiCopy.Tag = tweet;
  mfCopyMenu.ShowAt(lvSearchResults, 
    e.GetPosition(lvSearchResults));
}

此程式碼的目的是擷取 DataContext 的推文物件，並將它儲存成 MenuFlyoutItem 標記屬性。Tag 屬性繼承自 FrameworkElement，而是儲存自訂物件的相關資訊。一旦選取推文物件儲存在 MenuFlyoutItem 的 Tag 屬性，就顯示延伸顯示功能表的時間。使用者期望他們按一下或點選螢幕上會出現內容功能表。這就是為什麼 ShowAt 方法的程式碼會傳送的事件位置資訊。

現在就加入事件處理常式的 MenuFlyoutItem 控制項和程式碼，以將推文的內容複製到剪貼簿。SearchResults.xaml.cs 檔案中加入下列事件處理常式︰

private void mfiCopy_Click(object sender, RoutedEventArgs e)
{
  var menuFlyoutItemSender = (MenuFlyoutItem)sender;
  var tweet = menuFlyoutItemSender.Tag as Tweet;
  DataPackage dataPackage = new DataPackage();
  dataPackage.RequestedOperation = DataPackageOperation.Copy;
  dataPackage.SetText($"@{tweet.User.ScreenName} {tweet.Text} ");
  Clipboard.SetContent(dataPackage);
}

前兩行程式碼從 MenuFlyoutItem 的 Tag 屬性擷取推文資料。一旦取得的就將資料傳送到剪貼簿的時間。UWP 應用程式，這是由使用 DataPackage 類別。DataPackage 類別的完整探勘已超出本專欄的範圍不過，如果您有興趣進一步了解更多資訊，建議您閱讀 「 複製和貼上 」 文件頁面，在bit.ly/2h54IK0。「 DataPackage 類別 」 文件頁面位於bit.ly/2hpo2Fc。

剪貼簿可以穩固的格式化文字和影像的控制代碼。不過，如本專欄中，我想要只在推文的文字內容和 Twitter 的控制代碼進行它的人員。UWP 社群工具組將其儲存為 e，使用者物件中。最後，我可以將剪貼簿內容設 DataPackage 物件。

現在就執行方案，登入，並輸入搜尋字詞。尋找您想要複製、 以滑鼠右鍵按一下或點選以查看內容功能表中，為 shownin 推文**[圖 8**。按一下 [複製]。

[圖 8 測試複製內容功能表上的函數範例推文

現在，執行 [記事本] 或您偏好的文字編輯器] 中，然後選擇 [編輯 |貼上或使用 Ctrl + V。您應該會看到這個推文文字︰ @AndyLeonard 我兄弟和 Frank La Vigne 的朋友，以讀取 「 把惡意 」。:{> https://t.co/JnuAzqO6m5。

總結

如您所見，UWP 社群工具組有助於快速開發連接定域機組的 UWP 應用程式。只花了一行程式碼能夠登入 Twitter。搜尋 Twitter 是同樣簡單。大多數的程式碼有多個要處理資料，以及使用者如何與它互動的呈現方式。UWP 社群工具組提供豐富的 UI 控制項，以及簡單明瞭的方式來存取受歡迎的雲端 Api，例如 Twitter。低層級的 REST API 和驗證機制非常抽象清除啟用 IntelliSense 的 api。這可讓開發人員專注於使用者互動的資料，而不是取得資料的方式。UWP 社群工具組可以讓任何 UWP 應用程式，更好而且更容易連接到社交媒體和其他雲端服務。

---

Frank La Vigne是獨立的顧問，他可以協助客戶充分利用技術，以便建立更好的社群。 定期在他的部落格FranksWorld.com和已製作成 YouTube 頻道呼叫的 Frank 世界電視 (FranksWorld.TV)。

感謝閱本篇文章的下列技術專家︰ David Catuhe