Hace poco con la coope nos mudamos y tuvimos que cambiar el ISP (Internet Service Provider) y eso motivó a que tuviéramos que hacer algunos cambios, en muchos aspectos pero no viene al caso, puntualmente en el server que tenemos dentro de la ofi. Tuve que desempastarme un poco y volver a leer el manual de ssh para recordar algunas cuestiones que les comparto a continuación.
En este post vamos a mostrar herramientas para debuguear la aplicacion que estemos desarrollando en react-native, igual que en mi post anterior voy a mostrar como hacerlo en linux.
Abrimos el Android Studio, vamos a tools > AVD Manager y corremos un emulador de Android.
Una vez que tengamos el emulador corriendo abrimos en una terminal el directorio donde tengamos nuestra app. En este caso seguimos usando la rn-app que hicimos el post anterior. Una vez en el directorio ejecutamos npm run android.
Una vez que la aplicacion se haya abierto en el emulador hacemos ctrl + m eso va a abrir una serie de opciones, ya iremos explicando una por una (aunque hayan opciones bastante obvias). Hacemos click en Debug JS Remotely.
Eso lo que va hacer es abrirnos una tab en chrome/firefox con una texto parecido a este:
React Native JS code runs as a web worker inside this tab. Press Ctrl⇧J to open Developer Tools. Enable Pause On Caught Exceptions for a better debugging experience. You may also install the standalone version of React Developer Tools to inspect the React component hierarchy, their props, and state. Status: Debugger session #0 active.
Abrimos la consola del explorador con la tecla F12 y vemos que dice
Running application "rnapp" with appParams: {"rootTag":11}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF
Eso quiere decir que nuestro navegador ya esta "escuchando" a la aplicacion de react-native. Lo que podemos hacer para probarlo es ir al archivo app.js y dentro de la funcion render() hacer un simple console.log('testing debug...'); eso se va a mostrar en la consola de su explorador.
Pero vamos un poco mas alla, creemos un boton y veamoslo funcionar un poco mas copado.
Vamos a poner un Button en nuestra app y ver por consola un mensaje que se escribe cuando hacemos click. En esta parte vamos a copiar y pegar el codigo, ya haremos un post explicando componentes y funciones.
import React from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; export default class App extends React.Component { testDebug = () => { console.log('testing debug'); } render() { return ( <View style={styles.container}> <Text>Open up App.js to start working on your app!</Text> <Text>Changes you make will automatically reload.</Text> <Text>Shake your phone to open the developer menu.</Text> <Button onPress={this.testDebug} title="Press Me!" color="#841584" accessibilityLabel="Learn more about this purple button" /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });
Simplemente lo que hace este mini codigo, es mostrar un mensaje en el press(click) del boton de nuestra app. Ahora cada vez que cliqueamos podemos ver por consola que se muestra un mensaje que dice testing debug.
Contamos con una herramienta similar a la consola, pero que corre independientemente del navegador, react-native-debugger.
Vamos a la parte de Installation al link que dice releases, y nos bajamos la version para linux.
Cerramos la tab donde estabamos debugueando anteriormente y volvemos a hacer ctrl + M para desactivar el Debug JS Remotely.
Vamos a la carpeta donde haya descargado, extraemos el zip y abrimos el archivo React Native Debugger. Vamos a ver que es similar al inspector de elementos de chrome. Repetimos los pasos pero con la aplicacion abierta y vemos que ahora el mensaje nos lo tira en la consola del React Native Debugger.
Lo que es interesante de esta aplicacion es que en el panel de abajo a la izquierda podemos ver el arbol del "DOM" (no es un DOM exactamente pero es simil) y podemos editar al vuelo las propiedades lo cual nos ahorra mucho tiempo de prueba y recarga.
Por ejemplo vayamos al <Button> dentro del explorador de elementos y cambiemos la propiedad color a #333 veamos como el boton cambia de color, tambien podemos hacer "click" (press) y ver como nuestro mensaje sale por la consola.
Muy bien, ya tenemos la aplicacion instalada y las herramientas para debuguearla, FELICITACIONES!
Gracias por leer, cualquier consulta la pueden dejar escrita en el blog y la contestamos.
Saludos,
D.
Uno crece en un entorno delimitado y pareciera que siempre tiene que mantenerse dentro de esos parámetros. ¿Acaso no se ve como un logro que un niñx pueda pintar dentro de los bordes? ¿Es realmente un triunfo propio? ¿De la sociedad? ¿Es un simple proceso de aprendizaje?
Asociarnos a una Cooperativa implicó un proceso de resignificación de nuestra vida laboral. Incluso, y con el perdón de los amigos y familias, esos límites entre “el horario de oficina” y “casa” se fueron borrando. Creemos en un sistema solidario, donde las verticalidades son solo un fantasma, donde la asamblea arrasa con la meritocracia, donde la lucha es continua. Creemos en nosotros y no como una mínima parte de un sistema sino como seres libres y pensantes.
Convicción desde nuestro punto de vista es implicancia.
Desde esa estructura decidimos realizar nuestras tareas en sistemas operativos libres. Una vez más nos encontramos cuestionando lo establecido. No podemos ceder nuestra libertad a sistemas restrictivos, capitalistas y excluyentes. Creemos con convicción que las tecnologías libres nos pueden abrir terreno para la emancipación individual y colectiva ¡Lo colectivo por sobre las individualidades!
Convicción desde nuestro punto de vista es implicancia.
Entonces, desde nuestros cimientos: cooperativismo y software libre no nos queda otra que gritar por el feminismo. Nuestras banderas son la igualdad y la libertad pero no sólo como expresiones de deseo sino desde nuestra cotidianidad.
Margarita Salas explica en “Género y software libre en América Latina. Un estudio de caso” que el movimiento de los sistemas operativos libres está vinculada a “la creación colectiva, la apropiación comunitaria del conocimiento y la promoción de una filosofía de inclusión, diversidad y solidaridad”.
Convicción desde nuestro punto de vista es implicancia.
Al día de hoy, se calcula que en el sector de producción de software apenas el 20% son mujeres. Y esta desigualdad es aún más fuerte cuando hablamos de software libre donde la participación femenina es del 2% ¡Queremos que este porcentaje cambie!
Hoy y siempre vamos a luchar por nuestros ideales. ¡Libertad, igualdad, inclusión, solidaridad y diversidad!
¡Creemos en esta forma y queremos ver un mundo así!
El día de hoy vamos a ver cómo empezar a usar Google AdWords Express, aprovechando los descuentos que ofrecen y andan dando vueltas. En caso de no haber recibido uno, podés ponerte en contacto y hacer ruido de que tenés una empresa o un dominio o aparición en internet y te lo envían.
Para empezar, les dejo el número de teléfono gratuito para asistencia a cuentas con inversiones de bajo monto (al día del a fecha, inversiones menores a $2500 ARS mensuales):
0800-222-4664
Si la inversión supera ese monto, el número entonces será:
0800-666-1866 ó 0800-666-0668
A continuación, el tutorial empleará el signo $ para referirse a ARS (Pesos Argentinos)
Nos llegó por correo tradicional a las oficinas de Bitson, un código que otorgaba $700 de crédito en Adwords, con el único requisito de hacer un pago previo de $300. Pero como estábamos de suerte, también le llegó otro a @lecovi, donde el monto para el mismo requisito era de $175. Se pueden imaginar cuál de los dos usamos, de todas formas el camino a recorrer es exactamente igual.
El código:
AHT9T-KURGR-A9MP
Las condiciones detalladas:
- Activar o reactivar una cuenta en Google AdWords
- Antes de los 14 días de dicha activación, ingresar el código en el apartado correspondiente
- Usar $175 en publicidad
- Abonar esos $175 a través de Banelco, PagoMisCuentas, tarjeta de débito o crédito (https://billing.google.com/payments/u/0/paymentsinfofinder)
- Esperar 5 días hábiles hasta que se acredite el beneficio, del cual cabe destacar, que el sistema no dará aviso.
AdWords tampoco emitirá ninguna clase de aviso cuando se acabe el crédito promocional, es necesario revisar periódicamente la cuenta para no generar deudas indeseables.
También es posible que ingresemos a un nuevo programa llamado AdWords Express. Tiene las mismas funciones y costos que AdWords tradicional, pero la interfaz gráfica es muchísimo más sencilla. ¡Altamente recomendado para principiantes!
Estos son los datos que nos fueron requeridos. Es bastante intuitivo, y algunos no requieren explicación adicional...
Sitio a difundir:
(La URL del sitio que queremos promocionar)
Objetivo:
(Qué es lo que esperamos que pase en nuestro sitio)
Acción en el sitio web (registro en el formulario)
Radio de acción:
(¿Dónde queremos que se muestre nuestro anuncio?)
Mostrar el anuncio en un radio de 15km desde la empresa
Para esto, se puede definir una dirección específica o vincular directamente con Google My Business, que tomará la dirección automáticamente. En base a esta configuración, AdWords nos presenta la siguiente estimación:
El tamaño de la audiencia potencial, será entonces de 18.424.498 personas por mes.
Esto significa que se prevé que 18 millones de personas verán el anuncio. ¿Y tenemos que pagar por todo esto? Por supuesto que no, sólo pagaremos por cada click. A este costo se lo define como CPC (Costo por click o Cost per click). Este valor está determinado por el ranking de nuestro anuncio y la oferta para el mismo tipo de anuncio en la misma región. En definitiva, este valor lo va a definir Google, y no podemos tomar control sobre eso, pero sí podemos limitar cuánto estamos dispuestos a pagar por ese click. En función de ese límite, se establecerá este ranking, lo que definirá en qué orden será mostrado en el navegador junto a las publicidades de la competencia. A todo este proceso complejo se lo llama subasta. Cuando muchos anunciantes compiten por la misma aparición de publicidad, AdWords seleccionará y mostrará únicamente a los anuncios de mayor ranking.
En adelante, para acceder al panel de control, podemos hacerlo a través de https://adwords.google.com/express/plus/
Se promociona:
(¿Qué clase de producto o servicio estamos ofreciendo?)
Curso de programación
Mostrar anuncio a personas que busquen:
(Listado de categorías relativas a nuestro producto o servicio)
- Curso de Programación
- Introducción a la programación web
- Informática y Programación
- Python
Gracias a la información brindada, Google AdWords filtrará a los destinatarios de nuestro anuncio, de manera de no desperdiciar clicks (que paguemos por aquellas personas curiosas que entran sólo para ver qué es) y para no llenar las búsquedas de Google con publicidad no relevante para quien esté navegando.
El tamaño de la audiencia potencial, será entonces de 11.516 personas por mes.
Diseño del anuncio:
(Dentro del formato ofrecido por AdWords, contamos con 3 renglones para atraer a nuestros clientes hacia nuestro sitio)
Aprendé Python en bitson - Sumate a los que saben Anuncio bitson.group Aprovechá el año y arrancá en Febrero! Precio promocional
Lo que nos da como resultado:
Como primera prueba, decidimos invertir lo mínimo requerido para acceder a la asistencia telefónica, $2500 ARS mensuales. Por menos de ese valor la ayuda que recibís por teléfono es mínima, por el contrario, a partir de ese valor de inversión la asistencia es muy completa y por demás, agradable.
Inversión $82,24 ARS$ al día de media ($2500 al meś de máximo)
Rendimiento estimado: 996 - 1669 visualizaciones, 244 - 409 clics
Cuándo pagasSolo pagarás cuando alguien haga clic en tu anuncio o llame a tu empresa.
Cuánto cuestaCada clic tiene un coste distinto, pero no gastarás más del presupuesto mensual que hayas establecido.
Qué ocurre si cambias de ideaPrueba a publicar el anuncio sin compromiso, ya que puedes cambiar el presupuesto o cancelar su publicación en cualquier momento.
Para facilitar los pagos, dejé registrada una tarjeta de crédito, de manera que los pagos se hagan en forma automática. También es posible entrar a la sección de Facturación y emitir los pagos manualmente.
Les recomendamos aumentar el seguimiento sobre sus publicaciones, conectando nuestro sitio con Google Analytics, usando el tag que ofrece Adwords Express. Para una mejor medición de nuestro sitio les recomendamos utilizar el Píxel de seguimiento.
En nuestro caso, pasadas las 48hs de haber el pago mínimo requerido para la activación del cupón promocional ($175 ARS), nos apareció el crédito de $700 ARS en nuestra cuenta.
¡OJO! Uno debe ser responsable a la hora de armar las campañas. Lo mejor es darles una fecha de comienzo y una de finalización, contemplando el costo diario, de manera que sepamos de antemano cuánto dinero estamos dispuestos a invertir en publicidad. Para Google AdWords, es suficiente con que hayan hecho click en nuestro anuncio para cargarlo en nuestra cuenta. ¿Es confiable? Podríamos decir que sí. El mismo AdWords te ofrece la posibilidad de analizar desde donde viene el tráfico, y armar estadísticas basado en distintos paramétros. Hay mucho para investigar al respecto, y muchas consideraciones a la hora de armar una campaña.
Así fue que dimos nuestro primer curso en bitson, y que lo publicitamos a través de Google AdWords.
En este post vamos a configurar el ambiente en linux para empezar a programar aplicaciones en react-native para android (iOS queda fuera por razones obvias :grimacing:)
sudo apt-get update sudo apt-get install openjdk-8-jdk
Una vez finalizado de instalar ejecutamos
java -version
Para ver si instalo correctamente y deberiamos ver algo similar a esto
openjdk version "1.8.0_151" OpenJDK Runtime Environment (build 1.8.0_151-8u151-b12-1~deb9u1-b12) OpenJDK 64-Bit Server VM (build 25.151-b12, mixed mode)
Paso simple vamos a este link y descargamos
Android Studio (for linux).
Una vez que lo bajamos, extraemos la carpeta en /opt/ y dentro de la carpeta android-studio ejecutamos el archivo studio.sh.
Seleccionar la opcion que queramos si queremos importar configuraciones de instalaciones previas de Android Studio o no, click en OK.
Aca es donde deciamos que habia que tener paciencia, el wizard de instalacion de Android Studio te va a guiar el resto del proceso, el cual incluye la descarga del SDK (Software Development Kit), componentes que son necesarios para el desarrollo de apps. Parece que se va a trabar pero simplemente hay que esperar a que baje todos los archivos, va a depender mucho de tu velocidad de internet.
Si tenes una pc con un SO de 64-bits tenes que instalarte estas librerias para poder trabajar.
sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386
Abrimos el android studio, creamos un proyecto (esto es obligatorio, pero no le den demasiada importancia no vamos a usarlo). Dejamos trabajar al IDE y en la consola vemos que nos va a pedir de updatar gradle, hacemos click e instalamos. Una vez terminado de instalar, vamos a Tools > Android > SDK Manager ahi vamos a seleccionar la version de Android con la que queremos trabajar (yo elijo la version 6 uds pueden elegir la que quieran). Despues vamos a la tab SDK Tools y nos fijamos que esten chequeadas las opciones Android SDK Tools y Android SDK Platform-Tools de no estarlas las chequeamos, e instalamos ambas o la que falte.
Vamos a setear las variables de entorno para "decirle" al sistema donde ir a buscar las SDK-Tools. Abrimos la terminal y escribimos:
export ANDROID_HOME=$HOME/Android/Sdk export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/platform-tools
Si queres que queden fijas en la terminal modifica tu archivo ~/.bashrc agregando esas 3 lineas al final y reiniciando la consola.
Para testear si expusimos bien las variables en una terminal ejecutamos el comando
adb --version
El comando adb es una herramienta dentro de los SDK-Tools simplemente vamos a ver si encuentra ese archivo pidiendole la version, la salida deberia verse parecida a esta:
Android Debug Bridge version 1.0.39
Version 0.0.1-4500957
Installed as /home/{USER}/Android/Sdk/platform-tools/adb
El Android Studio cuenta con un emulador de android que podemos ejecutar en la PC, muy util para desarrollar y debuguear. Dentro del AS vamos a Tools > Android > AVD Manager y cliqueamos Create Virtual Device esto va a crear un nuevo emulador, seleccionan el tipo de dispositivo que quieren, la version de Android (instalada previamente en el paso 3). Una vez creada van a ver en la lista de dispositivos que se encuentra el suyo y a la derecha dentro de la columna Actions hay un boton de play que les permite ejecutarla.
El emulador consume mucha RAM, lo cual va a ser que se realentice el proceso de buildear y de ejecutar la aplicacion, tambien presenta problemas en placas de video. Por ejemplo yo tengo una placa nVidia y para poder correr el AVD en mi maquina tuve que instalarme los drivers de linux de lo contrario el emulador abria y cerraba automaticamente. Les dejo el link para instalar los drivers de nVidia en debian, para los drivers de otras placas de video consulten con nuestro buen amigo google.
Ya tenemos instalado y corriendo nuestro emulador de android en nuestra pc ahora bien la pregunta del millon...Como arrancamos a programar?
Simple, tenemos que bajarnos (para variar) nodejs y npm, son programas que nos van a permitir compilar nuestro codigo en JS y ejecutarlo como si fuera nativo, manos a la obra!
Para node vamos a la terminal de linux y ejecutamos:
curl -sL https://deb.nodesource.com/setup_9.x | sudo -E bash - sudo apt-get install -y nodejs
Eso basta para tener node y npm (node package manager) instalados en tu PC, para comprobarlo hacemos
node -v && npm -v
La salida deberia ser similar a:
v6.13.0 3.10.10
Muy bien, continuando con nuestro brevisimo post, en la terminal hacemos un sudo npm i -g create-react-native-app lo cual va a instalar un paquete de node de forma global (por eso sudo y por eso -g), para facilitarnos la creacion desde 0 de un proyecto en react native, dejo el link para que puedan ver el readme e interiorizarse mas si quieren.
Una vez instalado el paquete vamos al destino donde querramos instalar el proyecto y en una terminal hacemos create-react-native-app rn-app eso nos va a crear una app llamada rn-app (uds le pueden poner el nombre que quieran). Va a tardar un rato (otra vez), pero una vez que termine ya estamos listos para trabajar. Entramos a la carpeta cd rn-app y ejecutamos npm start en una consola y en otra npm run android si tenemos el emulador abierto la aplicacion se va a ejecutar en el mismo, sino va a fallar y salir.
Para este paso vamos a necesitar un cable usb y un celular (con android obviamente).
Vamos a habilitar el debug con USB en el celular, para eso hay que tener las opciones de desarrollador activadas, eso lo hacemos yendo a Configuracion > Acerca de y cliqueamos el numero de build 7 veces, despues volvemos a configuracion y vamos a tener las Opciones de Desarrollador, entramos y habilitamos el "Debug por USB".
Enchufamos el celular a la computadora y seleccionamos la opcion de transferir fotos via PTP.
En la terminal ejecutamos lsusb y obtenemos algo similar a esto:
Bus 002 Device 007: ID 1004:631d LG Electronics, Inc. Optimus Android Phone (Camera/PTP Mode) Bus 002 Device 003: ID 1a81:1006 Holtek Semiconductor, Inc. Bus 002 Device 002: ID 8087:0020 Intel Corp. Integrated Rate Matching Hub Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub Bus 001 Device 003: ID 04f2:b1d6 Chicony Electronics Co., Ltd CNF9055 Toshiba Webcam Bus 001 Device 002: ID 8087:0020 Intel Corp. Integrated Rate Matching Hub Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
Esta claro que mi celular es:
ID 1004:631d LG Electronics, Inc. Optimus Android Phone (Camera/PTP Mode)
De la linea de arriba agarramos los primeros 4 digitos del dispositivo:
1004:631d
En este caso 1004 es el identificador para LG.
Ingresamos lo siguiente en la consola:
echo SUBSYSTEM=="usb", ATTR{idVendor}=="22b8", MODE="0666", GROUP="plugdev" | sudo tee /etc/udev/rules.d/51-android-usb.rules
Por ultimo hacemos un check para ver si el adb lo detecta en la consola:
adb devices
Y deberiamos ver algo similar (depende del dispositivo que tengan)
List of devices attached LGD62093133844 device
Ahora puden hacer en la carpeta de su rn-app npm run android y la aplicacion se va a abrir en su celular. COPADO!
Gracias por leer, cualquier consulta la pueden dejar escrita en el blog y la contestamos.
Saludos,
D.
Cuando uno empieza a programar en Python suele suceder que incurrimos en errores que son considerados "leves" a nivel programación pero que a la hora de inspeccionar nuestro código y ver si cumple con las reglas PEP8 nos encontramos con la sorpresa de que dudosamente una parte del código escrito logra aprobar el "examen".
A continuación un breve listado de cosas que podés estar haciendo mal sin saber.
No niego ni confirmo haber escrito este post solo para utlizar esta imágen.
O sí, pero decídanse por uno y sigan siempre con ese. 4 espacios o TABs, pero si vamos variando las indentaciones de nuestros módulos con unos y otros, no estaríamos cumpliendo con las primeras dos reglas de PEP8
Evite dejar espacios en blanco en las siguientes situaciones:
- Dentro de paréntesis curvos, llaves, o paréntesis rectos - Antes de una coma o punto y coma - Antes del paréntesis que abre la lista de argumentos en el llamado a una función - Más de un espacio alrededor de una asignación del operador para alinearlo con otro
A la hora de codear en Python debemos tener en cuenta el largo de las líneas ya que, como bien lo dice el zen de python, la legibilidad cuenta.
Y para que podamos tener código mas legible, PEP8 recomienda que el máximo de caracteres por linea sean 79.
Keep it simple, stupid Sir.
Las sentencias compuestas (varias instrucciones en la misma línea) son generalmente tomadas como malas prácticas de programación.
Aunque a veces está bien poner if/for/while con una pequeña instrucción en la misma línea, no hacer esto para las declaraciones con múltiples instrucciones
El código debería estar comentado y que esos comentarios no contradigan lo que la función esta haciendo. El código mal comentado es peor que el que no lo está. Procuren mantener actualizados los comentarios para que cualquiera que lo lea lo pueda interpretar correctamente y no tenga que adivinar qué es lo que hace cada función.
Eso es todo por ahora, más adelante subiré otros consejos sobre Python.
Saludos!
Hoy les presentamos nuestro primer post recursivo.
Ingredientes:
Sin más preámbulo, dejo la receta a continuación...
Primero, nos aseguramos de tener pipenv instalado. Resulta práctico disponer del comando pipenv desde cualquier ruta, por lo que sugerimos agregar la ubicación de la misma a la variable de entorno PATH en el archivo .bashrc (.zshrc, o el que corresponda al shell que usen). Para saber dónde está ubicado pipenv podemos ejecutar el siguiente comando desde la consola:
which pipenv
/home/nespino/.local/bin/pipenv
Por lo que la línea de código para agregar pipenv al PATH sería:
export PATH=$PATH:~/.local/bin
Una vez configurado el entorno pipenv, procedemos a clonar el repositorio donde se alojan todas las entradas de nuestro blog.
git clone https://github.com/bitson/bitson.github.io.git
No necesitamos permisos especiales para clonarlo, pero no podremos subir el nuevo contenido del blog sin estar debidamente autorizado.
Debemos usar la rama src, en donde tenemos disponible los archivos necesarios para instalar Nikola y todas los artículos del blog.
git checkout src
Dentro del mismo, en la carpeta bitblog se encuentra el archivo Pipfile, que es el que nos permitirá instalar Nikola a través del siguiente comando en consola:
pipenv --three install
El parámetro --three indica que vamos a usar la versión 3 de Python. En caso de omitirlo, usaremos la versión que esté configurado por defecto en nuestro sistema.
Nota: Es posible las dependencias que tengamos en el sistema choquen con las que están declaradas en el archivo Pipfile.lock. En ese caso, podemos ignorar este archivo durante la instalación usando el comando:
pipenv --three install --skip-lock
Otra nota:
Es posible que el instalador de pipenv nos devuelva la siguiente advertencia:
Warning: Your Pipfile requires python_version 3.6, but you are using 3.5.2 (/home/n/./b/bin/python).
$ pipenv check will surely fail.
No es algo de qué preocuparse.
Virtualenv location: /home/nespino/.virtualenvs/bitblog-Dccxvb6W
Installing dependencies from Pipfile...
🐍 ▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉ 1/1 — 00:01:23
To activate this project's virtualenv, run the following:
$ pipenv shell
¡Éxito! Sólo nos falta verificar que Nikola esté funcionando correctamente.
pipenv run nikola auto
En mi caso, al ejecutar ese comando recibo un Traceback que termina en
OSError: [Errno 98] La dirección ya se está usando
Lo que significa que el puerto usado por defecto (8000) está ocupado. Para especificar el puerto a usar basta con agregar -p
➜ bitblog git:(src) ✗ pipenv run nikola auto -p 8001
Scanning posts........done!
[2018-02-16T20:03:24Z] INFO: auto: Watching files for changes...
[2018-02-16T20:03:24Z] INFO: ws4py: Using epoll
[2018-02-16T20:03:24Z] INFO: auto: Serving HTTP on 127.0.0.1 port 8001...
[2018-02-16T20:03:24Z] INFO: ws4py: Managing websocket [Local => 127.0.0.1:8001 | Remote => 127.0.0.1:56708]
[2018-02-16T20:03:24Z] INFO: auto: <--- {'command': 'hello', 'protocols': ['http://livereload.com/protocols/official-6', 'http://livereload.com/protocols/official-7'], 'snipver': 1, 'ver': '2.2.1'}
[2018-02-16T20:03:24Z] INFO: auto: ---> {"command": "hello", "protocols": ["http://livereload.com/protocols/official-7"], "serverName": "nikola-livereload"}
[2018-02-16T20:03:24Z] INFO: auto: <--- {'command': 'info', 'plugins': {'less': {'version': '1.0', 'disable': False}}, 'url': 'http://localhost:8001/'}
[2018-02-16T20:03:24Z] INFO: auto: ** Browser connected: http://localhost:8001/
[2018-02-16T20:03:24Z] INFO: auto: ** sending 0 pending messages
Nikola está listo para ser usado. Para ver el estado actual del blog, ingresar a http://localhost:8001/ y buscar esta misma entrada. Todo este procedimiento para llegar al tan deseado momento...
Antes de crear una nueva entrada, es muy importante tener el blog local actualizado, para no perder los últimos cambios ni generar conflictos con las ramas. Para esto basta con ejecutar:
git pull
Ahora sí, para crear una nueva entrada en el blog, nos posicionamos en el directorio bitblog y ejecutamos:
pipenv run nikola new_post -f markdown
Sin desperdiciar un segundo, Nikola nos pedirá un título para el artículo...
Creating New Post
Title: Creando artículos en Nikola
Scanning posts........done!
[2018-02-16T19:10:50Z] INFO: new_post: Your post's text is at: posts/creando-articulos-en-nikola.md
➜ bitblog git:(src) ✗ ls
Con el parámetro -f markdown estamos especificando que el formato de marcado será Markdown. Si no lo especificamos, Nikola usará por defecto reStructuredText reStructuredText, Markdown, Jupyter (IPython) Notebooks y HTML, entre otras.
Nota: El mismo blog de Nikola creado con Nikola tiene una nota sobre el rendimiento del Markdown con respecto a otros lenguajes de formateo.
Estamos listos para redactar la publicación...
Your post's text is at: posts/creando-articulos-en-nikola.md
Abrimos el archivo que Nikola nos generó automáticamente y podemos ver que incluye un encabezado donde principalmente podemos:
Para esto último, alcanza con agregar la línea .. author: @nespino al final del encabezado. Lo que debería quedar algo similar a:
<!--
.. title: Creando artículos en Nikola
.. slug: creando-articulos-en-nikola
.. date: 2018-02-16 16:10:50 UTC-03:00
.. tags: nikola, blog
.. category:
.. link:
.. description: Cómo crear un artículo para el blog de bitson con Nikola
.. type: text
.. author: @nespino
-->
Escribe tu publicación aquí.
De acá en adelante es fácil. Escribimos la entrada y guardamos el archivo.
INFO: auto: Watching files for changes...
Nikola nos informa que cada vez que el contenido se modifique, el servidor local intentará reiniciar, reflejando los cambios en el navegador.
Les dejo una síntesis de los elementos de markdown usados para la creación de esta nota:
_Este renglón fue escrito envuelto entre dos guiones bajos seguidos_
>>>> Este renglón comienza con cuatro símbolos de mayor (>>>>)
Este renglón está en cursiva
> # __no tan importante__ ![recurso] Nosotros somos símbolos libres (estamos escapados)
Este separador de línea de acá abajo se hace poniendo tres guiones seguidos (---)
Para agregar imágenes a nuestra publicación podemos hacerlo a través de su URL accesible desde internet o bien copiando la imagen a la carpeta:
bitblog/files/img/ejemplo.png
De esta manera podremos declararla usando el siguiente formato:
[identificador-del-recurso-de-imagen]: /img/ejemplo.png "Título de la imagen"
Esto es, el identificador de la imagen entre corchetes, seguido de dos puntos, la URL de la imagen (que en este caso empieza con / porque saldrá de la carpeta files/img/ previamente cargada en nuestro repositorio de GitHub Pages) y entre comillas el título de la imagen, el que aparecerá al posicionar el cursor del mouse sobre la misma.
Una vez que tengamos esta declaración (que no generará nada por pantalla) podremos insertar la imagen cuantas veces queramos, con un ! seguido de las palabras alternativas entre corchetes, y pegado al identificador de la imagen entre corchetes, como muestra la siguiente línea:
![description alt imagen asistencia discapacidad visual yapa optimiza seo][identificador-del-recurso-de-imagen]
Una vez que hayamos terminado de redactar la nota y verifiquemos que se vea correctamente, sólo debemos ejecutar el comando:
lo que subirá los cambios al repositorio en la rama src y GitHub Pages se encargará de mostrarlo en la dirección que tengamos configurada.
[2018-02-19T15:58:09Z] INFO: github_deploy: Successful deployment
PD: Hallazgos completamente inútiles aparecidos durante la redacción de la nota
guthub.com redirecciona a github.com
Animate a ejecutar pipenv --jumbotron
Hoy les quiero contar cómo se puede configurar git para que deployemos
directamente con un push en nuestro server.
Vamos a suponer que ya tenés tu sitio en un repositorio y que lo que estás haciendo ahora en tu ciclo de deploy es algo similar a esto:
ssh a tu server y te parás en el directorio donde tenés tu
sitiogit pull para descargar tu nuevo sitio.Si bien no es algo complejo, puede llegar a ser medio tedioso. Y qué mejor si
se puede hacer un deploy simplemente haciendo git push, no? xD.
Vamos a suponer que estás sirviendo tus archivos con un Apache o un Nginx en el
directorio /home/bitson/mi_sitio/.
Para poder llevar adelante esta configuración, vamos a separar por un lado los
archivos del sitio y por el otro los archivos del control de versiones.
Necesitamos tener un nuevo repo en /home/bitson/mi_sitio.git. Para eso nos
conectamos al server por ssh como siempre y ejecutamos:
mkdir -p /home/bitson/mi_sitio.git
cd /home/bitson/mi_sitio.git
git init --bare
Con el parámetro
--barele decimos que no vamos a tener los archivos con código fuente, sólo los archivos internos degit.
Ahora que tenemos el repositorio creado, tenemos que tener un directorio
hooks. Ahí dentro vamos a crear un archivo que se llame post-receive con el
con permisos de ejecución siguiente contenido:
#!/bin/sh git --work-tree=/home/bitson/mi_sitio --git-dir=/home/bitson/mi_sitio.git checkout -f
Para darle permisos de ejecución, corré el comando:
chmod a+x post-receive
Ahora cuando hagamos un push a este repositorio en mi_sitio.git se va a
ejecutar el hook que acabamos de crear en post-receive.
Ahora lo que tenés que hacer es agregar un repositorio remoto a tu repositorio local:
git remote add deploy ssh://usuario@tu_dominio.com/home/bitson/mi_sitio.git
Ahora trabajamos localmente y cuando queremos deployar lo que vamos a hacer es:
git push deploy master
Y voilà! Asunto resuelto.
Si tu entorno era similar a lo que describimos al principio del artículo, si te
conectás al server, te parás en /home/bitson/mi_sitio y tirás un git status
te va a decir que hubo cambios. Porque claramente ese repositorio no sabe que
se actualizó... De hecho ya no necesitás tener ese repositorio porque los
archivos de git los tenés en /home/bitson/mi_sitio.git.
Así que lo que podés hacer para evitar confusiones es borrar el .git que
tenés en /home/bitson/mi_sitio.
rm -rf /home/bitson/mi_sitio/.git
Fácil? Dejanos tu comentario
En este artículo te voy a contar cómo hacer para publicar en un mismo servidor diferentes carpetas con archivos estáticos de tu sitio.
Supongamos que tenemos un sitio estático, por ejemplo, el sitio institucional de bitson. Eso lo tenemos en un repo y es un conjunto de archivos de texto (HTML, js, css y demás) que conforman el sitio.
Se le dice estático no porque esté "quieto" sino porque sólo contiene archivos de texto y no necesita correr un backend para funcionar.
Supongamos que tenemos los archivos en https://github.com/bitson/sitio1.git clonamos el repo en el server y tendremos una configuración del Nginx que será algo similar a:
server { listen 80; listen [::]:80; server_name bitson.group www.bitson.group; return 301 https://$host/$request_uri; } server { listen 443 ssl; listen [::]:443 ssl; root /home/bitson/sitio1; server_name bitson.group www.bitson.group; location / { try_files $uri $uri/ =404; } ssl_certificate /etc/letsencrypt/live/bitson.group/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/bitson.group/privkey.pem; }
Esta configuración hace que todas las peticiones que lleguen vía HTTP sean
redireccionadas al HTTPS y se sirvan del directorio /home/bitson/sitio1 donde
tenemos clonado el repo.
Para los certificados usamos Let's Encrypt y esa es la ruta usual en donde se guardan en un sistema Debian.
Además en esta configuración vemos una sentencia de try_files para la
locación de la raíz (/). Lo que nos quiere decir esto es que cuando alquien
haga una petición a, por ejemplo: bitson.group/saraza Nginx tiene que buscar
si existe el archivo /home/bitson/sitio1/saraza o si existe el directorio
/home/bitson/sitio1/saraza/. En caso de que no exista ninguno entonces el
Nginx responderá con un 404, el código de HTTP que corresponde a Not Found.
Supongamos ahora que tenemos otro repositorio, por ejemplo, https://github.com/bitson/presentaciones.git y queremos publicarlo en el mismo servidor. Algo así como lo que podemos ver en bitson.group/slides.
Para no tener que publicarlo en otro server, podemos aprovechar un alias de
Nginx. Suponiendo que tenemos ese repositorio en el server en
/home/bitson/presentaciones tenemos que poner una configuración como:
server { listen 443 ssl; listen [::]:443 ssl; root /home/bitson/sitio1; server_name bitson.group www.bitson.group; location / { try_files $uri $uri/ =404; } location /slides { alias /home/bitson/presentaciones; } ssl_certificate /etc/letsencrypt/live/bitson.group/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/bitson.group/privkey.pem; }
Si queremos omitir tener que poner el .html en cada una de las URLs a las que
queremos acceder en nuestro sitio. Sólo tenemos que agregar una sentencia de
try_files en nuestra configuración. Por ejemlo:
location /slides { alias /home/bitson/presentaciones; try_files $uri $uri.html =404; }
Así, si queremos entrar a https://bitson.group/slides/presentacion1.html
podremos hacerlo con sólo ir a https://bitson.group/slides/presentacion1
Espero que les haya gustado! Los leemos en los comentarios!
En este brevísimo artículo te explicamos cómo empezar a usar pipenv.
pipenv es una herramienta para manejar paquetes y entornos virtuales de
manera sencilla en tu entorno de desarrollo. Te recomiendo que le eches un ojo
a la Documentacion Oficila.
Ahora te voy a mostrar cómo instalar pipenv y cómo usarlo en tus proyectos.