Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Erstellen eines mit Notizen versehenen SAAS mit ASP.NET MVC 5

Read Time: 32 mins

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

1. Einleitung

In diesem Tutorial zeige ich Ihnen, wie Sie ein Software-as-a-Service (SaaS) Minimum Viable Product (MVP) erstellen. Der Einfachheit halber wird die Software unseren Kunden ermöglichen, eine Liste mit Notizen zu speichern.

Ich werde drei Abonnements anbieten: Der Basic-Plan hat ein Limit von 100 Notizen pro Benutzer, der Professional-Plan ermöglicht es Kunden, bis zu 10.000 Notizen zu speichern, und der Business-Plan erlaubt eine Million Notizen. Die Pläne werden jeweils 10, 20 und 30 US-Dollar pro Monat kosten. Um Zahlungen von unseren Kunden zu erhalten, werde ich Stripe als Zahlungsgateway verwenden und die Website wird in Azure bereitgestellt.

2. Einrichtung

2.1 Streifen

Stripe hat sich in kürzester Zeit zu einem sehr bekannten Payment Gateway entwickelt, vor allem wegen seines entwicklerfreundlichen Ansatzes mit einfachen und gut dokumentierten APIs. Auch die Preisgestaltung ist sehr klar: 2,9% pro Transaktion + 30 Cent. Keine Einrichtungsgebühren oder versteckte Gebühren.

Kreditkartendaten sind ebenfalls sehr sensible Daten, und um diese Daten auf meinem Server empfangen und speichern zu können, muss ich PCI-konform sein. Da dies für die meisten kleinen Unternehmen keine leichte oder schnelle Aufgabe ist, gehen viele Zahlungsgateways vor: Sie zeigen die Bestelldetails an und wenn der Kunde dem Kauf zustimmt, leiten Sie den Kunden auf eine Seite des Zahlungsgateways (Bank , PayPal usw.) und leiten den Kunden dann zurück.

Stripe hat einen schöneren Ansatz für dieses Problem. Sie bieten eine JavaScript-API, sodass wir die Kreditkartennummer direkt vom Front-End an die Server von Stripe senden können. Sie geben ein Token zur einmaligen Verwendung zurück, das wir in unserer Datenbank speichern können. Jetzt benötigen wir für unsere Website nur noch ein SSL-Zertifikat, das wir schnell ab ca. 5 US-Dollar pro Jahr erwerben können.

Melden Sie sich jetzt für ein Stripe-Konto an, da Sie es zum Aufladen Ihrer Kunden benötigen.

2.2 Azure

Als Entwickler möchte ich mich nicht mit Dev-Ops-Aufgaben und der Verwaltung von Servern befassen, wenn ich nicht muss. Azure-Websites ist meine Wahl zum Hosten, da es sich um eine vollständig verwaltete Platform-as-a-Service handelt. Es ermöglicht mir die Bereitstellung aus Visual Studio oder Git, ich kann es leicht skalieren, wenn mein Dienst erfolgreich ist, und ich kann mich auf die Verbesserung meiner Anwendung konzentrieren. Sie bieten Neukunden 200 US-Dollar an, die sie im ersten Monat für alle Azure-Dienste ausgeben können. Das ist genug, um die Dienste zu bezahlen, die ich für dieses MVP nutze. Registrieren Sie sich für Azure.

2.3 Mandrill und Mailchimp: Transaktions-E-Mail

Das Versenden von E-Mails aus unserer Anwendung scheint keine sehr komplexe Aufgabe zu sein, aber ich möchte überwachen, wie viele E-Mails erfolgreich zugestellt werden, und auch responsive Vorlagen einfach entwerfen. Das bietet Mandrill und lässt uns bis zu 12.000 E-Mails pro Monat kostenlos versenden. Mandrill wurde von MailChimp entwickelt, damit sie über das Geschäft mit dem Versenden von E-Mails Bescheid wissen. Außerdem können wir unsere Vorlagen aus MailChimp erstellen, sie nach Mandrill exportieren und mit unseren Vorlagen E-Mails aus unserer App senden. Melden Sie sich für Mandrill an und melden Sie sich für MailChimp an.

2.4 Visual Studio 2013 Community-Edition

Zu guter Letzt benötigen wir Visual Studio, um unsere Anwendung zu schreiben. Diese Edition, die erst vor wenigen Monaten auf den Markt kam, ist völlig kostenlos und entspricht in etwa Visual Studio Professional. Sie können es hier herunterladen, und das ist alles, was wir brauchen, damit wir uns jetzt auf die Entwicklung konzentrieren können.

3. Erstellen der Website

Als erstes müssen wir Visual Studio 2013 öffnen. Erstellen Sie eine neue ASP.NET-Webanwendung:

  • Gehen Sie zu Datei > Neues Projekt und wählen Sie ASP.NET-Webanwendung.
  • Wählen Sie im Dialogfeld ASP.NET-Vorlage die MVC-Vorlage aus, und wählen Sie Individuelle Benutzerkonten aus.
New ASPNET MVC ProjectNew ASPNET MVC ProjectNew ASPNET MVC Project

Dieses Projekt erstellt eine Anwendung, bei der sich ein Benutzer anmelden kann, indem er ein Konto auf der Website registriert. Die Website ist mit Bootstrap gestaltet, und ich werde den Rest der App mit Bootstrap erstellen. Wenn Sie in Visual Studio F5 drücken, um die Anwendung auszuführen, sehen Sie Folgendes:

Example HomepageExample HomepageExample Homepage

Dies ist die Standard-Landingpage, und diese Seite ist einer der wichtigsten Schritte, um unsere Besucher in Kunden zu verwandeln. Wir müssen das Produkt erklären, den Preis für jeden Plan zeigen und ihnen die Möglichkeit bieten, sich für eine kostenlose Testversion anzumelden. Für diese Anwendung erstelle ich drei verschiedene Abonnementpläne:

  • Basis: 10 $ pro Monat
  • Professionell: $20 pro Monat
  • Geschäft: 30 $ pro Monat

3.1 Landingpage

Wenn Sie Hilfe beim Erstellen einer Zielseite benötigen, können Sie ThemeForest besuchen und eine Vorlage kaufen. Für dieses Beispiel verwende ich eine kostenlose Vorlage, und Sie können das Endergebnis auf dem Foto unten sehen.

Landing PageLanding PageLanding Page

3.2 Registrierungsseite

Auf der Website, die wir im vorherigen Schritt erstellt haben, erhalten wir auch eine Registrierungsformularvorlage. Wenn Sie von der Zielseite zu Preise navigieren und auf Kostenlose Testversion klicken, navigieren Sie zur Registrierungsseite. Dies ist das Standarddesign:

Registration PageRegistration PageRegistration Page

Wir benötigen hier nur ein zusätzliches Feld, um den Abonnementplan zu identifizieren, dem der Benutzer beitritt. Wenn Sie in der Navigationsleiste des Fotos sehen können, übergebe ich das als GET-Parameter. Dazu generiere ich das Markup für die Links auf der Landingpage mit dieser Codezeile:

Um den Abonnementplan an das Back-End zu binden, muss ich die Klasse RegisterViewModel ändern und die neue Eigenschaft hinzufügen.

Ich muss auch AccountController.cs bearbeiten und das Aktionsregister ändern, um den Plan zu erhalten:

Jetzt muss ich die Plankennung in einem versteckten Feld im Registrierungsformular rendern:

Der letzte Schritt besteht darin, den Benutzer für den Plan zu abonnieren, aber dazu kommen wir etwas später. Außerdem aktualisiere ich das Design des Anmeldeformulars.

Updated Registration FormUpdated Registration FormUpdated Registration Form

3.3 Login-Seite

Login PageLogin PageLogin Page

Im Template bekommen wir auch eine Login-Seite und Action-Controller implementiert. Das einzige, was ich tun muss, ist, dass es hübscher aussieht.

Updated Login PageUpdated Login PageUpdated Login Page

3.4 Passwort vergessen

Schauen Sie sich den vorherigen Screenshot noch einmal an und Sie werden feststellen, dass ich ein "Passwort vergessen?" hinzugefügt habe. Verknüpfung. Dies ist bereits in der Vorlage implementiert, aber standardmäßig auskommentiert. Ich mag das Standardverhalten nicht, bei dem der Benutzer die E-Mail-Adresse bestätigen muss, um das Passwort zurücksetzen zu können. Lassen Sie uns diese Einschränkung aufheben. Bearbeiten Sie in der Datei AccountController.cs die Aktion ForgotPassword:

Der Code zum Senden der E-Mail mit dem Link zum Zurücksetzen des Passworts ist auskommentiert. Ich werde etwas später zeigen, wie man diesen Teil implementiert. Jetzt bleibt nur noch das Design der Seiten zu aktualisieren:

  • ForgotPassword.cshtml: Formular, das dem Benutzer angezeigt wird, um seine E-Mail-Adresse einzugeben.
  • ForgotPasswordConfirmation.cshtml: Bestätigungsnachricht, nachdem der Link zum Zurücksetzen per E-Mail an den Benutzer gesendet wurde.
  • ResetPassword.cshtml: Formular zum Zurücksetzen des Passworts nach dem Navigieren zum Zurücksetzen-Link aus der E-Mail.
  • ResetPasswordConfirmation.cshtml: Bestätigungsmeldung nach dem Zurücksetzen des Passworts.
Forgot Password PageForgot Password PageForgot Password Page

4. ASP.NET-Identität 2.0

ASP.NET Identity ist eine ziemlich neue Bibliothek, die auf der Annahme basiert, dass sich Benutzer nicht mehr nur mit Benutzernamen und Kennwort anmelden. Die OAuth-Integration, mit der sich Benutzer über soziale Kanäle wie Facebook, Twitter und andere anmelden können, ist jetzt sehr einfach. Außerdem kann diese Bibliothek mit Web-API und SignalR verwendet werden.

Andererseits kann die Persistenzschicht ersetzt werden, und es ist einfach, verschiedene Speichermechanismen wie NoSQL-Datenbanken einzubinden. Für die Zwecke dieser Anwendung verwende ich Entity Framework und SQL Server.

Das gerade erstellte Projekt enthält die folgenden drei NuGet-Pakete für ASP.NET Identity:

  • Microsoft.AspNet.Identity.Core: Dieses Paket enthält die Kernschnittstellen für ASP.NET Identity.
  • Microsoft.AspNet.Identity.EntityFramework: Dieses Paket enthält die Entity Framework-Implementierung der vorherigen Bibliothek. Die Daten werden in SQL Server gespeichert.
  • Microsoft.AspNet.Identity.Owin: Dieses Paket verbindet die Middleware-OWIN-Authentifizierung mit ASP.NET Identity.

Die Hauptkonfiguration für Identity befindet sich in App_Start/IdentityConfig.cs. Dies ist der Code, der Identity initialisiert.

Wie Sie im Code sehen können, ist es ziemlich einfach, die Validatoren und Passwort-Validatoren der Benutzer zu konfigurieren, und auch die Zwei-Faktor-Authentifizierung kann aktiviert werden. Für diese Anwendung verwende ich eine Cookie-basierte Authentifizierung. Das Cookie wird vom Framework generiert und ist verschlüsselt. Auf diese Weise können wir horizontal skalieren und weitere Server hinzufügen, wenn unsere Anwendung dies benötigt.

5. E-Mails mit Mandrill senden

Sie können MailChimp verwenden, um E-Mail-Vorlagen zu entwerfen, und Mandrill, um E-Mails aus Ihrer Anwendung zu senden. Zunächst müssen Sie Ihr Mandrill-Konto mit Ihrem MailChimp-Konto verknüpfen:

  • Melden Sie sich bei MailChimp an, klicken Sie im rechten Bereich auf Ihren Benutzernamen und wählen Sie Konto aus der Dropdown-Liste.
  • Klicken Sie auf Integrationen und suchen Sie die Option Mandrill in der Liste der Integrationen.
  • Klicken Sie darauf, um die Integrationsdetails anzuzeigen, und klicken Sie auf die Schaltfläche Verbindung autorisieren. Sie werden zu Mandrill weitergeleitet. Lassen Sie die Verbindung zu und die Integration wird abgeschlossen.
Setting Up MandrillSetting Up MandrillSetting Up Mandrill

5.1 E-Mail-Vorlage „Willkommen bei meinen Notizen“ erstellen

Navigieren Sie in MailChimp zu Vorlagen und klicken Sie auf Vorlage erstellen.

Creating a TemplateCreating a TemplateCreating a Template

Wählen Sie nun eine der von MailChimp angebotenen Vorlagen aus. Ich habe das erste gewählt:

Choosing a TemplateChoosing a TemplateChoosing a Template

Im Vorlageneditor ändern wir den Inhalt nach Belieben. Beachten Sie, wie Sie unten sehen können, dass wir Variablen verwenden können. Das Format ist *|VARIABLE_NAME|*. Anhand des Codes legen wir diese für jeden Kunden fest. Wenn Sie fertig sind, klicken Sie unten rechts auf Speichern und beenden.

Populating the TemplatePopulating the TemplatePopulating the Template

Klicken Sie in der Liste Vorlagen auf der rechten Seite auf Bearbeiten und wählen Sie An Mandrill senden. Nach einigen Sekunden erhalten Sie eine Bestätigungsmeldung.

Sending To MandrillSending To MandrillSending To Mandrill

Um zu bestätigen, dass die Vorlage exportiert wurde, navigieren Sie zu Mandrill und melden Sie sich an. Wählen Sie Ausgehend aus dem linken Menü und dann Vorlagen aus dem oberen Menü. Im Bild unten sehen Sie, dass die Vorlage exportiert wurde.

Outbound DataOutbound DataOutbound Data

Wenn Sie auf den Namen der Vorlage klicken, werden weitere Informationen zur Vorlage angezeigt. Das Feld "Template Slug" ist die Textkennung, die wir in unserer Anwendung verwenden, um Mandrill API mitzuteilen, welche Vorlage wir für die von uns gesendete E-Mail verwenden möchten.

Template MarkupTemplate MarkupTemplate Markup

Ich überlasse es Ihnen als Übung, eine Vorlage "Passwort zurücksetzen" zu erstellen.

Reset Password TemplateReset Password TemplateReset Password Template

5.2 Senden von E-Mails aus meinen Notizen

Sending EmailsSending EmailsSending Emails

Installieren Sie zunächst Mandrill von NuGet. Fügen Sie anschließend Ihren Mandrill-API-Schlüssel zu den Web.config-App-Einstellungen hinzu. Öffnen Sie nun App_Start/IdentityConfig.cs und Sie sehen die ausstehende Implementierung der Klasse EmailService:

Obwohl diese Klasse nur die Methode SendAsync hat, werden wir neue Methoden implementieren, da wir zwei verschiedene Vorlagen haben (Welcome Email Template und Reset Password Template). Die endgültige Implementierung sieht so aus.

So senden Sie eine E-Mail über die Mandrill-API:

  1. E-Mail-Nachricht erstellen.
  2. Legen Sie die Werte der Nachrichtenvariablen fest.
  3. Senden Sie eine E-Mail mit Angabe des Vorlagen-Slugs.

In AccountController -> Aktion registrieren ist dies das Code-Snippet zum Versenden der Willkommens-E-Mail:

In AccountController -> ForgotPassword-Aktion ist dies der Code zum Senden der E-Mail:

6. Integration von SAAS Ecom für die Abrechnung

Eine wichtige Sache bei SAAS-Anwendungen ist die Abrechnung. Wir müssen eine Möglichkeit haben, unseren Kunden regelmäßig, in diesem Beispiel monatlich, Gebühren zu berechnen. Da dieser Teil viel Arbeit erfordert, aber dem von uns verkauften Produkt nichts Wertvolles hinzufügt, werden wir die zu diesem Zweck erstellte Open-Source-Bibliothek SAAS Ecom verwenden.

6.1 Datenmodell: Entity Framework Code First

SAAS Ecom ist von Entity Framework Code First abhängig. Für diejenigen unter Ihnen, die damit nicht vertraut sind, können Sie sich mit Entity Framework Code First auf das Erstellen von C#-POCO-Klassen konzentrieren, sodass Entity Framework die Klassen Datenbanktabellen zuordnen kann. Es folgt der Idee der Konvention gegenüber der Konfiguration, aber Sie können bei Bedarf weiterhin Zuordnungen, Fremdschlüssel usw. angeben.

Um SAAS Ecom zu unserem Projekt hinzuzufügen, installieren Sie einfach die Abhängigkeit mit NuGet. Die Bibliothek ist in zwei Pakete aufgeteilt: SaasEcom.Core, das die Geschäftslogik enthält, und SaasEcom.FrontEnd, das einige Ansichtshelfer zur Verwendung in einer MVC-Anwendung enthält. Fahren Sie fort und installieren Sie SaasEcom.FrontEnd.

Installing SaasEcomInstalling SaasEcomInstalling SaasEcom

Sie können sehen, dass Ihrer Lösung einige Dateien hinzugefügt wurden:

  • Inhalt/Karten-Icons: Kreditkarten-Icons zur Anzeige im Abrechnungsbereich
  • Controller/BillingController: Hauptcontroller
  • Controller/StripeWebhooksController: Stripe-Webhooks
  • Scripts/saasecom.card.form.js: Skript zum Hinzufügen einer Kreditkarte zu Stripe
  • Aufrufe/Abrechnung: Aufrufe und Teilansichten
Files Added To The ProjectFiles Added To The ProjectFiles Added To The Project

Es sind noch einige Schritte erforderlich, um SAAS Ecom zu integrieren, also besorgen Sie sich Ihre Stripe-API-Schlüssel und fügen Sie sie zu Web.config hinzu.

Wenn Sie versuchen zu kompilieren, werden Fehler angezeigt:

Öffnen Sie die Datei Models/IdentityModels.cs, und lassen Sie dann die Klasse ApplicationUser von SaasEcomUser erben.

Öffnen Sie die Datei Models/IdentityModels.cs, und dann sollte Ihre Klasse ApplicationDbContext von SaasEcomDbContext<ApplicationUser> erben.

Da ApplicationUser von SaasEcomUser erbt, besteht das Standardverhalten für Entity Framework darin, zwei Tabellen in der Datenbank zu erstellen. Da wir das in diesem Fall nicht benötigen, müssen wir diese Methode der Klasse ApplicationDbContext hinzufügen, um anzugeben, dass sie nur eine Tabelle verwenden soll:

Da wir gerade den DbContext aktualisiert haben, muss auch die Datenbank aktualisiert werden, damit er von SaasEcomDbContext erbt. Aktivieren Sie dazu Codemigrationen und aktualisieren Sie die Datenbank, indem Sie den NuGet-Paket-Manager über das Menü Extras > NuGet-Paket-Manager > Paket-Manager-Konsole öffnen:

Wenn Sie beim Ausführen von update-database einen Fehler erhalten, befindet sich die Datenbank (SQL Compact) in Ihrem AppData-Ordner. Öffnen Sie die Datenbank, löschen Sie alle darin enthaltenen Tabellen und führen Sie update-database erneut aus.

6.2 Erstellen der Abonnementpläne in Stripe und Datenbank

Der nächste Schritt im Projekt besteht darin, Stripe zu integrieren, um unseren Kunden monatliche Gebühren zu berechnen, und dafür müssen wir die Abonnementpläne und Preise in Stripe erstellen. Melden Sie sich also bei Ihrem Stripe-Dashboard an und erstellen Sie Ihre Abonnementpläne, wie Sie auf den Bildern sehen können.

StripeStripeStripe
Stripe PlansStripe PlansStripe Plans
Stripe Test PlansStripe Test PlansStripe Test Plans

Nachdem wir die Abonnementpläne in Stripe erstellt haben, fügen wir sie der Datenbank hinzu. Wir tun dies, damit wir die Stripe-API nicht jedes Mal abfragen müssen, wenn wir Informationen zu Abonnementplänen benötigen.

Außerdem können wir spezifische Eigenschaften für jeden Plan speichern. In diesem Beispiel speichere ich als Eigenschaft jedes Plans die Anzahl der Notizen, die ein Benutzer speichern kann: 100 Notizen für den Basisplan, 10.000 für den Profiplan und 1 Million für den Geschäftsplan. Wir fügen diese Informationen der Seed-Methode hinzu, die jedes Mal ausgeführt wird, wenn die Datenbank aktualisiert wird, wenn wir update-database über die NuGet Package Manager-Konsole ausführen.

Öffnen Sie die Datei Migrations/Configuration.cs und fügen Sie diese Methode hinzu:

6.3 Abonnieren eines Kunden für einen Plan bei der Anmeldung

Als nächstes müssen wir sicherstellen, dass wir jedes Mal, wenn sich ein Benutzer für unsere App registriert, den Benutzer auch in Stripe mithilfe seiner API erstellen. Dazu verwenden wir die SAAS Ecom API, und wir müssen nur die Aktion Register on AccountController bearbeiten und diese Zeilen hinzufügen, nachdem der Benutzer in der Datenbank erstellt wurde:

Die Methode SubscribeUserAsync abonniert den Benutzer für den Plan in Stripe, und wenn der Benutzer noch nicht in Stripe vorhanden ist, wird er ebenfalls erstellt. Dies ist nützlich, wenn Sie ein Freemium-SAAS haben und Benutzer in Stripe nur erstellen, wenn sie einen kostenpflichtigen Plan haben. Eine weitere kleine Änderung in der Registrierungsaktion von AccountController besteht darin, das RegistrationDate und LastLoginTime beim Erstellen des Benutzers zu speichern:

Da wir die Abhängigkeit SubscriptionsFacade von SAAS Ecom benötigen, fügen Sie sie als Eigenschaft zu Account Controller hinzu:

Sie können die Instanziierung mit Dependency Injection vereinfachen, aber dies kann in einem anderen Artikel behandelt werden.

6.4 Abrechnungsansichten integrieren

Als wir SAAS Ecom zum Projekt hinzugefügt haben, wurden auch einige Teilansichten hinzugefügt. Sie verwenden das Hauptlayout _Layout.cshtml, aber dieses Layout wird von der Zielseite verwendet. Wir müssen ein anderes Layout für den Webanwendungsbereich oder das Kunden-Dashboard hinzufügen.

Ich habe eine sehr ähnliche Version der _Layout.cshtml erstellt, die erstellt wird, wenn Sie ein neues MVC-Projekt in Visual Studio hinzufügen. Sie können die _DashboardLayout.cshtml in GitHub sehen.

Die Hauptunterschiede sind, dass ich font-awesome und einen Bereich hinzugefügt habe, um Bootstrap-Benachrichtigungen anzuzeigen, wenn sie vorhanden sind:

Legen Sie für die Ansichten im Ordner Ansichten/Billing das Layout auf _DashboardLayout fest, andernfalls wird das Standardlayout _Layout.cshtml verwendet. Gehen Sie für Ansichten im Ordner Ansichten/Verwalten genauso vor:

Ich habe "DashboardLayout" leicht modifiziert, um einige Stile von der Hauptwebsite zu verwenden, und es sieht so aus, nachdem ich mich angemeldet und zum Abschnitt Abrechnung navigiert habe:

Billing TemplateBilling TemplateBilling Template

Im Abrechnungsbereich kann ein Kunde ein Abonnement kündigen oder upgraden / downgraden. Fügen Sie Zahlungsdetails mithilfe der Stripe-JavaScript-API hinzu, damit wir nicht PCI-konform sein müssen und nur SSL im Server benötigen, um Zahlungen von unseren Kunden entgegenzunehmen.

Payment TemplatePayment TemplatePayment Template

Um Ihre neue Anwendung richtig zu testen, können Sie mehrere von Stripe bereitgestellte Kreditkartennummern verwenden.

Testing PaymentTesting PaymentTesting Payment

Das letzte, was Sie vielleicht tun möchten, ist die Einrichtung von Stripe Webhooks. Dies wird verwendet, damit Stripe Sie über Ereignisse in Ihrer Abrechnung benachrichtigt, z. B. Zahlung erfolgreich, Zahlung überfällig, Testversion läuft bald ab usw. Sie können eine vollständige Liste aus der Stripe-Dokumentation abrufen. Das Stripe-Ereignis wird als JSON an eine öffentlich zugängliche URL gesendet. Um dies lokal zu testen, möchten Sie wahrscheinlich Ngrok verwenden.

Bei der Installation von SAAS Ecom wurde ein neuer Controller hinzugefügt, um die Webhooks von Stripe zu verarbeiten: StripeWebhooksController.cs. Dort sehen Sie, wie das Ereignis Rechnungserstellung behandelt wird:

Sie können beliebig viele Events im Controller implementieren.

7. Erstellen von Notizfunktionen in unserer App

Der wichtigste Teil dieser SAAS-Anwendung besteht darin, unseren Kunden das Speichern von Notizen zu ermöglichen. Um diese Funktionalität zu erstellen, erstellen wir zunächst die Note-Klasse:

Fügen Sie eine Eins-zu-Viele-Beziehung von ApplicationUser zu Note hinzu:

Da sich der DbContext geändert hat, müssen wir eine neue Datenbankmigration hinzufügen, also öffnen Sie die Nuget Package Manager-Konsole und führen Sie Folgendes aus:

Dies ist der generierte Code:

Als nächstes brauchen wir den Controller MyNotes. Da wir bereits über die Modellklasse Notes verfügen, verwenden wir das Gerüst, um die Controller-Klasse zu erstellen, um Methoden mit Entity Framework erstellen, lesen, aktualisieren und löschen zu können. Wir verwenden das Gerüst auch, um die Ansichten zu generieren.

Add ScaffoldingAdd ScaffoldingAdd Scaffolding
Add ControllerAdd ControllerAdd Controller

Nachdem ein Benutzer erfolgreich bei My Notes registriert wurde, leiten Sie den Benutzer an dieser Stelle zur Index-Aktion von NotesController um:

Bisher haben wir eine CRUD-Schnittstelle (Create / Read / Update / Delete) für Notes erstellt. Wir müssen weiterhin überprüfen, wann Benutzer versuchen, Notizen hinzuzufügen, um sicherzustellen, dass sie genügend Speicherplatz in ihren Abonnements haben.

Leere Liste mit Notizen:

Index TemplateIndex TemplateIndex Template

Neue Notiz erstellen:

Creating a NoteCreating a NoteCreating a Note

Liste der Anmerkungen:

Listing NotesListing NotesListing Notes

Hinweisdetails:

Detailed NotesDetailed NotesDetailed Notes

Notiz bearbeiten:

Editing a NoteEditing a NoteEditing a Note

Löschen der Notiz bestätigen:

Deleting a NoteDeleting a NoteDeleting a Note

Ich werde das Standard-Markup leicht bearbeiten:

  • Im Formular zum Erstellen einer Notiz habe ich das Feld CreatedAt entfernt und den Wert im Controller festgelegt.
  • Im Formular zum Bearbeiten einer Notiz habe ich CreatedAt in ein ausgeblendetes Feld geändert, sodass es nicht bearbeitet werden kann.
  • Ich habe das CSS leicht modifiziert, damit dieses Formular auch ein bisschen schöner aussieht.

Als wir den Notes-Controller mit Entity Framework generierten, listete die Liste der Notizen alle Notizen in der Datenbank auf, nicht nur die Notizen für den angemeldeten Benutzer. Aus Sicherheitsgründen müssen wir überprüfen, dass Benutzer nur die Notizen sehen, ändern oder löschen können, die ihnen gehören.

Wir müssen auch überprüfen, wie viele Notizen ein Benutzer hat, bevor wir ihm erlauben, eine neue zu erstellen, um zu überprüfen, ob die Grenzen des Abonnementplans eingehalten werden. Hier ist der neue Code für NotesController:

Das ist es – wir haben die Kernfunktionalität für unsere SAAS-Anwendung.

8. Speicherung des Kundenstandorts für europäische Mehrwertsteuerzwecke

Zu Beginn dieses Jahres hat sich die Gesetzgebung in der Europäischen Union zur Mehrwertsteuer für Unternehmen, die digitale Dienstleistungen an private Verbraucher erbringen, geändert. Der Hauptunterschied besteht darin, dass Unternehmen Privatkunden und nicht Geschäftskunden mit gültiger USt-IdNr. Um zu überprüfen, in welchem ​​Land sie ansässig sind, müssen wir mindestens zwei dieser Formulare aufzeichnen:

  • die Rechnungsadresse des Kunden
  • die Internet Protocol (IP)-Adresse des vom Kunden verwendeten Geräts
  • Bankverbindung des Kunden
  • die Landesvorwahl der vom Kunden verwendeten SIM-Karte
  • der Standort des Festnetzanschlusses des Kunden, über den die Dienstleistung erbracht wird
  • andere kommerziell relevante Informationen (z. B. Produktcodierungsinformationen, die den Verkauf elektronisch mit einer bestimmten Gerichtsbarkeit verknüpfen)

