Berkenalan dengan CocoaPods

What is CocoaPods?

Cocoapods adalah dependency-manager untuk XCode projects. Cara penggunaan yang mudah dan sederhana membuat Cocoapods banyak digunakan oleh Cocoa user. Oke, mungkin masih ada yang bingung apa itu dependency-manager. Dependency manager adalah suatu module yang akan mengatur dependency, sebut saja library, yang akan kita gunakan di project. Misalnya saja kita ingin membuat sebuah Picker dengan suatu tampilan yang bisa dicustomize, kita punya 2 pilihan yaitu membuatnya sendiri atau menggunakan 3rd party library, misalnya saja dari Kingfisher yang dibahas di artikel ini.

"Do not reinvent the wheel"

Familiar dengan kata-kata di atas? Dalam kasus ini kita bisa saja membuat Picker itu jika tidak ada orang di luar sana yang telah membuat dan membagikannya, namun jika ada library yang telah dibuat, dibagikan, dan memenuhi kebutuhan kita maka lebih baik jika kita menggunakannya. Dengan begitu maka kita bisa mengalihkan waktu pembuatan Picker untuk proses lain yang lebih membutuhkan. Cara paling mudah untuk menggunakan library yang sudah dibuat dan dibagikan oleh orang lain di github adalah menggunakan CocoaPods

Why use CocoaPods?

1. Mudah di-install
2. Mudah digunakan
3. Banyak library yang sudah support instalasi menggunakan CocoaPods
4. Besar komunitasnya
5. Reliable

Installing CocoaPods

Instalasi sangat mudah, cukup buka terminal dan ketikkan line berikut :

sudo gem install cocoapods

How to use CocoPods

Buka terminal, lalu arahkan current directory ke dalam project anda lalu ketikkan line berikut :

pod init

Contohnya : 

Selanjutnya, di file project anda akan ada beberapa file baru yaitu Podfile, Podfile.lock, [nama_project].xcoworkspace, dan folder Pods.

Anda cukup memperhatikan Podfile dan [nama_project].xcoworkspace.

Podfile adalah tempat anda mendaftarkan library yang akan digunakan di project.

[nama_project].xcoworkspace adalah file yang perlu anda gunakan saat membuka project. Anda wajib  menggunakan .xcoworkspace jika menggunakan pods agar library yg anda gunakan bisa di-load ke project. Jika menggunakan .xcodeproj maka library yang diinstall mengunakan CocoaPods tidak akan dikenali di project.

Is there any alternatives?

Tentu saja ada alternatif lain dari CocoaPods, alternatif ini adalah Carthage dan Swift Package Manager

Sharing is Caring

References :

https://cocoapods.org/

https://github.com/CocoaPods

https://github.com/Carthage/Carthage

https://github.com/apple/swift-package-manager

popapp, Solusi Mobile Prototyping yang Mudah dan Cepat

When you have no time to design on Photoshop or Sketch for your prototype, paper and popapp.in is the solution.

popapp.in yg memiliki kepanjangan dari prototyping on paper, yang merupakan salah satu app yang memudahkan kita untuk membuat prototype hanya dengan pensil, kertas dan popapp. Selain popapp, masih ada marvelapp, namun dari sisi review di google play, jumlah reviewer popapp 3 kali lipat lebih banyak, so it’s easy to decide which should be downloaded ^^
Berhubung saya tidak bisa menggambar maka saya membutuhkan panduan untuk menggambar, saya menggunakan sketch nexus yg saya download dari web popapp, dan kemudian saya print.

Dengan menggunakan sketch tersebut, gambarlah manual mockup yang diperlukan, berikut merupakan contoh beberapa mockup yang saya buat.

Sebelum bisa menggunakan popapp, kita harus melakukan sign up terlebih dahulu (free). Free user popapp hanya mendapat fasilitas 1 sample project dan 1 slot untuk project yang akan kita buat.

Setelah sukses melakukan sign up, login di mobile app nya dan create project, tampilan nya kira-kira akan seperti di bawah ini, Test merupakan project yang saya buat.

Selanjutnya adalah, masuk ke dalam project, dan import mockup (bisa dengan take photo atau import gallery). Yang saya lakukan adalah dengan melakukan take photo langsung dari popapp. Saya memilih dengan take photo langsung dari popapp, karena di kamera popapp terdapat borderline yang berguna untuk menentukan batas gambar yg akan diambil, sehingga mockup kita tidak terpotong .

     

Ketika sudah mengimport semua mockup, langkah selanjutnya adalah menambahkan gesture, action, atau link action dengan mockup yang lain. Yang saya lakukan di Mockup adalah, jika card Batch 1 di-tap maka akan directed ke Mockup-2,lakukan untuk semua mockup, berikut merupakan gambarannya.

        

Ketika semua mockup sudah di link dan diberi action, maka hasilnya bisa langsung dipreview, berikut merukapan contoh nya (tap button button yang ada, termasuk floating button "+" untuk melakukan simulasi).

