# Studio Transition Document

## Create Studio Account
- Plateau Studio'ya giriş için [Link]( https://studio.onplateau.com)'ine gidin.
- **CREATE NEW ACCOUNT** butonu ile kullanmak istediginiz E-Mail adresinizi girin.
- **NEXT** butonuna tıklayın ve gelen ekranda E-Mail adresinize gönderilen OTP mesajındaki rakamları kutulara girin.
- **NEXT** butonuna tıklayın. Hesap şifrenizi belirleyin ve **FINISH** butonuna tıklayın.
- Name, Surname, Role seçiminizi yapın ve Studio'ya **Login** olun.

Daha detaylı bilgi için [burayı](https://studio.onplateau.com/docs/ui/docs/Getting-Started/create-new-account) ziyaret edebilirsiniz.

## Create Organization
- Studio'ya **Login** olun.
- Sağ üstteki **CREATE ORGANIZATION** butonuna tıklayın.
- Açılan dialog penceresinde oluşturmak istediginiz Organizasyon'un ismini yazın ve **CREATE** butonuna tıklayın.

**Not:** Plateau Studio içinde **Organizasyon**; uygulamanızın içerisinde yer alacağı ve kullanıcılara çalışma yetkisi verebileceğiniz bir çalışma yapısıdır. Yetki organizasyonu açan kişi tarafında verilir.

**Örnek:** Bir Organizasyon içerisinde Backoffice, Web Uygulaması, Landing Page, Mobil Uygulama içerecek şekilde ürün/proje adı ile organizasyon açabilirsiniz. Aynı zamanda direktörlük çalışma grubundan birden fazla uygulama geliştiyor iseniz Direktörlük adlı bir organizasyon yaratabilirsiniz.

Daha detaylı bilgi için [burayı](https://studio.onplateau.com/docs/ui/docs/Getting-Started/creating-organisation) ziyaret edebilirsiniz.

## Create Application
- Organizasyon oluşturduğunuzda **Create New Application** panelinin altındaki butonlara tıklayarak devam edin.
- Gelen dialogda uygulama ismini ve açıklamasını (opsiyonel) girin ve **CREATE** butonuna tıklayın.

Daha detaylı bilgi için [burayı](https://studio.onplateau.com/docs/ui/docs/Develop-App-With-Plateau-Studio/creating-an-application) ziyaret edebilirsiniz.

## Start / Stop Working

- **Start Working** modeli üzerinize almanızı ve çalışmaya başlamanızı sağlar.
- **Stop Working** modeli üzerinizden bırakıp versiyonlama işlemini yapmanızı sağlar.

Daha detaylı bilgi için [burayı](link güncellenecek) ziyaret edebilirsiniz.

# Plateau Studio Geçiş Adımları
## UI Page Transfer

Plateau Studio'da MicroUI'a karşılık gelen module yapısı bulunur. MicroUI altındaki mevcut ekranlarınızı module altına, QUI uygulama kabuğunuzun(varsa) ekranlarınızı Plateau Studio'da **Root Level**'a import edebilirsiniz.

- Module yaratmak için (Customer gibi) Studio'da oluşturduğunuz Application'da **Add New** butonuna tıklayın ve açılan panelde **New Module** seçin.
- Aynı isimde module yaratarak o ekranlar Studio'da module üzerine gelindiğinizdeki **+** butonuna tıklanır. Açılan panelde **Import Model** seçerek MicroUI altındaki ekranları module altına import edin.
- QUI uygulama kabuğunuzdaki ekranlar module altında değil ise Studio'da oluşturduğunuz Application'da **Add New** butonuna tıklayın ve açılan panelde **Upload UI Page** seçin. Ardından açılan panelde local'deki qjson'ları topluca seçip import edin.

<img src="https://stechq.github.io/cdn/studio-onboarding/new-ui-page.gif" width="640" />
<br>
</br>
<img src="https://stechq.github.io/cdn/studio-onboarding/ui-page-transfer.gif" width="640" />

## Using Custom Component
- Sayfaları ekledikten sonra projedeki Custom Component olan sayfalari seçin.
- Studio içerisinde **Convert to Custom Component** butonu ile sayfayı Custom Component'e çevirmelisiniz. Böylece Quick Editörde diğer componentler gibi listelenecek ve bu şekilde sayfaya **Drag&Drop** yaparak ekleyebileceksiniz.
- Custom Component yaptığınız sayfaların kullanıldığı sayfalarda component listesinde bulunup **Drag&Drop** ile yeniden eklenerek CustomComponent olarak bulunan component kaldırılmalı.

<img src="https://stechq.github.io/cdn/studio-onboarding/convert-to-custom.gif" width="640" />

## Using Go
- Sayfalarınızda kullandığınız quick.Quick.go('/static/qjsons/homePage.qjson') yönlendirmelerini Studio içerisinde kullanmak için **go** komutunu kullandığınız event'i açıp dialog'un sağ üst kısmında yer alan **Add Destination** butonuna tıklayın.
- Gelen dialogda hangi sayfaya go yapmak istiyorsanız onu seçmeniz yeterli olacaktır.
- Bu işlem sonucunda sizlere **auto generated** bir go komutu oluşturulacak. Eski go komutunuzun yerine bu komutu koyarak çalışmalısınız. Kodu ekledikten sonra içeriğini bozmamanız gerekiyor yoksa kod go işlemini yapamayacaktır.

<img src="https://stechq.github.io/cdn/studio-onboarding/using-go.gif" width="640" />

## Using İmage
Şu anda Studio içerisinde Image yükleme işlemini desteklemiyoruz. Var olan yapınızda **Image**'larınızın path'ini image componentine veriyordunuz, Studio ile şuanlık image'larınızı bir yerde serve edip url'lerini verebilir veya VImg componentinin src prop'una image dosyanızın **Base64** kodunu vererek Image'larınızı Studio içerisinde development anında görüntüleyebilirsiniz.

## Application Settings Transfer
- Projenin içeriğinde bulunan settings dosyalarının **Explorer** paneldeki UI Settings kısmından kullamak istediğinizi seçip ekleyin.
- Ardından içeriği projedeki içerik ile değiştirilerek settings dosyalarının Studio üzerine geçişi sağlayın.

## First Page

- **Application First Page** için module dışında oluşturduğunuz model üzerineki 3 noktaya basın ve açılan panelde **Set As Start Screen** tıklayın.

<img src="https://stechq.github.io/cdn/studio-onboarding/set-as-start.gif" width="640" />

## Application Preview

Application'ı Publish etmeden tüm sayfaları gözlemlemeyi sağlar. Bu özellik sadece **Start Screen** belirlendiğinde aktif hale gelmektedir.

Daha detaylı bilgi için [burayı](https://studio.onplateau.com/docs/ui/docs/Live-Preview/data-model#studio-preview) ziyaret edebilirsiniz.

## CORS Hatası Alındığında

- Servis isteklerinde CORS hatası alınması durumunda Studio'yu kullandığınız tarayıcının CORS'e takılmayan bir yapıda olması veya CORS ayarlarının servis tarafında response'lara aşağıdaki CORS ayarları eklenmelidir.
- Access-Control-Allow-Credentials
- Access-Control-Allow-Headers
- Access-Control-Allow-Methods
- Access-Control-Allow-Origin

## Export

- Studio içerisinde yer alan **Export** butonu ile Studio içerisinde yapmış olduğunuz sayfalarınızı QUI projesine ihtiyacınız olmadan ve herhangi bir build pipeline'a gereksiniminiz olmadan sizlere sayfalarınızın build edilmiş bir zip olarak **download** etmenize yardımcı olacaktır.
- Böylece build olmuş dosyalarınızı kendi pipeline'ınıza **git commit & push** ile canlıya alabilirsiniz. Export işlemini yaparken sayfalarınızın Eexport'da seçilebilmesi için major versiyon olarak işaretlenmiş olması gerekmektedir.

## Studio Sync

- Quick Standalone'da kullanılan File System işlemini gerçekleştirmek için Studio içerisindeki **Export** butonu yanındaki 3 noktaya tıklayın.
- Açılan panelde **Sync Files to Your Device** seçeneğini seçin.

**Not:** İlk kullanım için öncelikle **symphony-cli** npm üzerinden indirilmelisiniz. Seçeneği seçtikten sonra yazan açıklamaları uygulayarak Studio içerisinde çalışmış olduğunuz qjson dosyaları **symphony-cli studio-sync** komutunu çalıştırdığınız path'de her **Export** butonuna tıkladığınızda sayfalarınızın lokalinize senkronize etmenizi sağlar.

Studio geçişte herhangi bir sorun yaşarsanız [[e-mail]](mailto:[e-mail]) adresinden bize ulaşabilirsiniz.

LET'S DE**V**ELOP TOGETHER