Nesta segunda parte do tutorial veremos como implementar o backend e o frontend de uma explicação que consome a API do Google Search. O objetivo é fazer uma busca de imagens baseadas em um determinado termo de pesquisa.

Backend

Crie um projeto do tipo ASP.Net Core Web App MVC:

Adicione ao projeto o NuGeT package Google.Apis.CustomSearchAPI.v1:

Edite o arquivo HomeController.cs e deixe-o com o seguinte conteúdo:

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Google.Apis.CustomSearchAPI.v1;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using Newtonsoft.Json;
using TutorialGoogleImages.Models;

namespace TutorialGoogleImages.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public IActionResult AjaxQueryImages(string query)
        {
            const string apiKey = "API_KEY";
            const string seId = "SEARCH_ENGINE_ID";

            var csa = new CustomSearchAPIService(new Google.Apis.Services.BaseClientService.Initializer()
            {
                ApiKey = apiKey,
            });

            var request = csa.Cse.List();
            request.Cx = seId;
            request.Q = query;
            request.SearchType = CseResource.ListRequest.SearchTypeEnum.Image;
            var result = request.Execute().Items.ToList();

            return JsonData(result.Select(r => new
            {
                r.Link,
                r.Image.ThumbnailLink,
            }));
        }

        public ActionResult JsonData(object data) => Content(JsonConvert.SerializeObject(data), "application/json");
    }
}

Aqui você deve trocar os valores API_KEY e SEARCH_ENGINE_ID pelos valores que você obteve na parte 1 do tutorial. São as chaves de acesso a API do Google!

Frontend

Edite o arquivo Views/Home/Index.cshtml para ficar com o seguinte conteúdo:

@section scripts {
    <script>
        $('form').submit(function () {
            let query = $('input').val();
            if (!query) {
                alert('Informe um termo para buscar');
                return false;
            }

            let el_grid = $('.grid');
            $.get('/Home/AjaxQueryImages', { query: query }, function(data) {
                el_grid.empty();
                console.log(data);
                for (var i = 0; i < data.length; i++) {
                    el_grid.append(`<a href="${data[i].Link}" target="_blank"><img src="${data[i].ThumbnailLink}" /></a>`);
                }
            });

            return false;
        });
    </script>
}

<style>
    .grid {
        margin-top: 40px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-gap: 15px;
    }
</style>

<main>
    <div class="row">
        <form class="col-4">
            Buscar images:
            <input type="text" class="form-control" />
            <button class="btn btn-primary mt-1">Carregar</button>
        </form>

        <div class="col-12 grid">

        </div>
    </div>
</main>

Demo

Veja o resultado final aqui.

Basta digitar um termo de busca e apertar ENTER que a grid é populada com o resultado. Note que é exibido o thumbnail da imagem. Clicando nela é aberto a imagem em alta resolução.

Conclusão

Nessa demo conseguimos através do backend, chamar por C# a API do Google.

O código fonte da demo pode ser encontrado aqui.