Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. News

Sencha Touch: Kerangka Aplikasi Mobile HTML5

Read Time: 4 mins

Indonesian (Bahasa Indonesia) translation by Farhan Vatih (you can also view the original English article)

Pengembangan aplikasi mobile membutuhkan banyak keputusan yang harus dibuat sebelum baris pertama dari kode bahkan ditulis. Misalnya, Anda harus pergi dengan sebuah aplikasi web atau aplikasi native? Jika demikian, Anda harus menggunakan kerangka? Itu tidak ada jawaban yang salah untuk salah satu pertanyaan ini-itu tergantung pada situasi. Hari ini kita akan berbicara tentang solusi spesifik untuk pertanyaan-pertanyaan ini: Sencha Touch.

Apa itu Sencha Touch?

Dari situs web mereka:

Sencha TouchSencha TouchSencha Touch

Sencha Touch memungkinkan aplikasi web Anda terlihat dan merasa seperti aplikasi native. Komponen antarmuka pengguna yang indah dan manajemen data yang banyak, semua didukung oleh standar web HTML5 dan CSS3 terbaru dan siap untuk perangkat Android dan Apple iOS. Menjaga mereka berbasis web atau membungkus mereka untuk distribusi di toko mobile app.

Dari pembuat ExtJS, orang-orang Sencha baru membuat lagi kerangka kerja javascript benar-benar kuat. Anda dapat memeriksa lebih lanjut tentang kerangka kerja di sini. Sencha touch dapat mereplikasi hampir semua fitur UI native secara sempurna. Saat ini, Sencha Touch adalah mungkin salah satu kerangka kerja mobile web app paling kuat luar sana dan yang terbaik cocok untuk menangani aplikasi web yang kompleks yang perlu meniru aplikasi native.

Yang dibilang, masih ada beberapa kekurangan itu seperti apapun. Untuk pemula, sementara ini sedang ditulis, itu masih adalah dalam versi BETA. Dari pengujian pribadi, saya belum menemukan bug apapun. Ini juga berarti bahwa mereka masih mengemas banyak fitur untuk kerangka. Dimana benar-benar berita baik karena kerangka kerja ini sudah sangat penuh sesak dengan fitur, tetapi Anda dapat masih berharap untuk hal-hal seperti dukungan kamera di masa depan. Tetapi akses ke fungsi perangkat seperti ini hanya mungkin jika Anda dibungkus dalam PhoneGap, kerangka lain yang memungkinkan aplikasi mobile untuk menjadi aplikasi native.

ini membwa titik utama lain. Apakah kerangka aplikasi mobile seperti sentuhan Sencha bahkan sesuai untuk proyek saya? Jawaban untuk pertanyaan itu sulit. Ada Pro dan kontra untuk kedua solusi dan kami menganggap bahwa kita menggunakan Sencha Touch semta-mata aplikasi web:

sencha touchsencha touchsencha touch

Sekarang Anda perlu memutuskan apakah Sencha Touch adalah kerangka aplikasi web yang tepat untuk proyek Anda:

Sekilas tentang Sencha Touch

  • Kurva belajar yang lebih tinggi daripada kebanyakan kerangka web lainnya
  • Kerangka aplikasi web terbaik untuk aplikasi web tingkat tinggi yang benar
  • Mudah di skala untuk resolusi yang berbeda untuk maksimum kompatibilitas dengan berbeda iPhone, iPad, dan berbagai ponsel Android.
  • Dua tema untuk iOS dan Android
  • HTML5 dan CSS3 memungkinkan fleksibilitas yang lebih tinggi
  • Dukungan bagus untuk animasi dan event touch yang ditingkatkan

Jika semua ini terdengar bagus untuk proyek Anda, kemudian pergi ke depan dan download. Jika tampaknya sedikit berlebihan, Anda mungkin ingin melihat sesuatu seperti jQTouch (Lihat tutorial ini segera).

Mendownload Sencha Touch

Untuk men-download salinan Sencha Touch, hanya pergi ke situs web mereka, dan klik Download Now.

sencha touchsencha touchsencha touch

Buka folder sencha touch dan klik pada examples. Kemudian klik pada index.html (di dalam folder examples)

sencha touchsencha touchsencha touch

Jelajahi sekitar contoh dan menjelajahi berbagai fungsi aplikasi yang berbeda. App yang paling bernilai untuk belajar kemampuan benar kerangka kerja ini adalah app Kitchen Sink. Itulah apa yang akan kita Cari:

sencha touchsencha touchsencha touch

Kitchen Sink

sencha touchsencha touchsencha touch

Jelajahi aplikasi dan lihat beberapa sumber beberapa untuk mendapatkan pemahaman tentang konsep Sencha Touch.

Antarmuka pengguna

Jika Anda klik pada User Interface di sebelah kiri, Anda disajikan dengan menu baru, animasi bagus dengan spesifik elemen UI. Meskipun tidak terlihat seperti mereka belum memainkan antarmuka, saya yakin bahwa itu adalah sesuatu yang kita akhirnya akan lihat. Seperti yang Anda lihat, mereka memiliki setiap elemen penting yang diambil yang dirawat. Mari kita lihat kode sumber dari tab untuk merasakan tingkat kompleksitas untuk menciptakan sebuah elemen UI dasar:

sencha touchsencha touchsencha touch

Seperti yang Anda lihat, ini adalah cara ExtJS yang akrab dalam melakukan sesuatu. Anda membuat komponen baru, menetapkan nilai sortable, kemudian masukkan informasi yang diperlukan. Dalam kasus ini, judul tab, tab konten, dan kelas diidentifikasi. Kesederhanaan kuti ini adalah bukti kuasa kerangka kerja ini.

Animasi

sencha touchsencha touchsencha touch

Ini bahkan lebih mudah. Untuk meng-animasikan panel baru ke proyek, ini adalah yang Anda butuhkan:

Bagian slide adalah apa yang menentukan transisi yang Anda gunakan. Anda dapat melihat Kitchen Sink untuk lebih banyak contoh seperti pop, flip, cube, dan fade.

Saya mendorong Anda untuk bermain-main dengan Kitchen Sink lagi dan pastikan untuk menganalisis kode sumber untuk sesuatu yang menarik minat Anda. Karena ini adalah masih dalam versi BETA, dokumentasi hampir tidak ada di atasnya, sesuatu ExtJS (sekarang Sencha) agak terkenal.

Rangkuman

Sekarang bahwa Anda memiliki sedikit lebih banyak pengetahuan tentang Sencha Touch, saya berharap bahwa Anda dapat menambahkannya ke gudang alat aplikasi mobile anda. Sebagai dengan industri pembangunan lainnya, Anda harus memilih alat yang tepat untuk pekerjaan itu. Sencha Touch dapat menjadi alat yang tepat jika Anda sedang membangun aplikasi mobile tingkat tinggi melalui web. Pastikan itu adalah yang cocok untuk proyek Anda sebelum melangkah lebih jauh. Itu saja untuk sekarang, biarkan aku tahu apa yang Anda pikirkan tentang Sencha Touch dan kerangka lain di komentar!

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.