Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile, Bitcoins

Разработка гибридных приложений под android с использованием HTML, CSS, AngularJS, Ionic ч.2

Вторая часть рассказа о создании гибридного приложения под android.

Инструкция по установке ionic и cordova – ссылка здесь
Видео объяснение как установить ionic, cordova и android SDK – можно посмотреть здесь
Пустой проект можно скачать нажав на эту ссылку.

Поделиться:

Разработка гибридных приложений под android с использованием HTML, CSS, AngularJS, Ionic ч.1

Небольшой анонс. Я готовлю серию видео уроков о разработке гибридного приложения под android с использованием HTML, CSS, AngularJS и Ionic. Строго говоря абсолютно та же технология будет использоваться и для разработки под iPhone, однако там другие подводные камни, но этого я коснусь уже в сами уроках.

Вот видео анонса. Я рассказываю о том, что я буду использовать, какие инструменты и что потребуется для начала. Плюс я так же показываю конечное приложение, которое будет получено по окончанию этих уроков.

Поделиться:

Что такое AngularJS?

AngularJS – это JavaScript фреймворк предназначенный для создания одностраничных веб приложений. Поскольку до сих пор существует определенная путаница связанная с определением этих слов, то стоит внести ясность. В первую очередь, как я уже сказал AngularJS – это фреймворк. Фреймворк подразумевает под собой то, что вместо того, чтобы писать весь код самому разработчик “играет по заранее оговоренным правилам”. Эти правила – это стандарты и инструменты выбранного фреймворка.

angularjs

AngularJS наделен огромным количеством инструментов облегчающих жизнь программисту. Разумеется, что в задачу разработчика при этом входит выучить правила их использования. В арсенал инструментов ангулара входят: фильтры, директивы, двусторонняя привязка данных и многое другое.

AngularJS изначально спроектирован для создания одностраничных веб приложений. Таким образом браузер изначально откроет только одну страницу и дополнительный контент будет загружаться по мере необходимости. При таком подходе экономится траффик и уменьшается нагрузка на сервер.

Поскольку AngularJS написан и использует в своей работе JavaScript, то если вы знакомы с этим языком программирования (если нет, то я не понимаю, как вы нашли эту статью 😉 ), то вам будет достаточно легко сориентироваться и в этом фреймворке. В конечном итоге весь контроллеры, сервисы, фильтры и т.д. – это функции на языке JavaScript. По сути они с тем же успехом могут использоваться и в других проектах, может быть даже не связанных с AngularJS.

AngularJS позволяет сократить время разработки приложений. Это достигается за счет встроенных механизмов, которые сильно помогают разработчику. Один из таких механизмов – это встроенный шаблонизатор (template engine). Шаблонизатор позволяет использовать встроенные команды AngularJS для вывода данных. Например:

Другой прекрасный инструмент, который предоставляет AngularJS, это то как фреймворк управляет DOM (Document Objerct Model) или, говоря иначе, HTML тегами. Если при разработке с использованием jQuery (и ее сестрами jQuery UI, jQuery Mobile) вам постоянно приходится вручную обновлять все данные на экране пользователя, то AngularJS делает всю работу за нас. Достаточно указать какие элементы к каким объектам данных привязаны и при каждом изменении состояния на экране будут выводиться обновленная информация.

AngularJS использует объектный подход для разработки. Эта архитектура называется MVC (Model View Controller), стоит отметить, что вместе с этим при классическом подходе эта модель не совсем соответствует тому как ангулар работает с данными. Существует более точное определение его архитектуры – MVVM (Model View – View Model), однако точная разница между это и MVC не сильно важна на этом этапе, так что можно пока не заморачиваться.

Стоит отметить, однако, что в обоих архитектурах обработка данных и их вывод пользователю разделены. Таким образом на выходе получается более структурированный код, который проще поддерживать и которым проще потом управлять. Ведь разработка – это не останавливается после передачи продукта клиенту, зачастую она продолжается еще долго после этого в виде ли поддержки, либо добавления функционала, либо в исправлении ошибок.

Не стоит так же забывать, что AngularJS разрабатывается инженерами гугла. Это придает веры в проект и можно с достаточной доли уверенности сказать, что его врят ли остановят в ближайшее время. Помимо этого на данный момент вокруг этого фреймворка уже организовалось достаточно интересное и многообразное комьюнити. Я еще не сталкивался с вопросами, которые бы не были обсуждены в том или ином виде. Это безусловно, крайне полезно в работе разработчика.

Поделиться:

Подходы к разработке мобильных приложений – нативные приложения и гибридные

Существует 2 основных подходя для разработки мобильных приложений: разработка нативных приложений с использование языка программирования для разрабатываемой платформы и создание гибридного приложения с использованием CSS, HTML и JavaScript. Зачастую выделяется и третий подход – мобильное веб приложение, но если мы говорим об установке апликации на смартфон и возможности скачать ее с Apple Store или Google Play, то это либо нативная разработка либо гибридная. Именно об этих двух подходах я и хочу поговорить в этой статье.

native-app-vs-html5-mobile-application

Нативные (от англ. native – родной) приложения – это приложения разработанные на “родном” для платформы языком. Если речь идет об андроиде то это Java, а если об iOS, то objective-C. Хотя сейчас Apple активно продвигает Swift – новый язык программирования разработанные специально для написания приложений под их операционные системы.

Разработка под iOS таит в себе определенные преграды свойственные только для Apple, самая явная из них – для разработки под iOS вам нужен компьютер с установленным на нем Mac OS X. Существуют обходные варианты, как-то компиляция в облаке с установленной нужной операционкой, либо создания “хакинтоша”, то есть установка на не маковский компьютер операционной системы от Apple. Однако это все равно танцы с бубном, которые стоит избегать если есть такая возможность.

Разработка под андроид более либеральна в своем подходе. Можно писать приложения под эту операционную систему хоть на маке, хоть на линуксе, хоть на виндоусе. Что вам удобно, то и используйте. Удивительно, почему эта операционка распространяется активнее iOS? Ответ а тот вопрос, так и останется загадкой -)

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

Гибридные приложения подходят совершенно с другой стороны. Если еще несколько лет назад речь о них и не шла и у нас были только нативные, то с развитием технологий и в особенности мобильных браузеров стало понятно, что можно подходить к вопросу разработки иначе.

Что если ваше приложение и так должно получать данные из сети? Что если сложная анимация не нужна? Да нужно, хранить данные на телефоне, но не сотни мегабайт. Да нужно обеспечить удобный UI, но не нужно “сходить с ума” и анимировать каждый пиксель. Если это та ситуация, с которой столкнулась компания, то определенно использование сложных, либо незнакомых технологий кажется более чем неоправданным.

В этом случае вполне возможно что стоит подойти к решению разработав гибридное мобильное приложение. Гибридными называются приложения, которые разрабатываются при помощи HTML, CS и JavaScript – то есть теми же технологиями, что и интернет сайты, а для того чтобы они могли быть установлены на смартфоне код “оборачивается” в нативную оболочку. Для этой процедуры существует несколько как платных, так и бесплатных решений, пожалуй самые распространенные это PhoneGap и Cordova.

Таким образом входной порог на рынок мобильных приложений значительно снизился. Можно использовать широко известные инструменты для создания приложения, при этом не погружаясь в изучения новых языков. Помимо этого гибридная разработка позволяет создавать приложение сразу под обе платформы: Android и iOS. Можно и под Windows, но я не изучал этот вопрос. Стоит отметить, что сам процесс компиляции включает все те же подводные камни. Так например, для создания приложения для iOS все так же требуется компьютер с этой операционкой.

От себя хочу отметить, что я вижу будущее за гибридными приложениями. Мобильные браузеры развиваются и уже сейчас показывают прекрасную работоспособность. Со временем это будет только улучшаться, в конце концов смартфоны и планшеты становятся основным устройством для доступа к интернет ресурсам. Востребованность технологий, которые обеспечат быстрый и качественный доступ к этому рынку, будет только расти.

Поделиться:

Создание фильтров и HTML форматирование текста на лету в ангулар [видео] – AngularJS filters and markdown

Итак, вот список тем, которые я затронул в этом уроке:

  • Что такое двусторонняя привязка данных в ангулар.
  • Создание фильтров и их использование.
  • HTML форматирование текста на лету.
  • Использование JS библиотеки showdown.

See the Pen Markdown for html on the fly by Artem Demo (@artemdemo) on CodePen.

Ссылка на библиотеку showdown: https://github.com/coreyti/showdown

Поделиться:

Новые разработки в мире ангулар – 16.09.2014

Это новый раздел моего блога. Я постараюсь регулярно выкладывать ссылки и информацию о новых разработках связанных с ангуларом и не только. Думаю, что это будет достаточно интересный раздел для многих. Следите за обновлениями )

Angular-Morph – плавная анимация всплывающих окон на ангулар

https://github.com/jimobrien/ngMorph
Проект только набирает обороты, но автор уже подготовил базовый функционал. Достаточно посмотреть на пример, как сразу становится понятно – что стоит последить за развитием проекта. Я уже знаю в какой работе применю эти функции.

