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

Menciptakan sebuah aplikasi Mobile yang menggunakan WordPress, Ionic, dan AngularJS

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Muhammad Gufron (you can also view the original English article)

Final product image
What You'll Be Creating

Pengenalan

Dalam tutorial ini, saya akan menjelaskan Anda langkah demi langkah bagaimana untuk menciptakan hibrida modern, aplikasi mobile (iOS dan Android) situs WordPress Anda yang menggunakan teknologi terbaru. Kita akan menggunakan Ionic Framework, ECMAScript 6, npm, webpack, dan Apache Cordova.

Pada akhir tutorial ini Anda akan mendapatkan aplikasi berikut. Ini memiliki tiga modul, modul Home yang menampilkan posting terbaru Anda, Post modul yang menampilkan posting spesifik dan modul Menu yang menampilkan menu.

Modules

1. Tools

Ionic Framework

Yang indah, membuka sumber front-end SDK untuk mengembangkan aplikasi mobile yang menakjubkan dengan teknologi web.

Ionic Framework ekosistem besar, termasuk Ionic CLI (tool command line), Ionic Push (mudah push notifikasi) dan Ionic Platform (backend layanan). Saat ini adalah salah satu proyek sumber terbuka atas GitHub dengan lebih dari 19.000 bintang dan lebih dari 600.000 apps dibuat.

Ionik mencakup kebutuhan semua aplikasi Anda. Namun, untuk tutorial ini saya akan hanya berfokus pada kerangka ionik (atau ionik SDK), yang merupakan satu set AngularJS arahan (Web komponen) dan jasa.

ECMAScript 6 (ES6)

ECMAScript 2015 (6th Edition) adalah versi standar ECMAScript spesifikasi bahasa. ES6 mendapat resmi disetujui dan diterbitkan sebagai standar pada 17 Juni 2015 oleh Majelis Umum ECMA.

ECMAScript 6 memberi Anda akses ke banyak fitur baru, banyak yang terinspirasi oleh CoffeeScript, termasuk sebagai fungsi Panah, Generator, kelas, dan membiarkan scoping. Meskipun ES6 approve baru-baru ini, Anda dapat menggunakan tepat sekarang menggunakan kompiler JavaScript, seperti Babel.

Node Package Manager (npm)

Node Package Manager adalah manajer paket paling populer di dunia. Jumlah paket tumbuh lebih cepat dari Ruby, Python dan Jawa yang dikombinasikan. NPM berjalan pada Node.js.

Mengapa tidak Bower?

Kami memilih untuk npm, karena menggunakan Bower dan npm dalam proyek yang sama menyakitkan dan CommonJS dukungan dengan Bower tidak mudah. CommonJS mendefinisikan format modul untuk memecahkan lingkup JavaScript di luar browser dan npm mendukung ini. CommonJS modul dapat diminta menggunakan ES5 atau ES6.

webpack

Menurut pendapat saya, webpack telah menjadi sebuah permainan changer di industri, keluar rumit Grunt atau Gulp script yang Anda butuhkan untuk mempertahankan. webpack memungkinkan Anda memerlukan semua jenis file (.js, .coffee, .css, .scss, .png, .jpg, .svg, dll) dan pipa mereka melalui loader untuk menghasilkan statis aset yang tersedia untuk aplikasi Anda.

Perbedaan dengan kasar dan menelan adalah bahwa sebagian besar kebutuhan (minification dan kompilasi) dapat ditutupi dengan hanya menambahkan beberapa konfigurasi, ada tidak perlu untuk membuat script. Sebagai contoh, membutuhkan file Sass, kompilasi, autoprefixing, dan menyuntikkan yang dihasilkan minified CSS ke dalam aplikasi Anda akan sederhana seperti ini:

Saya tidak berpikir saya perlu menunjukkan setara dengan menggunakan menelan atau kasar. Saya pikir Anda mendapatkan titik.

2. prasyarat

Tutorial ini mengasumsikan bahwa Anda telah:

  • pengetahuan dasar tentang AngularJS dan ionik
  • situs WordPress siap untuk bertanya (instalasi lokal baik)
  • mesin dengan Node.js, npm, Bower (kita akan membutuhkannya untuk beberapa dependensi)
  • Git diinstal dengan akses write tanpa sudo pada folder proyek

3. Pemasangan

Sebelum kita mulai, Anda akan perlu untuk menginstal dua hal:

  • sebuah plugin yang mengubah blog Anda menjadi sebuah API yang tenang
  • aplikasi itu sendiri

RESTFUL API

Untuk mengambil posting untuk instalasi WordPress Anda, Anda akan perlu untuk menginstal plugin WP REST API. Pastikan bahwa Anda menginstal versi 1.2.x sebagai versi 2.x sedang dalam perjalanan.

  1. Di WordPress, masuk ke Plugins > Add New.
  2. Cari WP REST API (WP API).
  3. Klik Install Now untuk menginstal plugin.
  4. Jika instalasi berhasil, klik Activate Plugin untuk mengaktifkannya.

Jika instalasi berhasil, membuka browser dan masukkan http://example.com/wp-json. Ini akan memberikan respon yang serupa dengan yang di bawah ini.

Aplikasi

Untuk menginstal aplikasi, clone repositori, menggunakan perintah berikut.

Selanjutnya, buat file konfigurasi dan menginstal dependensi.

Untuk memastikan aplikasi dan REST API bekerja sama, buka config/config.json. Ini adalah file konfigurasi pribadi Anda, yang diabaikan oleh Git. Ubah base URL api untuk satu untuk instalasi WordPress Anda.

Menjalankan npm run devserver dan membuka http://localhost: 8080/webpack-dev-server/ dalam browser. Jika semuanya bekerja seperti yang diharapkan, Anda harus di depan aplikasi yang berjalan yang menampilkan posting WordPress Anda. Saya telah menciptakan sebuah aplikasi demo untuk memberi Anda gambaran tentang apa yang diharapkan.

Sekarang bahwa Anda dapat melihat hasil dari apa yang kita setelah, biarkan aku pergi melalui rincian. Perhatikan bahwa contoh kode berikut yang disederhanakan. Anda dapat menemukan kode sumber pada GitHub.

4. Dependencies

Perintah npm install menginstal beberapa perpustakaan. Beberapa dari mereka yang langsung dependensi sedangkan sisanya pengembangan dependensi.

Direct Dependencies

Ketergantungan langsung adalah dependensi yang memerlukan aplikasi Anda untuk menjalankan dengan benar ketika dibangun.

Perhatikan bahwa aplikasi tidak secara langsung tergantung pada AngularJS, karena ionic-sdk sudah termasuk angular.js, animate.js sudut, sudut-sanitize.js, dan sudut-ui-router.js.

wp-api-angularjs (WordPress WP API klien untuk AngularJS) adalah kumpulan AngularJS layanan yang memungkinkan komunikasi dengan plugin REST API yang Anda terpasang sebelumnya. Anda dapat melihat daftar lengkap dependensi pada GitHub.

Development Dependencies

Pengembangan dependensi yang sebagian besar webpack loader. Loader adalah fungsi yang mengambil sumber file sumber, menerapkan beberapa perubahan, dan kembali sumber baru. Kita perlu loader yang menangani .scss, .js (ES6), .html, dan .json. Anda dapat melihat daftar lengkap dari pembangunan dependensi pada GitHub.

5. Application Architecture

Saya telah mengembangkan aplikasi AngularJS untuk waktu yang lama dan setelah banyak percobaan saya telah berkomitmen untuk arsitektur berikut:

  • sebuah file yang dapat diedit hidup di bawah src/ atau /lib folder atau
  • setiap modul AngularJS kebutuhan folder yang tepat
  • setiap modul file *.module.js harus menentukan sebuah namespace unik (dan menjadi satu-satunya tempat dimana namespace ini muncul)
  • setiap modul file *.module.js harus menyatakan semua dependensi (bahkan jika dependensi sudah disuntikkan di app)
  • setiap modul file *.module.js harus menyatakan semua dengan konfigurasi controller layanan, filter, dll.
  • setiap config, controller, Layanan, filter, dll harus mengekspor fungsi (CommonJS)
  • Jika modul membutuhkan dengan gaya tertentu, .scss file harus hidup di dalam modul

Rekomendasi ini kuat karena mereka meyakinkan bahwa Anda longgar ditambah modul yang dapat digunakan bersama oleh beberapa aplikasi tanpa menjalankan ke masalah.

Ini adalah struktur folder aplikasi apa yang tampak seperti:

Entry Point

Bila menggunakan webpack, titik masuk diperlukan. Titik entri kami adalah lib/index.js. Ini berisi aplikasi kita dasar dependensi (seperti ionic.bundle yang berisi AngularJS), modul kami buatan, dan menambah Sass entry point.

Sekarang bahwa kita telah mengimport dependensi kita kita dapat membuat modul aplikasi kami. Mari kita sebut prototipe app kita. Ini memiliki ionic, wp-api-angularjs, dan modul buatan kami sebagai dependensi.

Setelah modul dibuat, kita bisa mengekspornya sebagai modul CommonJS standar.

Ini adalah contoh yang bagus dari apa modul AngularJS yang akan terlihat seperti.

Routing

Routing architecture

Aplikasi kami memiliki menu sisi <ion-side-menu ui-view="menu"> di mana modul Menu akan di-render. Hotel ini juga memiliki bagian konten <ion-nav-view name="content"> di Home dan Post modul yang akan muncul.

ui-view direktif adalah bagian dari UI-router yang menggunakan ion. Ia memberitahu $state (UI-router service) dimana tempat template Anda. Demikian pula, direktif name melekat <ion-nav-view> adalah arahan ionik kustom yang menggunakan ui-view di bawahnya. Anda dapat mempertimbangkan arahan kedua identik.

Berikut ini adalah versi sederhana dari root state, state yang berbagi semua modul:

Untuk informasi lebih lanjut tentang bernama dilihat, lihat dokumentasi pada GitHub.

Menu Module

Menu Module

Modul Menu ini sangat sederhana. Tujuannya adalah untuk menambahkan menu di dalam <ion-side-menu>. Tanpa modul ini, Bagian menu samping akan kosong. Modul menu menyatakan hanya file config, ia memiliki ionic dan ui.router sebagai dependensi.

Bagian yang paling menarik adalah konfigurasi. Kami tidak ingin menciptakan sebuah negara untuk modul Menu seperti tersedia di mana-mana. Sebaliknya, kita menghias root state bagian dengan konten menu. Dengan tampilan ui="menu" yang didefinisikan dalam root state, kita perlu menggunakan menu@root untuk menyebutnya.

Home Module

Home Module

home.module.js

Modul Home menampilkan latests posting dari situs WordPress Anda. Memiliki file config, controller, dan itu tergantung pada perpustakaan berikut:

  • Ionic
  • ui.router
  • wp-api-angularjs

home.config.js

Konfigurasi menambahkan negara baru, root.home, dengan /home URL yang memiliki template dan controller (kedua hidup dalam modul).

home.controller.js

Ini adalah versi sederhana dari rumah kontroler logika. Ini berisi dua fungsi:

  • loadMore: fungsi ini populates vm.posts. Menggunakan layanan $wpApiPosts, yang merupakan bagian dari perpustakaan wp-api-angularjs.
  • refresh: fungsi ini menghapus posting dan panggilan loadMore lagi.

home.html

Template memiliki arahan ion-refresher yang memungkinkan pengguna untuk reload halaman dengan menarik halaman ke bawah. Ini juga memiliki ion-infinite-scroll direktif yang memanggil fungsi loadMore ketika mencapai. Posting ditampilkan menggunakan direktif ng-repeat.

Tip: Gunakan track by ekspresi untuk kinerja yang lebih baik. Meminimalkan manipulasi DOM ketika posting diperbarui.

Post Module

Modul Post menampilkan hanya satu posting. Memiliki file config, controller, dan itu tergantung pada librairies sama sebagai modul Home.

post.module.js

Mirip dengan modul Home, konfigurasi menambahkan negara baru, root.post, dengan /post/:id URL. Itu juga register pandangan dan controller.

post.config.js

post.controller.js

Controller mengambil posting yang ditentukan dalam url /post/:id melalui Layanan $stateParams (UI router service).

post.html

