Laravel Spark ile bir SaaS uygulaması oluşturma: Web Uptime

Laravel topluluğuna ayak uydurursanız, Taylor Otwell'in son zamanlarda Spark adlı çok beklenen SaaS iskele kitaplığını yayınladığının farkında olacaksınız. Spark, temel olarak bir SaaS uygulamasının inşa etmek için zaman harcamak istemediğiniz tüm parçalarıyla birlikte gelen Laravel ve Laravel'in faturalandırma kitaplığı Cashier'in üzerine inşa edilmiş bir kitaplıktır. O içerir:

• Kimlik doğrulama ve parola sıfırlama
• Abonelik faturalandırması ve faturaları
• Ekipler ve ekip faturalandırması
• Duyurular, iki faktörlü kimlik doğrulama, kullanıcı kimliğine bürünme

Devam edebilirim, çoğu SaaS uygulamasının gerektirdiği tüm sıkıcı kısımları ve ilk seferde doğru yapılması en zor olan kısımlardan bazılarını kapsadığını ve saatlerce geliştirme tasarrufu sağladığını söyleyebilirim. Ücretsiz değil (şu anda temel bir lisans maliyeti 99 $), ancak yukarıdakilerin tümünü kendiniz inşa etmek için harcadığınız zamanı ve muhtemelen kendiniz inşa etmeye dahil edeceğiniz tüm hataların maliyetini hesaplarsanız, umarım yaparsınız' paraya değdiğini kabul edeceğim.

Geçmişte birkaç SaaS uygulaması oluşturup sattım, bu yüzden Spark kullanarak bir uygulama oluşturmanın ne kadar kolay olacağını görmek beni çok heyecanlandırdı. Spark'ı öğrenmenin bir yolu olarak yeni bir yan projeye başladım ve Web Uptime adlı bir web sitesi çalışma süresi izleme uygulaması oluşturmaya karar verdim.

Bu makalede, Spark ve Spark'ın ön uç çerçevesini kullanarak bir uygulama geliştirmeye bakacağım: Vue.js.

Kıvılcım: Vue.js + Blade

Henüz tahmin etmediyseniz, biz burada Delicious Brains'de Vue.js hayranlarıyız (hem ben hem de Ian bu konuda yakın zamanda yazdık). Bu yüzden bu makalede Vue.js'nin nasıl çalıştığını açıklamayacağım. Bunun yerine, Spark'ta nasıl uygulandığına ve uygulama geliştirmeyi nasıl hızlı ve basit hale getirdiğine bakacağım. Spark'ın aslında bir demo yapılacaklar uygulamasıyla birlikte geldiğini unutmayın, böylece Taylor'ın Spark'ı kullanılmak üzere nasıl tasarladığını görebilirsiniz.

