Skip to content

Commit d22dce8

Browse files
icebeam7icebeam7
authoredJul 26, 2023
Translate Part 1 to Spanish
1 parent 7b1c965 commit d22dce8

File tree

1 file changed

+181
-0
lines changed

1 file changed

+181
-0
lines changed
 

‎Part1-GettingStarted/README-es.md

+181
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
# Parte 1 - Primeros Pasos
2+
Comencemos con una descripción general básica de .NET MAUI y cómo se estructuran los proyectos.
3+
4+
### Crea una nueva Solución en Visual Studio
5+
1. Abre **Visual Studio 2022** y haz clic en la opción **Crear un nuevo proyecto**.
6+
7+
![Creando un nuevo proyecto en Visual Studio 2022](/Art/01-OpenVS.png)
8+
9+
2. Elige la plantilla de proyecto **.NET MAUI App**. Puedes buscar el término "maui" para fácilmente encontrarlo.
10+
11+
![Seleccionando la plantilla .NET MAUI App](/Art/02-SelectNetMauiTemplate.png)
12+
13+
3. Configuremos el proyecto y luego hagamos clic en **Siguiente** posteriormente:
14+
* Nombre del proyecto: **RefreshingRecipes**
15+
* Ubicación del proyecto: Se recomienda utilizar una ruta corta.
16+
17+
![Configurando un proyecto .NET MAUI](/Art/03-ConfigureProject.png)
18+
19+
4. Selecciona la versión de Framework **.NET 7.0** y haz clic en **Crear**.
20+
21+
![Seleccionando la versión de .NET framework](/Art/04-SelectNetFrameworkVersion.png)
22+
23+
Después de unos segundos, se creará una solución que contiene un proyecto. El proyecto principal **RefreshingRecipes** de tipo .NET MAUI se puede implementar en Android, iOS, macOS y Windows.
24+
25+
![Vista de la solución de la aplicación RefreshingRecipes](/Art/05-SolutionStructure.png)
26+
27+
El proyecto **RefreshingRecipes** también tiene archivos de código y páginas XAML que usaremos durante el taller.
28+
29+
Visita este [enlace](https://github.com/dotnet-presentations/dotnet-maui-workshop/blob/63c011c7dc29d50d063000714f6ee3a626a3e840/Part%200%20-%20Overview/README.md#understanding-the-net-maui-single-project) para obtener una maravillosa explicación sobre la estructura de proyecto único de .NET MAUI. Cada carpeta (Resources, Fonts, Images, ...) se explica en detalle y el archivo de inicio (MauiProgram.cs) se cubre a fondo.
30+
31+
### Agrega una nueva vista
32+
Ahora vamos a crear una nueva vista que se modificará para mostrar información de nuestra propia aplicación.
33+
34+
1. En el **Explorador de Soluciones**, haz clic con el botón derecho en el nombre del proyecto y elige la opción **Agregar > Nueva carpeta**, luego asígnale el nombre **Views**.
35+
36+
![Agregando una nueva carpeta](/Art/06-AddNewFolder.png)
37+
38+
2. Haz clic derecho en la carpeta **Views** y elige la opción **Agregar > Nuevo elemento**.
39+
40+
![Agregando un nuevo elemento](/Art/07-AddNewItem.png)
41+
42+
3. Selecciona la categoría **.NET MAUI** y haz clic en la plantilla **.NET MAUI ContentPage (XAML)**. Nómbralo **RecipeListView.xaml**.
43+
44+
![Agregando una nueva página de contenido](/Art/08-AddNewContentPage.png)
45+
46+
Puedes observar que se han agregado dos nuevos elementos a la carpeta **Views**: un archivo **XAML** y un archivo **C#**.
47+
48+
![Contenido de la carpeta Views](/Art/09-ViewsFolderContent.png)
49+
50+
### Agregando información a la vista
51+
Vamos a mostrar una vista básica de una bebida refrescante que incluye una imagen, su nombre y un botón que luego se utilizará para compartir información sobre la bebida.
52+
53+
1. Antes de eso, agreguemos una imagen a nuestro proyecto. Desde la carpeta [Resources](/Resources/) ubicada en este repositorio, descarga la imagen [smoothie.png](/Resources/smoothie.png).
54+
55+
![Un refrescante smoothie](/Resources/smoothie.png)
56+
57+
2. En el Explorador de soluciones, abre la carpeta **Resources** y haz clic con el botón derecho en la subcarpeta Images, elige la opción **Agregar > Elemento existente**:
58+
59+
![Agregando un elemento existente](/Art/10-AddExistingItem.png)
60+
61+
3. Selecciona el archivo **smoothie.png** que descargaste. Es posible que debas seleccionar la opción **Todos los archivos (*.*)** para poder encontrar la imagen. Haz clic en el botón **Agregar**.
62+
63+
![Agregando una imagen](/Art/11-AddImage.png)
64+
65+
La imagen ha sido añadida a nuestro proyecto.
66+
67+
![Nuevo recurso añadido al proyecto](/Art/12-NewResource.png)
68+
69+
4. Haz doble clic en el archivo **RecipeListView.xaml** para abrirlo. El editor muestra el código XAML, que representa la interfaz de usuario que se presenta cuando se ejecuta la aplicación.
70+
71+
![Contenido inicial de RecipeListView.xaml](/Art/13-InitialContent.png)
72+
73+
5. Reemplaza el código del elemento **VerticalStackLayout** con el siguiente contenido:
74+
75+
```xaml
76+
<VerticalStackLayout Margin="10" Spacing="10">
77+
<Image WidthRequest="600"
78+
HeightRequest="400"
79+
Source="smoothie.png"
80+
Aspect="AspectFill"/>
81+
82+
<Label Text="Raspberry smoothie"
83+
FontSize="Medium"
84+
HorizontalOptions="Center"
85+
/>
86+
87+
<Button Text="Share"
88+
WidthRequest="400"
89+
x:Name="ShareButton"/>
90+
</VerticalStackLayout>
91+
```
92+
93+
¿Qué se agregó en el código?
94+
95+
* El elemento **VerticalStackLayout** organiza vistas (controles) internas en una pila unidimensional verticalmente. Tiene un margen de 10 unidades y la cantidad de espacio entre cada control interno también es de 10 unidades.
96+
97+
* Un control **Image** muestra un archivo de imagen al que hace referencia el elemento **Source**, con el tamaño específicado (ancho y alto). **AspectFill** redimensiona la imagen para que llene el área de visualización mientras conserva la relación de aspecto.
98+
99+
* Un control **Label** muestra un texto con el contenido, el tamaño de fuente y la posición especificados.
100+
101+
* Un control **Button** muestra un botón con el ancho y el contenido designados. También incluye un identificador para uso posterior en el código C# asociado.
102+
103+
104+
Como referencia, así es como debería verse el archivo **RecipeListView.xaml**:
105+
106+
![Código XAML de RecipeListView](/Art/14-RecipeListViewXAMLCode.png)
107+
108+
### Agregando funcionalidad a la vista
109+
Ahora, agreguemos algo de funcionalidad a esta página. Abre el archivo **RecipeListView.xaml.cs**. El editor muestra el código C#, que se ejecuta cuando se presenta la página asociada en la aplicación. En este momento, solo contiene un constructor de clase:
110+
111+
![Contenido inicial de RecipeListView.xaml.cs](/Art/15-InitialContent.png)
112+
113+
1. Debajo de la llamada al método **InitializeComponent()** (y aún como parte del constructor **RecipeListView**), agrega el siguiente código que permite al usuario compartir información sobre esta receta con otra aplicación:
114+
115+
```csharp
116+
ShareButton.Clicked += async (s, a) =>
117+
{
118+
await Share.Default.RequestAsync(new ShareTextRequest
119+
{
120+
Text = "Enjoy a refreshing Raspberry smoothie.",
121+
Title = "Raspberry smoothie recipe"
122+
});
123+
};
124+
```
125+
126+
Como referencia, así es como debería verse el archivo **RecipeListView.xaml.cs**:
127+
128+
![Código C# de RecipeListView.xaml.cs](/Art/16-RecipeListViewCSharpCode.png)
129+
130+
### Establece la vista como el elemento inicial
131+
Finalmente, configuremos la página inicial que se mostrará cuando el usuario abra la aplicación.
132+
133+
1. Abre el archivo **AppShell.xaml**.
134+
135+
2. Agrega un nuevo espacio de nombres en la sección superior del archivo. Utiliza el identificador **views** e incluye una referencia a la ruta/espacio de nombres de **Views**.
136+
137+
```xaml
138+
<Shell
139+
...
140+
xmlns:local="clr-namespace:RefreshingRecipes"
141+
xmlns:views="clr-namespace:RefreshingRecipes.Views"
142+
Shell.FlyoutBehavior="Disabled">
143+
```
144+
145+
3. Edita el elemento **ShellContent** para que haga referencia a la vista **RecipeListView** que creamos con anterioridad.
146+
147+
```xaml
148+
<ShellContent
149+
Title="Home"
150+
ContentTemplate="{DataTemplate views:RecipeListView}"
151+
Route="Recipes" />
152+
```
153+
154+
4. Guarda el archivo.
155+
156+
### Ejecuta la aplicación
157+
(Instrucciones tomadas de este [enlace](https://github.com/dotnet-presentations/dotnet-maui-workshop/blob/main/Part%201%20-%20Displaying%20Data/README.md#run-the-app))
158+
Asegúrate de tener la configuración correcta en tu equipo para poder implementar y depurar en las diferentes plataformas:
159+
160+
* [Configuración del emulador de Android](https://docs.microsoft.com/dotnet/maui/android/emulator/device-manager)
161+
* [Configuración de Windows para desarrollo](https://docs.microsoft.com/dotnet/maui/windows/setup)
162+
163+
1. En Visual Studio, configura Android o Windows app como el proyecto de inicio: selecciona del menú desplegable en el menú de depuración y cambia el 'Framework'
164+
165+
![Visual Studio debug dropdown showing multiple frameworks](/Art/17-SelectFramework.png)
166+
167+
2. En Visual Studio, haz click en el botón "Depurar" o selecciona Herramientas -> Iniciar Depuración
168+
- Si tienes algún problema, consulta las guías de configuración para la plataforma seleccionada
169+
170+
171+
Ejecutar la aplicación dará como resultado una vista que muestra información sobre una bebida:
172+
173+
Android:
174+
175+
![Aplicación ejecutándose en Android](/Art/18-AppRunning.png)
176+
177+
Windows:
178+
179+
![Aplicación ejecutándose en Windows](/Art/19-AppRunningWindows.png)
180+
181+
¡Felicidades! ¡Has terminado la Parte 1! Continuemos y aprendamos a organizar los elementos de la interfaz de usuario en la [Parte 2](/Part2-UIDesign/README-es.md).

0 commit comments

Comments
 (0)
Please sign in to comment.