Adicionando preenchimento automático aos seus aplicativos Laravel com Atlas Search
Avaliar este tutorial
Implementing a search feature has become hugely important for every web app that values user experience, as users can search for what they need to see without scrolling endlessly.
In this tutorial, we will build a movie application leveraging MongoDB Atlas Search with Laravel (a leading PHP framework) to build a rich text-based search feature that allows users to search for movies by typing a few letters.
In this tutorial, we will build a movie application leveraging MongoDB Atlas Search with Laravel (a leading PHP framework) to build a rich text-based search feature that allows users to search for movies by typing a few letters.
O esquema flexível do MongoDB, Atlas Search, e os poderosos recursos de query, combinados com a sintaxe expressiva do Laravel, permitem-nos implementar funcionalidades de pesquisa avançada rapidamente.
Para configurar nosso ambiente MongoDB , criar um cluster de banco de dados de dados, definir o acesso ao banco de dados de banco de dados e obter a string de conexão, devemos seguir as instruções abaixo da documentação oficial do MongoDB .
Depois de configurarmos nosso cluster, precisamos carregar alguns dados de amostra com os quais trabalharemos para essa implementação e obter nossa string de conexão.
Sua string de conexão deve ficar assim:
mongodb+srv://user:password@cluster0.xxxxx.mongodb.netSe você concluir as etapas acima, os dados de amostra deverão ser carregados no seu cluster. Caso contrário, confira a documentação sobre como carregar dados de amostra.
Depois de carregar os dados com sucesso, devemos ter um banco de dados chamado sample_mflix em nosso cluster. Trabalharemos com a coleção de filmes no banco de dados.
Com o banco de dados de dados configurado, vamos criar o projeto Laravel com o Composer. Para continuar, você deseja verificar se tem PHP, Laravel, Node, npm, Composer e, finalmente, a extensão PHP do MongoDB , todos configurados corretamente. Os links a seguir serão úteis.
Confira as instruções para a integração MongoDB e Laravel. Elas explicam como configurar um ambiente de desenvolvimento Laravel- MongoDB . Abordaremos a criação do aplicação Laravel e a configuração do MongoDB abaixo.
Com nosso ambiente de desenvolvimento funcionando, para criar um projeto Laravel, usaremos o Composer. Execute o código abaixo no termo no diretório de sua preferência.
1 composer create-project Laravel/Laravel movieapp
This command will create a new Laravel project in the folder movieapp. After completing installation, your folder structure should look as below.
No terminal, execute o código abaixo para iniciar o servidor:
1 cd movieapp 2 php artisan serve
Depois que o servidor estiver em execução, ele deverá estar disponível em `http://localhost:8000/`. Você deve ver a página inicial do Laravel, como mostrado abaixo.
Além disso, em uma nova janela do terminal, execute o comando abaixo para iniciar o servidor front-end.
1 npm install 2 npm run dev
Com nosso servidor instalado e funcionando, vamos nos conectar ao nosso cluster MongoDB .
Para conectar o servidor ao cluster MongoDB que criamos anteriormente, siga abaixo:
- Em primeiro lugar, oComposer permite adicionar o pacote Laravel MongoDB ao aplicação. No prompt de comando, vá para o diretório do projeto e execute o comando abaixo.
1 composer require mongodb/Laravel-mongodb isso adicionará o pacoteMongoDB ao diretório de fornecedores - Vamos usar o Composer para adicionar outro pacote chamado mongodb/builder. Usaremos isso para criar um pipeline de agregação mais tarde neste guia. Execute o comando abaixo para adicionar mongodb/builder.
1 composer require mongodb/builder:^0.2 - Navegue até o arquivo .env. Vamos atualizar o valorDB_CONNECTION e adicionar um DB_URL conforme abaixo:
1 DB_CONNECTION=mongodb 2 DB_URI=mongodb_connection_string_here
Atualize o texto mongodb_connection_string_here com sua string de conexão de banco de dados .
4. Navegue até o arquivo config/ banco de dados.php e atualize a connection array conforme abaixo:
4. Navegue até o arquivo config/ banco de dados.php e atualize a connection array conforme abaixo:
1 'connections' => [ 2 'mongodb' => [ 3 'driver' => 'mongodb', 4 'dsn' => env('DB_URI'), 5 'database' => 'sample_mflix', 6 ],
- Ainda no arquivo .php do banco de dados de configuração, atualize a string padrão como:
1 'default' => env('DB_CONNECTION'),
Isso é para definir o MongoDB como a conexão padrão para o aplicação. Com essas variáveis atualizadas, devemos conseguir nos conectar ao MongoDB com sucesso,
Let's create a route in the /routes/web.php:
1 2 use Illuminate\Support\Facades\Route; 3 // Import the Request class 4 use Illuminate\Http\Request; 5 // Import the DB facade 6 use Illuminate\Support\Facades\DB; 7 Route::get('/', function () { 8 return view('welcome'); 9 }); 10 //add ping route 11 Route::get('/connect', function (Request $request) { 12 $connection = DB::connection('mongodb'); 13 $msg = 'MongoDB is accessible!'; 14 try { $connection->getMongoClient()->selectDatabase($connection->getDatabaseName())->command(['ping' => 1]); 15 } catch (\Exception $e) { 16 $msg = 'MongoDB is not accessible. Error: ' . $e->getMessage(); 17 } 18 return response()->json(['msg' => $msg]); 19 });
No terminal, execute PHP rota manual do PHP
Vamos criar um modelo Eloquent para nosso banco de dados MongoDB chamado "Movie", pois trabalharemos com uma coleção chamada filmes. Por convenção, o " caso da cobra ", o nome plural da classe, será usado como nome da coleção, a menos que outro nome seja explicitamente especificado. Então, nesse caso, a Eloquent assumirá que o modeloMovie armazena documentos na coleção de filmes. Execute o comando a partir do diretório do projeto para criar o modelo de filme.
1 php artisan make:model Movie
Assim que o comando terminar de ser executado, ele criará /app/Models/Movie.php. Abra o arquivo e atualize conforme abaixo:
1 <?php 2 namespace App\Models; 3 use MongoDB\Laravel\Eloquent\Model; 4 class Movie extends Model 5 { 6 protected $connection = 'mongodb'; 7 }
Com o modelo criado, vamos exibir alguns dos filmes em nossa página inicial.
Para fazer isso, atualize o /routes/web.php:
1 <?php 2 use Illuminate\Support\Facades\Route; 3 use App\Models\Movie; 4 Route::get('/', function () { 5 $movies = Movie::limit(20)->get(); // Retrieve only 20 movies 6 return view('welcome', [ 7 'movies' => $movies 8 ]); 9 });
Em seguida, atualize a marcação docorpo de app/resources/views/Welcome.Blade.php, conforme abaixo.
1 <body class="font-sans antialiased dark:bg-black dark:text-white/50"> 2 <div class="bg-gray-50 text-black/50 dark:bg-black dark:text-white/50"> 3 <img id="background" class="absolute -left-20 top-0 max-w-[877px]" 4 src="https://Laravel.com/assets/img/welcome/background.svg" alt="Laravel background"/> 5 <div 6 class="relative min-h-screen flex flex-col items-center justify-center selection:bg-[#FF2D20] selection:text-white"> 7 <div class="relative w-full max-w-2xl px-6 lg:max-w-7xl"> 8 <div id="movie-list" class=' w-full flex gap-6 justify-around items-center flex-wrap'> 9 </div> 10 </div> 11 </div> 12 <script> 13 let movies = @json($movies); 14 displayMovies(movies) 15 function displayMovies(movies) { 16 const movieListDiv = document.getElementById('movie-list'); 17 movieListDiv.innerHTML = movies.map(movie => ` 18 <div class="movie-card max-w-sm bg-green-500 border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700"> 19 <div class="h-[400px]"> 20 <img class="rounded-t-lg object-cover w-full h-full" src="${movie.poster}" alt="${movie.title}" /> 21 </div> 22 <div class="p-5"> 23 <a href="#"> 24 <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white line-clamp-1"> 25 ${movie.title} 26 </h5> 27 </a> 28 <p class="mb-3 font-normal text-gray-700 dark:text-gray-400 line-clamp-2">${movie.plot}</p> 29 <a href="#" 30 class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> 31 See more 32 </a> 33 </div> 34 </div> 35 `).join(''); 36 } 37 </script> 38 </body>
Refresh your application on http://localhost:8000. You should have a list of movies displayed on the screen, as below.
Você recebeu um erro, E11000 collection de erro de chave duplicada: sample_mflix.sessions index: user_id_1 chave duplicada: { user_id: null }? Nesse caso, vá para a coleção desessões no banco de dados sample_mflix , limpe o documento e tente novamente.
Com o aplicação em execução, vamos até o painel do MongoDB Atlas para criar um índice de pesquisa do Atlas Search. Mas antes disso...
Para implementar o recurso de forma que possamos pesquisar filmes por seu título, vamos criar um índice de pesquisa a partir do painel do MongoDB Atlas .
No cluster criado anteriormente, clique em Browse collections, navegue até a aba Atlas Search e clique em Create index no lado direito da página de pesquisa. Nesta tela, selecione Editor JSON em Atlas Search, clique em Avançar para continuar, adicione um nome de índice (no nosso caso, Movie_search), selecione a coleção defilmes no banco de dadossample_mflix e atualize o editor JSON conforme abaixo. Clique em Avançar.
1 { 2 "mappings": { 3 "dynamic": false, 4 "fields": { 5 "title": { 6 "type": "string" 7 } 8 } 9 } 10 }
Em seguida, adicionaremos outro índice de pesquisa, mas desta vez o tipo será preenchimento automático. Vamos usá-lo para implementar um recurso de modo que, quando um usuário digitar na caixa de entrada, ele sugira possíveis títulos de filmes.
Crie outro índice, dê um nome a ele (no nosso caso, Movie_title_autocomplete) e atualize o editor JSON, conforme abaixo:
1 { 2 "mappings": { 3 "dynamic": false, 4 "fields": { 5 "title": { 6 "type": "autocomplete" 7 } 8 } 9 } 10 }
Vamos criar duas funções chamadas searchByTittle e autocompleteByTittle dentro da classe de modelo Movie . Essas funções implementarão a pesquisa e os recursos de preenchimento automático, respectivamente.
Portanto, vamos atualizar o arquivo app/Models/Movie.php conforme abaixo.
1 <?php 2 namespace App\Models; 3 use Illuminate\Support\Collection; 4 use MongoDB\Laravel\Eloquent\Model; 5 6 class Movie extends Model 7 { 8 protected $connection = 'mongodb'; 9 10 public static function searchByTitle(string $input): Collection 11 { 12 return self::aggregate() 13 ->search([ 14 'index' => 'movie_search', 15 'compound' => [ 16 'must' => [ 17 [ 18 'text' => [ 19 'query' => $input, 20 'path' => 'title', 21 'fuzzy' => ['maxEdits' => 2] // Adding fuzzy matching 22 ] 23 ] 24 ] 25 ] 26 ]) 27 ->limit(20) 28 ->project(title: 1, genres: 1, poster: 1, rated: 1, plot: 1) 29 ->get(); 30 } 31 32 public static function autocompleteByTitle(string $input): Collection 33 { 34 return self::aggregate() 35 ->search([ 36 'index' => 'movie_title_autocomplete', 37 'autocomplete' => [ 38 'query' => $input, 39 'path' => 'title' 40 ], 41 'highlight' => [ 42 'path' => ['title'] 43 ] 44 ]) 45 ->limit(5) // Limit the result to 5 46 ->project(title: 1, highlights: ['$meta' => 'searchHighlights']) 47 ->get(); 48 } 49 }
Observação: colocar o código que faz a query de pesquisa na classe de modelo separa a camada de acesso a dados dos drivers HTTP HTTP. Isso torna o código mais testável.
Vamos criar um controlador para implementar a API de pesquisa no projeto. Vamos executar o código abaixo para criar um controlador.
1 php artisan make:controller SearchController
Este comando criará um arquivo app/ HTTPHTTP/Controllers/SearchController.php. Vamos atualizar o arquivo conforme abaixo.
1 <?php 2 namespace App\Http\Controllers; 3 use App\Models\Movie; 4 use Illuminate\Http\JsonResponse; 5 6 class SearchController extends Controller 7 { 8 public function search($search): JsonResponse 9 { 10 // Define the aggregation based on the search conditions 11 if (!empty($search)) { 12 $items = Movie::searchByTitle($search); 13 return response()->json($items, 200); 14 } 15 return response()->json(['error' => 'conditions not met'], 400); 16 } 17 }
Em seguida, vamos criar uma rota de API.
Navegue para app/routes/web.php:
1 // import the SearchController 2 use App\Http\Controllers\SearchController; 3 4 Route::get('/search/{search}', [SearchController::class, 'search']);
Navegue até o arquivo app/ HTTPHTTP/Controllers/SearchController.php e adicione a função abaixo após o final da função `search`.
1 public function autocomplete($param): JsonResponse 2 { 3 try { 4 $results = Movie::autocompleteByTitle($param); 5 return response()->json($results, 200); 6 } catch (\Exception $e) { 7 return response()->json(['error' => $e->getMessage()], 500); 8 } 9 } 10 }
Em seguida, vamos criar uma rota de API. Navegue até app/routes/web.php.
1 Route::get('/autocomplete/{param}', [SearchController::class, 'autocomplete']);
Teste a API chamando-a da seguinte forma:
1 http://localhost:8000/autocomplete/hello
To see these implements in action, let's update the body tag of the app/resources/views/welcome.blade.php as below.
Get the complete code snippet on GitHub.
Get the complete code snippet on GitHub.
1 <body class="font-sans antialiased dark:bg-black dark:text-white/50"> 2 <script> 3 let debounceTimer; 4 let movies = @json($movies); 5 displayMovies(movies) 6 7 function handleSearch(event) { 8 const query = event.target.value; 9 // Clear the previous debounce timer 10 clearTimeout(debounceTimer); 11 // Set up a new debounce timer 12 debounceTimer = setTimeout(() => { 13 if (query.length > 2) { // Only search when input is more than 2 characters 14 titleAutocomplete(query); 15 } 16 }, 300); 17 } 18 19 async function titleAutocomplete(query) { 20 try { 21 const response = await fetch(`/autocomplete/${encodeURIComponent(query)}`); 22 const movies = await response.json(); 23 displayResults(movies); 24 } catch (error) { 25 console.error('Error fetching movies:', error); 26 } 27 } 28 29 async function fetchMovies(query) { 30 try { 31 const response = await fetch(`/search/${encodeURIComponent(query)}`); 32 const movies = await response.json(); 33 displayMovies(movies); 34 displayResults([]) 35 } catch (error) { 36 console.error('Error fetching movies:', error); 37 } 38 } 39 40 function displayResults(movies) { 41 const resultsDiv = document.getElementById('search-results'); 42 resultsDiv.innerHTML = movies.map(movie => ` <div onclick="fetchMovies('${movie.title}')" class='select-none text-gray-600 cursor-pointer flex items-center gap-[10px]'> 43 <div> 44 ${movie.title} 45 </div> 46 </div>`).join(''); 47 } 48 49 50 function displayMovies(movies) { 51 const movieListDiv = document.getElementById('movie-list'); 52 movieListDiv.innerHTML = movies.map(movie => ` 53 <div class="movie-card max-w-sm bg-green-500 border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700"> 54 <div class="h-[400px]"> 55 <img class="rounded-t-lg object-cover w-full h-full" src="${movie.poster}" alt="${movie.title}" /> 56 </div> 57 <div class="p-5"> 58 <a href="#"> 59 <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white line-clamp-1"> 60 ${movie.title} 61 </h5> 62 </a> 63 <p class="mb-3 font-normal text-gray-700 dark:text-gray-400 line-clamp-2">${movie.plot}</p> 64 <a href="#" 65 class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> 66 See more 67 <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" 68 xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10"> 69 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" 70 stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" /> 71 </svg> 72 </a> 73 </div> 74 </div> 75 `).join(''); 76 } 77 </script> 78 </body>
Nas alterações acima:
- Adicionamos uma função chamada exibiçãoMovies, que usa filmes como argumento. Ele renderizará cartões de filme na tela com base na lista de filmes.
- Em seguida, temos uma função chamada handleSearch que é um manipulador de eventooninput para a caixa de entrada de pesquisa.
- Na funçãohandleSearch , temos uma função chamada titleAutocomplete, que obtém e exibe dados do endpoint da API de preenchimento automático.
- Em seguida, temos a funçãofetchMovies, que obtém dados do ponto de extremidade da API de pesquisa dentro do qual chamamos a função exibiçãoMovies para exibir a resposta do filme para a API.
É crucial tornar mais fácil para seus usuários encontrarem o que procuram em um website para que tenham uma ótima experiência de usuário. Neste guia, mostrei como criei uma pesquisa de texto para um aplicação de filme com o Atlas Search. Essa pesquisa permitirá que os usuários pesquisem filmes por título.
O Atlas Search é um mecanismo de pesquisa de texto completo que permite aos desenvolvedores implementar uma funcionalidade de pesquisa avançada em seus aplicativos. Ele permite que os usuários pesquisem grandes quantidades de dados de forma rápida e eficiente.
Você tem perguntas ou comentários? Vamos continuar a conversa! Acesse a Comunidade de desenvolvedores MongoDB , queremos ouvir MongoDB Developer Community você.
Feliz codificação.
Avaliar este tutorial
Relacionado
Tutorial
Gerenciando uma arquitetura de metadados de catálogo de produtos inteligentes com MongoDB Atlas e Google Cloud Platform Google Cloud Platform
Mar 12, 2025 | 9 min read
Evento do Setor
DENVER, CO, USA | HYBRID
Recursos para desenvolvedores do MongoDB + Trimble AI Summit
Apr 23, 2025 - Apr 25, 2025