david.xala.dev/templates/html_template/2.html

<!-- ########## -->
<!-- 2 -->
<!-- ########## -->
<div class="img zoomable">
  <img src="/static/source_imgs/powershell/pst_1/env_var.webp" alt="" class="">
</div>

<p>
  Yo aplico este método de crear <a class="link" data-bs-toggle="modal" data-bs-target="#env_var">variables de
    entorno</a> para almacenar datos sensibles en proyectos en desarrollo de los
  cuales si compartes el proyecto en un repositorio público la información no sea visible.
</p>
<p>
  Para este ejemplo práctico vamos a crear una variable de entorno de tipo <a class="link" data-bs-toggle="modal"
    data-bs-target="#json">JSON</a> muy sencilla donde la variable de
  entorno se llamara 'usr_db' la cual tendra dos llaves, una será nombre y la otra será password:
</p>

{% set var1 %}
usr_db = { "nombre": "Saitama", "password": "OnePunchMan" }
{% endset %}
{% with codigo=var1.strip(), isEditable="true" %}
{% include 'components/copy-code.html' %}
{% endwith %}

<p>
  Una vez conociendo los datos que queremos que tenga nuestra variable de entorno lo que sigue es guardarla en el
  sistema y para ello tenemos dos opciones.
</p>
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="op1-tab" data-toggle="tab" href="#op1" role="tab" aria-controls="op1"
      aria-selected="true"><i class="bi bi-file-earmark-fill"></i> Opción 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="opt2-tab" data-toggle="tab" href="#opt2" role="tab" aria-controls="opt2"
      aria-selected="false"><i class="bi bi-file-earmark-fill"></i> Opción 2</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade active show" id="op1" role="tabpanel" aria-labelledby="op1-tab">
    <!-- {inicio op1} -->
    <p>
      En mi opinión es la más sencilla, para ello abrimos la terminal de windows o el shell de PowerShell y escribirmos
      lo
      siguiente:
    </p>
    
{% set var2 %}
setx usr_db '{ "nombre": "Saitama", "password": "OnePunchMan" }';
{% endset %}
{% with codigo=var2.strip(), isEditable="true" %}
{% include 'components/copy-code.html' %}
{% endwith %}

    <p>
      Despues de ingresar el código anterior y haber dado enter la consola te debe retornar un mensaje como el
      siguiente:
    </p>
    <div class="img zoomable">
      <img src="/static/source_imgs/powershell/pst_1/ps_1.png" alt="" class="sng_img">
    </div>
    <p>
      Del comando anterior podemos resaltar:
    </p>
    <ol class="lst">
      <li>Las variables de entorno establecidas a través del shell llevan el prefijo <b>setx</b></li>
      <li>En este caso que es un JSON lo debemos almacenar como cadena de texto, de lo contrario es indistinto si usas
        comillas dobles o simples, siempre y cuando cierres la cadena de texto con el mismo tipo de comilla con la que
        abriste.</li>
      <li>No olvides quitar el operador de asignación (=) de lo contrario la consola te dará un error.</li>
    </ol>
    <!-- {final op1} -->
  </div>
  <div class="tab-pane fade" id="opt2" role="tabpanel" aria-labelledby="opt2-tab">
    <!-- { inicio op2 } -->
    <p>
      Para este proceso sigue los siguientes pasos:
    </p>
    <ol class="lst">
      <li>En el botón inicio busca la opción "Editar las variables de entorno del sistema" y selecionala.</li>
      <li>En la ventana emergente con título "Propiedades del sistema", en la pestaña "Opciones avanzadas" da click en
        el
        botón "Variables de entorno...". </li>
      <li>Se sobrepone una nueva ventana con título "Variables de entorno" la cual tiene dos grupos, nosotros usaremos
        el
        primer grupo llamado "Variables de usuario para (nombre de tu usuario)" <a href="#1"><sup>1</sup></a>, en ese
        grupo
        damos
        click
        en el botón
        "Nuevo...".</li>
      <li>Se aparece una tercera ventana emergente que se sobrepone, la cual lleva el título de "Nueva variable de
        usuario", la cual tiene dos campos:
        <ol type="A">
          <li>En el primer campo llamado "Nombre de la" ingresamos en valor de <b>usr_db</b></li>
          <li>En el segundo campo llamado "Valor de la" ingresamos <b>{ "nombre": "Saitama", "password": "OnePunchMan"
              }</b>
          </li>
          <div class="img zoomable">
            <img src="/static/source_imgs/powershell/pst_1/ps_2.png" alt="" class="sng_img">
          </div>
        </ol>
      </li>
    </ol>
    <p>
      Del proceso anterior podemos destacar los siguientes puntos:
    </p>
    <ol type="a" class="lst">
      <li>Las variables de entorno solo se registra el puro nombre sin prefijos.</li>
      <li>El valor de la variable se puede almacenar como formato JSON sin necesidad de iniciar y terminar con comillas,
        por
        default lo almacena como cadena de texto.</li>
    </ol>
    <p>
      <sup id="1">1</sup> Ya sea que añadas variables de entorno o a tráves de la interfaz gráfica, en ambos casos,
      puedes ver
      tus
      variables de entorno en esta ventana, de igual forma las podrás editar o eliminar.
    </p>
    <!-- { final op2 } -->
  </div>
</div>
<div class="alert alert-danger" role="alert" style="text-align: center;">
  <i class="bi bi-exclamation-octagon-fill" style="color: #fca311;"></i>
  Para poder usar las variables de entorno en Windows sin reiniciar el equipo debes realizar los siguientes pasos.
</div>
<ol class="lst">
  <li>Cerrar las terminales o consolas que tengas abiertas.</li>
  <li>Cerrar el editor o editores de código que tengas abiertos.</li>
</ol>
<p>
  Una vez hecho lo anterior deberas de oprimir la combinación de teclas Windows + r y en la venta ejecutar escribiras lo
  siguiente:
</p>

{% set var3 %}
cmd /c "set PATH=C: && exit"
{% endset %}
{% with codigo=var3.strip() %}
{% include 'components/copy-code.html' %}
{% endwith %}

<p>
  Una vez escrito el comando y dado enter ya podrás usar las variables de entorno y podras abrir el editor de código y
  las terminales que necesites.
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>