Explore

AJAX Definition

End-Points

JSON

AJAX → Requests a la API de Django

⁠

Regla de Oro:

Buscar hacer el AJAX y la comunicación entre Front-End y Back-End lo más transparente posible

Evitar parsers y procesamiento para acomodar la info entre vistas y end-points

Evitar manipular los JSON

Validamos vs el Flujo de Wireframes en Figma vs Flujo de Datos en dbdiagram.io

Criterio de Aceptación para Liberar Mock-ups

Flujo → Tener bien definida la navegación → Trabajar sobre el flujo

Vistas → Las pantallas ya terminadas

Validación vs Base de Datos

Retro:

En base a los end-points, definir la estructura del objeto y de esa manera validarla

definir en base a figma las vistas que estructura en dato de JSON se requiere y de esa manera validar

Algoritmo para Trasvase de JSON

1st HTML Structure

En base a la siguiente estructura nos organizaremos para tener un script relativamente estándard

Major_Container

container1

item1 → (template)

node1

node2

item2

node1

item3

node1

2nd JSON Structure

En base a la siguiente estructura nos organizaremos para tener un script relativamente estándar

Major_Object → { }

Object → Item

Property → Node

Value (data to transfer)

Retrieve

Una vez teniendo la respuesta del AJAX necesitamos hacer el trasvase de la información de manera ordenada

Establecemos un contenedor (padre) y un item (hijo) el hijo será nuestro template para los demás hijos

Proceso:

Primero identificar del template todos aquellos objetos que nos interesa actualizar o ser susceptibles al trasvase

Las etiquetas de las clases de esos objetos son igual al nombre de los objetos / propiedades del JSON, según aplique

Una vez identificados guardarlos en una lista de referencia

Después del JSON obtener el número de objetos → que van a convertirse en Items

Crear “n” items de acuerdo a “n” objetos del JSON, al crear los items nos traemos todo el html contenido del template hijo y lo trasvasamos a las copias

de cada copia hacemos el retrieve de los objetos cuyas etiquetas sean las mismas que el JSON

hacemos la busqueda através del JSON con esas mismas etiquetas, una vez que hacen match se hace el trasvase de la información de un objeto a otro

Labels

En base a la estructura arriba mencionada no queda más que hacer el match de etiquetas entre HTML y JSON así seria la regla, primero empezar con las etiquetas que son “json_” para así primero sin importar el objeto lo traiga, después buscaremos la etiqueta con el nombre de la propiedad que se llama igual en el JSON

ejemplo:

json_major_container → { }

json_container → [ ] → recipe_details

json_item → { }

json_node → id

json_node → recipe_category

json_node_value → category: “Mexicana”

json_node_value_2 →

json_node → title

json_node → meal_type

json_container [ ] → recipe_apps

json_item → { }

json_node → id

json_node → cat_recipe

json_node → app_type → “olla de presion”

json_node → required → True | False

JSON → desde Django, procesar y generar un solo archivo de respuesta

Receta “n” {

caracteristicas: {

titulo

descripción

número de comensales

tiempo

nivel de dificultud

tipo de platillo

ingredientes:{

ingrediente 1:{

qty

unidad de medida

el nombre del ingrediente

ingrediente 2

ingrediente 3

procedimiento:{

step

descripción del procedimiento

url pic

JSON → del planner

Semana / Job-ID:

Job id:

recipe_list:{

recipe 1:{

recipe id

meal id (desayuno | comida | cena)

favorite: True | False

recipe 2

recipe 3

recipe 4

Estudio de caso:

era el ejemplo que nos daba David ayer, si lo bajamos existe una probabilidad de que nos lo de así:

1 manojo de perejil

2 tomates picados

1 kilo de carne

y nosotros lo necesitaríamos así:

recipe:{

recipe_id : "1"

recipe_specs: { spec1, spec2, etc...}

ingredients:{

ingredient_1:{

qty:

measure:

name:

steps:{

step_1:

step_2:

Retro de los Mentores:

⁠

Listar los END-POINTS solamente los del lado del usuario / FRONT-END

El número de End-Points va a ser igual al CRUD de estos elementos:

Usuarios y sus preferencias

users/

get → list

post → crear un usuario

users/id

get → specific id

put

patch

delete

Favorites

Planner

planner/

planner/id/

Home (Nuevas & Consentidas → 1 solo End-Point)

Generar la estructura JSON por cada tipo de END-POINTS

usuario → planner → menu → recipes → shopping list

End-Points pre-analysis:

⁠

Propuesta 1:

/users/id/ → detail especifico del usuario dado de alta

/users/planner/ → lista de menus

/users/planner/menu/id → detail del menu → periodo, fechas, el número del menu, el titulo que guardo el usuario

/users/planner/menu/recipes/ → lista de recetas

/users/planner/menu/recipes/id/ → el detalle de una receta en especifico

/users/planner/menu/id/shopping_list/

Propuesta 2:

/users/catalog_recipes/ → Lista de recetas en base a preferencias de usuarios

/users/catalog_recipes/id/ → Vista de Detalle de la receta por id

/users/catalog_ingredients/ → Lista de recetas en base a preferencia de ingredientes del usuario

/users/catalog_ingredients/id/ → Vista de Detalle de la receta por id

Want to print your doc?
This is not the way.

Try clicking the ··· in the right corner or using a keyboard shortcut (

CtrlP

) instead.