Tabyin online adalah blog

1:  package com.roedavan.hello.appweb;  
2:  import android.content.Intent;  
3:  import android.support.v7.app.AppCompatActivity;  
4:  import android.os.Bundle;  
5:  import android.text.style.ClickableSpan;  
6:  import android.view.View;  
7:  import android.widget.Button;  
8:  import android.widget.TextView;  
9:  public class MainActivity extends AppCompatActivity {  
10:    Button button;  
11:    TextView txtview;  
12:    @Override  
13:    protected void onCreate(Bundle savedInstanceState) {  
14:      super.onCreate(savedInstanceState);  
15:      setContentView(R.layout.activity_main);  
16:      button = (Button) findViewById(R.id.button);  
17:      txtview = (TextView) findViewById(R.id.editText);  
18:      button.setOnClickListener(new View.OnClickListener() {  
19:        @Override  
20:        public void onClick(View v) {  
21:          Intent intent = new Intent(getApplicationContext(), WebActivity.class);  
22:          intent.putExtra("url_name", txtview.getText().toString());  
23:          startActivity(intent);  
24:        }  
25:      });  
26:    }  
27:  }  

1:  package com.roedavan.hello.appweb;  
2:  import android.support.v7.app.AppCompatActivity;  
3:  import android.os.Bundle;  
4:  import android.webkit.WebView;  
5:  public class WebActivity extends AppCompatActivity {  
6:    @Override  
7:    protected void onCreate(Bundle savedInstanceState) {  
8:      super.onCreate(savedInstanceState);  
9:      setContentView(R.layout.activity_web);  
10:      String url = getIntent().getStringExtra("url_name");  
11:      WebView webview = (WebView) findViewById(R.id.webView);  
12:      webview.getSettings().setJavaScriptEnabled(true);  
13:      webview.loadUrl(url);  
14:    }  
15:  }  

Woops! Error nih. Tapi tenang, error ini bukan masalah script java kok. 

<uses-permission android:name="android.permission.INTERNET" />  

Proses instalasinya sendiri tidak terlalu sulit kok. Tinggal klik Next-Next-Next dan langsung capsus! 

Pada dialog ini ada 11 template yang bisa anda gunakan. Jangan pilih yang Add No Activity karena kalao begitu apa artinya anda pakai Android Studio kalau untuk pembuatan Activitynya harus ngetik manual? Hehehe. Klik saja yang Empty Activity dan klik Next.

1. Panel Project yang berisi hierarki direktori project anda
2. Panel Toolbox (Pallete) yang berisi widget (seperti label, tombol, textbox dll) untuk dipasang pada aplikasi anda
3. Panel View yang berisi desain layout aplikasi anda
4. Panel Layout Tree dan Properties yang dapat digunakan untuk mengatur atribut setiap widget

Tab ini akan menampilkan layout aplikasi dalam bentuk script. Jadi sebenarnya antara activity_main.xml dan MainActivity.java itu dua file yang berbeda namun akan dieksekusi menjadi satu kesatuan. Semacam Romeo dan Juliet lah begitu. 

1:  package com.roedavan.hello.app01;  
2:  import android.support.v7.app.AppCompatActivity;  
3:  import android.os.Bundle;  
4:  import android.view.View;  
5:  import android.widget.Button;  
6:  import android.widget.EditText;  
7:  public class MainActivity extends AppCompatActivity {  
8:     EditText bil1;  
9:     EditText bil2;  
10:    EditText hasil;  
11:    @Override  
12:    protected void onCreate(Bundle savedInstanceState) {  
13:      super.onCreate(savedInstanceState);  
14:      setContentView(R.layout.activity_main);  
15:      bil1 = (EditText) findViewById(R.id.bil1);  
16:      bil2 = (EditText) findViewById(R.id.bil2);  
17:      hasil = (EditText) findViewById(R.id.hasil);  
18:      Button btn = (Button) findViewById(R.id.button);  
19:      btn.setOnClickListener(new View.OnClickListener() {  
20:        @Override  
21:        public void onClick(View v) {  
22:          int a, b, c;  
23:          a = Integer.valueOf(bil1.getText().toString());  
24:          b = Integer.valueOf(bil2.getText().toString());  
25:          c = a + b;  
26:          hasil.setText(String.valueOf(c));  
27:        }}  
28:      );  
29:    }  
30:  }  

