Encoding vs Hashing vs Encrypting vs Obfuscation

Hi all, i wanna share my little experience. I’m still working with ionic.

Now, i learn about data security in mobile application. I learn from the very basic, and it drives me into data encryption. I build a little application to explore. The condition is : this application will work offline and online. When it works offline, the data will saved on the phone storage (local). This can be done by using sqlite (for example). And, the data is so important so we want to protect.

As the authentication i just use basic auth, nice artikel is here https://luckymarmot.com/paw/doc/auth/basic-auth and i still learning to use JWT (JSON Web Token) for authentication, login credentials etc. Next time, i’ll share. Now, i wanna talk about encode, hash and encrypt. I’ve read some article and i’ll share it with you.


The purpose of encoding is to transform data so that it can be properly (and safely) consumed by a different type of system, e.g. binary data being sent over email, or viewing special characters on a web page. The goal is not to keep information secret, but rather to ensure that it’s able to be properly consumed.

Encoding transforms data into another format using a scheme that is publicly available so that it can easily be reversed. It does not require a key as the only thing required to decode it is the algorithm that was used to encode it.

Examples: ASCII, Unicode, URL Encoding, Base64



Hashing is a type of algorithm which takes any size of data and turns it into a fixed-length of data.  Hashing is a one way function. It’s irreversible, you apply the secure hash algorithm and you cannot get the original string back.

Some hashing algorithms:

  • MD-5
  • SHA-1
  • SHA-2
  • SHA-3

When to use hash? 

We can use it to store password, as hashes are inherently one-way in their nature. By storing passwords in hash format, it’s very difficult for someone with access to the raw data to reverse it (assuming a strong hashing algorithm and appropriate salt has been used to generate it). 

When storing a password, hash it with a salt, and then with any future login attempts, hash the password the user enters and compare it with the stored hash. If the two match up, then it’s virtually certain that the user entering the password entered the right one.


Encryption turns data into a series of unreadable characters, that aren’t of a fixed length. The key difference between encryption and hashing is that encrypted strings can be reversed back into their original decrypted form if you have the right key. 

There are two primary types of encryption, symmetric key encryption and public key encryption. In symmetric key encryption, the key to both encrypt and decrypt is exactly the same. This is what most people think of when they think of encryption. 

Public key encryption by comparison has two different keys, one used to encrypt the string (the public key) and one used to decrypt it (the private key). The public key is is made available for anyone to use to encrypt messages, however only the intended recipient has access to the private key, and therefore the ability to decrypt messages.

Popular algorithm : 

  • AES – AES is the “gold standard” when it comes to symmetric key encryption, and is recommended for most use cases, with a key size of 256 bits.
  • PGP – PGP is the most popular public key encryption algorithm
  • RSA
  • DES

When should be used?

The purpose of encryption is to transform data in order to keep it secret from others, e.g. sending someone a secret letter that only they should be able to read, or securely sending a password over the Internet. Rather than focusing on usability, the goal is to ensure the data cannot be consumed by anyone other than the intended recipient(s).

If you have a usecase where you have determined that encryption is necessary, you then need to choose between symmetric and public key encryption. Symmetric encryption provides improved performance, and is simpler to use, however the key needs to be known by both the person/software/system encrypting and decrypting data.

If you were communicating with someone on the other side of the world, you’d need to find a secure way to send them the key before sharing your secure messages. If you already had a secure way to send someone an encryption key, then it stands to reason you would send your secure messages via that channel too, rather than using symmetric encryption in the first place. 


The purpose of obfuscation is to make something harder to understand, usually for the purposes of making it more difficult to attack or to copy. One common use is the the obfuscation of source code so that it’s harder to replicate a given product if it is reverse engineered.

It’s important to note that obfuscation is not a strong control (like properly employed encryption) but rather an obstacle. It, like encoding, can often be reversed by using the same technique that obfuscated it. Other times it is simply a manual process that takes time to work through.

