DEV Community: Ushieru Kokoran

Flutter + Dart Frog

Ushieru Kokoran — Sun, 09 Oct 2022 23:00:23 +0000

Requisitos:

Flutter 3.3.4
Dart 2.18.2
Dart Frog 0.1.2

Dart frog nos brinda esta oportunidad de volvernos Fullstack developers sin pasar por la complejidad de adquirir otro lenguaje si ya somos desarrolladores de Flutter. Así que veamos como combinar estas dos tecnologías para crear un stack completo para la web.

Init proyect

Creamos una carpeta para nuestros archivos

$ mkdir dartfrog+flutter
$ cd dartfrog+flutter

Creamos el frontend

# /dartfrog+flutter
$ flutter create frontend

Creamos el backend

# /dartfrog+flutter
$ dart_frog create server

Abre la carpeta dartfrog+flutter en tu editor favorito

Creamos una carpeta public en nuestro servidor

Modifiquemos el index.dart para que sirva nuestro html

Creemos una version web de Flutter

# /dartfrog+flutter/frontend
$ flutter build web

Movamos el build a nuestra carpeta public en el servidor

# /dartfrog+flutter
$ mv .\frontend\build\web\* .\server\public\

Probemos nuestro proyecto

Corramos el servidor con dart_frog

# /dartfrog+flutter/server
$ dart_frog dev

Revisemos si todo funciona en la web

Y listo 🚀

Te dejo el repositorio si quieres echarle un ojo.

Gracias a Dart frog los desarrolladores mobile con experiencia en Flutter pueden dar este paso a la web sin tener que aprender un nuevo lenguaje, minimizando la curva de aprendizaje. Y que opinas la próxima hacemos deploy de nuestra app?

y Happy Hacking 🧑‍💻🎉

STOMP - Websockets

Ushieru Kokoran — Sat, 17 Sep 2022 20:48:03 +0000

Hace unos días me preguntaba como hacían estos brokers que usualmente son los mas utilizados para la comunicación entre Clientes y servidores con Sockets y WebSockets. Tales como: Socket io, Feathers o Graphql WS, entre muchos otros.

Que es STOMP?

Entre mi investigación me tope con STOMP (Simple Text Oriented Protocol) un protocolo de Mensajería Orientado a Texto Simple. Es un protocolo muy simple y fácil de implementar, proveniente de la escuela de diseño HTTP.

Todo esto nace de las quejas que he escuchado de programadores seniors cuando tienen que migrar de todas estas herramientas a algo mas robusto, o tener que escalar SocketIO con su implementación con Redis.

Así que bueno... la pregunta del millon.

Quien soporta STOMP?

Pues un par de brokers, como:

ActiveMQ
HornetQ
OpenMQ
RabbitMQ
Entre un par mas.

Entonces tenemos quien lo soporte con buen nivel empresarial.
Aquí el asunto es que no hay brokers sencillos que puedan acoplarse de manera fácil a un backend sino es con una arquitectura orientada a servicios. Así que igual y deberíamos hacerlo.

Hay muy poca información acerca de STOMP en español.
Así que hasta que encuentre algo mas divertido que hacer. Me volveré un pequeño contribuidor de este protocolo.

Paynal

En honor al dios Mexica Paynal mensajero de Huitzilopochtli. Estaré trabajando en la implementación de varios servidores y clientes (En diferentes lenguajes) que trabajen usando este protocolo en su versión 1.2 (STOMP 1.2).

Aquí les dejo el Repositorio por si solo te quieres pasar o echar una mano, que siempre es bienvenida. Muchas gracias por tu atención.

y Happy Hacking 🧑‍💻🎉

FullStack - Dart Frog + React

Ushieru Kokoran — Sat, 10 Sep 2022 20:11:49 +0000

Liquid syntax error: 'raw' tag was never closed

Dart Frog

Ushieru Kokoran — Sat, 10 Sep 2022 16:49:54 +0000

Liquid syntax error: 'raw' tag was never closed

Prisma - Next-generation ORM

