Как я создаю своё первое мобильное приложение

Процесс шел с 24 октября по 19 ноября 2017 года, суть приложения — создание заметок, инструмент — Fuse, мой уровень знаний — базовое знание HTML/CSS

Меню

19.11.2017


13. Подведение итогов

Ну что ж, свои первые впечатления о Fuse я получил и описал, теперь работа над приложением должна перейти на новый уровень, чтобы получился конечный продукт, которым можно будет с удовольствием пользоваться. Если интересно продолжение проекта — можно подписаться на новости. Финальная версия этого учебного проекта также доступна на гитхабе.

В целом, итогами этого трёхнедельного» забега я очень доволен, т.к. прокачал все аспекты, которые происходят при создании подобных учебных проектов:

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

Вобщем, одни сплошные плюсы 🙂 И напоследок я подытожил свои впечатления от первого знакомства с Fuse в видеоролике выше. Кто знает, может это будет полезным для вас и началом в освоении новых областей.
Удачного созидания!

19.11.2017


12. Финальные штрихи

Теперь мне осталось лишь дошлифовать получившееся учебное приложение.

Сперва я разбил весь код с одной страницы на несколько. Для этого надо первой строкой в отдельном документе указывать название класса, а в главный файл MainView прописывать его название. Например, страницу потока сейчас оборачивает тег Page, которой я дал соответствующее название класса Flow в её отдельном файле, а на главной стоит тег <Flow />. Теперь структура проекта выглядит так, а код в главной странице значительность упростился:

Папка .uno — скрытая, для работы компилятора Fuse, а js-код, как видно, тоже легко переместился в отдельный файл.

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

Теперь приложение выглядит так:

 

Скачать файл проекта

15.11.2017


11. Удаление стикера

Алгоритм удаление стикера мало чем отличается от редактирования, поэтому этот шаг будет с легкостью выполнен на базе прошлого.

(далее…)

14.11.2017


10. Редактирование стикера

08.11.2017


9. Добавление нового стикера

Итак, текущая задача такова: в окне нового стикера вводить текст с клавиатуры, после нажатия «Save» сохранять этот текст в базу и выдавать поток с обновлённым потоком.

(далее…)

08.11.2017


8. Навигационный косячок

Случайно заметил следующий косячок: действие кнопок на первом и втором экране происходит вне зависимости от места клика, хотя по логике за это должна отвечать только область кнопки 🙂

(далее…)

06.11.2017


7. Создание стикера: навигация

Текущая задача: сделать навигацию на окно создания стикера и возврат на страницу потока.

 

Вариант решения: выдвигать окно с помощью анимации
В анимационном прототипа я уже прикидывал какую анимацию хочу видеть: при клике на кнопку «New sticker» фоновая белая плашка должна растянуться на весь экран, после чего появляются элементы нового окна. При клике на отмену или «сохранить» — возвращаемся в поток обратной анимацией:

(далее…)

04.11.2017


6. Динамический вывод текста в стикерах

Для «подключения» к стикерам их уникального содержимого нам надо ближе познакомиться со связыванием данных в UX Markup (data binding). Вкратце мы уже познакомились с этим аспектом, когда выводили динамическое название кнопки через {ReadProperty button_name}.

(далее…)

03.11.2017


5. Первый макет в Fuse

Создадим макет приложения с помощью UX Markup.

(далее…)

02.11.2017


4. Создание первого стикера, экраны

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

(далее…)