Template memiliki ion-spinner direktif yang menampilkan sebuah loader sementara data yang diambil dari WordPress REST API. Bila pos diambil, kami menggunakan kartu ionik untuk membuat penulis avatar, judul posting dan isi posting.

Tip: Menggunakan ekspresi bindOnce,::, (diperkenalkan di sudut 1.3) untuk menghindari menonton data yang tidak akan berubah dari waktu ke waktu.

Style (Sass)

File bootstrap.scss yang kami diimpor di titik entri kami sederhana seperti ini:

Pertama, kita mengimpor variabel kami. Kami kemudian mengimpor style ionic. Mengimpor variabel kami sebelum ionik memungkinkan kita untuk menimpa variabel Sass apapun ionik telah menyatakan.

Misalnya, jika Anda ingin warna positive menjadi merah bukan biru, Anda dapat menimpa itu seperti ini:

6. Android dan iOS

Instalasi

Jalankan perintah berikut di dalam folder proyek dan memilih platform Anda ingin membangun untuk.

Selain menginstal platform dalam /platforms folder, script akan menginstal satu plugin. Untuk demo, kita memerlukan plugin cordova-plugin-whitelist. Hal ini diperlukan untuk memungkinkan aplikasi untuk query WordPress REST API yang kita buat sebelumnya.

Jika Anda membuka config.xml, Anda akan melihat bahwa kita membiarkan akses untuk setiap jenis asal (<access origin="*" />). Tentu saja, ini adalah hanya untuk keperluan demo. Jika Anda menggunakan aplikasi Anda untuk produksi, maka pastikan Anda membatasi akses seperti ini:

Android

Prasyarat

  • Android SDK
  • Ant

Menjalankan npm run runAndroid runAndroid adalah cara pintas untuk rm -rf www/* && webpack && cordova run android. Ini menghilangkan segala sesuatu dalam www folder, dump versi minified bebas app di dalamnya, dan menjalankan perintah android. Jika perangkat Android yang terhubung (jalankan adb devices untuk memastikan), perintah akan memuat aplikasi pada perangkat, jika tidak ia akan menggunakan Android emulator.

iOS

Prasyarat

  • OS X
  • Xcode

Jika Anda tidak memiliki perangkat Apple, Anda harus menginstal iOS Simulator. Hal ini benar-benar baik dan lebih baik daripada Android emulator.

Menjalankan npm run runIosEmulator adalah cara pintas untuk rm -rf www/* && webpack && cordova run ios. Perintah npm run runIosDevice adalah cara pintas untuk rm -rf www/* && webpack && cordova run ios --device.

Kesimpulan

Dengan tutorial ini, saya sudah mencoba untuk menunjukkan Anda bagaimana mudahnya untuk membuat hibrida, aplikasi mobile untuk situs WordPress Anda. Anda sekarang harus mampu:

  • membuat modul digabungkan secara longgar hal CommonJS spesifikasi
  • Impor CommonJS modul dengan ECMAScript 6
  • Gunakan sisi klien WordPress REST API (dengan wp-api-angularjs)
  • Leverage Ionic Framework untuk membuat antarmuka pengguna yang luar biasa
  • Gunakan webpack untuk bundel aplikasi Anda
  • menggunakan Cordova untuk menjalankan aplikasi pada iOS dan Android

Jika Anda ingin pergi lebih jauh, kemudian mengambil melihat sebuah proyek yang saya buat beberapa bulan lalu, WordPress hibrida klien.

WordPress Hybrid Client

WordPress hibrida klien (WPHC) adalah sebuah proyek open source yang tersedia di GitHub yang membantu Anda untuk membuat iOS dan Android versi dari situs WordPress Anda secara gratis. WPHC didasarkan pada teknologi yang sama tumpukan yang kami gunakan dalam tutorial ini.

WPHC mencakup beberapa fitur berikut:

  • push notifications
  • bookmarks (offline mode)
  • Google Analytics support
  • automatic content updates
  • social buttons
  • accessibility (post font size)
  • multiple languages (English, French, Chinese)
  • infinite scroll
  • syntax highlighter for tech blogs
  • image caching
  • app rating
Advertisement
Advertisement
Advertisement
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.