> For the complete documentation index, see [llms.txt](https://ajgallego.gitbook.io/ionic/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ajgallego.gitbook.io/ionic/basicos/basicos_primer_proyecto.md). # Nuestro primer proyecto En esta sección vamos a ver los primeros pasos que tenemos que seguir para crear un proyecto: 1. Usar el *clic* de Ionic para crear el proyecto. 2. Añadir la plataforma para la que vamos a compilar. 3. Compilar y ejecutar el proyecto en un navegador, emulador o dispositivo real. En las siguientes secciones se detallan cada uno de estos pasos. ## 1. Crear un nuevo proyecto Ionic facilita la creación de proyectos usando su intérprete de línea de comandos (*cli*), mediante el cual podremos generar proyectos en "blanco" (en el que la primera pantalla esté vacía) para empezar a programar su contenido desde cero. Para crear un proyecto tenemos que escribir el siguiente comando en un terminal: ``` $ ionic start myApp blank ``` Al ejecutar este comando se creará una carpeta llamada "myApp" con el contenido del nuevo proyecto de Ionic. Además el código de la aplicación incluirá una primera pantalla vacía, en la cual podremos empezar a escribir nuestro código. El *cli* de Ionic también permite generar proyectos con algo de contenido para no partir desde cero: ``` $ ionic start myApp tabs $ ionic start myApp sidemenu ``` Los cuales generarían respectivamente un proyecto de Ionic con la navegación mediante pestañas o con un menú lateral. En la imagen inferior se puede ver un ejemplo de estos tres tipos: ![](/files/-LwrBW8npZjAiACuB4Xu) ## 2. Añadir las plataformas destino Como siguiente paso tendríamos que añadir las plataformas para las cuales queremos compilar. Ionic (con la ayuda de Cordova) permite generar código para multitud de plataformas, entre ellas están Android, iOS, Amazon Fire OS, Blackberry 10, navegador, Firefox OS, Ubuntu, WebOS, Windows Phone 8 y Windows. Las posibles plataformas para las que podemos generar dependerán del sistema operativo que utilicemos, por ejemplo, para iOS solo podremos compilar desde un Mac. En general soporta las siguientes combinaciones: | | Mac | Linux | Windows | | --------------- | --- | ----- | ------- | | iOS | x | | | | Amazon Fire OS | x | x | x | | Android | x | x | x | | BlackBerry 10 | x | x | x | | Navegador | x | x | x | | Ubuntu | | x | | | Windows Phone 8 | | | x | | Windows | | | x | | Firefox OS | x | x | x | Para añadir una plataforma para la cual queremos compilar nuestro proyecto usaremos el siguiente comando: ```bash $ ionic platform add ``` Por ejemplo, para añadir la plataforma de compilación Android usaríamos: ```bash $ ionic platform add android ``` Para ver un listado de las plataformas instaladas y las disponibles simplemente tenéis que ejecutar: ```bash $ ionic platform ``` El código de las plataformas se añadirá dentro de la carpeta `platforms` del proyecto. Dentro de esta carpeta se copiará y compilará nuestro proyecto, generando las aplicaciones compiladas. Pero todo esto se realizará mediante comandos de Ionic, en ningún caso tenemos que modificar manualmente el código de esta carpeta. Para más información podéis consultar: ## 3. Compilar y ejecutar el proyecto en un navegador, emulador o dispositivo real. Para ejecutar el proyecto tenemos tres opciones: abrirlo en el navegador, emularlo o ejecutarlo en un terminal real. Según lo que queramos hacer nos puede interesar una opción un otra. Abrirlo en una navegador sería la opción más rápida y la más recomendable durante el desarrollo. Sin embargo, si usamos características nativas del dispositivo y queremos probarlas no podremos usar el navegador y tendremos que abrirlo en un emulador o dispositivo real. ### 3.1. Abrir en el navegador Para abrir nuestro proyecto en un navegador para poder ver y depurar lo que vamos haciendo, simplemente tenemos que ejecutar el siguiente comando en un terminal en la raíz del proyecto: ```bash $ ionic serve ``` Este terminal lo tenemos que dejar abierto mientras que estemos trabajando para que funcione el servidor. Al ejecutarlo nos mostrará el siguiente texto por pantalla: ```bash Running dev server: http://localhost:8100 Ionic server commands, enter: restart or r to restart the client app from the root goto or g and a url to have the app navigate to the given url consolelogs or c to enable/disable console log output serverlogs or s to enable/disable server log output quit or q to shutdown the server and exit ``` Como se puede ver en las instrucciones el servidor se creara en la URL `http://localhost:8100/`. Automáticamente se nos tendría que abrir una ventana del navegador en esta dirección, si no se abre también podemos poner la dirección manualmente. Con cada cambio que hagamos en el código del proyecto se recargará automáticamente el contenido del navegador. Si no funcionara por cualquier razón podéis escribir `restart` o `r` en el terminal. Para parar el servidor simplemente tendremos que escribir `quit` o `q` en el terminal. Como opción podemos añadir el parámetro `--lab` en la llamada (`$ ionic serve --lab`) que nos mostrará como quedaría la aplicación a la vez para Android y para iOS. ### 3.2. Emular o instalar en un dispositivo real Ionic también permite emular o ejecutar el proyecto en un dispositivo real. Para esta opción primero tendremos que haber añadido una plataforma como vimos en el paso 2, en otro caso daría error. Para emular un proyecto simplemente tendríamos que escribir en un terminal: ```bash $ ionic emulate ``` Donde `` es la plataforma para la que queremos emular. Por ejemplo para emular en Android escribiríamos: ```bash $ ionic emulate android ``` Y para instalar y ejecutar en un dispositivo real se hace de igual forma pero usando el comando `run`: ```bash $ ionic run ``` En ambos casos podemos añadir la opción `--livereload` o `-l`, de esta forma tras cada cambio que hagamos en el código se recargará la emulación o la aplicación en el dispositivo. Por ejemplo: ```bash $ ionic run -l ios ``` Esta opción todavía está en beta así que es normal que a veces de problemas y no funcione bien. Además también podemos añadir en ambos casos la opción `--consolelogs` or `-c` para ver en el terminal la información que imprime por consola la aplicación. Por último mencionar que si no queremos ejecutar el proyecto y solamente queremos compilarlo y generar el código destino de la plataforma podemos usar la opción `build` indicando también la plataforma de compilación: ```bash $ ionic build ``` Si no indicamos la plataforma este comando compilaría el proyecto para todas las plataformas que tengamos instaladas. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://ajgallego.gitbook.io/ionic/basicos/basicos_primer_proyecto.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.