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ó

--- django_react [2026/04/07 09:43]
enric_mieza_sanchez creat
+++ django_react [2026/04/07 10:20] (actual)
enric_mieza_sanchez [Projecte Django]
@@ Línia 12: / Línia 12: @@
 Es podria fer en dos repositoris separats, però per simplicitat ho farem en un sol. Farem un projecte Django i hi posarem la part de React dins la carpeta ''react/''.
+==== Projecte Django ====
 Com a bona pràctica afegida emprarem el plugin ''django-environ'' per gestionar les credencials del projecte en un arxiu ''.env''.
@@ Línia 24: / Línia 26: @@
 Penseu a afegir l'arxiu ''.gitignore'' que podeu trobar a l'article [[Django]].
+Hi crearem una app de llibres "biblio" molt senzilla amb un sol model de llibre:
+  (envdj) $ ./manage.py startapp biblio
+Afegim els models de l'app a ''models.py'':
+<file python models.py>
+from django.db import models
+from django.contrib.auth.models import AbstractUser
+class Llibre (models.Model):
+    titol = models.CharField(max_length=100)
+    autor = models.CharField(max_length=200)
+    resum = models.TextField(null=True,blank=True)
+    data_edicio = models.DateField()
+    def __str__(self):
+    	return self.titol
+class Usuari(AbstractUser):
+    auth_token = models.CharField(max_length=32,blank=True,null=True)
+    # + altres atributs que es vulguin afegir...
+</file>
+<WRAP tip>
+És important fer un usuari personalitzat des de l'inici del projecte. Ho necessitem per implementar la token authentication del [[Django Ninja]] però també per evitar problemes quan necessitem personalitzar el model User mes endavant.
+</WRAP>
+Ajustem ''settings.py'' per:
+  * Informar del canvi de model de usuari per ''biblio.User''
+  * Afegir la nova app ''biblio''
+  * Afegir el plugin ''corsheaders'' per facilitar les crides amb dominis creuats.
+  * Configurar ''corsheaders'' amb els dominis permesos a''CORS_ALLOWED_ORIGINS''.
+Afegiu la app al ''settings.py'' i també ''corsheaders'' per a la gestió de l'API:
+<file python settings.py>
+AUTH_USER_MODEL = 'biblio.Usuari'
+INSTALLED_APPS = [
+    'corsheaders',
+    'biblio.apps.BiblioConfig',
+    'django.contrib.admin',
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'django.contrib.staticfiles',
+]
+CORS_ALLOWED_ORIGINS = [
+    "http://localhost:5173",    # Exemple: React en desenvolupament amb Vite o CRA
+    "http://127.0.0.1:5173",
+    "https://el-teu-domini.com", # Quan el tinguis en producció
+]
+</file>
+Afegim els models a ''admin.py'':
+<file python admin.py>
+from django.contrib import admin
+from django.contrib.auth.admin import UserAdmin
+from .models import *
+class UsuariAdmin(UserAdmin):
+    fieldsets = UserAdmin.fieldsets + (
+            ("Altres dades (API auth)", {
+                'fields': ('auth_token',),
+            }),
+    )
+    readonly_fields = ["auth_token",]
+admin.site.register(Llibre)
+admin.site.register(Usuari,UsuariAdmin)
+</file>
+<WRAP info>
+**Afegeix alguns elements (llibres) des de l'admin panel de Django**, aquest ho permet amb comoditat. Necessitarem alguns exemples per depurar l'app, així que pren-te el temps d'omplir la BD de dades una mica.
+</WRAP>
+\\
+==== Projecte ReactJS ====
 Creació del projecte React dins la carpeta ''react/'' del projecte Django amb Vite. Caldrà triar projecte React + JavaScript:
   $ npm create vite@latest react
+Ja podem començar a fer codi!
+\\
+===== API bàsica amb Django Ninja =====
+Hem tractat la creació d'APIs a l'article [[Django Ninja]].
+Farem una API molt senzilla per llistar els usuaris que tenim a l'aplicació:

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina