DEV Community

Cover image for Crea un ambiente de desarrollo Linux en tu smartphone
Oliver Zulett
Oliver Zulett

Posted on

Crea un ambiente de desarrollo Linux en tu smartphone

Hoy en día es bien sabido que la potencia de los smartphones se a elevado a niveles inimaginables a tal grado que un teléfono de gama media tiene una misma capacidad de almacenamiento y procesamiento que una computadora de escritorio básica, pero aparte de disfrutar de las bondades de la internet, de aplicaciones de distinta índole o de videojuegos en nuestro teléfono, ¿será posible poder montar un ambiente de desarrollo en el?.
En Este Post te mostrare paso a paso como montar un ambiente de desarrollo en tu teléfono que sea capaz de tener un editor de código, estar conectado a algún servidor de repositorios como Github o Gitlab atreves de una llave SSH, que sea capaz de ejecutar proyectos de Nodejs, React o Angular y que además tenga una pinta muy buena, así que empecemos.

1 Cosas que instalar

Para empezar toda esta magia de montar un ambiente de desarrollo en tu smartphone es posible gracias a TERMUX, una terminal de emulación de ambiente de Linux que no necesita permisos (root) de super usuario para trabajar, tiene una instalación mínima de Linux lo que la hace super ligara y además cuenta con el manejador de paquetes APT.

Esta maravillosa aplicación la puedes descargar desde F-Droid también esta disponible en la PlayStore pero esta versión por lo general esta desactualizada y tienes que realizar ciertas configuraciones para usarla sin problemas, mientras que la versión de F-Droid ya esta lista para trabajar. F-Droid es un servidor de aplicaciones parecido a la playstore pero que por lo general solo tiene aplicaciones de codigo abierto, no es necesario descargar F-Droid para descargar Termux simplemente descarga el APK de termux e instalala desde el navegador.

Una vez instalada la aplicación de Termux como todo buen sistema Linux procedemos a actualizar nuestro sistema ingresando los siguientes comandos.

pkg update
pkg upgrade
Enter fullscreen mode Exit fullscreen mode

Una vez actualizado el sistema procedemos a instalar los programas esenciales de un ambiente de desarrollo como git, openssh, vim o node.

primero comenzamos con git:

pkg install git -y
Enter fullscreen mode Exit fullscreen mode

Ahora procedemos a instalar OpenSSH que nos ayudara a generar claves ssh que podría servirnos para conectarnos con servidores de manera remota atreves de SSH.

pkg install openssh -y
Enter fullscreen mode Exit fullscreen mode

Ahora tenemos que elegir nuestro editor de código en mi caso elegí vim.

pkg install vim -y
Enter fullscreen mode Exit fullscreen mode

Ya que queremos jugar con tecnologías basadas en JavaScript instalaremos Nodejs para poder ejecutar cualquier script o código echo en JavaScript.

pkg install nodejs -y
Enter fullscreen mode Exit fullscreen mode

Ahora instalamos CURL lo que nos ayudara a realizar peticiones http y otros a distintos endpoints.

pkg install curl -y
Enter fullscreen mode Exit fullscreen mode

Finalmente y por motivos estéticos ya que la pinta de Bash no es mala pero puede ser mejor, instalamos ZSH una alternativa a Bash que tiene un montón de temas para disfrutar.

pkg install zsh -y
Enter fullscreen mode Exit fullscreen mode

2 Cosas que configurar

temas

Una vez que tenemos todo instalado toca configurarlo. Empecemos descargando Oh My Zsh un configurador para Zsh que además viene con muchos temas que darán a nuestra terminal una mejor apariencia, para hacerlo vamos a la carpeta raíz de termux y descargamos oh my zsh por curl con el siguiente comando:

cd $HOME
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
Enter fullscreen mode Exit fullscreen mode

luego ponemos por defecto zsh como terminal con el comando:

chsh
y escribimos zsh cuando nos indique que terminal queremos por defecto
Enter fullscreen mode Exit fullscreen mode

y salimos de la aplicación escribiendo exit, volvemos a iniciar termux y listo ya tenemos configurado zsh por defecto.

Es memento de elegir un buen tema para zsh, para esto seguimos los siguientes comando:

# vamos al directorio raiz
cd $HOME

# y editamos el archivo de configuraciones de zsh
vim .zshrc
Enter fullscreen mode Exit fullscreen mode

vamos a la linea que configura los temas de ZSH y le cambiamos el tema por defecto por el tema que mas nos guste, aqui tienes una lista con los temas disponibles para zsh y si no sabes por cual decidirte solo deja escrito la palabra random y cada vez que vuelvas a iniciar Termux zsh te mostrara un nuevo tema y el nombre del mismo al iniciar sesión así si logras encontrar tu favorito simplemente cambias el random por el tema que te guste.

ZSH_THEME="random"
# en vim editamos escribiendo ingresando i
# guardamos los cambios en el archivo ingresando ESC + : + wq
Enter fullscreen mode Exit fullscreen mode
color

Hora de darle color a Termux con TERMUX-STYLE una script para termux que nos ayudara a cambiar el color a la interfaz de Termux, para ello ejecutamos los siguientes comandos:

# vamos al directorio raiz
cd $HOME

# clonamos el repositorio de termux-style 
git clone https://github.com/adi1090x/termux-style

# ingresamos al directorio de termux-style
cd termux-style

# y lo instalamos en termux
./install

# ingresamos a termux-stye
termux-style
Enter fullscreen mode Exit fullscreen mode

podemos seleccionar distintos colores de fondos y fuentes y si hay demasiado de donde escoger simplemente podemos ingresar la opción R en termux-style para que termux nos de una combinación de manera randomica y quedarnos con la que mas nos guste.

3 Hora de jugar

Una vez que tenemos Termux configurada y con buena pinta probemos como nos va ejecutando proyectos JavaScript, para lo cual creemos una nueva aplicación react y otra angular.

React

# creamos el directorio donde guardaremos nuestros proyectos de react
mkdir ~/DEV && ~/DEV/React

# ingresamos al directorio
cd ~/DEV/React

# creamos un nuevo proyecto React
npx create-react-app my-new-awesome-app

# ingresamos a nuestra nueva app
cd my-new-awesome-app

# iniciamos el nuevo proyecto
npm start
Enter fullscreen mode Exit fullscreen mode

y TA-DA se nos abrirá un navegador Chrome y veremos nuestra aplicación React funcionando.

Alt Text

Angular

# instalamos Angular CLI
npm install -g @angular/cli

# creamos el directorio donde guardaremos nuestros proyectos de react
mkdir ~/DEV/Angular

# ingresamos al directorio
cd ~/DEV/Angular

# creamos un nuevo proyecto Angular
ng new my-new-awesome-app

# ingresamos a nuestra nueva app
cd my-new-awesome-app

# iniciamos el nuevo proyecto
ng serve -o
Enter fullscreen mode Exit fullscreen mode

y TA-DA se nos abrirá un navegador Chrome y veremos nuestra aplicación Angular funcionando.

Alt Text

Y como podemos ver nuestras aplicaciones React y Angular funcionan perfectamente desde Termux.

4 Subiendo nuestra app a Github

Ahora que tenemos nuestra app corriendo desde luego queremos tenerla disponible para editarla desde cualquier parte por lo que conectaremos Termux con github a través de SSH.

# creamos una clave SSH
cd ~/.ssh/ && ssh-keygen

# copiamos la clave para utilizarla en github
cat ~/.ssh/id_rsa.pub
Enter fullscreen mode Exit fullscreen mode

y agregamos una nueva clave SSH a nuestra cuenta de Github, creamos un nuevo repositorio y copiamos la dirección ssh del mismo para agregarla como dirección remota de nuestra app.

# accedemos a la carpeta de nuestra app
cd ~/DEV/React/my-new-awesome-app

# configuramos nuestro usario de github
git config user.name "your user name"
git config user.email "your user email"

# iniciamos un nuevo repositorio 
git init

# agregamos la ssh que copiamos de github como url remota
git remote add origin [url ssh]

# agregamos nuestros cambios
git add .

# realizamos un commit 
git commit m 'first commit'

# subimos nuestros cambios a github
git push origin master
Enter fullscreen mode Exit fullscreen mode

Y con eso tendríamos listo nuestro repositorio listo para ser utilizado desde cualquier parte.
Alt Text

5 Notas finales

Termux sin duda alguna es una herramienta muy poderosa que nos facilita la vida al momento de desarrollar desde Android y nos puede salvar mas de una emergencias si es que estamos lejos de nuestra pc y debemos resolver algo en el trabajo.

Para finalizar la experiencia con Termux es muy buena en casi la mayoría de dispositivos mejora mucho si tienes un teléfono con una pantalla medianamente grande o muy grande e incluso mejora aun mas si tienes un teléfono con el sistema Android superior a la versión 9 ya que puedes utilizar la opcion de multi-pantalla que te permitirá usar Termux y ver tus cambios en tiempo real en Chrome al mismo tiempo.
Alt Text

Espero que te diviertas montando tu propio ambiente de desarrollo en tu telefono y si tienes alguna duda o pregunta no dudes en dejarla en los comentarios.

Top comments (0)