Another key thing to realize about obfuscation is that there is a limitation to how obscure the code can become, depending on the content being obscured. If you are obscuring computer code, for example, the limitation is that the result must still be consumable by the computer or else the application will cease to function.(source)


  • Encoding is for maintaining data usability and can be reversed by employing the same algorithm that encoded the content, i.e. no key is used.
  • Encryption is for maintaining data confidentiality and requires the use of a key (kept secret) in order to return to plaintext.
  • Hashing is for validating the integrity of content by detecting all modification thereof via obvious changes to the hash output.
  • Obfuscation is used to prevent people from understanding the meaning of something, and is often used with computer code to help prevent successful reverse engineering and/or theft of a product’s functionality. (source)

Ionic 1 vs Ionic 2 April 2016 : What should i use?

Hello again guys, after exploring ionic framework for several times, now let’s discuss about ionic 1 and ionic 2 (which is now is still in beta version, current beta 8).

I’ve been learing for the last 2 months (o my good, may be it took so long) *or because no progress on my project, i learn about ionic, both ioinic 1 and 2 (beta). I have 2 projects, at first, both using ionic 2, but at the end, my senior said the project would be in ionic 1 (stable) for development because we don’t have so much time and we need stable version that have everythings work well. As we know, in beta version some function still can’t be used (read,  http://blog.ionic.io/ ) and may be we don’t think much about migration.

As for my second project, until this time i still make it in ionic 2. Because we still have time to build, and we don’t need some complex function right now, we still develop from the very beginning. Have enough time to wait about ionic 2 issues. And with current beta version, we still had enaugh. Based on what i’ve read here.

Ionic 1 using angular 1, ionic 2 using angular 2. Here’s good article for you to read : http://www.joshmorony.com/7-reasons-why-ionic-2-is-better-than-ionic-1/

I’ll write some for you :

  1. Organization and Structure
    In Ionic 2, every page or component in your application has its own folder with its own class file, template file and style file. If I have two pages in my application, Home and About, I would have the following structure :

    • home
      • home.js
      • home.html
      • home.scss
    • about
      • about.js
      • about.html
      • about.scss

    While ionic 1 project collect all html files in templates folder, and all js files in js folder, but you can still organized your ionic project file just like the structure above, but it’s not the default style that was used. It would require prior knowledge and motivation to achieve a sensible and scalable structure like this in Ionic 1.

  2. Toolingionic g page mypage

    you run it from CLI, and you would have MyPage folder with the following :

    • mypage
      • mypage.js
      • mypage.html
      • mypage.scss

    With the Ionic 2 CLI you can automatically generate pages, providers, tabs, pipes, components and directives and it will set up all the files you need and some boiler plate code for you.

  3. Navigation
    with ionic 1 you need to define $stateProvider like this

      .state('intro', {
        url: '/',
        templateUrl: 'templates/mypage.html',
        controller: 'IntroCtrl'

    and for ionic 2 , you can do it just like this
    you can push a page onto the navigation stack to make it the current page, and you can pop a page to remove it from the navigation stack and go back to the previous page. Just like pushing and popping an array.

  4. Template syntax
    Ionic 1:

    <img ng-src="{{photo.image}}" />

    Ionic 2:

    <img [src]="photo.image" />

    The difference here is inconsequential really, but the second code block certainly looks cleaner. Here’s another example:

    Ionic 1:

    <button ng-click="doSomething()">

    Ionic 2:

    <button (click)="doSomething()">
  5. Building
    In Ionic 2 almost all of your coding will be done inside of the app folder, which is completely separate to the www folder which contains the code that is actually served to the browser. When you run an Ionic 2 application, the code in the app folder is automatically transpiled and bundled into a single Javascript file which is copied into the www folder and served. For the most part, you don’t have to touch your index.html file at all.

    Of course, you can read more about it here : http://www.joshmorony.com/7-reasons-why-ionic-2-is-better-than-ionic-1/ and Josh Morony also provide a good e-book for us to learn about ionic 2, it’s so helpful.  You can also buy it here : https://www.joshmorony.com/building-mobile-apps-with-ionic-2/?utm_source=homepage&utm_medium=banner&utm_campaign=incontent#buy

    Also, if you already have ionic 1 project, may be you want to read about ionic 2 migration here : http://ionicframework.com/docs/v2/getting-started/migration/

    Thanks for visiting my blog! Cheers ^^,

Create Simple Accordion with ionic and angular

Banyak trik bisa kita lakukan untuk membuat tampilan accordion, di jquery kita bisa tinggal pakai saja function yang ada. Nah kali ini saya mau share sedikit tentang ionic dan angular. Tapi kali ini saya melakukannya dengan ionic 1, karena memang sedang ada project dengan menggunakan framework ini meski pada beberapa post sebelumnya saya sempat ngeshare tentang ionic2, tenang, yang ionic 2 saya juga terus pakai kok, nanti akan saya share.

How to get start with Ionic 2

Choosing best mobile apps technology : native vs hybrid

About ionic creator

Ionic vs OnsenUI : UI Framework for Hybrid Mobile Apps 

How to install phonegap for android apps development

Kali ini, saya membuat tampilan accordion simple saja, saya tidak banyak cuma butuh 2, jadi untuk animasinya saya cukup pakai css. Saya menggunakan ng-show ini dari angular. Oke, langsung aja kita liat code nya

Sederhana, untuk header accordionnya saya cuma pakai list divider dari component ionic, tinggal saya modif sedikit seperti ini:

the html

<ion-item class=”item-icon-right item-divider”
ng-class=”{active: isGroupShown(‘A’)}”>
<i class=”icon” ng-class=”isGroupShown(‘A’) ? ‘ion-chevron-up icon-accessory’ : ‘ion-chevron-down icon-accessory'”></i>
List Group A


<!– ************************* LIST GROUP A *******************************************–>
<ion-item class=”item-remove-animate item-icon-right item-accordion” ng-repeat=”list in listdata” type=”item-text-wrap” ng-show=”isGroupShown(‘A’)” href=”#/detail”>
<h2>Barang {{list .name}}</h2>
<p>{{list .message}}</p>
<i class=”icon ion-chevron-right icon-accessory”></i>


itu untuk satu group, kalo mau nambah lagi tinggal tambahin code yang sama, cuma tinggal ganti nama grupnya aja itu misal jadi isGroupShown(‘B’). So its very simple, kalo mau yang lebih kompleks, bisa ja sih, but this is easier, hhaaaaaaa..

note : ini datanya saya ngambil dari service sederhana saja, cuma array :

.service(‘listdata’, function() {
return {
lists: [
{id: “1”,name : “A”,message: “Detail Informasi A”},
{id: “2”, name : “B”,message: “Detail Informasi B”},
{id: “3”, name : “C”,message: “Detail Informasi C”},
{id: “4”, name : “D”,message: “Detail Informasi D”},
{id: “5”, name : “E”,message: “Detail Informasi E”},
{id: “6”, name : “F”,message: “Detail Informasi F”}

getLists: function() {
return this.lists;
getList: function(listId) {
for(i=0;i<this.lists.length;i++) {
if(this.lists[i].id == listId) {
return this.lists[i];


okey, then the css; ini penting yah buat transisi pas itemnya dibuka dan ditutup, biar lebih halus, coba liat sendiri perbedannya yah, hapus aja line yang pertama dan bandingkan hasilnya..

.list .item.item-accordion {transition: 0.09s all linear;}
.list .item.item-accordion.ng-hide {line-height: 0px;}
.list .item.item-accordion.ng-hide-add,
.list .item.item-accordion.ng-hide-remove {display: block !important;}


and then the .js file tinggal taruh didalam controller nya saja:

$scope.shownGroup=null; //default nutup semua

$scope.isGroupShown = function(group) {
return $scope.shownGroup === group;
$scope.toggleGroup = function(group) {
if ($scope.isGroupShown(group)) {
$scope.shownGroup = null;
} else {
$scope.shownGroup = group;


Enjoyyy, atau kalian bisa mampir kesini -> https://codepen.io/ionic/pen/uJkCz

How to get start with Ionic 2

Now, i wanna share about how to start with ionic. Official site ; http://ionicframework.com/

Ionic 2 is still in beta release but, you may want to read about ionic 1 and 2 and should you upgrade to ionic 2 or not ->  here.

First of all you have to make sure this following things already installed to your computer :

  1. Android SDK
  2. Java JDK
  3. NodeJS
  4. AntJS
  5. Cordova Latest Version

And now, we’re ready to start about ionic. http://ionicframework.com/getting-started/

For you who just heard about ionic, you can visit my previos post about ionic right here.

We use Nodejs command line tools to run ionic command , you can read more here https://www.npmjs.com/package/ionic

  1. Install ionic
    $ npm install -g ionic@beta
  2. Create Project
    use –v2 to create ionic 2 project, if you do not add this line, it will install ionic 1 by default. ex : $ ionic start myApp ==> ionic 1 version

    $ ionic start myApp [template] --v2
    $ ionic start myApp tabs --v2 
    ionic create porject

    ionic create porject

    I can’t believe i’m having trouble when start ionic project, the installation is stuck on “installing npm packages…” this command try to call the npm packages source but i’ve been waiting for an hour and theres nothing changed. I terminated it, and then try to start a project test again and still the same. My friend, Hadi, wait for it, so long but end up with an error. My senior said, how about restart the PC? Then me and my friend doing that, and still failed. And then, we both try to uninstall the cordova, the ionic again and when start project it is still failed. We spent the day by doing that and still not working. I can’t believe i had something trouble like this, so frustating and finally,  i think this is about the connection -_- Okay, i start again this day. And i try to use my own connection instead of office’s. And i am get through it. Oh my god, i can’t belive, my senior said: ya, because office connection is too slow -_-

  3. Add platform
    $ cd myApp
    $ ionic platform add android
    $ ionic build android
    Oh, and let me show you my ionic info by run this command -> $ ionic info

    ionic info

    ionic info

  4. Emulate project
    $ ionic emulate android
  5. Run Project
    $ ionic run android
  6. Run in browsers
    $ ionic serve or $ ionic serve lab
    Next, i have to learn the components~ okay, noted! start from today yo! :D
  7. And here some commands that can help you :
    $ ionic g page detail -> will generate your page named 'detail' . A folder 'detail' and by contain detai.html, detail.js and detail.scss like this one :
    g page
    $ ionic g provider mydata -> will add new file named "mydata.js" under provider folder


Mudahnya Membuat Prototype Mobile App Dengan Ionic Creator

Hi, semuanya..

Lama saya tidak menulis, kali ini saya akan membahas tentang ionic framework!

Yah, saya tertarik dengan framwork yang satu ini, utamanya soal desainnya yang native-like, mendekati native. Saat ini, ionic sendiri memang masih beta (http://blog.ionic.io/announcing-ionic-framework-2-beta/) Namun ionic merupakan framework yang bagus dan membuat saya tertarik, sehingga saya jadi rajin mengunjungi lamannya. Saya juga  sudah mencoba beberapa aplikasi yang dibuat dengan ionic, dan memang hasilnya bagus ya, just like native.

Seperti yang saya utarakan tadi, saya akan lebih membahas soal desain, ada apa sih dengan desain di ionic?

Perkenalkan, creator ionic!


Creator is a drag-&-drop prototyping tool for creating great apps using Ionic, with just a click of the mouse.

Pertama, buka laman https://creator.ionic.io kemudian, sign up account. Setelah itu kita akan masuk dashboard kemudian, tinggal klik new project! Start using creator! 😀


And this is your dashboard :

mylovelycode - creator ionic

mylovelycode – creator ionic

Yups, tinggal drag and drop aja components yang kamu mau. Mudah kan? Seperti di android studio atau eclipse ya untuk desain formnya. Tapi ini lebih mudah dan simple! Oya untuk hasil desain kita, ada 4 pilihan yang disediakan, seperti dibawah ini. Tinggal pilih, mau yang mana? 😀


Maven, Continuum dan Artifactory

Menyusul tulisan-tulisan yang sebelumnya, explore sesuatu, sudah didokumentasikan, maka sekaranglah saatnya untuk dibagi *meski agak telat juga, karna ini hasil explorasi bulan juni -_-

Ini adalah hasil explorasi untuk mengintegrasikan library yang kami miliki untuk keperluan development program, karena kadang2 ketika kita develop, push ke repo, kadang ada error karena librarynya yang belum di add, atau mungkin berbeda versi, atau bisa jadi library yang udah di tambahkan ternyata memiliki depedency pada library yang lain dan seterusnya, nah, repot? dan kita maunya project itu di build di satu tempat aja.. so, kita mau pakai maven, continuum dan artifactory untuk dijalankan beriringan biar kayak penganten *ups*

  1. Continuum
    Salah satu program Intergrasi server berkesinambungan (Continous Integration Server) yang memungkinkan bagian-bagian suatu project dikerjakan oleh perseorangan namun dibangun dalam satu server dan dibuild pada satu tempat, sehingga pembaharuan program dapat di kontrol dan hasil suatu program dapat seragam dan merata. Beberapa fitur dari Apache Continuum adalah :

    • Automated build
    • Relese management
    • Scheduler
    • Role-based security
  2. Maven
    Maven merupakan alat untuk melakukan build secara otomatis yang digunakan terutama untuk project Java. Kelebihan dari Maven adalah mampu mendeskripsikan sendiri kebutuhan software yang akan dibangun dan mampu mendeskripsikan dependency-nya atau bahkan mencarikan dependency yang dibutuhkan. Maven membahas 2 aspek dalam membangun project yaitu :

    • Mendeskripsikan bagaimana perangkat lunak akan dibangun
    • Mendeskripsikan dependency-nya
  3. Artifactory
    Artifactory merupakan local repository yang berisi kumpulan library yang diperlukan dalam membangun suatu project. Beberapa kelebihan Artifactory adalah:
  • Kemudahan administrasi artifactin house”, library dependency yang di bangun internal
  • Artifactory sangat membantu menyediakan library lokal dalam suatu jaringan intranet
  • Artifactory memungkinkan sync secara otomatis dengan central repository.
  • Mudah untuk untuk mengexport atau mengimport repository.
  • Memudahkan dalam management library.

Baiklah, supaya ga repot kemana-mana, jadi saya unggah saja makalah yang telah kami buat.

Silahkan yang ingin mampir atau sekedar lihat-lihat ^_^

Download Makalah Maven, Continuum dan Artifactory

Choosing Best Mobile Apps Technology : Native vs Hybrid Mobile Apps

Okay, hi again all.. Since my previous article is about starting to build hybrid apps,

So, you may want to comparise hybrid vs native mobile apps.

It’s an age old question that refuses to go away, we thought it was time to revisit… Which one you gonna use?

But, i think we should stop this debate. Going hybrid or native is depend on your own preference, kind of apps you wanna build and what you need to build.

I prefer use hybrid cz its easier for me to adapt. I’m a front-end developer, i knows well about html5, css and jaavscript. Since hybrid allows me to use that kind of development tools, so, hybrid make it easier for me.  And.. i need to build cross-paltorm application ( i need to run my application on android and iOS, but i don’t have basic on objective-C). Also, phonegap provide enaugh API to access hardware capabilities of the mobile device that i need. In this case, i just need camera, acces to gallery, open file browser and gps to detect location.

With hybrid, i can run faster, and low cost, and save time cz its a cross-paltform application.

Native, HTML5, Hybrid mobile apps

Native vs HTML5 Hybrid

Here some useful links for you to help you decide 😀

What is hybrid mobile apps?

Native, HTML 5 or Hybrid : Understanding Your Mobile Application Development Options

Native vs Hybrid Comparison

Choosing The Best Mobile Application Development Technology