From e104fc079184e03211d60c74ea577f774859efda Mon Sep 17 00:00:00 2001 From: Cesar VIMac Date: Mon, 13 Jan 2020 17:41:57 -0600 Subject: [PATCH 1/9] =?UTF-8?q?a=C3=B1adiendo=20archivo=20md=20SwiftUI=20a?= =?UTF-8?q?=20Posts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- posts/.DS_Store | Bin 8196 -> 8196 bytes posts/SwiftUI.md | 40 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 40 insertions(+) create mode 100644 posts/SwiftUI.md diff --git a/posts/.DS_Store b/posts/.DS_Store index 53b020ba7537edb652f4f6793d4724fffb9b7663..52e733ea15e0837e2e3b4c5bb37c81b51be081f1 100644 GIT binary patch delta 60 zcmZp1XmOa}&nUJrU^hRb*k&GqLKc25hG2$rhD?Suh7yKQ2G7YKghW}7GcYjmZ!Qu^ QWZuj!@r`BkNfCBt0Otq~^8f$< delta 40 wcmZp1XmOa}&nUVvU^hRb=w=>)LYB=NMZ%aTHkfQ?m-xoA*--Qv)5Hct01(U#m;e9( diff --git a/posts/SwiftUI.md b/posts/SwiftUI.md new file mode 100644 index 0000000..f699ca3 --- /dev/null +++ b/posts/SwiftUI.md @@ -0,0 +1,40 @@ +# SwiftUI +![SWIFTUI](https://i.udemycdn.com/course/240x135/2397342_68bf_2.jpg) + +### Primeros pasos + + +1. Abre un playground en Xcode puedes nombrarlo "PruebaSwiftUI" +2. Antes de empezar con los ejemplos de codigo debemos de importar algunas librerias que nos permitiran trabajar con la vista previa y con el framework de **SwiftUI** estas librerias son: +`SwiftUI ` y `PlaygraundSupport `, acompañadas siempre de la palabra reservada `import` no lo olvides. +3. El proyecto por defecto de **SwiftUI** nos entrega 2 estructuras cuyo codigo es el siguiente: +``` swift +struct ContentView: View { + var body: some View { + Text("Hello World") + } +} + +struct ContentView_Preview: PreviewProvider { + static var previews: some View { + ContentView() + } +} +``` +Como puedes observar tenemos la primera estructura cuyo nombre es **ContentView** que se va a conformar al protocolo `View` y la segunda estructura llamada **ContentView_Preview** se va a conformar a `PreviewProvider`, la razon de ser de estas estructuras es muy sencilla, en la primera vamos a crear una vista y el contenido de dicha vista, en este caso solamente tenemos un texto con la palabra *Hello World* dentro de nuestra funcion `Text()`; la segunda estructura declara un *preview* donde vamos a mostrar la vista que anteriormente creamos, por lo tanto en el cuerpo de la estructura **ContentView_Preview** tenemos que poner el nombre de la estructura donde se encuentra nuestra vista, en este caso `ContentView()`. +4. Como verás aunque ya codificamos un poco aun nuestra vista no nos muestra nada, para poder ver en el live view del playground nuestro codigo es necesario añadir una linea más que es la razon por la cual importamos la libreria de playground, esta linea es la siguiente: +`PlaygroundPage.current.setLiveView(ContentView())`. +5. Ahora que ya completamos los pasos anteriores solamente ejecuta el codigo del playground y el live preview te mostrara una pantalla con el fondo blanco pero con nuestro *Hello World* en el centro de ella. + + + +**Principios** *Basicos* de esta ***Tecnologia*** + +asi se escribe la palabra reservada `func () {}` + +```swift +let a: String = "¿Como estas?" +``` +> SwiftUI será el futuro de las tecnologias moviles + + From 15254eca0a991a2682aeae55c4a64df785941f32 Mon Sep 17 00:00:00 2001 From: Cesar VIMac Date: Mon, 13 Jan 2020 20:25:23 -0600 Subject: [PATCH 2/9] =?UTF-8?q?a=C3=B1adiendo=20definicion=20de=20Stacks?= =?UTF-8?q?=20con=20explicacion?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- posts/SwiftUI.md | 74 +++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 67 insertions(+), 7 deletions(-) diff --git a/posts/SwiftUI.md b/posts/SwiftUI.md index f699ca3..22e22c1 100644 --- a/posts/SwiftUI.md +++ b/posts/SwiftUI.md @@ -1,13 +1,15 @@ # SwiftUI +  ![SWIFTUI](https://i.udemycdn.com/course/240x135/2397342_68bf_2.jpg) - +  ### Primeros pasos - +  1. Abre un playground en Xcode puedes nombrarlo "PruebaSwiftUI" 2. Antes de empezar con los ejemplos de codigo debemos de importar algunas librerias que nos permitiran trabajar con la vista previa y con el framework de **SwiftUI** estas librerias son: `SwiftUI ` y `PlaygraundSupport `, acompañadas siempre de la palabra reservada `import` no lo olvides. 3. El proyecto por defecto de **SwiftUI** nos entrega 2 estructuras cuyo codigo es el siguiente: +  ``` swift struct ContentView: View { var body: some View { @@ -21,20 +23,78 @@ struct ContentView_Preview: PreviewProvider { } } ``` +  Como puedes observar tenemos la primera estructura cuyo nombre es **ContentView** que se va a conformar al protocolo `View` y la segunda estructura llamada **ContentView_Preview** se va a conformar a `PreviewProvider`, la razon de ser de estas estructuras es muy sencilla, en la primera vamos a crear una vista y el contenido de dicha vista, en este caso solamente tenemos un texto con la palabra *Hello World* dentro de nuestra funcion `Text()`; la segunda estructura declara un *preview* donde vamos a mostrar la vista que anteriormente creamos, por lo tanto en el cuerpo de la estructura **ContentView_Preview** tenemos que poner el nombre de la estructura donde se encuentra nuestra vista, en este caso `ContentView()`. 4. Como verás aunque ya codificamos un poco aun nuestra vista no nos muestra nada, para poder ver en el live view del playground nuestro codigo es necesario añadir una linea más que es la razon por la cual importamos la libreria de playground, esta linea es la siguiente: `PlaygroundPage.current.setLiveView(ContentView())`. 5. Ahora que ya completamos los pasos anteriores solamente ejecuta el codigo del playground y el live preview te mostrara una pantalla con el fondo blanco pero con nuestro *Hello World* en el centro de ella. +  +### Modificadores +  +**SwiftUI** nos ofrece "modificadores" para poder customizar nuestra vista como mejor se acomode acorde a las necesidades del proyecto. Algunos de los modificadores basicos son: +``` +font() +background() +clipShape +padding() +foregroundColor() +``` +Estos "modificadores" los podremos aplicar usando el operador "." antes de cada sentencia, es decir si quieres cambiar el color de un texto tu sintaxis debera ser `.foregroundColor(.pink)` con esto nos damos cuenta que la palabra `UIColor()` que se usaba en los storyboards ya no es necesaria en **SwiftUI**. -**Principios** *Basicos* de esta ***Tecnologia*** - -asi se escribe la palabra reservada `func () {}` +Una cosa más que debes saber es que los "Modificadores" deben de ir en el cuerpo de la estructura del **ContentView** un ejemplo es el siguiente: +  +```swift +struct ContentView: View { + var body: some View { + Text("Hello World") + .bold() + .italic() + .foregroundColor(.pink) + .font(.title) + } +} +struct ContentView_Preview: PreviewProvider { + static var previews: some View { + ContentView() + } +} +``` +Te aconsejo probar el codigo para que puedas ver el cambio en el **canvas**. +  +### Layout Views +  +En **SwiftUI** como ya te diste cuenta es muy facil agregar y modificar un elemento, pero aqui viene un poco la complejidad de este framework, dentro del cuerpo de la estructura solo se puede agregar un elemento, es decir hasta ahora solo teniamos el `Text("Hello World")` en la estructura del **ContentView** pero si intentamos agregar otro elemento Xcode no lo permitirá ya que solo se puede albergar un elemento dentro del body, es ahi donde surge la interrogante ¿Como puedo agregar mas elementos a mi vista?. Bueno esto se hace atravez de contenedores, llamados **VStack** el cual va a actuar como un elemento dentro del body con lo cual cumplimos con la regla de solo tener un elemento dentro de la estructura. +Para ejemplificar veamos su codigo. +  ```swift -let a: String = "¿Como estas?" +struct ContentView: View { + var body: some View { + VStack{ + Text("Hola Mundo") + } + } +} ``` -> SwiftUI será el futuro de las tecnologias moviles +  +Hasta ahora lo unico que emos agregado es el **VStack** y dentro de el la funcion `Text()` pero nuestro *canvas* no cambiara en nada, ahora viene lo interesante, agrega otra funcion `Text()` dentro del **VStack** y ve lo que pasa. + +Si lo has intentado te habrás dado cuenta que agrega el texto de tu nueva funcion `Text()` justo de bajo de la que teniamos antes, bueno esto se debe a que nuestro **VStack** actua como un solo contenedor que va a contener a los stack de tus funciones `Text()` haciendose pasar por un solo contenedor ante Xcode, pero ¿Por que los añade de bajo?, bueno aqui va la explicacion: + +Hay tres tipos de **Stack** basicos : +* VStack (vertical Stack) +* HStack (horizontal Stack) +* ZStack (Stack de profundidad) + +  +VStack| HStack | Zstack +---|---|--- +Agrega elementos de forma vertical uno arriba de otro en el orden en que sean declarados. | Agrega elementos de forma horizontal uno al lado de otro en el orden en que sean declarados. | Este es el mas complejo de entender de los 3 pero la definicion sería que tenemos un stack que agrega elementos de forma uno sobre de otro en el orden en que sean declarados. + +  + +> SwiftUI será el futuro de las tecnologias moviles From 7cb1e216e754472d913a314643206dc0e09418cb Mon Sep 17 00:00:00 2001 From: Cesar VIMac Date: Mon, 13 Jan 2020 20:32:25 -0600 Subject: [PATCH 3/9] =?UTF-8?q?a=C3=B1adiendo=20cambios=20para=20legibilid?= =?UTF-8?q?ad?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- posts/SwiftUI.md | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/posts/SwiftUI.md b/posts/SwiftUI.md index 22e22c1..83203a8 100644 --- a/posts/SwiftUI.md +++ b/posts/SwiftUI.md @@ -1,15 +1,21 @@ # SwiftUI   + ![SWIFTUI](https://i.udemycdn.com/course/240x135/2397342_68bf_2.jpg) +   + ### Primeros pasos +   1. Abre un playground en Xcode puedes nombrarlo "PruebaSwiftUI" 2. Antes de empezar con los ejemplos de codigo debemos de importar algunas librerias que nos permitiran trabajar con la vista previa y con el framework de **SwiftUI** estas librerias son: `SwiftUI ` y `PlaygraundSupport `, acompañadas siempre de la palabra reservada `import` no lo olvides. 3. El proyecto por defecto de **SwiftUI** nos entrega 2 estructuras cuyo codigo es el siguiente: +   + ``` swift struct ContentView: View { var body: some View { @@ -24,7 +30,11 @@ struct ContentView_Preview: PreviewProvider { } ```   + Como puedes observar tenemos la primera estructura cuyo nombre es **ContentView** que se va a conformar al protocolo `View` y la segunda estructura llamada **ContentView_Preview** se va a conformar a `PreviewProvider`, la razon de ser de estas estructuras es muy sencilla, en la primera vamos a crear una vista y el contenido de dicha vista, en este caso solamente tenemos un texto con la palabra *Hello World* dentro de nuestra funcion `Text()`; la segunda estructura declara un *preview* donde vamos a mostrar la vista que anteriormente creamos, por lo tanto en el cuerpo de la estructura **ContentView_Preview** tenemos que poner el nombre de la estructura donde se encuentra nuestra vista, en este caso `ContentView()`. + +  + 4. Como verás aunque ya codificamos un poco aun nuestra vista no nos muestra nada, para poder ver en el live view del playground nuestro codigo es necesario añadir una linea más que es la razon por la cual importamos la libreria de playground, esta linea es la siguiente: `PlaygroundPage.current.setLiveView(ContentView())`. 5. Ahora que ya completamos los pasos anteriores solamente ejecuta el codigo del playground y el live preview te mostrara una pantalla con el fondo blanco pero con nuestro *Hello World* en el centro de ella. @@ -44,7 +54,9 @@ foregroundColor() Estos "modificadores" los podremos aplicar usando el operador "." antes de cada sentencia, es decir si quieres cambiar el color de un texto tu sintaxis debera ser `.foregroundColor(.pink)` con esto nos damos cuenta que la palabra `UIColor()` que se usaba en los storyboards ya no es necesaria en **SwiftUI**. Una cosa más que debes saber es que los "Modificadores" deben de ir en el cuerpo de la estructura del **ContentView** un ejemplo es el siguiente: +   + ```swift struct ContentView: View { var body: some View { @@ -63,12 +75,18 @@ struct ContentView_Preview: PreviewProvider { } ``` Te aconsejo probar el codigo para que puedas ver el cambio en el **canvas**. +   + ### Layout Views +   + En **SwiftUI** como ya te diste cuenta es muy facil agregar y modificar un elemento, pero aqui viene un poco la complejidad de este framework, dentro del cuerpo de la estructura solo se puede agregar un elemento, es decir hasta ahora solo teniamos el `Text("Hello World")` en la estructura del **ContentView** pero si intentamos agregar otro elemento Xcode no lo permitirá ya que solo se puede albergar un elemento dentro del body, es ahi donde surge la interrogante ¿Como puedo agregar mas elementos a mi vista?. Bueno esto se hace atravez de contenedores, llamados **VStack** el cual va a actuar como un elemento dentro del body con lo cual cumplimos con la regla de solo tener un elemento dentro de la estructura. Para ejemplificar veamos su codigo. +   + ```swift struct ContentView: View { var body: some View { @@ -79,6 +97,7 @@ struct ContentView: View { } ```   + Hasta ahora lo unico que emos agregado es el **VStack** y dentro de el la funcion `Text()` pero nuestro *canvas* no cambiara en nada, ahora viene lo interesante, agrega otra funcion `Text()` dentro del **VStack** y ve lo que pasa. Si lo has intentado te habrás dado cuenta que agrega el texto de tu nueva funcion `Text()` justo de bajo de la que teniamos antes, bueno esto se debe a que nuestro **VStack** actua como un solo contenedor que va a contener a los stack de tus funciones `Text()` haciendose pasar por un solo contenedor ante Xcode, pero ¿Por que los añade de bajo?, bueno aqui va la explicacion: @@ -96,5 +115,4 @@ Agrega elementos de forma vertical uno arriba de otro en el orden en que sean de   -> SwiftUI será el futuro de las tecnologias moviles - +> SwiftUI será el futuro de las tecnologias moviles \ No newline at end of file From 937b4bb5d3af7915501610cde48cdf7cdf0e98bf Mon Sep 17 00:00:00 2001 From: Cesar VIMac Date: Mon, 13 Jan 2020 22:48:09 -0600 Subject: [PATCH 4/9] =?UTF-8?q?a=C3=B1adiendo=20Stacks=20anidados=20y=20el?= =?UTF-8?q?ementos=20(por=20terminar)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- posts/SwiftUI.md | 63 +++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 62 insertions(+), 1 deletion(-) diff --git a/posts/SwiftUI.md b/posts/SwiftUI.md index 83203a8..a8a4a2e 100644 --- a/posts/SwiftUI.md +++ b/posts/SwiftUI.md @@ -38,10 +38,13 @@ Como puedes observar tenemos la primera estructura cuyo nombre es **ContentView* 4. Como verás aunque ya codificamos un poco aun nuestra vista no nos muestra nada, para poder ver en el live view del playground nuestro codigo es necesario añadir una linea más que es la razon por la cual importamos la libreria de playground, esta linea es la siguiente: `PlaygroundPage.current.setLiveView(ContentView())`. 5. Ahora que ya completamos los pasos anteriores solamente ejecuta el codigo del playground y el live preview te mostrara una pantalla con el fondo blanco pero con nuestro *Hello World* en el centro de ella. +   ### Modificadores +   + **SwiftUI** nos ofrece "modificadores" para poder customizar nuestra vista como mejor se acomode acorde a las necesidades del proyecto. Algunos de los modificadores basicos son: ``` font() @@ -109,10 +112,68 @@ Hay tres tipos de **Stack** basicos :   -VStack| HStack | Zstack +VStack| HStack | ZStack ---|---|--- Agrega elementos de forma vertical uno arriba de otro en el orden en que sean declarados. | Agrega elementos de forma horizontal uno al lado de otro en el orden en que sean declarados. | Este es el mas complejo de entender de los 3 pero la definicion sería que tenemos un stack que agrega elementos de forma uno sobre de otro en el orden en que sean declarados.   +Ahora que ya sabemos los elementos de los Stacks debemos saber que los stack tambien tienen "modificadores", un ejemplo de ellos es el siguiente: + +```swift +VStack(alignment: .leading, spacing: 30){ + Text("Hola Mundo como estas el dia de hoy") + Text("Hola Mundo2") + +} +``` + +  + +Con el codigo anterior verás como los elementos del Stack se alinean a la izquierda +y puedes probar a alinear tus elementos hacia la derecha cambiando la propiedad a `.trailing` dentro del aligment del Stack. + +  + +#### Enlazar contenedores + +Con lo visto hasta ahora probablemente piensas que **SwiftUI** es muy simple, pero ahota agregaremos otro grado de complejidad, Ya vimos que con **VStack** podemos añadir elementos verticales uno arriba de otro, pero ¿Que pasa si quiero un elemento horizontal dentro del VStack sin perder los elementos verticales que ya tengo? + +Buena pregunta, como antes lo dije, no podemos agregar dos Stacks dentro del Body por lo que debe de haber otra manera, y estas en lo correcto. Para agregar elementos de diferente forma dentro de un Stack lo que hacemos es anidar Stacks, de esta manera tendremos un codigo como el Siguiente: + + +```swift +VStack(alignment: .leading, spacing: 30){ + Text("Hola Mundo como estas el dia de hoy") + Text("Hola Mundo2") + + HStack(alignment: .center, spacing:10){ + Text("Hola Mundo") + Text("Hola Mundo2") + } +} +``` +  + +Con este cambio aplicado a nuestro proyecto nos daremos cuenta que ahora en el *canvas* tenemos nuestros primeros dos `Text()` de forma vertical y debajo de ellos los `Text()` que tenemos dentro del **HStack** alineados de forma horizontal. + +  + +### Agregar Elementos + +  + +Ya hemos aprendido la mayoria de la teoria básica que nos trae este framework como minimo para poder usarlo. Ahora solo enlistare algunas funciones que agregaran elementos a nuestros **Stack**. + +  + +- `Spacer()` - expande o da espacio entre un elemento y otro en el orden de su **Stack** +- `HStack(){ }.padding(.all)` - Genera espacio entre los elementos con cierto margen de separación apegado al espacio de neustra vista +- `` - +- `` - +- `` - +- `` - +- `` - + + > SwiftUI será el futuro de las tecnologias moviles \ No newline at end of file From a9a5a22acb9ac7f240a95e4687a569db500ed197 Mon Sep 17 00:00:00 2001 From: Cesar VIMac Date: Thu, 30 Jan 2020 01:13:22 -0600 Subject: [PATCH 5/9] =?UTF-8?q?Agregando=20explicaci=C3=B3n=20de=20los=20E?= =?UTF-8?q?stados?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- posts/SwiftUI.md | 33 ++++++++++++++++++++++++++++----- 1 file changed, 28 insertions(+), 5 deletions(-) diff --git a/posts/SwiftUI.md b/posts/SwiftUI.md index a8a4a2e..7634797 100644 --- a/posts/SwiftUI.md +++ b/posts/SwiftUI.md @@ -165,15 +165,38 @@ Con este cambio aplicado a nuestro proyecto nos daremos cuenta que ahora en el * Ya hemos aprendido la mayoria de la teoria básica que nos trae este framework como minimo para poder usarlo. Ahora solo enlistare algunas funciones que agregaran elementos a nuestros **Stack**. +* Nota: Una consideración importante es que SwiftUI solo permite 10 elementos dentro de cada Stack para evitar problemas de rendimiento, aunque si tu quieres poner 10 Stack dentro de un solo Stack la capacidad de elementos será de 100, aunque puede que tu aplicación se vea afectada en cuanto a rendimiento y posiblemente en su logica, entonces es recomendable usar solo aquellos elementos que sean importantes o sin los que tu App no pueda vivir. +   + + - `Spacer()` - expande o da espacio entre un elemento y otro en el orden de su **Stack** - `HStack(){ }.padding(.all)` - Genera espacio entre los elementos con cierto margen de separación apegado al espacio de neustra vista -- `` - -- `` - -- `` - -- `` - -- `` - +- `Text()` - Equivalente al Label en SB +- `Image("imagen")` - Añade una imagen al canvas +- `Button(){}` - Boton simple, dentro debe tener elementos para hacerlo funcional + +  + +### Estados en SwiftUI + +#### State + +¿Que es el State? + +Los **State** funcionan para poder verificar los estados de variables o de elementos de nuestro proyecto y poder cambiarlos en tiempo real despues de la interacción de un usuario con dicho elemento, para ello habrá que usar siempre `@State` antes de nuestra declaracion de la variable , la nomenclatura para esto es la siguiente: `@State var nombre = "Pedro"` el private es opcional pero se recomienda que se añada por razones que veremos mas adelante. + +#### Tipos de State + +En SwiftUI podemos tener 3 tipos de State los cuales se usan dependiendo de la cantidad de vistas en las que dicha variable se va a usar. Los tipos son los siguientes: + +`@State` - Variable que se va a usar en una vista, se recomienda que se use la palabra reservada `private`despues de la sentencia para reafirmar que nuestra variable se usara solo en la vista en la que se esta declarando. + +`@ObservedObject` - Se usa como prefijo de las variables que serán usadas por dos vistas como maximo. + +`@EnviromentObject` - Se usa como prefijo de las variables que serán usadas en todo el proyecto. + > SwiftUI será el futuro de las tecnologias moviles \ No newline at end of file From 1642ebd06ec3635f8f2bffa5364fa6239461e06a Mon Sep 17 00:00:00 2001 From: Cesar VIMac Date: Thu, 30 Jan 2020 01:14:12 -0600 Subject: [PATCH 6/9] Agregando recomendaciones y despedida --- posts/SwiftUI.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/posts/SwiftUI.md b/posts/SwiftUI.md index 7634797..d7663c8 100644 --- a/posts/SwiftUI.md +++ b/posts/SwiftUI.md @@ -198,5 +198,8 @@ En SwiftUI podemos tener 3 tipos de State los cuales se usan dependiendo de la c `@EnviromentObject` - Se usa como prefijo de las variables que serán usadas en todo el proyecto. +Con esto terminamos la introducción a SwiftUI, las explicaciones aquí vistas servirán solo como referencia, se recomienda revisar el tutorial de SwiftUI en apple.developer.com para interactual con los elementos de una mejor manera. -> SwiftUI será el futuro de las tecnologias moviles \ No newline at end of file +Al tiempo de esta redacción para la wiki de IOSLab SwiftUI lleva 9 meses de "vida" por lo que la sintaxis o elementos, así como funcionalidades o protocolos pueden llegar a cambiar. + +> "SwiftUI será el futuro de las tecnologias moviles" \ No newline at end of file From cf826a4655507f427ed98d465b681101eb3bca58 Mon Sep 17 00:00:00 2001 From: Cesar VIMac Date: Thu, 30 Jan 2020 01:41:48 -0600 Subject: [PATCH 7/9] Agregando Post de Patron Estrategia --- posts/design-pattern - Strategy.md | 41 ++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 posts/design-pattern - Strategy.md diff --git a/posts/design-pattern - Strategy.md b/posts/design-pattern - Strategy.md new file mode 100644 index 0000000..6f2801f --- /dev/null +++ b/posts/design-pattern - Strategy.md @@ -0,0 +1,41 @@ +--- +title: Patron Strategy +category: design patterns +draft: true +--- + +# Patron de diseño Strategy + +Este patrón de diseño se centra en la creencia de que un algoritmo puede atacar diferentes problemas o eventualidades adaptandose a cada caso. + +Un ejemplo clásico de este tipo de diseño es que imagines que eres un D.T de Fútbol, tu equipo tendrá diferentes estrategias a la hora de atacar, defender, cuando van ganando o cuando van perdiendo. Esto es en si el patrón de estategia, hacer "cosas diferentes" o en el caso de la programación algoritmos diferentes para cada escenario. + +la definicion formal es la siguiente: + +> Este patrón define un conjunto de algoritmos, encapsula cada uno de ellos y los hace intercambiables. Permite que el algoritmo pueda variar independientemente de los clientes que lo utilicen. + +Esto quiere decir que nuestros objetos deben estar preparados para afrontar diversos contextos sin cambiar las interacciones de estos con el cliente. + +## Modelo + +El modelo general del algoritmo es el siguiente: + +  + +![Modelo](https://codigolinea.com/wp-content/uploads/2015/03/strategy-uml.png) + +Un poco confuso al principio pero se entenderá mejor si lo simplificamos y explicamos con el siguiente ejemplo de modelo: + +  + +![Model2](https://miro.medium.com/max/1608/1*4vdmSjQVWuBF7C2ZGelfYA.png) + +  + +Imagina que tu programa va a controlar la estrategia del equipo de fútbol que mencionamos antes, entonces cada estrategia deberá ser una formación diferente representada en este caso por un algoritmo. Basándonos en las circunstancias del juego tu programa deberá elegir que algoritmo de la formación es el indicado para el momento del juego, y eso es el patrón estrategia a grandes rasgos, lo que buscamos es que un controlador o incluso el mismo usuario tome la decisión de que estrategia usar a veces sin siquiera notarlo. + +El patrón Strategy (estrategia) es una alternativa a la herencia, si estás pensando usar la herencia para poder agregar nuevos comportamientos a tus objetos, sería conveniente usar este patrón + +Si dentro de tu clase haces uso intensivo de las condicionales `if`, `else`, `switch case`, eso quiere decir que tu clase tiene asignado muchos comportamientos y/o responsabilidades, lo cual suele ser un indicador de la necesidad aplicar el patrón Strategy (estrategia), para poder encapsular estos comportamientos y delegarlos a otra clase u objeto. + +> Redacción para IOSLab \ No newline at end of file From e4cec226fd6107985df940c1d4d56580026d16d6 Mon Sep 17 00:00:00 2001 From: Cesar VIMac Date: Fri, 7 Feb 2020 22:25:42 -0600 Subject: [PATCH 8/9] Agregando etiqueta Jekill, quitando espacios no requeridos --- posts/SwiftUI.md | 57 +++++++++++++++++++++++++++++------------------- 1 file changed, 35 insertions(+), 22 deletions(-) diff --git a/posts/SwiftUI.md b/posts/SwiftUI.md index d7663c8..1951c10 100644 --- a/posts/SwiftUI.md +++ b/posts/SwiftUI.md @@ -1,20 +1,31 @@ + +--- +title: SwiftUI +category: ios +--- + # SwiftUI -  ![SWIFTUI](https://i.udemycdn.com/course/240x135/2397342_68bf_2.jpg) -  +## ¿Que es SwiftUI? + +Directo de la página de Apple tenemos la siguiente Definición: + +SwiftUI es una forma innovadora y excepcionalmente simple de crear interfaces de usuario en todas las plataformas de Apple con el poder de Swift. Cree interfaces de usuario para cualquier dispositivo Apple utilizando solo un conjunto de herramientas y API. Con una sintaxis declarativa de Swift que es fácil de leer y natural de escribir, SwiftUI funciona a la perfección con las nuevas herramientas de diseño de Xcode para mantener su código y diseño perfectamente sincronizados. La compatibilidad automática con el tipo dinámico, el modo oscuro, la localización y la accesibilidad significa que su primera línea de código SwiftUI ya es el código de interfaz de usuario más potente que jamás haya escrito. + +Aunque la definición mas simple sería que **SwiftUI** es un nuevo Framework que nos permite diseñar y desarrollar interfaces de usuario con mucho menos código y de forma declarativa. A diferencia de UIKit, que se usaba comúnmente junto con guiones gráficos, SwiftUI está completamente basado en código. + ### Primeros pasos -  1. Abre un playground en Xcode puedes nombrarlo "PruebaSwiftUI" 2. Antes de empezar con los ejemplos de codigo debemos de importar algunas librerias que nos permitiran trabajar con la vista previa y con el framework de **SwiftUI** estas librerias son: `SwiftUI ` y `PlaygraundSupport `, acompañadas siempre de la palabra reservada `import` no lo olvides. 3. El proyecto por defecto de **SwiftUI** nos entrega 2 estructuras cuyo codigo es el siguiente: -  + ``` swift struct ContentView: View { @@ -29,21 +40,21 @@ struct ContentView_Preview: PreviewProvider { } } ``` -  + Como puedes observar tenemos la primera estructura cuyo nombre es **ContentView** que se va a conformar al protocolo `View` y la segunda estructura llamada **ContentView_Preview** se va a conformar a `PreviewProvider`, la razon de ser de estas estructuras es muy sencilla, en la primera vamos a crear una vista y el contenido de dicha vista, en este caso solamente tenemos un texto con la palabra *Hello World* dentro de nuestra funcion `Text()`; la segunda estructura declara un *preview* donde vamos a mostrar la vista que anteriormente creamos, por lo tanto en el cuerpo de la estructura **ContentView_Preview** tenemos que poner el nombre de la estructura donde se encuentra nuestra vista, en este caso `ContentView()`. -  + 4. Como verás aunque ya codificamos un poco aun nuestra vista no nos muestra nada, para poder ver en el live view del playground nuestro codigo es necesario añadir una linea más que es la razon por la cual importamos la libreria de playground, esta linea es la siguiente: `PlaygroundPage.current.setLiveView(ContentView())`. 5. Ahora que ya completamos los pasos anteriores solamente ejecuta el codigo del playground y el live preview te mostrara una pantalla con el fondo blanco pero con nuestro *Hello World* en el centro de ella. -  + ### Modificadores -  + **SwiftUI** nos ofrece "modificadores" para poder customizar nuestra vista como mejor se acomode acorde a las necesidades del proyecto. Algunos de los modificadores basicos son: ``` @@ -58,7 +69,7 @@ Estos "modificadores" los podremos aplicar usando el operador "." antes de cada Una cosa más que debes saber es que los "Modificadores" deben de ir en el cuerpo de la estructura del **ContentView** un ejemplo es el siguiente: -  + ```swift struct ContentView: View { @@ -79,16 +90,16 @@ struct ContentView_Preview: PreviewProvider { ``` Te aconsejo probar el codigo para que puedas ver el cambio en el **canvas**. -  + ### Layout Views -  + En **SwiftUI** como ya te diste cuenta es muy facil agregar y modificar un elemento, pero aqui viene un poco la complejidad de este framework, dentro del cuerpo de la estructura solo se puede agregar un elemento, es decir hasta ahora solo teniamos el `Text("Hello World")` en la estructura del **ContentView** pero si intentamos agregar otro elemento Xcode no lo permitirá ya que solo se puede albergar un elemento dentro del body, es ahi donde surge la interrogante ¿Como puedo agregar mas elementos a mi vista?. Bueno esto se hace atravez de contenedores, llamados **VStack** el cual va a actuar como un elemento dentro del body con lo cual cumplimos con la regla de solo tener un elemento dentro de la estructura. Para ejemplificar veamos su codigo. -  + ```swift struct ContentView: View { @@ -99,7 +110,7 @@ struct ContentView: View { } } ``` -  + Hasta ahora lo unico que emos agregado es el **VStack** y dentro de el la funcion `Text()` pero nuestro *canvas* no cambiara en nada, ahora viene lo interesante, agrega otra funcion `Text()` dentro del **VStack** y ve lo que pasa. @@ -110,13 +121,13 @@ Hay tres tipos de **Stack** basicos : * HStack (horizontal Stack) * ZStack (Stack de profundidad) -  + VStack| HStack | ZStack ---|---|--- Agrega elementos de forma vertical uno arriba de otro en el orden en que sean declarados. | Agrega elementos de forma horizontal uno al lado de otro en el orden en que sean declarados. | Este es el mas complejo de entender de los 3 pero la definicion sería que tenemos un stack que agrega elementos de forma uno sobre de otro en el orden en que sean declarados. -  + Ahora que ya sabemos los elementos de los Stacks debemos saber que los stack tambien tienen "modificadores", un ejemplo de ellos es el siguiente: @@ -128,12 +139,12 @@ VStack(alignment: .leading, spacing: 30){ } ``` -  + Con el codigo anterior verás como los elementos del Stack se alinean a la izquierda y puedes probar a alinear tus elementos hacia la derecha cambiando la propiedad a `.trailing` dentro del aligment del Stack. -  + #### Enlazar contenedores @@ -153,21 +164,19 @@ VStack(alignment: .leading, spacing: 30){ } } ``` -  + Con este cambio aplicado a nuestro proyecto nos daremos cuenta que ahora en el *canvas* tenemos nuestros primeros dos `Text()` de forma vertical y debajo de ellos los `Text()` que tenemos dentro del **HStack** alineados de forma horizontal. -  + ### Agregar Elementos -  Ya hemos aprendido la mayoria de la teoria básica que nos trae este framework como minimo para poder usarlo. Ahora solo enlistare algunas funciones que agregaran elementos a nuestros **Stack**. * Nota: Una consideración importante es que SwiftUI solo permite 10 elementos dentro de cada Stack para evitar problemas de rendimiento, aunque si tu quieres poner 10 Stack dentro de un solo Stack la capacidad de elementos será de 100, aunque puede que tu aplicación se vea afectada en cuanto a rendimiento y posiblemente en su logica, entonces es recomendable usar solo aquellos elementos que sean importantes o sin los que tu App no pueda vivir. -  @@ -177,7 +186,7 @@ Ya hemos aprendido la mayoria de la teoria básica que nos trae este framework c - `Image("imagen")` - Añade una imagen al canvas - `Button(){}` - Boton simple, dentro debe tener elementos para hacerlo funcional -  + ### Estados en SwiftUI @@ -202,4 +211,8 @@ Con esto terminamos la introducción a SwiftUI, las explicaciones aquí vistas s Al tiempo de esta redacción para la wiki de IOSLab SwiftUI lleva 9 meses de "vida" por lo que la sintaxis o elementos, así como funcionalidades o protocolos pueden llegar a cambiar. +### ¿Por qué SwiftUI? + +Es una realidad que con la tecnología actual de hacer y diseñar apps en Apple, a los diseñadores se les hace bola entender cómo la interfaz que podamos dibujar conecta con el código. Y a los programadores se nos antoja una pereza indescriptible el tener que replicar las ideas de un diseñador que, al no ceñirse a cómo se construyen las interfaces en Apple complica en exceso nuestro trabajo. Todo son problemas. + > "SwiftUI será el futuro de las tecnologias moviles" \ No newline at end of file From a50f98a4ce579182f109e1d4b37c2f6c4fc0f038 Mon Sep 17 00:00:00 2001 From: Cesar VIMac Date: Fri, 7 Feb 2020 22:27:50 -0600 Subject: [PATCH 9/9] Agregando Definicion de SwiftUI y cambiando etiqueta --- posts/SwiftUI.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/posts/SwiftUI.md b/posts/SwiftUI.md index 1951c10..e77cafc 100644 --- a/posts/SwiftUI.md +++ b/posts/SwiftUI.md @@ -1,8 +1,7 @@ - --- -title: SwiftUI +title: Notification Center category: ios ---- +--- # SwiftUI