rearrange the es zig series
This commit is contained in:
parent
8e8cb10d3b
commit
dc487a2788
@ -4,7 +4,7 @@ title: "¿Con qué lenguaje de programación se crean los lenguajes de programac
|
||||
description: |
|
||||
Vista superior de cómo funciona un lenguaje de programación
|
||||
realmente.
|
||||
pubDate: "2024-07-25"
|
||||
pubDate: "2024-07-14"
|
||||
tags: ["tech", "lenguajes", "tutorial"]
|
||||
image:
|
||||
url: "/img/blog/es/lang/cover.png"
|
||||
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
layout: ../../../layouts/BlogLayoutEs.astro
|
||||
title: "01: Programación desde cero absoluto con Zig"
|
||||
title: "Cero a Zig 01: Programación desde cero absoluto con Zig"
|
||||
description: |
|
||||
Aprendé a programar desde completamente cero, utilizando el lenguaje
|
||||
de programación Zig.
|
||||
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
layout: ../../../layouts/BlogLayoutEs.astro
|
||||
title: "02: Programación desde cero absoluto con Zig: Fundamentos"
|
||||
title: "Cero a Zig 02: Fundamentos"
|
||||
description: |
|
||||
Fundamentos de la computación, programas, componentes
|
||||
pubDate: "2024-07-16"
|
||||
|
@ -1,141 +1,174 @@
|
||||
---
|
||||
layout: ../../../layouts/BlogLayoutEs.astro
|
||||
title: "03: Programación desde cero: Hola mundo"
|
||||
title: "Cero a Zig 03: Instalando VSCode y Zig"
|
||||
description: |
|
||||
Escribí el tradicional programa "Hola mundo" por tí mismo!
|
||||
Instalamos Zig y VSCode en nuestro computador
|
||||
pubDate: "2024-07-17"
|
||||
tags: ["tech", "lenguajes", "intro", "tutorial", "zig"]
|
||||
tags: ["tech", "lenguajes", "intro", "tutorial", "zig", "VSCode"]
|
||||
image:
|
||||
url: ""
|
||||
alt: ""
|
||||
caption: ""
|
||||
---
|
||||
|
||||
|
||||
En este artículo vamos a escribir nuestro primer programa: Hola mundo. Vamos a
|
||||
modificarlo y entender algunos otros conceptos.
|
||||
|
||||
## Hola mundo
|
||||
|
||||
Hola mundo es tradicionalmente el [primer programa](https://es.wikipedia.org/wiki/Hola_mundo)
|
||||
que se escribe cuando se aprende a programar.
|
||||
|
||||
Vamos a empezar con este programa. Entra a la siguiente página web:
|
||||
[https://zig.fly.dev/p/xNluereqmgW](https://zig.fly.dev/p/xNluereqmgW)
|
||||
|
||||
Veras lo siguiente:
|
||||
|
||||
![Zig online 1](/img/blog/es/tutorial/007-zig1.jpg)
|
||||
|
||||
Arriba está el nombre de la página: "Zig Playground". A su derecha hay 3 botones en inglés:
|
||||
|
||||
- "Run" ejecuta el programa.
|
||||
- "Format" hace algo llamado 'formatear' el código. No lo usaremos aún.
|
||||
- "Share" comparte el código que escribimos. No lo usaremos.
|
||||
|
||||
Dentro del recuadro plomo está escrito el código **Zig**. No lo modifiques aún.
|
||||
|
||||
Si lo modificaste y quieres volver al código original, cierra la página y vuelve a
|
||||
abrirla con el link de arriba.
|
||||
|
||||
## Ejecutando el código
|
||||
|
||||
Presiona el boton "Run". Aparecerá texto debajo del recuadro del código:
|
||||
|
||||
![Zig online 2](/img/blog/es/tutorial/008-zig.png)
|
||||
|
||||
Este texto es el resultado de ejecutar el programa. Se lee:
|
||||
|
||||
- `Hola mundo!` : Este es el resultado del programa.
|
||||
- `Program exited.` : Significa "El programa terminó" en ingles. Nos
|
||||
indica que el programa terminó de ejecutarse. Puedes ignorarlo.
|
||||
|
||||
Felicidades! Has ejecutado tu primer programa.
|
||||
|
||||
> Desafio: Borra todo el código y vuelve a escribirlo, exactamente igual.
|
||||
Utiliza la imágen como guía.
|
||||
En este artículo vamos a instalar 2 cosas en nuestro computador:
|
||||
[Zig](https://ziglang.org/) y
|
||||
[Visual Studio Code](https://code.visualstudio.com/).
|
||||
Necesitamos estas 2 herramientas antes de poder empezar a programar.
|
||||
|
||||
|
||||
## ¿Qué significan todas estas letras?
|
||||
|
||||
Como verás, hay un monton de palabras y símbolos con colorcitos.
|
||||
Este es el código, es como un lenguaje especial utilizado
|
||||
para comunicarse con el computador.
|
||||
|
||||
Así como el francés, árabe o coreano, el **lenguaje** de programación Zig
|
||||
tiene un conjunto de reglas. Aprenderemos las reglas a medida que avance
|
||||
el tiempo. Mientras tanto, puedes ignorar todas esas palabras.
|
||||
|
||||
> ¿Que pasa si eliminas alguna de esas palabras y ejecutas el programa
|
||||
(con el boton "Run")? ¿Qué mensaje obtienes? ¿Qué crees que significa?
|
||||
Ya que este es un tutorial básico de programación, asumo que
|
||||
estas utilizando Windows. Yo usaré Windows 10, pero las instrucciones
|
||||
funcionan igual en Windows 11.
|
||||
|
||||
|
||||
## Magia negra y abstracción
|
||||
## Descargar e instalar VSCode
|
||||
|
||||
Según [Significados.com](https://www.significados.com/abstracto/),
|
||||
abstracto significa vago, impreciso, teórico, que no tiene existencia
|
||||
física (entre otras cosas). Algo abstracto suele ser algo difícil
|
||||
de entender, o imaginario.
|
||||
Si sabes como instalar un programa y no necesitas instrucciones
|
||||
paso a paso, saltate esta sección.
|
||||
|
||||
Primero busca `VSCode` en Google, y entra a la primera página que
|
||||
sale.
|
||||
|
||||
![Resultados de google](/img/blog/es/tutorial/070-zig.jpg)
|
||||
|
||||
Una vez en la página descarga VSCode con el boton grande y azul.
|
||||
|
||||
![Página de VSCode](/img/blog/es/tutorial/071-zig.jpg)
|
||||
|
||||
Se abrirá una nueva ventana en la esquina superior derecha.
|
||||
Cuando termine de descargarse, ábrelo haciendole click.
|
||||
|
||||
![Descarga de VSCode](/img/blog/es/tutorial/072-zig.jpg)
|
||||
|
||||
|
||||
En programación, abstracto tiene otro significado. Puedes buscar su
|
||||
definición técnica en internet, pero me parece muy confusa para
|
||||
un principiante, así que lo explicare en mis términos.
|
||||
Se abrirá una nueva ventana. Primero selecciona
|
||||
"Acepto el acuerdo" y despues presiona el boton "Siguiente".
|
||||
|
||||
En programación, abstracto significa que sabemos **qué** hace, pero
|
||||
no **cómo** lo hace. Un ejemplo claro sería un auto. Sabemos que
|
||||
al pisar el acelerador, el auto avanza. Pero no sabemos **cómo**
|
||||
pisar el acelerador ocasiona que el combustible se transforme en
|
||||
energía cinemática.
|
||||
![Instalación de VSCode](/img/blog/es/tutorial/073-zig.jpg)
|
||||
|
||||
Por ejemplo, voy a hablar más adelante de "imprimir" en el programa.
|
||||
Imprimir significa mostrar un mensaje en la pantalla. Sin embargo,
|
||||
no te voy a explicar cómo funciona la impresión. El concepto de
|
||||
"imprimir" es abstracto.
|
||||
Volveran a salir nuevas ventanas. Presiona "Siguiente" en todas.
|
||||
|
||||
### Magia negra
|
||||
![Instalación](/img/blog/es/tutorial/074-zig.jpg)
|
||||
|
||||
Escuché este termino del canal de Youtube Imesi.net. Magia negra
|
||||
es algo que: no se qué hace, cómo funciona, ni tampoco me importa.
|
||||
Cuando salga "Instalar" en vez de "Siguiente", presionalo.
|
||||
|
||||
Voy a utilizar el término "magia negra" para referirme a algo
|
||||
por lo que no necesitas preocuparte, o intentar entender. Por
|
||||
ejemplo, en el código de más arriba:
|
||||
![Instalación](/img/blog/es/tutorial/075-zig.jpg)
|
||||
|
||||
![Zig online 1](/img/blog/es/tutorial/007-zig1.jpg)
|
||||
Finalmente, saldrá una última ventana. Presiona "Finalizar"
|
||||
y se abrirá VSCode.
|
||||
|
||||
Todo el texto que dice:
|
||||
![Instalación](/img/blog/es/tutorial/076-zig.jpg)
|
||||
|
||||
```zig
|
||||
const std = @import("std")
|
||||
También puedes abrir VSCode desde el menú de inicio de
|
||||
Windows.
|
||||
|
||||
pub fn main() {
|
||||
std.debug.print();
|
||||
}
|
||||
```
|
||||
|
||||
es magia negra. Funciona, hace algo, pero no importa. No te
|
||||
preocupes en intentar entenderlo.
|
||||
|
||||
Eventualmente, y a medida que aprendas conceptos nuevos,
|
||||
entenderas qué significan esas cosas.
|
||||
|
||||
|
||||
## Inglés
|
||||
|
||||
Como habras visto, prácticamente todo el código está en inglés.
|
||||
Si ya sabes ingles, o lo estas aprendiendo, no tendrás muchos
|
||||
problemas continuando.
|
||||
|
||||
En mi opinion, programar sin saber inglés es contraproducente.
|
||||
Los lenguajes de programación (en su mayoría) se escriben en
|
||||
inglés, las mnemotécnicas están en inglés, y mucha información
|
||||
útil e importante está en inglés. Programar sin saber inglés
|
||||
es sumamente difícil.
|
||||
|
||||
Seguramente aprenderás algunas palabras a lo largo del tutorial,
|
||||
pero lo mejor que podrías hacer es aprender inglés.
|
||||
![Instalación](/img/blog/es/tutorial/044-zig.jpg)
|
||||
|
||||
|
||||
|
||||
## Introducción a VSCode
|
||||
|
||||
VSCode es un "IDE", un programa que trae muchas funciones
|
||||
útiles a la hora de programar. Lo vamos a utilizar a partir
|
||||
de ahora para aprender a programar en Zig.
|
||||
|
||||
La primera vez que se abre VSCode se ve así:
|
||||
|
||||
![VSCode](/img/blog/es/tutorial/045-zig.jpg)
|
||||
|
||||
Hay un monton de botones y divisiones. No te preocupes en
|
||||
entenderlo todo ahora mismo.
|
||||
|
||||
Notarás que el programa está en inglés. Ahora te mostraré
|
||||
cómo ponerlo en español.
|
||||
|
||||
### Cambiar idioma a español
|
||||
|
||||
A la izquierda arriba hay una serie de botones. Presiona el último,
|
||||
que tiene unos cuadros.
|
||||
|
||||
![Ext](/img/blog/es/tutorial/046-zig.jpg)
|
||||
|
||||
Esto abre una pestaña donde podemos buscar "Extensiones".
|
||||
Las extensiones agregan características a VSCode.
|
||||
|
||||
Primero vamos a instalar el idioma español. En la barra de búsqueda
|
||||
escribe "español":
|
||||
|
||||
![Ext](/img/blog/es/tutorial/047-zig.jpg)
|
||||
|
||||
Y presiona el botón azul "Install" del primer item de la lista
|
||||
que dice "Spanish":
|
||||
|
||||
![Ext](/img/blog/es/tutorial/048-zig.jpg)
|
||||
|
||||
Luego de eso, abajo a la derecha saldrá un mensaje.
|
||||
Presiona el botón azul:
|
||||
|
||||
![Ext](/img/blog/es/tutorial/049-zig.jpg)
|
||||
|
||||
El programa se reiniciará, y ahora estará en español.
|
||||
|
||||
Ahora vamos a instalar la extensión de Zig.
|
||||
|
||||
|
||||
### Instalar la extensión de Zig
|
||||
|
||||
Regresa a la pestaña de extensiones:
|
||||
|
||||
![Ext](/img/blog/es/tutorial/046-zig.jpg)
|
||||
|
||||
Y busca "Zig". Instala la extensión que se llama
|
||||
"Zig Language" y dice "ziglang":
|
||||
|
||||
![Ext](/img/blog/es/tutorial/050-zig.jpg)
|
||||
|
||||
Cuando se haya instalado puedes cerrar la pestaña:
|
||||
|
||||
![Ext](/img/blog/es/tutorial/051-zig.jpg)
|
||||
|
||||
Y volver al inicio:
|
||||
|
||||
![Ext](/img/blog/es/tutorial/052-zig.jpg)
|
||||
|
||||
## Instalar Zig
|
||||
|
||||
Hemos instalado la extensión de Zig, ahora instalaremos algo
|
||||
llamado "Compilador".
|
||||
|
||||
Presiona `Control + Shift + P`, se abrirá una ventana arriba
|
||||
en el centro:
|
||||
|
||||
![Zig](/img/blog/es/tutorial/066-zig.jpg)
|
||||
|
||||
|
||||
En la barra de busqueda escribe `Zig`, y presiona el botón
|
||||
`Zig Setup: Install Zig`:
|
||||
|
||||
![Zig](/img/blog/es/tutorial/067-zig.jpg)
|
||||
|
||||
En el dialogo que sale, presiona "Install".
|
||||
|
||||
![Zig](/img/blog/es/tutorial/064-zig.jpg)
|
||||
|
||||
Saldrá una nueva ventana, donde hay que escoger una versión.
|
||||
Elije la versión debajo de `nightly`. Al momento de escribir
|
||||
esto es `0.13.0`.
|
||||
|
||||
![Zig](/img/blog/es/tutorial/068-zig.jpg)
|
||||
|
||||
Saldrá una nueva ventana, presiona "Install".
|
||||
|
||||
![Zig](/img/blog/es/tutorial/065-zig.jpg)
|
||||
|
||||
Y selecciona la misma versión de antes. En mi caso, `0.13.0`.
|
||||
|
||||
![Zig](/img/blog/es/tutorial/068-zig.jpg)
|
||||
|
||||
|
||||
Con eso terminamos. Hemos instalado Zig en nuestro computador.
|
||||
|
||||
En el siguiente artículo aprenderemos del terminal y
|
||||
crearemos un proyecto.
|
||||
|
||||
|
@ -1,171 +1,170 @@
|
||||
---
|
||||
layout: ../../../layouts/BlogLayoutEs.astro
|
||||
title: "04: Programación desde cero: Modificando el hola mundo"
|
||||
title: "Cero a Zig 04: Terminal y Proyecto Zig"
|
||||
description: |
|
||||
Impresión, strings/cadenas y stdout.
|
||||
pubDate: "2024-07-30"
|
||||
tags: ["tech", "lenguajes", "intro", "tutorial", "zig"]
|
||||
Veremos el terminal y cómo crear/ejecutar un proyecto de Zig
|
||||
pubDate: "2024-07-18"
|
||||
tags: ["tech", "lenguajes", "intro", "tutorial", "zig", "VSCode"]
|
||||
image:
|
||||
url: ""
|
||||
url: "/vid/hacker.webp"
|
||||
alt: ""
|
||||
caption: ""
|
||||
---
|
||||
|
||||
En el artículo anterior escribimos nuestro primer programa:
|
||||
Hola mundo. En este artículos vamos a modificar el mensaje
|
||||
y aprender el primer concepto: Strings
|
||||
Seguramente has visto imágenes/videos de hackers antes,
|
||||
escribiendo en una pantalla negra con letras verdes.
|
||||
Ahora tu también, podras escribir en una pantalla negra
|
||||
(pero sin letras verdes).
|
||||
|
||||
En este artículo veremos el terminal, crearemos un proyecto
|
||||
de Zig en nuestro computador, y lo ejecutaremos.
|
||||
|
||||
En el artículo anterior ya instalamos VSCode y Zig, así que a partir
|
||||
de ahora me referiré a ellos.
|
||||
|
||||
|
||||
## Modificando "Hola mundo"
|
||||
## El terminal
|
||||
|
||||
Entra a la página web
|
||||
[https://zig.fly.dev/p/xNluereqmgW](https://zig.fly.dev/p/xNluereqmgW),
|
||||
donde se encuentra el programa "Hola mundo". Esta vez vamos a modificar
|
||||
el mensaje.
|
||||
[El/la terminal](https://en.wikipedia.org/wiki/Command-line_interface)
|
||||
es una forma de interactuar con nuestro computador, y se utiliza
|
||||
muchisimo en programación.
|
||||
|
||||
El resto de las palabras son magia negra. Te habras dado cuenta que
|
||||
hay palabras en español: Hola y mundo.
|
||||
En el terminal escribimos comandos, el computador los ejecuta,
|
||||
y nos responde. En cierto modo es como una versión mini de la
|
||||
programación.
|
||||
|
||||
![Zig online](/img/blog/es/tutorial/009-zig.jpg)
|
||||
Dentro de VSCode, en los menus de arriba a la izquierda, selecciona
|
||||
los 3 puntos, `Terminal`, `Nuevo Terminal`:
|
||||
|
||||
Hay varias cosas que notar:
|
||||
![Terminal](/img/blog/es/tutorial/053-zig.jpg)
|
||||
|
||||
- Estan pintadas de color amarillo
|
||||
- Tienen comillas dobles `"` al inicio y al final
|
||||
Aparecerá una nueva ventana en blanco abajo:
|
||||
|
||||
Dentro de estas comillas `"` podemos escribir el texto que querramos.
|
||||
![Terminal](/img/blog/es/tutorial/054-zig.jpg)
|
||||
|
||||
Por ejemplo, si reemplazas `Hola` por `Adios` y ejecutas el programa,
|
||||
se imprimirá `Adios mundo!`
|
||||
|
||||
![Zig online](/img/blog/es/tutorial/010-zig.jpg)
|
||||
|
||||
![Zig online](/img/blog/es/tutorial/011-zig.jpg)
|
||||
|
||||
Y también, si reemplazas `mundo` por otra palabra, se imprimirá
|
||||
lo que escribiste.
|
||||
|
||||
Tambien puedes agregar otro texto en ambos lados. Por ejemplo:
|
||||
|
||||
![Zig online](/img/blog/es/tutorial/012-zig.jpg)
|
||||
Este es nuestro terminal. Aquí escribiremos algunos comandos
|
||||
para crear un "proyecto" y "ejecutarlo".
|
||||
|
||||
|
||||
## Strings / cadenas de caracteres
|
||||
## Creando un proyecto de Zig
|
||||
|
||||
Los strings (cadenas de caracteres en inglés) son la forma
|
||||
en la que almacenamos texto.
|
||||
Un proyecto es una carpeta con una serie de archivos,
|
||||
en los cuales programaremos nuestro programa.
|
||||
|
||||
Un string empieza con una comilla doble `"`, el contenido
|
||||
del string, y termina con una comilla doble `"`.
|
||||
Haz click en en el terminal y escribe `mkdir tutorial`
|
||||
|
||||
Unos ejemplos de strings son: `"hola"`, `"adios"`,
|
||||
`"multiples palabras"`, `"123456"`.
|
||||
![Terminal](/img/blog/es/tutorial/055-zig.jpg)
|
||||
|
||||
En el programa de arriba hay 2 strings:
|
||||
`mkdir` es el "comando" que ejecutará la computadora,
|
||||
y `tutorial` es un "argumento" que recibe el comando.
|
||||
|
||||
![Zig online](/img/blog/es/tutorial/013-zig.jpg)
|
||||
`mkdir` viene del inglés "make directory", y crea una
|
||||
carpeta nueva. En este caso estamos creando una carpeta
|
||||
llamada `tutorial`.
|
||||
|
||||
Estos strings son lo que se muestra en pantalla al
|
||||
ejecutar el programa.
|
||||
Presiona enter para ejecutar el comando.
|
||||
|
||||
Los strings tienen algunas características:
|
||||
![Terminal](/img/blog/es/tutorial/056-zig.jpg)
|
||||
|
||||
- En el código, los strings tienen otro color para que
|
||||
sea más fácil identificarlos.
|
||||
- No puede haber comillas dentro de un string.
|
||||
|
||||
El string termina cuando aparece la primera comilla.
|
||||
Por ejemplo:
|
||||
En el terminal veremos siempre:
|
||||
|
||||
![Zig online](/img/blog/es/tutorial/014-zig.jpg)
|
||||
1. (1) La carpeta en donde estamos
|
||||
2. (2) El comando que escribimos
|
||||
|
||||
Aquí el string termina despues del `Hola `, la palabra
|
||||
`familia` no es parte del string. Puedes ver que el
|
||||
color amarillo del string termina en la segunda comilla,
|
||||
y la palabra familia está de color blanco.
|
||||
Algunos comandos tienen una "respuesta". En la imágen
|
||||
de arriba la respuesta es una confirmación de la carpeta
|
||||
que creamos.
|
||||
|
||||
- No puede haber nuevas lineas en un string. Esto es un error:
|
||||
Ahora vamos a ejecutar otro comando: `cd tutorial`
|
||||
|
||||
![Zig online](/img/blog/es/tutorial/015-zig.jpg)
|
||||
![Terminal](/img/blog/es/tutorial/057-zig.jpg)
|
||||
|
||||
Sin embargo, hay ocasiones donde queremos tener varias lineas
|
||||
en un string. Para esto se utilizan 2 caracteres especiales:
|
||||
`\n`. Estos nos permiten "señalar" que ahí va una linea nueva.
|
||||
`cd` es una abreviación de "change directory", que
|
||||
significa cambiar de carpeta. Usando este comando cambiamos
|
||||
la carpeta en la que estamos.
|
||||
|
||||
![Zig online](/img/blog/es/tutorial/016-zig.jpg)
|
||||
Ahora vamos a crear el proyecto de Zig, con el comando
|
||||
`zig init`:
|
||||
|
||||
Estos caracteres especiales se conocen como "caracteres de escape".
|
||||
Hay varios de ellos, pero no los veremos por ahora.
|
||||
![Terminal](/img/blog/es/tutorial/058-zig.jpg)
|
||||
|
||||
El comando `zig` nos permite realizar varias acciones,
|
||||
que veremos con el tiempo.
|
||||
|
||||
Al ejecutar `zig init` creamos un proyecto nuevo en
|
||||
la carpeta actual. Esto crea una serie de archivos
|
||||
y carpeta, que ahora abriremos.
|
||||
|
||||
Esto solo se hace una vez. Luego vamos a reutilizar el proyecto
|
||||
que acabamos de crear.
|
||||
|
||||
|
||||
## Impresión
|
||||
## Abriendo el proyecto
|
||||
|
||||
Imprimir es mostrar información a través de la pantalla. Esta
|
||||
información puede ser palabras, letras, números, símbolos, etc.
|
||||
Dentro de VSCode, presionamos el boton "Abrir carpeta".
|
||||
|
||||
Para imprimir en Zig se escribe lo siguiente:
|
||||
![VSCode](/img/blog/es/tutorial/059-zig.jpg)
|
||||
|
||||
![Zig online](/img/blog/es/tutorial/017-zig.jpg)
|
||||
Si no puedes ver este boton, asegurate de estar en la primera pestaña:
|
||||
|
||||
`std.debug.print` es una invocación que imprime lo que tenga
|
||||
dentro. Para poner algo dentro, se utilizan parentesis `()`.
|
||||
![Ext](/img/blog/es/tutorial/052-zig.jpg)
|
||||
|
||||
Dentro de los paréntesis va el string que queremos imprimir
|
||||
y una secuencia misteriosa, así: `("Tu mensaje", .{})`.
|
||||
Aquí seleccionamos la carpeta `tutorial`. Esta es la carpeta que
|
||||
acabamos de crear en el terminal.
|
||||
|
||||
Y finalmente, muy importante, todas las invocaciones
|
||||
terminan con un punto y coma `;`. Si la invocación
|
||||
no termina con su punto y coma tendrás un error misterioso.
|
||||
![VSCode](/img/blog/es/tutorial/060-zig.jpg)
|
||||
|
||||
Por ejemplo, para imprimir un nuevo texto `Me gusta Zig`
|
||||
se escribiriá el código así:
|
||||
Nos saldrá el mensaje de la imagen de abajo. Selecciona "Confiar en
|
||||
los autores..." y presiona "Si, confio en los autores".
|
||||
|
||||
`std.debug.print("Me gusta Zig", .{});`
|
||||
![VSCode](/img/blog/es/tutorial/061-zig.jpg)
|
||||
|
||||
Podemos tener varias invocaciones a la vez, y ejecutarlas en
|
||||
siempre que la invocación esté bien escrita.
|
||||
Ahora veras que en vez del boton "Abrir carpeta" ahora hay una
|
||||
serie de archivos.
|
||||
|
||||
![Zig online](/img/blog/es/tutorial/018-zig.jpg)
|
||||
![VSCode](/img/blog/es/tutorial/062-zig.jpg)
|
||||
|
||||
Y al ejecutar el programa se imprimiran los mensajes en orden.
|
||||
Este es nuestro proyecto. Aquí es donde estarán todos los archivos
|
||||
que usaremos.
|
||||
|
||||
![Zig online](/img/blog/es/tutorial/019-zig.jpg)
|
||||
- Carpeta `src`: Contiene el código que ejecutaremos
|
||||
- `build.zig`: Archivo mágico. Es mejor no tocarlo.
|
||||
- `build.zig.zon`: Archivo mágico. Es mejor no tocarlo.
|
||||
|
||||
Haz click en la carpeta `src` y en el archivo `main.zig`:
|
||||
|
||||
![VSCode](/img/blog/es/tutorial/063-zig.jpg)
|
||||
|
||||
Este es el archivo donde trabajemos por el resto de la serie.
|
||||
|
||||
![VSCode](/img/blog/es/tutorial/078-zig.jpg)
|
||||
|
||||
Veras que hay un monton de código raro, que aun no sabemos qué
|
||||
significa. Por ahora lo vamos a dejar así.
|
||||
|
||||
|
||||
## Nuevas lineas
|
||||
## Ejecutando el proyecto
|
||||
|
||||
Notarás que el mensaje se imprimió junto: `Mi primera impresiónMe gusta Zig`.
|
||||
|
||||
Este es un buen momento para presentar un concepto muy importante:
|
||||
la computadora hace lo que le pides, no lo que quieres.
|
||||
|
||||
El código que ejecutamos no le pide a la computadora que imprima
|
||||
una nueva linea `\n`. Así que la computadora no la imprime.
|
||||
|
||||
Para tener una nueva linea hay que incluirla en los strings, y con
|
||||
eso al ejecutar estará cada linea separada:
|
||||
|
||||
![Zig online](/img/blog/es/tutorial/020-zig.jpg)
|
||||
|
||||
![Zig online](/img/blog/es/tutorial/021-zig.jpg)
|
||||
Ahora que instalamos Zig en nuestro computador, tenemos que ejecutar
|
||||
el programa en nuestro computador. Eso lo haremos desde el terminal.
|
||||
|
||||
|
||||
Ve al terminal y ejecuta `zig build run`. Veras un monton de texto
|
||||
raro, pero al final debería quedar así:
|
||||
|
||||
## Glosario
|
||||
|
||||
No es necesario que memorices o entiendas estas palabras.
|
||||
|
||||
- String: "cadena de caracteres"
|
||||
- `const`: abreviatura de "constante", que no cambia
|
||||
- `std`: abreviatura de "estandar"
|
||||
- `import`: "importar"
|
||||
- `pub`: abreviatura de "público", que es accesible
|
||||
- `fn`: abreviatura de "función". en este artículo les llamé
|
||||
invocaciones
|
||||
- `void`: "vacio"
|
||||
- `main`: "principal"
|
||||
- `debug`: el debugging es un proceso mediante el cual
|
||||
se eliminan errores (tambien conocidos como "bugs")
|
||||
- `print`: "imprimir"
|
||||
![VSCode](/img/blog/es/tutorial/077-zig.jpg)
|
||||
|
||||
|
||||
Y también notarás que aparecieron 2 carpetas nuevas: `.zig-cache`
|
||||
y `zig-out`. Ignóralas.
|
||||
|
||||
Y listo! Has ejecutado el proyecto!
|
||||
|
||||
En el siguiente artículo empezaremos a escribir nuestro propio
|
||||
código, y a descifrar cada una de las partes que tiene Zig.
|
||||
|
||||
También, en el futuro voy a decir constantemente "Ejecuta el
|
||||
código" o "Ejecuta el programa". Esto significa ir al terminal
|
||||
y ejecutar el comando `zig build run`,
|
||||
como lo acabas de hacer.
|
||||
|
||||
|
@ -1,174 +1,141 @@
|
||||
---
|
||||
layout: ../../../layouts/BlogLayoutEs.astro
|
||||
title: "05: Cero a Zig: Instalando VSCode y Zig"
|
||||
title: "Cero a Zig 05: Hola mundo"
|
||||
description: |
|
||||
Instalamos Zig y VSCode en nuestro computador
|
||||
pubDate: "2024-08-08"
|
||||
tags: ["tech", "lenguajes", "intro", "tutorial", "zig", "VSCode"]
|
||||
Escribimos nuestro primer programa: Hola mundo!
|
||||
pubDate: "2024-07-19"
|
||||
tags: ["tech", "lenguajes", "intro", "tutorial", "zig"]
|
||||
image:
|
||||
url: ""
|
||||
alt: ""
|
||||
caption: ""
|
||||
---
|
||||
|
||||
En este artículo vamos a instalar 2 cosas en nuestro computador:
|
||||
[Zig](https://ziglang.org/) y
|
||||
[Visual Studio Code](https://code.visualstudio.com/).
|
||||
|
||||
En los artículos anteriores habíamos escrito nuestro código en
|
||||
una página web. Sin embargo, lo mejor es escribir el código
|
||||
(programar) y ejecutarlo en nuestro computador.
|
||||
En este artículo vamos a escribir nuestro primer programa: Hola mundo. Vamos a
|
||||
modificarlo y entender algunos otros conceptos.
|
||||
|
||||
Ya que este es un tutorial básico de programación, asumo que
|
||||
estas utilizando Windows. Yo usaré Windows 10, pero las instrucciones
|
||||
funcionan igual en Windows 11.
|
||||
## Hola mundo
|
||||
|
||||
Hola mundo es tradicionalmente el [primer programa](https://es.wikipedia.org/wiki/Hola_mundo)
|
||||
que se escribe cuando se aprende a programar.
|
||||
|
||||
## Descargar e instalar VSCode
|
||||
Vamos a empezar con este programa. Entra a la siguiente página web:
|
||||
[https://zig.fly.dev/p/xNluereqmgW](https://zig.fly.dev/p/xNluereqmgW)
|
||||
|
||||
Si sabes como instalar un programa y no necesitas instrucciones
|
||||
paso a paso, saltate esta sección.
|
||||
Veras lo siguiente:
|
||||
|
||||
Primero busca `VSCode` en Google, y entra a la primera página que
|
||||
sale.
|
||||
![Zig online 1](/img/blog/es/tutorial/007-zig1.jpg)
|
||||
|
||||
![Resultados de google](/img/blog/es/tutorial/070-zig.jpg)
|
||||
Arriba está el nombre de la página: "Zig Playground". A su derecha hay 3 botones en inglés:
|
||||
|
||||
Una vez en la página descarga VSCode con el boton grande y azul.
|
||||
- "Run" ejecuta el programa.
|
||||
- "Format" hace algo llamado 'formatear' el código. No lo usaremos aún.
|
||||
- "Share" comparte el código que escribimos. No lo usaremos.
|
||||
|
||||
![Página de VSCode](/img/blog/es/tutorial/071-zig.jpg)
|
||||
Dentro del recuadro plomo está escrito el código **Zig**. No lo modifiques aún.
|
||||
|
||||
Se abrirá una nueva ventana en la esquina superior derecha.
|
||||
Cuando termine de descargarse, ábrelo haciendole click.
|
||||
Si lo modificaste y quieres volver al código original, cierra la página y vuelve a
|
||||
abrirla con el link de arriba.
|
||||
|
||||
![Descarga de VSCode](/img/blog/es/tutorial/072-zig.jpg)
|
||||
## Ejecutando el código
|
||||
|
||||
Presiona el boton "Run". Aparecerá texto debajo del recuadro del código:
|
||||
|
||||
Se abrirá una nueva ventana. Primero selecciona
|
||||
"Acepto el acuerdo" y despues presiona el boton "Siguiente".
|
||||
![Zig online 2](/img/blog/es/tutorial/008-zig.png)
|
||||
|
||||
![Instalación de VSCode](/img/blog/es/tutorial/073-zig.jpg)
|
||||
Este texto es el resultado de ejecutar el programa. Se lee:
|
||||
|
||||
Volveran a salir nuevas ventanas. Presiona "Siguiente" en todas.
|
||||
- `Hola mundo!` : Este es el resultado del programa.
|
||||
- `Program exited.` : Significa "El programa terminó" en ingles. Nos
|
||||
indica que el programa terminó de ejecutarse. Puedes ignorarlo.
|
||||
|
||||
![Instalación](/img/blog/es/tutorial/074-zig.jpg)
|
||||
Felicidades! Has ejecutado tu primer programa.
|
||||
|
||||
Cuando salga "Instalar" en vez de "Siguiente", presionalo.
|
||||
> Desafio: Borra todo el código y vuelve a escribirlo, exactamente igual.
|
||||
Utiliza la imágen como guía.
|
||||
|
||||
![Instalación](/img/blog/es/tutorial/075-zig.jpg)
|
||||
|
||||
Finalmente, saldrá una última ventana. Presiona "Finalizar"
|
||||
y se abrirá VSCode.
|
||||
## ¿Qué significan todas estas letras?
|
||||
|
||||
![Instalación](/img/blog/es/tutorial/076-zig.jpg)
|
||||
Como verás, hay un monton de palabras y símbolos con colorcitos.
|
||||
Este es el código, es como un lenguaje especial utilizado
|
||||
para comunicarse con el computador.
|
||||
|
||||
También puedes abrir VSCode desde el menú de inicio de
|
||||
Windows.
|
||||
Así como el francés, árabe o coreano, el **lenguaje** de programación Zig
|
||||
tiene un conjunto de reglas. Aprenderemos las reglas a medida que avance
|
||||
el tiempo. Mientras tanto, puedes ignorar todas esas palabras.
|
||||
|
||||
![Instalación](/img/blog/es/tutorial/044-zig.jpg)
|
||||
> ¿Que pasa si eliminas alguna de esas palabras y ejecutas el programa
|
||||
(con el boton "Run")? ¿Qué mensaje obtienes? ¿Qué crees que significa?
|
||||
|
||||
|
||||
## Magia negra y abstracción
|
||||
|
||||
## Introducción a VSCode
|
||||
Según [Significados.com](https://www.significados.com/abstracto/),
|
||||
abstracto significa vago, impreciso, teórico, que no tiene existencia
|
||||
física (entre otras cosas). Algo abstracto suele ser algo difícil
|
||||
de entender, o imaginario.
|
||||
|
||||
VSCode es un "IDE", un programa que trae muchas funciones
|
||||
útiles a la hora de programar. Lo vamos a utilizar a partir
|
||||
de ahora para aprender a programar en Zig.
|
||||
|
||||
La primera vez que se abre VSCode se ve así:
|
||||
En programación, abstracto tiene otro significado. Puedes buscar su
|
||||
definición técnica en internet, pero me parece muy confusa para
|
||||
un principiante, así que lo explicare en mis términos.
|
||||
|
||||
![VSCode](/img/blog/es/tutorial/045-zig.jpg)
|
||||
En programación, abstracto significa que sabemos **qué** hace, pero
|
||||
no **cómo** lo hace. Un ejemplo claro sería un auto. Sabemos que
|
||||
al pisar el acelerador, el auto avanza. Pero no sabemos **cómo**
|
||||
pisar el acelerador ocasiona que el combustible se transforme en
|
||||
energía cinemática.
|
||||
|
||||
Hay un monton de botones y divisiones. No te preocupes en
|
||||
entenderlo todo ahora mismo.
|
||||
Por ejemplo, voy a hablar más adelante de "imprimir" en el programa.
|
||||
Imprimir significa mostrar un mensaje en la pantalla. Sin embargo,
|
||||
no te voy a explicar cómo funciona la impresión. El concepto de
|
||||
"imprimir" es abstracto.
|
||||
|
||||
Notarás que el programa está en inglés. Ahora te mostraré
|
||||
cómo ponerlo en español.
|
||||
### Magia negra
|
||||
|
||||
### Cambiar idioma a español
|
||||
Escuché este termino del canal de Youtube Imesi.net. Magia negra
|
||||
es algo que: no se qué hace, cómo funciona, ni tampoco me importa.
|
||||
|
||||
A la izquierda arriba hay una serie de botones. Presiona el último,
|
||||
que tiene unos cuadros.
|
||||
Voy a utilizar el término "magia negra" para referirme a algo
|
||||
por lo que no necesitas preocuparte, o intentar entender. Por
|
||||
ejemplo, en el código de más arriba:
|
||||
|
||||
![Ext](/img/blog/es/tutorial/046-zig.jpg)
|
||||
![Zig online 1](/img/blog/es/tutorial/007-zig1.jpg)
|
||||
|
||||
Esto abre una pestaña donde podemos buscar "Extensiones".
|
||||
Las extensiones agregan características a VSCode.
|
||||
Todo el texto que dice:
|
||||
|
||||
Primero vamos a instalar el idioma español. En la barra de búsqueda
|
||||
escribe "español":
|
||||
```zig
|
||||
const std = @import("std")
|
||||
|
||||
![Ext](/img/blog/es/tutorial/047-zig.jpg)
|
||||
pub fn main() {
|
||||
std.debug.print();
|
||||
}
|
||||
```
|
||||
|
||||
Y presiona el botón azul "Install" del primer item de la lista
|
||||
que dice "Spanish":
|
||||
es magia negra. Funciona, hace algo, pero no importa. No te
|
||||
preocupes en intentar entenderlo.
|
||||
|
||||
![Ext](/img/blog/es/tutorial/048-zig.jpg)
|
||||
Eventualmente, y a medida que aprendas conceptos nuevos,
|
||||
entenderas qué significan esas cosas.
|
||||
|
||||
Luego de eso, abajo a la derecha saldrá un mensaje.
|
||||
Presiona el botón azul:
|
||||
|
||||
![Ext](/img/blog/es/tutorial/049-zig.jpg)
|
||||
## Inglés
|
||||
|
||||
El programa se reiniciará, y ahora estará en español.
|
||||
Como habras visto, prácticamente todo el código está en inglés.
|
||||
Si ya sabes ingles, o lo estas aprendiendo, no tendrás muchos
|
||||
problemas continuando.
|
||||
|
||||
Ahora vamos a instalar la extensión de Zig.
|
||||
En mi opinion, programar sin saber inglés es contraproducente.
|
||||
Los lenguajes de programación (en su mayoría) se escriben en
|
||||
inglés, las mnemotécnicas están en inglés, y mucha información
|
||||
útil e importante está en inglés. Programar sin saber inglés
|
||||
es sumamente difícil.
|
||||
|
||||
Seguramente aprenderás algunas palabras a lo largo del tutorial,
|
||||
pero lo mejor que podrías hacer es aprender inglés.
|
||||
|
||||
### Instalar la extensión de Zig
|
||||
|
||||
Regresa a la pestaña de extensiones:
|
||||
|
||||
![Ext](/img/blog/es/tutorial/046-zig.jpg)
|
||||
|
||||
Y busca "Zig". Instala la extensión que se llama
|
||||
"Zig Language" y dice "ziglang":
|
||||
|
||||
![Ext](/img/blog/es/tutorial/050-zig.jpg)
|
||||
|
||||
Cuando se haya instalado puedes cerrar la pestaña:
|
||||
|
||||
![Ext](/img/blog/es/tutorial/051-zig.jpg)
|
||||
|
||||
Y volver al inicio:
|
||||
|
||||
![Ext](/img/blog/es/tutorial/052-zig.jpg)
|
||||
|
||||
## Instalar Zig
|
||||
|
||||
Hemos instalado la extensión de Zig, ahora instalaremos algo
|
||||
llamado "Compilador".
|
||||
|
||||
Presiona `Control + Shift + P`, se abrirá una ventana arriba
|
||||
en el centro:
|
||||
|
||||
![Zig](/img/blog/es/tutorial/066-zig.jpg)
|
||||
|
||||
|
||||
En la barra de busqueda escribe `Zig`, y presiona el botón
|
||||
`Zig Setup: Install Zig`:
|
||||
|
||||
![Zig](/img/blog/es/tutorial/067-zig.jpg)
|
||||
|
||||
En el dialogo que sale, presiona "Install".
|
||||
|
||||
![Zig](/img/blog/es/tutorial/064-zig.jpg)
|
||||
|
||||
Saldrá una nueva ventana, donde hay que escoger una versión.
|
||||
Elije la versión debajo de `nightly`. Al momento de escribir
|
||||
esto es `0.13.0`.
|
||||
|
||||
![Zig](/img/blog/es/tutorial/068-zig.jpg)
|
||||
|
||||
Saldrá una nueva ventana, presiona "Install".
|
||||
|
||||
![Zig](/img/blog/es/tutorial/065-zig.jpg)
|
||||
|
||||
Y selecciona la misma versión de antes. En mi caso, `0.13.0`.
|
||||
|
||||
![Zig](/img/blog/es/tutorial/068-zig.jpg)
|
||||
|
||||
|
||||
Con eso terminamos. Hemos instalado Zig en nuestro computador.
|
||||
En el siguiente artículo utilizaremos estas herramientas.
|
||||
|
||||
|
@ -1,209 +1,171 @@
|
||||
---
|
||||
layout: ../../../layouts/BlogLayoutEs.astro
|
||||
title: "06: Cero a Zig: Terminal y Proyecto Zig"
|
||||
title: "Cero a Zig 06: Modificando el hola mundo"
|
||||
description: |
|
||||
Veremos el terminal y cómo crear/ejecutar un proyecto de Zig
|
||||
pubDate: "2024-08-09"
|
||||
tags: ["tech", "lenguajes", "intro", "tutorial", "zig", "VSCode"]
|
||||
Impresión, strings/cadenas y stdout.
|
||||
pubDate: "2024-07-30"
|
||||
tags: ["tech", "lenguajes", "intro", "tutorial", "zig"]
|
||||
image:
|
||||
url: "/vid/hacker.webp"
|
||||
url: ""
|
||||
alt: ""
|
||||
caption: ""
|
||||
---
|
||||
|
||||
Seguramente has visto imágenes/videos de hackers antes,
|
||||
escribiendo en una pantalla negra con letras verdes.
|
||||
Ahora tu también, podras escribir en una pantalla negra
|
||||
(pero sin letras verdes).
|
||||
En el artículo anterior escribimos nuestro primer programa:
|
||||
Hola mundo. En este artículos vamos a modificar el mensaje
|
||||
y aprender el primer concepto: Strings
|
||||
|
||||
En este artículo veremos el terminal, crearemos un proyecto
|
||||
de Zig en nuestro computador, y lo ejecutaremos.
|
||||
|
||||
En el artículo anterior ya instalamos VSCode y Zig, así que a partir
|
||||
de ahora me referiré a ellos.
|
||||
## Modificando "Hola mundo"
|
||||
|
||||
Entra a la página web
|
||||
[https://zig.fly.dev/p/xNluereqmgW](https://zig.fly.dev/p/xNluereqmgW),
|
||||
donde se encuentra el programa "Hola mundo". Esta vez vamos a modificar
|
||||
el mensaje.
|
||||
|
||||
## El terminal
|
||||
El resto de las palabras son magia negra. Te habras dado cuenta que
|
||||
hay palabras en español: Hola y mundo.
|
||||
|
||||
[El/la terminal](https://en.wikipedia.org/wiki/Command-line_interface)
|
||||
es una forma de interactuar con nuestro computador, y se utiliza
|
||||
muchisimo en programación.
|
||||
![Zig online](/img/blog/es/tutorial/009-zig.jpg)
|
||||
|
||||
En el terminal escribimos comandos, el computador los ejecuta,
|
||||
y nos responde. En cierto modo es como una versión mini de la
|
||||
programación.
|
||||
Hay varias cosas que notar:
|
||||
|
||||
Dentro de VSCode, en los menus de arriba a la izquierda, selecciona
|
||||
los 3 puntos, `Terminal`, `Nuevo Terminal`:
|
||||
- Estan pintadas de color amarillo
|
||||
- Tienen comillas dobles `"` al inicio y al final
|
||||
|
||||
![Terminal](/img/blog/es/tutorial/053-zig.jpg)
|
||||
Dentro de estas comillas `"` podemos escribir el texto que querramos.
|
||||
|
||||
Aparecerá una nueva ventana en blanco abajo:
|
||||
Por ejemplo, si reemplazas `Hola` por `Adios` y ejecutas el programa,
|
||||
se imprimirá `Adios mundo!`
|
||||
|
||||
![Terminal](/img/blog/es/tutorial/054-zig.jpg)
|
||||
![Zig online](/img/blog/es/tutorial/010-zig.jpg)
|
||||
|
||||
Este es nuestro terminal. Aquí escribiremos algunos comandos
|
||||
para crear un "proyecto" y "ejecutarlo".
|
||||
![Zig online](/img/blog/es/tutorial/011-zig.jpg)
|
||||
|
||||
Y también, si reemplazas `mundo` por otra palabra, se imprimirá
|
||||
lo que escribiste.
|
||||
|
||||
## Creando un proyecto de Zig
|
||||
Tambien puedes agregar otro texto en ambos lados. Por ejemplo:
|
||||
|
||||
Un proyecto es una carpeta con una serie de archivos,
|
||||
en los cuales programaremos nuestro programa.
|
||||
![Zig online](/img/blog/es/tutorial/012-zig.jpg)
|
||||
|
||||
Haz click en en el terminal y escribe `mkdir tutorial`
|
||||
|
||||
![Terminal](/img/blog/es/tutorial/055-zig.jpg)
|
||||
## Strings / cadenas de caracteres
|
||||
|
||||
`mkdir` es el "comando" que ejecutará la computadora,
|
||||
y `tutorial` es un "argumento" que recibe el comando.
|
||||
Los strings (cadenas de caracteres en inglés) son la forma
|
||||
en la que almacenamos texto.
|
||||
|
||||
`mkdir` viene del inglés "make directory", y crea una
|
||||
carpeta nueva. En este caso estamos creando una carpeta
|
||||
llamada `tutorial`.
|
||||
Un string empieza con una comilla doble `"`, el contenido
|
||||
del string, y termina con una comilla doble `"`.
|
||||
|
||||
Presiona enter para ejecutar el comando.
|
||||
Unos ejemplos de strings son: `"hola"`, `"adios"`,
|
||||
`"multiples palabras"`, `"123456"`.
|
||||
|
||||
![Terminal](/img/blog/es/tutorial/056-zig.jpg)
|
||||
En el programa de arriba hay 2 strings:
|
||||
|
||||
En el terminal veremos siempre:
|
||||
![Zig online](/img/blog/es/tutorial/013-zig.jpg)
|
||||
|
||||
1. (1) La carpeta en donde estamos
|
||||
2. (2) El comando que escribimos
|
||||
Estos strings son lo que se muestra en pantalla al
|
||||
ejecutar el programa.
|
||||
|
||||
Algunos comandos tienen una "respuesta". En la imágen
|
||||
de arriba la respuesta es una confirmación de la carpeta
|
||||
que creamos.
|
||||
Los strings tienen algunas características:
|
||||
|
||||
Ahora vamos a ejecutar otro comando: `cd tutorial`
|
||||
- En el código, los strings tienen otro color para que
|
||||
sea más fácil identificarlos.
|
||||
- No puede haber comillas dentro de un string.
|
||||
|
||||
El string termina cuando aparece la primera comilla.
|
||||
Por ejemplo:
|
||||
|
||||
![Terminal](/img/blog/es/tutorial/057-zig.jpg)
|
||||
![Zig online](/img/blog/es/tutorial/014-zig.jpg)
|
||||
|
||||
`cd` es una abreviación de "change directory", que
|
||||
significa cambiar de carpeta. Usando este comando cambiamos
|
||||
la carpeta en la que estamos.
|
||||
Aquí el string termina despues del `Hola `, la palabra
|
||||
`familia` no es parte del string. Puedes ver que el
|
||||
color amarillo del string termina en la segunda comilla,
|
||||
y la palabra familia está de color blanco.
|
||||
|
||||
Ahora vamos a crear el proyecto de Zig, con el comando
|
||||
`zig init`:
|
||||
- No puede haber nuevas lineas en un string. Esto es un error:
|
||||
|
||||
![Terminal](/img/blog/es/tutorial/058-zig.jpg)
|
||||
![Zig online](/img/blog/es/tutorial/015-zig.jpg)
|
||||
|
||||
El comando `zig` nos permite realizar varias acciones,
|
||||
que veremos con el tiempo.
|
||||
Sin embargo, hay ocasiones donde queremos tener varias lineas
|
||||
en un string. Para esto se utilizan 2 caracteres especiales:
|
||||
`\n`. Estos nos permiten "señalar" que ahí va una linea nueva.
|
||||
|
||||
Al ejecutar `zig init` creamos un proyecto nuevo en
|
||||
la carpeta actual. Esto crea una serie de archivos
|
||||
y carpeta, que ahora abriremos.
|
||||
![Zig online](/img/blog/es/tutorial/016-zig.jpg)
|
||||
|
||||
Estos caracteres especiales se conocen como "caracteres de escape".
|
||||
Hay varios de ellos, pero no los veremos por ahora.
|
||||
|
||||
## Abriendo el proyecto
|
||||
|
||||
Dentro de VSCode, presionamos el boton "Abrir carpeta".
|
||||
## Impresión
|
||||
|
||||
![VSCode](/img/blog/es/tutorial/059-zig.jpg)
|
||||
Imprimir es mostrar información a través de la pantalla. Esta
|
||||
información puede ser palabras, letras, números, símbolos, etc.
|
||||
|
||||
Si no puedes ver este boton, asegurate de estar en la primera pestaña:
|
||||
Para imprimir en Zig se escribe lo siguiente:
|
||||
|
||||
![Ext](/img/blog/es/tutorial/052-zig.jpg)
|
||||
![Zig online](/img/blog/es/tutorial/017-zig.jpg)
|
||||
|
||||
Aquí seleccionamos la carpeta `tutorial`. Esta es la carpeta que
|
||||
acabamos de crear en el terminal.
|
||||
`std.debug.print` es una invocación que imprime lo que tenga
|
||||
dentro. Para poner algo dentro, se utilizan parentesis `()`.
|
||||
|
||||
![VSCode](/img/blog/es/tutorial/060-zig.jpg)
|
||||
Dentro de los paréntesis va el string que queremos imprimir
|
||||
y una secuencia misteriosa, así: `("Tu mensaje", .{})`.
|
||||
|
||||
Nos saldrá el mensaje de la imagen de abajo. Selecciona "Confiar en
|
||||
los autores..." y presiona "Si, confio en los autores".
|
||||
Y finalmente, muy importante, todas las invocaciones
|
||||
terminan con un punto y coma `;`. Si la invocación
|
||||
no termina con su punto y coma tendrás un error misterioso.
|
||||
|
||||
![VSCode](/img/blog/es/tutorial/061-zig.jpg)
|
||||
Por ejemplo, para imprimir un nuevo texto `Me gusta Zig`
|
||||
se escribiriá el código así:
|
||||
|
||||
Ahora veras que en vez del boton "Abrir carpeta" ahora hay una
|
||||
serie de archivos.
|
||||
`std.debug.print("Me gusta Zig", .{});`
|
||||
|
||||
![VSCode](/img/blog/es/tutorial/062-zig.jpg)
|
||||
Podemos tener varias invocaciones a la vez, y ejecutarlas en
|
||||
siempre que la invocación esté bien escrita.
|
||||
|
||||
Este es nuestro proyecto. Aquí es donde estarán todos los archivos
|
||||
que usaremos.
|
||||
![Zig online](/img/blog/es/tutorial/018-zig.jpg)
|
||||
|
||||
- Carpeta `src`: Contiene el código que ejecutaremos
|
||||
- `build.zig`: Archivo mágico. Es mejor no tocarlo.
|
||||
- `build.zig.zon`: Archivo mágico. Es mejor no tocarlo.
|
||||
Y al ejecutar el programa se imprimiran los mensajes en orden.
|
||||
|
||||
Haz click en la carpeta `src` y en el archivo `main.zig`:
|
||||
![Zig online](/img/blog/es/tutorial/019-zig.jpg)
|
||||
|
||||
![VSCode](/img/blog/es/tutorial/063-zig.jpg)
|
||||
|
||||
Este es el archivo donde trabajemos por el resto de la serie.
|
||||
## Nuevas lineas
|
||||
|
||||
![VSCode](/img/blog/es/tutorial/078-zig.jpg)
|
||||
Notarás que el mensaje se imprimió junto: `Mi primera impresiónMe gusta Zig`.
|
||||
|
||||
Veras que hay un monton de código raro, que aun no sabemos qué
|
||||
significa. Por ahora lo vamos a dejar así.
|
||||
Este es un buen momento para presentar un concepto muy importante:
|
||||
la computadora hace lo que le pides, no lo que quieres.
|
||||
|
||||
El código que ejecutamos no le pide a la computadora que imprima
|
||||
una nueva linea `\n`. Así que la computadora no la imprime.
|
||||
|
||||
## Ejecutando el proyecto
|
||||
Para tener una nueva linea hay que incluirla en los strings, y con
|
||||
eso al ejecutar estará cada linea separada:
|
||||
|
||||
Ahora que instalamos Zig en nuestro computador, tenemos que ejecutar
|
||||
el programa en nuestro computador. Eso lo haremos desde el terminal.
|
||||
![Zig online](/img/blog/es/tutorial/020-zig.jpg)
|
||||
|
||||
![Zig online](/img/blog/es/tutorial/021-zig.jpg)
|
||||
|
||||
Ve al terminal y ejecuta `zig build run`. Veras un monton de texto
|
||||
raro, pero al final debería quedar así:
|
||||
|
||||
![VSCode](/img/blog/es/tutorial/077-zig.jpg)
|
||||
|
||||
## Glosario
|
||||
|
||||
Y también notarás que aparecieron 2 carpetas nuevas: `.zig-cache`
|
||||
y `zig-out`. Ignóralas.
|
||||
No es necesario que memorices o entiendas estas palabras.
|
||||
|
||||
Has ejecutado el proyecto! Ahora vamos a hacerlo con nuestro propio código.
|
||||
|
||||
|
||||
## Reemplazando el código
|
||||
|
||||
En artículos anteriores vimos un programa llamado "Hola mundo":
|
||||
|
||||
```zig
|
||||
const std = @import("std");
|
||||
|
||||
pub fn main() !void {
|
||||
std.debug.print("Hola mundo!", .{});
|
||||
}
|
||||
```
|
||||
|
||||
Ahora vamos a ejecutarlo en nuestro computador, en vez de
|
||||
la página web.
|
||||
|
||||
Entra a `src/main.zig` y reemplaza todo el código que está ahí
|
||||
por el código de arriba.
|
||||
|
||||
> Nota: Puede que notes que las imágenes no sean exáctamente
|
||||
iguales a como cuando tu escribas el código.
|
||||
No te preocupes, no es un problema.
|
||||
|
||||
Una vez que hayas modificado el código, verás un punto blanco arriba:
|
||||
|
||||
![VSCode](/img/blog/es/tutorial/080-zig.jpg)
|
||||
|
||||
Esto significa que el archivo está modificado, pero no guardado.
|
||||
Presiona `Control + S` para guardar el archivo.
|
||||
|
||||
Ahora, ejecuta el código: Ve al terminal y ejecuta el comando
|
||||
`zig build run`:
|
||||
|
||||
> Nota: Verás que mi terminal se ve diferente. Pero lo importante
|
||||
son los comandos, y el resultado.
|
||||
|
||||
![VSCode](/img/blog/es/tutorial/081-zig.jpg)
|
||||
|
||||
El resultado sale abajo: `Hola mundo!`.
|
||||
|
||||
|
||||
## Siguentes pasos
|
||||
|
||||
Ya estamos listos para seguir aprendiendo Zig.
|
||||
|
||||
Ahora intenta ejecutar los programas que escribimos
|
||||
antes en VSCode. Copia y pega el código, o aún mejor,
|
||||
escríbelo tú mismo.
|
||||
- String: "cadena de caracteres"
|
||||
- `const`: abreviatura de "constante", que no cambia
|
||||
- `std`: abreviatura de "estandar"
|
||||
- `import`: "importar"
|
||||
- `pub`: abreviatura de "público", que es accesible
|
||||
- `fn`: abreviatura de "función". en este artículo les llamé
|
||||
invocaciones
|
||||
- `void`: "vacio"
|
||||
- `main`: "principal"
|
||||
- `debug`: el debugging es un proceso mediante el cual
|
||||
se eliminan errores (tambien conocidos como "bugs")
|
||||
- `print`: "imprimir"
|
||||
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
layout: ../../../layouts/BlogLayoutEs.astro
|
||||
title: "07: Cero a Zig - Impresión con formatos"
|
||||
title: "Cero a Zig 07: Impresión con formatos"
|
||||
description: |
|
||||
Imprimiendo información adicional.
|
||||
pubDate: "2024-08-10"
|
||||
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
layout: ../../../layouts/BlogLayoutEs.astro
|
||||
title: "08: Cero a Zig - Variables"
|
||||
title: "Cero a Zig 08: Variables"
|
||||
description: |
|
||||
Introducción a las variables
|
||||
pubDate: "2024-08-11"
|
||||
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
layout: ../../../layouts/BlogLayoutEs.astro
|
||||
title: "09: Cero a Zig - Comentarios y Números"
|
||||
title: "Cero a Zig 09: Comentarios y Números"
|
||||
description: |
|
||||
Comentarios, números y operaciones matemáticas
|
||||
pubDate: "2024-08-17"
|
||||
|
Loading…
Reference in New Issue
Block a user