Geçmişte Vue.js ile çalışmışsanız, Spark ile fark ettiğiniz ilk farklardan biri, her bileşenin bir inline-template sahip olmasıdır. Bu, her iki dünyanın da en iyisini elde ettiğiniz anlamına gelir. Bileşenleriniz için şablonları basit bir şekilde oluştururken, ihtiyaç duyduğunuzda Blade şablonlarının gücünü kullanmaya devam edebilirsiniz. Örnek olarak, Spark Ayarları bileşeni aşağıdadır:

 @extends('spark::layouts.app') @section('scripts') @if (Spark::billsUsingStripe()) <script src="https://js.stripe.com/v2/"></script> @else <script src="https://js.braintreegateway.com/v2/braintree.js"></script> @endif @endsection @section('content') <spark-settings :user="user" :teams="teams" inline-template> <div class="spark-screen container"> <div class="row"> <!-- Tabs --> <div class="col-md-4"> <div class="panel panel-default panel-flush"> <div class="panel-heading"> Settings </div> <div class="panel-body"> <div class="spark-settings-tabs"> <ul class="nav spark-settings-stacked-tabs" role="tablist"> <!-- Profile Link --> <li role="presentation"> <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab"> <i class="fa fa-fw fa-btn fa-edit"></i>Profile </a> </li> <!-- Teams Link --> @if (Spark::usesTeams()) <li role="presentation"> <a href="#teams" aria-controls="teams" role="tab" data-toggle="tab"> <i class="fa fa-fw fa-btn fa-users"></i>Teams </a> </li> @endif <!-- Security Link --> <li role="presentation"> <a href="#security" aria-controls="security" role="tab" data-toggle="tab"> <i class="fa fa-fw fa-btn fa-lock"></i>Security </a> </li> <!-- API Link --> @if (Spark::usesApi()) <li role="presentation"> <a href="#api" aria-controls="api" role="tab" data-toggle="tab"> <i class="fa fa-fw fa-btn fa-cubes"></i>API </a> </li> @endif </ul> </div> </div> </div> <!-- Billing Tabs --> @if (Spark::canBillCustomers()) <div class="panel panel-default panel-flush"> <div class="panel-heading"> Billing </div> <div class="panel-body"> <div class="spark-settings-tabs"> <ul class="nav spark-settings-stacked-tabs" role="tablist"> @if (Spark::hasPaidPlans()) <!-- Subscription Link --> <li role="presentation"> <a href="#subscription" aria-controls="subscription" role="tab" data-toggle="tab"> <i class="fa fa-fw fa-btn fa-shopping-bag"></i>Subscription </a> </li> @endif <!-- Payment Method Link --> <li role="presentation"> <a href="#payment-method" aria-controls="payment-method" role="tab" data-toggle="tab"> <i class="fa fa-fw fa-btn fa-credit-card"></i>Payment Method </a> </li> <!-- Invoices Link --> <li role="presentation"> <a href="#invoices" aria-controls="invoices" role="tab" data-toggle="tab"> <i class="fa fa-fw fa-btn fa-history"></i>Invoices </a> </li> </ul> </div> </div> </div> @endif </div> <!-- Tab Panels --> <div class="col-md-8"> <div class="tab-content"> <!-- Profile --> <div role="tabpanel" class="tab-pane active"> @include('spark::settings.profile') </div> <!-- Teams --> @if (Spark::usesTeams()) <div role="tabpanel" class="tab-pane"> @include('spark::settings.teams') </div> @endif <!-- Security --> <div role="tabpanel" class="tab-pane"> @include('spark::settings.security') </div> <!-- API --> @if (Spark::usesApi()) <div role="tabpanel" class="tab-pane"> @include('spark::settings.api') </div> @endif <!-- Billing Tab Panes --> @if (Spark::canBillCustomers()) @if (Spark::hasPaidPlans()) <!-- Subscription --> <div role="tabpanel" class="tab-pane"> <div v-if="user"> @include('spark::settings.subscription') </div> </div> @endif <!-- Payment Method --> <div role="tabpanel" class="tab-pane"> <div v-if="user"> @include('spark::settings.payment-method') </div> </div> <!-- Invoices --> <div role="tabpanel" class="tab-pane"> @include('spark::settings.invoices') </div> @endif </div> </div> </div> </div> </spark-settings> @endsection

Gördüğünüz gibi, Blade @includes ve @if koşullarını kullanmak, Vue.js bileşenleriyle uyumluluğu korurken çok yardımcı olabilir. Purists, Spark::canBillCustomers() gibi koşullandırmaları arka uçta yapmanın bir endişe ayrımı olmadığını ve yalnızca ön uç Vue.js bileşenlerinde yapılması gerektiğini savunacaktır. Bununla birlikte, özellikle Laravel (PHP) arka planından gelen ve bu süslü yeni JS'yi kullanmakta rahat hissetmeyen geliştiriciler için, geliştiricilerin hızlı bir şekilde ayağa kalkmasını ve çalışmasını basit ve kolay hale getirdiği için bu mix-n-match stilini seviyorum. henüz çerçeveler.

Vue.js Bileşenleri

Spark, sizin için önceden oluşturulmuş çok sayıda UI bileşenine sahiptir (örn. ayarlar, faturalandırma vb.), bu nedenle şeyleri nasıl özelleştireceğinizi ve kendi bileşenlerinizi nasıl oluşturacağınızı görmek aslında oldukça kolaydır.

Taylor, Spark'ın bileşenlerini genişletmeyi kolaylaştırmak için oluşturma konusunda akıllı davrandı. Spark'ın tüm bileşenleri /resources/assets/js/spark-components içinde bulunur ve temel olarak mixins: [base] içerir; bu, tüm ana Spark bileşenlerinin ana spark klasöründe bulunduğu, ancak miksler olarak spark-components klasörüne dahil edildiği anlamına gelir. Bunun sonucu olarak, Spark'ın bir güncellemeye ihtiyacı olduğunda temel bileşenlerde yapılacak güncellemeler hakkında endişelenmeden yerleşik bileşenleri kolayca genişletebilirsiniz.

Kendi bileşenlerinizi eklemek, JS dosyasını oluşturmak ve onu bootstrap.js dosyasına dahil etmek kadar basittir, böylece global olarak kullanılabilir (Laravel's Elixir, tüm derleme ve aktarma işlemlerini tek bir JS dosyasına yapar). Örnek olarak, Web Uptime için oluşturduğum Siteler bileşeni aşağıdadır:

 Vue.component('sites', { props: ['user'], data() { return { sites: { data: [], current_page: 0, last_page: 0, per_page: 0, from: 0, to: 0, total: 0, next_page_url: null, prev_page_url: null }, isLoadingSites: false, creatingSite: false, createSiteForm: new SparkForm({ url: '', }), incidents: [] } }, created() { this.getSites(); this.getIncidents(); }, methods: { getSites(page) { if (typeof page === 'undefined') { page = 1; } this.isLoadingSites = true; this.$http.get('/api/sites', { page: page }) .then(response => { this.sites = response.data; this.isLoadingSites = false; }); }, prevPage() { this.getSites(--this.sites.current_page); }, nextPage() { this.getSites(++this.sites.current_page); }, selectPage(page) { this.getSites(page); }, createSite() { this.creatingSite = true; this.createSiteForm.url = ''; $('#modal-create-site').modal('show'); setTimeout(() => { $('#modal-create-site .on-focus').focus(); }, 500); }, store() { Spark.post('/api/sites', this.createSiteForm) .then(() => { this.creatingSite = false; this.getSites(); $('#modal-create-site').modal('hide'); }); }, getIncidents() { this.$http.get('/api/incidents/open') .then(response => { this.incidents = response.data; }); } } });

Bu çoğunlukla normal Vue.js bileşenidir ancak burada bahsetmeye değer birkaç şey vardır:

• sites veri nesnesi, bir Laravel sayfalama nesnesi biçimine sahiptir. Bu prevPage , nextPage ve selectPage yöntemleriyle birleştiğinde Laravel'in sayfalandırmasını ön uçta uygulamayı basitleştirir.
• Spark, this.$http.get() ve this.$http.post() isteklerini yapmayı kolaylaştıran vue-resource eklentisiyle birlikte gelir.
• createSiteForm aslında bir SparkForm nesnesidir. Bu, Vue.js'de form göndermeyi kolaylaştıran yerleşik bir yardımcıdır (örn. Spark.post('/api/sites', this.createSiteForm) ).

arka uç

Spark, arka uç denetleyicilerinin nasıl kurulacağını gerçekten belirtmez, ancak Laravel bu konuda harikadır, bu nedenle normalde yaptığınız şeyi yapmak oldukça basittir. Ancak, tüm kimlik doğrulama işlemleri Spark tarafından otomatik olarak gerçekleştirilir. Kullanıcılar uygulamanın sayfalarını yüklediğinde arka planda otomatik olarak "geçici", kısa ömürlü API belirteçleri üretir. Bu, Spark tarafından zaten otomatik olarak işlendiğinden, kimlik doğrulama ve kimlik bilgileri konusunda endişelenmenize gerek kalmadan kendi API'nizi kullanabileceğiniz anlamına gelir.

Yani Laravel'de bir API yazmak istiyorsunuz ama aynı zamanda kodunuzu DRY ve genişletilebilir tutmak istiyorsunuz değil mi? Web Çalışma Süresi için, farklı modellerim için mümkün olan minimum kodla yeni API uç noktaları eklemeyi kolaylaştırmak için bir ApiController oluşturdum:

Bu sınıf, Laravel'in Sayfalandırma, Doğrulama ve Yetkilendirme kitaplıklarını kullanır (böylece bunun çalışması için kendi İlkelerinizi oluşturmanız gerekecektir), ancak bunun dışında sadece temel Laravel kaynak yönlendirme ve Eloquent model yöntemleridir.

Artık her yeni model uç noktası eklemek istediğinizde, bunun gibi basit bir şey yapabilirsiniz:

 <?php namespace App\Http\Controllers\Api; use App\Site; use Illuminate\Http\Request; class SitesController extends ApiController { protected function modelClass() { return Site::class; } protected function all(Request $request) { $sites = $request->user()->currentTeam->sites()->get(); return $sites->sortByDesc('created_at')->all(); } protected function validationRules() { return [ 'team_id' => 'required|integer', 'url' => 'required|url', ]; } }

Kaynak yolunu routes.php veya api.php dosyanıza eklemeyi unutmayın:

 Route::resource('sites', 'SitesController', ['except' => ['create', 'edit']]);

Sana doğru

Umarım bu makale, Spark'ın Laravel ve Vue.js kullanarak tam gelişmiş SaaS uygulamaları oluşturmayı ne kadar basit hale getirdiğine dair bir fikir vermiştir, Spark ile birlikte gelen iskeleyi kullanarak kazandığınız zamandan bahsetmeye gerek yok. Spark'ın nasıl kullanılacağı hakkında daha fazla bilgi edinmek için belgelerine bir göz atmalısınız.

Spark kullanarak bir uygulama oluşturdunuz mu? Bir uygulama oluşturmak için Spark'ı kullanmak ister misiniz? Yorumlarda bize bildirin.