[Música] hola a todos y bienvenidos a una nueva serie de tutoriales en esta serie, vamos a trabajar en una aplicación web de pila completa usando python y django y javascript y react python y django obviamente van a manejar nuestro backend ellos' vamos a estar ejecutando el servidor web y reaccionar y javascript van a manejar nuestro front-end y van a hacer esta elegante página web que pueden ver aquí ahora voy a entrar en el tipo de idea y proyecto es en lo que vamos a trabajar, pero mencionaré rápidamente que esta serie de tutoriales está diseñada para que aprendas mucho, así como sí, vamos a trabajar en un proyecto y tendrás algo que mostrar. por el tipo de horas que dedicas a ver estos videos, esto realmente está diseñado para enseñarte cómo funcionan estos marcos y tipos de módulos y todas estas cosas para que si quieres salir y hacer tu propio proyecto te sientas cómodo haciéndolo y tienes las habilidades y el conocimiento necesarios para hacerlo en este proyecto específico obviamente vamos a aprender sobre django obviamente aprenderemos sobre reaccionar y también cómo podemos integrar nuestro proyecto con apis de terceros algo que no es muy fácil de hacer y bueno es Es realmente bueno saberlo porque muchas veces, cuando estás haciendo un proyecto, quieres integrarlo con Google o, en este caso, con Spotify o con otras compañías populares y hacer que sus servicios funcionen en tu aplicación, de todos modos, eso es lo básico.
última idea , esto no está realmente diseñado para principiantes, sí, si eres un principiante, está totalmente bien, puedes intentar seguirlo, pero al menos te recomendaría que tengas algo de experiencia en programación general y que hayas usado python o javascript antes , no lo hagas preocúpate por django y reacciona. Te los explicaré desde cero si no los conoces, pero sí, esa es la idea básica, así que solo para contarte sobre el proyecto con un poco más de detalle de la forma en que Esto va a funcionar es que va a ser un sistema de reproducción de música colaborativo, por lo que es una forma de que un grupo de personas controle la música que se reproduce en cierto sentido de unidad, así que habrá un anfitrión que puede crear una sala. idealmente, este anfitrión será la persona que realmente controle la música donde sea que esté, por ejemplo, en la fiesta de su casa o en algún restaurante o reunión o lo que sea, y luego puede dar un código a un grupo de personas que quieran unirse. la sala y poder controlar la música y luego esas personas pueden unirse a la sala pueden votar para omitir la canción pueden pausar la canción reproducir la canción cualquier permiso que les des eso es lo que podrán hacer y eso realmente físicamente cambia la música que se está reproduciendo por el parlante o por el teléfono, es genial, puedes presionar como un botón de pausa o reproducir y verás que Spotify en cualquier dispositivo que lo tengas conectado incluso si no está en la misma red, en realidad responderá a ese comando, así que eso es lo que vamos a hacer, espero que estén entusiasmados con esto nuevamente, no puedo enfatizar lo mucho que van a aprender de esta serie, así que Me sumergiré en un segundo, pero primero necesito agradecer al patrocinador de este video y esta serie, que es experto en algoritmos.
Algo experto es una plataforma de preparación para entrevistas de codificación que tiene más de 100 preguntas para entrevistas de codificación. Personalmente, fue lo que utilicé para obtener una pasantía en Microsoft y una oferta de Shopify. Tiene explicaciones completas en video para cada pregunta de codificación única y otros recursos, como un curso intensivo de estructuras de datos y consejos para entrevistas de comportamiento. Puede consultarlo desde el enlace en la descripción. y use tecnología de código con tim para obtener un descuento en la plataforma, de acuerdo, así que ahora que lo hemos revisado, me disculpo por la larga introducción, pero hablemos de lo que necesitamos Lo primero que debemos hacer es que necesitamos un editor de código.
Ahora voy a usar el código vs. Le recomiendo encarecidamente que también obtenga el código vs. pero puede descargarlo desde el enlace en la descripción. Vamos a necesitar python. Obviamente, puede descargar la última versión de este sitio web y luego vamos a necesitar npm y node.js, que nuevamente dejaré un enlace en la descripción. puede descargar desde allí, así que ahora que tenemos todo eso descargado, vayamos al código vs, puede ver que ya he creado una carpeta aquí, la llamé tutorial de reaccionar django y lo primero que haremos hacer si está usando el código vs es instalar algunas extensiones ahora, la primera extensión que quiero que obtengamos es más bonita, esto hará que nuestra vida sea mucho más fácil cuando estemos escribiendo código javascript y html , puede descargarlo desde el panel de extensiones aquí y simplemente escriba más bonito a continuación, lo que vamos a necesitar del panel de extensiones es la extensión de python, por lo que puede obtenerla aquí, puede ver que tiene 26 millones de descargas.
Quiero, pero voy a ir con el que tiene la mayor cantidad de descargas, por último, queremos la extensión de reacción, por lo que obtendremos el es7 react redux graphql, por lo que en los fragmentos no quise presionar eso, pero entiendes el punto i solo haga que nuestra vida sea un poco más fácil y, de hecho, una vez más, mentí, también obtendremos la extensión de javascript, puede ver que ya los tengo instalados, pero los fragmentos de código javascript es6 nuevamente solo para hacer nuestra vida un poco más fácil, ¿de acuerdo? ahora que tenemos todas esas extensiones, lo que tenemos que hacer es instalar algunos paquetes de Python específicos para Django para que podamos comenzar a usarlo, así que obviamente asumo que tiene Python instalado en este punto si lo tiene, también debería tener a herramienta o comando llamado pip instalado, así que vaya a una terminal, ya sea su símbolo del sistema, ya sea su terminal en mac o linux o la terminal y el código vs y escriba pip y vea qué sucede ahora, fíjese que sucedió algo, no obtuve un error esencialmente que apareció esa cosa que es buena, eso es lo que quieres ver si estás en Mac o Linux y pip no funciona para ti, luego escribe pip3 nuevamente, no sé en realidad por qué aparece eso con ese símbolo del sistema ventana, pero lo ideal es que no reciba un error cuando escriba estos comandos una vez que tenga eso y pip esté funcionando, entonces lo que vamos a hacer es instalar django e instalar django rest framework ahora, por alguna razón, su comando pip no está trabajando , dejaré algunos enlaces en la descripción, dos videos que he creado que te muestran cómo arreglar pip, no se llaman cómo arreglar pip, pero te prometo que muestran cómo hacerlo para que puedas ver esos videos y con suerte me imagino De todos modos, una vez que hagamos eso, vamos a escribir pip install y luego vamos a ver si puedo deshacerme de esa a extra y luego vamos a escribir django y django rest framework separados por espacios primero un django y luego django rest framework y continúe y presione enter ahora aquí, no sé de nuevo por qué aparece ese símbolo del sistema para mí, pero lo es, pero puede ver el símbolo del sistema instalado, asegúrese de que se instale y una vez que lo haya instalado.
estamos listos para comenzar y podemos comenzar a usar django bien, así que ahora tenemos esos módulos instalados, lo primero que haremos es crear algunas carpetas en algún lugar de su escritorio o donde sea que desee usar este nombre, algo no En realidad, no importa cómo lo llames. He llamado el mío, tutorial de Django de reacción. Accede a esa carpeta desde el símbolo del sistema. Si estás en el código vs. vamos a hacer es que estamos g oing to type django hyphen admin y luego vamos a escribir start project seguido del nombre de nuestro proyecto django admin debería ser un comando que funcionará una vez que haya instalado django en su sistema, así que desde aquí vamos a elige un nombre voy a elegir el controlador de subrayado de música como el nombre de nuestra aplicación o nuestro proyecto, pero puedes nombrarlo como quieras, así que ahí vamos ahora vemos que tenemos una carpeta aquí y dentro de esta carpeta tenemos otra carpeta llamado lo mismo y un archivo llamado manage.pi, hablaremos de estos archivos específicamente más adelante, pero solo para revisarlos rápidamente, tenemos settings.pi, aquí es donde estarán todas las configuraciones para nuestro proyecto y algo así La carpeta aquí será la carpeta del proyecto y verá por qué es importante en un segundo porque cuando creamos una aplicación django, lo que realmente tenemos es una especie de proyecto y luego tenemos aplicaciones dentro de ese proyecto, así que este es nuestro controlador de música del proyecto.
El siguiente lo que vamos a hacer es crear una aplicación y una aplicación es lo que tenemos que hacer si realmente queremos decir renderizar algo en la pantalla o tener modelos de base de datos o todo ese tipo de cosas, así que ahora voy a decir django administrador y proyecto de subinicio voy a escribir aplicación de inicio y luego voy a nombrar mi aplicación ahora la primera aplicación que quiero crear aquí va a manejar nuestra api así que voy a llamar a esta una api pero de nuevo llámalo como quieras, así que django admin start app api y, de hecho, antes de hacerlo, voy a hacer un CD en este directorio del controlador de música porque quiero que esta aplicación esté dentro de este directorio aquí, no junto a él, así que no en el el mismo directorio exterior está bien, así que ahora supongo que podemos ir a django admin, solo voy a modificar esta aplicación de inicio de línea y la llamaremos api, adelante, presione enter y podemos ver que aparece una carpeta api dentro de nuestra música carpeta de control ahora, si abrimos esta, notará que hay algunas cosas dentro de aquí tenemos esta carpeta de migraciones, no tiene que preocuparse por eso, un nit.pi esto es solo para hacer de este un paquete de python admin dot pi app stop pi models.pi ahí es donde nuestros modelos de base de datos van a probar .pi aquí es donde pondría pruebas si estuviera probando vistas o modelos o lo que sea y luego vistas.pi aquí es donde vamos a poner el código que es realmente responsable de representar nuestras vistas o nuestros puntos finales de API en este caso, lo primero que vamos a hacer aquí es agregar esta aplicación que acabamos de crear a nuestro proyecto, así que recuerde que esta carpeta de controlador de música dentro de esta otra carpeta de controlador de música es una especie de configuración de nuestro proyecto y una carpeta de proyecto en cierto sentido, dentro de aquí vamos a ir a las aplicaciones instaladas y simplemente vamos a agregar la siguiente línea suponiendo que llamaste a la API de tu aplicación si la llamas de otra manera, entonces cambiarás donde veas api para ser ese nam e vamos a decir api dot apps esto será lo mismo independientemente de cómo lo hayas llamado y luego dot api config ahora api asegúrate de que esté en minúsculas en la p y la i y te mostraré adónde estamos llegando esto de pero estamos tratando de hacer referencia o simplemente agregar esta aplicación, lo siento al proyecto, así que api.apps.api config ahora si vamos a api y echamos un vistazo al archivo de aplicaciones aquí tenemos configuración de api esto es un clase que se creó automáticamente cuando creamos esta aplicación, así que eso es a lo que me refiero, digo api, el archivo de aplicaciones de punto y luego la clase de configuración de api de punto que ves allí, así que esa es la forma en que puedes averiguar qué debe poner aquí para agregar la aplicación ahora que ya estamos aquí, también vamos a agregar el marco de descanso, que es otra aplicación que necesitamos para nuestro proyecto, así que api.apps.api config y luego el marco de descanso, todo ahora que tenemos que en realidad solo les mostraré cómo podemos crear nuestra primera vista y comenzar a ejecutar esto s servidor django, supongo que son los primeros pasos para este video, así que vamos a entrar en api y api es nuestra primera aplicación y dentro de aquí vemos vistas ahora vistas aquí es donde vamos a escribir todo nuestros puntos finales ahora lo que quiero decir con punto final es algo así como decir barra hola o barra alta como hola sería un punto final alto sería un punto final un punto final está más o menos después de la barra inclinada a la derecha es como una ubicación en el servidor web que usted vamos a ahora podemos escribir algunos puntos finales y funciones bastante avanzados y cosas vamos a mantenerlo bastante simple en este momento vamos a hacer una función vamos a definir esto como principal esto va a tomar en un solicitud y esto es necesario cuando creamos nuestra vista , necesitamos tener un parámetro de solicitud en nuestra función y lo que esta función hará es simplemente devolver una respuesta, por lo que siempre que tenga un servidor web, lo que sucede es que hay una solicitud entrante indicada por esta solicitud t variable hat va a un punto final y luego ese punto final devolverá una respuesta al remitente y esa respuesta tendrá algún tipo de formato, tal vez sea json, tal vez sea una respuesta html, en cuyo caso mostraremos algo en el página web, así que cuando hagamos esto, lo que debemos hacer es importar la respuesta http que vamos a decir desde django.http importa la respuesta http ahora, esto es solo para mostrarle un ejemplo que en realidad no usaremos esto más adelante en el video pero vamos a decir la respuesta http, esto se devolverá, lo sentimos, y dentro de aquí podemos simplemente devolver un texto para que podamos decir algo como hola y esto es justo lo que se mostrará en la página web, eh, cuando lleguemos a este final.
apunte bien, así que ahora tenemos una respuesta http que devuelve hola, ahora lo que tenemos que hacer es averiguar cómo las direcciones URL apuntarán a esta función porque ahora todo lo que he hecho es definir una función que necesitamos de alguna manera. bien cual es el camino a esta función como si escribo barra hola escribo barra principal ¿cómo llego aquí? ahí es donde vamos a configurar las direcciones URL, lo primero que voy a hacer es crear un archivo dentro de la API y estoy vamos a llamar a esto urls.pi, vamos a necesitar esto y esto va a almacenar todas las direcciones URL locales de esta aplicación, verá lo que quiero decir con eso en un segundo, pero mantendremos este archivo abierto porque usaré esto, de hecho, dividiré esto a la derecha de mi pantalla, todo lo siguiente que haré es ir al archivo urls.pi dentro de musiccontroller ahora quiero que estés aquí y de hecho el Dividir puede no ser una mala idea o podría ser una mala idea porque mi texto es muy grande, pero dentro de aquí puedes ver que tenemos direcciones URL ahora aquí es donde se enviará la dirección URL principal cada vez que se escriba algo, así que cada vez que escriba sea lo que sea, conoce el dominio punto com barra inclinada y luego escribo barra inclinada hola después de que la barra inclinada se envíe a este archivo y luego t su archivo enviará estas direcciones URL a las aplicaciones correctas, de hecho, puede ver aquí mismo que esto está diciendo que está bien si vemos una dirección URL que se parece a slash admin y luego barra punto punto punto cualquier otra cosa en ese lado y luego enviar esa dirección URL a admin.site.urls se encargará de eso y generará lo que sea necesario en este momento.
Podríamos agregar algo más que diga, oh, tal vez no, administrador, tal vez queremos decir que sabe hola o algo así, ahora cuando lleguemos al punto final. alto, enviará esa URL a este archivo esencialmente de todos modos, queremos agregar la nuestra y queremos enviar las URL a este archivo justo, la que escribiremos en breve, así que dentro de aquí vamos a decir la ruta que vamos a agregue nuestra propia ruta ahora en lugar de tener algún tipo de no sé un prefijo, supongo que dejaremos esto en blanco, lo que significa que si obtenemos alguna URL, la enviaremos a este archivo y dentro de aquí nosotros vamos a escribir algo llamado include, ahora necesitamos t o importe eso desde aquí arriba, eso es solo una función y dentro de include vamos a escribir api dot urls ahora lo que dice está bien sea cual sea la url que se envía aquí , envíelo y envíelo a api dot urls así que ahora dentro de api.urls, en realidad solo voy a copiar este código aquí, aunque no usaremos la mayor parte , entraremos aquí y ahora escribiremos algunas URL y, en lugar de incluir otro archivo , simplemente las señalaremos.
a esta vista que creamos aquí mismo o supongo que solo apuntaremos un punto final porque solo tenemos uno, pero esta es esta URL correcta, no, este es el archivo de URL correcto, podemos deshacernos de la importación para el administrador y realmente obtener deshágase de la importación para incluir también y vamos a importar aquí desde las vistas de puntos import main la función que acabamos de escribir y ahora lo que haremos es tener esta cadena en blanco y lo que devolverá es main entonces lo que esto está diciendo es si obtenemos una URL que está en blanco que no tiene cualquier cosa en él, luego llame a la función principal y haga lo que diga dentro de la función principal, así que devuelva hola como una respuesta http, de acuerdo, así que ahora que hemos hecho eso, lo que vamos a hacer es ejecutar el servidor web, pero antes para hacer eso, debemos escribir el siguiente comando, explicaré lo que hace en un segundo, así que python manage.pi y luego hacer migraciones ahora, la razón por la que tenemos que hacer eso es que solo tenemos que actualizar la base de datos y en realidad no hay realmente uno creado en este momento, es por eso que estamos haciendo migraciones para almacenar los cambios actuales que hemos realizado en esta aplicación ahora no necesitamos hacer esto todo el tiempo, pero cada vez que hacemos un cambio en un modelo o hacemos un cambio en la base de datos que necesitamos para ejecutar esto ahora, la razón por la que estamos ejecutando esto es porque esta es la primera vez que hacemos la aplicación o la primera vez que iniciamos la aplicación, así que necesitamos inicializar la base de datos ahora, es posible que sea como la base de datos que tenemos.
't hizo una base de datos django au automáticamente crea uno y almacena algunas cosas relacionadas con la administración, por lo que cada vez que comenzamos, solo decimos python manage.pi hacer que las migraciones noten que no se detectaron cambios, está bien, perfecto, entonces vamos a decir python manage.pi migrar así ahora que lo hicimos notar que todo esto sucedió, está bien, ya sabes, aplicar todas estas migraciones, bla, bla, autenticación de administrador, etc. ahora estamos bien, podemos continuar y ejecutar el servidor web nuevamente, no te preocupes si no entiendes por qué lo hicimos pero ahora vea esto, este archivo db.sqlite3 apareció y esa es la base de datos que necesitamos para la aplicación, así que ahora vamos a decir python manage.pi run server esto como dice va a ejecutar el servidor web, así que ejecutamos eso observe que dice bien, sabe que realizar comprobaciones se ve bien y dice iniciar el servidor de desarrollo en y luego esta url, así que lo que voy a hacer es presionar control, hacer clic en esta url y notar lo que obtenemos, oh, nos saludamos bien entonces ese es el html que fue devuelto y eso se representa en la pantalla ahora, solo echemos un vistazo a lo que sucede si cambio esto para que diga una etiqueta h1 en su lugar, así que ahora h1 y sigo adelante y guardo eso y noto aquí que mi servidor se reinicia automáticamente cada vez que hago un guardado en uno de estos archivos de python, incluso si no cambio nada y solo controlo, en realidad debería volver a ejecutarlo, sí, volver a ejecutarlo allí, así que eso es algo bueno sobre django, solo tiene que ejecutar el servidor una vez a menos que realice un cambio importante en algo como los modelos de la base de datos y se actualizará automáticamente, pero volvamos aquí, actualicemos la página y ahora obtenemos nuestra bonita etiqueta h1 y notamos que dice oye, tuvimos una solicitud de obtención en bla, bla, lo que sea correcto la barra ahora vamos a jugar con las direcciones URL un poco más solo para asegurarnos de que las entendamos, así que lo que voy a hacer es entrar aquí y ponerlo en casa, así que ahora verás qué sucede con el servidor.
Reanudar cuando voy aquí, en realidad no obtengo una página porque no hay una ruta a la nada, es divertido, pero no hay una ruta para llegar a la nada, así que si escribo barra diagonal ahora noto que me lleva a esta página ahora déjame mostrarte usted de nuevo en este archivo de URL principal sé que voy un poco rápido qué sucede si hago algo como slash api o en realidad lo siento, no slash api sino api slash qué va a pasar ahora si trato de ir a slash home bueno, corramos esto y obviamente obtenemos una página no encontrada, pero ahora, ¿qué sucede si voy a slash api? bueno, si voy a slash api todavía no encontramos nada, pero ahora si voy a slash api home me lleva a hola, así que solo quiero ilustre cómo funciona esto, pero verá que tenemos api slash y luego dentro de aquí tenemos home, por lo que está bien, cada vez que obtengamos api slash, envíe el resto de la URL a este archivo y luego verificamos dentro de aquí el resto de la url y si vemos el inicio , renderizamos esta página ahora solo para notar que podríamos técnicamente, haga algo como ruta y luego simplemente deje esto en blanco y también haga que este sea hogar y ahí vamos, espere qué está pasando aquí, oh, lo siento, no es hogar, principal, mi error, y ahora, si ejecutamos esto y vamos a api slash, trae la misma función.
entonces podemos tener múltiples puntos finales que van al mismo lugar, pero de todos modos eso es todo lo que quería mostrar, así que eso es todo para este primer video , solo estamos configurando django para que todo funcione, con suerte, entendiendo la base y teniendo una idea la serie de tutoriales se verá como nuevamente, será una serie de tutoriales larga, por favor, hágame saber lo que quiere ver en los comentarios a continuación, dicho esto, espero que haya disfrutado si lo hizo, asegúrese de dejar un me gusta suscríbase al canal y te veré en el próximo [Música] tú.