Rabu, 17 Juli 2019

Image Recognition Example Using CreateML #IOSDev



Hello everyone, in this tutorial I would like to share about using CreateML Framework to recognition image. in the end of this tutorial we will achieve model from training data that can be use to be mlmodel in xcode. 

like example bellow


above picture means picture orange that we put on that view has recognise that it is an orange. so cool is'nt it?

lets go ahead.  

first, create and playground project and then choose macOS platform, like bellow.

note : we need to choose macOS project because, the framework that we use is only available on macOS platform. 

after that, put the code bellow in playground editor.  and then run it

when you run the code, MLUI will appear beside your editor, we use the MLUI to put our data training. so in the next step, you need to prepare the training data. in this tutorial I have collecting training data about some fruits, apple and orange. you could download it here

drag the training folder to MLUI until the image processing has done.


after process done, now you could test by drag testing data like bellow. 


Hurray, our image has recognise as orange.  you can try with another training data.. good luck ^_^


Minggu, 14 Juli 2019

How to Deploy or Debug Apple Watch Apps in Physical Device #WatchOSDev



Hello everyone, this is my first tutorial about watchOS hope you enjoy.

WatchOS is the operating system that support for apple watch, in this watchOS we could develop apps, but first thing that we must know, watch apps in 5 version and bellow are not support for independent apps, so the watch apps must develop with IOS apps in the seems time. but in WWDC 19, apple announce that WatchOS 6 will support independent apps, so the users could install apps directly from apple watch.

in this tutorial we will learn about how to create first Apple Watch Apps and deploy it in physical device, why this tutorial matter, because deploying apps in apple watch is not seems as you deploy IOS apps in IPhone or IPad, there is several unique thing that you should know. 

until this tutorial has written, I have not found anything tutorial that talking about this theme. so here it is.


first thing we must create an xcode project. and choose WatchOS like bellow


hit next, and fill the apps name as you want.


and here's the first look for apple watch apps project. you can see the different if you have experience in IOS apps developing.


and then hit the main storyboard, and add some label in there like this.


also the interface storyboard, you should add label like the main storyboard, FYI the interface storyboard is the storyboard for your watch apps. and the interface controller would be your main controller.


after that, klik on your project, and klik on watch kit app in TARGET section. look up for deployment info, in that section, you should see many version of watchOS, if your apple watch is in lower version, you should change this into your current watchOS version or lower. 

in several case developer did not notice this deployment version, so the apps are not showing in watch apps installation.
do this action to watch extension too. 

finally, run your apps in IPhone that already paired with apple watch. and let see the result.


your apps should look like this.



and let see the watch apps (not your project) in your iphone, and scroll it until down. you should see your watch apps like this


tap install and check your Apple Watch, now you should see the debug apps like bellow




Finally, we are successful deploying apps into real apple watch.  now test your own project, good luck everyone ^_^

Bonus!

for the first time deploying watch apps in physical device, you should see the warning like bellow. you dont need to worry, just tap trust and continue developing.




Kamis, 30 Mei 2019

Color Harmony untuk Desainer Baru #Design

color harmony adalah salah satu konsep dimana pemilihan warna pada suatu object desain bisa memiliki warna yang sesuai atau cocok. konsep ini sangat berguna bagi para desainer ataupun para animator, pasalnya dengan konsep ini kalian bisa memberikan warna sesuai riset yang sudah terbukti, contohnya seperti pemilihan warna untuk membuat orang senang anda pilih warna kuning, atau untuk membuat orang sedih anda bisa memakai warna biru. kenapa kuning untuk happy dan kenapa biru untuk sedih? nah itu dia, riset orang-orang terdahulu sudah membuktikan bahwa warna-warna tersebut memang mewakili mood tersebut. 

disitulah colour harmony take a role. bukan cuma dalam pemilihan warna pada mood tertentu, tetapi pemilihan kombinasi warna juga sangat membantu sekali, dengan adanya konsep ini kita bisa memilih warna apa saja yang bisa di sandingkan dengan warna main yang kita pilih. pada kali ini kita akan membahas konsep kombinasi warna ini. 


konsep kombinasi warna merujuk pada website pada color harmony https://colorsupplyyy.com/app memiliki beberapa tipe seperti berikut.

1. Complementary
2. Analogous
3. Triad
4. Split Complement
5. Square


1. Complementary

Complementary adalah konsep harmony warna yang bersebrangan, sesuai dengan bagan warna, apabila kalian memlilih salah satu warna, maka warna yang cocok untuk di sandingkan adalah warna yang bersebrangan dengan warna tersebut, contohnya seperti ini.

https://colorsupplyyy.com/app
Example: 

joy from Inside Out movie


2. Analogous

analogous adalah konsep harmony warna yang apabila kalian memilih satu warna maka warna yang cocok disandingkan adalah warna2 yang berdampingan dengan warna tersebut. seperti berikut: 

https://colorsupplyyy.com/app
Example : 

de lacrus from coco


3. Triad 

Triad adalah konsep harmony warna yang memliki bentuk segitiga sama sisi, yang mana jika kalian memilih salah satu warna, maka bisa di sandingkan dengan dua warna pada posisi sudut segitiga sama sisi yang lain. seperti berikut :

https://colorsupplyyy.com/app

Example : 

Meguel from coco



4. Split Complement

Split Complement adalah warna kombinasinya berbentuk segitiga sama kaki, konsep ini mirip seperti gabungan dari triad dan complementary, yang mana jika kalian memilih warna tertentu maka warna yang cocok di sandingkan adalah dua warna yang bersadingan dengan warna sebrangnya. seperti berikut :

https://colorsupplyyy.com/app

Example :
 
dory from finding nemo

5. Square

Square adalah kombinasi warna yang memiliki bentuk persegi, yang mana jika kita pilih salah satu warna maka 3 warna pada sudut lain adalah warna yang cocok di pakai. seperti berikut :

https://colorsupplyyy.com/app
Example : 

fear, joy, sadness from inside out


konsep pemilihan kombinasi warna di atas adalah beberapa konsep yang ada dari banyak konsep warna yang ada, kalian bisa cari referensi lain jika ingin mengetahui konsep2 yang lain. 
good luck guys ^_^

Senin, 27 Mei 2019

Membuat Segue Antar Storyboard Part I #IOSDEV

Halo semuanya, kali ini saya mau berbagi artikel tentang membuat segue ios dengan cara paling mudah. apa itu segue? segue adalah istilah untuk menyebut koneksi atau transisi antar layer di aplikasi IOS, apabila kalian pernah develop Android, Segue itu mirip Intent. paham kan?

nah banyak sekali cara untuk membuat segue di IOS, untuk kali ini saya akan menunjukkan cara paling gampang yaitu dengan drag and drop antar viewcontroller, berikut langkah-langkah nya. 


buat project xcode baru, buka main storyboard. lalu tambahkan viewcontroller baru di samping viewcontroller lama. 


jadi seperti ini.


lalu tambahkan komponen button pada viewcontroller lama. 


setelah itu tekan control dan tahan, lalu drag button tadi ke viewcontroller baru, sampai keluar popup segue pada viewcontroller baru. pilih show, hasilnya akan seperti gambar dibawah ini.




jika kita lihat di atas, terdapat semacam tali yang mengbungkan antara viewcontroller lama dan baru, dengan berarti segue yang kita buat berhasil terkoneksi.

untuk melakukan test silahkan run lalu tekan tombol yang kita masukkan tadi. ^_^ good luck guys


Minggu, 26 Mei 2019

Animasi Pergantian Warna pada Background Aplikasi #IOSDev


Hallo semuanya kali ini saya akan membagikan tentang tutorial bagaimana mengganti background dengan menggunakan animasi, pada IOS kalian bisa memanfaatkan build in function animasi yang bisa memberikan efek halus saat pergantian suatu object ke object lain seperti ada transisi. pada tutorial ini kita akan fokus pada pergantian background pada aplikasi.

sebelum kita mulai, berikut adalah goal dari tutorial ini.


buat project baru dengan nama AnimatingBackgroundColour. lalu buka mainstoryboard, drag and drop superview kedalam viewcontroller.swift dan namakan superview, seperti dibawah ini





setelah itu tambahkan kode untuk mengganti background pada viewDidLoad(), seperti dibawah ini.

self.superView.backgroundColor = .green


hasilnya akan seperti ini.


untuk mengganti background kita menjadi banyak warna bergantian dengan animasi yang halus kita membutuhkan beberapa komponen kode program yaitu :

1. array yang berisi warna
2. timer untuk melakukan infinite loop
3. uiview animating untuk melakukan transisi animasi dari warna satu ke warna lain

hasil kodeprogramnya untuk requirement di atas seperti dibawah ini.




silahkan kalian baca kodingan di atas. apabila ada pertanyaan silahkan layangkan di komentar, goodluck semuanya ^_^

Selasa, 21 Mei 2019

Membuat Kalkulator BMI Swift dan UIKIT #IOSDEV

halo semuanya, kali ini saya mau membagikan project kecil kecilan saya yang terinspirasi dari apps di appstore, kali ini saya mau membuat kalkulator BMI menggunakan swift dan UIKIT, kalkulator BMI adalah kalkulator untuk mengukur apakah berat badan kita termasuk kedalam kurus, normal, gemuk atau obesitas, dengan memanfaatkan UIKIT saya akan menyajikan kalkulator dengan tampilan lebih interaktif. berikut tampilan kalkulatornya.




kalkulator ini memiliki beberapa komponen yaitu :

1. slider
2. label
3. segmented control

slider kita gunakan untuk mengatur angka yang ingin di inputkan oleh user, kita batasi sesuai dengan berat dan tinggi manusia pada umumnya.

label kita gunakan untuk menampilkan hasil dari input user dan memberikan judul dari komponen tertentu.

segmented control digunakan untuk memberikan efek dark dan light mode seperti aplikasi telegram dan twitter.

oke lanjut saja ke langkah2nya.

1. buat project xcode dengan nama BMICalculator
2. lalu siapkan semua komponen sesuai UI pada gambar aplikasi di atas
note: untuk emoticon menggunakan label component
3. tambahkan constraint (bila perlu)
4. tambahkan kode program seperti berikut





untuk UIKIT, posisikan komponen kalian seperti ini.

bills macbook

pastikan outlet dan action kalian terkoneksi, apabila belum silahkan koneksikan.

dan jika selesai, run aplikasinya dan selesai sudah. :) goodluck guys. smoga bermanfaat


Selasa, 23 April 2019

Apa itu DevOps? #DEVOPS



hallo semuanya, kali ini saya mau sharing sesuatu tentang devops yaitu devinisi tentang devops, Apa itu devops? devops adalah salah satu profesi IT yang melingkupi tentang development and operation, maksutnya apa? pada development kita membutuhkan lingkungan development dan deployment yang related dan sesuai sehingga saat proses development dan proses deployment aplikasi yang kita buat bisa berjalan dengan lancar, garis besarnya adalah devops berperan sebagai jembatan untuk developer untuk mengatur atau menyediakan lingkungan development dan deployment dengan baik dan sesuai.

Kalau menurut saya DevOps lebih kepada mindset seseorang. DevOps sendiri gabungan dari Development dan Operation yang merupakan kolaborasi dari kedua tim.
Mindset itu mesti dipahami oleh setiap individu dalam tim, bahwa proses development dan delivery sebuah produk (umumnya berupa software) harus dapat dilakukan dengan cepat.
Tujuannya adalah supaya dapat merespon perubahan (responding to a change) demi perubahan yang terjadi dalam proses development maupun perubahan atas permintaan pasar. - Samsul Ma'arif - DevOps DOT Indonesia
 

contoh arsitektur sederhada adalah sebagai berikut.

source : wp.com

gambar di atas adalah contoh arsitektur sederhana yang biasa kita temukan, contoh arsitektur yang rumit seperti berikut. 

source : indosystem.com

bagaimana? rumit nggk? itulah dimana devops di butuhkan arsitektur serumit ini sangat tidak di sarankan untuk di kerjakan oleh developer saja. sangat membuang2 waktu dan bisa menjadi beban yang berat bagi developer untuk mengerjakannya.

contohnya, tokopedia, bukalapak, gojek dll. mereka adalah aplikasi yang sangat kompleks dan besar, tidak mungkin aplikasi sekelas perusahaan tadi hanya memiliki arsitektur seperti gambar pertama, karna banyak sekali aspek yang di perhatikan oleh perusahaan digital untuk mengoptimalkan layanannya agar dapat diberikan kepada pengguna dengan aman dan nyaman.

devops cenderung menekuni dunia linux, hal ini dikarenakan server dan support automation pada server lebih banyak untuk lingkungan linux. seperti jenkins, jira, dll.



Minggu, 14 April 2019

Membuat Halaman Signin dengan Memanfaatkan Stack View di XCODE #IOSDEV

Halo semuanya kali ini kita akan belajar xcode lagi, judul kali ini adalah menggunakan stack view di xcode, stack view adalah salah satu jenis view yang bisa membuat komponen di dalam view tesebut menjadi tesusun secara bertumpuk. stack view memiliki 2 jenis yaitu stack view horizontal dan vertical, sesuai dengan namanya stack view horizontal bisa membuat komponen di dalamnya menjadi berjejer secara horizontal, sedangkan vertical bisa membuat komponen di dalamnya menjadi bertumpuk atau berjejer vertical.

stack view berperan penting dalam dunia layouting aplikasi, untuk melakukan penumpukan komponen cukup menggunakan stack view kita bisa mendapatkan hasil yang sesuai dan lebih praktis, apabila kita tidak menggunakan stack view atau bisa di asumsikan kita menggunakan margin dan constraint maka pekerjaan kita menjadi lebih rumit dan prosesnya lebih lama.

berikut ilustrasi dari stack view. 

source : developer.apple.com

pada gambar di atas ada stack view yang di dalamnya terdapat 3 komponen yaitu : label, image view dan button. saat kita memasukkan komponen2 tersebut kedalam stack view, mereka otomatis langsung berurutan seperti di atas sesuai posisi urutan yang kita mau.

sudah paham kan? oke, kita langsung lanjut ke langkah langkahnya.

1. Buat project xcode
2. Masuk ke storyboard, tekan command+shift+L > pilih stack view vertical


3. Drag and drop di storyboard. pastikan urutan komponen seperti gambar dibawah.

4. Tambahkan 3 button di dalam stack view.

note: pada langkah ini kita sudah bisa melihat bahwa 3 componen yang kita tambahkan tadi langsung bertumpuk sejajar saat kita masukkan satu2. itulah gunanya stack view (vertical).

5. buat agar stackview memiliki rata tengah horizontal dan vertical. dengan cara klik align menu pada kanan bawah storyboard > lalu klik centang horizontal dan vertical > add constraint.


note : pada langkah ini harusnya component stack view sudah di tengah vertical dan horizontal.

6.  Tambahkan asset untuk mempercantik halaman login kita. klik Assets.xcassets > drag and drop asset dari finder ke dalam xcode. seperti berikut



7.  tambahkan 2 label. satu didalam stack view, lainnya di atas stackview. seperti ini.


8. Ganti properties pada setiap komponen sesuai list dibawah.


  • LabelA (text : "Batavia Hack Town") atau terserah kalian
  • LabelB (text: "Choose your login")
  • ButtonA (title: "Sign in with Facebook", background: "FB", text color: "white")
  • ButtonB (title: "Sign in with Google", background: "google", text color: "black")
  • ButtonC (title: "Sign in with Email", background: "email", text color: "black")
  • StackView (spacing: 10, distribution: "fill equal")
sehingga terlihat seperti ini


9. tambahkan constrain pada LabelA dengan cara seperti berikut .



dan hasilnya akan jadi seperti ini .


10. tambahkan sedikit property pada LabelA untuk mempercantik. 

LabelA (font style: light, font size: 50)

11. tambahkan image view, lalu ganti property image pada imageview menjadi "background" lalu ganti content mode menjadi "aspect fill". tambahkan constraint sesuai dengan gambar dibawah ini. 


note: pastikan constrain yang di tuju adalah super view, seperti berikut.



setelah itu hasilnya akan seperti ini.


here we are, sudah selesai lah kita pada akhir tutorial ini. apabila ada pertanyaan silahkan layangkan di komentar. good luck and thankyou :) 

Search