---

Februar 2017

Band 32, Nummer 2

Dieser Artikel wurde maschinell übersetzt.

Moderne Apps: Hilfsprogramm für die Suche in Twitter

Durch Frank La La

In meinem Artikel wurde untersucht, im letzten Monat ich das hervorragende universelle Windows-Plattform (UWP) Community-Toolkit, ein open-Source-Toolkit, die von der Community für die Community erstellt. Allerdings oberflächlich ich kaum vorgehen können. Mit dem UWP-Community-Toolkit ist sehr ansprechende, cloudbasierter UWP-apps viel einfacher und schneller zu erstellen. Im Artikel dieses Monats erläutere ich, zum Erstellen einer Twitter-Suchanwendung, die mit der Twitter-Dienste und das Blatt-Steuerelement um zu veranschaulichen, wie einfach es ist, verwenden.

Derzeit verwalten ich mehrere YouTube-Kanäle, die Quellinhalt von Tweets mit bestimmten Hashtags markiert. Z. B. Vordergrund #DCTech Minute der Geschehnisse in der Szene DC-Bereich, Start- und Technologie. Ich finde Tweets Inhalt markieren abhängig, die das Hashtag DCTech verwenden. Für #Node.js Minute kann ich die gleiche mit Tweets mit #Node.js gekennzeichnet. Derzeit kann ich viel manuelle Ausschneiden und Einfügen zwischen Twitter und OneNote. Praktisch wäre, eine UWP app verfügen, die ich in einem Fenster benötigen, und ziehen Sie den Inhalt von Tweets erleichtern die Schlüsselausdrücke Twitter suchen können.

Einrichten des Projekts

Erstellen Sie ein neues, leeres UWP-Projekt in Visual Studio, indem Sie „Neues Projekt“ aus dem Menü „Datei“ auswählen. Erweitern Sie die installierten Vorlagen | Windows | Leere App (universelle Windows). Nennen Sie das Projekt TagSearcherUWP, und klicken Sie dann auf OK. Unmittelbar danach wird ein Dialogfeld angezeigt, gefragt werden, welche Version von Windows die app als Ziel. Zumindest müssen Sie Windows 10 Jahrestag Edition (10.0; auswählen Build 14393). Dies ist die neueste Version. Daher die Zielversion und die Mindestversion wird sowohl als Ziel die gleiche Version, siehe Abbildung 1. Wenn diese Version in einer Dropdown-Liste nicht angezeigt wird, stellen Sie sicher, dass Sie die entsprechende Software auf Ihrem System installiert haben. Wählen Sie die richtige Version, führt dies zu einen Laufzeitfehler sich, sobald das Microsoft.Toolkit.Uwp.UI.Controls NuGet-Paket zum Projekt hinzugefügt wird. 

Abbildung 1 für die richtige Version von Windows

Wenn die Projektmappe geladen ist, navigieren Sie zum Projektmappen-Explorer, und klicken Sie dann mit der rechten Maustaste auf Verweise, und wählen Sie NuGet-Pakete verwalten aus dem Kontextmenü die NuGet-Paket-Manager angezeigt. Geben Sie in das Suchfeld "Microsoft.Toolkit.Uwp", um alle zugeordneten UWP-Community-Toolkit NuGet-Pakete anzuzeigen. Dieses Projekt wird die Microsoft.Toolkit.Uwp.Services und Microsoft.Toolkit.Uwp.UI.Controls-Pakete verwenden. Installieren Sie beide, um sie dem Projekt hinzufügen. Wenn ein Dialogfeld Änderungen überprüfen Sie dazu aufgefordert werden, überprüfen Sie die Änderungen, und klicken Sie dann auf OK, um zu akzeptieren. Außerdem sehen Sie ein Dialogfeld zum Akzeptieren der Lizenz für jedes Paket. Klicken Sie auf "Ich stimme zu", dem Lizenzvertrag zu akzeptieren. Klicken Sie auf "Ich stimme" wird die Installation abgebrochen.

Einrichten von Twitter

Nun, dass das Projekt mit der entsprechenden NuGet-Pakete eingerichtet ist es "die app mit dem Twitter-Dienst zu verbinden. Wechseln Sie zu apps.twitter.com und melden Sie sich mit Ihrem Twitter-Konto. Wenn Sie eine Twitter-Konto haben, sollten Sie eine jetzt aktivieren. Wenn Sie eine Twitter-App erstellt haben, müssen Sie klicken auf neue App erstellen, um eine neue app zu registrieren.

Sie müssen zum Ausfüllen von Details zur app, wie z. B. Name, Beschreibung, Website und Rückruf-URL. Sie können die Felder ausgefüllt werden soll. Für den Namen der entschied ich mich MSDNTagSearchUWPApp. Endbenutzern wird der Beschreibungstext finden Sie unter bei der Anmeldung, daher ist es am besten, eine kurze und beschreibenden. Finden Sie unter Abbildung 2 Anleitung. Für die Website und die Rückruf-Felder habe ich in meiner Website-URL. Im Fall von UWP-apps die Rückruf-URL muss keine arbeiten URL zu sein. Notieren Sie sich die URL an, wie Sie es bei der Anmeldung an den Dienst später benötigen werden. Aktivieren Sie das Kontrollkästchen neben der Vereinbarung für Entwickler, und klicken Sie auf die Schaltfläche Ihrer Twitter-Anwendung erstellen.

Abbildung 2: Erstellen einer neuen Twitter-Anwendung

Sobald die app erstellt wurde, klicken Sie auf die Schlüssel und Zugriffstoken Registerkarte, und beachten Sie die Consumer Key (API-Schlüssel) und Consumer Secret (API Secret) Felder, siehe Abbildung 3. Sie werden in Kürze verwenden werden.

Abbildung 3: der Consumer Key und Access Token-Registerkarte

Erstellen der Benutzeroberfläche

Öffnen Sie die Datei "MainPage.xaml", und fügen Sie XAML im Abbildung 4. Beachten Sie, dass ein zusätzlicher Namespace für die Steuerelemente im Toolkit-Community UWP vorhanden ist. Dies wird sich das BladeView befindet:

Abbildung 4 XAML-Code, um die Schnittstelle zu erstellen.

<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

Einführung in das BladeView-Steuerelement

Das BladeView-Steuerelement wird Benutzern der Azure-Portal-Website vertraut aussehen (portal.azure.com). Wenn Sie damit nicht vertraut sind, stellt das Steuerelement BladeView einen Container auf Host "Blätter" oder Kacheln. Das XAML in Abbildung 4 enthält ein "DummyBlade", um zu verhindern, dass die XAML-Designer-Ansicht abstürzt. Findet ein BladeView ohne jede BladeItems wird eine Ausnahme ausgelöst. Da die IsOpen-Eigenschaft auf "False" Benutzer festgelegt ist, wird die BladeItem niemals angezeigt.

Anmeldung bei Twitter

Verbinden Sie anschließend die app mit der Twitter-API, durch den folgenden Ereignishandler für das Ereignis BtnLogin_Click hinzufügen:

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;
    }
  }

Der Code verwendet die API-Schlüssel, API Secret und Rückruf-URL-Felder und in den Parametern der Initialize-Methode von der TwitterService.Instance verwendet. TwitterService.Instance ist ein Singleton, der Status in der gesamten Anwendung beibehält. Die LoginAsync-Methode initiiert den Aufruf der Twitter-API. Wenn die Anmeldung erfolgreich ist, gibt die Methode true zurück. In diesem Fall sollten Sie den StackPanel mit Steuerelemente für die Suche sichtbar machen.

Anzeigen von Suchergebnissen

Mit der Twitter-API-Aufrufe einrichten ist es Zeit, erstellen einen Ort für die Suchergebnisse angezeigt werden. Zu diesem Zweck erstellen Sie ein Benutzersteuerelement. Das Benutzersteuerelement enthält Code, um die Twitter-API-Suche durchführen als auch host die erforderlichen Steuerelemente, um die Suchergebnisse anzuzeigen.

Informationen zum Einstieg mit der rechten Maustaste auf das Projekt, und wählen Sie hinzufügen | Neues Element im Kontextmenü. Suchen Sie im folgenden Dialogfeld für das Benutzersteuerelement. Nennen Sie das Benutzersteuerelement Suchergebnisse, und klicken Sie auf Hinzufügen, wie in Abbildung 5.

