Pasos para crear el repositorio del proyecto django_base

in #utopian-io8 years ago (edited)

Intro: English
Title: Steps to create the django_base project repository
Language: Spanish / Español

In last days, I have created an open source repository to quickly build a new Django application. Django is my favorite framework for creating robust and scalable web applications, and it is also made in Python, a very powerful and easy-to-learn programming language. Personally I think that Python is one of the most promising programming languages ​​to teach new generations and offer them tools to take a place in the growing and demanding software development industry.

At this tutorial, we will take a tour of the steps that I followed to create the template for Django projects with Docker, PostgreSQL, Bootstrap and JQuery. The main intention is to share the structure and the process of elaboration of the project to motivate Python and Django developers to contribute to the development of different open source projects through utopian.io. This is a tutorial about how to start a Django application from beginning. Although if we are constantly creating new Django applications, the best option is to download the repository and save all the time required to set up a new project.

En los últimos días, he creado un proyecto de código abierto para levantar rápidamente una nueva aplicación Django. Django es mi Framework favorito para crear aplicaciones web robustas y escalables, y además está hecho en Python, un lenguaje de programación muy potente y fácil de aprender. Personalmente pienso que Python es uno de los lenguajes de programación más prometedores para enseñar a las nuevas generaciones y darles herramientas para ocupar un lugar en la creciente y demandante industria de desarrollo de software.

En este toturial, voy a dar un recorrido por los pasos que seguí para crear la plantilla para proyectos Django con Docker, PostgreSQL, Bootstrap y JQuery. La principal intención es compartir la estructura y el proceso de elaboración del proyecto para motivar a los desarrolladores Python y Django a contribuir en el desarrollo de los diferentes proyectos de código abierto por medio de utopian. Este es un manual sobre como iniciar una aplicación Django desde ceros. Aunque si constantemente estamos creando nuevas aplicaciones Django, la mejor opción es descargar el repositorio y ahorrarnos todo el tiempo que requiere la configuración inicial.

Los pasos para crear el proyecto fueron los siguientes:

1. Crear nuevo repositorio

Autenticado en la cuenta de github, hacer click en "New repository".


github_new_repository.png

En el formulario de "Creación de nuevo repositorio", seleccionamos el nombre del repositorio y agregamos una descripción. Marcamos el checkbox Public para establecer nuestro repositorio como un proyecto de código abierto, y marcamos el checkbox Initialize this repository with a README. Esto creará el archivo README.md en el repositorio, en el cual posteriormente agregarémos información general sobre el proyecto. Esta información estará disponible para los usuarios de github en la página principal del proyecto.

En el campo Add .gitignore seleccionamos Python, en el campo Add a licence seleccionamos MIT licence, y hacemos click en "Create repository".

new_repository_form.png

2. Clonar repositorio

Instalar GIT

Procedemos a clonar el repositorio haciendo click en el botón "Clone or download", seleccionamos Use SSH y hacemos click en el botón "copy to clipboard".

clone_repository.png

En la terminal, nos movemos a la carpeta en la que queremos clonar el proyecto y corremos el siguiente comando (donde [email protected]:roadhousestudio/django_base.git es el parametro almacenado al hacer click en "copy to clipboard"):

git clone [email protected]:roadhousestudio/django_base.git

3. Configurar archivos Docker y crear contenedor

Instalar Docker

Una vez clonado el repositorio, nos ubicamos en la raiz del proyecto, y procedemos a crear los archivos de configuración de Docker.

Primero creamos el archivo Dockerfile, con el siguiente contenido, donde indicamos que vamos a usar Python 3.6.0 y una imagen de ubuntu 14.04.


dockerfile.png

Código fuente
.

Posteriormente creamos el archivo requirements.txt con el siguiente contenido, en donde indicamos las librerías Python que vamos a usar en el proyecto.


requirements.png.

Código fuente
.

Finalmente creamos el archivo docker-compose.yml, en el que indicamos los servicios que vamos a necesitar habilitar para correr nuestra aplicación Django. En este caso, debemos habilitar un servidor web y un contenedor para nuestra base de datos PostgreSQL.


compose.png

Código fuente
.

Una vez creados estos archivos, ejecutamos el siguiente comando en la terminal:

docker-compose build

Por medio de este comando se crea la imagen de ubuntu indicada en el archivo Dockerfile y se instalan las librerias indicadas en requirements.txt, entra ellas, Django.

4. Crear proyecto Django

Para crear un nuevo proyecto Django, corremos el siguiente comando.

docker-compose run web django-admin.py startproject app .

Esto creará el archivo manage.py y la carpeta app/.

Vamos al archivo app/settings.py y agregamos 'app' a los INSTALLED_APPS de la aplicación:



Código fuente

Configuramos PostgreSQL como el motor de base de datos que vamos a usar:


Screen Shot 2017-11-30 at 8.30.12 PM.png
Código fuente

5. Crear página de inicio de la aplicación

Para crear la página de inicio de la aplicación, primero creamos el archivo views.py en la carpeta* app/*, con el siguente contenido.


views.png
Código fuente

Después procedemos a definir la url de la página de inicio editando el archivo app/urls.py de la siguiente forma:


Screen Shot 2017-11-30 at 4.29.17 PM.png
Código fuente

Creamos la carpeta app/templates/, y dentro de esta creamos la carpeta layout/. En la carpeta layout/ creamos el archivo base.html. Este archivo será la base de todos los archivos .html de la aplicación, en el que se definirán contenidos comunes como el header o el footer. El contenido del archivo app/templates/layout/base.html es el siguiente:


base.png
Código fuente

Y finalmente creamos el archivo home.html dentro de la carpeta app/templates/ con el siguiente contenido:


Screen Shot 2017-11-30 at 4.35.24 PM.png
Código fuente

6. Integrar Bootstrap y JQuery al proyecto.

Integramos las librerias Bootstrap 4 y JQuery al proyecto.

Dentro de app/, creamos la carpeta static/. La carpeta static/ la utilizarémos para almacenar archivos .js, archivos .css e imagenes. Dentro de static/ creamos la carepta libs/. Esta carpeta la utilizarémos para almacenar las librerías externas de css y js que requiera el proyecto, como por ejemplo Bootstrap y JQuery.

Descargamos Bootstrap 4. Dentro de la libería descargada encontrarémos las carpetas css/ y js/.

En la carpeta app/static/libs/ creamos una carpeta llamada bootstrap/ y copiamos y pegamos las carpetas css/ y js/ descargadas previamente de la página de Bootstrap.

Posteriormente, creamos la carpeta jquery en app/static/libs/, descargamos la librería y copiamos y pegamos el archivo jquery-3.2.1.min.js dentro de app/static/libs/jquery/.

Para almacenar los archivos .js y .css escritos por nosotros mismo, creamos las carpetas css/ y js/ dentro de la carpeta app/static/. Dentro de la carpeta app/static/css/ creamos el archivo main.css. En este archivo escribirémos los estilos generales de la aplicación. Dentro de la carpeta app/static/js/ creamos el archivo main.js. En este archivo escribirémos las funciones Javascript generales de la aplicación.

La estrucutra final del proyecto es la siguiente:


Screen Shot 2017-11-30 at 8.23.01 PM.png

Tras terminar de configurar el proyecto, ejecutamos el siguiente comando en la terminal:

docker-compose up

Este comando correrá las migraciones iniciales de la base de datos PostgreSQL y levantará el servidor web local. Ahora podemos ir a nu navegador web y navegar la url localhost:8000. Lo que nos mostrará el siguiente pantallazo:


Screen Shot 2017-11-30 at 8.27.36 PM.png

7. Actualizar repositorio


Actualizamos el repositorio con nuestros cambios. Para hacerlo, corremos los siguientes comandos:

git add . - Preparar achivos para el commit.
git commit --m="Creadoos archivos de configuración básica de proyecto Django"- Crear commit
git push - Subir cambios al repositorio.

Así, en la página de nuestro repositorio en github estará disponible nuestro trabajo para el uso libre de la comunidad.

8. Informar a la comunidad sobre nuestra contribución en utopian.io

Después he creado un post en utopian.io en el que informo a la comunidad sobre mi contribución. Utopian es una plataforma que incentiva la contribución en proyectos de código abierto, diseñada sobre el blockchain de steem.


Este ha sido el proceso de creación del proyecto django_base, un repositorio que permite iniciar un proyecto Django en menos de 5 minutos. Para iniciar un nuevo proyecto Django, solo es necesario clonar el repositorio y correr los siguientes comandos:

docker-compose build

y posteriormente:

docker-compose up

Quiero aprovechar de nuevo para terminar con una invitación a la comunidad de programadores a contribuir al desarrollo de proyectos de código abierto, a utilizar utopian, y a contrbuir en la creación de documentación en español para incentivar el crecimiento de la industria del desarrollo de Software en nuestra comunidad.

Feliz fin de semana.



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Very nice man, this is so useful.

I thought the utopian bot only works for english now - ¡vamos a ver! - think of me if you ever want help translating ;p

Thank you very much @ecoinstant. We must work together as a community because there are many tutorials and tools to do.

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

Muchas Gracias Mr. @simnrodrguez.

Fue él!

Si ve que hay moderador de español!

Hey @kit.andres I am @utopian-io. I have just upvoted you!

Achievements

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • Seems like you contribute quite often. AMAZING!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

Qué bueno para que los que no saben, aprendan!

Want to implement your first AI? Check out our post :)

Coin Marketplace

STEEM 0.07
TRX 0.29
JST 0.034
BTC 101394.59
ETH 3277.28
USDT 1.00
SBD 0.52