Друзья! Я решил открыть и сделать один из платных уроков - бесплатно. При помощи этого урока вы можете создать мобильное приложение книги для Android и IOS. Это не конструктор, а полностью нативное приложение. Платформа Flutter (кроссплатформенное приложение).
Урок с нуля, для новичков, которые не разбираются в программировании. Всё достаточно просто. Вам даются исходники мобильного приложения и видеоурок как с нуля создать это приложение. Начиная с подготовки программ, настройки, компилирования и заканчивая публикацией в маркетах. Не требует админки, книга офлайн. Есть монетизация.
Итак... поехали...
Для начала посмотрите анонс урока, чтобы понять что это такое и как выглядит приложение:
Для урока требуется
Следующие программные обеспечения должны быть установлены у вас на компьютере:
- JAVA SDK
- Android Studio
- Adobe Photoshop (для графики, иконок)
- Flutter (версия 2.2.0) СКАЧАТЬ >>>
- DB Browser of SQLite СКАЧАТЬ>>>
ИСХОДНИКИ
Исходники приложения Android и IOS (Flutter): СКАЧАТЬ >>>
Исходники иконки на Photoshop: СКАЧАТЬ>>>
Урок 1
Установка Android Studio
Если вы впервые делаете по моим уроком, да и вообще впервые занимаетесь разработкой, то у вас должен быть установлен Java SDK и Android Studio. Это программное обеспечение для разработки мобильных приложений под андроид. Смотрите видео как с нуля установить и подготовить рабочий стол.
Урок 2
Приложение Андроид
Скачайте Flutter актуальную версию для приложения (смотрите начала урока, версию), установите. Скачайте исходники приложения. Добавьте в Android Studio плагины Flutter и Dart. Смотрите видео: https://disk.yandex.ru/i/YFDomHGHrizPtA Откройте исходники в Android Studio и настройте Flutter.
Видеоурок как скачать, установить Flutter, открыть проект и настроить Flutter в проекте. Пропускаете момент где показано замена ссылки api в файле configuration.json. Его здесь нет. Проверяем открывается ли проект в эмуляторе. Делайте как на видео. На видео другое приложение, но во всех приложениях на платформе Flutter порядок одинаковый.
Затем требуется произвести следующие настройки:
1) Замените иконки приложения для Android. Для этого откройте папку android - app - src - main - res и поменяйте иконки приложения в следующих папках:
- mipmap-xxxhdpi
- mipmap-xxhdpi
- mipmap-xhdpi
- mipmap-mdpi
- drawable-ldpi
- mipmap-hdpi
2) Поменяйте идентификатор проекта и название приложения на любой свой. Пример: com.appbiz.book - это иденфикатор приложения. Ebook - это название приложения. Смотрите видео где и как нужно менять https://youtu.be/Wj0aUalkgJ8
3) Цветовую гамму приложения можно поменять, заменив старые цвета на новые. Например в приложении используется синий цвет, код: 2c6ca6. В Android Studio откройте меню Edit - Find - Replace in Path. В первой строке впишите что хотите найти: 2c6ca6 во второй на что хотите поменять: A63937 Проверьте на эмуляторе или устройстве цветовой оттенок будет красным. Чтобы узнать и сгенерировать коды цветов, воспользуйтесь этой ссылкой https://color.adobe.com/ru/create/color-wheel
4) Откройте Firebase https://console.firebase.google.com, создайте файл google-service.json и скопируйте в папку app (замените существующий). Также произведите настройки как на видео. Это требуется для пуш уведомлений. Смотрите видео: https://disk.yandex.ru/i/fKFX2JZPSIm_Aw
5) Сделайте pub get
8) Проверьте на эмуляторе, как вы делали в начале, при открытии проекта в Android Studio и проверки проекта на эмуляторе. Внимание иногда возможно, что новые изменения не будет показывать на эмуляторе из за сохраненного кеша. Перезагрузка решает проблему.
Наполняем контент книги
Открываем программу DB Browser of SQLite и наполняем контент. Смотрите видео: https://disk.yandex.ru/i/sURtb692uUDz1g
Урок 3
Монетизация приложения
Для монетизации мобильного приложения используется сервис Google Admob. Коротко: google показывает рекламу в вашем приложении и делится с вами доходом.
1) Вы должны быть зарегистрированы в сервисе Google Admob https://admob.google.com/intl/ru/home/
2) Создайте рекламные объявления. Смотрите видео: https://www.youtube.com/watch?v=WsEE7qzVtFo
3) В Android Studio откройте lib - admob_service.dart и вставьте ваши id баннера и межстрочного объявления.
Например:
static String get bannerAdUnitId => Platform.isAndroid ? 'ca-app-pub-3940256099942544/6300978111' : (здесь должен быть ваш id баннера)
'ca-app-pub-3940256099942544/2934735716'; (здесь должен быть ваш id баннера)
- Просто дублируйте один и тот же id баннера в эти две строчки
А ниже…
static String get iOSInterstitialAdUnitID => Platform.isAndroid ? 'ca-app-pub-3940256099942544/1033173712' : (здесь должен быть ваш id межстрочного объявления)
'ca-app-pub-3940256099942544/1033173712'; (здесь должен быть ваш id межстрочного объявления)
Точно также дублируйте id межстрочного объявления в эти строчки.
Урок 4
Компиляция приложения и публикация в Google Play
Проект готов. Теперь компилируем его как в этом видео https://disk.yandex.ru/i/epIVDMzTUwst_A И затем публикуем в Google Play https://www.youtube.com/watch?v=QvnzSjp6mL8
IOS
Приложение IOS для Iphone, Ipad
Для IOS проект открываем и работаем на Mac OS (на маке). Этот же проект, уже сохраненный и сделанный для Android перенесите на мак, если делали на WIndows. Обязательно должна быть установлена версия Flutter как в случае и с Android если делали на Windows. Вот порядок действий которые нужно проделать:
1) Если у вас нет аккаунта разработчика Apple то зарегистрируйтесь и создайте новое приложение в консоли. Смотрите видео с нуля как зарегистрироваться и создать первое приложение:
2) На маке откройте папку проекта, затем ios\Runner\Assets.xcassets\AppIcon.appiconset и замените иконки на свои сохраняя при этом размеры как в примере. При сохранении иконок обязательно уберите альфа каналы. Сделать это достаточно просто. Нажмите два раза по иконке. Откроется Просмотр Изображений. В этой же программе откройте Файл - Экспортировать. Уберите галку с Альфа и заново сохраните файл в эту же папку.
3) Откройте Android Studio. Выберите выберите в панели эмулятор IOS и проверьте приложение в эмуляторе.
4) Закройте эмулятор, сохраните проект.
5) В Android Studio откройте Build - Flutter - Build IOS. Дождитесь полной сборки.
6) Закройте Android Studio и откройте Xcode. В Xcode поменяйте идентификатор и название проекта. Для этого откройте: eBook - ios и два раза нажмите на файл Runner.xcworkspace. Затем в Xcode в левой панели выделите Runner а слева в разделе General в строке Display Name укажите название приложения, в строке Bundle Identifier id проекта, например: com.myapp.book/ Там же перейдите в раздел Signing & Capabilities перейдите в All, поставьте галку на Automaticaly manage signing и выберите профиль в Appstore.
Слева выберите Info.plist и справа в первой строке GADApplicationIdentifier в столбце Value вместо ca-app… вставьте свой app id Admob (иденфикатор рекламы приложения)
7) Соберите архив и отправьте в Appstore на публикацию.
Смотрите видео:
Как опубликовать приложение
в Google Play и App Store
Как создать аккаунт разработчика
Смотрите видео с нуля для новичков как опубликовать приложение в Google Play
Ошибки при публикации приложения
Как опубликовать приложение в AppStore
------------------------------------------------
Вам понравился урок? Вы можете поддержать мой проект Appbiz на любую сумму вот здесь:
https://yoomoney.ru/to/41001925694264
Но если вы сделаете донат на сумму свыше 500 руб., то вас ждет грандиозный бонус и не один, а несколько.
Мой канал в Youtube: https://www.youtube.com/c/ErikDeliyev
Мой сайт: https://appbiz.ru/
Удачной и продуктивной работы!