Нажмите на изображение, чтобы увидеть анимацию в действии:

ngMorph

Angular 1.3 – one time data-binding, recompile directive

https://www.youtube.com/watch?v=hFOSXVT-Cps
Готовится к выходу новая версия ангулара. Одно из очень интересных нововведений – это одноразовая привязка данных. Теперь можно будет значительно проще следить за расходом ресурсов и не тратить их на обновление статичных данных.
Интересный момент – автор этой презентации так же рассказал о своем методе перекомпиляции элементов, в тех случаях когда после одноразовой привязки так снова нужно обновить данные.
Дополнительные темы:

  • Разница между service и factory – (service use “new”, factory don’t)
  • Как добавить загрузку разных CSS при раутинге

Ment.io – использование # и @ для хештега и ссылки на пользователя

http://jeff-collins.github.io/ment.io/
Интересный модуль, который добавляет функционал по отображения всплывающего списка хештегов, либо пользователей. Список зависит от того, какой символ вы использовали #, либо @.
ment-io

Поделиться:

Как научиться программировать? – часть 1

Для начала давайте посмотрим зачем вообще учить код? Зачем беспокоить серое вещество и усложнять свою жизнь? Вполне возможно, что все и так хорошо?

У тебя всего лишь есть идея, которую хотелось бы воплотить в жизнь. Да, это может быть следующий прорыв, новый фейсбук, вконтакте, ютуб или что там у нас сверх популярно сегодня? Почему же дело не продвигается дальше планирования и обдумывания? Ведь идея-то точно классная, осталось только найти программиста, который все воплотит…

learn-to-code

Если вопрос о поиске программиста – это центральный камень преткновения на пути к осуществлению вашей идеи, то у меня для вас плохие новости – у вас ничего не получится.

На сегодняшний день услуги программистов это ни разу не дешевое удовольствие и не будут падать в цене. Подумайте об этом: хорошие разработчики ценятся высоко и могут найти достаточно предложений на рынке труда. Почему ему нужно начать работать именно с вами? Над идеей, которая еще не зарекомендовала себя на рынке?

Если же вы планируете нанять специалиста, то вам нужно быть готовым к большим расходам. Помимо этого сам процесс разработки не принесет вам морального удовлетворения, особенно если вы не разбираетесь в нем. И результат скорее всего будет сильно отличаться от вашего плана – вы не получите того, чего хотите.

В чем проблема? Разработку очень сложно оценить и загнать в какие-то рамки. Вот одна из мыслей, которая не будет давать вам покоя: “Разработка этой функции на самом деле занимает 20 часов или меня пытаются раздеть?”

Если вы предприниматель, который ждет кого-то кто воплотит вашу идею, то мне жаль, но вы не предприниматель.

При этом важно сделать оговорку для тех, кто не читает между строк: научиться писать код, это не то же самое, что стать профессиональным программистом. Не поймите меня не правильно, я не говорю о быстром построении карьеры. Я говорю о том, что бы научиться писать код для создания прототипа. продукта с минимальным католичеством функций, однако достаточным для занимания своей ниши. Грубо говоря продукта, который может быть неказист, но имеющим достаточную ценность для своей целевой аудитории.

В конечном итоге вам скорее всего потребуется профессиональный разработчик. Однако, знание кода, поможет вам найти, объясниться и управлять хорошим разработчиком.

Надеюсь, что я зародил в вас мысль о том, что имеет смысл учить код. В следующей части статьи я расскажу о выборе языка программирования, не переключайте канал 🙂

Поделиться:

Создание REST API сервера на Slim php фреймворк [видео]

В одной из прошлых статей я уже рассказывал о том, как создать API сервера на Slim php фреймворк. Сегодня я выкладываю полный урок того как быстро собрать REST сервер.

Ссылка на файлы приложения.

Поделиться:

Динамичное использование классов в Ангулар [видео] – AngularJS ngClass

Объяснение как динамически, на лету, добавлять классы к тегам html. Добавление групп классов, а так же добавление в зависимости от каких-то условий.

Код примера:

See the Pen Динамичное использование классов в Ангулар – AngularJS ngClass by Artem Demo (@artemdemo) on CodePen.

Поделиться:

Переход по страницам в ангулар [видео] – AngularJS Pagination

В одном из предыдущих постов я уже писал о том как делать постраничный переход в ангулар. Сегодня я хочу предложить более динамичное решение, которое подойдет для широкого спектра задач. Код написан таким образом, чтобы его было легко переносить из проекта в проект, тем самым экономя время и нервы.

Как и обещал вот ссылка на полный код приложения.

Поделиться: