Erstellen des ersten PowerPoint-Aufgabenbereich-Add-InsBuild your first PowerPoint task pane add-in

In diesem Artikel werden Sie schrittweise durch den Prozess der Erstellung eines PowerPoint-Aufgabenbereich-Add-Ins geführt.In this article, you'll walk through the process of building a PowerPoint task pane add-in.

Erstellen des Add-InsCreate the add-in

Sie können ein Office-Add-In erstellen, indem Sie den Yeoman-Generator für Office-Add-Ins oder Visual Studio verwenden.You can create an Office Add-in by using the Yeoman generator for Office Add-ins or Visual Studio. Der Yeoman-Generator erstellt ein Node.js-Projekt, das mit Visual Studio Code oder einem beliebigen anderen Editor verwaltet werden kann, während Visual Studio eine Visual Studio-Lösung erstellt.The Yeoman generator creates a Node.js project that can be managed with Visual Studio Code or any other editor, whereas Visual Studio creates a Visual Studio solution. Wählen Sie die Registerkarte für die Option aus, die Sie verwenden möchten, und folgen Sie den Anweisungen, um das Add-In zu erstellen und lokal zu testen.Select the tab for the one you'd like to use and then follow the instructions to create your add-in and test it locally.

VoraussetzungenPrerequisites

  • Node.js (Version 8.0.0 oder höher)Node.js (version 8.0.0 or later)

  • GitGit

  • Die neueste Version von Yeoman und des Yeoman-Generators für Office-Add-Ins. Um diese Tools global zu installieren, führen Sie den folgenden Befehl an der Eingabeaufforderung aus:The latest version of Yeoman and the Yeoman generator for Office Add-ins. To install these tools globally, run the following command via the command prompt:

    npm install -g yo generator-office
    

    Hinweis

    Auch wenn Sie den "Bauer"-Generator bereits installiert haben, empfehlen wir, dass Sie Ihr Paket auf die neueste Version von NPM aktualisieren.Even if you've previously installed the Yeoman generator, we recommend you update your package to the latest version from npm.

Erstellen des Add-In-ProjektsCreate the add-in project

Führen Sie den folgenden Befehl aus, um ein Add-in-Projekt mit dem Autobauer-Generator zu erstellen:Run the following command to create an add-in project using the Yeoman generator:

yo office

Hinweis

Wenn Sie den yo office Befehl ausführen, erhalten Sie möglicherweise eine Eingabeaufforderung zu den Datensammlungsrichtlinien von "Autobauer" und den Office-Add-in CLI-Tools.When you run the yo office command, you may receive prompts about the data collection policies of Yeoman and the Office Add-in CLI tools. Verwenden Sie die bereitgestellten Informationen, um auf die Eingabeaufforderungen zu reagieren, wie Sie es für richtig halten.Use the information that's provided to respond to the prompts as you see fit.

Wenn Sie dazu aufgefordert werden, geben Sie die folgenden Informationen ein, um Ihr Add-in-Projekt zu erstellen:When prompted, provide the following information to create your add-in project:

  • Wählen Sie einen Projekttyp aus: Office Add-in Task Pane projectChoose a project type: Office Add-in Task Pane project
  • Wählen Sie einen Skripttyp aus: JavascriptChoose a script type: Javascript
  • What do you want to name your add-in?What do you want to name your add-in? My Office Add-in
  • Which Office client application would you like to support?Which Office client application would you like to support? PowerPoint

Screenshot der Aufforderungen und Antworten für den Yeoman-Generator

Nach Abschluss des Assistenten erstellt der Generator erstellt das Projekt und installiert unterstützende Node-Komponenten.After you complete the wizard, the generator creates the project and installs supporting Node components.

Tipp

Sie können die Anleitungen zur nächsten Schritte ignorieren, die der Landarbeits Generator nach dem Erstellen des Add-in-Projekts zur Verfügung stellt.You can ignore the next steps guidance that the Yeoman generator provides after the add-in project's been created. Die schrittweisen Anleitungen in diesem Artikel enthalten alle Anleitungen, die Sie zum Durchführen dieses Lernprogramms benötigen.The step-by-step instructions within this article provide all of the guidance you'll need to complete this tutorial.

Erkunden des ProjektsExplore the project

Das Add-In-Projekt, das Sie mit dem Yeoman Generator erstellt haben, enthält Beispielcode für einige sehr einfache Aufgabenbereich-Add-Ins.The add-in project that you've created with the Yeoman generator contains sample code for a very basic task pane add-in. Wenn Sie die Komponenten Ihres Add-In-Projekts untersuchen möchten, öffnen Sie das Projekt in Ihrem Codeeditor, und überprüfen Sie die unten aufgeführten Dateien.If you'd like to explore the components of your add-in project, open the project in your code editor and review the files listed below. Wenn Sie bereit sind, das Add-In zu testen, fahren Sie mit dem nächsten Abschnitt fort.When you're ready to try out your add-in, proceed to the next section.

  • Die ./manifest.xml-Datei im Stammverzeichnis des Projekts definiert die Einstellungen und Funktionen des Add-Ins.The ./manifest.xml file in the root directory of the project defines the settings and capabilities of the add-in.
  • Die ./src/taskpane/taskpane.html-Datei enthält das HTML-Markup für den Aufgabenbereich.The ./src/taskpane/taskpane.html file contains the HTML markup for the task pane.
  • Die ./src/taskpane/taskpane.css-Datei enthält das CSS, das auf die Inhalte im Aufgabenbereich angewendet wird.The ./src/taskpane/taskpane.css file contains the CSS that's applied to content in the task pane.
  • Die ./src/taskpane/taskpane.js-Datei enthält den Office-JavaScript-API-Code, der die Interaktion zwischen dem Aufgabenbereich und den Office-Hostanwendung erleichtert.The ./src/taskpane/taskpane.js file contains the Office JavaScript API code that facilitates interaction between the task pane and the Office host application.

Probieren Sie es ausTry it out

  1. Navigieren Sie zum Stammordner des Projekts.Navigate to the root folder of the project.

    cd "My Office Add-in"
    
  2. Führen Sie die folgenden Schritte aus, um den lokalen Webserver zu starten und das Add-In querzuladen.Complete the following steps to start the local web server and sideload your add-in.

    Hinweis

    Auch von Ihnen erstellte Office-Add-Ins sollten HTTPS und nicht HTTP verwenden.Office Add-ins should use HTTPS, not HTTP, even when you are developing. Wenn Sie aufgefordert werden, ein Zertifikat zu installieren, nachdem Sie einen der folgenden Befehle ausgeführt haben, akzeptieren Sie die Eingabeaufforderung, um das Zertifikat zu installieren, das der Yeoman-Generator bereitstellt.If you are prompted to install a certificate after you run one of the following commands, accept the prompt to install the certificate that the Yeoman generator provides.

    Tipp

    Wenn Sie Ihr Add-In auf einem Mac testen, führen Sie den folgenden Befehl aus, bevor Sie fortfahren.If you're testing your add-in on Mac, run the following command before proceeding. Wenn Sie diesen Befehl ausführen, wird der lokale Webserver gestartet.When you run this command, the local web server starts.

    npm run dev-server
    
    • Führen Sie zum Testen Ihres Add-Ins in PowerPoint den folgenden Befehl im Stammverzeichnis Ihres Projekts aus.To test your add-in in PowerPoint, run the following command in the root directory of your project. Damit wird der lokale Webserver gestartet (sofern er noch nicht ausgeführt wird), PowerPoint wird geöffnet, und das Add-In wird in PowerPoint geladen.This starts the local web server (if it's not already running) and opens PowerPoint with your add-in loaded.

      npm start
      
    • Führen Sie zum Testen Ihres Add-Ins in PowerPoint in einem Browser den folgenden Befehl im Stammverzeichnis Ihres Projekts aus.To test your add-in in PowerPoint on a browser, run the following command in the root directory of your project. Wenn Sie diesen Befehl ausführen, wird der lokale Webserver gestartet (sofern er nicht bereits ausgeführt wird).When you run this command, the local web server will start (if it's not already running).

      npm run start:web
      

      Um das Add-In zu verwenden, öffnen Sie ein neues Dokument in PowerPoint im Web, und laden Sie dann das Add-In quer, indem Sie den Anweisungen in Querladen von Office-Add-ins in Office im Web folgen.To use your add-in, open a new document in PowerPoint on the web and then sideload your add-in by following the instructions in Sideload Office Add-ins in Office on the web.

  3. Fügen Sie in PowerPoint eine neue leere Folie ein, und wählen Sie die Registerkarte Start gefolgt von der Schaltfläche Aufgabenbereich anzeigen im Menüband, um den Add-In-Aufgabenbereich zu öffnen.In PowerPoint, insert a new blank slide, choose the Home tab, and then choose the Show Taskpane button in the ribbon to open the add-in task pane.

    Screenshot von PowerPoint mit hervorgehobener Schaltfläche Aufgabenbereich anzeigen

  4. Wählen Sie am unteren Rand des Aufgabenbereichs den Link Ausführen, um den Text „Hallo Welt“ in die aktuelle Folie einzufügen.At the bottom of the task pane, choose the Run link to insert the text "Hello World" into the current slide.

    Screenshot von PowerPoint mit dem Bild eines Hundes und dem Text „Hello World“ auf der Folie

Nächste SchritteNext steps

Herzlichen Glückwunsch, Sie haben erfolgreich ein PowerPoint-Aufgabenbereich-Add-In erstellt!Congratulations, you've successfully created a PowerPoint task pane add-in! Erfahren Sie als Nächstes mehr über die Funktionen eines PowerPoint-Add-Ins, und erstellen Sie ein komplexeres Add-In mithilfe des Lernprogramms zum PowerPoint-Add-In.Next, learn more about the capabilities of a PowerPoint add-in and build a more complex add-in by following along with the PowerPoint add-in tutorial.