One place for hosting & domains

      Verwenden von ViewChild in Angular für den Zugriff auf eine untergeordnete Komponente, Anweisung oder ein DOM-Element


      Einführung

      Dieser Artikel stellt Ihnen den Dekorateur ViewChild von Angular vor.

      Es kann Situationen geben, in denen Sie aus einer übergeordneten Komponentenklasse auf eine Anweisung, eine untergeordnete Komponente oder ein DOM-Element zugreifen möchten. Der ViewChild -Decorator gibt das erste Element zurück, das einer bestimmten Anweisung, einer Komponente oder einem Auswahlelement für die Vorlagenreferenz entspricht.

      Verwenden von ViewChild mit Anweisungen

      ViewChild ermöglicht es, auf Anweisungen zuzugreifen.

      Nehmen wir an, wir haben eine SharkDirective.

      Im Idealfall verwenden Sie @angular/cli, um Ihre Anweisung zu generieren:

      • ng generate directive shark

      Andernfalls müssen Sie sie gegebenenfalls manuell zu app.module.ts hinzufügen:

      app.module.ts

      import { SharkDirective } from './shark.directive';
      ...
      @NgModule({
        declarations: [
          AppComponent,
          SharkDirective
        ],
        ...
      })
      

      Unsere Anweisung sucht nach Elementen mit dem Attribut appShark und gibt den Text im Element mit dem Wort Shark vor:

      shark.directive.ts

      import {
        Directive,
        ElementRef,
        Renderer2
      } from '@angular/core';
      
      @Directive(
        { selector: '[appShark]' }
      )
      export class SharkDirective {
        creature="Dolphin";
      
        constructor(elem: ElementRef, renderer: Renderer2) {
          let shark = renderer.createText('Shark ');
          renderer.appendChild(elem.nativeElement, shark);
        }
      }
      

      Als Nächstes fügen wir Shark zu Fin hinzu, indem wir es in der Komponentenvorlage verwenden:

      app.component.html

      <span appShark>Fin!</span>
      

      Bei der Anzeige der Anweung in einem Browser wird es dargestellt als:

      Output

      Shark Fin!

      Jetzt können wir auf die Instanzvariable creature von SharkDirective zugreifen und eine Instanzvariable extraCreature mit ihrem Wert festlegen:

      app.component.ts

      import {
        Component,
        ViewChild,
        AfterViewInit
      } from '@angular/core';
      import { SharkDirective } from './shark.directive';
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
      })
      export class AppComponent implements AfterViewInit {
        extraCreature: string;
      
        @ViewChild(SharkDirective)
        set appShark(directive: SharkDirective) {
          this.extraCreature = directive.creature;
        };
      
        ngAfterViewInit() {
          console.log(this.extraCreature); // Dolphin
        }
      }
      

      Wir haben hier einen Setter verwendet, um die Variable extraCreature festzulegen. Beachten Sie, dass wir warten, bis der AfterViewInit-Lifecycle-Hook auf unsere Variable zugreift, da dann untergeordnete Komponenten und Anweisungen verfügbar werden.

      Wenn wir die Anwendung in einem Browser anzeigen, sehen wir immer noch das "Shark Fin!" („es hat funktioniert!“ ). Im Konsolenprotokoll wird es jedoch folgendermaßen angezeigt:

      Output

      Dolphin

      Die übergeordnete Komponente konnte aus der Anweisung auf den Wert zugreifen.

      Verwenden von ViewChild mit DOM-Elementen

      ViewChild ermöglicht es Ihnen, auf native DOM-Elemente zuzugreifen, die eine Vorlagenreferenzvariable haben.

      Nehmen wir an, wir haben ein <input> unserer Vorlage mit der Referenzvariable #someInput:

      app.component.html

      <input #someInput placeholder="Your favorite sea creature">
      

      Jetzt können wir mit ViewChild auf das <input> zugreifen und den Wert festlegen:

      app.component.ts

      import {
        Component,
        ViewChild,
        AfterViewInit,
        ElementRef
      } from '@angular/core';
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
      })
      export class AppComponent implements AfterViewInit {
        @ViewChild('someInput') someInput: ElementRef;
        ngAfterViewInit() {
          this.someInput.nativeElement.value="Whale!";
        }
      }
      

      Wenn ngAfterViewInit ausgelöst wird, wird der Wert unseres <input> auf Folgendes gesetzt:

      Output

      Whale!

      Die übergeordnete Komponente konnte den Wert des untergeordneten DOM-Elements festlegen.

      Verwenden von ViewChild mit untergeordneten Komponenten

      ViewChild ermöglicht den Zugriff auf eine untergeordnete Komponente und den Aufruf von Methoden oder den Zugriff auf Instanzvariablen, die dem untergeordneten Element zur Verfügung stehen.

      Nehmen wir an, wir haben eine ChildComponent. Im Idealfall verwenden Sie @angular/cli, um Ihre Komponente zu generieren:

      • ng generate component child --flat

      Andernfalls müssen Sie child.component.css und child.component.html-Dateien erstellen und manuell zu app.module.ts hinzufügen:

      app.module.ts

      import { ChildComponent } from './child.component';
      ...
      @NgModule({
        declarations: [
          AppComponent,
          ChildComponent
        ],
        ...
      })
      

      Wir fügen die whoAml-Methode zur ChildComponent hinzu, die eine Nachricht zurückgibt:

      child.component.ts

      whoAmI() {
        return 'I am a child component!';
      }
      

      Nächstes referieren wir die Komponente in unserer App-Vorlage:

      app.component.html

      <app-child>child works!</app-child>
      

      Jetzt können wir die whoAmI-Methode aus unserer übergeordneten Komponenten-Klasse mit ViewChild wie folgt aufrufen:

      app.component.ts

      import {
        Component,
        ViewChild,
        AfterViewInit
      } from '@angular/core';
      import { ChildComponent } from './child.component';
      
      @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css'],
      })
      export class AppComponent implements AfterViewInit {
        @ViewChild(ChildComponent) child: ChildComponent;
        ngAfterViewInit() {
          console.log(this.child.whoAmI()); // I am a child component!
        }
      }
      

      Bei der Betrachtung der Anwendung in einem Browser wird das Konsolenprotokoll angezeigt:

      Output

      I am a child component!

      Die übergeordnete Komponente konnte whoAmI-Methode der untergeordneten Komponente aufrufen.

      Zusammenfassung

      Sie haben gelernt, ViewChild für den Zugriff auf eine Anweisung, eine untergeordnete Komponente und ein DOM-Element aus einer übergeordneten Komponenten-Klasse zu verwenden.

      Wenn sich die Referenz dynamisch in ein neues Element ändert, aktualisiert ViewChild automatisch ihre Referenz.

      In Fällen, in denen Sie auf mehrere untergeordnete Komponenten zugreifen möchten, verwenden Sie stattdessen ViewChild.

      Wenn Sie mehr über Angular erfahren möchten, lesen Sie unsere Seite Angular für Übungen und Programmierprojekte.



      Source link

      Zugriff auf Front- und Rück-Kameras mit getUserMedia() von JavaScript


      Einführung

      Mit HTML5 kam die Einführung von APIs mit Zugriff auf die Geräte-Hardware, einschließlich der API MediaDevices. Diese API ermöglicht den Zugriff auf Medieneingabegeräte wie Audio und Video.

      Mit Hilfe dieser API können Entwickler auf Audio- und Videogeräte zugreifen, um Live-Video-Feeds zu streamen und im Browser anzuzeigen. In diesem Tutorial greifen Sie über das Gerät des Benutzers auf den Video-Feed zu und zeigen es mit der Methode getUserMedia im Browser an.

      Die API getUserMedia verwendet die Medieneingabegeräte, um einen Medien-Stream zu erstellen. Dieser Medien-Stream enthält die angeforderten Medientypen, egal ob Audio oder Video. Mit dem von der API zurückgegebenen Stream können Video-Feeds im Browser angezeigt werden, wobei dies für die Echtzeit-Kommunikation im Browser nützlich ist.

      Bei gemeinsamer Verwendung mit der API MediaStream Recording können Sie Mediendaten aufzeichnen und speichern, die im Browser erfasst wurden. Diese API funktioniert wie die übrigen neu eingeführten APIs nur mit sicherer Herkunft, aber sie funktioniert auch für localhost– und Datei-URLs.

      Voraussetzungen

      In diesem Tutorial werden zunächst Konzepte erklärt und Beispiele mit Codepen demonstriert. Im letzten Schritt erstellen Sie einen funktionierenden Video-Feed für den Browser.

      Schritt 1 — Überprüfen der Geräteunterstützung

      Zuerst erfahren Sie, wie Sie überprüfen können, ob der Browser des Benutzers die API mediaDevices unterstützt. Diese API ist innerhalb der Navigator-Schnittstelle vorhanden und enthält den aktuellen Status und die Identität des Benutzeragenten. Die Überprüfung wird mit dem folgenden Code durchgeführt, der in Codepen eingefügt werden kann:

      if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
        console.log("Let's get this party started")
      }
      

      Zuerst wird geprüft, ob die API mediaDevices innerhalb des navigator vorhanden ist und dann wird geprüft, ob die API getUserMedia innerhalb der mediaDevices verfügbar ist. Wenn dies true zurückgibt, können Sie beginnen.

      Schritt 2 — Anfordern der Benutzerberechtigung

      Nachdem Sie die Unterstützung des Browsers für getUserMedia bestätigt haben, müssen Sie die Berechtigung zur Verwendung der Medieneingabegeräte auf dem Benutzeragenten anfordern. Normalerweise wird, nachdem ein Benutzer die Berechtigung erteilt hat, ein Promise zurückgegeben, das zu einem Medien-Stream aufgelöst wird. Dieses Promise wird nicht zurückgegeben, wenn die Berechtigung vom Benutzer verweigert wird, wodurch der Zugriff auf diese Geräte blockiert wird.

      Fügen Sie die folgende Zeile in Codepen ein, um die Berechtigung anzufordern:

      navigator.mediaDevices.getUserMedia({video: true})
      

      Das Objekt, das als Argument für die Methode getUserMedia bereitgestellt wurde, wird als constraints (Beschränkungen) bezeichnet. Dadurch wird festgelegt, für welche der Medieneingabegeräte Sie Zugriffsberechtigungen anfordern. Wenn das Objekt beispielsweise audio: true enthält, wird der Benutzer aufgefordert, Zugriff auf das Audio-Eingabegerät zu gewähren.

      Schritt 3 — Verstehen von Medienbeschränkungen

      Dieser Abschnitt behandelt das allgemeine Konzept von constraints. Das Objekt constraints ist ein MediaStreamConstraints-Objekt, das die anzufordernden Medientypen und die Anforderungen jedes Medientyps angibt. Mit dem Objekt constraints können Sie Anforderungen für den angeforderten Stream angeben, wie beispielsweise die Auflösung des zu verwendenden Streams (front, back).

      Sie müssen entweder audio oder video angeben, wenn Sie die Anfrage stellen. Ein NotFoundError wird zurückgegeben, wenn die angeforderten Medientypen im Browser des Benutzers nicht gefunden werden können.

      Wenn Sie beabsichtigen, einen Video-Stream mit einer Auflösung von 1280 × 720 anzufordern, können Sie das Objekt constraints so aktualisieren, dass es wie folgt aussieht:

      {
        video: {
          width: 1280,
          height: 720,
        }
      }
      

      Mit dieser Aktualisierung versucht der Browser, die angegebenen Qualitätseinstellungen für den Stream zu übernehmen. Wenn das Videogerät diese Auflösung nicht liefern kann, gibt der Browser andere verfügbare Auflösungen zurück.

      Um sicherzustellen, dass der Browser eine Auflösung zurückgibt, die nicht niedriger als die vorgegebene Auflösung ist, müssen Sie die Eigenschaft min verwenden. Nachfolgend wird gezeigt, wie Sie das Objekt constraints aktualisieren können, um die Eigenschaft min einzuschließen:

      {
        video: {
          width: {
            min: 1280,
          },
          height: {
            min: 720,
          }
        }
      }
      

      Dadurch wird sichergestellt, dass die zurückgegebene Stream-Auflösung mindestens 1280 × 720 beträgt. Wenn diese Mindestanforderungen nicht erfüllt werden kann, wird das Promise mit einem OverconstrainedError abgelehnt.

      In einigen Fällen haben Sie eventuell Bedenken hinsichtlich der Datenspeicherung und möchten, dass der Stream eine festgelegte Auflösung nicht überschreitet. Dies kann sich als nützlich erweisen, wenn der Benutzer einen begrenzten Datenplan verwendet. Um diese Funktionalität zu aktivieren, aktualisieren Sie das Beschränkungsobjekt, damit es ein Feld max enthält:

      {
        video: {
          width: {
            min: 1280,
            max: 1920,
          },
          height: {
            min: 720,
            max: 1080
          }
        }
      }
      

      Mit diesen Einstellungen stellt der Browser sicher, dass der zurückgegebene Stream nicht unter 1280 × 720 liegt und 1920 × 1080 nicht überschreitet.

      Andere Begriffe, die verwendet werden können, sind exact und ideal. Die Einstellung ideal wird typischerweise zusammen mit den Eigenschaften min und max verwendet, um die bestmögliche Einstellung zu finden, die den idealen Werten am nächsten kommt.

      Sie können die Beschränkungen zur Verwendung des Schlüsselworts ideal aktualisieren:

      {
        video: {
          width: {
            min: 1280,
            ideal: 1920,
            max: 2560,
          },
          height: {
            min: 720,
            ideal: 1080,
            max: 1440
          }
        }
      }
      

      Um den Browser anzuweisen, die vordere und hintere (bei mobilen Geräten) Kamera von Geräten verwenden, können Sie eine Eigenschaft facingMode im Objekt video angeben:

      {
        video: {
          width: {
            min: 1280,
            ideal: 1920,
            max: 2560,
          },
          height: {
            min: 720,
            ideal: 1080,
            max: 1440
          },
          facingMode: 'user'
        }
      }
      

      Diese Einstellung verwendet die nach vorn gerichtete Kamera jederzeit bei allen Geräten. Um die Rückseitenkamera von mobilen Geräten zu verwenden, können Sie die Eigenschaft facingMode zu environment ändern.

      {
        video: {
          ...
          facingMode: {
            exact: 'environment'
          }
        }
      }
      

      Schritt 4 — Verwenden der Methode enumerateDevices

      Wird die Methode enumerateDevices aufgerufen, gibt sie alle verfügbaren Eingabemediengeräte zurück, die auf dem PC des Benutzers verfügbar sind.

      Mit der Methode können Sie den Benutzern Optionen zur Verfügung stellen, welches Eingabemediengerät für das Streaming von Audio- oder Videoinhalten verwendet werden soll. Diese Methode gibt ein Promise aufgelöst an ein Array MediaDeviceInfo zurück, das Informationen zu jedem Gerät enthält.

      Ein Beispiel für die Verwendung dieser Methode wird im nachstehenden Ausschnitt gezeigt:

      async function getDevices() {
        const devices = await navigator.mediaDevices.enumerateDevices();
      }
      

      Eine Beispielantwort für jedes der Geräte würde wie folgt aussehen:

      {
        deviceId: "23e77f76e308d9b56cad920fe36883f30239491b8952ae36603c650fd5d8fbgj",
        groupId: "e0be8445bd846722962662d91c9eb04ia624aa42c2ca7c8e876187d1db3a3875",
        kind: "audiooutput",
        label: "",
      }
      

      Anmerkung: Ein Label wird nur dann zurückgegeben, wenn ein verfügbarer Stream verfügbar ist oder wenn der Benutzer Zugriffsberechtigungen für Geräte erteilt hat.

      Schritt 5 — Anzeigen des Video-Streams im Browser

      Sie haben den Prozess der Anfrage und des Zugriffs auf die Mediengeräte durchlaufen, Einschränkungen für die erforderlichen Auflösungen konfiguriert und die Kamera ausgewählt, die Sie für die Videoaufzeichnung benötigen.

      Nach all diesen Schritten wollen Sie zumindest sehen, ob der Stream anhand der konfigurierten Einstellungen bereitgestellt wird. Um dies sicherzustellen, verwenden Sie das Element <video> zur Anzeige des Video-Streams im Browser.

      Wie bereits erwähnt, gibt die Methode getUserMedia ein Promise zurück, das in einen Stream aufgelöst werden kann. Der zurückgegebene Stream kann mit der Methode createObjectURL in eine Objekt-URL konvertiert werden. Diese URL wird als Videoquelle festgelegt.

      Sie werden eine kurze Demo erstellen, bei der wir den Benutzer mit der Methode enumerateDevices aus der Liste der verfügbaren Videogeräte auswählen lassen.

      Dies ist eine Methode navigator.mediaDevices. Sie listet die verfügbaren Mediengeräte wie Mikrofone und Kameras auf. Sie gibt ein auflösbares Promise an ein Array von Objekten zurück, das die verfügbaren Mediengeräte detailliert auflistet.

      Erstellen Sie eine Datei index.html und aktualisieren Sie den Inhalt mit dem nachstehenden Code:

      index.html

      <!doctype html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport"
                content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
          <link rel="stylesheet" href="style.css">
          <title>Document</title>
      </head>
      <body>
      <div class="display-cover">
          <video autoplay></video>
          <canvas class="d-none"></canvas>
      
          <div class="video-options">
              <select name="" id="" class="custom-select">
                  <option value="">Select camera</option>
              </select>
          </div>
      
          <img class="screenshot-image d-none" alt="">
      
          <div class="controls">
              <button class="btn btn-danger play" title="Play"><i data-feather="play-circle"></i></button>
              <button class="btn btn-info pause d-none" title="Pause"><i data-feather="pause"></i></button>
              <button class="btn btn-outline-success screenshot d-none" title="ScreenShot"><i data-feather="image"></i></button>
          </div>
      </div>
      
      <script src="https://unpkg.com/feather-icons"></script>
      <script src="script.js"></script>
      </body>
      </html>
      

      Im obigen Ausschnitt haben Sie die von Ihnen benötigten Elemente und einige Steuerelemente für das Video eingerichtet. Außerdem ist eine Schaltfläche für die Aufnahme von Screenshots des aktuellen Video-Feeds enthalten.

      Lassen Sie uns diese Komponenten ein wenig stylen.

      Erstellen Sie eine Datei style.css und kopieren Sie die folgenden Stile in sie. Bootstrap wurde hinzugefügt, um die Menge an CSS zu reduzieren, die Sie schreiben müssen, um die Komponenten in Gang zu bringen.

      style.css

      .screenshot-image {
          width: 150px;
          height: 90px;
          border-radius: 4px;
          border: 2px solid whitesmoke;
          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
          position: absolute;
          bottom: 5px;
          left: 10px;
          background: white;
      }
      
      .display-cover {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 70%;
          margin: 5% auto;
          position: relative;
      }
      
      video {
          width: 100%;
          background: rgba(0, 0, 0, 0.2);
      }
      
      .video-options {
          position: absolute;
          left: 20px;
          top: 30px;
      }
      
      .controls {
          position: absolute;
          right: 20px;
          top: 20px;
          display: flex;
      }
      
      .controls > button {
          width: 45px;
          height: 45px;
          text-align: center;
          border-radius: 100%;
          margin: 0 6px;
          background: transparent;
      }
      
      .controls > button:hover svg {
          color: white !important;
      }
      
      @media (min-width: 300px) and (max-width: 400px) {
          .controls {
              flex-direction: column;
          }
      
          .controls button {
              margin: 5px 0 !important;
          }
      }
      
      .controls > button > svg {
          height: 20px;
          width: 18px;
          text-align: center;
          margin: 0 auto;
          padding: 0;
      }
      
      .controls button:nth-child(1) {
          border: 2px solid #D2002E;
      }
      
      .controls button:nth-child(1) svg {
          color: #D2002E;
      }
      
      .controls button:nth-child(2) {
          border: 2px solid #008496;
      }
      
      .controls button:nth-child(2) svg {
          color: #008496;
      }
      
      .controls button:nth-child(3) {
          border: 2px solid #00B541;
      }
      
      .controls button:nth-child(3) svg {
          color: #00B541;
      }
      
      .controls > button {
          width: 45px;
          height: 45px;
          text-align: center;
          border-radius: 100%;
          margin: 0 6px;
          background: transparent;
      }
      
      .controls > button:hover svg {
          color: white;
      }
      

      Der nächste Schritt besteht darin, der Demo Funktionalität hinzuzufügen. Mit der Methode enumerateDevices erhalten Sie die verfügbaren Videogeräte und legen sie als Optionen innerhalb des Elements „select“ fest. Erstellen Sie eine Datei namens script.js und aktualisieren Sie sie mit dem folgenden Ausschnitt:

      script.js

      feather.replace();
      
      const controls = document.querySelector('.controls');
      const cameraOptions = document.querySelector('.video-options>select');
      const video = document.querySelector('video');
      const canvas = document.querySelector('canvas');
      const screenshotImage = document.querySelector('img');
      const buttons = [...controls.querySelectorAll('button')];
      let streamStarted = false;
      
      const [play, pause, screenshot] = buttons;
      
      const constraints = {
        video: {
          width: {
            min: 1280,
            ideal: 1920,
            max: 2560,
          },
          height: {
            min: 720,
            ideal: 1080,
            max: 1440
          },
        }
      };
      
      const getCameraSelection = async () => {
        const devices = await navigator.mediaDevices.enumerateDevices();
        const videoDevices = devices.filter(device => device.kind === 'videoinput');
        const options = videoDevices.map(videoDevice => {
          return `<option value="${videoDevice.deviceId}">${videoDevice.label}</option>`;
        });
        cameraOptions.innerHTML = options.join('');
      };
      
      play.onclick = () => {
        if (streamStarted) {
          video.play();
          play.classList.add('d-none');
          pause.classList.remove('d-none');
          return;
        }
        if ('mediaDevices' in navigator && navigator.mediaDevices.getUserMedia) {
          const updatedConstraints = {
            ...constraints,
            deviceId: {
              exact: cameraOptions.value
            }
          };
          startStream(updatedConstraints);
        }
      };
      
      const startStream = async (constraints) => {
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        handleStream(stream);
      };
      
      const handleStream = (stream) => {
        video.srcObject = stream;
        play.classList.add('d-none');
        pause.classList.remove('d-none');
        screenshot.classList.remove('d-none');
        streamStarted = true;
      };
      
      getCameraSelection();
      

      Im obigen Ausschnitt sind einige Dinge zu erkennen. Schlüsseln wir diese auf:

      1. feather.replace(): dieser Methodenaufruf instanziiert feather, wobei es sich um einen Symbolsatz für die Webentwicklung handelt.
      2. Die Variable constraints enthält die anfängliche Konfiguration für den Stream. Diese wird erweitert, um das vom Benutzer gewählte Mediengerät einzubeziehen.
      3. getCameraSelection: diese Funktion ruft die Methode enumerateDevices auf. Dann filtern Sie durch das Array aus dem aufgelösten Promise und wählen Video-Eingabegeräte aus. Aus den gefilterten Ergebnissen erstellen Sie <option> für das Element <select>.
      4. Der Aufruf der Methode getUserMedia erfolgt innerhalb des Listeners onclick der Schaltfläche play. Hier überprüfen Sie vor dem Start des Streams, ob diese Methode vom Browser des Benutzers unterstützt wird.
      5. Als Nächstes rufen Sie die Funktion startStream auf, die ein Argument constraints benötigt. Sie ruft die Methode getUserMedia mit den angegebenen constraints auf. handleStream wird mit dem Stream aus dem aufgelösten Promise aufgerufen. Diese Methode setzt den zurückgegebenen Stream auf das srcObject des Videoelements.

      Als Nächstes fügen Sie den Schaltflächen-Steuerelementen auf der Seite Klick-Listener für pause, stop und zur Aufnahme von screenshots hinzu. Außerdem fügen Sie dem Element <select> einen Listener hinzu, um die Stream-Beschränkungen mit dem ausgewählten Videogerät zu aktualisieren.

      Aktualisieren Sie die Datei script.js mit dem nachstehenden Code:

      script.js

      ...
      cameraOptions.onchange = () => {
        const updatedConstraints = {
          ...constraints,
          deviceId: {
            exact: cameraOptions.value
          }
        };
        startStream(updatedConstraints);
      };
      
      const pauseStream = () => {
        video.pause();
        play.classList.remove('d-none');
        pause.classList.add('d-none');
      };
      
      const doScreenshot = () => {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        canvas.getContext('2d').drawImage(video, 0, 0);
        screenshotImage.src = canvas.toDataURL('image/webp');
        screenshotImage.classList.remove('d-none');
      };
      
      pause.onclick = pauseStream;
      screenshot.onclick = doScreenshot;
      

      Wenn Sie jetzt die Datei index.html im Browser öffnen, wird das Anklicken der Schaltfläche Play den Stream starten.

      Hier ist eine vollständige Demo:

      Zusammenfassung

      In diesem Tutorial wurde die API getUserMedia vorgestellt. Sie ist eine interessante Ergänzung zu HTML5, die den Prozess der Erfassung von Medien im Web erleichtert.

      Die API verwendet einen Parameter (constraints), mit dem der Zugriff auf Audio- und Video-Eingabegeräte konfiguriert werden kann. Sie kann auch verwendet werden, um die für Ihre Anwendung erforderliche Videoauflösung anzugeben.

      Sie können die Demo weiter erweitern, um dem Benutzer eine Option zu geben, die aufgenommenen Screenshots zu speichern, sowie Video- und Audiodaten mit Hilfe der API MediaStream Recording aufzuzeichnen und zu speichern.



      Source link

      Entwickeln einer Drupal 9-Website auf einem lokalen Rechner mit Docker und DDEV


      Der Autor hat den Diversity in Tech Fund dazu ausgewählt, eine Spende im Rahmen des Programms Write for DOnations zu erhalten.

      Einführung

      DDEV ist ein Open-Source-Tool, das Docker verwendet, um für viele verschiedene PHP-Frameworks lokale Entwicklungsumgebungen zu erstellen. Durch Verwendung der Vorteile von Containerisierung kann DDEV die Arbeit an mehreren Projekten, bei denen verschiedene Tech-Stacks und Cloud-Server zum Einsatz kommen, erheblich vereinfachen. DDEV enthält Vorlagen für WordPress, Laravel, Magento, TYPO3, Drupal und mehr.

      Drupal 9 wurde am 3. Juni 2020 für das Drupal CMS veröffentlicht. Drupal ist bekannt für seine hohe Benutzerfreundlichkeit und eine enorme Bibliothek an Modulen und Themen. Als PHP-Framework ist es beliebt für die Entwicklung und Pflege verschiedener Websites und Anwendungen aller Größen.

      In diesem Tutorial werden Sie mit DDEV auf Ihrem lokalen Rechner eine Drupal 9-Website erstellen. Damit können Sie zunächst Ihre Website einrichten und Ihr Projekt dann später, wenn Sie bereit sind, auf einem Produktionsserver bereitstellen.

      Voraussetzungen

      Um diesem Tutorial zu folgen, benötigen Sie:

      Anmerkung: Es ist möglich, Drupal 9 mit DDEV auf einem Remoteserver zu entwickeln; Sie benötigen jedoch eine Lösung, um in einem Webbrowser auf localhost zuzugreifen. Der DDEV-Befehl ddev share arbeitet mit ngrok zusammen, um für Sie und andere Stakeholder einen sicheren Tunnel zu Ihrem Server einzurichten und Ihre Entwicklungs-Site anzuzeigen. Zur persönlichen Verwendung können Sie auch eine GUI auf Ihrem Remoteserver installieren und über einen Webbrowser innerhalb dieser Oberfläche auf Ihre Entwicklungs-Site zugreifen. Folgen Sie dazu unserem Leitfaden Installieren und Konfigurieren von VNC unter Ubuntu 20.04. Für eine noch schnellere GUI-Lösung können Sie unserem Leitfaden zum Einrichten eines Remotedesktops mit X2Go unter Ubuntu 20.04 folgen.

      Schritt 1 — Installieren von DDEV

      In diesem Schritt installieren Sie DDEV auf Ihrem lokalen Rechner. Option 1 enthält Anweisungen für macOS, während Option 2 Anweisungen für Linux beinhaltet. Dieses Tutorial wurde mit DDEV Version 1.15.0 getestet.

      Option 1 — Installieren von DDEV unter macOS

      DDEV empfiehlt macOS-Benutzern, das Tool mit dem Homebrew-Paketmanager zu installieren. Verwenden Sie folgenden brew-Befehl zum Installieren der neuesten stabilen Version:

      • brew tap drud/ddev && brew install drud/ddev/ddev

      Wenn Sie die absolut neueste Version bevorzugen, können Sie brew zum Installieren von ddev-edge verwenden:

      • brew tap drud/ddev-edge && brew install drud/ddev-edge/ddev

      Wenn Sie bereits eine Version von DDEV installiert haben oder Ihre Version aktualisieren möchten, schließen Sie DDEV und verwenden brew zum Aktualisieren Ihrer Installation:

      • ddev poweroff
      • brew upgrade ddev

      Sobald Sie DDEV installiert oder aktualisiert haben, führen Sie ddev version aus, um Ihre Software zu überprüfen:

      Sie werden eine Ausgabe wie diese sehen:

      Output

      DDEV-Local version v1.15.0 commit v1.15.0 db drud/ddev-dbserver-mariadb-10.2:v1.15.0 dba phpmyadmin/phpmyadmin:5 ddev-ssh-agent drud/ddev-ssh-agent:v1.15.0 docker 19.03.8 docker-compose 1.25.5 os darwin router drud/ddev-router:v1.15.0 web drud/ddev-webserver:v1.15.0

      DDEV enthält eine leistungsstarke CLI oder Befehlszeilenschnittstelle. Führen Sie ddev aus, um sich über einige gängige Befehle zu informieren:

      Sie sehen die folgende Ausgabe:

      Output

      Create and maintain a local web development environment. Docs: https://ddev.readthedocs.io Support: https://ddev.readthedocs.io/en/stable/#support Usage: ddev [command] Available Commands: auth A collection of authentication commands composer Executes a composer command within the web container config Create or modify a ddev project configuration in the current directory debug A collection of debugging commands delete Remove all project information (including database) for an existing project describe Get a detailed description of a running ddev project. exec Execute a shell command in the container for a service. Uses the web service by default. export-db Dump a database to a file or to stdout help Help about any command hostname Manage your hostfile entries. import-db Import a sql file into the project. import-files Pull the uploaded files directory of an existing project to the default public upload directory of your project. list List projects logs Get the logs from your running services. pause uses 'docker stop' to pause/stop the containers belonging to a project. poweroff Completely stop all projects and containers pull Pull files and database using a configured provider plugin. restart Restart a project or several projects. restore-snapshot Restore a project's database to the provided snapshot version. sequelpro This command is not available since sequel pro.app is not installed share Share project on the internet via ngrok. snapshot Create a database snapshot for one or more projects. ssh Starts a shell session in the container for a service. Uses web service by default. start Start a ddev project. stop Stop and remove the containers of a project. Does not lose or harm anything unless you add --remove-data. version print ddev version and component versions Flags: -h, --help help for ddev -j, --json-output If true, user-oriented output will be in JSON format. -v, --version version for ddev Use "ddev [command] --help" for more information about a command.

      Weitere Informationen zur Verwendung der DDEV-CLI finden Sie in der offiziellen DDEV-Dokumentation.

      Nachdem DDEV auf Ihrem lokalen Rechner installiert wurde, sind Sie nun bereit, Drupal 9 zu installieren und mit der Entwicklung einer Website zu beginnen.

      Option 2 — Installieren von DDEV unter Linux

      In einem Linux-Betriebssystem können Sie DDEV mit Homebrew für Linux installieren oder das offizielle Installationsskript verwenden. Beginnen Sie unter Ubuntu mit dem Aktualisieren Ihrer Liste mit Paketen im apt-Paketmanager (Sie können apt in Debian bzw. den äquivalenten Paketmanager, der mit Ihrer Linux-Distribution verknüpft ist, verwenden):

      Installieren Sie nun einige Voraussetzungspakete aus dem offiziellen Repository von Ubuntu:

      • sudo apt install build-essential apt-transport-https ca-certificates software-properties-common curl

      Mit diesen Paketen können Sie das DDEV-Installationsskript aus dem offiziellen GitHub-Repository herunterladen.

      Laden Sie das Skript jetzt herunter:

      • curl -O https://raw.githubusercontent.com/drud/ddev/master/scripts/install_ddev.sh

      Öffnen Sie es vor dem Ausführen des Skripts in nano oder Ihrem bevorzugten Texteditor und inspizieren Sie den Inhalt:

      nano install_ddev.sh
      

      Sobald Sie die Inhalte des Skripts geprüft haben und damit zufrieden sind, speichern und schließen Sie die Datei. Jetzt sind Sie bereit, das Installationsskript auszuführen.

      Verwenden Sie den Befehl chmod, um das Skript ausführbar zu machen:

      Führen Sie das Skript jetzt aus:

      Im Installationsprozess werden Sie ggf. dazu aufgefordert, einige Einstellungen zu bestätigen oder Ihr sudo-Passwort einzugeben. Nach Abschluss der Installation wird DDEV in Ihrem Linux-Betriebssystem verfügbar sein.

      Führen Sie ddev version aus, um Ihre Software zu überprüfen:

      Sie werden eine Ausgabe wie diese sehen:

      Output

      DDEV-Local version v1.15.0 commit v1.15.0 db drud/ddev-dbserver-mariadb-10.2:v1.15.0 dba phpmyadmin/phpmyadmin:5 ddev-ssh-agent drud/ddev-ssh-agent:v1.15.0 docker 19.03.8 docker-compose 1.25.5 os linux router drud/ddev-router:v1.15.0 web drud/ddev-webserver:v1.15.0

      DDEV ist eine leistungsstarke CLI oder Befehlszeilenschnittstelle. Führen Sie ddev ohne etwas anderes aus, um sich über einige gängige Befehle zu informieren:

      Sie sehen die folgende Ausgabe:

      Output

      Create and maintain a local web development environment. Docs: https://ddev.readthedocs.io Support: https://ddev.readthedocs.io/en/stable/#support Usage: ddev [command] Available Commands: auth A collection of authentication commands composer Executes a composer command within the web container config Create or modify a ddev project configuration in the current directory debug A collection of debugging commands delete Remove all project information (including database) for an existing project describe Get a detailed description of a running ddev project. exec Execute a shell command in the container for a service. Uses the web service by default. export-db Dump a database to a file or to stdout help Help about any command hostname Manage your hostfile entries. import-db Import a sql file into the project. import-files Pull the uploaded files directory of an existing project to the default public upload directory of your project. list List projects logs Get the logs from your running services. pause uses 'docker stop' to pause/stop the containers belonging to a project. poweroff Completely stop all projects and containers pull Pull files and database using a configured provider plugin. restart Restart a project or several projects. restore-snapshot Restore a project's database to the provided snapshot version. sequelpro This command is not available since sequel pro.app is not installed share Share project on the internet via ngrok. snapshot Create a database snapshot for one or more projects. ssh Starts a shell session in the container for a service. Uses web service by default. start Start a ddev project. stop Stop and remove the containers of a project. Does not lose or harm anything unless you add --remove-data. version print ddev version and component versions Flags: -h, --help help for ddev -j, --json-output If true, user-oriented output will be in JSON format. -v, --version version for ddev Use "ddev [command] --help" for more information about a command.

      Weitere Informationen zur Verwendung der DDEV-CLI finden Sie in der offiziellen DDEV-Dokumentation.

      Nachdem DDEV auf Ihrem lokalen Rechner installiert ist, sind Sie nun bereit, Drupal 9 bereitzustellen und mit der Entwicklung einer Website zu beginnen.

      Schritt 2 — Bereitstellen einer neuen Drupal 9-Site mit DDEV

      Mit ausgeführtem DDEV werden Sie nun ein Drupal-spezifisches Dateisystem erstellen, Drupal 9 installieren und dann ein standardmäßiges Websiteprojekt initiieren.

      Zuerst erstellen Sie ein root-Verzeichnis für das Projekt und öffnen es. Von hier aus führen Sie alle verbleibenden Befehle aus. In diesem Tutorial wird d9test verwendet; Sie können Ihr Verzeichnis jedoch auch anders nennen. Beachten Sie jedoch, dass DDEV nicht gut mit Bindestrichen in Namen umgehen kann. Es gilt als bewährtes Verfahren, Verzeichnisnamen wie my-project oder drupal-site-1 zu vermeiden.

      Erstellen Sie das root-Verzeichnis für Ihr Projekt und navigieren Sie dort hin:

      DDEV eignet sich hervorragend zum Erstellen von Verzeichnisstrukturen, die mit bestimmten CMS-Plattformen übereinstimmen. Verwenden Sie den Befehl ddev config zum Einrichten einer Verzeichnisstruktur, die für Drupal 9 spezifisch ist:

      • ddev config --project-type=drupal9 --docroot=web --create-docroot

      Sie werden eine Ausgabe wie diese sehen:

      Output

      Creating a new ddev project config in the current directory (/Users/sammy/d9test) Once completed, your configuration will be written to /Users/sammy/d9test/.ddev/config.yaml Created docroot at /Users/sammy/d9test/web You have specified a project type of drupal9 but no project of that type is found in /Users/sammy/d9test/web Ensuring write permissions for d9new No settings.php file exists, creating one Existing settings.php file includes settings.ddev.php Configuration complete. You may now run 'ddev start'.

      Da Sie --project-type=drupal9 an Ihren Befehl ddev config übergeben haben, hat DDEV mehrere Unterverzeichnisse und Dateien erstellt, die die Standardorganisation für eine Drupal-Website darstellen. Die Verzeichnisstruktur Ihres Projekts wird nun wie folgt aussehen:

      A Drupal 9 directory tree

      .
      ├── .ddev
      │   ├── .gitignore
      │   ├── config.yaml
      │   ├── db-build
      │   │   └── Dockerfile.example
      │   └── web-build
      │       └── Dockerfile.example
      └── web
          └── sites
              └── default
                  ├── .gitignore
                  ├── settings.ddev.php
                  └── settings.php
      
      6 directories, 7 files
      

      .ddev/ wird der Hauptordner für die ddev-Konfiguration sein. web/ ist der docroot für Ihr neues Projekt; er enthält mehrere spezifische Dateien mit Einstellungen (settings). Sie verfügen nun über das Grundgerüst für Ihr neues Drupal-Projekt.

      Der nächste Schritt besteht darin, Ihre Plattform zu initialisieren, wodurch die erforderlichen Container und Networking-Konfigurationen erstellt werden. DDEV bindet sich an Ports 80 und 443. Wenn Sie also einen Webserver wie Apache auf Ihrem Rechner ausführen oder etwas anderes verwenden, das diese Ports nutzt, halten Sie diese Dienste vor dem Fortfahren an.

      Verwenden Sie den Befehl ddev start, um Ihre Plattform zu initialisieren:

      Dadurch werden alle Docker-basierten Container für Ihr Projekt erstellt, darunter ein Webcontainer, ein Datenbankcontainer und phpmyadmin. Nach Abschluss der Initialisierung sehen Sie eine Ausgabe wie diese (Ihre Portnummer kann sich davon unterscheiden):

      Output

      ... Successfully started d9test Project can be reached at http://d9test.ddev.site http://127.0.0.1:32773

      Anmerkung: Denken Sie daran, dass DDEV hier im Hintergrund Docker-Container startet. Wenn Sie diese Container anzeigen oder überprüfen möchten, ob sie ausgeführt werden, können Sie den Befehl docker ps verwenden:

      Neben anderen Containern, die Sie derzeit ausführen, finden Sie vier neue Container, die jeweils ein anderes Image ausführen: php-myadmin, ddev-webserver, ddev-router und ddev-dbserver-mariadb.

      ddev start hat Ihre Container erfolgreich erstellt und eine Ausgabe mit zwei URLs geliefert. Zwar steht in dieser Ausgabe, dass Ihr Projekt „unter http://d9test.ddev.site und http://127.0.0.1:32773 erreichbar ist“, doch wenn Sie diese URLs besuchen, wird ein Fehler ausgelöst. Ab Drupal 8 funktionieren der Drupal Core und die contrib-Module wie Abhängigkeiten. Deshalb müssen Sie Drupal zunächst mit Composer, dem Paketmanager für PHP-Projekte, installieren, bevor Sie etwas in Ihrem Webbrowser laden können.

      Eine der nützlichsten und elegantesten Funktionen von DDEV ist, dass Sie Composer-Befehle über die DDEV-CLI in Ihre containerisierte Umgebung übergeben können. Das bedeutet, dass Sie die spezifische Konfiguration Ihres Computers von Ihrer Entwicklungsumgebung trennen können. So müssen Sie die verschiedenen Probleme mit Dateipfaden, Abhängigkeiten und Versionen, die eine lokale PHP-Entwicklung im Allgemeinen begleiten, nicht mehr verwalten. Außerdem können Sie rasch und mit minimalem Aufwand zwischen verschiedenen Frameworks und Tech-Stacks wechseln.

      Verwenden Sie den Befehl ddev composer zum Herunterladen von drupal/recommended-project. Dadurch wird Drupal core mit seinen Bibliotheken und anderen verwandten Ressourcen heruntergeladen und ein Standardprojekt erstellt:

      • ddev composer create "drupal/recommended-project"

      Laden Sie nun eine abschließende Komponente namens Drush oder Drupal Shell herunter. In diesem Tutorial werden wir nur einen drush-Befehl nutzen. Das Tutorial bietet eine Alternative, doch ist drush eine leistungsstarke CLI für die Drupal-Entwicklung, die für zusätzliche Effizienz sorgt.

      Verwenden Sie ddev composer zum Installieren von drush:

      • ddev composer require "drush/drush"

      Sie haben nun ein standardmäßiges Drupal 9-Projekt erstellt und drush installiert. Jetzt werden Sie Ihr Projekt in einem Browser anzeigen und die Einstellungen Ihrer Website konfigurieren.

      Schritt 3 — Konfigurieren des Drupal-9-Projekts

      Nachdem Sie Drupal 9 installiert haben, können Sie Ihr neues Projekt nun in Ihrem Browser öffnen. Dazu können Sie ddev start erneut ausführen und eine der beiden ausgegebenen URLs kopieren. Alternativ können Sie folgenden Befehl verwenden, um Ihre Website in einem neuen Browserfenster automatisch zu starten:

      Der standardmäßige Drupal-Installationsassistent wird angezeigt.

      Drupal 9-Installationsprogramm über Browser

      Hier haben Sie zwei Optionen. Sie können diese Benutzeroberfläche verwenden und dem Assistenten durch die Installation folgen oder zu Ihrem Terminal zurückkehren und über ddev einen drush-Befehl übergeben. Die letztere Option automatisiert den Installationsprozess und setzt admin sowohl als Ihren Benutzernamen als auch als Passwort.

      Option 1 — Verwenden des Assistenten

      Kehren Sie zum Assistenten in Ihrem Browser zurück. Wählen Sie unter Sprache auswählen eine Sprache aus dem Drop-down-Menü aus und klicken Sie auf Speichern und fortfahren. Wählen Sie nun ein Installationsprofil aus. Sie können zwischen Standard, Minimal und Demo wählen. Treffen Sie Ihre Wahl und klicken Sie dann auf Speichern und fortfahren. Drupal überprüft automatisch Ihre Anforderungen, erstellt eine Datenbank und installiert Ihre Site. Ihr letzter Schritt besteht darin, einige Konfigurationen anzupassen. Fügen Sie für die Site einen Namen und eine E-Mail-Adresse, die auf Ihre Domäne endet, hinzu. Wählen Sie dann einen Benutzernamen und ein Passwort. Wählen Sie ein starkes Passwort aus und bewahren Sie Ihre Anmeldedaten an einem sicheren Ort auf. Fügen Sie schließlich eine private E-Mail-Adresse hinzu, die Sie regelmäßig überprüfen, füllen Sie die regionalen Einstellungen aus und klicken Sie auf Speichern und fortfahren.

      Drupal 9-Willkommensnachricht mit einer Warnung zu Berechtigungen

      Ihre neue Site wird mit einer Willkommensnachricht geladen.

      Option 2 — Verwenden der Befehlszeile

      Führen Sie im root-Verzeichnis Ihres Projekts den Befehl ddev exec aus, um mit drush eine standardmäßige Drupal-Site zu installieren:

      • ddev exec drush site:install --account-name=admin --account-pass=admin

      Dadurch wird Ihre Website wie beim Assistenten erstellt, jedoch mit verschiedenen Standardkonfigurationen. Ihr Benutzername und Passwort werden admin lauten.

      Starten Sie nun die Site, um sie in Ihrem Browser anzuzeigen:

      Sie sind nun bereit, mit dem Erstellen Ihrer Website zu beginnen. Es gilt jedoch als bewährte Methode zu überprüfen, ob Ihre Berechtigungen für das Verzeichnis /sites/web/default korrekt sind. Solange Sie lokal arbeiten, ist das kein großes Problem; wenn Sie diese Berechtigungen jedoch an einen Produktionsserver übertragen, stellen sie ein Sicherheitsrisiko dar.

      Schritt 4 — Überprüfen Ihrer Berechtigungen

      Während der Installation mit dem Assistenten oder dem ersten Laden Ihrer Willkommensseite sehen Sie ggf. eine Warnung zu den Berechtigungseinstellungen in Ihrem Verzeichnis /sites/web/default und eine Datei in diesem Verzeichnis: settings.php.

      Nach Ausführung des Installationsskripts wird Drupal versuchen, die Berechtigungen für das Verzeichnis web/sites/default festzulegen, um für alle Gruppen zu lesen und auszuführen: Dies ist eine 555-Berechtigungseinstellung. Außerdem wird es versuchen, Berechtigungen für default/settings.php auf schreibgeschützt oder 444 festzulegen. Wenn Sie auf diese Warnung stoßen, führen Sie im root-Verzeichnis Ihres Projekts diese zwei chmod-Befehle aus. Wenn Sie das nicht tun, besteht ein Sicherheitsrisiko:

      • chmod 555 web/sites/default
      • chmod 444 web/sites/default/settings.php

      Um zu überprüfen, ob Sie die richtigen Berechtigungen haben, führen Sie diesen ls-Befehl mit den Switches a, l, h und d aus:

      • ls -alhd web/sites/default web/sites/default/settings.php

      Überprüfen Sie, ob Ihre Berechtigungen mit der folgenden Ausgabe übereinstimmen:

      Output

      dr-xr-xr-x 8 sammy staff 256 Jul 21 12:56 web/sites/default -r--r--r-- 1 sammy staff 249 Jul 21 12:12 web/sites/default/settings.php

      Sie sind nun bereit, auf Ihrem lokalen Rechner eine Drupal 9-Website zu erstellen.

      Schritt 5 — Erstellen des ersten Beitrags in Drupal

      Um einige Funktionen von Drupal zu testen, erstellen Sie nun mit der Web-Benutzeroberfläche einen Beitrag.

      Klicken Sie auf der ersten Seite Ihrer Website auf die Schaltfläche Inhalt am linken Rand des oberen Menüs. Klicken Sie nun auf die Schaltfläche Inhalt hinzufügen. Eine neue Seite wird angezeigt. Klicken Sie auf Artikel, und eine weitere Seite wird angezeigt.

      Drupal 9-Eingabeaufforderung zum Erstellen eines Artikels

      Fügen Sie einen beliebigen Titel und Content hinzu. Sie können auch ein Bild wie eines der Hintergrundbilder von DigitalOcean hinzufügen. Klicken Sie dann auf die blaue Schaltfläche Speichern.

      Ihr erster Beitrag wird auf der Website angezeigt.

      Drupal 9 – Beitrag erstellt

      Sie entwickeln nun eine Drupal 9-Website auf Ihrem lokalen Rechner, ohne jemals mit einem Server zu interagieren (dank Docker und DDEV). Im folgenden Schritt verwalten Sie den DDEV-Container, der Ihren Workflow aufnehmen wird.

      Schritt 6 — Verwalten des DDEV-Containers

      Wenn Sie Ihr Projekt abgeschlossen haben oder eine Pause machen möchten, können Sie Ihren DDEV-Container anhalten, ohne sich Gedanken über Datenverluste machen zu müssen. DDEV kann zwischen vielen Projekten schnelle Kontextwechsel verwalten; dies ist eine der nützlichsten Funktionen. Ihr Code und Ihre Daten werden stets in Ihrem Projektverzeichnis gespeichert, auch wenn Sie den DDEV-Container angehalten oder gelöscht haben.

      Um Ressourcen freizugeben, können Sie DDEV jederzeit anhalten. Führen Sie im root-Verzeichnis Ihres Projekts folgenden Befehl aus:

      DDEV ist global verfügbar, sodass Sie ddev-Befehle von überall her ausführen können, solange Sie das DDEV-Projekt angeben:

      Außerdem können Sie mit ddev list alle Ihre Projekte auf einmal anzeigen:

      DDEV umfasst viele andere nützliche Befehle.

      Sie können DDEV neu starten und jederzeit lokal weiterentwickeln.

      Zusammenfassung

      In diesem Tutorial haben Sie Docker und die Vorteile von Containerisierung verwendet, um mit Hilfe von DDEV lokal eine Drupal-Site zu erstellen. DDEV lässt sich in zahlreiche IDEs einbinden und bietet natives PHP-Debugging für Atom, PHPStorm und Visual Studio Code (vscode). Nun können Sie mehr über das Erstellen von Entwicklungsumgebungen für Drupal mit DDEV oder das Entwickeln anderer PHP-Frameworks wie WordPress erfahren.



      Source link