2 – Introducción a la programación

1. Contenido del capítulo

Hola, bienvenido de nuevo a Programar mola con Visual Studio donde puedes seguir éste curso de programación en C# con Visual Studio y .NET Framework 4.5.

Si has leído el capítulo anterior ya debes tener instalado y correctamente configurado tu Visual Studio así que en éste capítulo vamos a hacer lo siguiente:

  1. Pequeña y breve introducción a los elementos fundamentales de VS.
  2. Creación de un nuevo proyecto Windows Forms.
  3. Diseñador de formularios y herramientas.
  4. Vista de código.
  5. Compilación en modo debug.
  6. Introducción a los tipos de datos.
  7. Declaración de variables.
  8. Operaciones básicas con variables.
  9. Depuración punto por punto.
  10. Ser elegante no cuesta nada.
  11. Presentación del primer problema del curso.

Antes de continuar voy a dar por sentado que los conceptos del capítulo anterior están claros (de hecho será así en cada capítulo) por lo que me voy a ahorrar los enlaces a la Wikipedia de la terminología que ya se ha visto anteriormente (irlos poniendo es un coñazo) pero si tienes dudas puedes dejar un comentario o consultar el capítulo anterior, lo que te sea más cómodo 🙂

2. Introducción a Visual Studio

Visual Studio es la herramienta con la que vamos a programar, probar y generar nuestros programas. Es una herramienta muy potente y tiene millones de opciones de las cuales no tengo ni puta idea de la mitad, pero si de las que nos van a hacer falta para el curso así que iré al grano.

Tan pronto como hayas abierto VS verás algo similar a esto:

inicio

Propaganda, anuncios y mierdas varias a las que nunca he prestado atención. Lo que vamos a hacer es crear nuestro primer proyecto, para ello vamos a Archivo/Nuevo proyecto.

3. Creación de un proyecto

Como vamos a usar C#, nos vamos a su opción correspondiente y seleccionamos Aplicación de Windows Forms. Ahora hay que ponerle un nombre a la aplicación y escoger (si no te gusta la que viene por defecto) una ubicación. En la imagen tienes un ejemplo:

proyecto nuevo

Si te fijas, verás que puedes escoger la versión del .NET Framework que por defecto viene marcada la 4.5.1. Si por algún motivo estás usando una versión anterior de Visual Studio (por ejemplo la 2010) no podrás ir más allá del Framework 4.0 pero no te preocupes, para el contenido de éste curso no debería haber ningún problema en trabajar con un Framework más antiguo.

Acepta y crearás tu proyecto viendo algo parecido a esto:

proyecto

4. Diseñador de formularios y herramientas

formSobretodo no te asustes y no entres en pánico, son muchas cosas nuevas pero son muy sencillas de usar cuando le pillas el truco.

Lo que tienes en el centro es el formulario, que viene a ser como se ve tu aplicación. No puedes moverla, minimizarla ni cerrarla así que no lo intentes… vale, seguro que lo has intentado pero no va, no es más que una imagen. Lo que sí puedes hacer es jugar con su tamaño arrastrando los cuadritos blancos que la rodean.

explorador y propsSi te fijas en el lado izquierdo, verás que si haces clic donde pone Cuadro de herramientas se despliega una pestaña con muchas opciones, desplegando la primera opción puedes ver todos los componentes que Visual Studio nos permite insertar en nuestro formulario. Todos estos componentes son nativos del .NET Framework 4.5 (lo cual quiere decir que cualquier persona que lo tenga instalado debería ser capaz de hacer funcionar nuestro programa), muchos de ellos no los vamos a usar y algunos otros nos hartaremos de verlos, pero lo dejaremos para más adelante.

Ahora quiero que te fijes en el panel de la derecha, en la parte de arriba tienes el Explorador de soluciones que te permite ver todos los elementos que contiene tu programa, algunos de esos elementos son archivos que se han creado en tu disco duro al generar el proyecto, otros son solamente configuraciones del proyecto… como antes ya lo veremos sobre la marcha porque sino esto puede ser un puto lío que te cagas, ahora solamente nos interesa que nos suenen las cosas y que sepamos que están ahi y que hacen “cosas”.

Justo debajo tienes el panel de propiedades, donde se definen las propiedades de los distintos elementos que componen el formulario (éste incluido). Ahí se puede cambiar el color de fondo, el nombre, etc.

5. Vista de código

Bien, lo que hemos visto es la parte visual del proyecto, lo que sirve, entre otras cosas, para tocar lo que se llama Interfaz Gráfica de la aplicación. Pero la parte que más nos interesa es otra, donde de verdad está la chicha: EL CÓDIGO FUENTE.

Bien, para acceder a tan oscuro y hermoso lugar hacemos clic con el botón derecho del ratón sobre el formulario en el explorador de soluciones (Form1.cs) y seleccionamos ver código como se puede ver en la imagen.

opcion codigo

Deberías ver algo parecido a esto:

codigo

Seguramente tu veas todo el texto un poco más pequeño, yo tengo el zoom aumentado para no quedarme ciego (que ya lo estoy bastante) pero por si te interesa puedes cambiarlo dejando apretada la tecla Ctrl + Rueda del ratón.

Bien, lo que estamos viendo es el Mátrix de nuestro formulario, lo que realmente trabaja, lo que si no está aquí no funciona. Recuerda que independientemente de los asistentes, las ventanas de configuración que hemos visto antes, el código va a misa. El código siempre manda y nunca miente.

6. Compilación en modo Debug

Y esto del debug… ¿que es?

Pues para que nos entendamos es ejecutar un programa y poder ver que es lo que está haciendo, en teoría deberíamos saber que es lo que hace antes de ejecutarlo porque lo hemos programado nosotros pero a veces se nos escapan cosas, se producen errores y es la mejor manera de averiguar qué está pasando, lo que llamamos debugar.

playPara que veas un ejemplo, vamos a darle al botón de play verde que se ve por arriba.

formEsto nos va a compilar la aplicación en modo debug y nos la va a ejecutar para que la podamos probar. Deberías ver el formulario vacío que hemos visto antes pero ahora si que lo puedes mover, minimizar y cerrar pues ya no es una simple imagen sino toda una aplicación… ¡Tu primera aplicación!

Verás que el botón de play verde se ha transformado en un stop rojo, si lo pulsas se para la ejecución y volvemos a como estábamos antes. Esto también ocurre si cierras la ventana del Form1.

7. Introducción a los tipos de datos

Bueno, la cosa ya se va poniendo interesante ¿verdad?. Ya hemos visto como crear un proyecto, algunos elementos de VS y hemos ejecutado nuestra primera aplicación. Ahora es el momento de empezar a escribir nuestras primeras líneas de código.

Vamos a hacer algo tan tonto como una suma… ¿Pero que podemos sumar?

Tienes que imaginar la programación como un gran puzzle donde las piezas las creas tú, por ejemplo, viene un señor (en éste caso yo) y te dice “Oye tú, súmame dos números y dime el resultado”. Aquí el objetivo está claro, darle a éste señor el resultado de una suma, sabemos cómo juntar las piezas del puzzle pero no tenemos las piezas así que nos las vamos a inventar.

Vamos a crear dos variables, una variable es un elemento que puede ir cambiando de valor durante la ejecución del código.

Las variables se componen de un tipo y un nombre, cómo el señor nos ha pedido que sumemos dos números vamos a crear dos variables de tipo entero y, en un arrebato de originalidad, las vamos a llamar numero1 y numero2. El código quedaría como vemos a continuación:

codigo1Al escribir int le hemos dicho a C# que vamos a crear una variable de tipo entero, y a continuación hemos puesto su nombre para rematar con un punto y coma que significa que ya hemos acabado.

Vale, el siguiente paso es darle valor a esos números, para eso usaremos lo que se conoce como asignación. En el código lo vais a ver super claro:

codigo2

Vale, tenemos nuestras piezas, dos números que valen 5 y 3, nos queda sumarlos como nos han pedido. ¿Que cómo se suma? Pues sumando :p

8. Operaciones básicas con variables

codio suma

¡Wow! Espera… ¿que es esa marca roja? Pues resulta que Visual Studio nos está diciendo que hay un error en nuestro código, si dejas el ratón sobre la línea errónea podrás leer el mensaje de error… aunque no siempre se entiende lo que quiere decir…

error1

Éste error, en castellano estándar, significa “Eh tio/a, estás sumando dos cosas y no me estás diciendo dónde quieres que ponga el resultado.” Ojalá Visual Studio nos dijera así las cosas, sería todo mucho más fácil.

Bien, la solución es muy sencilla, vamos a crear una nueva variable para poner el resultado de nuestra suma y vamos a poner el resultado ahí. Quedaría así:

codio suma ok

Bien, repasemos:

Tenemos tres variables, a una le ponemos un 5, a la otra un 3 y a la última le ponemos la suma de las otras dos… vamos a darle al play a ver que pasa.

¿No pasa nada verdad? Pues sí y no, el código se está ejecutando pero no lo estamos enviando hacia la interficie gráfica que es la ventana que vemos cuando le damos al play.

9. Depuración punto por punto

Vamos a debugar para demostrar lo que digo, si hacéis clic en la barrita gris a la izquierda del número de línea 19 se marcará con un punto rojo como en la imagen:

breakpoint zero

El punto rojo se conoce como Breakpoint o punto de interrupción, de ésta manera le estamos diciendo al programa que cuando le demos al play se pare ahí. Vamos a darle al play y veremos lo siguiente:

breakpoint

Si dejas el ratón puesto sobre numero1 verás que te dice que su valor es 0, esto es así porque cuando se crea una variable de tipo int su valor por defecto es siempre 0.

Ahora pulsa la tecla F10, esto hace que el programa avance un paso.

debug2

Pon el ratón sobre numero1 y verás como ahora vale 5, si haces lo mismo sobre numero2 verás que vale 0. Ahora pulsa F10 dos veces para que nos coloquemos en el punto de ejecución donde se ha realizado al suma.

debug3

Repite el proceso y verás como numero1 vale 5, numero2 vale 3 y… ¡¡¡resultado vale 8!!.

Felicidades, has picado tu primer programa 🙂

10. Ser elegante no cuesta nada

Una cosa muy cierta es que un código limpio, bonito y bien estructurado no solo hace menos daño a la vista sino que nos va a ahorrar un montón de tiempo a la hora de buscar errores, ampliar el código, etc.

Nuestro primer programa tiene solamente (si contamos lo que nosotros hemos escrito) 8 líneas contando los espacios en blanco. Pues bien, podemos dejarlo un poco más elegante si establecemos los valores cuando creamos las variables, ya veréis como todo queda más claro:

codigo_limpio

Como puedes ver la lectura ahora es clara: numero1 vale 5, numero 2 vale 3, resultado es la suma de los dos anteriores.

11. Presentación del primer problema del curso

Bueno, hemos llegado al final de éste capítulo y es el momento de presentar un problema.

He pensado que puede ser más divertido si presento el problema y no lo resuelvo hasta que publique el próximo capítulo, así te doy la oportunidad de resolverlo por ti mismo que es la mejor forma de aprender.

Creo sinceramente que si te doy la solución directamente vas a tener la tentación de mirarla y “picando piedra” es como se aprenden los truquitos y se superan los problemas que te puedas encontrar… aún así recuerda que tienes lo comentarios para hacerme cualquier pregunta que te surja.

Por último te recomiendo que te hagas muy amigo de los buscadores como Google, Yahoo! o Bing, te solucionarán muchas de tus dudas de forma rápida y cómoda y además aprenderás un montón de trucos de gente que, seguramente, sabe mucho más que yo.

Enunciado
El mismo señor que te había pedido que sumaras dos número cualesquiera te pide ahora que le hagas lo mismo con una resta, una multiplicación y una división y guardes los resultados en cuatro variables diferentes.

Pistas
Puedes aprovechar el proyecto que se ha creado en éste capítulo.
Puedes crear tantas variables como quieras para los operandos y los resultados.
Los operadores que necesitas són:

  • Suma, símbolo más (+).
  • Resta, símbolo guión (-).
  • Multiplicación, símbolo asterisco (*).
  • División, símbolo barra (/).
Anuncios

2 comentarios en “2 – Introducción a la programación

    1. Buenas!

      Me alegra que te animes a programar, aunque hayas hecho trampas mirando la solución 😉

      Piensa que el motivo de dar la solución más tarde es para que le des al coco, hay muchas formas de resolver los ejercicios y la mejor forma de aprender es que salgan de tu cabeza.

      Si tienes cualquier duda que no te de palo preguntar.

      Saludos.

      Me gusta

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s