En este artículo te mostraré un software para recetas que es gratuito y open source. Esto también puede ser conocido como recetario online, libro de recetas, libro de recetas en línea, alternativa simple y open source a kiwilimón, libro de cocina online, programa para recetas, programa para gestionar recetas, sitio de cocina, etcétera.

Lo que te muestro aquí está hecho con Vue y PHP usando MySQL como base de datos. Permite:

• Registrar recetas con foto, nombre, porciones, ingredientes y pasos
• Los ingredientes cambian dependiendo de las porciones de manera automática
• Listar recetas en tabla para editarlas y eliminarlas, es decir, gestionarlas
• Mostrar recetario o libro de cocina en línea con opción de búsqueda
• Imprimir receta de manera amigable
• Ver detalles de receta con cajas de texto para marcar los ingredientes y pasos completados
• Modificar el software a tus necesidades ya que es open source y gratuito

Oh, y si te lo preguntas, decidí crearlo porque en una ocasión busqué una receta y el sitio en donde la encontré no me daba la opción de imprimirlo.

Vamos allá.

Agregar receta

Para empezar veamos el apartado que agrega una receta. Se solicitan las porciones, los pasos y los ingredientes, así como la descripción, el nombre y una foto. Todos estos datos van a quedar guardados en el software gestor de recetas.

He solicitado los ingredientes de esa manera para que el usuario final pueda modificar las porciones y que la cantidad de ingredientes cambie de manera automática.

Como puedes ver puedes agregar ingredientes y pasos infinitos, también puedes eliminarlos de la lista. Eso sí: el botón de guardado no se habilita hasta que los pasos e ingredientes sean válidos.

Gestión de recetas

Ahora que ya agregamos una nueva receta a nuestro software gestor de recetas de cocina es momento de ver la gestión.

Esto es distinto al apartado que se le muestra al usuario, ya que esto es más enfocado al administrador. Aquí podemos editar y eliminar, así como filtrar las recetas que hemos agregado.

Al eliminar se muestra una alerta de confirmación:

Y al editar se navega al formulario para editar la receta, que es muy parecido al que se usa para registrar una nueva receta de cocina.

Editar receta

Como lo dije, el formulario de editar receta es idéntico al que se usa para crear una nueva receta. Lo único que cambia es que podemos reemplazar la foto si así lo queremos.

También podemos cambiar el nombre de la receta, los ingredientes, pasos, etcétera.

Recetario

Este apartado es el que el usuario final verá. Ahí se pueden filtrar las recetas que hemos registrado en la base de datos, ya sea por nombre o descripción. También aparece la foto de las recetas.

Como puedes ver aquí usamos la foto de la receta para mostrarla en una tarjeta. Se muestran 3 tarjetas por fila en pantallas grandes, pero en pantallas más pequeñas se muestra solo una columna en todo lo ancho.

Aquí no aparecen las porciones, ingredientes ni pasos; solo aparece el nombre de la receta, su descripción y la foto. Cuando el usuario hace clic en el enlace se le lleva al detalle de la receta.

Detalle de receta

Cuando el usuario hace clic en Ver la receta se le dirige a un apartado en donde ya puede ver los pasos para la receta así como los ingredientes.

Toda la lista contiene checkboxes para que el usuario pueda indicar que ha completado ese paso o que cuenta con ese ingrediente.

El usuario también puede imprimir la receta que hemos registrado en nuestro recetario con PHP, y también ajustar las porciones para que la cantidad de ingredientes cambie automáticamente.

Imprimir receta

El menú, el pie, las porciones y el botón se ocultan al imprimir una receta, aplicando el truco para ocultar elementos con CSS que ya mostré en otro de mis posts. Aquí el usuario puede seleccionar cualquier impresora para sacar la receta.

Yo lo he guardado como PDF y aquí los resultados. Por cierto, el nombre de la impresión igualmente lo genera el programa cambiando temporalmente el título del documento: Receta de Tacos al pastor

