Crea un proyecto completo utilizando Ollama, Flask, Next.js y Leaflet – Guía detallada paso a paso

En este tutorial, aprenderás a construir un proyecto completo utilizando cuatro tecnologías populares: Ollama, Flask, Next.js y Leaflet. Ollama es un marco para desarrollar aplicaciones web de forma rápida y sencilla, Flask es un marco de desarrollo web en Python que se utiliza para crear aplicaciones web simples y rápidas, Next.js es un marco de desarrollo de aplicaciones web en JavaScript que se utiliza para construir interfaces de usuario modernas y dinámicas, y Leaflet es una biblioteca de JavaScript para mapas interactivos.

Este proyecto que vamos a construir consistirá en una aplicación web donde los usuarios puedan visualizar y buscar diferentes puntos de interés en un mapa interactivo. Utilizaremos Ollama como nuestro backend para manejar la lógica de negocio y almacenar los datos, Flask como el servidor para servir la aplicación web, Next.js para construir la interfaz de usuario y Leaflet para mostrar el mapa interactivo.

Paso 1: Configurar el entorno de desarrollo
Lo primero que debemos hacer es configurar nuestro entorno de desarrollo. Asegúrate de tener Node.js y Python instalados en tu máquina. Después, crea una nueva carpeta para tu proyecto y abre una terminal en esa ubicación.

Paso 2: Inicializar un nuevo proyecto de Next.js
Para comenzar, ejecuta el siguiente comando en tu terminal para inicializar un nuevo proyecto de Next.js:

npx create-next-app my-app

Esto creará una nueva carpeta llamada my-app con la estructura básica de un proyecto de Next.js.

Paso 3: Configurar Flask
Dentro de la carpeta de tu proyecto, crea una nueva carpeta llamada backend y dentro de ella crea un nuevo archivo llamado app.py. En este archivo, escribiremos nuestro código Flask. Utiliza el siguiente código como base para tu archivo app.py:

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'Hello, World!'

if __name__ == '__main__':
    app.run()

Paso 4: Configurar Ollama
Para añadir Ollama a nuestro proyecto, ejecuta el siguiente comando en tu terminal dentro de la carpeta de tu proyecto:

npm install ollama

Esto instalará Ollama en tu proyecto y podrás comenzar a utilizarlo en tu archivo app.py.

Paso 5: Configurar Leaflet
Para añadir Leaflet a nuestro proyecto, ejecuta el siguiente comando en tu terminal dentro de la carpeta de tu proyecto:

npm install leaflet

Esto instalará Leaflet en tu proyecto y podrás comenzar a utilizarlo en la interfaz de usuario de tu aplicación.

Paso 6: Construir la interfaz de usuario
Dentro de la carpeta pages de tu proyecto de Next.js, crea un nuevo archivo llamado Map.js. En este archivo, puedes utilizar el código siguiente como base para crear la interfaz de usuario de tu mapa interactivo utilizando Leaflet:

import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'

const Map = () => {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '400px', width: '400px' }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <Marker position={[51.505, -0.09]}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  )
}

export default Map

Paso 7: Integrar Ollama con Flask
Para integrar Ollama con Flask, debes importar la clase Ollama en tu archivo app.py y configurarla para que se conecte a la base de datos. Utiliza el código siguiente como base para añadir la funcionalidad de Ollama a tu aplicación Flask:

from flask import Flask
from ollama import Ollama

app = Flask(__name__)
ollama = Ollama(app)

@app.route('/')
def index():
    return 'Hello, World!'

if __name__ == '__main__':
    app.run()

Paso 8: Ejecutar la aplicación
Para ejecutar tu aplicación, abre dos terminales: una para ejecutar el servidor Flask y otra para ejecutar el servidor Next.js. En la terminal donde tienes tu archivo app.py, ejecuta el siguiente comando para iniciar el servidor Flask:

python app.py

En la terminal donde tienes tu proyecto de Next.js, ejecuta el siguiente comando para iniciar el servidor Next.js:

npm run dev

Ahora podrás acceder a tu aplicación en tu navegador visitando http://localhost:3000.

¡Enhorabuena! Has construido con éxito un proyecto completo utilizando Ollama, Flask, Next.js y Leaflet. Ahora puedes agregar más funcionalidades a tu aplicación, como la capacidad de buscar puntos de interés en el mapa o mostrar información detallada de cada punto en un popup. ¡Diviértete explorando y mejorando tu proyecto!