Aus diesem Grund werden wir die IP-Adresse des Benutzers geolokalisieren, um sie zusammen mit der Rechnungsadresse und dem Kreditkartenland zu speichern.

8.1 Geo-Standort der IP-Adresse

Für die Geolokalisierung verwende ich Maxmind GeoLite2. Es ist eine kostenlose Datenbank, die uns das Land angibt, in dem sich eine IP befindet.

Maxmind Geo Lite2Maxmind Geo Lite2Maxmind Geo Lite2

Laden Sie die Datenbank herunter und fügen Sie sie zu App_Data hinzu, wie Sie auf dem Foto sehen können:

Adding The DatabaseAdding The DatabaseAdding The Database
Installation von NuGet MaxMind.GeoIP2.
NuGet PackagesNuGet PackagesNuGet Packages

Erstellen Sie Erweiterungen/GeoLocationHelper.cs.

In dieser statischen Klasse sind zwei Methoden implementiert:

  • GetCountryFromIP: Gibt den ISO-Code des Landes mit einer IP-Adresse zurück.
  • SelectListCountries: Gibt eine Liste der zu verwendenden Länder in einem Dropdown-Feld zurück. Es enthält den Länder-ISO-Code als Wert für jedes Land und den anzuzeigenden Ländernamen.

8.2 Kundenland bei Registrierung speichern

Speichern Sie in der Aktion Register from AccountController beim Anlegen des Benutzers die IP und das Land, zu dem die IP gehört:

Außerdem müssen wir beim Erstellen des Abonnements in Stripe den Steuerprozentsatz für diesen Kunden übergeben. Das machen wir ein paar Zeilen nach dem Anlegen des Benutzers:

Wenn ein Benutzer in der Europäischen Union ansässig ist, lege ich den Steuerprozentsatz standardmäßig auf dieses Abonnement fest. Die Regeln sind etwas komplexer, aber zusammenfassend:

  • Wenn Ihr Unternehmen in einem EU-Land registriert ist, berechnen Sie Kunden in Ihrem Land immer Mehrwertsteuer.
  • Wenn Ihr Unternehmen in einem EU-Land registriert ist, berechnen Sie nur den Kunden, die sich in anderen EU-Ländern befinden und kein umsatzsteuerpflichtiges Unternehmen sind.
  • Wenn Ihr Unternehmen außerhalb der EU registriert ist, berechnen Sie nur Kunden, die keine Unternehmen mit einer gültigen Umsatzsteuer-Identifikationsnummer sind, Mehrwertsteuer.

8.3 Hinzufügen einer Rechnungsadresse zu unserem Modell

Im Moment gestatten wir unseren Kunden nicht, eine Rechnungsadresse und ihre Umsatzsteuer-Identifikationsnummer zu speichern, wenn sie ein in der EU mehrwertsteuerpflichtiges Unternehmen sind. In diesem Fall müssen wir ihren Steuersatz auf 0 ändern.

SAAS Ecom stellt die BillingAddress-Klasse bereit, die jedoch keiner Entität des Modells zugeordnet ist. Der Hauptgrund dafür ist, dass es in einigen SAAS-Anwendungen sinnvoll sein kann, diese einer Organisationsklasse zuzuordnen, wenn mehrere Benutzer Zugriff auf dasselbe Konto haben. Wenn dies nicht der Fall ist, wie in unserem Beispiel, können wir diese Beziehung sicher zur ApplicationUser-Klasse hinzufügen:

Da wir jedes Mal, wenn wir das Modell ändern, eine Datenbankmigration hinzufügen müssen, öffnen Sie Tools > NuGet Package Manager > Package Manager Console:

Und das ist die Migrationsklasse, die wir erhalten:

Um diese Änderungen in der Datenbank zu erstellen, führen wir in der Package Manager Console aus:

Ein weiteres Detail, das wir korrigieren müssen, besteht darin, dass wir in AccountController > Registrieren eine Standard-Rechnungsadresse festlegen müssen, da es sich um ein Feld handelt, das keine NULL-Werte enthält.

Auf der Rechnungsseite müssen wir die Rechnungsadresse für den Kunden anzeigen, falls sie hinzugefügt wurde, und unseren Kunden auch erlauben, sie zu bearbeiten. Zuerst müssen wir den Index-Aktion von BillingController ändern, um die Rechnungsadresse an die Ansicht zu übergeben:

Um die Adresse anzuzeigen, müssen wir nur die Ansicht "Billing/Index.cshtml" bearbeiten und die von SAAS Ecom dafür bereitgestellte Ansicht teilweise hinzufügen:

Wenn wir nun zu Abrechnung navigieren, sehen wir den neuen Abschnitt:

Updated Billing TemplateUpdated Billing TemplateUpdated Billing Template

Der nächste Schritt ist die Aktion BillingController > BillingAddress, wir müssen die Rechnungsadresse an die Ansicht übergeben. Da wir den zweibuchstabigen ISO-Ländercode des Benutzers benötigen, habe ich ein Dropdown-Menü hinzugefügt, um das Land auszuwählen, das standardmäßig das Land ist, zu dem die Benutzer-IP gehört:

Wenn der Benutzer das Formular abschickt, müssen wir die Rechnungsadresse speichern und den Steuerprozentsatz bei Bedarf aktualisieren:

So sieht das Formular zum Hinzufügen oder Bearbeiten einer Rechnungsadresse aus:

Adding a Billing AddressAdding a Billing AddressAdding a Billing Address

Nach dem Hinzufügen der Adresse werde ich zurück in den Abrechnungsbereich weitergeleitet:

Billing AreaBilling AreaBilling Area

Wie Sie im obigen Screenshot sehen können, werden 20 % Mehrwertsteuer zum monatlichen Preis hinzugefügt, da ich mein Land auf Großbritannien eingestellt habe und keine Umsatzsteuer-Identifikationsnummer eingegeben habe. Der hier gezeigte Code geht davon aus, dass Sie ein nicht in der EU ansässiges Unternehmen sind. In diesem Fall müssen Sie den Fall bearbeiten, in dem sich Ihr Kunde in Ihrem Land befindet, und unabhängig davon, ob er Mehrwertsteuer hat oder nicht, müssen Sie Mehrwertsteuer berechnen.

9. Bereitstellen auf Azure-Websites (Webhosting + SSL kostenlos, SQL-Datenbank 5 USD pro Monat)

9.1 Bereitstellung der Website

Unser SAAS-Projekt ist bereit, live zu gehen, und ich habe Azure als Hosting-Plattform gewählt. Wenn Sie noch kein Konto haben, können Sie einen Monat lang kostenlos testen. Wir können unsere App von Git (GitHub oder BitBucket) bei jedem Commit bereitstellen, wenn wir möchten. Ich zeige Ihnen hier, wie Sie aus Visual Studio 2013 bereitstellen. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt Meine Notizen und wählen Sie im Kontextmenü Veröffentlichen. Der Assistent zum Veröffentlichen von Web wird geöffnet.

Publishing WizardPublishing WizardPublishing Wizard

Wählen Sie Microsoft Azure-Websites aus und klicken Sie auf Neu.

Microsoft Azure WebsitesMicrosoft Azure WebsitesMicrosoft Azure Websites
Creating The SiteCreating The SiteCreating The Site

Geben Sie die Details für Ihre Website ein und klicken Sie auf Erstellen. Wenn Ihre Website erstellt wurde, sehen Sie dies. Weiter klicken.

Publishing The SitePublishing The SitePublishing The Site
Publishing To The WebPublishing To The WebPublishing To The Web

In diesem Schritt können Sie die Verbindungszeichenfolge für Ihre Datenbank hinzufügen, falls vorhanden, oder Sie können sie später über das Verwaltungsportal hinzufügen. Weiter klicken.

Previewing The PublishingPreviewing The PublishingPreviewing The Publishing

Wenn wir nun auf Veröffentlichen klicken, lädt Visual Studio die Website in Azure hoch.

9.2 Bereitstellen der Datenbank

Um die Datenbank zu erstellen, müssen Sie zum Azure-Verwaltungsportal gehen, Durchsuchen und dann Daten + Speicher > SQL-Datenbank auswählen. Füllen Sie das Formular aus, um Ihre Datenbank zu erstellen.

Deploying The DatabaseDeploying The DatabaseDeploying The Database

Nachdem die Datenbank erstellt wurde, wählen Sie In Visual Studio öffnen und akzeptieren Sie, um der Firewall eine Ausnahme hinzuzufügen.

Adding a Firewall ExceptionAdding a Firewall ExceptionAdding a Firewall Exception

Ihre Datenbank wird im SQL Server-Objekt-Explorer von Visual Studio geöffnet. Wie Sie sehen, gibt es noch keine Tabellen:

SQL Object ExplorerSQL Object ExplorerSQL Object Explorer

Um ein SQL-Skript zum Erstellen der Tabellen in der Datenbank zu generieren, öffnen Sie die Paket-Manager-Konsole in Visual Studio und geben Sie Folgendes ein:

Kopieren Sie das Skript und wieder in den SQL Server-Objekt-Explorer, klicken Sie mit der rechten Maustaste auf Ihre Datenbank und wählen Sie Neue Abfrage aus. Fügen Sie das Skript ein und führen Sie es aus.

Creating the SQL ScriptCreating the SQL ScriptCreating the SQL Script

Dieses Skript enthält nicht die Daten, die wir aus der Seed-Methode in die Datenbank eingefügt haben. Wir müssen ein Skript manuell erstellen, um diese Daten zur Datenbank hinzuzufügen:

Zu diesem Zeitpunkt ist My Notes SAAS live. Ich habe Stripe-Test-API-Schlüssel konfiguriert, sodass Sie die Testkreditkartendaten zum Testen verwenden können, wenn Sie möchten.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.