MAUI və ChatGPT istifadə edərək mobil tətbiq (applikasiya) yazaq

MAUI və ChatGPT istifadə edərək mobil tətbiq (applikasiya) yazaq

Publish date : 2024/03/18
215 views

MAUI Visual Studio tərəfindən multiplatform applikasiyalar hazırlamaq üçüb təqdim edilmiş freymvorkdur. Adına baxsaq (Multiplatform APP UI) bu freymvorkun təyinatı tam aydın olar. Bu dərsimizdə MAUI və ChatGPT istifadə edərək, sadə bir giriş (login) səhifəsi dizayn edəcəyik.

Əvvəlcə komputerinizdə Visual Stduio və MAUI qurmalısınız. Bundan sonra ChatGPT-yə aşağıdakı məzmunda bir istək göndərin. Alınan kodu yeni MAUI projeyə yerləşdirib icra edib nəticəyə baxın.

1. First let's make a prompt for ChatGPT

I need to create a login page for my .NET maui app project. Name it as TestLoginApp.

The page must contain the following elements:
1. A header bar displaying the icon and app name
2. Input fields  Username and Password
3. A login button
4. A signup button at the bottom
5. A footer bar displaying "ASOUI" with small fonts. Align it bottom of the page.
6. Use cool colors as you wish

Create a stylish XAML design
 

Result code here, click to open

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TestLoginApp.LoginPage">

    <!-- Header Bar -->
    <StackLayout BackgroundColor="#2196F3" VerticalOptions="Start" HorizontalOptions="FillAndExpand">
        <Grid Padding="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image Grid.Column="0" Source="icon.png" HeightRequest="30" VerticalOptions="Center"/>
            <Label Grid.Column="1" Text="TestLoginApp" TextColor="White" FontSize="20" FontAttributes="Bold" VerticalOptions="Center"/>
        </Grid>
    </StackLayout>

    <!-- Content -->
    <StackLayout Padding="20" Spacing="20">
        <!-- Username Entry -->
        <Entry Placeholder="Username" />

        <!-- Password Entry -->
        <Entry Placeholder="Password" IsPassword="True" />

        <!-- Login Button -->
        <Button Text="Login" BackgroundColor="#2196F3" TextColor="White" />

        <!-- Signup Button -->
        <Button Text="Sign Up" BackgroundColor="#4CAF50" TextColor="White" />

        <!-- Footer Bar -->
        <StackLayout BackgroundColor="#EEEEEE" VerticalOptions="EndAndExpand" HorizontalOptions="FillAndExpand">
            <Label Text="ASOUI" FontSize="10" TextColor="Gray" HorizontalTextAlignment="Center"/>
        </StackLayout>
    </StackLayout>

</ContentPage>

 

İndi isə gəlin applikasiyamız üçün logo yerləşdirik. Hazır logomuzu 
Solution Explorer->Resource->Images qovluğuna yerləşdirib, kodumuzda faylın adını logomuzun adı ilə eyniləşdirək. 

Kodda bu hissədə olmalıdır şəklin adı: <Image Grid.Column="0" Source="icon.png" HeightRequest="30" VerticalOptions="Center"/>

 

 

https://www.youtube.com/watch?v=Z3B-kHrZXso

Comments

Add comment