# Plateau Studio Guide

Start developing applications quickly and efficiently in Plateau Studio by following the steps below.

To begin with Plateau Studio, start by creating an account and signing in. Then, either create your organization ([LINK]) or join an existing one. If you're unsure how to establish and manage your organization, don't worry! Our comprehensive guides will walk you through the process. Click See more ([LINK]) to explore further.

## Prerequisite
GİRİŞ SEVİYESİNDE YAZILIM BİLGİSİ - Önerebileceğimiz eğitimler:
TYPESCRIPT BİLGİSİ - Önerebileceğimiz eğitim:
RESPONSIVE WEB DESIGN BİLGİSİ - Önerebileceğimiz eğitim:
- Pre-programming için buraya tıklayabilirsiniz.
- Yazılım terimlerinin anlamları için buraya tıklayabilirsiniz.
- Introduction to TypeScript Development için buraya tıklayabilirsiniz.
- Responsive Web Design için buraya tıklayabilirsiniz

## Create Your App

* **Define Your App Pages:** Begin by determining the pages of your application. Decide whether to utilize Block Components ([LINK]) or, if your project requires specialized components, Native Components ([LINK]).

* **Create Pages and Upload Visuals:** Create your pages, upload visuals for their designs, and utilize a Folder Structure ([LINK]) for easy management of your application pages.

* **Set Global/Standard/Shared Styles:** Establish styles that are consistent across your application by defining them in Settings > Theme interface. Implement these styles across your pages as needed.

* **Utilize Styled Components:** Streamline your page designs by identifying components that will be consistently used throughout your application. Create a custom set of **Styled Components** to expedite the design process.

## Design UI

* **Create Block Components:** Start by defining the UI screens according to your project requirements. Consider the application flow and desired user interactions. Determine the use of **Block Components** for more efficient page rendering.

* **Adjust UI Layout / Responsive:** After creating your pages, use **Container components such as Row, Col, and Card** to construct the page layout ([LINK]). Utilize the Layout properties in the Style tab for responsive design, adjusting page layouts for different resolutions.

**Note for mobile usage:**

** Be careful to design the components on the screen to be contained within no more than 1 or 2 VContainers. (This may vary depending on the cases).

* **Drag&Drop Components:** Add the necessary components to your UI screens. Choose from a wide range of pre-built Basic components or from Your App Components. If you need custom ones to fit your needs use Block Components(LINK) or Native Components(LINK). (birlestir/kisalt)
* **Drag & Drop Components:** Populate your UI screens with necessary components. Choose from a variety of pre-built Basic components or select from Your App Components. For custom requirements, utilize Block Components ([LINK]) or Native Components ([LINK]).
(Nilay) Native Component doc başına Not Supported in MiniApp Development ekleyebiliriz.

* **Define Component Styles:** Customize the appearance of your components by defining their styles. Adjust colors, fonts, and other visual properties using the Style tab. Utilize ready-made styles set at the application level for flexible development ([LINK]).

* **Connect Pages:** Establish connections between different pages of your application. Define navigation paths to enable transitions between screens ([LINK - Page Routing]).

* **Add Images:** Enhance your UI by incorporating images uploaded to your application. Integrate visual elements and styles that reflect your app's identity ([LINK]).

* **Preview Your Page:** While developing the screen, preview your page by using the **Preview** button for web or view it on mobile devices using **QR codes** to ensure your page is displayed correctly across various resolutions ([LINK]).
(Nilay) Aşağıdaki mobil preview a benzer yazılabilir: Sayfanızı geliştirirken önizlemek için editör üzerindeki swich tuşunu kullanın. Mobil uygulamalar için StudioApps uygulamasını indirin ve editör üzerindeki sayfa QR scanleyerek telefonunuza bağlayın ve editor üzerinde yaptığınız değişikliği gerçek zamanlı olarak telefonunuzda görün.

## Set/Define UX Behaviours

* **Defining Props and Events:** Define props and events for the components to enable communication and interaction between them. Props allow you to pass data from parent components to child components, while events enable components to communicate changes or trigger actions.
* **Connecting Used Components:** Connect the custom components you've created to build the desired user interface. Establish relationships between components to create a cohesive and functional UI design.
* **Service Integrations:** Integrate external services into your application using Proxy settings. Configure Proxy settings to securely communicate with external APIs and services, enabling data exchange and functionality within your app.
* **Set / Get Data Storage** :
* **Data Masking**
* **Data Formatlama**
* **Validation**
* **Global Methods**

## Configure App

* **Setting Multiple Language Support:** Ensure your application is accessible to users worldwide by setting up localization. Provide translations for different languages to cater to a diverse audience.(([LINK])
* **Pipeline Settings:** Define the pipeline structure to streamline the workflow and manage data processing tasks efficiently. Set up alerts to receive notifications for important events or issues within the app.(Nilay)Servis çağırımlarında araya girip Pipeline mekanizmasının sunduğu eventleri kullanarak ile servis çağırımınızda service header gibi düzenlemelerini yapabilirsiniz.
* **Customize Your Alerts**:
* **Customize Loading Animation**: Add your lottie file to application and select from App Settings and make the configurations. (Nilay)To customize your app loading animation, add your lottie animation and select from App Settings.
* **Integrating oAuth on Login Page:** Proceed to configure IAM (Identity and Access Management) or ADFS (Active Directory Federation Services) settings in the Settings File. Configure authentication and authorization mechanisms to control access to the application and ensure secure user authentication.
* **Integrating 3rd Party Tools**

## Preview Your App
* **Assign a Start Page:** Specify a **Start Page** for your application. This initial screen serves as the entry point for users when they launch the app and is invaluable for previewing your app during the design phase.

* **Preview Your Web App:** Preview your entire application , including models and modules.
(Nilay) Geliştirdiğiniz uygulamayı uçtan uca önizleme yapabilmek için application Preview özelliğini kullanın. (LINK)

* **Preview Your Mobile App:** (Nilay)Page preview olmuş burası App Preview anlatılmalı
* **Preview Your Mobile App:** While developing the screen, utilize the Page QR provided by the UI Editor to instantly preview the page on Mobile Preview within StudioApps by clicking Mobile Preview and scanning the relevant QR code using the camera to ensure control.

## Publish / Export

* **Publish for Web:** If you don't have an environment ready for deploying your application, you can utilize our **Azure environment**. Alternatively, if deployment environments are available, you can use the Export option to obtain the application package.

* **Publish for Mobile:** Utilize **StudioApps playground** for mobile deployment. For publishing your application to app stores, seek assistance from the **Studio Mobile** team.

* Export: Hangi durumlarda hangi exportu kullanması gerektiği ile ilgili bir açıklama

* **Export:** In Plateau Studio, after creating your application, you can export your app by creating a package to download to your device or sync with your ongoing apps. You have the option of exporting both compiled and uncompiled versions.

* **Compiled Export:** Export your app as a package to download or sync with ongoing projects in Plateau Studio. By default, a package is created when you click the Export button.

* **Uncompiled Export:** Make changes to your ongoing app without re-exploring it. The Export Uncompiled App Models feature lets you apply updates hassle-free using symphony-cli. (LINK)

### Mobile Usage

* **Checking the Application After Design Stage Completion:** After completing the design stage, publish your application via Plateau Studio to see how it appears live. To view the published application on mobile:

* Click the Publish button in Plateau Studio to obtain the QR code or copy the link provided.
* Use the generated link or scan the QR code with your mobile device's camera or the Mobile Preview camera within StudioApps to test the application.