happy prototyping! ^^v

Disclaimer : penulis bukanlah seorang designer dan tidak expert dalam ux/ui design.

Say Hello to Ionic Framework

Di postingan sebelumnya kami sempat membahas bagaimana membuat mobile apps menggunakan hybrids technology (phonegap). Dimana Phonegap memungkinkan kita membuat mobile apps hanya dengan menggunakan HTML, CSS dan Javascript.

Tetapi pada saat kita melakukan development menggunakan phonegap, kita masih diharuskan untuk melakukan design dan menambahkan framework javascript sendiri untuk mendukung proses development.

Dikesempatan kali ini kita akan membahas membuat aplikasi mobile menggunakan Ionic Framework. Ionic adalah HTML5 native app development framework yang membantu kita untuk membuat hybrids mobile apps.

Ionic Framework berfokus pada meningkatkan tampilan dari mobile apps dan juga meningkatkan fungsional dari UI interaction dari aplikasi. Ionic sendiri bekerja diatas cordova dan phonegap, hanya saja Ionic menambahkan beberapa component yang dibutuhkan dalam melakukan development mobile apps.  Berikut beberapa component yang disediakan oleh Ionic:

1. CSS Components, dengan memanfaatkan css component dari Ionic kita dimudahkan untuk membuat tamplate yang berorientasi mobile.
2. Sass, Ionic juga menginclude Sass, sehingga kita akan jauh lebih dimudahkan dalam menghandle css diaplikasi.
3. Javascript extension, Tidak hanya menggunakan AngularJs sebagai javascript framework, Ionic juga menambahkan beberapa javascript component yang nantinya berguna untuk menghandling event-event di aplikasi yang sifatnya lebih mobile oriented.
4. CLI, Ionic juga menyediakan beberapa perintah command line yang nantinya berguna untuk membuild, run dan testing aplikasi.
5. Ionicons, Kumpulan Icon yang disediakan oleh ionic. 

Berikut langkah-langkah yang untuk instalasi dan membuat sample app menggunakan Ionic Framework.

1. Pastikan kalau Node.js sudah terinstal di komputer kalian.
2. Masuk ke command line dan jalankan perintah berikut:  

sudo npm install -g cordova ionic,

3. Setelah menginstall Cordova dan Ionic, kita akan masuk ke proses membuat sample app. berikut adalah perintah untuk membuat sample app.

   ionic start [Nama aplikasi] [Template].

   Di Ionic kita dapat menggunakan beberapa jenis template pada aplikasi kita, yaitu Tabs, Sidemenu, dan Blank.
   
   
4. Setelah itu ionic akan mengenerate mobile app kita dan membuat struktur code seperti berikut: 
   
5. Selanjutnya kita akan menjalankan aplikasi yang barusan kita buat. Pada contoh kali ini saya akan menjalankan aplikasi untuk iOS jadi yang harus saya lakukan adalah menambahkan platform di aplikasi kita untuk iOs, jalankan perintah berikut di command line: 

   $ cd [nama_aplikasi]/

   $ ionic platform add ios

6. Selanjutnya build aplikasi:

   $ ionic build ios

7. dan jalankan aplikasi:

   $ ionic emulate ios

   dan voilà, aplikasi kita langsung bisa dijalankan di iOS simulator
   
   
   
   

note: jika terjadi error pada saat menjalankan apikasi ke simulator, jalankan perintah berikut: 

$ npm install -g ios-sim

Phonegap tutorial

Saya akan membahas pembuatan aplikasi mobile menggunakan hybrid teknologi yaitu Cordova. Cordova adalah tools untuk pengembangan aplikasi mobile menggunakan teknologi Web (HTML, CSS & JavaScript) dan cross platform development (ios, android dll) . Cordova juga menyediakan API untuk mengakases native device seperti camera / accelerometer. 

Berikut langkah - langkah untuk instalasi cordova dan sample app:

1. Pastikan anda sudah menginstall nodejs, silahkan download di https://nodejs.org/
2. Buka cmd dan jalankan instruksi ini :

   
   sudo npm install -g cordova
   

3. Langkah berikutnya mari kita buat sample project :

   
   
   cordova create sampleApp com.nostratech.sample HelloWorld
   
   

   Setelah menjalankan instruksi diatas akan struktur folder seperti berikut:

   sampleApp/
       config.xml
       hooks
       platforms
       plugins
       www
           

4. Tambahkan platform (ios, amazon-fireos, android dll), pada kali ini saya hanya menambahkan platform android:

   
   cordova platform add android
   

   
   
5. Langkah terakhir mari kita build & jalankan di emulator android

   
   cordova build 
   cordova emulate build 
   

Sample App

Nah untuk melakukan development kalian bisa menaruh file js, html , css dan img di folder www.

Sekian blog dari saya :)