Ushieru Kokoran — Thu, 21 Jul 2022 05:43:30 +0000

Requisitos:

Conocimiento básico en API REST
Conocimiento básico de SQL
Node.js
npm client de su preferencia.

En este tutorial veremos como hacer un API REST TODO App con TypeScript, Prisma y esbuild.

⚠️ No necesitas previo conocimiento de ninguna de estas tecnologías.

Que es Prisma?

Es un ORM de próxima generación con soporte para TypeScript con unas herramientas para facilitarnos la vida:

Prisma Client: Generador de consultas de tipo seguro y autogenerado que se adapta a sus datos.
Migraciones: Herramienta para crear y gestionar las migraciones de tu base de datos.
Prisma Studio: GUI client para tu base de datos.

👀 Para que no haya pierde en donde va cada cosa o si solo vienes a echar un vistazo rápido; te dejo el código en este repo.

Empezemos 🧑‍💻

Si estas usando VSCode puedes usar el plugin oficial de Prisma.

Instalemos nuestras dependencias

# yarn
$ yarn add -D prisma esbuild @types/node
$ yarn add @prisma/client

# npm
$ npm i -D prisma esbuild @types/node
$ npm i @prisma/client

levantemos nuestro entorno de trabajo

# yarn
$ yarn prisma init

# npm
$ npx prisma init

Actualicemos nuestras variables de entorno. Para este tutorial practico usaremos SQLite pero puede revisar las que soporta Prisma.

# .env
DATABASE_URL="file:./database.sqlite"

Actualicemos nuestro schema.prisma

// prisma/schema.prisma
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite" // <- usemos SQLite
  url      = env("DATABASE_URL")
}

Creamos nuestro builder con esbuild para trabajar con TypeScript.

Si no sabes como funciona esto igual luego deberías darte tiempo para leer mi blog esbuild - Desarrollo sin dolor

// esbuild.dev.js
import { spawn } from 'child_process'
import esbuild from 'esbuild'

let server;

const startServer = (message) => {
    if (server) server.kill('SIGINT')
    server = spawn('node', ['./dist/index.mjs'], { stdio: 'inherit' })
    console.log(`\n${message}\n`)
}

esbuild.build({
    entryPoints: ['./src/index.ts'],
    watch: { onRebuild: (err) => !err && startServer('Rebuilded') },
    bundle: true,
    minify: true,
    platform: 'node',
    format: 'esm',
    target: ['esnext'],
    external: ['/node_modules/*'],
    outfile: './dist/index.mjs',
})
    .then(() => startServer('Done 🚀'))
    .catch(() => process.exit(1))

Actualicemos nuestro package.json.

// package.json
{
  "name": "prisma",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Ushieru Kokoran (https://ushieru.com/)",
  "license": "MIT",
  "type": "module", // <- soporte a mjs
  "scripts": {
    "dev": "node esbuild.dev.js" // <- script para desarrollo
  },
  "dependencies": {
    "@prisma/client": "^4.1.0",
    "@types/koa": "^2.13.5",
    "@types/node": "^18.0.6",
    "koa": "^2.13.4"
  },
  "devDependencies": {
    "esbuild": "^0.14.49",
    "prisma": "^4.1.0"
  }
}

Creemos el modelo de nuestras tareas. Si estas usando otra DB que no sea SQLite puede usar enums en el status. (defining-enums)

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = env("DATABASE_URL")
}

model Task {
  id          String   @id @default(cuid())
  name        String
  description String
  status      String   @default("OPEN") // OPEN, IN_PROGRESS, DONE
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}

Ahora debemos cargar nuestros modelos a la base de datos.

# yarn
$ yarn prisma db push

# npm
$ npx prisma db push

Generate Prisma Client...? Asi es, prisma genera los types de los objetos a partir de las tablas de la base de datos al vuelo. Es posible que VSCode no se de cuenta de este cambio así que hay que reiniciar el server de TypeScript.
Para eso abrimos la paleta de comandos y ejecutamos: TypeScript: Reset TS server.

Creemos un cliente de prisma para tener acceso a nuestro ORM y su respectivo CRUD (Create, Read, Update, Delete).

// src/crudTask.ts
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

// Tenemos acceso a nuestro modelo task que es un mapeo exacto
// a nuestra tabla en la base de datos. Y con TypeScript tenemos
// el autocompletado para no cometer errores.

export const createTask = async (name: string, description: string) => {
    return await prisma.task.create({
        data: { name, description }
    })
}

export const readTasks = async () => {
    return await prisma.task.findMany()
}

export const readOneTask = async (id: string) => {
    return await prisma.task.findUnique({ where: { id } })
}

export const updateTask = async (id: string, name: string, description: string, status: 'OPEN' | 'IN_PROGRESS' | 'DONE') => {
    return await prisma.task.update({
        data: { name, description, status },
        where: { id }
    })
}

export const deleteTask = async (id: string) => {
    return await prisma.task.delete({ where: { id } })
}

Y ya lo tenemos 🎉🎉 Puedes envolverlo en cualquier backend que quieras en src/index.ts.

Si usas Next.js debes hacer unos cambios en la declaracion del cliente. Te dejo la Doc

Te muestro este pequeño ejemplo con Koa:

// src/index.ts
import Koa from 'koa';
import Router from 'koa-router';
import koaBody from 'koa-body';
import { createTask, readTasks, readOneTask, updateTask, deleteTask } from './crudTask'

const app = new Koa();

app.use(koaBody({ jsonLimit: '5kb' }));

const router = new Router();

router.get('/', (ctx) => ctx.body = 'Hello World');

router.post('/tasks', async (ctx) =>
    ctx.body = await createTask(ctx.request.body.name, ctx.request.body.description));

router.get('/tasks', async (ctx) =>
    ctx.body = await readTasks());

router.get('/tasks/:id', async (ctx) =>
    ctx.body = await readOneTask(ctx.params.id));

router.put('/tasks/:id', async (ctx) =>
    ctx.body = await updateTask(
        ctx.params.id,
        ctx.request.body.name,
        ctx.request.body.description,
        ctx.request.body.status
    ));

router.delete('/tasks/:id', async (ctx) =>
    ctx.body = await deleteTask(ctx.params.id));

app.use(router.routes());

app.listen(3000);

Y ya lo tenemos, vemos un ejemplo con Relaciones? cuéntame en los comentarios.

Y Happy Hacking 🎉👨‍💻

Bun - Ya esta aqui.

Ushieru Kokoran — Wed, 06 Jul 2022 21:05:40 +0000

Bun es el nuevo runtime de JavaScript, escrito en Zig. Bundler nativo, transpilador, task runner y cliente npm. Todo en uno.

Baterías incluidas

APIs Web como fetch, WebSocket y ReadableStream.
node_modules bun implementa un algoritmo de resolución de módulos de Node.js, por lo que puedes usar paquetes npm en bun.js. ESM y CommonJS son compatibles, pero Bun utiliza internamente ESM.
Transpilador de Typescript y JSX.
Soporta paths, jsxImportSource y más desde los archivos tsconfig.json.
Utiliza las llamadas al sistema más rápidas disponibles con Bun.write para write, copy, pipe, send y clone files.
Cargado automatico de .env sin require("dotenv").load()
Cliente SQLite3 integrado con bun:sqlite
bun:ffi Para codigo iteroperable con JavaScript
node:fs node:path Bun soporta de manera nativa la mayoria de modulos del core de Node.js
wiptest para test de JavaScript y TypeScript

Que tal si vemos un poco de codigo? 👨‍💻

Levantemos un servidor HTTP sencillito.

// http.js
export default {
  port: 3000,
  fetch(request) {
    return new Response("Welcome to Bun!");
  },
};

Echémoslo a volar con:

bun run http.js

Y ya lo tenemos.

Pero que tal si hacemos un app de Next.js?
bun create next ./app

Que tal algo con React?
bun create react ./app

Bun CLI

Bun ejecuta package.json scripts hasta x30 más rápido que NPM.
Bun instala paquetes NPM hasta x20 más rápido que yarn.

Ve, echale un ojo a su repositorio. Si puedes pruébalo y cuéntame en los comentarios como te fue.

Y Happy Hacking 🎉👨‍💻.

Deno Deploy

Ushieru Kokoran — Thu, 30 Jun 2022 23:20:12 +0000

Una nueva forma de hacer deploy de nuestras aplicaciones (Tiene versión free 🤑).

SPOILER: Para este tutorial no necesitas instalar Deno.

Pequeña Introducción

Para los que no lo tenían en el radar.
Deno es un runtime (como Node.js) de JavaScript y TypeScript desarrollado por el mismísimo Ryan Dahl, creador de Node.js. Hay varias cosas que este señor lamenta de Node.js y con Deno viene a "reparar" por decirlo de alguna forma, y lo digo entre comillas por que me gusta mucho Node.js.

Que es Deno Deploy? 🦕🚀

Citando a ellos mismos
Deno Deploy es un sistema distribuido que permite ejecutar JavaScript, TypeScript y WebAssembly cerca de los usuarios, en el borde, en todo el mundo. Profundamente integrados con el tiempo de ejecución V8, nuestros servidores proporcionan una latencia mínima y eliminan las abstracciones innecesarias. Puedes desarrollar tu script localmente utilizando la CLI de Deno, y luego desplegarlo en nuestra infraestructura gestionada en menos de un segundo, sin necesidad de configurar nada.

Los precios son increíbles, me vuela la cabeza que sea tan barato.

Pero de verdad es tan sencillo? 🤔

Intentemos levantar un servidor con solo 2 líneas de código.

Requisitos:

Deno CLI (OPCIONAL)
Github
5 min (Tal vez menos)

Let's do it ⚡

// server.ts
import { serve } from "https://deno.land/std@0.146.0/http/server.ts";

serve(() => new Response("Hello Deno"));

Usa deno run --allow-net server.ts para probarlo en local. Si tienes instalado Deno.

Subámoslo a un repositorio en Github.

Inicia sesión en Deno Deploy con Github.

Crearemos un nuevo proyecto y vamos a desplegar con Github.

Le decimos desde que repositorio, en que rama, con que archivo, le ponemos algún nombre a nuestro proyecto y le damos a Link.

Ya lo tenemos 🚀🚀

Esto hace deploy en segundos y te da una URL para que visites tu sitio: https://ushieru-deno.deno.dev/

Que te pareció? Cambiarias Node.js + Heroku por Deno + Deno deploy?

Hacemos un API? integramos JWT? GraphQL? SSR JSX? Cuéntame en los comentarios.

Y Happy Hacking 🎉👨‍💻

Jamstack in Action

Ushieru Kokoran — Fri, 17 Jun 2022 04:59:46 +0000

Liquid syntax error: 'raw' tag was never closed

esbuild - Desarrollo sin dolor.

Ushieru Kokoran — Wed, 08 Jun 2022 19:53:11 +0000

Herramientas:

Node v16
Fastify v4.0 (Puedes usar el server que quieras [express, koa, nest])
esbuild v0.14
npm v8.5 / yarn v1.22

Porque esbuild?

Nuestras actuales herramientas de compilación para la web son entre 10 y 100 veces más lentas de lo que podrían ser. El objetivo principal del proyecto esbuild bundler es traer una nueva era de rendimiento de la herramienta de construcción, y crear un bundler moderno y fácil de usar en el camino.

Empecemos 🚀🚀

Crear carpeta del proyecto

$ mkdir esbuild-test
$ cd esbuild-test

# npm
$ npm init -y

# yarn
$ yarn init -y

Instalaciones

# npm
$ npm i esbuild fastify

# yarn
$ yarn add esbuild fastify

Quickstart

// index.js
import Fastify from 'fastify'

Fastify()
    .get('/', (_request, reply) => reply.send({ hello: 'world' }))
    .listen({ port: 3000 }, (_error, address) => console.log(`Listening on ${address}`))

Creamos los scripts

Explicación de los flags:

minify: El código minificado generalmente es equivalente al código de desarrollo pero es más pequeño, lo que significa que se descarga más rápido pero es más difícil de depurar. Minifica el código en producción pero no en desarrollo.
bundle: Agrupa cualquier dependencia importada en el archivo de entrada (en este caso index.js).
platform: Por defecto, el bundler de esbuild está configurado para generar código destinado al navegador. Si su código empaquetado está destinado a ejecutarse en node en su lugar, debe establecer la plataforma a node.
external: Puede marcar un archivo o un paquete como externo para excluirlo de su construcción. En lugar de ser empaquetado, se conservará la importación (usando require para los formatos iife y cjs y usando import para el formato esm) y se evaluará en tiempo de ejecución en su lugar.
outfile: Esta opción establece el nombre del archivo de salida para la operación de construcción. Sólo es aplicable si hay un único punto de entrada. Si hay varios puntos de entrada, debe utilizar la opción outdir para especificar un directorio de salida.

// package.json
{
  "name": "esbuild-test",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "start": "node dist",
    "build": "esbuild index.js --minify --bundle --platform=node --target=node16 --external:./node_modules/* --outfile=dist/index.js"
  },
  "dependencies": {
    "esbuild": "^0.14.43",
    "fastify": "^4.0.0"
  }
}

Ejecutamos los comandos

# npm
$ npm run build
$ npm start

# yarn
$ yarn build
$ yarn start

Hot Reload

Ya creamos nuestro server, pero para ser un buen ambiente de desarrollo esto debería de soportar hot reload, sino que martirio tener que estar reiniciando el servidor manualmente.
Para esto esbuild ya cuenta con un watch que re-construye el proyecto al guardar un archivo después de modificarlo.
Pero veámoslo en acción. si actualizamos nuestro script dev agregando este nuevo flag:

// package.json
{
  "name": "esbuild-test",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "start": "node dist",
    "dev": "npm run build -- --watch", // <- Justo aqui
    "build": "esbuild index.js --minify --bundle --platform=node --target=node16 --external:./node_modules/* --outfile=dist/index.js"
  },
  "dependencies": {
    "esbuild": "^0.14.43",
    "fastify": "^4.0.0"
  }
}

Ahora si lo corremos y modificamos nuestro index.js esbuild se encargara de re-transpilar nuestro codigo.

# npm
$ npm run dev

# yarn
$ yarn dev

Pero tenemos un detalle, este servidor no se levanta.
Esto funcionara si ejecutamos start justo después de correr build con watch? intentemos.

// package.json
{
  "name": "esbuild-test",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "start": "node dist",
    "dev": "npm run build -- --watch && npm start", // <- Justo aqui
    "build": "esbuild index.js --minify --bundle --platform=node --target=node16 --external:./node_modules/* --outfile=dist/index.js"
  },
  "dependencies": {
    "esbuild": "^0.14.43",
    "fastify": "^4.0.0"
  }
}

Corremos dev.

# npm
$ npm run dev

# yarn
$ yarn dev

Parece que nunca llegamos a start. Claro, por que watch deja colgado el evento y la terminal no avanza al siguiente comando. Es hora de usar la API de JavaScript en vez del CLI. creamos un esbuild.dev.js en la raíz de nuestro proyecto y activaremos las mismas flags que en el CLI.
Para esta parte el watch recibe un objeto con una función onRebuild, la cual se ejecutara cada vez que se actualicen los archivos.

// esbuild.dev.js
require('esbuild').build({
    entryPoints: ['./index.js'],
    watch: {
        onRebuild: () => console.log('\nRebuilt...\n')
    },
    bundle: true,
    minify: true,
    platform: 'node',
    target: 'node16',
    external: ['/node_modules/*'],
    outfile: './dist/index.js',
})
    .then(() => console.log("\nDone 🚀\n"))
    .catch(() => process.exit(1))

Lanzando procesos con node

Para este ultimo paso usaremos child_process de Node.js, en pocas palabras esto nos permite lanzar procesos desde Node.js, así que actualicemos nuestro esbuild.dev.js.