Abbildung 5: Hinzufügen eines neuen Benutzersteuerelements zum Projekt

Ändern Sie die Datei SearchResults.xaml finden Sie in XAML hinzufügen Abbildung 6.

Abbildung 6 XAML für das Benutzersteuerelement SearchResults

<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>

Der XAML-Code enthält ein ListView-Steuerelement und die erforderlichen DataTemplate zum Anzeigen der Ergebnisse der Twitter-Suche. Öffnen Sie die Datei SearchResults.xaml.cs, und fügen Sie die folgende Eigenschaft zur Klasse Suchergebnisse:

public string SearchTerm { get; private set; }

Ändern Sie dann den Konstruktor, um einen Parameter für den Suchbegriff hinzufügen:

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

Nun fügen Sie die folgende Methode hinzu:

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

Die Search-Methode ruft die SearchAsync-Methode mit zwei Parametern: den Suchbegriff und die Beschränkung der zurückzugebenden Ergebnisse. Alle zugrunde liegenden REST-API grundliegende Arbeit erfolgt durch das UWP-Community-Toolkit.  

Nun, dass das Benutzersteuerelement SearchResults bereit ist, ist es Zeit zum Hinzufügen von Code zu der Datei "MainPage.Xaml.cs" zum Vervollständigen der app. Fügen Sie den folgenden Ereignishandler für die Schaltfläche Suchen Button-Steuerelement:

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);
  }

Das BladeView-Steuerelement kann eine beliebige Anzahl von BladeItems enthalten. Der vorherige Codeausschnitt erstellt ein BladeItem-Steuerelement und den Titel der BladeItem auf den Text aus dem Textfeld ' Suche ' festgelegt. Als Nächstes wird der Inhalt des Steuerelements BladeItem auf eine neue Instanz der SearchResults-Benutzersteuerelement, den Suchbegriff aus an den Konstruktor übergeben. Abschließend hinzugefügt der BladeItem der BladeView.

Führen Sie die Lösung jetzt aus. Klicken Sie auf die Schaltfläche anmelden. Wenn Sie aufgefordert werden, geben Sie Ihre Twitter-Anmeldeinformationen, und erteilen Sie der app die Berechtigungen, denen sie angefordert werden. Das Fenster wird geschlossen, und im Suchbereich werden nun angezeigt. Geben Sie einige Suchbegriffe, sollte am Bildschirm etwa Abbildung 7.

Abbildung 7: die Tag-Suche-App in Aktion

Hinzufügen der Copy-Funktion

Nun, dass Sie alle Tweets, die Sie interessiert ordentlich Blatt geordnet haben sind, benötigen Sie eine Möglichkeit zum Abrufen der Daten in ein Textformat. Im Idealfall würde Sie gerne mit der rechten Maustaste (oder tippen Sie auf, wenn auf einem Touchscreen-Gerät) und den Inhalt des TWEETS in die Zwischenablage kopieren. Das Hinzufügen von dieses Feature erfordert eine Änderung an der XAML und Code für das Benutzersteuerelement SearchResults.

In der Datei SearchResults.xaml möchten Sie ein Dropdown-Menü auf das ListView-Steuerelement hinzufügen. Fügen Sie den folgenden XAML-Code zum Erstellen einer MenuFlyout als Ressource in das ListView-Steuerelement in das ListView-Tag hinzu:

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

Fügen Sie den folgenden Ereignishandler auf das ListView-Steuerelement zu erkennen, wenn "ListView" mit der rechten Maustaste oder getippt wird, noch in der Datei SearchResults.xaml:

RightTapped="lvSearchResults_RightTapped"

Nun fügen Sie den folgenden Ereignishandlercode in der Datei SearchResults.xaml.cs hinzu:

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

Dieser Code dient der Tweet-Objekt aus dem DataContext erfassen und speichern es in die MenuFlyoutItem Tag-Eigenschaft. Die Tag-Eigenschaft dient wird von FrameworkElement geerbt und zum Speichern von benutzerdefinierten Informationen zu einem Objekt. Sobald die ausgewählten Tweet-Objekt in die Tag-Eigenschaft der MenuFlyoutItem gespeichert ist, ist es Zeit, bis das Dropdown-Menü angezeigt. Benutzer erwarten, dass ein Kontextmenü angezeigt werden, wenn sie geklickt haben, oder tippen auf dem Bildschirm. Deshalb ist der Code sendet Ereignisinformationen Position an die ShowAt-Methode.

Jetzt ist es Zeit zum Hinzufügen des Ereignishandler für das MenuFlyoutItem-Steuerelement und den Code, um den Inhalt des TWEETS in die Zwischenablage zu kopieren. Fügen Sie der SearchResults.xaml.cs-Datei den folgenden Ereignishandler hinzu:

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);
}

Die ersten beiden Codezeilen die Tweet-Daten aus der Tag-Eigenschaft, der die MenuFlyoutItem abgerufen. Sobald, die abgerufen wurde, ist es Zeit zum Senden von Daten in die Zwischenablage. Im UWP-apps wird dies mithilfe der Klasse "DataPackage". Eine vollständige Beschreibung der Klasse "DataPackage" ist über den Rahmen dieses Artikels hinaus. jedoch wenn Sie mehr erfahren möchten, empfehle ich beim Lesen der "Kopieren und Einfügen"-Dokumentationsseite auf bit.ly/2h54IK0. "DataPackage" Klassendokumentation ist bit.ly/2hpo2Fc.

Die Zwischenablage bewältigen stabile Formatierung von Text und Bildern. Ich bin jedoch für diesen Artikel interessiert nur der Textinhalt des TWEETS und das Twitter-Handle für die Person, die sie vorgenommen. Das UWP-Community-Toolkit speichert, die als Bildschirmname innerhalb des User-Objekts. Schließlich legen Sie den Inhalt der Zwischenablage auf das Objekt "DataPackage".

Führen Sie die Projektmappe jetzt aus, melden Sie sich, und geben Sie einen Suchbegriff. Suchen Sie einen Tweet dar, die Sie verwenden möchten, kopieren, mit der rechten Maustaste, und tippen Sie im Kontextmenü als Shownin finden Sie unter Abbildung 8. Klicken Sie auf Kopieren.

Abbildung 8 Tests auf einer Stichprobe als Kontext-Menü die Kopierfunktion Tweet

Führen Sie nun, Editor oder Ihrem bevorzugten Texteditor, und wählen Sie bearbeiten | Fügen Sie ein, oder verwenden Sie STRG + V. Sie sehen diesen Text aus den Tweet: @AndyLeonard "Hier nicht autorisierten" von meinem Bruder und Friend, Frank La Vigne lesen. :{{fnts=1}} > https://t.co/JnuAzqO6m5.

Zusammenfassung

Wie Sie sehen können, erleichtert die UWP Community Toolkit schnelle Entwicklung von Cloud verbundenen UWP-apps. Es dauerte nur eine Zeile Code bei Twitter anmelden. Suchen von Twitter war gleichermaßen kurz. Der meiste Code hatte viel zu tun, mit der Präsentation der Daten und wie Benutzer mit ihr interagieren. Das UWP-Community-Toolkit bietet umfassende Benutzeroberflächen-Steuerelemente als auch einfache Weise auf beliebte Cloud-APIs wie Twitter zugreifen. Low-Level-REST-API und Authentifizierungsmechanismen werden sofort in einem fehlerfreien IntelliSense-fähige API abstrahiert. Dadurch können Entwickler den Schwerpunkt auf die Interaktion von Benutzern mit Daten, anstatt die Daten abrufen. Das UWP-Community-Toolkit kann alle UWP-app bessere und einfachere Verbindung mit sozialen Medien und andere Cloud-Dienste machen.

---

Frank La Vigne ist ein unabhängiger Berater, der Kunden beim Nutzen von Technologie mit dem Ziel einer besseren Community unterstützt. Er stellt regelmäßig auf FranksWorld.com und verfügt über eine YouTube channel namens Frank World TV (FranksWorld.TV).

Unser Dank gilt den folgenden technischen Experten für die Durchsicht dieses Artikels: David Catuhe