Notification Template

Kuika ile geliştirdiğin uygulamalarda hızlı ve kolay bir şekilde Emailler hazırlayabilir ve gönderebilirsin. Email hazırlama sürecinde Kuika tarafından sunulan onlarca Email şablonundan birini düzenleyerek kullanabilirsin.
Bu eğitim içeriği aşağıdaki başlıklardan oluşmaktadır:
1.Email Oluşturma Ekranı
2.Email Oluşturma Ekranında Parametre Oluşturma
3.Uygulama Ekranında Email Gönderme Aksiyonu ile Çalışma
1. Email Oluşturma Ekranı
Kuika’ da çalıştığın proje içerisinden “Notification Template” görünüm modunu aç.
IMG01: Notification Template ekranı


Gelen ekranda seni yeni  bir “Notification Template” ekleme ekranı ve Kuika tarafından oluşturulan varsayılan bir “Set Password” ve “Reset Password” şablonları karşılayacaktır.
Eğer geliştirdiğin uygulama içerisinde şifre belirleme ve şifre sıfırlama maillerine ihtiyaç duyarsan Kuika tarafından varsayılan oluşturulan “Set Password” ve “Reset Password” şablonlarını düzenleyip, kullanabilirsin.
Gelen yeni bir “Notification Template” ekleme ekranında şablonunu isimlendirerek “Next” butonuna tıkla.
IMG02: Email Şablonları 

Açılan ekranda Kuika tarafından kullanıma hazır, onlarca düzenlenebilir Email şablonu seni karşılayacaktır. 
İsteğin ve ihtiyacın doğrultusunda bu şablonlardan birini seçebilir ya da “NEW BLANK TEMPLATE” seçeneğine tıklayarak sıfırdan bir Email şablonu oluşturabilirsin. 
Sıfırdan bir şablon oluşturduğunu varsayalım. “NEW BLANK TEMPLATE” butonuna tıkladığında seni Email şablonu oluşturma arayüzü karşılayacaktır.
IMG03: Email Şablon oluşturma arayüzü 
Email şablonu oluşturma arayüzü sürükle-bırak mantığı ile çalışmaktadır. Responsive bir tasarım oluşturmak için arayüz içerisinde “Desktop” ve “Mobile” görüntüleme seçenekleri bulunmaktadır.
Arayüz Content, Blocks ve Body sekmelerini içerisinde barındırmaktadır. 
IMG04: Email Şablon Oluşturma Arayüzü Sekmeleri 
Content Sekmesi:
Email şablon oluşturma arayüzünde yer alan Content sekmesi birçok içerik yapısını içerisinde barındırmaktadır.
IMG05: Content Sekmesi 
Content sekmesi aracılığıyla hazırladığın Email şablonlarına;
Columns
Heading
Text
Image
Button
Divider
HTML 
Menu
içeriklerini ekleyebilirsin. Belirtilen içerikleri eklemek için yapman gereken tek şey eklemek istediğin içerik yapısını sürükleyip şablon oluşturma çalışma alanına bırakmaktır.
Content sekmesi altında yer alan içeriklerin her biri kendi içerisinde özel ayarlar barındırmaktadır.
IMG06:Columns içeriği ayarları
Oluşturmakta olduğun Email şablonuna “Columns” içeriğini eklediğinde Columns içeriği ayarlarını,”Columns”, “Columns Properties”, “Row Properties” ve “Responsive Design” başlıklarında web ve mobil olmak üzere iki ayrı yapılandırma özelinde gerçekleştirebilirsin.
IMG07:Heading içeriği ayarları 
Oluşturmakta olduğun Email şablonuna “Heading” içeriğini eklediğinde Heading içeriği ayarlarını, Smart Headings, “Text”, “Links”, “General” ve “Responsive Design” başlıklarında web ve mobil olmak üzere iki ayrı yapılandırma özelinde gerçekleştirebilirsin.
IMG08:Text Settings 
Oluşturmakta olduğun Email şablonuna “Text” içeriğini eklediğinde Text içeriği ayarlarını, “Text”, “Links”, “General” ve “Responsive Design” başlıklarında web ve mobil olmak üzere iki ayrı yapılandırma özelinde gerçekleştirebilirsin.
IMG09:Image Settings 
Oluşturmakta olduğun Email şablonuna “Image” içeriğini eklediğinde Image içeriği ayarlarını, “Magic Image”, “Image”, “Width”, “Align”, “Alternate Text”, “Action”,“General” ve “Responsive Design” başlıklarında web ve mobil olmak üzere iki ayrı yapılandırma özelinde gerçekleştirebilirsin.
IMG10: Button Settings 
Oluşturmakta olduğun Email şablonuna “Button” içeriğini eklediğinde Button içeriği ayarlarını, “Smart Buttons”, “Action”, “Button Options”,“Spacing”, “General” ve  “Responsive Design”  başlıklarında web ve mobil olmak üzere iki ayrı yapılandırma özelinde gerçekleştirebilirsin.
IMG11:Divider Settings 
Oluşturmakta olduğun Email şablonuna “Divider” içeriğini eklediğinde Divider içeriği ayarlarını, “Line”, “General” ve “Responsive Design” başlıklarında web ve mobil olmak üzere iki ayrı yapılandırma özelinde gerçekleştirebilirsin.
IMG12:HTML Settings 
Oluşturmakta olduğun Email şablonuna “HTML” içeriğini eklediğinde HTML içeriği ayarlarını, “HTML”, “General” ve “Responsive Design” başlıklarında web ve mobil olmak üzere iki ayrı yapılandırma özelinde gerçekleştirebilirsin.
IMG13:Menu Settings 
Oluşturmakta olduğun Email şablonuna “MENU” içeriğini eklediğinde MENU içeriği ayarlarını, “Menu Items”, “Styles”, “General” ve “Responsive Design” başlıklarında web ve mobil olmak üzere iki ayrı yapılandırma özelinde gerçekleştirebilirsin.
Blocks Sekmesi:
Email şablon oluşturma arayüzünde yer alan Blocks sekmesi içerik aktarım düzenini sağlayan birçok blok yapısını içerisinde barındırmaktadır.
IMG14: Blocks Sekmesi 
Oluşturmakta olduğun Email şablona blok yapılarını eklemek için yapman gereken tek şey eklemek istediğin içerik yapısını sürükleyip şablon oluşturma çalışma alanına bırakmaktır.
IMG15: Block içerisine Content ekleme Alttext:Block içerisine Content ekleme ekran görüntüsü
Eklediğin Block yapısı içerisinde yer alan sütunların üzerine gelerek blok sütunlarına içerik ekleyebilirsin.
Body Sekmesi:
Email şablon oluşturma arayüzünde yer alan Body sekmesi aracılığıyla Email şablonununun gövde yapısını görsel olarak düzenleyebilirsin.
IMG16: Body Sekmesi 
Body sekmesi aracılığıyla “General”, “Email Settings” ve “Links” özelinde görsel düzenlemeleri gerçekleştirebilirsin.
2. Email Oluşturma Ekranında Parametre Oluşturma
Oluşturmakta olduğun Email şablonunda dinamik verilerle çalışmak için şablon üzerine parametreler ekleyebilirsin.
IMG17:Email şablonuna parametre ekleme  
Parametre eklemek için dinamik veri çekmek istediğiniz alana @parametre biçiminde  parametreyi ekle.
Eklediğin parametre değerlerini tanımlamak için UI Design görünüm moduna dönerek aksiyonlar aracılığıyla parametre değerlerini tanımla
3. Uygulama Ekranında Email Gönderme Aksiyonu ile Çalışma
Kuika ile geliştirdiğin uygulamada sistem aksiyonlarından “SendMail” aksiyonunu kullanarak oluşturduğunuz Email şablonuna yönelik yapılandırmaları ve parametre tanımlama işlemlerini gerçekleştirebilirsin.
IMG18: Email şablon örneği 
Örnek bir senaryoda, oluşturulan ve parametre içeren bir Email şablonunun uygulama ekranı aracılığıyla harekete geçirildiğini düşünelim. 
IMG19:SendMail aksiyonu ekleme
Uygulama ekranına eklediğin bir “Button” elementine “SendMail” aksiyonunu ekle. Aksiyon eklemek istediğin Button elementini seç. Sağda açılan Button Properties’de” “ADD ACTION” butonuna tıkla. Açılan menüde onClick> Notification >SendMail seçimini gerçekleştir. 
SendMail aksiyonunun eklediğinde aksiyon içerisinde yer alan Mail Type başlığı altında bulunan açılır menü aracılığıyla  “Mail Type” seçimini yap.
IMG20:Mail Type seçimi
Mail Type başlıklı açılır menüde “Custom” ve “Template” seçenekleri mevcuttur.
IMG21: Custom Mail Type seçimi
Mail Type başlıklı açılır menüde bulunan “Custom” seçeneği ile mail içeriğinin, herhangi bir şablon kullanmadan, aksiyon altında yer alan “Body” sekmesi içerisinde oluşturulması sağlanmaktadır. Body sekmesinde yer alan “SymbolPicker” aracılığıyla mail içeriğini dinamik ya da statik olarak çekebilirsin. Custom seçeneği altında yer alan “Receivers” sekmesi aracılığıyla alıcı/kullanıcı Email bilgileri girilmektedir. “Subject” sekmesi aracılığıyla gönderilecek Emailin konusu girilmektedir. Eklenebilen opsiyonel parametreler aracılığıyla “gönderici”, “cc”, “bcc”, “dosya ekleme” ve “base64 aracılığıyla resim ekleme” seçeneklerini ekleyebilir, eklediğin parametrelerin değerlerini girebilirsin. Custom seçeneği altında yer alan tüm sekmelerin değer bilgilerini “SymbolPicker” kullanarak dinamik ya da statik olarak çekmeyi sağlayabilirsin..
IMG22:Template Mail Type seçimi
Mail Type başlıklı açılır menüde bulunan “Template” seçeneği ile oluşturduğun Email şablonunu kullanarak Email gönderimini sağlayabilirsin. Öncelikle MailType olarak Template seçimi yaptıktan sonra “Templates” başlığı altında yer alan açılır menü aracılığıyla kullanmak istediğin Email şablonunu seç. Daha sonra  “Receivers” sekmesi aracılığıyla alıcı/kullanıcı Email bilgileri girilmektedir. “Subject” sekmesi aracılığıyla gönderilecek Emailin konusu girilmektedir. 
Ardından Email şablonunda eklemiş olduğun parametreler listelenecektir. Parametre değerlerini “SymbolPicker” kullanarak girebilirsin.
IMG23: SystemPicker aracılığıyla parametre değerini girme 
Örnek olarak kullandığımız bir Email şablonu için SendMail Aksiyonunu kullanarak şablon içerisinde yer alan “namesurname” parametresine dinamik olarak veri girme işlemlerini inceleyelim. 
Symbol Picker aracılığıyla SendMail aksiyonun sahip olduğu “namesurname” parametresine değer eklemek için SendMail aksiyonu altında yer alan “namesurname” parametresi içerisindeki Symbol Picker’ a tıkla. 
IMG24:SystemPicker aracılığıyla parametre için kategori seçimi 
Parametreye değer eklemek için açılan menüde yer alan Symbol Picker kategorilerinden ilgili olanı seç.
IMG25:SystemPicker aracılığıyla parametre için öğe seçimi 
Kategori özelinde parametreye değer kaynağını oluşturacak öğeyi seç.
​
Email şablonu içerisinde yer alan tüm parametreler için bu işlemi tekrarla

Email şablonu içerisinde yer alan parametreler haricinde  SendMail Aksiyonununa eklenebilen opsiyonel parametreler aracılığıyla “gönderici”, “cc”, “bcc”, “dosya ekleme” ve “base64 aracılığıyla resim ekleme” seçeneklerini ekleyebilir, eklediğin parametrelerin değerlerini girebilirsin. Template seçeneği altında yer alan tüm sekmelerin değer bilgilerini “SymbolPicker” kullanarak girebilirsin.
Last modified 12d ago