// esbuild.dev.js
const { spawn } = require('child_process')

let server;

require('esbuild').build({
    entryPoints: ['./index.js'],
    watch: {
        onRebuild: () => {
            console.log('\nRebuilt...\n')
            if (server) server.kill('SIGINT') // Si ya hay un servidor ejecutandose, lo matamos
            server = spawn('node', ['./dist'], { stdio: 'inherit' }) // Al terminar el re-build lanza el servidor
        }
    },
    bundle: true,
    minify: true,
    platform: 'node',
    target: 'node16',
    external: ['/node_modules/*'],
    outfile: './dist/index.js',
})
    .then(() => {
        console.log("\nDone 🚀\n")
        server = spawn('node', ['./dist'], { stdio: 'inherit' }) // Al terminar el build lanza el servidor
    })
    .catch(() => process.exit(1))

Probemoslo. Modifica el comando dev.

// package.json
{
  "name": "esbuild-test",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "start": "node dist",
    "dev": "node esbuild.dev.js", // <- Justo aqui
    "build": "esbuild index.js --minify --bundle --platform=node --target=node16 --external:./node_modules/* --outfile=dist/index.js"
  },
  "dependencies": {
    "esbuild": "^0.14.43",
    "fastify": "^4.0.0"
  }
}

Listo 🚀

esbuild nos ah servido para remplazar:

Webpack
Nodemon
tsc

Espera un segundo... TSC? Claro, esbuild también soporta Typescript (más info). desarrollo sin dolor = Typescript. Solo cambiemos la extensión de index.js -> index.ts y el punto de entrada en nuestro esbuild.dev.js:

// esbuild.dev.js
/* ... code */
require('esbuild').build({
    entryPoints: ['./index.ts'], // <- Justo aqui
    watch: {
        onRebuild: () => {
            /* ... code */
        }
    },
    bundle: true,
    minify: true,
    platform: 'node',
    target: 'node16',
    external: ['/node_modules/*'],
    outfile: './dist/index.js',
})
/* ... code */

Y listo. Ejecutamos dev. Todo va sobre ruedas e igual de rápido.

Así debería quedar nuestro código al final.

Conclusión

Esta vez explicamos todo paso a paso pero siendo sinceros te tomaría un copiar y pegar para levantar esto en tu próximo proyecto.

Déjame en los comentarios que piensas

y Happy Hacking 👨‍💻🎉

Flutter - Wireless device

Ushieru Kokoran — Wed, 01 Jun 2022 04:32:19 +0000

Requisitos:

Android 11 (o superior)

Flutter (Instalado y configurado)

Empecemos

Active sus herramientas de desarrollador.
Dentro de sus herramienta de desarrollador active depuración inalámbrica (Wireless debugging) esta un par de opciones debajo de depuración USB (USB debugging).
Asegúrese que esta su PC y su móvil en la misma red.
Entre a depuración inalámbrica, ahi le mostrara la ip y el puerto des dispositivo.
Asegúrese de tener el comando adb en su terminal.

Si no lo tienes, no te preocupes, agrégalo a tus variables de entorno. Si tienes Android Studio instalado la ruta debería ser algo como -> C:\Users*TU_USUARIO*\AppData\Local\Android\Sdk\platform-tools\

Corre el comando

$ adb connect [IP]:[PORT]

Ahora la prueba de fuego, corre algún proyecto que tengas por ahí. Para fines prácticos yo usare un Hello world de flutter.

Lo logramos 🚀🚀🚀

Ya solo queda cerrar la conexión de adb (No obligatorio si recomendado).

Que te pareció? Necesitas ayuda con algo? déjalo en los comentarios.

Mucha suerte en tus proyectos y Happy Hacking 🧑‍💻🎉

TOTAL POS - Table Control

Ushieru Kokoran — Sun, 08 May 2022 22:33:32 +0000

Terminamos de agregar el controlador de mesas para la versión de postgres 🍾🍾🍾 (Que es en la que estoy invirtiendo mi tiempos libres actualmente).