1. Download JDK disini  
   cara install JDK bisa dilihat disini di artikel Membuat Aplikasi Android Berbasis HTML5 dengan Cordova
2. Download dan install Git disini
3. Download dan install software Node.js versi LTS disini
4. ketik di cmd :

    npm -v

   maka akan muncul versi nya
5. install ionic cordova , ketik di cmd :

   npm install -g cordova
6. setelah berhasil install cek dengan ketik di cmd 

     cordova -v
7. install ionic dengan ketik di cmd :

   npm install -g ionic
8. setelah berhasil install cek dengan ketik di cmd : 

     ionic -v
9. install bower . bower ini adalah packet manager yang dibutuhkan dalam pembuatan aplikasi ionic. ketik di cmd dengan:

     npm install -g bower
10. pastikan bower sudah terinstall dengan cek : 

      bower -v
11. install gulp caranya ketik di cmd :

      npm install -g gulp 

    cek versi

      gulp -v

Membuat projek Dongeng Digital sederhana :

1. langkah selanjutnya adalah membuat folder baru , misalnya di drive D: dengan nama folder kisahteladan
2. Buka cmd, lalu arahkan ke folder kisahteladan , karena saya menyimpan di data D dan nama foldernya kisahteladan beserta nama projeknya app_kisah , maka ini perintah cmd nya : 
   

   D:
   
   cd kisahteladan/app_kisah

1. kemudian enter dan ketikan baris perintah berikut untuk membuat project dengan nama app_kisah. kemudian ketik di cmd :

   ionic start app_kisah
2. maka library ionic pada projek app_kisah akan di donload
3. jika muncul pesan notif dilewatkan saja dengan mengetik n lalu enter. dan projek app_kisah sudah selesai di buat  yeayyyy :) :)

ionic serve

edit Template Default Ionic

<ion-view view-title="Kisah Teladan Rasul">

  <ion-content class="padding login" >   

  </ion-content>

</ion-view>

.login{
background: url(../img/login.png) center;  /*ini adalah gambar kartun anak sesuai selera yang dimpan di folder img*/
background-size: cover;
}

angular.module('starter.services', [])

.factory('Chats', function() {

  // Might use a resource here that returns a JSON array

  // Some fake testing data

  var chats = [{
id: 0,
name: 'Nabi Muhammad SAW',
lastText: 'Pengemis Buta Di pasar Madinah',
content:'Di sudut pasar Madinah Al-Munawarah seorang pengemis Yahudi buta hari demi hari apabila ada orang yang mendekatinya ia selalu berkata "Wahai saudaraku jangan dekati Muhammad, dia itu orang gila, dia itu pembohong, dia itu tukang sihir, apabila kalian mendekatinya kalian akan dipengaruhinya". Setiap pagi Rasulullah SAW mendatanginya dengan membawa makanan, dan tanpa berkata sepatah kata pun Rasulullah SAW menyuapi makanan yang dibawanya kepada pengemis itu walaupun pengemis itu selalu berpesan agar tidak mendekati orang yang bernama Muhammad. Rasulullah SAW melakukannya hingga menjelang Beliau SAW wafat. Setelah kewafatan Rasulullah tidak ada lagi orang yang membawakan makanan setiap pagi kepada pengemis Yahudi buta itu.Suatu hari Abubakar r.a berkunjung ke rumah anaknya Aisyah r.ha. Beliau bertanya kepada anaknya, "anakku adakah sunnah kekasihku yang belum aku kerjakan", Aisyah r.ha menjawab pertanyaan ayahnya, "Wahai ayah engkau adalah seorang ahli sunnah hampir tidak ada satu sunnah pun yang belum ayah lakukan kecuali satu sunnah saja". "Apakah Itu?", tanya Abubakar r.a. Setiap pagi Rasulullah SAW selalu pergi ke ujung pasar dengan membawakan makanan untuk seorang pengemis Yahudi buta yang berada di sana", kata Aisyah r.ha.Ke esokan harinya Abubakar r.a. pergi ke pasar dengan membawa makanan untuk diberikannya kepada pengemis itu. Abubakar r.a mendatangi pengemis itu dan memberikan makanan itu kepada nya. Ketika Abubakar r.a. mulai menyuapinya, si pengemis marah sambil berteriak, "siapakah kamu ?". Abubakar r.a menjawab, "aku orang yang biasa". "Bukan !, engkau bukan orang yang biasa mendatangiku", jawab si pengemis buta itu. Apabila ia datang kepadaku tidak susah tangan ini memegang dan tidak susah mulut ini mengunyah. Orang yang biasa mendatangiku itu selalu menyuapiku, tapi terlebih dahulu dihaluskannya makanan tersebut dengan mulutnya setelah itu ia berikan pada ku dengan mulutnya sendiri", pengemis itu melanjutkan perkataannya.Abubakar r.a. tidak dapat menahan air matanya, ia menangis sambil berkata kepada pengemis itu, aku memang bukan orang yang biasa datang pada mu, aku adalah salah seorang dari sahabatnya, orang yang mulia itu telah tiada. Ia adalah Muhammad Rasulullah SAW. Setelah pengemis itu mendengar cerita Abubakar r.a. ia pun menangis dan kemudian berkata, benarkah demikian?, selama ini aku selalu menghinanya, memfitnahnya, ia tidak pernah memarahiku sedikitpun, ia mendatangiku dengan membawa makanan setiap pagi, ia begitu mulia.... Pengemis Yahudi buta tersebut akhirnya bersyahadat dihadapan Abubakar r.a.',
face: 'img/pengemis.jpg'


}, {


id: 1,
name: 'Nabi Muhammad SAW',
lastText: 'Gadis Yatim di Madinah',
content:'Di suatu pagi pada hari raya Idul Fitri, Rasulullah SAW bersama keluarganya dan beberapa sahabatnya seperti biasanya mengunjungi rumah demi rumah untuk mendo’akan para muslimin dan muslimah agar merasa bahagia di hari raya itu. Alhamdulillah, semua terlihat merasa gembira dan bahagia di Hari Raya Ied tersebut, terutama anak-anak. Anak-anak bermain sambil berlari-lari kesana kemari dengan mengenakan pakaian hari rayanya. Namun tiba-tiba Rasulullah saw melihat di sebuah sudut adaseorang gadis kecil sedang duduk bersedih.Ia memakai pakaian tambal-tambal dan sepatu yang telah usang. Rasulullah saw lalu bergegas menghampirinya. Gadis kecil itu menyembunyikan wajahnya dengan kedua tangannya, lalu menangis tersedu-sedu. Rasulullah kemudian meletakkan tangannya yg putih sewangi bunga mawar itu dengan penuh kasih sayang di atas kepala gadis kecil tersebut, lalu bertanya dengan suaranya yang lembut :“Anakku, mengapa engkau menangis? Bukankah hari ini adalah hari raya?”Gadis kecil itu terkejut bukan kepalang. Tanpa berani mengangkat kepalanya dan melihat siapa yang bertanya, perlahan-lahan ia menjawab sambil bercerita : “Pada hari raya yang suci ini semua anak menginginkan agar dapat merayakannya bersama orang tuanya dengan berbahagia. Semua anak-anak bermain dengan riang gembiranya. Aku lalu teringat pada Ayahku, itu sebabnya aku menangis. Ketika itu hari raya terakhir bersamanya. Ia membelikan aku sebuah gaun berwarna hijau dan sepatu baru. Waktu itu aku sangat bahagia. Lalu suatu hari ayahku pergi berperang bersama Rasulullah membela Islam dan kemudian ia meninggal. Sekarang ayahku sudah tidak ada lagi Aku telah menjadi seorang anak yatim. Jika aku tidak menangis untuknya, lalu untuk siapa lagi?” Setelah Rasulullah saw mendengar cerita itu, seketika hatinya diliputi kesedihan yang mendalam. Dengan penuh kasih sayang beliau membelai kepala gadis kecil itu sambil berkata: “Anakku, hapuslah air matamu…Angkatlah kepalamu dan dengarkan apa yang akan aku katakan kepadamu…. Apakah kamu ingin agar aku Rasulullah menjadi ayahmu? Dan apakah kamu juga ingin Ali menjadi pamanmu?. Dan apakah kamu juga ingin agar Fatimah menjadi kakak perempuanmu?….dan Hasan dan Husein menjadi adik-adikmu? dan Aisyah menjadi ibumu ?. Bagaimana pendapatmu tentang usul dariku ini?” Begitu mendengar kata-kata itu, ia langsung berhenti menangis. Ia memandang dengan penuh takjub orang yang berada tepat di hadapannya. Gadis yatim kecil itu sangat tertarik pada tawaran Rasulullah SAW, namun entah mengapa ia tidak bisa berkata sepatah katapun. Ia hanya dapat menganggukkan kepalanya perlahan sebagai tanda persetujuannya. Gadis yatim kecil itu lalu bergandengan tangan dengan Rasulullah saw menuju ke rumah. Sesampainya di rumah, wajah dan kedua tangan gadis kecil itu lalu dibersihkan dan rambutnya disisir. Semua memperlakukannya dengan penuh kasih sayang. Gadis kecil itu lalu dipakaikan gaun yang indah dan diberikan makanan dan uang hari raya. Lalu ia diantarnya gadis itu keluar, agar dapat bermain bersama anak-anak lainnya. Anak-anak lain merasa iri pada gadis kecil dengan gaun yang indah dan wajah yang berseri-seri itu. Mereka merasa keheranan, lalu ia berkata : “Akhirnya aku memiliki seorang ayah! Di dunia ini, tidak ada yang bisa menandinginya! Siapa yang tidak bahagia memiliki seorang ayah seperti Rasulullah? Aku juga kini memiliki seorang paman, namanya Ali yang hatinya begitu mulia. Juga seorang kakak perempuan, namanya Fatima Az`Zahra. Ia menyisir rambutku dan mengenakanku gaun yang indah ini. Aku merasa sgt bahagia dan bangga memiliki adik adik, hasan dan husein Aku juga kini memiliki seorang ibu, namanya Aisyah, dan ingin rasanya aku memeluk seluruh dunia beserta isinya.” Maka anak-anak yang sedang bermain dengannya sampai berkata: “Ah, seandainya ayah-ayah kita mati terbunuh ketika perang itu tentu kita akan begitu.”Syahdan tatkala Nabi saw meninggal dunia, anak kecil itu keluar seraya menaburkan debu ke atas kepalanya meminta tolong sambil memekik: “Aku sekarang menjadi anak asing dan yatim lagi.” Subhanallah, Kasih sayang Rasulullah senantiasa hadir bagi setiap insan ',
face: 'img/arya.jpg'
}, {

    id: 2,

    name: 'Nabi Ayub AS',

    lastText: 'Kisah Nabi Ayub Menjalani Cobaan Berat',

    content:'Nabi Ayyub A.S adalah salah satu nabi yang di utus Allah di negeri Syam. Nabi Ayyub adalah keturunan nabi Ishaq a.s. bin nabi ibrahim a.s, Ibunya Nabi ayyub adalah putri dari nabi luth a.s sedangkan istri nabi ayyub a.s. bernama rahmah Nabi Ayyub a.s tergolong orang yang kaya raya, tetapi tidak sombong dan juga tidak kikir, suka menolong orang tanpa memandang golongan, pangkat dan jabatan, beliau melakukan itu semata mata karena Allah dengan hati yang ikhlas, Nabi Ayuub a.s. tidak pernah lupa hatinya untuk selalu beryukur atas Nikmat yang Allah telah berikan kepadanya. Nabi Ayyub selalu taat dan patuh terhadap perintah Allah. Sehingga para malaikat terkagunm kagum terhadap ketaatan nabi Ayyub dan keikhlasan hatinya dalam beribadahh kepada Allah swt. Pada suatu saat nabi Ayuyub mendapat cobaan dari Allah SWT, Yaitu  Anaknya yang berjumlah 11 orang satu persatu meninggal dunia ,Semua harta benda yang dimilikinya habis terbakar termasuk kebun anggurnya, Menderita sakit kulit (Kudis) yang sangat parah dan menjijikan Bahkan dari kulit sekujur tubuhnya mengalir darah bercampur nanah. Penyakit kulit ini di derita nabi Ayyub selama kurang lebih 7 tahun. Istrinya pergi tidak mau merawat nabi Ayyub yang sedang sakit, suatu hari istrinya berkata kepada naib ayyub bahwa dia sungguh tidak sanggup lagi merawat nabi Ayyub. Nabi Ayyub marah atas sikap istrinya yang kurang tawaka menghadapi cobaan dari Allah swt. Nabi Ayyub berjanji dengan berkata kepada istrinya :"Jika kelak aku telah sembuh dari penyakitku dan kekuatan badanku telah pulih kembali, aku akan mencambukmu sebanyak seratus kali" Walaupun berat dan besar cobaan tersebut namum beliau tetap sabar dan tabah serta tawakal terhadap Allah swt. bahkan ia semakin yakin dengan keimanannya dan selalu berzikir untuk mendekatkan diri kepada Allah swt. beliau berdoa kepada Allah swt :" Ya Allah tuhanku, aku telah diganggu oleh setan dengan kepayahanm kesusahan, serta siksaan dan engkaulah Tuhan Yang Maha Pengasih dan Maha Penyayang"  Akhirnya atas kesabaran dan ketabahan Nabi Ayyub tersebut. Akhirnya, penyakit kulitnya sembuh tanpa bekas, setelah ia menghentakkan kakinya ketanah atas perintah Allah swt, kemudian keluarlah air yang memancar yang dipakainya untuk mandi dan munimgigihan dan ketabahan beliau dalam menerima cobaan dan ujian Allah swt. tidak hanya mengembalikan kesahatan kuga kekayaan Nab Ayyub. Kembali seperti semua. pada saat itu istri beliau kembali padanya. Nabi Ayyub pun melaksanakan sumpahnya, yaitu dengan mencambuk istrinya. Setelah itu, nabi Ayyub hidup dengan berbahagia sampai akhir hayatnya, Nabi Ayyub wafat pada usia 93 Tahun',

    face: 'img/nabiayub.jpg'

  }];

  return {

    all: function() {

      return chats;

    },

    remove: function(chat) {

      chats.splice(chats.indexOf(chat), 1);

    },

    get: function(chatId) {

      for (var i = 0; i < chats.length; i++) {

        if (chats[i].id === parseInt(chatId)) {

          return chats[i];

        }

      }

      return null;

    }

  };

});

