이벤트 티켓 서비스 만들기(Laravel API+ReactJS+NextJS+Material UI)
브랜드 IworkSeshSource를 기반으로 한 이 프로젝트는 마리화나 중심의 활동을 위한 캠페인 티켓 서비스 플랫폼이다.Laravel에서 Wordpress+ 플러그인 대신 SeshSource 현재 구조의 거울을 만들 것입니다.
필수 기능(MVP)
저는 먼저 MVP 또는 가장 낮은 실행 가능한 제품의 기능, 예를 들어 조회 활동과 입장권 구매를 요약했습니다.
번호부
전자 상거래
조직자 도구
Docker와 함께 Laravel 항목 설정하기
다음은 제가 새로운 Laravel 프로젝트를 시작하고 Docker를 사용하여 로컬 개발을 하는 방법입니다.
composer create-project --prefer-dist laravel/laravel seshsource-api git clone https://github.com/Laradock/laradock.git - 프로젝트 폴더에 Laradock을 배치해야 합니다cd laradock cp env-example .envDB_HOST=mysql
DB_DATABASE=default
DB_USERNAME=default
REDIS_HOST=redis
QUEUE_HOST=beanstalkd
docker-compose up -d nginx mysql phpmyadmin redis workspace OAuth2.0 서버, 4단계 이상
인증을 사용하여 Laravel을 설정하고 OAuth2를 추가합니다.0 Passport 패키지 지원:
composer require laravel/passport 프로젝트 루트docker-compose exec workspace php artisan migratelaradock 폴더 중cd laradockdocker-compose exec workspace php artisan passport:install docker-compose exec workspace php artisan make:auth docker-compose exec workspace php artisan app:name SeshSource - 응용 프로그램 이름을 설정하는 곳입니다.이것은 전체 응용 프로그램의 '명칭 공간' 에서 사용되기 때문에 인용 모델은 다음과 같다. use SeshSource\EventsUUID
나는 직접 ID가 아닌 UUID를 사용하는 것을 좋아한다.Laravel 5.6 이전 버전을 사용하는 경우 이 라이브러리를 설치합니다.그렇지 않으면 Laravel 5.6 이상 릴리즈에서는
uuid()helper method가 사전 설치되어 있습니다.너는 여전히 특질을 창조해야 하지만, 의지할 필요는 없다.composer require webpatser/laravel-uuid 'Uuid' => Webpatser\Uuid\Uuid::class,$table->uuid('id'); $table->primary('id'); 을 사용하고 있을 뿐 $table->increments('id'); 을 사용하지 않는다.모든 모델에서 UUID를 사용하여 자동 증가를 제거해야 합니다.
/**
* Indicates if the IDs are auto-incrementing.
*
* @var bool
*/
public $incrementing = false;
종속 버전
<?php
namespace SeshSource;
use Webpatser\Uuid\Uuid;
trait Uuids
{
/**
* Boot function from laravel.
*/
protected static function boot()
{
parent::boot();
static::creating(function ($model) {
$model->{$model->getKeyName()} = Uuid::generate()->string;
});
}
}
?>
라빌 5.6 UUID
<?php
namespace SeshSource\Traits;
use Illuminate\Support\Str;
trait Uuids
{
/**
* Boot function from laravel.
*/
protected static function boot()
{
parent::boot();
static::creating(function ($model) {
$model->{$model->getKeyName()} = (string) Str::uuid();
});
}
}
?>
use SeshSource\Traits\Uuids;
...
class User extends Authenticatable
{
use Uuids;
마이그레이션 및 모델
Laravel은 명령 하나만 있으면 모델을 간단하게 만들 수 있습니다. 이것은 데이터와 상호작용을 하고 데이터베이스 테이블을 만드는 PHP 문장을 이전하는 데 도움이 됩니다. (SQL이 필요 없습니다.)우리는 10개의 모델과 데이터베이스 테이블을 만들어서 우리 사이트의 모든 데이터를 저장할 것이다.
나는 이 구조의 결정 과정을 상세하게 소개하지 않지만, 기본적으로Wordpress 데이터베이스 구조인 WooCommerce와 Tickera 플러그인을 결합한 데이터베이스 구조이다.이벤트는 하나의 테이블에 저장되며, 모든 추가 '메타데이터' 는 투시표에 저장됩니다.이는 카트'주문서'와 유사합니다.우리는 주문서에 전문적으로 사용되는 표와 각 단독 상품에 사용되는 데이터 투시표(가격과 수량 포함)가 있습니다.우리는 쇼핑 카트 전체를 한 열에 저장하는 것이 아니라 데이터 투시표를 사용합니다. (JSON, 쉼표로 구분된 ID 등 서열화) Laravel의 관계를 이용하여 관련 데이터를 효율적으로 불러올 수 있습니다.
프로젝트 루트 디렉토리에서 다음 명령을 실행하여 모델을 생성하고 마이그레이션합니다.
php artisan make:model Events -m
php artisan make:model EventMeta -m
php artisan make:model TicketTypes -m
php artisan make:model TicketTemplates -m
php artisan make:model Tickets -m
php artisan make:model UserMeta -m
php artisan make:model Orders -m
php artisan make:model OrderItems -m
php artisan make:model CheckIns -m
php artisan make:model Reviews -m
모델 예:
<?php
namespace SeshSource;
use SeshSource\Traits\Uuids;
use Illuminate\Database\Eloquent\Model;
class EventMeta extends Model
{
use Uuids;
/**
* Indicates if the IDs are auto-incrementing.
*
* @var bool
*/
public $incrementing = false;
}
class CreateEventMetaTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('event_meta', function (Blueprint $table) {
$table->uuid('id');
$table->primary('id');
$table->timestamps();
});
}
}
docker-compose exec workspace php artisan migrate:freshIf you have any issues with "foreign IDs", it probably means a migration with relationships was run before the related table was created. Rename your migrations to make sure any tables that are related are created before any pivot tables.
사용자 모델을 사용하여 인증
이전하는 과정에서 사용자 테이블에 'type'
database/migrations/2014_10_12_000000_create_users_table.php 을 추가했습니다.여기서 우리는 로그인 사용자가 고객, 활동 조직자인지 관리자인지 판단할 수 있다.사용자가 관리자 또는 조직자 수준의 기능에 액세스할 수 있는지 쉽게 확인할 수 있도록 사용자 모델에 각 기능에 대한 체크가 추가되었습니다. /**
* Determines if user is admin or not (true or false)
*
* @return boolean
*/
public function isAdmin()
{
if($this->type == 'admin')
{
return true;
} else {
return false;
}
}
/**
* Determines if user is organizer or not (true or false)
*
* @return boolean
*/
public function isOrganizer()
{
if($this->type == 'organizer')
{
return true;
} else {
return false;
}
}
API 컨트롤러 생성
현재 우리는 응용 프로그램의 컨트롤러 부분을 처리할 수 있는 모델이 이미 생겼다.현재 5개의 컨트롤러가 필요하며 Larravel의 artisan CLIAPI resource controllers를 사용합니다.이것은 표준 API(인덱스, 저장, 업데이트, 삭제)에 필요한 모든 방법을 제공하는 컨트롤러를 안내합니다.
php artisan make:controller 'Api/EventsController' --api
php artisan make:controller 'Api/UsersController' --api
php artisan make:controller 'Api/ReviewsController' --api
php artisan make:controller 'Api/OrdersController' --api
php artisan make:controller 'Api/CheckInsController' --api
Events::paginate(10).잠시 후, 우리는 조회 파라미터를 사용하여 필터를 추가할 것입니다. (순서 변경, 분류 지정 등)show 방법에 대해 우리는 다시 적당한 모델을 사용하고
findOrFail() 방법으로 $id:$event = Events::findOrFail($id);을 얻는다.To return a JSON response using Laravel, just use the
json()method on theresponse()object:return response()->json($events);
store() 방법에 대해 우리는 모든 방법php artisan make:request StoreEvents에 인증서를 생성합니다.검증기는 POST 요청을 검사하고 사용자 모델의authorize() 방법으로 isAdmin() 방법 중의 사용자를 인증한다.<?php
namespace SeshSource\Http\Requests;
use Illuminate\Foundation\Http\FormRequest;
class StoreEvents extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
return $this->user()->isAdmin();
}
/**
* Get the validation rules that apply to the request.
*
* @return array
*/
public function rules()
{
return [
'title' => 'required|unique:events|max:255',
'start_date' => 'required|date',
'end_date' => 'required|date',
'street_address' => 'required',
'city' => 'required',
'state' => 'required',
'email' => 'email',
'event_logo' => 'image',
'featured_img' => 'image'
];
}
}
Passport에서 UUID 사용자 ID가 지원되지 않습니다.
OAuth2에 대한 클라이언트 ID를 만들 때 문제가 발생하면 여기에 빠른 해결 방법이 있습니다.0개의 인증된 Passport 응용 프로그램
사용자 ID를 증가 정수가 아닌 UUID로 바꾸었기 때문에 Passport에서 UUID가 아닌 증가 ID를 참조하는 테이블
oauth_access_tokens을 만들었습니다.작업을 하기 위해서, 우리는 새 이전을 만들고, 열을 삭제하고, 새 열을 만들어야 한다.Normally we'd just update the column, but the
doctrine\dballibrary used by Laravel doesn't support UUIDs.
php artisan make:migration drop_user_id_on_oauth_access_tokens:<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class DropUserIdOnOauthAccessTokens extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::table('oauth_access_tokens', function (Blueprint $table) {
$table->dropColumn('user_id');
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::table('oauth_access_tokens', function (Blueprint $table) {
$table->dropColumn('user_id');
});
}
}
php artisan make:migration update_oauth_access_tokens_with_uuids로 삽입합니다.<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class UpdateOauthAccessTokensWithUuids extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::table('oauth_access_tokens', function (Blueprint $table) {
$table->uuid('user_id')->change();
$table->primary('user_id')->change();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::table('oauth_access_tokens', function (Blueprint $table) {
$table->integer('user_id')->change();
});
}
}
docker-compose exec workspace php artisan migrate:fresh
Enable CORS
CORS 종속성을 설치하고 커널에 추가합니다.php.이렇게 하면 동일한 서버에서 응용 프로그램을 생성하고 API와 통신을 활성화할 수 있습니다.이 API를 실행하면 이 API가
http://localhost/에 배치됩니다.우리가 전방에 React 응용 프로그램 (데이터 표시) 을 만들 때 http://localhost:3000 에 배치할 것입니다.동일한 서버에 있지만 포트가 다르기 때문에 도메인 간 참조 오류가 발생합니다.Enabling CORS on the API endpoints allows us anyone to access the API on any server. So if you're going to deploy to production, make sure to limit the hosts to servers you trust (unless your API is public).
공기 오염 지수
이렇게 해서, 당신의 API는 이미 다른 응용 프로그램에 사용될 준비가 되어 있습니다.
이 시리즈의 다음 부분에서는 NextJS를 사용하여 서버에서 보이는 ReactJS 관리 대시보드를 만들고 Material UI 디자인 스타일을 사용하며 OAuth2 API를 사용하여 인증하는 방법을 모색할 것입니다.한 마디에 단어와 기술이 많아서 이 글 자체도 한 입에 삼킬 수 있는 것은 아니지만 가능한 한 간단하게 할 수 있도록 최선을 다하겠습니다!👍
기대해주세요!🙈
Ryo
참조 자료:
Reference
이 문제에 관하여(이벤트 티켓 서비스 만들기(Laravel API+ReactJS+NextJS+Material UI)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/whoisryosuke/creating-an-event-ticketing-service-laravel-api--reactjs--nextjs--material-ui-2c2b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