Controlador de mesas 🎮

Con lo fácil que es hacer drags and drops en Flutter. Fue sencillo hacer esta parte.

Comandar orden 📒

La parte laboriosa fue que la misma pantalla de cobranza sirviera para comandar y para cobrar (Admito que aun tiene detalles, pero se irán puliendo).

Cobrar 💵

Ya por ultimo hacer que solo los usuarios con rol cajero pudieran liberar las mesas al cobrarla.

Dokcer 🐳

Como últimamente trabajo en mas de una estación de trabajo controlar versiones de dependencias podría ser un dolor de cabeza a futuro; decidí ir trabajado en Docker. Sirve que para aquellos que quieran probarlo será mas sencillo ahora.

Que sigue? 🐛

La verdad que si se me complico mas de lo esperado, por eso he tenido que trabajar dos fines de semana es esta implementación, pero ya va quedando el asunto, y se que hace 15 días dije que trabajaría en la REST pero bueno... quería terminar esta parte primero.

Te dejo el repo para que le eches un ojo.

Sin mas por el momento nos vemos en otra ocasión y Happy Hacking 🧑‍💻🎉

Dart - From scratch to deploy 🚀

Ushieru Kokoran — Fri, 06 May 2022 04:27:20 +0000

Empecemos ✨

Creemos el proyecto desde 0.

Si tienes configurado Flutter, dart ya debería estar en tu PATH también.

$ dart create server

Obtendrás algo como esto:

void main(List<String> arguments) {
  print('Hello world!');
}

Para este proyecto usaremos el poderoso server de Shelf.

$ dart pub add shelf

Agreguemos algo de código:

import 'package:shelf/shelf.dart';
import 'package:shelf/shelf_io.dart' as shelf_io;

void main() async {
  var server = await shelf_io.serve(
      (Request request) => Response.ok('Hello World!'), '0.0.0.0', 8080);

  print('Serving at http://${server.address.host}:${server.port}');
}

Entramos a localhost:8080:

Preparemos Docker

Esto no es un tutorial de docker así que no me detendré a explicarlo, eso daría para una serie de publicaciones 🤷‍♂️

Dockerfile

FROM dart:stable AS build
WORKDIR /app
COPY pubspec.* ./
RUN dart pub get
COPY . .
RUN dart pub get --offline
RUN dart compile exe bin/server.dart -o bin/server
FROM scratch
COPY --from=build /runtime/ /
COPY --from=build /app/bin/server /app/bin/
CMD ["/app/bin/server"]

.dockerignore

.dockerignore
resources
CHANGELOG.md
LICENSE
README.md
Dockerfile
build/
.dart_tool/
.git/
.github/
.gitignore
.packages

docker-compose.yml

version: '3'
services:
  dart-server:
    build: .
    ports:
      - "8080:8080"

Vamos a probarlo 🐛

$ docker compose up

Probamos de nuevo localhost:8080 y todo normal.

Preparativos 👩‍🚀👨‍🚀

Para esto usaremos Github y Railway (Por qué son excelentes herramientas y son gratis).

Railway nos dará un puerto para nuestra aplicación así que hay que hacer ese cambio.

Actualizamos nuestro código.

import 'dart:io';

import 'package:shelf/shelf.dart';
import 'package:shelf/shelf_io.dart' as shelf_io;

void main() async {
  var port = int.tryParse(Platform.environment['PORT'] ?? '') ?? 8080;
  var server = await shelf_io.serve(
      (Request request) => Response.ok('Hello World!'), '0.0.0.0', port);

  print('Serving at http://${server.address.host}:${server.port}');
}

Lo subimos a Github.
Inicializamos un nuevo proyecto con Github en Railway.
Elegimos el repositorio, Railway detectara nuestro Dockerfile y empezara a armarlo.
Al terminar nos imprimirá el log de nuestra aplicación y nos dará un URL.

Y listo 🚀🚀

Estamos online.

Te gusto la practica? intentamos con otro lenguaje?
Cuéntame en los comentarios y Happy Hacking 🧑‍💻🎉