Итеративные прототипы могут превратить ваши концепции в рабочие идеи быстрее, чем пытаться все правильно изложить на бумаге, только обнаружив, что по какой-то причине это не совсем переводит на экран.
Как разработчик, ваша задача — воплощать идеи в реальность, а не возиться с Photoshop весь день. Будь то для клиента, вашего босса, менеджера проекта, проверить идею, прототипирование может быть хорошим способом запустить ваше приложение в жизнь.
Для некоторых из нас естественный процесс — начать с внешнего интерфейса, а позже обработать данные. Но ваше приложение не может сделать многое без рабочих данных.
Вы должны уметь имитировать модели данных и генерировать для них какой-то рабочий API. Насколько нам известно, форма данных может измениться, и вам нужен прототип, дружественный к нему бэкэнд, который быстро загружается и эффективен в направлении разворотных точек.
Вам также может понравиться:
Как заполнить базу данных с помощью EF Core .
Как подделать данные с реальными данными
Оказывается, вы можете использовать Google листы как часть искусственного бэкэнда. Да. Это правильно. Хорошо, гугл листы .
И вы можете сделать это с помощью Firebase. Вот быстрый рецепт того, как выполнить эту магию.
Ингредиенты
- x1 Google лист с некоторыми данными.
- x1 учетная запись Google для бесплатного уровня Firebase.
Метод
Шаг 1. Настройка проекта Firebase
Если вы не знакомы с Firebase , есть бесплатный уровень, который вы можете использовать бесплатно. Google даже не спросит у вас номер вашей кредитной карты, поэтому вы можете быть уверены.
Шаг 2: Создайте свою базу данных
Посмотрите на свою панель навигации. Отследить Развивай . Нажмите на базу данных . Теперь нажмите на кнопку «создать базу данных».
Это будет говорить о разрешениях и все такое. Убедитесь , что вы измените права доступа на чтение и запись т true. Вы хотите иметь возможность что-то с этим делать, иначе это будет просто read-onlyнекая база данных.
Нажмите кнопку «Опубликовать».
Как только все будет хорошо, вы получите URL базы данных. Обратите внимание на это. Тебе это понадобится на потом.
Хорошо отметить, что эти правила безопасности все еще важны, и вы не должны оставлять их открытыми без дополнительной логики доступа. Хранение readи writeполностью открытые разрешения просто облегчают жизнь на этапе разработки. Не так много (или безопасно) для производственных помещений.
Шаг 3: Создайте электронную таблицу
Вам нужны следующие минимальные требования, чтобы все заработало:
- ключ идентификатора.
- некоторые данные.
На листе показано, как ваши данные будут преобразованы в JSON для отправки API в ваше приложение. Первый ряд действует как ваш ключ. Последующие строки — это ваши строковые значения.
Вот суть того, как это должно выглядеть:
Прелесть этого в том, что вам нужно иметь дело с тем, как вы хотите, чтобы ваши данные выглядели. Думайте об этом как о конечном запрашиваемом результате от вашего SQL, MongoDB, DynamoDB или любой другой используемой вами БД.
Трюк с вложенными данными
Плоские данные могут быть довольно одномерными. Вложенные данные — это вопрос присоединения __(кстати, это двойное подчеркивание) и имени вложенного ключа.
Например:
Будет генерировать что-то вроде этого:
JSON
1
{
2
"1":{
3
"firstName":"Aphinya",
4
"lastName":"Dechalert",
5
"timeZone":"gmt+13 2020",
6
"galaxy":{
7
"coordinates":"90 glactic latitude",
8
"name":"Milky Way"
9
}
10
}
11
}
(Пример содержит первую строку только для того, чтобы получить общее представление. В действительности он вернет все строки.)
Шаг 4: отредактируйте некоторые скрипты
Итак, у вас есть ваши данные. Теперь вы хотите волшебным образом превратить его в API. Все еще в Google Sheets, нажмите меню и найдите Инструменты . Выберите <> Редактор скриптов
Это приведет вас к консоли редактора кода с Code.gsоткрытым файлом. Замените все в редакторе с Code.gsчастью в этом github gist .
В верхней части сценария два из следующих:
<REPLACE WITH YOUR SPREADSHEET ID>
Вы можете найти это URL вашей фактической таблицы. Структура выглядит примерно так:
https://docs.google.com/spreadsheets/d/ yourSpreadsheetIDHere / edit # gid = 0
<REPLACE WITH YOUR REALTIME DB URL>
Помните тот URL, который я говорил вам ранее, что он пригодится позже? Сейчас позже.
Дайте вашему проекту имя, и он должен автоматически сохранить скрипт. Посмотрите на свое меню и нажмите View . Это даст вам кучу вариантов. Выберите Показать файл манифеста
Замените содержимое на содержимое appscript.jsonэтого appsscript.json . Ctrl + S, чтобы сохранить. Теперь осталось только запустить скрипт.
В меню нажмите следующее: Run -> Run function -> initialize .
Появятся несколько подсказок и экранов авторизации. Просмотрите разрешения, примите всплывающее окно и альт! Ваша база данных Firebase теперь содержит данные из ваших таблиц Google.
Поскольку Firebase поставляется с предварительно настроенными API REST, вот официальная документация для точек доступа и способы их использования. Чтобы этот пост был коротким и приятным, я не буду здесь их обсуждать.
Если вы хотите быстро и массово обновить ваши данные, вы можете сделать это через электронную таблицу и снова запустить скрипт.
Вот и все.
Прожектор рамочного интерфейса: угловой
Существует более десятка инструментов для создания прототипов, которые вы можете использовать. Однако, как разработчики, мы занимаемся созданием кода — так зачем делать что-то дважды в двух разных пространствах, если вы можете сделать это один раз?
Прототипирование с Angular не всегда первое, что приходит на ум, но возможно и очень эффективно, если все сделано правильно.
Вероятно, это будет звучать как плагин, потому что я опытный разработчик Angular — но, чтобы быть ясным, они меня никоим образом не спонсируют.
Другие библиотеки и фреймворки тоже получат свое время в будущем — только не в этом посте;).
Так почему же Angular?
Код многократного использования
Если ваша система уже работает на Angular, создание прототипа отдельного приложения Angular может означать просто включение соответствующего кода. Это может пригодиться, потому что он хранит ваш прототипный код отдельно от основного репозитория, пока функция не будет проверена и пользовательский тест не будет принят.
Если это совершенно новое приложение Angular, фреймворк предлагает набор визуальных шаблонов, которые вы можете использовать для реализации необходимого пользовательского опыта. CLI также упрощает и ускоряет создание шаблонов кода благодаря стандартизированным шаблонам.
Библиотека хороших компонентов
Angular Material, вероятно, одна из лучших библиотек компонентов для Angular. Визуальный дизайн основан на дизайне Google Material и реализует принципы как компоненты пользовательского интерфейса, поэтому вам не нужно это делать.
Когда дело доходит до кода, процесс состоит из трех частей:
- Создание сервисов для подключения, выборки и отправки данных.
- Делать что-то с этими данными и придумывать, как правильно отобразить их на внешнем интерфейсе.
- Делаем интерфейс красивым.
Последняя часть может занимать много времени и иногда расстраивать, особенно когда вам приходится иметь дело с дизайном нескольких устройств вручную
Angular Material разберется с вами и ускорит процесс создания прототипа.
Возможности микро-интерфейса
Angular Elements — это то, что часто прячется в глубине более продвинутых уроков. Никто на самом деле не говорит об этом в начальных кругах.
Angular Elements позволяет создавать автономные компоненты, которые вы можете добавить в любой существующий проект. Это означает, что если требуется только определенная часть вашего прототипа, вам нужно только экспортировать эту конкретную функцию.
Это учитывает микро-интерфейсы — архитектурный метод, который часто используется для работы с устаревшим кодом, который может использовать несколько платформ и библиотек в разных версиях.
Или, может быть, босс просто хочет получить набор новых функций, но у вас нет времени, чтобы перекодировать 3-летнюю работу, которая может быть устаревшей из-за обновлений и несовместимости.
Размещение вашего прототипа для тестирования в реальных условиях
Итак, у вас есть работающее приложение на вашем локальном хосте, и вы хотите протестировать его в реальной среде.
Firebase имеет бесплатный хостинг и бесплатный поддомен. Вы можете настроить свой собственный домен позже. Дело в том, чтобы получить это приложение и запустить как можно скорее.
Создайте свое угловое приложение
Существует не так много для создания вашего приложения Angular.
Просто запустите ng build --prodв CLI, и вы получите distпапку.
развертывание
Для этой части вам понадобится firebase-tools.
Вы можете получить это через CLI, используя следующую команду:
xxxxxxxxxx
npm install -g firebase-tools
Как только вы получите его, вам нужно будет войти в систему:
xxxxxxxxxx
firebase login
Когда вы будете внутри, инициализируйте ваш проект Firebase в корневой папке вашего проекта Angular. Используйте следующую команду:
xxxxxxxxxx
firebase init
Он задаст вам несколько вопросов, чтобы настроить ваши настройки. Вот вопросы и ответы, которые вы должны использовать:
Возможности Firebase CLI → Хостинг.
Файл правил базы данных → Просто используйте по умолчанию
Публичный каталог → dist
Настроить как одностраничное приложение → да
Перезаписать index.html → нет
Теперь для фактической части развертывания используйте следующую команду:
xxxxxxxxxx
firebase deploy
И мы сделали!
Вы можете использовать, чтобы открыть свой недавно развернутый сайт прямо из командной строки, используя следующее:
xxxxxxxxxx
firebase open
и выберите Hosting: Deployed Site
Чтобы увидеть развертывание в консоли Firebase, перейдите в раздел Хостинг, и вы увидите экран, который дает вам дополнительную информацию.
Заключительные слова
Прототипирование в Angular не так сложно. Вы также можете использовать метод развертывания в других библиотеках и средах, таких как React и Vue, за исключением, возможно, части сборки.
Но фактический процесс развертывания довольно стандартный и простой. Я надеюсь, что вы нашли эту часть полезной и спасибо за чтение!