Com estas limita\u00e7\u00f5es, se a id\u00e9ia de construir seu sistema de coment\u00e1rios em tempo real – com os benef\u00edcios de controlar seus dados, projetar e personalizar o visual para caber em seu blog – lhe atrai, continue lendo.<\/p>\n
Este artigo ir\u00e1 ensin\u00e1-lo a desenvolver um sistema de coment\u00e1rios bem concebido e em tempo real com diferentes funcionalidades de coment\u00e1rio. Seguindo os princ\u00edpios de construir um aplicativo de chat em tempo real com Vue.js e Socket.io<\/a>, vamos usar Laravel, Pusher e React para desenvolver o sistema de coment\u00e1rios em tempo real.<\/p>\n Vamos nessa!<\/p>\n Construiremos um sistema de coment\u00e1rios em tempo real<\/a> que pode ser integrado em qualquer site ou blog para criar credibilidade na comunidade.<\/p>\n\n Antes de mergulharmos no desenvolvimento, vamos discutir as tecnologias que vamos usar para desenvolver o nosso sistema de coment\u00e1rios em tempo real.<\/p>\n Laravel<\/a> \u00e9 uma framework\u00a0PHP de c\u00f3digo aberto orientada para MVC. \u00c9 usado para construir aplicativos web PHP simples ou complexas, conhecidas pela sua elegante sintaxe. Conhecer Laravel<\/a> \u00e9 importante para desenvolver este sistema de coment\u00e1rios.<\/p>\n O Pusher<\/a> permite aos desenvolvedores criar recursos em tempo real em escala. Este artigo ir\u00e1 combinar o Laravel Echo<\/a> para criar um evento de transmiss\u00e3o em tempo real para o servidor Pusher e exibir o conte\u00fado no front-end com o Vue.js.<\/p>\n O Vue.js<\/a> \u00e9 a nossa framework front-end base. O Vue.js \u00e9 uma framework front-end de JavaScript progressiva conhecida por sua abordagem f\u00e1cil de aprender e direta para o desenvolvimento de front-end. Vamos utilizar o Vue.js para desenvolver o nosso sistema de coment\u00e1rios em tempo real.<\/p>\n Se o sistema de coment\u00e1rios que delineamos acima soa como o que voc\u00ea quer, vamos prosseguir com a constru\u00e7\u00e3o do sistema.<\/p>\n A instala\u00e7\u00e3o e configura\u00e7\u00e3o de Laravel, Echo e Pusher \u00e9 simples, pois Laravel fez todas as tarefas de fundo ao configurar o Laravel Echo para trabalhar perfeitamente com Pusher.<\/p>\n Em primeiro lugar, vamos come\u00e7ar por instalar e configurar o Laravel, a nossa framework back-end PHP<\/a>. Voc\u00ea pode pegar uma nova inst\u00e2ncia de Laravel com este comando, desde que voc\u00ea tenha instalado o Laravel CLI<\/a> globalmente:<\/p>\n Sua nova inst\u00e2ncia Laravel ser\u00e1 instalada em uma pasta chamada commenter. Vamos abrir a pasta no nosso VSCode<\/a> e navegar at\u00e9 ela no nosso terminal:<\/p>\n Antes de iniciarmos nosso servidor de desenvolvimento, vamos instalar e configurar alguns pacotes necess\u00e1rios que ser\u00e3o utilizados para o projeto.<\/p>\n Execute este comando para instalar o Pusher PHP SDK:<\/p>\n Execute este comando para instalar os pacotes NPM necess\u00e1rios para o front-end do Vue.js:<\/p>\n A seguir, vamos configurar o Laravel Echo e o Pusher. Abra seu arquivo resources\/js\/bootstrap.js <\/strong>e cole nos seguintes scripts:<\/p>\n Voc\u00ea vai notar pelo script acima que estamos apenas configurando a inst\u00e2ncia Axios com nossas configura\u00e7\u00f5es padr\u00e3o. A seguir, vamos configurar o Laravel Echo para usar o Pusher e suas configura\u00e7\u00f5es.<\/p>\n A seguir, vamos criar e configurar a nossa base de dados para armazenar os coment\u00e1rios para a persist\u00eancia. Vamos usar o SQLite, embora voc\u00ea possa usar qualquer cliente de banco de dados de sua escolha.<\/p>\n Crie um arquivo database.sqlite <\/strong>dentro da pasta da base de dados e atualize o seu arquivo .env <\/strong>da seguinte forma:<\/p>\n A seguir, execute este comando para criar a migra\u00e7\u00e3o de Coment\u00e1rios e atualize-a com os seguintes scripts:<\/p>\n Abra o arquivo database\/migrations\/xxxx_create_comments_table_xxxx.php<\/strong> e cole neste c\u00f3digo:<\/p>\n Isto ir\u00e1 criar uma nova tabela de banco de dados de coment\u00e1rios e adicionar colunas de conte\u00fado e autor.<\/p>\n Finalmente, para criar a migra\u00e7\u00e3o, execute este comando:<\/p>\n Em Laravel, os modelos s\u00e3o significativos – s\u00e3o a forma mais segura de comunicar com a nossa base de dados e lidar com a gest\u00e3o de dados.<\/p>\n Para criar um modelo no Laravel, vamos executar o seguinte comando:<\/p>\n Em seguida, abra o arquivo app\/models\/Comment.php <\/strong>e cole o seguinte c\u00f3digo:<\/p>\n Os controladores (Controllers) s\u00e3o cruciais porque abrigam toda a l\u00f3gica, neg\u00f3cios e outros aspectos dos nossos aplicativos, ent\u00e3o vamos criar um para lidar com a l\u00f3gica dos coment\u00e1rios:<\/p>\n Em seguida, abra o arquivo app\/Http\/Controllers\/CommentController.php <\/strong>e cole o seguinte c\u00f3digo:<\/p>\n O controlador tem tr\u00eas m\u00e9todos diferentes: devolver uma vista de coment\u00e1rios, ir buscar todos os coment\u00e1rios e armazenar um novo coment\u00e1rio, respectivamente. Mais importante ainda, n\u00f3s acendemos um evento cada vez que armazenamos um novo coment\u00e1rio, que o front-end ir\u00e1 ouvir para atualizar a p\u00e1gina relevante com o novo coment\u00e1rio em tempo real, usando Pusher e Laravel Echo.<\/p>\n Para configurar nossas rotas corretamente, vamos precisar atualizar muitos arquivos<\/a>, ent\u00e3o vamos come\u00e7ar.<\/p>\n Primeiro, vamos atualizar o arquivo api.php <\/strong>na pasta routes. Abra o arquivo e adicione o seguinte c\u00f3digo:<\/p>\n Em seguida, abra o arquivo channels.php <\/strong>na mesma pasta e adicione o seguinte c\u00f3digo para autorizar o evento que disparamos anteriormente:<\/p>\n Em seguida, abra o arquivo web.php <\/strong>na mesma pasta e adicione o seguinte c\u00f3digo para redirecionar nosso pedido para a p\u00e1gina inicial, onde o Vue.js ir\u00e1 peg\u00e1-lo:<\/p>\n Finalmente, vamos criar um novo arquivo blade na pasta resources\/views <\/strong>chamado comments.blade.php <\/strong>e adicionar o seguinte c\u00f3digo:<\/p>\n O script adiciona um t\u00edtulo de postagem e um componente Vue para exibir e adicionar novos coment\u00e1rios ao t\u00edtulo de postagem criado acima.<\/p>\n Execute os seguintes comandos para testar se voc\u00ea obt\u00e9m tudo corretamente:<\/p>\n Se lhe for apresentada esta p\u00e1gina, voc\u00ea est\u00e1 pronto para passar ao pr\u00f3ximo passo neste artigo.<\/p>\n Vamos criar e configurar a nossa inst\u00e2ncia Vue para criar e exibir todos os coment\u00e1rios feitos neste artigo<\/a>.<\/p>\n Vamos come\u00e7ar com a montagem da nossa loja Vuex. Crie os seguintes arquivos na pasta resource\/js\/store.<\/p>\n Crie actions.js e adicione o seguinte c\u00f3digo:<\/p>\n O arquivo Action faz uma chamada para o ponto final do coment\u00e1rio no back-end.<\/p>\n Em seguida, crie um arquivo getters.js e adicione o seguinte c\u00f3digo:<\/p>\n O arquivo Getter \u00e9 usado para recuperar todos os coment\u00e1rios no estado.<\/p>\n Crie o arquivo mutations.js e cole o seguinte c\u00f3digo:<\/p>\n Em seguida, crie um arquivo state.js e cole o seguinte c\u00f3digo:<\/p>\n Finalmente, vamos adicionar tudo ao arquivo index.js exportado para a inst\u00e2ncia Vue, crie um arquivo index.js e adicione o seguinte:<\/p>\n Finalmente, vamos criar os nossos componentes de coment\u00e1rio para exibir e adicionar novos coment\u00e1rios. Vamos come\u00e7ar por criar o componente de coment\u00e1rio \u00fanico.<\/p>\n Crie uma pasta resource\/js <\/strong>na pasta chamada components, adicione o comment.vue <\/strong>e adicione o seguinte c\u00f3digo:<\/p>\n Em seguida, crie o seguinte arquivo chamado comments.vue <\/strong>na mesma pasta e adicione o seguinte c\u00f3digo:<\/p>\n Finalmente, crie um arquivo chamado NewComment.vue <\/strong>e adicione o seguinte c\u00f3digo:<\/p>\n Agora, abra o arquivo app.js <\/strong>e adicione o seguinte c\u00f3digo para registrar os componentes Vue que voc\u00ea criou anteriormente:<\/p>\n E \u00e9 isso! Voc\u00ea acabou de aprender como construir um sistema de coment\u00e1rios em tempo real para o seu site usando Laravel.<\/p>\n Discutimos os benef\u00edcios de criar e gerenciar um sistema de coment\u00e1rios em sua busca para construir confian\u00e7a em sua comunidade ou blog. Tamb\u00e9m exploramos como desenvolver um sistema de coment\u00e1rios bem desenhado e em tempo real desde o in\u00edcio, utilizando diferentes funcionalidades de coment\u00e1rios.<\/p>\n Voc\u00ea pode clonar o c\u00f3digo fonte deste projeto nesta Github <\/a>repo<\/a>.<\/p>\n O que voc\u00ea acha do sistema de coment\u00e1rios em tempo real no Laravel que constru\u00edmos juntos? Informe-nos nos coment\u00e1rios!<\/p>\n \u00a0<\/p>\n","protected":false},"excerpt":{"rendered":" Para construir confian\u00e7a na sua comunidade on-line ou blog, um elemento crucial que voc\u00ea vai querer \u00e9 um sistema de coment\u00e1rios em tempo real bem desenhado …<\/p>\n","protected":false},"author":193,"featured_media":44366,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[416,528],"topic":[996,984],"class_list":["post-44363","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-laravel","tag-web-developement","topic-frameworks-php","topic-laravel"],"yoast_head":"\nO que vamos construir<\/h2>\n
Vis\u00e3o geral dos blocos de constru\u00e7\u00e3o: Laravel, Pusher, e Vue<\/h2>\n
Laravel<\/h3>\n
Pusher<\/h3>\n
Vue.js<\/h3>\n
Construindo o sistema de coment\u00e1rios<\/h2>\n
1. Instalan\u00e7\u00e3o e configura\u00e7\u00e3o do Laravel, Pusher e Echo<\/h3>\n
laravel new commenter<\/code><\/pre>\ncd commenter\n\ncode .<\/code><\/pre>\ncomposer require pusher\/pusher-php-server<\/code><\/pre>\nnpm install --save laravel-echo pusher-js<\/code><\/pre>\nwindow._ = require(\"lodash\");\nwindow.axios = require(\"axios\");\nwindow.moment = require(\"moment\");\nwindow.axios.defaults.headers.common[\"X-Requested-With\"] = \"XMLHttpRequest\";\nwindow.axios.defaults.headers.post[\"Content-Type\"] =\n \"application\/x-www-form-urlencoded\";\nwindow.axios.defaults.headers.common.crossDomain = true;\nwindow.axios.defaults.baseURL = \"\/api\";\nlet token = document.head.querySelector('meta[name=\"csrf-token\"]');\nif (token) {\n window.axios.defaults.headers.common[\"X-CSRF-TOKEN\"] = token.content;\n} else {\n console.error(\"CSRF token not found\");\n}\n\n\n\/**\n * Echo exposes an expressive API for subscribing to channels and listening\n * for events that Laravel broadcasts. Echo and event broadcasting\n * allows your team to build robust real-time web applications quickly.\n *\/\nimport Echo from \"laravel-echo\";\nwindow.Pusher = require(\"pusher-js\");\nwindow.Echo = new Echo({\n broadcaster: \"pusher\",\n key: process.env.MIX_PUSHER_APP_KEY,\n cluster: process.env.MIX_PUSHER_APP_CLUSTER,\n forceTLS: true\n});<\/code><\/pre>\n2. Configura\u00e7\u00e3o e migra\u00e7\u00e3o da base de dados<\/h3>\n
DB_CONNECTION=sqlite\nDB_DATABASE=\/Users\/all\/paths\/to\/project\/commenter_be\/database\/database.sqlite\nDB_HOST=127.0.0.1\nDB_PORT=3306\nDB_USERNAME=root\nDB_PASSWORD=<\/code><\/pre>\nphp artisan make:migration create_comments_table<\/code><\/pre>\n<?php\nuse Illuminate\\Database\\Migrations\\Migration;\nuse Illuminate\\Database\\Schema\\Blueprint;\nuse Illuminate\\Support\\Facades\\Schema;\nclass CreateCommentsTable extends Migration\n{\n \/**\n * Run the migrations.\n *\n * @return void\n *\/\n public function up()\n {\n Schema::create('comments', function (Blueprint $table) {\n $table->id();\n $table->string('content');\n $table->string('author');\n $table->timestamps();\n });\n }\n \/**\n * Reverse the migrations.\n *\n * @return void\n *\/\n public function down()\n {\n Schema::dropIfExists('comments');\n }\n}<\/code><\/pre>\nphp artisan migrate<\/code><\/pre>\n3. Cria\u00e7\u00e3o de modelos<\/h3>\n
php artisan make:model Comment<\/code><\/pre>\n<?php\nnamespace App\\Models;\nuse Illuminate\\Database\\Eloquent\\Factories\\HasFactory;\nuse Illuminate\\Database\\Eloquent\\Model;\nclass Comment extends Model\n{\n use HasFactory;\n protected $fillable = ['content', 'author'];\n}\n\n<\/code>The $fillable array allows us to create and update the model in mass.<\/pre>\n4. Criando controladores<\/h3>\n
php artisan make:controller CommentController<\/code><\/pre>\n<?php\nnamespace App\\Http\\Controllers;\nuse App\\Models\\Comment;\nuse App\\Events\\CommentEvent;\nuse Illuminate\\Http\\Request;\n\nclass CommentController extends Controller\n{\n \/\/\n public function index()\n {\n return view('comments');\n }\n public function fetchComments()\n {\n $comments = Comment::all();\n return response()->json($comments);\n }\n public function store(Request $request)\n {\n $comment = Comment::create($request->all());\n event(new CommentEvent($comment));\n return $comment;\n }\n}<\/code><\/pre>\n5. Criando rotas<\/h3>\n
use App\\Http\\Controllers\\CommentController;\n\/\/...\n\nRoute::get('\/', [CommentController::class, 'index']);\nRoute::get('\/comments', [CommentController::class, 'fetchComments']);\nRoute::post('\/comments', [CommentController::class, 'store']);<\/code><\/pre>\nBroadcast::channel('comment', function ($user) {\n return true;\n});<\/code><\/pre>\nuse App\\Http\\Controllers\\CommentController;\n\/\/...\n\nRoute::get('\/', [CommentController::class, 'index']);<\/code><\/pre>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" \/>\n <title>Commenter<\/title>\n <meta name=\"csrf-token\" content=\"{{ csrf_token() }}\">\n <meta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0\">\n\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bulma\/0.7.1\/css\/bulma.min.css\" \/>\n <style>\n .container {\n margin: 0 auto;\n position: relative;\n width: unset;\n }\n #app {\n width: 60%;\n margin: 4rem auto;\n }\n .question-wrapper {\n text-align: center;\n }\n <\/style>\n<\/head>\n<body>\n\n\n <div id=\"app\">\n <div class=\"container\">\n <div class=\"question-wrapper\">\n <h5 class=\"is-size-2\" style=\"color: #220052;\">\n What do you think about <span style=\"color: #47b784;\">Dogs<\/span>?<\/h5>\n <br>\n <a href=\"#Form\" class=\"button is-medium has-shadow has-text-white\" style=\"background-color: #47b784\">Comment<\/a>\n <\/div>\n <br><br>\n <comments><\/comments>\n <new-comment><\/new-comment>\n <\/div>\n <\/div>\n <script async src=\"{{mix('js\/app.js')}}\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\nnpm run watch\n\nphp artisan serve<\/code><\/pre>\n![\"Sistema](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2021\/08\/Commenting-System-Laravel.png\")
6. Configura\u00e7\u00e3o do Vue (Front-end)<\/h3>\n
Criando estado de coment\u00e1rio<\/h4>\n
let actions = {\n ADD_COMMENT({ commit }, comment) {\n return new Promise((resolve, reject) => {\n axios\n .post(`\/comments`, comment)\n .then(response => {\n resolve(response);\n })\n .catch(err => {\n reject(err);\n });\n });\n },\n GET_COMMENTS({ commit }) {\n axios\n .get(\"\/comments\")\n .then(res => {\n {\n commit(\"GET_COMMENTS\", res.data);\n }\n })\n .catch(err => {\n console.log(err);\n });\n }\n};\nexport default actions;<\/code><\/pre>\nlet getters = {\n comments: state => {\n return state.comments;\n }\n};\nexport default getters;<\/code><\/pre>\nlet mutations = {\n GET_COMMENTS(state, comments) {\n state.comments = comments;\n },\n ADD_COMMENT(state, comment) {\n state.comments = [...state.comments, comment];\n }\n};\nexport default mutations;<\/code><\/pre>\nlet state = {\n comments: []\n};\nexport default state;<\/code><\/pre>\nimport Vue from \"vue\";\nimport Vuex from \"vuex\";\nimport actions from \".\/actions\";\nimport mutations from \".\/mutations\";\nimport getters from \".\/getters\";\nimport state from \".\/state\";\nVue.use(Vuex);\nexport default new Vuex.Store({\n state,\n mutations,\n getters,\n actions\n});<\/code><\/pre>\nCriando componentes<\/h4>\n
<template>\n <li class=\"comment-wrapper animate slideInLeft\">\n <div class=\"profile\">\n <\/div>\n <div class=\"msg has-shadow\">\n <div class=\"msg-body\">\n <p class=\"name\">\n {{ comment.author }} <span class=\"date\">{{ posted_at }}<\/span>\n <\/p>\n <p class=\"content\">{{ comment.content }}<\/p>\n <\/div>\n <\/div>\n <\/li>\n<\/template>\n \n <script>\nexport default {\n name: \"Comment\",\n props: [\"comment\"],\n computed: {\n posted_at() {\n return moment(this.comment.created_at).format(\"MMMM Do YYYY\");\n },\n\n },\n};\n<\/script>\n \n <style lang=\"scss\" scoped>\n.comment-wrapper {\n list-style: none;\n text-align: left;\n overflow: hidden;\n margin-bottom: 2em;\n padding: 0.4em;\n .profile {\n width: 80px;\n float: left;\n }\n .msg-body {\n padding: 0.8em;\n color: #666;\n line-height: 1.5;\n }\n .msg {\n width: 86%;\n float: left;\n background-color: #fff;\n border-radius: 0 5px 5px 5px;\n position: relative;\n &::after {\n content: \" \";\n position: absolute;\n left: -13px;\n top: 0;\n border: 14px solid transparent;\n border-top-color: #fff;\n }\n }\n .date {\n float: right;\n }\n .name {\n margin: 0;\n color: #999;\n font-weight: 700;\n font-size: 0.8em;\n }\n p:last-child {\n margin-top: 0.6em;\n margin-bottom: 0;\n }\n}\n<\/style><\/code><\/pre>\n<template>\n <div class=\"container\">\n <ul class=\"comment-list\">\n <Comment\n :key=\"comment.id\"\n v-for=\"comment in comments\"\n :comment=\"comment\"\n ><\/Comment>\n <\/ul>\n <\/div>\n<\/template>\n \n <script>\nimport { mapGetters } from \"vuex\";\nimport Comment from \".\/Comment\";\nexport default {\n name: \"Comments\",\n components: { Comment },\n mounted() {\n this.$store.dispatch(\"GET_COMMENTS\");\n this.listen();\n },\n methods: {\n listen() {\n Echo.channel(\"comment\").listen(\"comment\", (e) => {\n console.log(e);\n this.$store.commit(\"ADD_COMMENT\", e);\n });\n },\n },\n computed: {\n ...mapGetters([\"comments\"]),\n },\n};\n<\/script>\n \n <style scoped>\n.comment-list {\n padding: 1em 0;\n margin-bottom: 15px;\n}\n<\/style><\/code><\/pre>\n<template>\n <div id=\"commentForm\" class=\"box has-shadow has-background-white\">\n <form @keyup.enter=\"postComment\">\n <div class=\"field has-margin-top\">\n <div class=\"field has-margin-top\">\n <label class=\"label\">Your name<\/label>\n <div class=\"control\">\n <input\n type=\"text\"\n placeholder=\"Your name\"\n class=\"input is-medium\"\n v-model=\"comment.author\"\n \/>\n <\/div>\n <\/div>\n <div class=\"field has-margin-top\">\n <label class=\"label\">Your comment<\/label>\n <div class=\"control\">\n <textarea\n style=\"height: 100px\"\n name=\"comment\"\n class=\"input is-medium\"\n autocomplete=\"true\"\n v-model=\"comment.content\"\n placeholder=\"lorem ipsum\"\n ><\/textarea>\n <\/div>\n <\/div>\n <div class=\"control has-margin-top\">\n <button\n style=\"background-color: #47b784\"\n :class=\"{ 'is-loading': submit }\"\n class=\"button has-shadow is-medium has-text-white\"\n :disabled=\"!isValid\"\n @click.prevent=\"postComment\"\n type=\"submit\"\n >\n Submit\n <\/button>\n <\/div>\n <\/div>\n <\/form>\n <br \/>\n <\/div>\n<\/template>\n \n <script>\nexport default {\n name: \"NewComment\",\n data() {\n return {\n submit: false,\n comment: {\n content: \"\",\n author: \"\",\n },\n };\n },\n methods: {\n postComment() {\n this.submit = true;\n this.$store\n .dispatch(\"ADD_COMMENT\", this.comment)\n .then((response) => {\n this.submit = false;\n if (response.data) console.log(\"success\");\n })\n .catch((err) => {\n console.log(err);\n this.submit = false;\n });\n },\n },\n computed: {\n isValid() {\n return this.comment.content !== \"\" && this.comment.author !== \"\";\n },\n },\n};\n<\/script>\n \n <style scoped>\n.has-margin-top {\n margin-top: 15px;\n}\n<\/style><\/code><\/pre>\n\/\/ resource\/js\/app.js\n\nrequire(\".\/bootstrap\");\nwindow.Vue = require(\"vue\");\nimport store from \".\/store\/index\";\n\nVue.component(\"comment\", require(\".\/components\/Comment\"));\nVue.component(\"comments\", require(\".\/components\/Comments\"));\nVue.component(\"new-comment\", require(\".\/components\/NewComment\"));\n\nconst app = new Vue({\n el: \"#app\",\n store\n});<\/code><\/pre>\n\nResumo<\/h2>\n