Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

--- integracio_de_django_amb_react [2023/07/06 08:59]
raquel_alaman_navas
+++ integracio_de_django_amb_react [2023/07/06 10:25] (actual)
raquel_alaman_navas [Integració de Reactjs (FrontEnd)]
@@ Línia 24: / Línia 24: @@
   * **Account**: account_id (IntegerField),customer (ForeignKey Customer) description (CharField(200)), limit(IntegerField)
---> Proposta implementació Customer i Account#
+--> Proposta d'implementació Customer i Account#
 <file python models.py>
@@ Línia 125: / Línia 125: @@
 from rest_framework import serializers
-# import the todo data model
+# import the Customer data model
 from .models import Customer
@@ Línia 175: / Línia 175: @@
 # register the router
-router.register(r'tasks',views.CustomerView, 'task')
+router.register(r'customers',views.CustomerView, 'customers')
 urlpatterns = [
@@ Línia 189: / Línia 189: @@
 Ara comprovem si estem avançant en la direcció correcta. Per tant, executeu el servidor i navegueu fins a l'URL següent:
+<code>
 localhost:8000/api
+</code>
 Si tot va bé, obtindrem el següent resultat:
+{{ ::api.jpg |}}
+Com podeu veure, la nostra API està en marxa. Ara, si provem d'accedir als "customers", podrem veure i interactuar amb les nostres tasques:
+<code>
+localhost:8000/api/customers
+</code>
+{{ ::api_customers_options.jpg |}}
+Fins i tot, podem canviar el format dels resultats (per exemple, retornar en formar JSON):
+{{ ::api_customers_json.jpg |}}
+===== Integració de Reactjs (FrontEnd) =====
+. Crea una "boilerplate" de l'aplicació Js React:
+<code>
+npx create-react-app frontend
+</code>
+on npx significa //Node Package Executable//
+<WRAP info>
+Només funcionarà la sentència anterior amb versions de node.js superiors a la 14.0, així que si et dóna error, caldrà que l'actualitzis. Pots seguir aquest [[https://www.cyberithub.com/how-to-install-the-latest-version-of-node-js-on-ubuntu-debian/|tutorial]]. Tingues paciència, perquè aquest pas trigarà força!
+</WRAP>
+. Instal·la reactstrap i bootstrap al projecte (per donar una mica d'estil al disseny de la interfície d'usuari):
+<code>
+npm install reactstrap bootstrap
+</code>
+. Des de la terminal, accedeix al directori de frontend i executa la següent instrucció, per tal de verificar que tot funciona correctament:
+<code>
+npm start
+</code>
+Si és així, et sortirà una pantalla similar a aquesta (en l'adreça localhost:3000):
+{{ ::react_app.png |}}
+. Obre el fitxer //App.js// a la carpeta del frontend. Elimina el codi existent i substitueix-lo pel codi següent:
+<file javascript App.js>
+import "./App.css";
+function App() {
+  return <div className="App"><h2>Gestió de clients</h2></div>;
+}
+export default App;
+</file>
+. El pas anterior era un exemple per validar l'aplicació. Substitueix-lo, en el fitxer //App.js//, pel codi següent:
+<file javascript App.js>
+// import Component from the react module
+import React, { Component } from "react";
+import Modal from "./components/Modal";
+import axios from 'axios';
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      viewCompleted: false,
+      activeItem: {
+        title: "",
+        description: "",
+        completed: false
+      },
+      customersList: []
+    };
+  }
+  componentDidMount() {
+    this.refreshList();
+  }
+  refreshList = () => {
+    axios   //Axios to send and receive HTTP requests
+      .get("http://localhost:8000/api/customers/")
+      .then(res => this.setState({ customersList: res.data }))
+      .catch(err => console.log(err));
+  };
+  displayCompleted = status => {
+    if (status) {
+      return this.setState({ viewCompleted: true });
+    }
+    return this.setState({ viewCompleted: false });
+  };
+  renderTabList = () => {
+    return (
+      <div className="my-5 customer-list">
+        <span
+          onClick={() => this.displayCompleted(true)}
+          className={this.state.viewCompleted ? "active" : ""}
+        >
+          completed
+            </span>
+        <span
+          onClick={() => this.displayCompleted(false)}
+          className={this.state.viewCompleted ? "" : "active"}
+        >
+          Incompleted
+            </span>
+      </div>
+    );
+  };
+  renderItems = () => {
+    const { viewCompleted } = this.state;
+    const newItems = this.state.taskList.filter(
+      (item) => item.completed === viewCompleted
+    );
+    return newItems.map((item) => (
+      <li
+        key={item.id}
+        className="list-group-item d-flex justify-content-between align-items-center"
+      >
+        <span
+          className={`customer-title mr-2 ${
+            this.state.viewCompleted ? "completed-customer" : ""
+          }`}
+          title={item.description}
+        >
+          {item.title}
+        </span>
+        <span>
+          <button
+            onClick={() => this.editItem(item)}
+            className="btn btn-secondary mr-2"
+          >
+            Edit
+          </button>
+          <button
+            onClick={() => this.handleDelete(item)}
+            className="btn btn-danger"
+          >
+            Delete
+          </button>
+        </span>
+      </li>
+    ));
+  };
+  toggle = () => {
+    //add this after modal creation
+    this.setState({ modal: !this.state.modal });
+  };
+  handleSubmit = (item) => {
+    this.toggle();
+     alert("save" + JSON.stringify(item));
+    if (item.id) {
+      // if old post to edit and submit
+      axios
+        .put(`http://localhost:8000/api/tasks/${item.id}/`, item)
+        .then((res) => this.refreshList());
+      return;
+    }
+    axios
+      .post("http://localhost:8000/api/customers/", item)
+      .then((res) => this.refreshList());
+  };
+  handleDelete = (item) => {
+      alert("delete" + JSON.stringify(item));
+    axios
+      .delete(`http://localhost:8000/api/tasks/${item.id}/`)
+      .then((res) => this.refreshList());
+  };
+  createItem = () => {
+    const item = { title: "", description: "", completed: false };
+    this.setState({ activeItem: item, modal: !this.state.modal });
+  };
+  editItem = (item) => {
+    this.setState({ activeItem: item, modal: !this.state.modal });
+  };
+  render() {
+    return (
+      <main className="content">
+        <h1 className="text-success text-uppercase text-center my-4">
+          GFG Task Manager
+        </h1>
+        <div className="row ">
+          <div className="col-md-6 col-sm-10 mx-auto p-0">
+            <div className="card p-3">
+              <div className="">
+                <button onClick={this.createItem} className="btn btn-info">
+                  Add task
+                </button>
+              </div>
+              {this.renderTabList()}
+              <ul className="list-group list-group-flush">
+                {this.renderItems()}
+              </ul>
+            </div>
+          </div>
+        </div>
+        {this.state.modal ? (
+          <Modal
+            activeItem={this.state.activeItem}
+            toggle={this.toggle}
+            onSave={this.handleSubmit}
+          />
+        ) : null}
+      </main>
+    );
+  }
+}
+export default App;
+</file>
+. Obre el fitxer //Index.css//, neteja el CSS que hi ha a dins i afegeix el següent codi al fitxer:
+<file css Index.css>
+.customer-title {
+  cursor: pointer;
+}
+.completed-customer {
+  text-decoration: line-through;
+}
+.customer-list > span {
+  padding: 5px 8px;
+  border: 1px solid rgb(7, 167, 68);
+  border-radius: 10px;
+  margin-right: 5px;
+  cursor: pointer;
+}
+.customer-list > span.active {
+  background-color: rgb(6, 139, 12);
+  color: #fff;
+}
+</file>
+. Crea una carpeta nova anomenada "Components" al directori //src// i afegeix un fitxer //Modal.js//. Després, afegeix el codi següent:
+<file javascript Modal.js>
+import React, { Component } from "react";
+// importing all of these classes from reactstrap module
+import {
+  Button,
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Form,
+  FormGroup,
+  Input,
+  Label
+} from "reactstrap";
+class CustomModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeItem: this.props.activeItem
+    };
+  }
+  // changes handler to check if a checkbox is checked or not
+  handleChange = e => {
+    let { name, value } = e.target;
+    if (e.target.type === "checkbox") {
+      value = e.target.checked;
+    }
+    const activeItem = { ...this.state.activeItem, [name]: value };
+    this.setState({ activeItem });
+  };
+  // rendering modal in the custommodal class received toggle and on save as props,
+  render() {
+    const { toggle, onSave } = this.props;
+    return (
+      <Modal isOpen={true} toggle={toggle}>
+        <ModalHeader toggle={toggle}> Customer Item </ModalHeader>
+        <ModalBody>
+          <Form>
+            {/* 3 formgroups
+title label */}
+            <FormGroup>
+              <Label for="title">Customer ID</Label>
+              <Input
+                type="text"
+                name="title"
+                value={this.state.activeItem.title}
+                onChange={this.handleChange}
+                placeholder="Enter Customer ID"
+              />
+            </FormGroup>
+            {/* 2 description label */}
+            <FormGroup>
+              <Label for="description">Customer name</Label>
+              <Input
+                type="text"
+                name="description"
+                value={this.state.activeItem.description}
+                onChange={this.handleChange}
+                placeholder="Enter Customer Name"
+              />
+            </FormGroup>
+            {/* 3 completed label */}
+            <FormGroup check>
+              <Label for="completed">
+                <Input
+                  type="checkbox"
+                  name="completed"
+                  checked={this.state.activeItem.completed}
+                  onChange={this.handleChange}
+                />
+                Completed
+              </Label>
+            </FormGroup>
+          </Form>
+        </ModalBody>
+        {/* create a modal footer */}
+        <ModalFooter>
+          <Button color="success" onClick={() => onSave(this.state.activeItem)}>
+            Save
+          </Button>
+        </ModalFooter>
+      </Modal>
+    );
+  }
+}
+export default CustomModal
+</file>
+. Fes els canvis indicats a continuació al fitxer //index.js//:
+<file javascript index.js>
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import "bootstrap/dist/css/bootstrap.min.css";
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById("root")
+);
+</file>
+. Per fer les peticions als endpoints de l'API al servidor del framework de Django, necessitarem instal·lar l'Axios. Utilitza l'ordre següent dins de la carpeta del framework per a instal·lar l'Axios:
+<code>
+npm install axios
+</code>
+I, amb aquest pas, ja tenim una aplicació Fullstack Django-React utilitzant el framework REST Django per establir la comunicació entre el frontend i el backend.
+<WRAP todo>
+**Exercici:**
+Aplica la serialització de manera que es puguin gestionar els comptes associats als clients.
+</WRAP>
+\\

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina