Использование Google Firebase Cloud Messages (FCM) в проектах

👁 92 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Firebase Cloud Messaging (FCM) — это межплатформенное решение для обмена сообщениями, которое позволяет надежно доставлять сообщения без каких-либо затрат. Используя FCM, вы можете уведомить клиентское приложение о том, что для синхронизации доступны новые электронные или другие данные.

Статья состоит из 2 частей. В первой рассматривается введение и начальная настройка, а далее подробно раскрывается принцип отправки и обработки уведомлений FCM.

Авторизация в мобильном устройстве на Cordova через Facebook

👁 93 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Вход в Cordova — приложение с помощью Facebook является одной из наиболее востребованных статей, и здесь мы рассмотрим один из способов реализовать данную настройку.

Для реализации входа будет использован сторонний плагин cordova-plugin-facebook4, который является форком из репозитория phonegap-facebook-plugin.

Данный плагин использует последний SDK SDK для Facebook, позволяя реализовать получение данных из профиля Facebook в проектах Cordova.

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

Нам нужно будет создать новое приложение для Facebook через свой профиль и подключить наше Facebook — приложение к приложению Cordova и результат этого будет похож следующим образом:

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

Создаем новое приложение Facebook

Заходим в свой аккаунт на Facebook и в левом списке ищем пункт Приложения

Жмем на пункт "Управление приложениями"
Жмем на пункт «Управление приложениями»

 

Создаем новое приложение

Тут мы создаем новое приложение или используем существующее. У меня оно уже есть
Тут мы создаем новое приложение или используем существующее. У меня оно уже есть

Выбираем для приложения продукты авторизации

Тут добавляем новый продукт для приложения. Для авторизации достаточно добавить продукт "Вход через Facebook"
Тут добавляем новый продукт для приложения. Для авторизации достаточно добавить продукт «Вход через Facebook»

Обращаем внимание на ID приложения. Он нам нужен будет на этапе настройки плагина cordova-plugin-facebook4 .

Далее настраиваем наше приложение, заполняя основную информацию

Заполняем основную информацию в настройках приложения
Заполняем основную информацию в настройках приложения

И далее основное — добавление платформ к приложению. В данном примере добавим только платформу Android, но вам никто не мешает добавить и остальные

Тут добавляем необходимые для нас платформы, к которым наше приложение Facebook будет комуницировать с этими платформами
Тут добавляем необходимые для нас платформы, к которым наше приложение Facebook будет комуницировать с этими платформами

 

На этапе добавления, в данном случает добавления платформы Android, достаточно прописать идентификатор приложения в Google Play. Чтобы приложение работало оно может быть и не опубликовано в Google Play — это необязательно, но прописать индентификатор необходимо для работоспособности.

Настройка клиентского приложения на Cordova

После создания приложения Cordova необходимо добавить вышеупомянутый плагин командой с параметрами приложения Facebook

cordova plugin add cordova-plugin-facebook4 --save --variable APP_ID="123456789" --variable APP_NAME="myApplication"
  • APP_ID — это ИД приложения Facebook;
  • APP_NAME — имя приложения Facebook.

Теперь код SDK Facebook для авторизации через приложение доступно через код приложения Cordova и сначала нужно инициализировать

        window.fbAsyncInit = function() {
            FB.init({
                appId      : '1971003386550161',
                xfbml      : true,
                version    : 'v2.4'
            });
        };

Далее выполняем код авторизации

                    try {
                        var fbLoginSuccess = function (userData) {
                             if (userData.status=='connected'){
                                  facebookConnectPlugin.api("me/?fields=id,last_name,first_name,birthday,email, picture.width(200).height(200)", ['public_profile', 'user_friends', 'email'],
                                       function onSuccess (result) {
                                            alert("Result: "+JSON.stringify(result));
                                       }, function onError (error) {
                                            alert("Failed: "+JSON.stringify(error));
                                       }
                                  );
                             }
                        };
                        facebookConnectPlugin.login(["public_profile"], fbLoginSuccess,
                             function loginError (error) {
                                  alert('error='+JSON.stringify(error))
                             }
                        );
                   }
                   catch (e) {
                        alert('error1='+e.message);
                   }
                }

Результатом будет следующие данные, которые мы уже можем использовать в нашем приложении

Автоматизация подписи гибридных приложений Android

👁 103 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

  1. Основные положения электронной подписи приложений
  2. Способы генерации ключей подписи и хранилища ключей
  3. Разница между хранилищами *.jks и *.keystore
  4. Ручная подписка APK
  5. Подписка APK на Google Play
  6. Соображения подписи, безопасности и удаление подписки из сборки APK
  7. Автоматизация процесса подписи на этапе сборки APK
  8. Автоматизация подписи гибридных приложений Android

Допустим, что у вас есть гибридное приложение, которое было спроектировано с использование фреймворка Ionic или Cordova с использованием Crosswalk.

Настроив автоматизацию, вы сможете создать подписанный release вашего APK, готовый для публикации на Google Play Store.

Если вы проектируете гибридные приложения, используя Ionic и вы нацелены на платформу Android, то вы сможете использовать Crosswalk, чтобы иметь хорошую совместимость на различных устройствах.

Использование Crosswalk в вашем проекте Ionic так же просто, как ввести эту команду:

ionic browser add crosswalk

Ionic позаботится о том, чтобы установить для вас Crosswalk.

Когда вы хотите опубликовать свое приложение в Google Play Store, вам нужно построить APK в режиме выпуска т.е. release, подписать его ключом вашего хранилища ключей и сделать zipalign пакет для его оптимизации.

Условимся, что у вас уже есть сгенерированные ключи в хранилище ключей и нам остается настроить, чтобы система автоматически подписывала приложение на этапе построения release, а если хотите подробно подробно почитать про это, относительно кроссплатформенных приложений на Ionic, то можете обратиться к официальному источнику.

Для начала нам необходимо создать файл под именем release-signing.properties в директории проекта project_folder/platforms/android/. В этот файл добавляем пару строк

storeFile=/path/to/keystore/yourname.keystore
keyAlias=youralias

Конечно же, вы можете поменять путь к файлу ваших ключей и алиас ключа. Затем вы должны построить вашу сборку release

ionic build --release android

Появится небольшое окно с запросом пароля хранилища ключей и пароля ключа. Если вы не хотите вводить два пароля каждый раз, вы можете записать их в файлах release-signing.properties, добавив две строки, похожие на следующие

storeFile=/path/to/keystore/yourname.keystore
keyAlias=youralias
storePassword=your_keystore_password
keyPassword=your_key_password

В целях безопасности и сохранности ключей не рекомендуется хранить в сторонних файлах ключи к подпискам ваших приложений.

После построения вы найдете построенный APK в директории проекта project_folder/platforms/android/build/outputs/apk/. Обычно, там будут 2 вида APK под именами android-x86-release.apk и android-armv7-release.apk.

Замечание 1.Помните, что вы должны загружать как x86, так и armv7 apks в Play Store, потому что с помощью Crosswalk ваше приложение содержит собственный код, специфичный для архитектуры.

Замечание 2. Не забудьте активировать «расширенный режим» в консоли разработчика (если вы находитесь в «Простом режиме», можно активировать только один apk за один раз) и загрузить один APK за другим. Google достаточно умен, понимая, что APK нацелены на две разные платформы. дополнительно про это можете почитать на официальном сайте.

 

Собственное дилоговое окно в Ionic

👁 63 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Создать собственное диалоговое окно появилось из-за потребности разместить на нем те элементы формы, которые небыло возможности вывести стандартным диалоговым окном из модуля AlertController. Можно было, конечно и выводить эти формы отдельной страницы, но нам нужно было именно выводить на одной странице все, чтобы после операций эти формы исчезали и появлялись, если мы хотим добавить что-то. Для начала нам нужна страница, любая, допустим, сгенерируем ее в проекте при помощи команды Ionic и назовем «content»:

ionic g page content

Далее в файл content.html добавляем в корень элемента ion-content следующий скелет кода xml:

<ion-content>
  <ion-card class="modal-dialog" [class]="dialogStatus">
    <ion-card-header>
      Add New Course
    </ion-card-header>
    <ion-card-content>
      <ion-list>
          <ion-item>
            <ion-input [(ngModel)]="courseTitle" placeholder="Title"></ion-input>
          </ion-item>
          <ion-item>
            <ion-textarea [(ngModel)]="courseDescription" rows="5" placeholder="Description..." maxLength="300"></ion-textarea>
          </ion-item>
          <ion-item>
            <ion-input [(ngModel)]="coursePrice" type="number" placeholder="Price, $"></ion-input>
          </ion-item>
          <ion-item>
            <ion-row>
              <ion-col col-6>
                <button full ion-button (click)="dialogButton('ADD_COURSE')">Ok</button>
              </ion-col>
              <ion-col col-6>
                <button full ion-button (click)="dialogButton('CANCEL')">Cancel</button>
              </ion-col>
            </ion-row>
          </ion-item>
      </ion-list>
    </ion-card-content>
  </ion-card>
  <ion-fab top right edge>
      <button ion-fab mini><ion-icon name="add"></ion-icon></button>
      <ion-fab-list>
        <button ion-fab><ion-icon name="list-box" (click)="openDialog()"></ion-icon></button>
      </ion-fab-list>
  </ion-fab>
  ...

</ion-content>

Далее добавляем в фай content.scss добавляем правило для нашего диалогового окна:

.modal-dialog{
    $modal-inset-min-width:0;
    $modal-inset-min-height-small:0;
    display: absolute;
    top: 0pt;
    left: 0pt;
    height: auto;
}
.modal-hide{
    height: 0pt;
}
.modal-show{
    height: auto;
}

В файле content.ts добавляем логику обработки событий кнопок:

@Component({
  selector: 'page-content',
  templateUrl: 'content.html',
})
export class ContentPage { 
  //Переменная для хранения состояния диалога
  dialogStatus = "modal-hide";
  //Переменные для хранения из форм
  courseTitle = "";
  courseDescription = "";
  coursePrice = "";
  
  ...
  
  constructor(public navCtrl: NavController, public navParams: NavParams) {
        
  }
  
  //Обработчик события нажатия на кнопки в диалоге
  dialogButton(action)
  {
    if(action == 'CANCEL')//Если нажата кнопка CANCEL
    {
      this.dialogHide();
    }
    if(action == 'ADD_COURSE')//Если нажата кнопка OK
    {
        //Сохраняем данные из форм
        let data = {
          'title': this.courseTitle,
          'icon': 'assets/icon/ui/course.svg',
          'description': this.courseDescription,
          'color': '#E63135',
          'price':this.coursePrice
        };
        //Обнуляем форму
        this.courseTitle = "";
        this.courseDescription = "";
        this.coursePrice = "";
    }
  }
  //Обработчик закрытия диалога
  dialogHide()
  {
    this.dialogStatus = "modal-hide";
  }
  //Обработчик открытия диалога
  dialogShow()
  {
    this.dialogStatus = "modal-show"; 
  }
}

Firebase и Ionic. Настройка и операции CRUD

👁 116 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Этот пост пошагово расскажет, как реализовать CRUD — операции на Angular 5 для Firebase — проекта. Итак, давайте продемонстрируем Create Read Update and Delete операции на Angular 5 проекта.

О Firebase

Firebase — это NoSQL — база данных, которая продвигается в облачном хранении информации, поэтому нет необходимости закупать отдельный сервер для проекта, учитывая, что бесплатная версия вполне хватает для мелких проектов или проектов для демонстративной работы. База данных Firebase Realtime — это база данных NoSQL, размещенная в облаке. С его помощью вы храните и синхронизируете данные между пользователями в режиме реального времени.

Что включает в себя Firebase:

  • Realtime Database — облачная база данных для хранения данных в JSON формате;
  • Cloud Storage — облачное место для хранения файлов;
  • Hosting — хостинг для WEB — сайта;
  • Performance Monitoring — инструменты мониторинга;
  • Authentication — система аутинтификации через различные платформы провайдеров;
  • Crashlytics — система мониторинга багов и ошибок;
  • Test Lab for Android — лаборотория для тестирования устройств на системе Androidж
  • Cloud Firestore — база данных для хранения, получения и синхронизации данных и файлов в глобальном масштабе.

В данной работе будем использовать только Realtime Database для хранения и получения JSON — данных в реальном времени.

Требуемые инструменты

Для работы будут необходимы следующие инструменты:

– Ionic CLI
– Angular 5
– AngularFirebase
– Ionicons
– VS Code & Visual Studio Editor

Описание примера

В примере будет полноценное приложение Ionic, в котором будет реализовано CRUD с удаленной БД Firebase на вашем аккаунте Google. Дополнительно покажем, как реализовать каркас формы приема и выдачи данных.

Описание шагов

Создадим базовое приложение Ionic для мобильного телефона. Будем следовать следующему пошаговому курсу:

  • Шаг 1. Создаем приложение.
  • Шаг 2. Устанавливаем зависимости (AngularFire2 и Firebase).
  • Шаг 3: Создаем поставщика/провайдера для выполнения коммуникации CRUD.
  • Шаг 4.  Устанавливаем домашнюю страницу для отображения зарегистрированных контактов.
  • Шаг 5: Создаем страницу для добавления / изменения контактов.

Шаг 1. Создаем приложение

Создаем новое приложение по команде

ionic start Courses blank

Приложение будет представлять из себя список курсов. И будет состоять из страниц:

  • home.html — список всех курсов;
  • course-edit.html — страница редактирования курса;
  • course-info.html — страница просмотра информации о курсе;
  • course.html — страница прохождения курса.

Создадим их:

ionic g page course-edit
ionic g page course-info
ionic g page course

Шаг 2. Устанавливаем зависимости

Для этого набираем:

npm install firebase angularfire2 --save

Чтобы начинать  работу с базой данных Firebase необходимо в главном модуле подключить зависимости:

 

Шаг 3. Создаем провайдера

Провайдер нужен для создания управления промежуточными операциями CRUD. Создается из консоли:

ionic g provider course

 

Пост не закончен …