Creación de Campos Virtuales en Componentes con Tailwind CSS

Para los que depronto el sistema de columnas no les funcione deben hacer lo siguiente:

npm run development

luego

php artisan serve

y listo, ya se pueden visualizar las columnas

Para generar AVATARES FAKE usen esta linea de codigo de https://pravatar.cc/ . Asi a pesar e que el correo sea fake se ligara siempre a un avatar fake.

Espero que les sea útil

public function getAvatarAttribute()
    {
        //gravatar
        $email = md5($this->email);
        return "https://i.pravatar.cc/150?u=/$email"; 
    }

Toca leer bien como es eso de Gravatar. Por otro lado, queda claro que livewire ahorra lineas de codigo.

Les comparto el archivo CourseList.php

<div class="grid grid-cols-3 gap-4 mt-8">
  @foreach ($courses as $course)
  <div class="bg-white shadow-lg rounded-lg px-4 py-6 text-center">
    <a href="#">
      <img src="{{ $course->image }}" class="rounded-md mb-2" alt="">
      <h2 class="text-lg text-gray-600 truncate uppercase">{{ $course->name }}</h2>
      <h3 class="text-md text-gray-500">{{ $course->excerpt }}</h3>

      <img src="{{ $course->user->avatar }}" class="rounded-full mt-4 mx-auto h-16 w-16" alt="">
    </a>
  </div>
  @endforeach
</div>

Les comparto una extensión para Tailwind muy útil si planean usar este framework frontend para desarrollar

Eso es cierto, he visto que muchas plataformas usan gravatars, la primera vez que lo vi fue como: “what the is this?!!” A final tuve que crearme uno xD De hecho me parece que la página de npmjs funciona con gravatars también 🤔
.
Por cierto, los campos virtuales son geniales porque te permiten de alguna forma “customizar” lo que quieres que te retornen, es decir, puedes definir simplemente una propiedad y puedes definir qué quieres que retorne esa propiedad, prácticamente puedes aplicar cualquier tipo de lógica al definir lo que va a retornar esa propiedad 😄

Livewire: diseño del componente

Esto son campos virtuales, esto quiere decir que no existen pero a través del modelo generamos creamos cualquier tipo de lógica para crearlos.

public function getAvatarAttribute()
{
    // gravatar
    $email = md5($this->email);
    return "https://s.gravatar.com/avatar/$email";
}

Los campos virtuales también llamado “accesores”:
Accesores - get(nombre del accesor), Atribute asi debe llamarse el accesor.
Ej: getStockAttribute()

A lo que el profesor llama un campo virtual, es un accesor. Lo que hacen los accesores es tomar un atributo y transformar su valor al momento de obtenerlo/leerlo. También existen los mutadores, que lo que hacen es modificar el valor del atributo al momento en que se va a guardar.

Accesores y mutadores

Min 7:50… Yo simplemente hago Str::limit($variable,77)

No se si me lo perdí, pero pueden colocar el comando siguiente para que Tailwind se compile de forma automática cada vez que realizamos un cambio.

npm run watch

Course.php

public function getExcerptAttribute()
    {
        return substr($this->description,0,80) . "..." ;
    }

User.php

public function getAvatarAttribute()
    {
        $email=md5($this->email);
        return "https://s.gravatar.com/avatar/$email";
    }

Gravatar

Para ver las imágenes en gravatar de esta forma

O de esta

.
Sin tener que registrar una cuenta en gravatar se haría de la siguiente forma:

public function getGetEmailHashAttribute()
    {
        $hash = md5($this->email);
        return "https://www.gravatar.com/avatar/{$hash}?s=48&d=identicon";
    }

.
Así generarian una imágen de Gravatar con cualquier correo electrónico sin importar que este no esté registrado en Gravatar.

Les comparto el codigo de course-list.blade.php

<div class="grid grid-cols-3 gap-4 mt-8">
    @foreach ($courses as $course)
    <div class="bg-white shadow-lg rounded-lg px-4 py-6 text-center">
        <a href="#">
            <img src="{{ $course->image }}" class="rounded-md mb-2">
            <h2 class="text-lg text-gray-600 truncate uppercase">{{ $course->name }}</h2>
            <h3 class="text-md text-gray-500">{{ $course->excerpt }}</h3>
            <img
                src="{{ $course->user->avatar }}"
                class="rounded-full mx-auto h-16 w-16"
            >
        </a>
    </div>
    @endforeach
</div>

Para seguir aprendiendo cree un componente llamado corseCard, e hice de courseList una lista de courseCard.

Me sirvió para aprender como pasar datos entre componentes y aprender sobre la función mount() de un componente 😄.

Animo a mis compañeros a intentarlo!

Para no estar ejecutando

npm run development 

Cada vez que actualizan el codigo, recomiendo ejecutar

npm run watch

El cual quedará mirando los cambios y actualizará los estilos de Tailwind cada vez que guardes esos cambios.

Si así como yo utilizaste el facade Storage debes tener en cuenta que para poder mostrar las imágenes debes utilizar un host virtual, de lo contrario no encontrara la ruta de dicha imagen.

<div class="grid grid-cols-3 gap-4 mt-8">
    @foreach ($courses as $course)
        <div class="bg-white shadow-lg rounded-lg px-4 py-6 text-center">
            <a href="#">
                <img class="rouded-md mb-2" src="{{ Storage::url($course->image) }}" 
            </a>
        </div>
    @endforeach
</div>

En este caso me salen las imágenes tan pequeñas por que a la hora de generar el Factory coloque erróneas las medidas de las imágenes.

Para Gravatar desarrollé una librería para PHP, puede serles útil https://github.com/jruedaq/gravatar-url

Para los que tengan duda de como funciona gravatar al igual que yo lo estaba:
Básicamente gravatar es un programa en el cual tu creas tu cuenta con un correo y subes la imagen de perfil que tu quieres sea visualizada dentro de todas las aplicaciones que usan la api de gravatar, en general son bastantes y en su mayoria son usadas por apps de wordpress. Es como si subieramos una foto de perfil general para que los desarrolladores las apliquen en sus apps simplemente con el correo.

**Ponganle a la url de gravar el parametro identiicon **

https://www.gravatar.com/avatar/00000000000000000000000000000000?d=identicon

Que diferencia habría entre los mutators/accessors y los campos virtuales? A mi parecer son lo mismo.

SI necesitamos desarrollar una logica mas extensa sobre el negocio, lo hacemos sobre la clase del objeto y ya no utilizamos mas los viejos controlller???

A alguien más le salio este erro?
Trying to get property ‘avatar’ of non-object