<ion-view view-title="Daftar Isi">

  <ion-content>

    <ion-list>

      <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">

        <img ng-src="{{chat.face}}">

        <h2>{{chat.name}}</h2>

        <p>{{chat.lastText}}</p>

        <i class="icon ion-chevron-right icon-accessory"></i>

        <ion-option-button class="button-assertive" ng-click="remove(chat)">

          Delete

        </ion-option-button>

      </ion-item>

    </ion-list>

  </ion-content>

</ion-view>

<ion-view view-title="{{chat.name}}">

  <ion-content class="padding">

  <div class="card">

  <div class="item item-text-wrap">

    <img ng-src="{{chat.face}}" style="width: 64px; height: 64px">

    <p>

     <b> {{chat.lastText}}</b>

    </p>

    <p>

      {{chat.content}}

    </p>

    </div>

    </div>

  </ion-content>

</ion-view>

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <!-- Dashboard Tab -->

  <ion-tab title="Dashboard" icon-off="ion-ios-home" icon-on="ion-ios-home" href="#/tab/dash">

    <ion-nav-view name="tab-dash"></ion-nav-view>

  </ion-tab>

  <!-- Chats Tab -->

  <ion-tab title="Daftar Isi" icon-off="ion-ios-star" icon-on="ion-ios-star" href="#/tab/chats">

    <ion-nav-view name="tab-chats"></ion-nav-view>

  </ion-tab>

  <!-- Account Tab -->

  <ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">

    <ion-nav-view name="tab-account"></ion-nav-view>

  </ion-tab>

</ion-tabs>

ionic serve  

Membuild android 

1. Buka cmd, arahkan ke dalam folder direktori app_kisah
2. ketik ini :

   ionic platform add android   

   kemudian enter
3. tunggu sampai selesai donlod, dan kita akan membuild android apk-nya . ketik :

   ionic build android
4. tuggu sampai program android selesai di build. sampai menampilkan pesan BUILD SUCCESSFUL
5. jika sudah sukses build-nya silahkan buka folder di app_kisah/platforms/android/build/outputs/apk/android-debug.apk
6. sekarang copy dan install android-debug.apk di android kamu 
7. yesss berhasil, silahkan bacakan dongeng ke anak atau adik di hp kamu hasil buatan kamu sendiri :)