AngularJs + Ionic: Быстрый способ превратить блог в приложение

Практический пример использования: публикация блога рецептов как книги в Google.Play

Как настоящий программист я люблю искать оптимальные решения, чтобы из одной коробки можно было построить и дом, и корабль. Простейшие приложения для мобильных устройств нужны каждому. но не каждый может позволить себе специальную разработку. На самом деле она многим и не нужна. Нужно что-то простое, аккуратное, работающее и удовлетворяющее требованиям. В примере будет разобрано как быстро, зная angularjs (достаточно начального уровня) собрать из блога (допустим wordpress) простое приложение со статьями. Собственно говоря — писать мы будем минисайт, а потом «экспортировать» его как миниприложение.

Настройка окружения

Устанавливаем

  • сервер — https://nodejs.org/en/
  • выполняем команду npm install -g cordova (детальнее о процессе тут https://cordova.apache.org/docs/en/latest/guide/cli/index.html)
  • выполняем команду npm install -g ionic (детальнее о процессе тут http://ionicframework.com/getting-started/)
  • android sdk для сборки проекта

Начинаем проект

Выполняем команду ionic start ПапкаСПроектом. В результате у нас будет целая папка всякого важного (потом поиграемся, и самое важное в папке www — собственно наш сайт/приложение. После того, как мы сделаем необходимые нам правки из начального проекта, проверим в браузере и все будет ок — то мы его же построим и проверим в эмуляторе андроида. Ну или скачаем на свой планшет и будем наслаждаться)

Строим и проверяем

На любом этапе разработки можно посмотреть каким будет Ваше приложение на устройстве
cd ПапкаСПроектом
ionic platform add android@4.1.1
ionic build
ionic run

Экспортируем записи из блога

Фактически мы их читаем, парсим и складываем для дальнейшего использования. Почему так? Я лично часто оказываюсь в ситуациях без интернета и приложение тем и хорошо — мы можем сделать все что хотим потом, но начинать лучше с самого независимого от интернета варианта

<?php
require_once 'libs/_settings.php';
 
$articles = DB::query('SELECT ID, post_date, post_title, post_content FROM wp_posts WHERE post_status="publish" AND post_type="post"', 'array');\
 
file_put_contents('articles.js', 'var Articles = ' . json_encode($articles) .  ';');

AngularJS приложение

Делаем простейший код на два контроллера: просмотр списка и единичная статья. Результат работы можно посмотреть по ссылке

ionic

Добавляем в роутер

...
		.state('tab.articles-one', {
			url: '/articles/:id',
			views: {
				'tab-articles': {
					templateUrl: 'modules/articles/one.html',
					controller: 'devArticlesOneCtrl'
				}
			}
		})
		.state('tab.articles', {
			url: '/articles',
			views: {
				'tab-articles': {
					templateUrl: 'modules/articles/tab.html',
					controller: 'devArticlesCtrl'
				}
			}
		})
...

Контроллеры

devControllers.controller('devArticlesCtrl', function ($scope) {
	$scope.articles = Articles;
});
devControllers.controller('devArticlesOneCtrl', function ($scope, $stateParams) {
	$scope.article = false;
	angular.forEach(Articles, function(value, key) {
		if (value.ID==$stateParams.id) {
			$scope.article = value;
		}
	});
});

Вывод Списка

<ion-view view-title="Статьи">
	<ion-content class="padding">
		<ion-list>
			<ion-item ng-repeat="article in articles| orderBy:'post_date':true" href="#/tab/articles/{{article.ID}}">
				<h2>{{article.post_title}}</h2>
				<div data-ng-bind-html="articles.post_content">
				</div>
			</ion-item>
		</ion-list>
	</ion-content>
</ion-view>

Скачать код

И полностью его модифицировать под свои нужды можно по ссылке

2 комментария “AngularJs + Ionic: Быстрый способ превратить блог в приложение”

  1. Спасибо за пост. Занимаюсь сейчас как раз созданием приложения для WordPress блога с использованием Ionic framework. Правда нет пока нужды экспортировать из базы — добавил АПИ на wordpress и работаю с ним.

    Почему имея опыт с этими технологиями и используя WordPress Вы не сделаете приложение для данного блога как пример?

    Ответить
    • ну там и есть приложение по этому блогу, вернее по его данным. просто ситуация когда я с планшетом чаще равна мне без интернета — поэтому апи не подходит. если интернет есть — то и в браузере не проблема открыть.

      Ответить

Оставить комментарий

XHTML: Вы можете использовать такие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">