S2E8 Tworzenie logiki wyszukiwania

Adres aplikacji: https://skrotowiec.elk.pl/

Kod aplikacji: https://gitlab.com/jaktworzycaplikacje.pl/skrotowiec/-/tree/master

Ten wpis zawiera informacje w jaki sposób:

* Stworzyć logikę wyszukiwarki,
* Zaprezentować wyniki wyszukania,
* Szybko stworzyć operację CRUD dla encji,
* Dodać top 10 wyszukiwanych skrótowców,
* Dodać wysyłkę maila, gdy nie znaleziono skrótowca.

Przed przystąpieniem do tego kroku powinieneś posiadać aplikację jhipster z skonfigurowanym schematem bazy danych. Jak to zrobić opisałem w wpisie:

S2E7 Tworzenie encji z wykorzystaniem JDL

1. Dodanie top 10 najczęściej wyszukiwanych skrótowców:

Pierwszym krokiem jakim chciałbym żebyś wykonał, to upewnienie się czy w pliku application-dev.yml w contexts

contexts: dev, faker

masz ustawione wartości jak powyżej. Dzięki tej komendzie podczas developmentu będziesz posiadał gotowe, randomowe dane w bazie danych.

Kod wyszukania top 10 skrótów znajduje się w branchu: feature/most-recent-search

https://gitlab.com/jaktworzycaplikacje.pl/skrotowiec/-/commit/d4dc13ae31d084e075eec95a84fa55574c639f55

Jhipster na starcie posiada konfigurację security, którą będziesz musiał zmienić. Użytkownik, który jest niezalogowany nie ma dostępu do encji. Na stronie głównej zawsze będziesz niezalogowany. Dlatego stworzysz nową ścieżkę dla pobierania danych dla niezalogowanego użytkownika, która będzie niezabezpieczona przez spring security.

W pliku src/main/java/pl/com/skrotowiec/config/SecurityConfiguration.java

Dodaj:

.antMatchers("/api/acronyms/home/**").permitAll()

Kiedy niezalogowany użytkownik ma już dostęp do endpoitów dodaj query w pliku AcronymRepository.java:

List<Acronym> findTop10ByOrderBySearchCountDesc();

Teraz Stwórz resource z którego front end będzie czerpał dane do wyświetlenia. Do pliku dodaj AcronymResource.java:

public List<Acronym> getTop10Acronyms() 

Back end gotowy, miejsce pobierania danych gotowe. Teraz zaprogramuj widok.

Po stronie front endu w pliku acronym.service.ts dodaj metodę która będzie odpowiadać, za zapytanie http do back endu:

queryTop10(): Observable<EntityArrayResponseType>

Przekazanie do widoku danych które pobrałeś z back endu odbywa się w pliku home.component.ts. Dla komponentu home dodaj metodę która będzie wywoływać pobranie. W pliku home.component.ts dodaj:

private queryTop10(): void

Metody queryTop10 będziesz używał podczas tworzenia komponentu oraz po aktualizacji wyszukiwań (kiedy ktoś wyszuka skrótowca).

Ostatnim krokiem będzie dodanie samego widoku w pliku html. Do pliku home.component.html dodaj pętlę która będzie wyświetlać skrótowce w tabeli:

<tbody>
  <tr *ngFor="let acronym of top10acronyms">
    <td>{{ acronym.searchCount }}</td>
      <td>
        <strong>{{ acronym.abbreviation }}</strong>
      </td>
    <td>
      {{ acronym.meaning }}
    </td>
  </tr>
</tbody>

2. Dodanie wysyłki maila z propozycją nowego skrótowca

Jeśli użytkownik nie znajdzie skrótowca może wysłać maila z prośbą o dodanie szukanego słowa, widok wygląda następująco:

Mechanizm wysyłania maila jest zaimplementowany w wygenerowanym kodzie back endu jhipstera. Możesz skorzystać z odpowiednich metod które znajdują się w pliku MailService.java lub dodać swoją metodę (ja dodałem nową poniższą):

@Async
public void sendProposalAcronymEmail(User user, String proposalAcronym)

Następnym krokiem będzie utworzenie odpowiedniej konfiguracji. Do wysyłania wiadomości email skorzystasz z gmaila.

Do pliku application-prod.yaml oraz application-dev.yaml dodaj konfigurację:

mail:
  host: smtp.gmail.com
  port: 587
  username: skrotowiec@gmail.com
  password:
  properties:
    mail:
      smtp:
        auth: true
        starttls:
          enable: true
          required: true
        ssl:
          trust: smtp.gmail.com

Hasła nie podawaj w pliku konfiguracyjnym, możesz je przypadkowo zkomitować i będzie dostępne dla każdego, kto ma dostęp do repozytorium kodu. Zamiast tego wykorzystaj Jenkinsa oraz jego dodatek credensials. Niech Jenkins zajmie się wstrzykiwaniem hasła podczas startu aplikacji.

Proces dodawania haseł do Jenkinsa opisałem w pkt 4. Stworzenie pipeline do startu aplikacji w wpisie:

S2E6 Kurs Jenkins Continuous Deployment dla spring boot & angular.

3.Dodanie logiki wyszukiwania

Widok formularza wyszukiwania wygląda następująco:

Po wyborze w którym miejscu szukać (domyślnie jest zaznaczone, aby szukać w skrótach) w polu wyszukiwarki użytkownik zaczyna wpisywać skrót, po wpisaniu dwóch znaków pod wyszukiwarką pojawiają się podpowiedzi. Po kliknięciu w podpowiedź przycisk szukaj zostaje aktywowany.

Następnie po kliknięciu w przycisk szukaj, ekran zostanie przewinięty do sekcji która tworzy się w momencie pierwszego wyszukania:

Po skończonej sekwencji wyszukiwania, uruchamia się mechanizm dodania wyszukania do tabeli najczęściej wyszukiwane, oraz jej odświeżenie.

Tą część kodu pozostawiam Tobie do samodzielnego researchu, w ramach ćwiczenia. Nie ma tutaj nic szczególnego co mogło by przysporzyć problemy. Cała logika znajduje się w komponencie home.