**Course Title:** Building Cross-Platform Mobile Applications with Ionic **Section Title:** Introduction to Ionic Framework **Topic:** Set up the Ionic development environment and create a basic Ionic application with a simple user interface.(Lab topic) ### Overview In this lab topic, we will walk through the process of setting up the Ionic development environment and creating a basic Ionic application with a simple user interface. By the end of this lab, you will have a solid understanding of how to set up the development environment and create a basic Ionic application. ### Setting Up the Development Environment Before we begin, ensure you have Node.js (LTS or Current) installed on your machine. You can download Node.js from the official Node.js website: [https://nodejs.org/](https://nodejs.org/). To set up the Ionic development environment, follow these steps: 1. **Install the Ionic CLI**: Open a terminal or command prompt and run the following command: ```bash npm install -g @ionic/cli ``` This command installs the Ionic CLI globally on your machine. 2. **Verify the Ionic CLI installation**: Run the following command to verify the Ionic CLI installation: ```bash ionic --version ``` If the installation was successful, you should see the version number of the Ionic CLI. 3. **Create a new Ionic project**: Run the following command to create a new Ionic project: ```bash ionic start myApp tabs ``` This command creates a new Ionic project named `myApp` using the `tabs` template. You can choose from various templates, including `blank`, `sideMenu`, `tabs`, and more. 4. **Navigate to the project directory**: Run the following command to navigate to the project directory: ```bash cd myApp ``` ### Creating a Basic Ionic Application with a Simple User Interface Once you have created the new Ionic project, you can start building the application. **App Overview** For this example, we will create a simple Ionic application that displays a login form. **Directory Structure** The Ionic project directory structure is as follows: ```javascript myApp/ ├── node_modules/ ├── src/ │ ├── app/ │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ └── app.module.ts │ ├── assets/ │ │ └── ionic.png │ ├── environments/ │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ └── styles.css ├── ionic.config.json ├── package.json └── tsconfig.json ``` **Creating a Simple User Interface** To create a simple user interface, we will update the `app.component.html` file. Open the file and replace the existing code with the following code: ```html <ion-app> <ion-content> <ion-card> <ion-card-header> <ion-card-title>Login</ion-card-title> </ion-card-header> <ion-card-content> <ion-item> <ion-label position="floating">Username</ion-label> <ion-input type="text"></ion-input> </ion-item> <ion-item> <ion-label position="floating">Password</ion-label> <ion-input type="password"></ion-input> </ion-item> <ion-button expand="full" color="primary">Login</ion-button> </ion-card-content> </ion-card> </ion-content> </ion-app> ``` This code creates a simple login form with a username and password input field. **Running the Application** To run the application, navigate to the project directory and run the following command: ```bash ionic serve ``` This command starts the development server, and you can access the application in your web browser at `http://localhost:8100`. **Conclusion** In this lab topic, we covered the process of setting up the Ionic development environment and creating a basic Ionic application with a simple user interface. You can build upon this foundation to create more complex applications using Ionic. If you have any questions or need help, please leave a comment below. **What's Next?** In the next topic, we will explore Ionic UI components and their usage.