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

      Aktivieren des serverseitige Rendern für eine React-App


      Einführung

      Serverseitiges Rendern (SSR) ist eine beliebte Technik zum Rendern einer Client-seitigen Einzelseitenanwendung (SPA) auf dem Server und zum anschließenden Senden einer vollständig gerenderten Seite an den Client. Dadurch werden dynamische Komponenten als statisches HTML-Markup bereitgestellt.

      Dieser Ansatz kann für die Suchmaschinenoptimierung (SEO) hilfreich sein, wenn die Indizierung JavaScript nicht richtig verarbeitet. Dies kann auch in Situationen von Vorteil sein, in denen das Herunterladen eines großen JavaScript-Bundles durch ein langsames Netzwerk beeinträchtigt wird.

      In diesem Tutorial initialisieren Sie eine React-App mit Create React App und ändern das Projekt, um das serverseitige Rendern zu aktivieren.

      Am Ende dieses Tutorials haben Sie ein Arbeitsprojekt mit einer Client-seitigen React-Anwendung und einer serverseitigen Express-Anwendung.

      Hinweis: Alternativ bietet Next.js einen modernen Ansatz zum Erstellen statischer und vom Server gerenderter Anwendungen, die mit React erstellt wurden.

      Voraussetzungen

      Um diesem Tutorial zu folgen, benötigen Sie:

      Dieses Tutorial wurde mit Node v14.40 und npm v6.14.5 verifiziert.

      Schritt 1 — Erstellen der React-Anwendung und Ändern der App-Komponente

      Zuerst verwenden wir npx, um eine neue React-Anwendung mit der neuesten Version der Create React App zu starten.

      Rufen wir unsere App my-ssr-app auf:

      • npx create-react-app@3.4.1 my-ssr-app

      Dann nehmen wir cd in die neue Anweisung auf:

      cd my-ssr-app
      

      Schließlich starten wir unsere neue Client-seitige App, um die Installation zu verifizieren:

      Sie sollten eine Beispiel-React-App-Anzeige in Ihrem Browser-Fenster sehen.

      Lassen Sie uns nun eine <Home>-Komponente erstellen:

      Fügen Sie als Nächstes den folgenden Code in die Datei Home.js ein:

      src/Home.js

      import React from 'react';
      
      export default props => {
        return <h1>Hello {props.name}!</h1>;
      };
      

      Dadurch wird eine <h1>-Überschrift mit einer "Hello"-Nachricht erstellt, die an einen Namen geleitet wird.

      Als Nächstes rendern wir das <Home> in der <App>-Komponente. Öffnen Sie die Datei App.js:

      Ersetzen Sie dann die vorhandenen Codezeilen durch diese neuen Codezeilen:

      src/App.js

      import React from 'react';
      import Home from './Home';
      
      export default () => {
        return <Home name="Sammy" />;
      };
      

      Dadurch wird ein Name an die <Home>-Komponente übergeben, sodass die Nachricht, die wir erwarten, "Hello Sammy!" lautet.

      In der Datei index.js unserer App verwenden wir die ReactDOM-Hydratmethode anstelle des Renderns, um dem DOM-Renderer anzuzeigen, dass wir die App nach einem serverseitigen Rendern rehydrieren.

      Öffnen wir die Datei index.js:

      Ersetzen Sie dann den Inhalt der Datei index.js durch den folgenden Code:

      index.js

      import React from 'react';
      import ReactDOM from 'react-dom';
      import App from './App';
      
      ReactDOM.hydrate(<App />, document.getElementById('root'));
      

      Damit wird die Einrichtung der Client-Seite abgeschlossen, wir können mit der Einrichtung der Server-Seite fortfahren.

      Schritt 2 — Erstellen eines Express-Servers und Rendern der App-Komponente

      Nachdem wir nun unsere Anwendung eingerichtet haben, richten wir einen Server ein, der eine gerenderte Version übergeben wird. Wir verwenden Express für unseren Server. Fügen wir es dem Projekt hinzu, indem wir den folgenden Befehl in Ihrem Terminalfenster eingeben:

      • npm install express@4.17.1

      Oder mit yarn:

      Erstellen Sie als Nächstes ein Server-Verzeichnis neben dem Verzeichnis src der App:

      Erstellen Sie dann eine neue Datei index.js, die den Express-Servercode enthält:

      Fügen Sie die Importe hinzu, die einige Konstanten benötigen, und definieren Sie diese auch:

      server/index.js

      import path from 'path';
      import fs from 'fs';
      
      import React from 'react';
      import express from 'express';
      import ReactDOMServer from 'react-dom/server';
      
      import App from '../src/App';
      
      const PORT = process.env.PORT || 3006;
      const app = express();
      

      Fügen Sie als Nächstes den Servercode mit einer Fehlerbehandlung hinzu:

      server/index.js

      // ...
      
      app.get('/', (req, res) => {
        const app = ReactDOMServer.renderToString(<App />);
      
        const indexFile = path.resolve('./build/index.html');
        fs.readFile(indexFile, 'utf8', (err, data) => {
          if (err) {
            console.error('Something went wrong:', err);
            return res.status(500).send('Oops, better luck next time!');
          }
      
          return res.send(
            data.replace('<div id="root"></div>', `<div id="root">${app}</div>`)
          );
        });
      });
      
      app.use(express.static('./build'));
      
      app.listen(PORT, () => {
        console.log(`Server is listening on port ${PORT}`);
      });
      

      Wie Sie möglicherweise sehen, können wir unsere <App>-Komponente aus der Client-App direkt vom Server importieren.

      Hier finden drei wichtige Dinge statt:

      • Wir weisen Express an, Inhalte aus dem Verzeichnis build als statische Dateien zu verwenden.
      • Wir verwenden eine Methode von ReactDOMServer, renderToString, um unsere App zu einer statischen HTML-Zeichenfolge zu rendern.
      • Dann lesen wir die statische Datei index.html aus der integrierten Client-App, injizieren den statischen Inhalt unserer App im <div> mit einer ID von "root", und senden dies als Antwort auf die Anfrage.

      Schritt 3 — Konfigurieren von webpack, Babel und npm Scripts

      Damit unser Servercode funktioniert, müssen wir ihn mit webpack und Babel bündeln und transpilieren. Dazu fügen wir dem Projekt die Abhängigkeiten dev hinzu, indem wir den folgenden Befehl in Ihrem Terminalfenster eingeben:

      • npm install webpack@4.42.0 webpack-cli@3.3.12 webpack-node-externals@1.7.2 @babel/core@7.10.4 babel-loader@8.1.0 @babel/preset-env@7.10.4 @babel/preset-react@7.10.4 --save-dev

      Oder mit yarn:

      • yarn add webpack@4.42.0 webpack-cli@3.3.12 webpack-node-externals@1.7.2 @babel/core@7.10.4 babel-loader@8.1.0 @babel/preset-env@7.10.4 @babel/preset-react@7.10.4 --dev

      Hinweis: Eine frühere Version dieses Tutorials installierte babel-core, babel-preset-env und babel-preset-react-app. Diese Pakete wurden seitdem archiviert, und die mono-repo-Versionen werden stattdessen verwendet.

      Erstellen Sie als Nächstes eine Babel-Konfigurationsdatei:

      Fügen Sie dann die Voreinstellungen env und react-app hinzu:

      .babelrc.json

      {
        "presets": [
          "@babel/preset-env",
          "@babel/preset-react"
        ]
      }
      

      Anmerkung: Eine frühere Version dieses Tutorials verwendete eine .babelrc-Datei (keine .json-Dateierweiterung). Dies war eine Konfigurationsdatei für Babel 6, aber dies ist für Babel 7 nicht mehr der Fall.

      Jetzt erstellen wir eine webpack-Konfiguration für den Server, der Babel Loader verwendet, um den Code zu transpilieren. Beginnen Sie mit der Erstellung der Datei:

      Fügen Sie dann die folgenden Konfigurationen in die webpack.server.js-Datei ein:

      webpack.server.js

      const path = require('path');
      const nodeExternals = require('webpack-node-externals');
      
      module.exports = {
        entry: './server/index.js',
      
        target: 'node',
      
        externals: [nodeExternals()],
      
        output: {
          path: path.resolve('server-build'),
          filename: 'index.js'
        },
      
        module: {
          rules: [
            {
              test: /.js$/,
              use: 'babel-loader'
            }
          ]
        }
      };
      

      Mit dieser Konfiguration wird unser transpiliertes Serverbundle an den Ordner server-build in einer Datei namens index.js ausgegeben.

      Beachten Sie die Verwendung von target: 'node' und externals: [nodeExternals()] aus webpack-node-externals, wodurch die Dateien aus node_modules im Bundle versagt werden; der Server kann direkt auf diese Dateien zugreifen.

      Dadurch wird die Abhängigkeit von der Installation und der webpack- und Babel-Konfiguration abgeschlossen.

      Jetzt besuchen wir erneut package.json, um Helfer-npm-Scripts hinzuzufügen:

      Wir fügen der Datei package.json die Scripts dev:build-server, dev:start und dev hinzu, um unsere SSR-Anwendung leicht zu erstellen und zu bedienen:

      package.json

      "scripts": {
        "dev:build-server": "NODE_ENV=development webpack --config webpack.server.js --mode=development -w",
        "dev:start": "nodemon ./server-build/index.js",
        "dev": "npm-run-all --parallel build dev:*",
        ...
      },
      

      Wir verwenden nodemon, um den Server neu zu starten, wenn wir Änderungen daran durchführen. Und wir verwenden npm-run-all, um mehrere Befehle parallel auszuführen.

      Installieren wir diese Pakete nun durch Eingabe der folgenden Befehle in Ihrem Terminalfenster

      • npm install nodemon@2.0.4 npm-run-all@4.1.5 --save-dev

      Oder mit yarn:

      • yarn add nodemon@2.0.4 npm-run-all@4.1.5 --dev

      Damit können Sie Folgendes ausführen, um die Client-seitige App zu erstellen, den Servercode zu bündeln und zu transpilieren, und den Server unter :3006 zu starten:

      Oder mit yarn:

      Unsere Server-Webpack-Konfiguration wir auf Änderungen achten und unser Server wird bei Änderungen neu starten. Für die Client-Anwendung müssen wir sie jedoch derzeit immer noch jedes Mal erstellen, wenn wir Änderungen vornehmen. Dafür gibt es hier ein offenes Problem.

      Öffnen Sie nun http://localhost:3006/ in Ihrem Webbrowser und Sie sehen Ihre App auf der Serverseite gerendered.

      Zuvor hat der Quellcode enthüllt:

      Output

      <div id="root"></div>

      Mit den Änderungen, die Sie vorgenommen haben, enthüllt der Quellcode nun aber:

      Output

      <div id="root"><h1 data-reactroot="">Hello <!-- -->Sammy<!-- -->!</h1></div>

      Das serverseitige Rendering hat die <App>-Komponente erfolgreich in HTML konvertiert.

      Zusammenfassung

      In diesem Tutorial haben Sie eine React-Anwendung initialisiert und das serverseitige Rendering aktiviert.

      In diesem Beitrag haben wir erst einen Bruchteil des Möglichen besprochen. Die Dinge werden etwas komplizierter, wenn Routing, Datenabruf oder Redux ebenfalls Teil einer serverseitig gerenderten App sein müssen.

      Ein Hauptvorteil der Verwendung von SSR besteht darin, dass eine App für ihren Inhalt gecrawlt werden kann, selbst für Crawler, die keinen JavaScript-Code ausführen. Dies kann bei der Suchmaschinenoptimierung (SEO) und der Bereitstellung von Metadaten für Social-Media-Kanäle hilfreich sein.

      SSR kann auch häufig zur Leistungssteigerung beitragen, da bei der ersten Anforderung eine vollständig geladene App vom Server gesendet wird. Bei nicht trivialen Apps kann Ihr Kilometerstand variieren, da für SSR ein Setup erforderlich ist, das etwas kompliziert werden kann und den Server stärker belastet. Ob Sie serverseitiges Rendering für Ihre React-App verwenden, hängt von Ihren spezifischen Anforderungen ab und davon, welche Kompromisse für Ihren Anwendungsfall am sinnvollsten sind.

      Wenn Sie mehr über React erfahren möchten, sehen Sie sich unsere Reihe Codieren in React.js an oder besuchen Sie unsere React-Themenseite für Übungen und Programmierprojekte.



      Source link

      So paketieren und veröffentlichen Sie eine Snap-Anwendung unter Ubuntu 18.04


      Der Autor wählte die Electronic Frontier Foundation, um eine Spende im Rahmen des Programms Write for DOnations zu erhalten.

      Einführung

      Eine der größten Herausforderungen in der Anwendungsentwicklung ist der letzte Schritt der Verteilung des fertigen Produkts an Ihre Benutzer oder Kunden. Viele bestehende Methoden zur Anwendungsbereitstellung sind nicht benutzerfreundlich und sicher oder bieten keine Methoden zur automatischen Aktualisierung einer Anwendung nach ihrer Installation.

      Snap ist ein modernes Anwendungsverpackungsformat mit leistungsstarken Sandboxing- und Sicherheitsfunktionen, u. a. Dateisystem-Isolation, automatische Updates und integriertes Abhängigkeitsmanagement. Snap-Anwendungen, die als Snaps bezeichnet werden, können ähnlich wie apt oder yum mit einem Befehlszeilenprogramm heruntergeladen und installiert werden. Ubuntu wird mit vorinstalliertem Snap bereitgestellt, was bedeutet, dass es ein breites Publikum für Snap-Anwendungen gibt.

      In diesem Tutorial werden Sie eine Snap-Anwendung erstellen und im Snap Store veröffentlichen.

      Voraussetzungen

      Um diesem Tutorial zu folgen, benötigen Sie:

      • Einen Ubuntu-18.04-Server, der gemäß Ersteinrichtung eines Servers mit Ubuntu 18.04 eingerichtet wurde, einschließlich eines Benutzers ohne Root- und mit sudo-Berechtigungen.

      • Eine Anwendung, die Sie paketieren und als Snap freigeben möchten. Dabei kann es sich um eine komplexe Anwendung handeln, die Sie erstellt haben, um ein gemeinsames Open-Source-Projekt oder um ein einfaches „Hello, World!“-Programm. Wenn Sie noch keine Anwendung haben, wird in Schritt 1 dieses Tutorials behandelt, wie Sie ein Hello World-Programm in Go erstellen können.

      • Ein Konto auf dem Snapcraft Developer Dashboard.

      Sobald Sie diese zur Verfügung haben, melden Sie sich zunächst als Benutzer ohne Root-Berechtigung auf Ihrem Server an.

      Schritt 1 – Vorbereiten Ihrer Anwendung für die Paketierung

      Zunächst bereiten Sie Ihre Anwendung für die Paketierung als Snap-Anwendung vor, indem Sie sicherstellen, dass alles Erforderliche in einem einzigen Verzeichnis vorhanden ist.

      Beginnen Sie mit der Erstellung eines neuen Verzeichnisses für Ihr Snap und wechseln Sie in dieses:

      • mkdir ~/your-snap
      • cd ~/your-snap

      Wenn Sie bereits eine Anwendung haben, legen Sie als Nächstes eine vollständige Kopie des Quellcodes Ihrer Anwendung in dem Verzeichnis ab, das Sie gerade erstellt haben. Der Prozess wird je nach der genauen Anwendung, die Sie paketieren, erheblich variieren. Für den Fall, dass der Quellcode in einem Git-Repository gespeichert ist, können Sie mit dem Befehl git init ein Repository im Verzeichnis anlegen und den gesamten relevanten Code abrufen.

      Wenn Sie noch keine Anwendung haben, die Sie paketieren möchten, können Sie ein Hello World-Programm erstellen, das Sie stattdessen verwenden. Wenn Sie mehr Kontext zum Schreiben dieses Programms mit Go wünschen, lesen Sie das Tutorial So schreiben Sie ein ersten Programm in Go.

      Sie können dies tun, indem Sie zuerst eine neue Go-Datei erstellen und mit Ihrem bevorzugten Texteditor öffnen:

      Fügen Sie als Nächstes den folgenden Code in die Datei ein:

      helloworld.go

      package main
      import "fmt"
      func main() {
        fmt.Println("Hello, world!")
      }
      

      Speichern und schließen Sie die Datei dann.

      Wenn Sie Go nicht installiert haben, können Sie es mit dem folgenden Befehl installieren:

      • sudo apt install golang-go

      Nachdem Go installiert ist, können Sie Ihr neues Programm ausführen, um zu überprüfen, ob es funktioniert:

      Sie sehen die folgende Ausgabe:

      Output

      Hello, world!

      Sie haben Ihre Anwendung für die Paketierung als Snap vorbereitet. Als Nächstes installieren Sie die Software, die für den Beginn des Paketierungsvorgangs erforderlich ist.

      Schritt 2 – Installieren von Snapcraft

      In diesem Schritt laden Sie Snapcraft, das offizielle Snap-Anwendungs-Paketierungs-Tool, herunter und installieren es. Snapcraft ist über den Snap Store verfügbar, der standardmäßig in Ubuntu integriert ist. Das bedeutet, dass Sie Snapcraft von der Befehlszeile aus mit dem Befehl snap installieren können.

      Der Befehl snap entspricht dem Befehl apt, jedoch können Sie ihn zur Installation von Software aus dem Snap Store anstelle von Paketen aus den Apt-Repositorys verwenden.

      Um Snapcraft zu installieren, führen Sie den folgenden Befehl aus:

      • sudo snap install snapcraft --classic

      Verwenden Sie das Befehlsargument --classic, sodass Snapcraft ohne die strengen Sandboxing-Funktionen installiert wird, die Snaps normalerweise verwenden. Snapcraft benötigt dieses Argument, da es einen privilegierten Zugriff auf Ihr System erfordert, um Anwendungen zuverlässig zu paketieren.

      Sobald Sie Snapcraft installiert haben, sehen Sie Folgendes:

      Output

      snapcraft 3.9.8 from Canonical✓ installed

      Abschließend können Sie die Snapcraft-Installation überprüfen, indem Sie Folgendes ausführen:

      Dadurch wird in etwa Folgendes angezeigt:

      Output

      snapcraft, version 3.9.8

      Nachdem Sie Snapcraft installiert haben, können Sie nun die Konfiguration und Metadaten für Ihre Snap-Anwendung definieren.

      In diesem Schritt werden Sie zunächst die Konfiguration, die Struktur und die Metadaten für Ihre Snap-Anwendung definieren.

      Stellen Sie zuerst sicher, dass Sie immer noch in Ihrem Snap-Anwendungsverzeichnis arbeiten:

      Erstellen und bearbeiten Sie als Nächstes die Datei snapcraft.yaml mit Ihrem bevorzugten Texteditor:

      Sie verwenden die Datei snapcraft.yaml, um die gesamte Konfiguration für Ihre Snap-Anwendung zu speichern, einschließlich des Namens, der Beschreibung und der Version, sowie Einstellungen im Zusammenhang mit der Abhängigkeitsverwaltung und dem Sandboxing.

      Beginnen Sie mit der Definition des Namens, der Zusammenfassung, der Beschreibung und der Versionsnummer für Ihre Anwendung:

      snapcraft.yaml

      name: your-snap
      summary: A summary of your application in 78 characters or less.
      description: |
        A detailed description of your application.
        The description can have multiple lines.
      version: '1.0'
      

      Der Name Ihres Snap muss eindeutig sein, wenn Sie es im Snap Store veröffentlichen möchten – suchen Sie nach anderen Anwendungen mit demselben Namen, um sicherzustellen, dass er nicht bereits vergeben ist.

      Als Nächstes können Sie den/die Befehl(e) definieren, den/die Sie mit Ihrer Anwendung verknüpfen möchten. Dadurch kann Ihr Snap direkt von der Bash-Befehlszeile aus als normaler Befehl verwendet werden.

      Fügen Sie Folgendes zu Ihrer Datei snapcraft.yaml hinzu:

      snapcraft.yaml

      . . .
      apps:
        your-snap-command:
          command: your-snap
      

      your-snap-command ist der Name des Befehls, den Sie definieren möchten. Beispielsweise können Sie den Befehl helloworld verwenden, um Ihr Hello World-Programm auszuführen.

      Verwenden Sie command: your-snap, um Snapcraft mitzuteilen, was zu tun ist, wenn der Anwendungsbefehl ausgeführt ist. Im Fall des Hello World-Programms würden Sie den Wert helloworld verwenden, um auf die Datei helloworld.go zu verweisen, die Snapcraft die erfolgreiche Ausführung Ihres Programms ermöglicht.

      Daraus ergibt sich die folgende Beispielkonfiguration:

      snapcraft.yaml

      apps:
        helloworld:
          command: helloworld
      

      Wenn der Befehlsname genau mit dem Namen des Snaps übereinstimmt, können Sie ihn direkt von der Befehlszeile aus ausführen. Wenn der Befehl nicht mit dem Snap-Namen übereinstimmt, wird dem Befehl automatisch der Name des Snaps vorangestellt. Beispielsweise helloworld.command1.

      Abschließend können Sie die Teile definieren, aus denen sich Ihre Snap-Anwendung zusammensetzt. Snap-Anwendungen bestehen aus mehreren Teilen, die alle die Komponenten Ihrer Anwendung darstellen. In vielen Fällen gibt es nur einen Teil, nämlich die Anwendung selbst.

      Jeder Teil hat ein zugehöriges Plugin. Beispielsweise wird für in Ruby geschriebene Komponenten Ihrer Anwendung das Plugin ruby verwendet, und für in Go geschriebene Komponenten wird das Plugin go verwendet.

      Sie können den Snapcraft-Befehl list-plugins verwenden, um das/die richtigen Plugin(s) für Ihre Anwendung zu identifizieren:

      Dadurch wird in etwa folgende Liste ausgegeben:

      Output

      ant catkin-tools conda dump gradle make nil python rust autotools cmake crystal go kbuild maven nodejs qmake scons catkin colcon dotnet godeps kernel meson plainbox-provider ruby waf

      Die am häufigsten verwendeten Plugins sind solche für gängige Programmiersprachen wie Go, Rust, Ruby oder Python.

      Sobald Sie die richtigen Plugins für Ihre Anwendung identifiziert haben, können Sie damit beginnen, die Konfiguration parts zu Ihrer Datei snapcraft.yaml hinzuzufügen:

      snapcraft.yaml

      . . .
      parts:
        your-snap:
          plugin: plugin-name
          source: .
      

      Verwenden Sie den Konfigurationsparameter source, um den relativen Pfad zu dem Quellcode Ihrer Anwendung anzugeben. Normalerweise ist dies das gleiche Verzeichnis wie die Datei snapcraft.yaml selbst, sodass der Wert für source ein einzelner Punkt (.) ist.

      Anmerkung: Wenn Ihre Anwendungskomponente Abhängigkeiten hat, die für das Erstellen oder Ausführen der Anwendung erforderlich sind, können Sie diese mit den Attributen build-packages und stage-packages angeben. Die angegebenen Namen der Abhängigkeiten werden dann automatisch von dem Standard-Paketmanager für Ihr System abgerufen.

      Beispiel:

      snapcraft.yaml

      parts:
        your-snap:
        plugin: plugin-name
        source: .
        build-packages:
        - gcc
        - make
        stage-packages:
        - libcurl4
      

      Einige Snapcraft-Plugins haben ihre eigenen spezifischen Optionen, die für Ihre Anwendung erforderlich sein können. Daher ist es sinnvoll, die entsprechenden Handbuchseiten für Ihr Plugin hinzuzuziehen.

      • snapcraft help plugin-name

      Im Fall von Go-Anwendungen würden Sie auch den go-importpath angeben. Für die Hello World-Konfiguration ergibt sich daraus die folgende Beispielkofiguation:

      snapcraft.yaml

      parts:
        helloworld:
          plugin: go
          source: .
          go-importpath: helloworld
      

      Sie können Ihre Datei snapcraft.yaml offen lassen, um im nächsten Schritt weitere Konfigurationen hinzuzufügen.

      Sie haben die Basiskonfiguration für Ihre Snap-Anwendung definiert. Als Nächstes konfigurieren Sie die Sicherheits- und Sandboxing-Aspekte Ihrer Anwendung.

      Schritt 4 – Sichern Ihrer Snap-Anwendung

      Snap-Anwendungen sind so konzipiert, dass Sie in einer Sandbox-Umgebung ausgeführt werden können. In diesem Schritt konfigurieren Sie also Sandboxing für Ihr Snap. Als Erstes müssen Sie das Sandboxing für Ihre Anwendung aktivieren, was innerhalb von Snapcraft als confinement bekannt ist.

      Fügen Sie Folgendes zu Ihrer Datei snapcraft.yaml hinzu:

      snapcraft.yaml

      . . .
      confinement: strict
      

      Dadurch wird das Sandboxing für Ihre Anwendung aktiviert und verhindert, dass sie auf das Internet, andere laufende Snaps oder das Host-System selbst zugreifen kann. In den meisten Fällen müssen Anwendungen jedoch außerhalb ihrer Sandbox kommunizieren können, beispielsweise wenn sie auf das Internet zugreifen oder im Dateisystem lesen/schreiben müssen.

      Diese Berechtigungen, die innerhalb von Snapcraft als Schnittstellen bekannt sind, können Ihrer Snap-Anwendung mit Plugs gewährt werden. Mithilfe von Plugs können Sie eine sehr feine Kontrolle über das Sandboxing für Ihre Anwendung ausüben, um ihr nur den benötigten Zugriff zu geben und nicht mehr (Prinzip der geringsten Privilegien).

      Die genau benötigten Schnittstellen hängen von Ihrer Anwendung ab. Einige der am häufigsten verwendeten Schnittstellen sind:

      • audio-playback – Erlaubt die Audio-Ausgabe/Wiedergabe von Sounds.
      • audio-record – Erlaubt die Audio-Eingabe/Aufnahme.
      • camera – Erlaubt den Zugriff auf verbundene Webcams.
      • home – Erlaubt den Zugriff auf nicht versteckte Dateien in Ihrem Home-Verzeichnis.
      • network – Erlaubt den Zugriff auf das Netzwerk/Internet.
      • network-bind – Erlaubt die Bindung an Ports, um als Netzwerkdienst zu arbeiten.
      • system-files – Erlaubt den Zugriff auf das gesamte Dateisystem des Host-Rechners.

      Die vollständige Liste der verfügbaren Schnittstellen ist in der Snapcraft-Dokumentation unter Unterstützte Schnittstellen zu finden.

      Sobald Sie alle erforderlichen Schnittstellen für Ihre Anwendung identifiziert haben, können Sie damit beginnen, diese den Plugs innerhalb Ihrer Datei snapcraft.yaml zuzuweisen.

      Die folgende Beispielkonfiguration ermöglicht der Anwendung den Zugriff auf das Netzwerk und den Home-Bereich der Benutzer:

      snapcraft.yaml

      . . .
      plugs:
        your-snap-home:
          interface: home
        your-snap-network:
          interface: network
      

      Speichern und schließen Sie Ihre Datei.

      Der Name des Plug sollte ein beschreibender Name sein, um Benutzern die Identifizierung des Zwecks des Plug zu erleichtern.

      Sie haben das Sandboxing für Ihr Snap aktiviert und einige Plugs konfiguriert, um begrenzten Zugriff auf System-Ressourcen zu gewähren. Als Nächstes werden Sie die Erstellung Ihrer Snap-Anwendung abschließen.

      Schritt 5 – Erstellen und Testen Ihrer Snap-Anwendung

      Nachdem Sie nun die gesamte erforderliche Konfiguration für Ihr Snap geschrieben haben, können Sie mit der Erstellung und dem lokalen Testen des Snap-Paketes fortfahren.

      Wenn Sie diesem Tutorial mit einem Hello World-Programm als Ihre Anwendung gefolgt sind, sieht Ihre vollständige Datei snapcraft.yaml nun in etwa wie folgt aus:

      snapcraft.yaml

      name: helloworld
      summary: A simple Hello World program.
      description: |
        A simple Hello World program written in Go.
        Packaged as a Snap application using Snapcraft.
      version: '1.0'
      confinement: strict
      
      apps:
        helloworld:
          command: helloworld
      
      parts:
        helloworld:
          plugin: go
          source: .
          go-importpath: helloworld
      
      plugs:
        helloworld-home:
          interface: home
        helloworld-network:
          interface: network
      

      Um Ihre Snap-Anwendung zu erstellen, führen Sie den Befehl snapcraft aus dem Verzeichnis für Ihr Snap aus:

      Snapcraft startet dann automatisch einen virtuellen Rechner (VM) und beginnt mit der Erstellung Ihres Snap. Sobald die Erstellung abgeschlossen ist, wird Snapcraft beendet und Sie sehen in etwa Folgendes:

      Output

      Snapped your-snap_1.0_amd64.snap

      Jetzt können Sie Ihr Snap lokal installieren, um zu überprüfen, ob es funktioniert:

      • sudo snap install your-snap.snap --dangerous

      Das Befehlsargument --dangerous ist erforderlich, da Sie ein lokales Snap installieren, das nicht signiert wurde.

      Output

      your-snap 1.0 installed

      Sobald der Installationsvorgang abgeschlossen ist, können Sie Ihr Snap mit dem zugehörigen Befehl ausführen. Beispiel:

      Im Fall des Beispielprogramms Hello World würde sich die folgende Ausgabe ergeben:

      Output

      Hello, world!

      Sie können ebenfalls die Sandboxing-Richtlinie für Ihr Snap anzeigen, um sicherzustellen, dass die zugewiesenen Berechtigungen ordnungsgemäß erteilt wurden:

      • snap connections your-snap

      Dadurch wird eine Liste von Plugs und Schnittstellen ausgegeben, die in etwas wie folgt aussieht:

      Output

      snap connections your-snap Interface Plug Slot Notes home your-snap:your-snap-home :home - network your-snap:your-snap-network :network -

      In diesem Schritt haben Sie Ihr Snap erstellt und lokal installiert, um zu testen, ob es funktioniert. Als Nächstes veröffentlichen Sie Ihr Snap im Snap Store.

      Schritt 6 – Veröffentlichen Ihres Snap

      Nachdem Sie Ihre Snap-Anwendung erstellt und getestet haben, ist es nun an der Zeit, sie im Snap Store zu veröffentlichen.

      Melden Sie sich mit der Snapcraft-Befehlszeilenanwendung an Ihrem Snap Developer-Konto an:

      Folgen Sie den Eingabeaufforderungen, um Ihre E-Mail-Adresse und Ihr Passwort einzugeben.

      Als Nächstes müssen Sie den Namen der Anwendung im Snap Store registrieren:

      • snapcraft register your-snap

      Sobald Sie den Snap-Namen registriert haben, können Sie das erstellte Snap-Paket mithilfe von Push in den Shop übertragen:

      • snapcraft push your-snap.snap

      Sie sehen eine Ausgabe, die der folgenden ähnelt:

      Output

      Preparing to push 'your-snap_1.0_amd64.snap'. Install the review-tools from the Snap Store for enhanced checks before uploading this snap. Pushing 'your-snap_1.0_amd64.snap' [===================================================================================================] 100% Processing...| Ready to release! Revision 1 of 'your-snap' created.

      Bei jeder Push-Übertragung in den Snap Store wird die Versionsnummer erhöht, beginnend mit eins. Dies ist nützlich, um die verschiedenen Builds Ihres Snap zu identifizieren.

      Abschließend können Sie Ihr Snap für die Öffentlichkeit freigeben:

      • snapcraft release your-snap revision-number channel

      Wenn dies Ihre erste Push-Übertragung in den Snap Store ist, wird die Versionsnummer 1 sein. Sie können auch zwischen der Freigabe in den Kanälen stable, candidate, beta und edge wählen, wenn Sie mehrere Versionen Ihrer Anwendung in verschiedenen Entwicklungsstufen haben.

      Mit dem folgenden Befehl wird beispielsweise die Version 1 des Hello World-Snap für den Kanal stable freigegeben:

      • snapcraft release helloworld 1 stable

      Sie sehen eine Ausgabe, die der folgenden ähnelt:

      Output

      Track Arch Channel Version Revision latest amd64 stable 1.0 1 candidate ^ ^ beta ^ ^ edge ^ ^ The 'stable' channel is now open.

      Sie können nun im Snap Store nach Ihrer Anwendung suchen und auf einem Ihrer Geräte installieren.

      Snapcraft Store mit in den Suchergebnissen angezeigter HelloWorld-Anwendung

      In diesem letzten Schritt haben Sie Ihr erstelltes Snap-Paket in den Snap Store hochgeladen und für die Öffentlichkeit freigegeben.

      Zusammenfassung

      In diesem Artikel haben Sie eine Snap-Anwendung konfiguriert und erstellt und über den Snap Store für die Öffentlichkeit freigegeben. Sie verfügen nun über die grundlegenden Kenntnisse, die für die Wartung Ihrer Anwendung und die Erstellung neuer Anwendungen erforderlich sind.

      Wenn Sie Snaps weiter erkunden möchten, können Sie den gesamten Snap Store durchsuchen. Vielleicht möchten Sie auch die Snapcraft YAML-Referenz durchsehen, um mehr darüber zu erfahren und zusätzliche Attribute für Ihre Snap-Konfiguration zu identifizieren.

      Wenn Sie sich näher über die Snap-Entwicklung informieren möchten, empfehlen wir Ihnen, mehr über Snap Hooks und deren Implementierung zu lesen. Sie ermöglichen es Snaps, dynamisch auf Systemänderungen wie Upgrades oder Anpassungen der Sicherheitsrichtlinien zu reagieren.



      Source link