Desarrollo de Aplicaciones Empresariales Python

Desarrollo de Aplicaciones Empresariales

IV Ciclo
Laboratorio Nº 11

“Consumo de apis con react”

Dpto. de Informática Pág. 1

Desarrollo de Aplicaciones Empresariales Python

Laboratorio 11 – Consumo de apis con react

Creación del proyecto en ReactJS

1. Abre un terminal y ejecuta el siguiente comando en al unidad c

npm create vite@latest

en nombre del proyecto escribe lab 11:

Luego en al siguiente opción selecciona React

Luego en la siguiente opción selecciona javascript

Te aparecerá lo siguiente:

Escribe cd lab11 luego npm install y luego npm run dev e ingresa al servidor por
el puerto indicado

Dpto. de Informática Pág. 2

Desarrollo de Aplicaciones Empresariales Python

Dpto. de Informática Pág. 3

Desarrollo de Aplicaciones Empresariales Python

Despliegue de api series

Para el siguiente proyecto usaremos el api desarrollado durante el lab 08

2. Ingrese a un terminal de gitbash dentro de la unidad c: y ejecute el siguiente

comando.

git clone https://github.com/cesarmayta/apiseriesdrf.git

3. Luego ingrese a la carpeta apiseriesdrf y ejecute los siguientes comandos.

Python -m venv venv

Source venv/scripts/actívate
Pip install -r requirements.txt
Python manage.py runserver

4. Abre un navegador y dirigase a la siguiente ruta.

http://localhost:8000/

debería mostrarle la siguiente pagina

Dpto. de Informática Pág. 4

Desarrollo de Aplicaciones Empresariales Python

Desarrollo de proyecto en React

1. Instamos axios para poder manejar las peticiones del servicio web y boostrap
para el diseño de nuestra interfaz

npm install axios –save

npm install bootstrap
npm install react-bootstrap

2. Modifica el archivo App.js de la siguiente manera:

import React,{Component} from 'react';

import axios from 'axios';
import 'bootstrap/dist/css/bootstrap.min.css';
import Table from 'react-bootstrap/Table';
import Container from 'react-bootstrap/Container';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';

class App extends Component {

constructor(props) {
super(props);
}
render() {
return (<div>Series</div>)
}
}
export default App;

3. En el archivo src/App.jsx, dentro del constructor define los valores del state de
la siguiente manera:

constructor(props){
super(props);
this.state = ({
series:[],
pos:null,
titulo:'Nuevo',
id:0,
nombre:'',
fecha:'',
rating:'0',
categoria:''
})
this.cambioNombre = this.cambioNombre.bind(this);

Dpto. de Informática Pág. 5

Desarrollo de Aplicaciones Empresariales Python

this.cambioFecha = this.cambioFecha.bind(this);
this.cambioRating = this.cambioRating.bind(this);
this.cambioCategoria = this.cambioCategoria.bind(this);
this.mostrar = this.mostrar.bind(this);
this.eliminar = this.eliminar.bind(this);
this.guardar = this.guardar.bind(this);
}

cambioNombre(e){
this.setState({
nombre: e.target.value
})
}

cambioFecha(e){
this.setState({
fecha: e.target.value
})
}

cambioRating(e){
this.setState({
rating: e.target.value
})
}

cambioCategoria(e){
this.setState({
categoria: e.target.value
})
}

4. Dentro de la clase App.jsx, añade el método componentDidMount para cargar

la lista de series:

componentDidMount(){
axios.get('http://localhost:8000/series')
.then(res =>{
console.log(res.data);
this.setState({series: res.data})
})
}

Dpto. de Informática Pág. 6

Desarrollo de Aplicaciones Empresariales Python

5. Dentro de la clase App.jsx, añade el método mostrar, el cual obtiene y popula

los datos de una serie:

mostrar(cod,index){
axios.get('http://localhost:8000/serie/'+cod)
.then(res => {
this.setState({
pos: index,
titulo: 'Editar',
id: res.data.id,
nombre :res.data.name,
fecha: res.data.release_date,
rating: res.data.rating,
categoria : res.data.category
})
})
}

6. Dentro de la clase App, añade el metodo guardar de la siguiente manera:

guardar(e){
e.preventDefault();
let cod = this.state.id;
const datos = {
name: this.state.nombre,
release_date: this.state.fecha,
rating: this.state.rating,
category: this.state.categoria
}
if(cod>0){
//edición de un registro
axios.put('http://localhost:8000/serie/'+cod,datos)
.then(res =>{
let indx = this.state.pos;
this.state.series[indx] = res.data;
var temp = this.state.series;
this.setState({
pos:null,
titulo:'Nuevo',
id:0,
nombre:'',
fecha:'',
rating:0,
categoria:'',
series: temp

Dpto. de Informática Pág. 7

Desarrollo de Aplicaciones Empresariales Python

});
}).catch((error) =>{
console.log(error.toString());
});
}else{
//nuevo registro
axios.post('http://localhost:8000/series',datos)
.then(res => {
this.state.series.push(res.data);
var temp = this.state.series;
this.setState({
id:0,
nombre:'',
fecha: '',
rating:0,
categoria:'',
series:temp
});
}).catch((error)=>{
console.log(error.toString());
});
}
}

7. Dentro de la clase App.jsx, añade el metodo eliminar de la siguiente manera:

eliminar(cod){
let rpta = window.confirm("Desea Eliminar?");
if(rpta){
axios.delete('http://localhost:8000/serie/'+cod)
.then(res =>{
var temp = this.state.series.filter((serie)=>serie.id !== cod);
this.setState({
series: temp
})
})
}
}

8. En el método render, dentro de las etiquetas div, añade el siguiente código:

<Container>
<Table striped bordered hover variant="dark">
<thead>
<tr>
<th>#</th>

Dpto. de Informática Pág. 8

Desarrollo de Aplicaciones Empresariales Python

<th>Nombre</th>
<th>Fecha</th>
<th>Rating</th>
<th>Categoria</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
{this.state.series.map( (serie,index) =>{
return (
<tr key={serie.id}>
<td>{serie.id}</td>
<td>{serie.name}</td>
<td>{serie.release_date}</td>
<td>{serie.rating}</td>
<td>{serie.category}</td>
<td>
<Button variant="success"
onClick={()=>this.mostrar(serie.id,index)}>Editar</Button>
<Button variant="danger"
onClick={()=>this.eliminar(serie.id)}>Eliminar</Button>
</td>
</tr>
);
})}
</tbody>
</Table>
<hr />
<h1>{this.state.titulo}</h1>
<Form onSubmit={this.guardar}>
<Form.Control type="hidden" value={this.state.id} />
<Form.Group className="mb-3">
<Form.Label>Ingrese Nombre:</Form.Label>
<Form.Control type="text" value={this.state.nombre}
onChange={this.cambioNombre} />
</Form.Group>
<Form.Group className="mb-3">
<Form.Label>Ingrese Rating:</Form.Label>
<Form.Control type="number" value={this.state.rating}
onChange={this.cambioRating} />
</Form.Group>
<Form.Group className="mb-3">
<Form.Label>Categoria:</Form.Label>
<Form.Control type="text" value={this.state.categoria}
onChange={this.cambioCategoria} />
</Form.Group>
<Form.Group className="mb-3">

Dpto. de Informática Pág. 9

Desarrollo de Aplicaciones Empresariales Python

<Form.Label>Fecha:</Form.Label>
<Form.Control type="date" value={this.state.fecha}
onChange={this.cambioFecha} />
</Form.Group>
<Button variant="primary" type="submit">
GUARDAR
</Button>
</Form>
</Container>

9. Despliega la app ejecutando el siguiente comando

npm run dev

debería motrarte algo como esto

En base al código ejecutado conteste las siguientes preguntas:

• ¿Qué hace la función componentDidMount?

• ¿Para qué sirve la librería axios?

• ¿Qué hace la función guardar y eliminar?

Dpto. de Informática Pág. 10

Desarrollo de Aplicaciones Empresariales Python

Observaciones y Conclusiones(mínimo 3 de cada una)

Dpto. de Informática Pág. 11