Creați cu ușurință o aplicație web cu codul Wix

Erstellen Sie einfach eine Web-App mit Wix-Code

⌛ Reading Time: 8 minutes

Dies ist ein gesponserter Artikel, der von Wix ermöglicht wurde. Die tatsächlichen Inhalte und Meinungen sind die alleinigen Ansichten des Autors, der die redaktionelle Unabhängigkeit beibehält, selbst wenn ein Beitrag gesponsert wird.

Wenn Sie Entwickler sind, können Sie beim Erstellen einer Website den DIY-Ansatz und -Code verwenden und alles selbst hosten. Wenn Sie wie die meisten von uns Endbenutzer / Verbraucher sind, können Sie mit einer Web Builder-Software schöne Websites mit nur wenigen Klicks erstellen.

Wix gehört zu letzterem, da es sich um einen Web Builder handelt, mit dem Sie mit nur wenigen Mausklicks kostenlos schöne Websites erstellen können. Aber mit der Einführung von Wix-Codehat es die Grenzen zwischen dem Ausführen selbst und der Verwendung eines Web Builders verwischt. Sie können jetzt beides tun.

Wenn Sie eine Web-App oder eine dynamische Website erstellen, müssen Sie komplizierte Fachsprache wie Datenbanken, Formulare und Javascripts verwenden, um eine interaktive Website zu erstellen. Die meisten Webbuilder bieten solche Tools nicht an, da ihre App dadurch erheblich komplizierter wird.

Wix Code fügt solche Dinge ohne Komplikationen zu seinen vorhandenen Webbuilding-Tools hinzu. Es bietet verschiedene Vorlagen zum Erstellen und Verwalten Ihrer Datenbanken und Formulare sowie das Hinzufügen von Javascript-Code zu Ihrer Site. Das Beste ist, dass Sie die Funktion für dynamische Seiten verwenden können, um Inhalte aus der Datenbank schnell zu füllen, sodass sie eher einem Content Management System als einem Website Builder ähneln.

Im folgenden Beispiel erstellen wir ein einfaches Routech.ro-Blog und fügen ihm aus Wix Code dynamische Funktionen hinzu.

Einrichten einer neuen Site mit Wix

Angenommen, Sie sind neu bei Wix, können Sie damit beginnen Eröffnen Sie ein Konto bei Wix. Sobald Sie ein Konto erstellt haben, werden Sie aufgefordert, Ihre Website zu erstellen.

Als Nächstes werden Sie aufgefordert, den Typ der Website auszuwählen, die Sie erstellen möchten. Da ich ein Routech.ro-Blog repliziere, habe ich die Option “Blog” ausgewählt.

Im nächsten Bildschirm werden Sie gefragt, wie Sie Ihre Website erstellen möchten.

wix-create-website

Wix ADI verwendet künstliche Intelligenz, um automatisch eine Website für Sie zu erstellen. Wenn Sie lieber manuell arbeiten möchten, wählen Sie die Wix Editor-Methode. (Um auf Wix-Code zugreifen zu können, müssen Sie letzteres verwenden. Wenn Sie Wix ADI ausgewählt haben, können Sie später noch in den Editor-Modus wechseln.)

In diesem Beispiel habe ich den Wix-Editor verwendet, um die vollständige Kontrolle über das Erscheinungsbild der Site zu haben. Von dort aus können Sie mit einer Vorlage beginnen. (Es gibt Tausende von ihnen.)

wix-editor-template-page

Um es einfach zu halten, habe ich mit einer leeren Vorlage mit einem klassischen Layout begonnen. Das folgende Bild zeigt, wie es aussieht.

wix-code-mte-layout

Zugriff auf Wix-Code

Um auf Wix Code zuzugreifen, gehen Sie zu “Tools” und aktivieren Sie die Option “Developer Tools”.

Sie sehen nun eine neue Spalte “Site Structure”. Hier können Sie auf alle Wix Code-Funktionen zugreifen.

Wix-Site-Struktur-Spalte

Erstellen von Datenbanken zum Speichern von Posts

Eine der großartigen Funktionen von Wix Code ist die Datenbankfunktion, mit der Sie Datenbanken (auch als Sammlung bezeichnet) erstellen und Daten darin speichern können. Für ein Blog müssen wir eine Datenbank erstellen, in der alle unsere Beiträge gespeichert werden. Klicken Sie im Abschnitt “Datenbank” auf “Neue Sammlung hinzufügen”. Geben Sie Ihrer Sammlung einen Namen und geben Sie ihren Zweck an. Es gibt verschiedene Datenbanktypen, aus denen Sie auswählen können, darunter benutzergenerierte Inhalte, Mitgliederübermittlung, private Daten usw.

wix-new-collection

Sobald die Sammlung erstellt wurde, können Sie Felder und Daten hinzufügen.

wix-add-collection-Felder

Wir haben eine Posts-Datenbank erstellt, die den Titel, den Inhalt, das Veröffentlichungsdatum und verschiedene Aspekte eines Blogposts enthält. Als Nächstes müssen wir den Datenbankinhalt auf der Hauptwebsite auffüllen.

Dynamische Seiten

Dynamische Seiten ähneln eher einer Vorlagenseite, auf der Sie ein Design erstellen und mit der Datenbank verbinden können. Alle Elemente in Ihrer Datenbank werden automatisch unter ihren eigenen URLs auf der Startseite angezeigt. Zum Beispiel haben wir sechs Beiträge in der Datenbank. Mit einer einzigen dynamischen Seite können alle Beiträge auf der Hauptseite angezeigt werden. Dies erspart Ihnen den Aufwand, manuell eine einzelne Seite für jeden Beitrag zu erstellen. Es gibt zwei Hauptarten von dynamischen Seiten in Wix Code: eine dient zum Anzeigen eines einzelnen Elements, die andere für die Kategorie (eine Sammlung ähnlicher Elemente in einer Liste).

