Idea de proyecto: un sitio web que actúa como transacción entre vendedores y compradores de oxígeno.

En la situación actual de Covid19, se ha convertido en la necesidad del momento encontrar vendedores de Oxígeno en un área. Muchas personas pierden la vida por no encontrar el vendedor de oxígeno en su zona. Hemos encontrado una solución para eso. ¿Qué pasaría si hubiera un sitio web en el que todo lo que tuviera que hacer fuera ingresar el nombre de su ciudad y mostrara todos los lugares donde puede comprar oxígeno cerca de usted? ¡Será genial verdad!. Eso es lo que hemos hecho.

Herramientas utilizadas:

• Interfaz – Reaccionar
• Backend – Django REST

React: React es un marco de JavaScript para crear componentes de interfaz de usuario y crear interfaces de usuario. Para obtener más información al respecto, consulte sus documentos aquí: https://reactjs.org

Django REST: Django es un marco web basado en Python que sigue el patrón arquitectónico modelo-plantilla-vistas. Django REST framework es un conjunto de herramientas para crear API web.

Implementación paso a paso del proyecto: para ejecutar este proyecto en su propio sistema local, asegúrese de tener instalados node.js y Django.

1. Clone el repositorio de Github: el enlace de Github es «https://github.com/LordofUniverse/oxy-zone-frontend». Clone el repositorio en una ubicación adecuada en su servidor local. Asegúrese de tener instalado el último Node estable y npm. Para instalar node y npm, siga este enlace «https://docs.npmjs.com/downloading-and-installing-node-js-and-npm».
2. Ejecutándose en el servidor local: en la terminal/Símbolo del sistema, navegue hasta el directorio de oxy-zone-frontend/ en la terminal/Símbolo del sistema. Luego ejecute los siguientes comandos:

$ npm install

Esto es para instalar todos los módulos de Node necesarios para ejecutar la aplicación.

$ npm start

Esto es para iniciar el servidor de desarrollo.

Explicaremos el código del proyecto que clonamos arriba. Como el código es más largo y no se ve bien cuando se agrega aquí, hemos decidido agregar enlaces al código a través de GitHub.

Componentes del proyecto:

Iniciaremos Frontend(React) primero:

1. Crearemos la estructura del proyecto así:

2. Crearemos código para enlaces para el sitio web en App.js

Código de reacción:

import { React, useState } from 'react'
  
import Header from '../Start/Header'
  
import Sellerlogin from '../Seller/sellerlogin'
import SellerHome from '../Seller/SellerHome'
  
import BuyerHome from '../Buyer/BuyerHome'
import Sellerdetails from '../Buyer/Sellerdetails'
  
import Update from '../UpdateProfile/Update'
  
import Vaccinationlisting from '../Vaccination/vaccinationlist';
  
import Maptry from '../Map/react_map'
  
import { Redirect } from 'react-router'
  
import 'bootstrap/dist/css/bootstrap.min.css';
  
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";
  
  
const App = () => {
  
  const val = localStorage.getItem("gid")
  
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <Header />
        </Route>
          
        <Route exact path="/map"> 
          <Maptry />
        </Route>
  
        <Route exact path="/home"> 
          <BuyerHome />
        </Route>
  
        <Route exact path="/home/:seller"> 
          <Sellerdetails />
        </Route>
  
        <Route exact path="/vaccinationlist">
          <Vaccinationlisting />
        </Route>
  
  
        <Route exact path="/seller">
  
          {val === null ? <Sellerlogin /> : <SellerHome />}
  
        </Route>
  
        <Route exact path="/seller/update">
  
          {val === null ? <Redirect to="/seller" /> : <Update />}
          
        </Route>
  
   
      </Switch>
    </Router>
  )
}
  
export default App

https://github.com/LordofUniverse/oxy-zone-frontend/blob/master/src/App/App.js

3. Página de inicio: Página con un diseño simple que muestra la lista de contenedores de oxígeno vendidos por los vendedores, donde se proporciona una barra de búsqueda para que el usuario ingrese el nombre de la ciudad. Para los vendedores de oxígeno, habría una opción para que se registren en el sitio web y proporcionen detalles como la dirección y el precio/cilindro de oxígeno.

Código de reacción: https://github.com/LordofUniverse/oxy-zone-frontend/blob/master/src/Buyer/BuyerHome.js

4. Inicio de sesión del vendedor: una página de inicio de sesión del vendedor para que los vendedores de oxígeno se registren. Los datos se almacenan en una base de datos SQLite.

Imagen de inicio de sesión:

Imagen de registro:

Código de reacción: https://github.com/LordofUniverse/oxy-zone-frontend/blob/master/src/Seller/sellerlogin.js

5. Página del vendedor: los vendedores pueden crear la lista de contenedores de oxígeno junto con el precio y el número de teléfono. Los datos que se mostrarán se obtienen de la base de datos a través de una API personalizada utilizando el marco Django REST. Los datos se muestran en función de la cercanía al buscador.  

Código de reacción: https://github.com/LordofUniverse/oxy-zone-frontend/blob/master/src/Seller/SellerHome.js

6. También hemos agregado la función de mapa para mostrar marcadores con respecto a las ubicaciones donde se venden los contenedores de oxígeno.

Código de reacción: https://github.com/LordofUniverse/oxy-zone-frontend/blob/master/src/Map/react_map.js

7. Actualizar página de perfil: los vendedores pueden cambiar su foto de perfil o cambiar su correo electrónico, contraseña en esta página. Pueden agregar o cambiar descripciones de sí mismos.

Código de reacción: https://github.com/LordofUniverse/oxy-zone-frontend/blob/master/src/UpdateProfile/Update.js

Backend (Django) ahora:

Para clonar el proyecto, https://github.com/LordofUniverse/oxy-zone-backend , navegue hasta este directorio y ejecute el comando ‘python -m pip freeze > requirements.txt’ para instalar los módulos necesarios para este proyecto.

Necesitamos instalar python, y algunos módulos se enumeran a continuación:

1. Django
2. djangorestframework
3. django-cors-encabezados
4. django-heroku
5. cripta

1.Tendremos la estructura del proyecto así:

2. Creación de API para la aplicación de reacción: en la aplicación Frontend dentro de covidproject, creamos 2 modelos en models.py  , a saber, Vendedores y Lugares

Vista de migraciones.py

A continuación, creamos los puntos finales de la API en views.py ( https://github.com/LordofUniverse/oxy-zone-backend/blob/master/frontend/views.py ) . Para los puntos finales de la API, los serializadores necesarios se definen en serializers.py.

Los puntos finales de la API creados

3. Ejecutar el servidor Django: después de completar la parte del código, para ejecutar el servidor Django:

abra la terminal y navegue hasta el directorio correcto que contiene el script manage.py , luego ejecute el comando:

$ python manage.py runserver

En la ejecución exitosa, obtendrá:

Entonces, siguiendo estos pasos, podrá ejecutar una copia del sitio web en su propio servidor local 

Vídeo de demostración de la aplicación:

Conclusión: con la creciente necesidad de conocer a los vendedores de oxígeno en tiempos de crisis de oxígeno, esta aplicación podría ayudar a las personas. El éxito de esta aplicación depende de las personas que la registren y la utilicen. ¡Quédese en casa, manténgase seguro y vacúnese!

Autores:

1. Vinu Rakav @status Changingtheworld
2. Joel Thomas @thomas23