Apartado técnico

<template>
  <div>
    <div class="columns">
      <div class="column">
        <b-field label="Buscar receta">
          <b-input
            @keyup.native="buscar()"
            v-model="busqueda"
            placeholder="Ingresa el término de búsqueda"
            icon-right="close-circle"
            icon-right-clickable
            @icon-right-click="cancelarBusqueda()"
            :loading="cargando"
          ></b-input>
        </b-field>
      </div>
    </div>
    <div class="columns is-multiline is-desktop">
      <div
        class="column is-one-third-desktop"
        v-for="(receta, i) in recetas"
        :key="i"
      >
        <tarjeta-receta :receta="receta"></tarjeta-receta>
      </div>
    </div>
  </div>
</template>
<script>
import RecetasService from "../services/RecetasService";
import TarjetaReceta from "./TarjetaReceta.vue";
import Utiles from "../services/Utiles";
export default {
  components: { TarjetaReceta },
  data: () => ({
    recetas: [],
    cargando: false,
    busqueda: "",
  }),
  async mounted() {
    await this.obtenerRecetas();
    this.buscar = Utiles.debounce(async () => {
      if (!this.busqueda) {
        await this.cancelarBusqueda();
        return;
      }
      this.cargando = true;
      this.recetas = await RecetasService.buscarRecetas(this.busqueda);
      this.cargando = false;
    }, 500);
  },
  methods: {
    async cancelarBusqueda() {
      if (!this.busqueda) return;
      this.busqueda = "";
      await this.obtenerRecetas();
    },
    async obtenerRecetas() {
      this.cargando = true;
      this.recetas = await RecetasService.obtenerRecetas();
      this.cargando = false;
    },
  },
};
</script>

El programa está hecho con Vue y PHP. Del lado del cliente se usa el framework Buefy que es una combinación de Vue con Bulma, y obviamente el lenguaje JavaScript.

Varias cosas están divididas en componentes, por ejemplo la tarjeta del recetario o la imagen de la receta.

Del lado del servidor he utilizado PHP puro y MySQL para la base de datos.

Para montarlo en un servidor simplemente debes compilar el lado del cliente, configurar variables de entorno y subir todo junto con la API de PHP al servidor. Solo necesitas Apache y PHP con MySQL.

Instalación y descarga del código

Este recetario es open source y gratuito y se puede ejecutar en Windows, Linux o MacOS (incluso en Android con los ajustes necesarios).

Puedes descargarlo desde este enlace. Una vez descargado vas a necesitar:

• Composer
• NPM
• PHP, MySQL y Apache

Ahora coloca el código en tu servidor local, en mi caso es en htdocs. Abre una terminal, ingresa a la carpeta api y ejecuta:

composer install

Luego crea la base de datos en MySQL e importa el archivo llamado esquema.sql. Crea el archivo llamado env.php tomando como ejemplo el archivo env.ejemplo.php y configura las credenciales de acceso.

Con eso tendrás el lado del servidor; para el lado del cliente abre una terminal en la raíz del proyecto e instala las dependencias con:

npm install

Ahora inicia el servidor de desarrollo con:

npm run serve

Y puedes ingresar a localhost:8080 para comenzar a programar. No olvides cambiar el .env y .env.production del lado del cliente por si cambias la URL del servidor.

Producción

Para producción simplemente modifica el archivo de cors.php y establece la variable de producción en true. Del lado del cliente compila todo con: npm run build

Y copia todo lo de dist a la carpeta pública de tu servidor web (en donde también debe estar la carpeta api) para que sean servidos como archivos estáticos (al final tendrás solo JS, CSS y HTML). No olvides configurar todas las variables de entorno.

Aquí te dejo un vídeo de la instalación por si lo anterior no quedó claro:

Conclusión

Si te ha gustado este software te invito a ver otros programas que he creado. Por cierto, si te gustan estas tecnologías te recomiendo leer más sobre PHP, MySQL, Vue y JavaScript.