Books collection : Flex object front-end : no books found

Hi, there!
I'm new to grav.
I have added a blueprints/flex-objects/books.yaml with FileStorage. Also added a config/plugins/flex-objects.yaml including my blueprint.
On the admin side, everything's fine : flex objects appears in sidebar and I can manage my books collection. I got 2 books encoded and, according to storage info in blueprint, grav creates json files like dc4450d01b354fcc546782c88eb9a3f4.json in user/data/flex-objects/books/ which is what I want.
The issue lies in the front end. I created a page with template books.html.twig. But the page displays "NO BOOK FOUND". Here is the template :
{% extends 'partials/base.html.twig' %}

{% block content %}
<h1>Books Collection</h1>
{% set books_dir = grav.flex.directory('books') %}
{% set keys = books_dir.keys() %}
<ul>
{% for book in books_dir.all(keys) %}
<li><strong>{{ book.title }}</strong> by {{ book.author }}</li>
{% else %}
<li>No books found.</li>
{% endfor %}
</ul>
{% endblock %}
What am I missing?
Thanks for your answers.

Hi @odewaele, here's a basic example for you, along with a link to the docs.

{% set directory = grav.get('flex').directory('books') %}
{% set books = directory.collection() %}

{% if books.isEmpty() %}
  <div>No books found.</div>
{% else %}
<ul>
  {% for book in books %}
    <li>{{ book.title }} by {{ book.author }}</li>
  {% endfor %}
</ul>
{% endif %}

Thanks, @b.da. I finally had to add
site:
templates:

• collection
  router:
  path: '/books'
  slug: 'title'
  to my blueprint, load blueprint in my plugin file :
  directories:
  0: 'blueprints://flex-objects/books.yaml'
  and it now works fine!