Im Folgenden wird gezeigt, wie Sie dynamische Seiten erstellen und mit der Site verknüpfen.

1. Klicken Sie in der schwebenden Symbolleiste auf das erste Symbol und wählen Sie “Dynamische Seiten”. Klicken Sie auf die Schaltfläche “Zur Site hinzufügen”.

wix-code-add-dynamic-page

2. Wählen Sie im Popup die Option „Artikelseite“.

wix-code-dynamic-item-page

3. Wählen Sie in der URL das Feld (in der Datenbank) aus, das für die URL verwendet werden soll. In diesem Fall habe ich den “Titel” als URL festgelegt.

wix-code-dynamic-pages-url

4. Entwerfen Sie als Nächstes die Seite und fügen Sie Felder aus der Datenbank hinzu. Mit jedem Element, das Sie auf die Seite ziehen, können Sie auf die Schaltfläche „Mit Daten verbinden“ klicken, um es mit dem Feld aus der Datenbank zu verknüpfen. Zum Beispiel habe ich ein “Header 1” -Element auf die Seite gezogen und es mit dem “Title” -Feld in der Posts-Datenbank verknüpft.

wix-code-dynamic-page-link-data

Und ich habe das gleiche für das vorgestellte Bild, den Post-Inhalt usw. getan.

wix-code-dynamic-page-design

5. Sobald Sie mit dem Design fertig sind, können Sie eine Vorschau anzeigen und sehen, wie es am Frontend aussieht.

Wix-Code-Vorschau

6. Der nächste Schritt besteht darin, die dynamische Seite von der Startseite aus zu verknüpfen. Laden Sie die Startseite und fügen Sie im Abschnitt “Listen und Raster” ein Repeater-Widget hinzu. Verbinden Sie das Widget mit der Posts-Datenbank und verknüpfen Sie jedes Element im Widget mit den Feldern in der Datenbank. Scrollen Sie im Abschnitt “Verbindung herstellen mit” nach unten und wählen Sie im Abschnitt “Dynamische Seiten” die Option “Beiträge” aus.

wix-code-link-dynamic-page

Das ist es.

wix-code-home-page-vorschau

Sie sehen, dass wir nur eine dynamische Seite erstellt haben und automatisch alle Seiten für jedes Element in der Datenbank generiert werden. Sie können das Gleiche tun, um auch eine dynamische Kategorieseite hinzuzufügen.

Hinzufügen von Javascript zu Seiten

Wenn Sie ein versierter Javascript-Codierer sind, können Sie jeder zusätzlichen Funktion auf jeder Seite Javascript hinzufügen. Wenn Sie Ihrer Seite beispielsweise ein Benutzerformular hinzugefügt haben, können Sie das Formularfeld vor dem Senden mithilfe von Javascript überprüfen.

Hinweis: Um einer Seite Javascript-Code hinzuzufügen, wechseln Sie zu einer beliebigen Seite (oder zu der Seite, auf der der Code angezeigt werden soll) und klicken Sie unten im Code auf die Schaltfläche „Seitencode“. Ein Fenster wird angezeigt und Sie können dort Ihren Code hinzufügen.

wix-code-page-code

1. Wir haben ein einfaches Formular erstellt, in dem der Vorname, der Nachname und die E-Mail-Adresse des Benutzers erfasst werden. Für dieses Formular möchten wir die E-Mail-Adresse überprüfen und sicherstellen, dass das Feld “E-Mail bestätigen” mit dem Feld “E-Mail” übereinstimmt.

2. Fügen Sie dem Abschnitt „Seitencode“ den folgenden Code hinzu:

Dadurch wird die E-Mail-Adresse überprüft und die Fehlermeldung angezeigt, wenn die E-Mail ungültig ist.

Wix-Code-Javascript-Validierung

Mit Javascript können Sie viel anfangen. Probier das aus Beispiele hier für mehr Informationen.

Externe APIs

Dies ist der einzige Schritt, bei dem es komplizierter werden könnte. Wix Code ist jetzt in die externe API integriert, sodass Sie problemlos eine Verbindung zu Diensten von Drittanbietern wie Amazon, Dropbox, Google Drive, Twitter, IFTTT, Zapier usw. herstellen können. Ich werde hier nicht auf Details eingehen, aber wenn Sie interessiert sind, Sie kann ihre überprüfen API-Dokumentation.

Fazit

Wenn Sie technisch nicht versiert oder Entwickler sind, kann das Erstellen einer eigenen Website eine mühsame Aufgabe sein. Wix hat gute Arbeit geleistet, um die Erstellung von Websites zum Kinderspiel zu machen. Mit Wix Code geht es noch einen Schritt weiter und gibt Ihnen viel Kontrolle über Ihre Site. Sie haben jetzt Zugriff auf komplizierte Webentwickler-Tools und können die Funktionsweise Ihrer Website vollständig steuern. Dies geschieht mit einem einfachen Klick, Drag & Drop, ohne dass Programmiererfahrung erforderlich ist.

Ein großes Lob an Wix für die Erstellung eines so benutzerfreundlichen Tools, das viele Probleme löst.

Probieren Sie Wix Code aus und teilen Sie uns Ihre Meinung mit.

Wix-Code