Живая демонстрация (Мобильное веб-приложение) Github repo.
Если вы считаете, что время является самым ценным ресурсом, то вы захотите прочитать. Как CTO в Mootli (приложение мгновенного события для соединения местных жителей), мне нужен путь к построить мобильный прототип MVP как можно быстрее через три месяца. Мы получили цитаты от 15 000 до 20 000 долларов США, чтобы построить прототип с наборами функций, которые нам нужны. У нас не было никаких денег, поэтому я знал, что должен был выдержать его и полагаться на мою собственную человеческий капитал.
Для достижения моей цели дали ограничения ресурсов, я решил пойти с гибридным подходом мобильного приложения. Ionic Creator для быстрой прототипов, ионной структуры (HTML/CSS/Angular.js) для фронта и Firebase Google для заднего конца (хостинг, база данных и аутентификация Facebook). Я расстаюсь от моих рассуждений позади, почему я решил использовать каждую из этих технологий для моего проекта. Я надеюсь, что это вдохновляет вас начать свой собственный проект!
Почему ионный создатель для прототипирования
Сохранение времени. Я торговал точным пикселем путем управления пикселем дизайна для супер быстрого прототипирования, который генерирует код.
Плюсы:
Интерфейс перетаскивания и падения настолько быстрым и простым в использовании. Это похоже на использование квадратных пространств или важно, но для мобильных приложений. Это делает прототипирование вашего приложения действительно быстро.
Он генерирует код. Наибольшее преимущество по сравнению с использованием инструментов прототипирования, таких как прививка или эскиз, заключается в том, что он генерирует ионный код (HTML/CSS/угловой) после создания прототипа, чтобы вы могли прыгать прямо в кодировку функциональности сразу, не теряя временного кодирования HTML/CSS с нуля.
На основе материального дизайна. Усилинг UI (пользовательский интерфейс) основан на дизайне материала Google, поэтому приложения, которые вы создаете, уже выглядит довольно хорошо. Вы можете настроить ui Styling дальше, если хотите, но это хорошая отправная точка.
Минусы:
Расходы. Платный план стоил мне $ 29/MO, 87 долларов в течение трех месяцев. Платный план позволяет сделать угловые коды непосредственно в Ionic Creator вместе с более легкими интеграциями API. Позже узнал, что были ограничения, которые заблокировали меня от выполнения аутентификации Facebook непосредственно в Ionic Creator, поэтому, если я должен был начать все сначала, я бы только что пошел с бесплатным планом и сделал все угловые кодировки в моем редакторе локально.
Inline-CSS. Один недостаток использования сгенерированного Ionic Creator Code состоит в том, что он генерирует код встроенного CSS для всех элементов HTML, который идеально подходит для прототипов, но, как вы, вероятно, уже знаете, Inline-CSS не является масштабируемым решением. Поэтому, если вы хотите дополнительно создать свой проект запуска в верхней части своего прототипа, вам придется вручную преобразовать все встроенные CSS в файл CSS, который может быть очень много времени. Возможно, вам может быть лучше отказаться от кода прототипа и просто начать с нуля. С целью моего прототипа встроенные CSS были просто в порядке.
Минимальный контроль дизайна. Другим недостатком – это у вас не будет точного контроля использования инструментов прототипирования, таких как прививка или эскиз. Для E.g. вы не можете выровнять элементы пикселя пикселем непосредственно в визуальном интерфейсе, что делает его очень ограниченным для использования профессиональных дизайнеров. Вы всегда можете изменить код CSS к элементам строки в зависимости от вашего потрясающих, поэтому он действительно нацелен на более целевые для разработчиков, чем дизайнеры.
Я также сделал демонстрацию видео о том, как вы можете построить простое приложение в 10 мин с Ionic Creator, чтобы показать вам, сколько времени он может сэкономить.
Ионный создатель http://ionic.io/products/Creator.
Почему гибридные мобильные приложения и ионные рамки для интерфейса
Экономия времени снова. Я обменял некоторую производительность для огромного экономии времени.
Плюсы:
Я уже знал HTML/CSS/JavaScript. Я также сделал несколько небольших угловых проектов в прошлом. (Ионическое основано на угловой структуре JavaScript) Сохраняет мне время от необходимости изучения нового языка или структуры.
Крестная совместимость платформы. Я могу написать код один раз и использовать его для мобильных веб-сайтов, Android Play Store, или iOS AppStore, который снова меняет время от необходимости изучать Java для Android или Swift для iOS.
Высококачественные документы с примерами Live Preview. Я могу быстро ссылаться на что-то, если я не помню это.
Минусы:
Представление. Хотя он становится ближе и ближе к производительности нативных приложений, он все еще отстает от реагирования на родной (еще одно гибридное приложение альтернативу) и, конечно, фактические собственные мобильные приложения. Я чувствовал, что это был разумный компромисс, учитывая, что 1) Это не 3D-игровое приложение 2) Это только прототип.
Ионные рамки https://ionicframework.com/
Почему Firebase для задней части
Экономия времени еще раз. База данных в реальном времени без необходимости изучать задний конец.
Плюсы:
Backend как сервис. Божественная часть для бытовых разработчиков. Представьте, что имея доступ к базе данных Realtime без необходимости участвовать, как проводить и управлять своим собственным сервером на заднем дне.
Производительность и 3-сторонняя передача данных с помощью библиотеки антенвальфа. Это очень быстро, и это в реальном времени. Как только пользователь введите обновление, изменение отражено в модели, изменение затем обновляется в базе данных FireBase и обратно в другой путь от базы данных FireBase к модели, затем вернуться к представлению, чтобы пользователь мог Смотрите изменения, которые они сделали сразу, все в реальном времени!
Минимальная установка. Это не перетаскивает, но я смог выяснить, как подключить API Firebase от чтения докторов довольно быстро.
Масштабируемость. Он поддерживается Google, использует Google Cloud и построен для масштаба до миллионов пользователей. Если вам нужно перенести или резервное копирование данных, вы можете легко экспортировать все ваши данные в формате JSON.
Все в одном решении. Хостинг, база данных и аутентификация пользователя. Мне нравится иметь свой интерфейс, Back-End и аутентификацию пользователя, которые все размещены на Firebase, потому что она упрощает намного проще, и я доверяю надежности облачных серверов Google.
Отличный свободный план. Познакомился со всеми моими потребностями моего прототипа проекта. Их бесплатный план дал мне 1 ГБ хранилища базы данных в реальном времени (я использовал только 20 КБ из 1 ГБ для текстовых данных), 5 ГБ регулярного хранения (для снимков и других носителей, которые я не использовал), а 1 ГБ статического хостинга (я использовал только 45 МБ из 1 ГБ для всей моей интерфейсной кодовой базы).
Минусы:
Потенциал для нарушения изменений. Firebase обновляет и развивается так быстро, что могут быть постоянные изменения. Firebase V2 к V3 было полным изменением, которое требовало вас вносить множество изменений в вашем коде для работы с новой версией. Многие учебные комбинаты также потеряли много времени и денег, которые они вложили в преподавание FireBase V2. Для меня это было компромисс, я был готов принять за такой полезный, передовый продукт.
Моделирование данных отличается. Firebase – это база данных NoSQL, поэтому вы должны по-разному моделировать ваши данные по сравнению с традиционной базой данных SQL. Я узнал, что у вас есть 1) Держите ваши данные неглубокие – даже если Firebase позволяет 32 уровня глубоко вложенности, вы должны сохранить только один-два уровня вложения по мере необходимости для быстрого и эффективного использования данных. 2) Держите ваши данные в качестве потоков – обеспечивают большую масштабируемость и предотвращает большие запросы, которые замедляют ваш Firebase. 3) Дублируйте ваши данные, чтобы соответствовать вашему просмотру пользовательского интерфейса – в FireBase, все в порядке дублировать ваши данные, и вы хотите сопоставить его, чтобы пользователь видит на каждом экране, чтобы ускорить ваши чтения. Тренование состоит в том, что она может замедлить ваши пишеты и быть немного хлопот, чтобы управлять тем, что для E.G., когда пользователь обновляет имя своего профиля, вам необходимо обновить каждое место, которое вы дублируете данные их имени профиля. Однако, делая это, он позволит вашему приложению легко масштабировать до миллионов чтения без замедления.
** Если вы хотите узнать больше об этой теме, безусловно, лучшее видео, которое я нашел на моделировании данных FireBase, является одним из Chris Esplin: ** -xidgs
Firebase https://firebase.google.com/
Заключение
Суммируйте это, хотя сам запуск не сработал (я расскажу о товарной стороне вещей в предстоящем посте), инвестируя три месяца, чтобы построить этот прототип, был одним из лучших решений, которые я сделал. Я изучаю столько новых концепций, инструментов для программирования и практических способов его применения. Это дало мне уверенность, что независимо от того, какие проблемы я столкнулся с программированием, я всегда могу понять это. Некоторые проблемы могут занять больше времени, чем другие, но я всегда могу быть самодостаточным, чтобы решить ее и отправить эту особенность, которую нуждается в моем продукте. Лучше всего, мне не нужно было заплатить 20 000 долларов в агентство DEV и вступить в долг, чтобы построить прототип. Это стоит всего 87 долларов в течение трех месяцев Ionic Creator Pro и трех прямых месяцев крови, пота и слез.
Я также пришел к осознанию, что я больше не боюсь изучать новые языки программирования или рамки. Для меня это просто другой способ достижения того же вещей. В конце дня вы все еще программируете. Это как переключение автомобилей из Toyota Camry в Porsche Boxter. Это может занять вам некоторое время, чтобы привыкнуть к нему, но в конце концов, вы все еще за рулем от точки A до пункта B.
Этот пост был просто проблемой моего мыслительного процесса, то, что я узнал, и почему я выбрал инструменты, которые я сделал, чтобы построить свой проект Startup, Mootli. Я действительно надеюсь, что это будет полезная ссылка на вас и сэкономит вам некоторое время и деньги при создании следующего проекта!
* Просто побочная записка. Хотя я сохранил проект в качестве мобильного веб-приложения и не развернул его в магазины приложений Android или iOS, используя Iонные рамки, было бы довольно простым преобразовать его в собственные форматы магазина приложений.