Apa itu Affinity Designer

Apa itu Affinity Designer

Halo sobat, kali ini saya akan menulis tentang Apa itu Affinity Designer ? Affinity designer adalah aplikasi pengolah gambar vector yang dibuat oleh Serif. Mungkin bagi Kamu yang belum tahu Serif, Serif adalah perusahaan yang sebelumnya membuat Affinity Photo , software grafis pengolah photo yang memenangkan Apple award di tahun 2013.

Ok, kita kembali ke Affinity designer,  Software ini memiliki fungsi dan bahkan tampilan dengan Adobe illustrator CS6. Berikut tampilan dari Affinity designer

Affinity Designer

Fitur Affinity Designer

Fitur Affinity Designer bisa kamu baca di  https://affinity.serif.com/en-gb/designer/full-feature-list/

Terdapat banyak sekali fitur yang bisa di dapatkan pada Affinity Designer, ada lebih dari 20 fitur yayy.. 🙂


Nah , berikut kenapa Kamu harus menggunakan Affinity designer

  • User Interface yang mudah di gunakan, dengan tampilan yang dark membuat kita lebih fokus kepada artwork yang hendak kita buat
  • Kemudahan untuk masking gambar
  • Kemudahan untuk import file lain, seperti .ai  dimana saya tidak mengalami kesulitan berarti dalam membuka file Adobe illustrator.
  • Pilihan export yang beragam seperti software grafis professional lainnya
  • Software ini tidak terlalu menggunanakan Memory RAM
  • Harga yang murah $49 untuk sekali beli dan bisa di gunakan seumur hidup, berbeda dengan Adobe illustrator yang dijual dengan cara berlangganan.


  • Belum bisa mengedit teks arabic (RTL)

Demikian tulisan singkat saya mengenai Apa itu Affinity Designer , mungkin suatu saat di waktu luang saya akan membuat sedikit video tutorial.

Memanggil Shortcode pada template page

Shortcode pada wordpress membuat develop semakin mudah, tidak hanya bisa di panggil pada text editor wordpress namun shortcode pada wordpress juga bisa di panggil di template page , berikut cara memanggil Shortcode pada template page

<?php echo do_shortcode(‘[shortcode=””]’); ?>

Ya, memanggil Shortcode pada template page wordpress sangat mudah, bisa disisipkan di header.php. atau di template page wordpress


Menginstal ionic di server cloud

Ionic adalah open source front-end framework untuk developing hybrid mobile apps menggunakan HTML5. Kali ini saya akan coba menulis bagaimana cara Menginstal ionic di server cloudnine www.c9.io

  1. Buat “new workspace” (Node.js)
  2. Buka Terminal, atau gunakan terminal yang ada di bawah layar
  3. ketikan perintah berikut pada terminal
$ npm install -g cordova ionic 
$ ionic start myApp sidemenu 
$ cd myApp 
$ ionic serve -p $PORT --nolivereload



An awesome list of the Ionic 2 resources

Here An awesome list of the Ionic 2 resources,

“Ionic is the beautiful, open source front-end SDK for developing hybrid mobile apps with web technologies.”

Official Resources

Ionic 2 Fundamentals




Unit Testing

Ionic Native / Cordova Plugins

Backend as a Service

i18n & l10n


Video Tutorials


Open Source Projects


How to change StatusBar color in ionic 2

There seems to be a problem on Ionic 2 . It doesn’t seem to be possible to change the StatusBar color, in some custom ROM like MIUI , the statusbar always appears black with white text. How to force ionic to change statusbar color?

Here the answer from my brother, tommy pradana

constructor(public platform: Platform) {
        if ( this.platform.is('android') ) {
            this.platform.ready().then(() => {
                // Okay, so the platform is ready and our plugins are available.
                // Here you can do any higher level native things you might need.

or you could use this code below

if (cordova.platformId == 'android') {

And dang…. it will force statusbar color to change based on your code. So, let’s coding again

How long does it typically take to publish an app on the Google Play Store?

Q: How long does it typically take to publish an app on the Google Play Store?

A: Pretty quick actually. Once you push it live from the publishing interface, it will take a max 2/3 hours to be live to consumers. Unlike iTunes, Google review does not involve any human testing so it is much quicker. Google play store auto review , and after 3-5 hours , the app will appear on Play store.The reason for the time is there’re multiple servers that are serving Play Store and these servers need time to synchronize their list of apps.

We have tried pushing updates to our app at different times and observed that

Quickest turnaround (30 – 45 mins)
Mondays & Thursday afternoon ( 2:30 – 3:30 pm IST)

Longest times (3- 5hrs)
Thursday, Friday, Saturday evenings ( 5:30 – 7:30 pm IST).

Although the publishing is automated, the turnaround time might be affected by server traffic.


Build android apk with ionic and publishing to Google Play Store

Before we deploy, we should take care to adjust plugins needed during development that should not be in production mode. For example, we probably don’t want the debug console plugin enabled, so we should remove it before generating the release builds:

cordova plugin rm cordova-plugin-console

To generate a release build for Android, we can use the following cordova cli command:

cordova build --release android

This will generate a release build based on the settings in your config.xml. Your Ionic app will have preset default values in this file, but if you need to customize how your app is built, you can edit this file to fit your preferences.

Next, we can find our unsigned APK file in platforms/android/build/outputs/apk

For example:
In android platforms => /android/build/outputs/apk/android-debug-unaligned.apk

Now, we need to sign the unsigned APK and run an alignment utility on it to optimize it and prepare it for the app store. If you already have a signing key, skip these steps and use that one instead.

Let’s create keystore file using this command

keytool -genkey -v -keystore .keystore -alias  -keyalg  -keysize  -validity 

For Example :

Step 1 : set path   cd C:\Program Files\Java\jre7\bin     in command line
Step 2 : keytool -genkey -v -keystore Helloworld.keystore -alias Helloworld -keyalg RSA -keysize 2048 -validity 10000

Follows the belows steps to generate Signed APK

Step 1: set path C:\Program Files (x86)\Java\jdk1.8.0_20\bin in command line

Step 2: jarsigner -verbose -keystore /path_to_keystore/keystoreFileName  /path_to_apk_file/application_name.apk keystoreFileName_alias

For example: 
jarsigner -verbose -keystore C:\Users\admin22\Ionic_project\First\Helloworld.keystore  C:\Users\admin22\Ionic_project\helloWorld\platforms\android\build\outputs\apk\android-release-unsigned.apk Helloworld

-keystoreFileName_alias. You have to provide your alias name of your keystore file name.

Step 3: Enter password of your keystore file

Step 4: Completed. It will displays warning messages like certifaction validity etc..

Step 5: Verify your apk file jarsigner -verify /path_to_apk_file/application_name.apk

For example :
jarsigner -verify C:\Users\admin22\Ionic_project\helloWorld\platforms\android\build\outputs\apk\android-release-unsigned.apk

jarsigner -verify -verbose -certs C:\Users\admin22\Ionic_project\helloWorld\platforms\android\build\outputs\apk\android-release-unsigned.apk

Zip align:

Step 6: set path C:\Program Files (x86)\Android\sdk\build-tools\android-4.4W in command line

Step 7: zipalign -v 4 /path_to_apk_file/application_name.apk /path_to_destination_apk_locaion/zipped_application_name.apk

For example :
zipalign -v 4 C:\Users\admin22\Ionic_project\helloWorld\platforms\android\build\outputs\apk\android-release-unsigned.apk C:\Users\admin22\Ionic_project\helloWorld\platforms\android\build\outputs\apk\final.apk

Google Play Store

Now that we have our release APK ready for the Google Play Store, we can create a Play Store listing and upload our APK.

To start, you’ll need to visit the Google Play Store Developer Console and create a new developer account. Unfortunately, this is not free. However, the cost is only $25 compared to Apple’s $99.

Once you have a developer account, you can go ahead and click “Publish an Android App on Google Play” as in the screenshot below:

New google play app

Then, you can go ahead and click the button to edit the store listing (We will upload an APK later). You’ll want to fill out the description for the app. Here is a little preview from when we filled out the application with the Ionic Todo app:

Ionic Todo

When you are ready, upload the APK for the release build and publish the listing. Be patient and your hard work should be live in the wild!

Updating your App

As you develop your app, you’ll want to update it periodically.

In order for the Google Play Store to accept updated APKs, you’ll need to edit the config.xml file to increment the version value, then rebuild the app for release.


Standartized splash screen support for Cordova

Configuring splash screen

Configuration of splashscreen is similar to existing phonegap build specification, and to existing <icon> behaviour.

You can define app splashscreen via <splash> element (config.xml). If you do not specify a splash screen then the default splash screen for each platform is used.

    <splash src="splash.png" width="120" height="240" density="mdpi"/>

src: (required) specifies the location of the image file, relative to application root directory

width: (optional) image width in pixels

height: (optional) image height in pixels

density: (optional) android specific, specifies image density

For each platform you can also define a splashscreens to fit different screen resolutions.


     <platform name="android">
              <!-- Portrait -->
              <splash src="res/android/splash-portrait-ldpi.png" density="port-ldpi" width="320" height="426" />
              <splash src="res/android/splash-portrait-mdpi.png" density="port-mdpi" width="320" height="470" />
              <splash src="res/android/splash-portrait-hdpi.png" density="port-hdpi" width="480" height="640" />
              <splash src="res/android/splash-portrait-xhdpi.png" density="port-xhdpi" width="720" height="960" />
              <!-- Landscape -->
              <splash src="res/android/splash-ldpi.png" density="land-ldpi" width="426" height="320" />
              <splash src="res/android/splash-mdpi.png" density="land-mdpi" width="470" height="320" />
              <splash src="res/android/splash-hdpi.png" density="land-hdpi" width="640" height="480" />
              <splash src="res/android/splash-xhdpi.png" density="land-xhdpi" width="960" height="720" />


     <platform name="ios">
              <!-- iPhone  -->
              <splash src="res/ios/splash.png" width="320" height="480" />
              <!-- iPhone Retina  -->
              <splash src="res/ios/splash-2x.png" width="640" height="960" />
              <!-- iPhone 5  -->
              <splash src="res/ios/splash-wide.png" width="640" height="1136" />
              <!-- iPad -->
              <splash src="res/ios/splash-ipad-portrait.png" width="768" height="1024" />
              <splash src="res/ios/splash-ipad-landscape.png" width="1024" height="768" />
              <!-- iPad Retina -->
              <splash src="res/ios/splash-ipad-portrait-2x.png" width="1536" height="2048" />
              <splash src="res/ios/splash-ipad-landscape-2x.png" width="2048" height="1536" />

Windows Phone8

     <platform name="wp8">
              <splash src="res/wp/splash.jpg" width="768" height="1280" />


     <platform name="windows8">
              <splash src="res/windows8/splash.png" width="300" height="620" />

Platform-specific quirks

Splash Screens for the Android Platform

The size for each should be:

  • xlarge (xhdpi): at least 960 × 720
  • large (hdpi): at least 640 × 480
  • medium (mdpi): at least 470 × 320
  • small (ldpi): at least 426 × 320

More info here

Splash Screens for the iOS Platform

Sizes of images for IOS platform defined here

Splash Screens for the Windows Phone 8 platform

Image size for Windows phone devices should be 768 × 1280 px (Guide)

Also Windows Phone 8 supports only JPEG splashscreen images.

Splash Screens for the Windows 8 platform

Image size for Windows 8 should be 620 x 300 px. Also Background color for splashscreen is not requred, but recommended.Design Guidelines, SplashScreen Quickstart, Appxmanifest reference


Image, specified by src attribute copied during ‘prepare’ step to platform splashscreen location:

  • Windows8: images/splashscreen.png
  • WP8: splashscreenimage.jpg
  • Android: res/drawable-land|port-{dpi}/screen.png
  • IOS: resources/splash/default-*.png

Resulting name of the file is defined from its’ width and height attributes, or density attribute, if defined.


How to place ionic tabs at the bottom of the screen?

Q: I created a simple ionic-tabs that shows my icons at the top of the screen. I tried to wrap it in a ionic-footer-bar in order to have it placed at the bottom of the screen with no success. The tabs disappear when I do that. How should I accomplish the looks I want?

A: To place the ionicFramework tabs at the bottom of the screen for android devices just open your app.js file, and under angular.module add the following lines of code:

.config(function($ionicConfigProvider) {

src: http://stackoverflow.com/questions/27874855/how-to-place-ionic-tabs-at-the-bottom-of-the-screen