Рубрики
Без рубрики

Как создать приложение Crud To-Do, используя IONIC 3

Всем привет! Это сообщение на up и подходящая тема – Ionic! К концу этого поста вы узнаете, как создать простое приложение Crud (Create, Read, Update и Delete), которое также подключено к Firebase. Гибридные мобильные приложения – что они? Проще говоря

Автор оригинала: FreeCodeCamp Community Member.

Всем привет! Это сообщение на up и подходящая тема – Ionic! К концу этого поста вы узнаете, как создать простое приложение Crud (Create, Read, Update и Delete), которое также подключено к Firebase.

Проще говоря, это мобильные приложения, созданные тем легким для изучения языков; HTML, CSS и JavaScript. Красота разработки гибридного мобильного приложения – это тот факт, что их можно скомпилировать для работы с любой платформой. Если вы ленивы, как и твой действительно, вам будет легче использовать один код для создания многих приложений, вместо разработки отдельных приложений для каждой платформы.

Ionic – одна из популярных рамок, чтобы сделать ваше собственное гибридное мобильное приложение. Он может быть встроен в Android, IOS, Windows Phone, Progressive Web или настольное приложение. И тестирование приложения настолько проще, поскольку он может быть в прямом эфире, перезагрузка прямо на ваш браузер.

Шаг 1 – Настройка все это

Изначально подпишитесь на учетную запись IONIC PRO, здесь Отказ Это сделает здание и доставить приложение проще. Возможно, вам придется подписаться в течение всего времени в процессе создания проекта.

Чтобы начать кодирование вашего первого ионного приложения, есть куча вещей, которые вам нужны;

  1. Node.js – это довольно легко. Просто отправляйся в Node.js Сайт И загрузите идеальный установщик для вас. Нам нужен диспетчер пакетов узла, удачно по имени NPM, чтобы установить все зависимости для многих модулей, которые вы захотите использовать в вашем приложении. Если вы разрабатываете на Mac и установлен домой, просто введите команду Brew Установить NPM на консоли.
  2. ShummScript – TypeyScript, Suppert of JavaScript используется вместо JS для большинства кода. После установки Node.js, на консоли, введите NPM Установить -G Tymdercript Отказ
  3. Cordova – Cordova – это каркас, которая строит HTML, CSS и JS/TS код в приложение. Чтобы установить, введите NPM установить -G Cordova
  4. И, наконец, Ionic – введите NPM Установить -G Ionic Отказ

Бонус – вы можете скачать все три за один иди с этой командой! NPM Установить -G Shotscript Cordova Ionic Отказ

Теперь, когда вы настроили окружающую среду, давайте начать эту вечеринку !! ??

Создание вашего первого приложения

Изнутри консоли перейдите в папку, в которую вы хотите сохранить приложение. Мои личные предпочтения состоит в том, чтобы иметь выделенную папку для всех моих ионных проектов в моих документах.

Затем введите Ионный запуск Отказ Консоль затем подсказывает вам имя для проекта, например, Название проекта: задачи Отказ

Затем он предлагает вам указать тип приложения.

? Starter template: (Use arrow keys)
  tabs     | A starting project with a simple tabbed interface
> blank    | A blank starter project
  sidemenu | A starting project with a side menu with navigation in the content area
  super    | A starting project complete with pre-built pages, providers and best practices for Ionic development.
  tutorial | A tutorial based project that goes along with the Ionic documentation
  aws      | AWS Mobile Hub Starter

На данный момент давайте сделаем это пустым проектом, списком дел со всеми функциями Crud на одной странице. Затем он предложит вам разрешение на добавление платформ Android и iOS.

? Integrate your new app with Cordova to target native iOS and Android? (y/N) y

Он будет приступить к загрузке дополнительных зависимостей, которые позволят вам жить перезагрузить приложение в эмуляторах и устройствах. Как только нативные SDK загружаются вам, вам предложено добавить Ionic Pro SDK, если вы хотите сделать это.

? Install the free Ionic Pro SDK and connect your app? y

Если вы выберете да, то консоль подскажет вам свой адрес электронной почты и пароля Ionic Pro, настроить в начале этого поста.

? Email: 
? Password:

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

? What would you like to do? (Use arrow keys)
  Link an existing app on Ionic Pro
> Create a new app on Ionic Pro

Затем консоль переходит к вашему предпочтительному GIT-хосту, чтобы сохранить свой репозиторий. Я предпочитаю Github, так как это то, с чем я более знаком.

? Which git host would you like to use? (Use arrow keys)
> GitHub
  Ionic Pro

В зависимости от вашего выбора выше, если вы выбрали GitHub, как у меня есть, вам может потребоваться открыть браузер, чтобы дать свои учетные данные и войти в систему. После выполнения вернуться обратно в консоль. Затем вам нужно связать это приложение к репозитории или создать новый. Если у вас нет репозитория, вернитесь к Github и создайте один сейчас. Как только новый репозиторий создан, вернитесь к консоли и введите y Отказ

? Does the repository exist on GitHub? y

После этого выберите правильный репозиторий из списка, отображаемого на консоли. Я буду использовать только мастер-филиал сейчас и пойду с предыдущим вариантом.

? Which would you like to do? (Use arrow keys)
> Link to master branch only
  Link to specific branches

И, наконец, мы закончили создание приложения !! ??

Но, если вы выбрали IONIC PRO в качестве GIT-хоста, выберите опцию, чтобы создать пару ключей SSH.

? How would you like to connect to Ionic Pro? (Use arrow keys)
> Automatically setup new a SSH key pair for Ionic Pro
  Use an existing SSH key pair
  Skip for now
  Ignore this prompt forever

И мы тоже сделали здесь! Теперь, чтобы посмотреть на приложение

Есть два разных команда для просмотра приложения в браузере.

  1. Ионическая подача
  2. Ионическое обслуживание -L.

Ионическая подача Отображает приложение в представлении веб-приложения.

Ионическое обслуживание -L Отображает приложение на многих платформах мобильных устройств. Вам нужно будет скачать его изнутри в консоли, когда будет предложено, чтобы получить этот вид.

И это обертывание на сегодня! Мы успешно создали и связали приложение Ionic 4 на хост управления версией.

Структура проекта

  1. app.module.ts – точка входа приложения. Любые и все компоненты, страницы, модули и провайдеры должны быть добавлены в этот файл, так как оно отслеживает и контролирует многие ресурсы, используемые приложением.
  2. app.componentents.ts – первая страница, которая загружается в виде приложения, запускается, со всем кодом, который вы хотите выполнить в первую очередь. Страницы, которые вы можете пожелать пользователю просматривать сначала, например, экран входа в систему, введен в этот компонент.
  3. app.html – шаблон приложения, где другие пользовательские пользователи будут установлены на.
  4. app.scss – страница, которая содержит все переменные SASS и стили, которые будут использоваться в глобальном масштабе в приложении.

Давайте отправимся на главный компонент, который мы будем поправки за это приложение, дом.

Как видно выше, домашний компонент имеет три страницы;

  1. home.html – вид/ui страницы кодируется здесь, используя HTML.
  2. Home.scsss – Любая специфическая страница, которая должна быть добавлена здесь, наряду с переменными SASS, которые будут использоваться на странице.
  3. Home.ts – Операционная логика, в нашем случае добавление новых задач в список, кодируется в Teamscript здесь.

Шаг 2 – Реализация операций CRUD

Что я надеюсь реализовать как видно выше, является очень простым дизайном; Ввод текста для ввода задач, кнопка, чтобы добавить ее в список, представление списка для просмотра элементов и, наконец, кнопка «Удалить», чтобы удалить элементы из списка. Я мог бы изменить дизайн позже.

Продолжай и откройте редактор. Давайте пройдемся через все страницы и компоненты, найденные в текущем каталоге.

Создание пользовательского интерфейса для C и R

Для начала давайте сначала решаем UI. Когда вы открываете Home.html, это текущий код на странице.


	
		Ionic Blank
	


	The world is your oyster.
	
If you get lost, the
		docs
	will be your guide.

Вы можете удалить все в пределах Теги. Это тело страницы, а элементы в этих тегах будут видны.

Теперь добавьте тег ввода в организме, поэтому мы можем ввести в задачу, а затем кнопку, чтобы вызвать метод, чтобы добавить задачу в список.

Не красиво, верно? Давайте добавим немного стили сейчас!

Ionic имеет специальный входной тег <Ион-вход> , это приходит с какой-то укладкой, закодированным внутри него, так что идите вперед и выключайте скучное старое к <Ион-вход> !

Ionic также приходит с определенными специальными классами, которые имеют стиль, как Ион-кнопка Отказ Я также хочу иметь кнопку до конца ввода, а не прямо ниже. Последние изменения выглядят так;

Намного лучше, верно!? И все это без написания каких-либо CSS! Давайте посмотрим на код выше.

<Ионный пункт> Тег обычно используется с элемент. Но, используя это здесь, с входом в этом элементе дает ему добавленный стиль в фокусе или использовании. Используя класс Пункт-Примечание Для элемента div позволяет кнопку быть в соответствии с входным тегом. Это так, дает более бесшовный и гладкий дизайн, по сравнению с первым. Поскольку угловые также интегрированы в IONIC, мы можем использовать NGModel, чтобы легко связать значения в представлениях к этому в файлах TearpScript.

Ionic также поставляется со встроенной пачкой иконок, иониконы. Его очень просто использовать, и быстрый пример будет подменить текст задачи Добавить с помощью Отказ Найти больше на Ionicons, здесь Отказ

Конечный результат! Я вполне доволен тем, что сейчас выглядит, но не стесняйтесь играть больше с цветами и стилем.

Реализация создания и чтения функциональности

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

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})

export class HomePage {
    constructor(public navCtrl: NavController) {  }
}

Давайте быстро посмотрим, что у нас здесь. Вы импортируете какие-либо компоненты или внешние модули, которые вам могут потребоваться использовать на этой странице на самом вершине. Следующие несколько строк описывают шаблон, к которому многие функции вы можете писать, принадлежат и манипулировать. И, наконец, вся логика вы можете кодировать. Любой код, который вы хотите выполнить перед просмотром или взаимодействием со страницей, должен быть записан в конструкторе.

Так как мы будем добавлять новую DOS каждый раз, нам нужно место для его хранения. Самый простой способ сделать это – это инициализировать массив. Если у вас был опыт работы с JavaScript ранее, кодирование с помощью TeampScript будет куском пирога!

Давайте назовем наш список TaskList, но поскольку нам нужен список, доступ к доступу от более чем одного метода кода, нам нужно инициализировать его вне конструктора tasklist = []; Отказ Теперь, чтобы написать код для обработки кнопки «Добавить», нажмите, давайте назовем это Addtask Отказ Все, что нам нужно сделать, это захватить текст на входе и нажать на массив. Так как мы использовали Ngmodel Для входного тега мы можем легко получить значение внутри него, используя Это. Напролет Отказ И добавление значений на массив так просто, как tasklist.push (задача) Отказ Нам также необходимо убедиться, что в список в списке не добавляют пустую строку, поэтому оберните приведенное выше оператор в состоянии, если это условие, проверяя, существует ли выполнение Tasksname. Последний код Home.ts;

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})

export class HomePage {
    taskList = [];

    constructor(public navCtrl: NavController) {}

    addTask() {
        if (this.taskName.length > 0) {
            let task = this.taskName;
            this.taskList.push(task);
            this.taskName = "";
        }
    }
}

Теперь мы можем начать добавлять новые задачи!

Но как мы знаем, что-то добавляется ???

Легкий кресть,? Squezy! Это то, что r в Crud есть для!

Запустите код и посмотрите

Время создавать) способ для нас читать) Что мы печатаем! (Посмотрите, что я там делал?)?

Давайте вернемся к home.html. До сих пор мы поместили входную тег и кнопку для добавления задач; Теперь, чтобы поставить список, чтобы просмотреть его. Теперь нам нужно связать метод Addtask () К кнопке в (Нажмите) Свойство, так что элемент списка добавляется в массив с каждым кликом.

является специальным ионным элементом для представлений списка. <Ионный пункт> Тег используется в нем, чтобы генерировать каждый элемент в указанном списке. * NGFOR Это простой способ отображения всех элементов в списке, установив стандартный вид для каждого элемента списка.

Последний код Home.html;


	
		To-do List
	


	
		
		

			
		

	
	

		
			
				{{todo}}

Переменная Todo Временного хранилища элемента в текущем индексе цикла (NGFO) в списке TaskSlist , как заявлено в доме есть.

Готов к нашему приложению до сих пор?

Мы сделали это!! Оно работает!!????

Но это было просто создать и читать. Все равно придется реализовать обновление и удаление.

Сначала мы начнем с изменений графического интерфейса, чтобы он мог соответствовать функциям обновления, так и удаления. После этого перемещается на код Tymdercript, чтобы показать его функциональность.

Изменение, которые смотрят, чтобы включить обработчики для вас и D

Упс! Маленький забывчивый оле мне! Я не изменил имя приложения на домашней странице … ???

Продолжай и назовите это, все, что вы хотите (я буду базовым с «списком до дел»).

Первый шаг, который будет выполнен в HOME.HTML, это добавить кнопку Удалить на левую сторону каждого элемента списка. Это просто! Повторно использовать тот же тот же код, который я использовал для включения Addtask Кнопка рядом с входом в <Ионный пункт> , вложенное в эти кнопки в Div с элементом класса, но измените, что + в AN? ️ICON (не хочу смущаться сейчас, мы?). Поскольку это кнопка, дайте обработчик событий Имя deletetask () Отказ Кнопка также будет иметь другой класс стилей ясно , что дает ей четкий фон. Поскольку эта кнопка будет в пределах <Ионный пункт> это в он будет сгенерирован для всех предметов в списке.

Нам нужно добавить другую кнопку в список для редактирования каждой задачи. К счастью больше копирования кода! Скопируйте целую тег кнопки, но замените значок? ️ в A ✏️ и обработчик кликов в Updatetask () Отказ

Код для каждого <Ионный пункт> Tag теперь выглядит так


	{{todo}}

Утверждение Пусть Принимает индекс определенного элемента в списке, чтобы мы могли передать его к способу, поэтому только элемент будет удален.

Довольно аккуратно, да ??

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

Реализация обновления и удаления функциональности

Теперь добавить функциональность нашего? ️ и ✏️.

Нам нужно создать новый метод в пределах Home.ts, называемых deletetask () , как указано в home.html выше. Мы проходим индекс массива из-за NGFOR Цикл, поэтому мы знаем точное положение задачи, которая будет удалена. Перейдите на home.html и пропустите параметр Я , который является индексом элемента в массиве, в пределах Делиттасская Метод, как и так deletetask (i) Отказ Как вы прошли индекс до домашнего номера, вам просто нужно использовать Сращивание () Метод на массиве Чтобы удалить желаемую задачу, передавая индекс элемента, который будет удален в качестве параметра, например, this.tasklist.Splice (индекс, 1); Отказ

Код для Делиттасская метод;

deleteTask(index){
    this.taskList.splice(index, 1);
}

Короткий и сладкий! ? Это все кодирование, которое нам нужно удалить задачи!

Теперь обновить, это займет немного больше набора набора (медведь со мной)!

Мой план – открыть предупреждение, задающее пользователю ввести текст обновления задачи. Для этого нам нужно импортировать AlertController Модуль найден в Ионические угловые Отказ Вы импортируете его, используя эту строку кода.

import { NavController, AlertController } from 'ionic-angular';

Затем вам нужно инициализировать его в конструкторе, как так;

constructor(public navCtrl: NavController, public alertCtrl: AlertController)

Затем вам нужно будет создать предупреждение в Updatetask Способ захватить новое имя задачи. Для этого вам нужно будет пройти следующее в метод создания AlertController;

  1. Название – название сообщения.
  2. Сообщение – более длительное сообщение (если требуется).
  3. Входные данные – входное поле со своим именем и заполнителем (если есть).
  4. Кнопки – кнопки вместе со своей ролью или обработчиком (если есть).

Предупреждение может отображаться потом с простым Alert.present () команда. У меня будет два кнопки, одна – кнопка «Отмена», вторая – редактировать, а код обработки просто будет принимать введенную задачу и переключать его с предыдущим значением в массиве. Код для Updatetask () метод;

updateTask(index) {
    let alert = this.alertCtrl.create({
        title: 'Update Task?',
        message: 'Type in your new task to update.',
        inputs: [{ name: 'editTask', placeholder: 'Task' }],
        buttons: [{ text: 'Cancel', role: 'cancel' },
                  { text: 'Update', handler: data => {
                      this.taskList[index] = data.editTask; }
                  }
                 ]
    });
    alert.present();
}

Это все должно работать идеально сейчас!

Хотите увидеть окончательное приложение Crud?

И там у вас есть! ??

Полностью оперативный список CRUD TO-DO, с минимальным кодированием! Вот так легко ионическое.

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

Бонус !! – Автофокус

Вы знаете, что я нахожу раздражающим? Мне нужно нажать на вход каждый раз, когда я хочу добавить новую задачу, даже в начале. Почему не автоматически фокусируйте ввод после нажатия кнопки?

Это именно то, что мы будем делать!

Автофокусировка на Ionic не так просто, как в классическом HTML/JavaScript взаимодействия. Вам нужно импортировать дополнительный компонент под названием ViewShild Отказ Затем вы можете легко подключить вход с вида (Home.html) к контроллеру (Home.ts) и манипулирует его также. Вы импортируете это, как так;

import { Component, ViewChild } from '@angular/core';

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

@ViewChild('taskInput') input;

Taskinput это идентификатор входного тега на странице HOME.HTML. Продолжай и добавьте #taskinput на входную тег. Входной тег теперь может обрабатываться непосредственно из файла TeampStric.

Ionic поставляется с несколькими методами, которые можно вызывать на определенных событиях приложений, например, когда на нагрузке страницы на вид, разгрузки и так далее. Они называются событиями жизненного цикла, и больше о том, что можно найти потом .| здесь Отказ Мы можем вызвать приложение для автоматического фокусировки на входе из ionviewdidload () установив тайм-аут. Код будет; 

ionViewDidLoad(){
    setTimeout(() => {
        this.input.setFocus();
    },350);
}

Для автоматического фокусировки на работу после добавления линии this.input.setfocus (); Как последнее утверждение в Addtask () обработчик. Давайте направимся посмотреть изменения, которые мы сделали!

Теперь это то, что вы называете бесшовным …?

Шаг 3 – Интеграция аутентификации FireBase

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

Настройка консоли Firebase

Но первый шаг сначала вам нужно создать проект на консоли FireBase. Все, что вам нужно, это учетная запись Google для доступа к FireBase. Так что голова на здесь для начала. Добавьте новый проект и дайте ему имя (я только что называл моими «заданиями»), согласиться на все, что они спрашивают и нажмите «Создать проект».

Теперь, чтобы создать проект, чтобы соответствовать нашим потребностям.

Все области Firebase, которую мы будем доступны, будут найдены в разделе.

А именно;

  1. Аутентификация
  2. И база данных.

Давайте посмотрим на аутентификацию.

Как видите, все методы аутентификации были отключены. На данный момент включите очень базовые типы, электронной почты/пароля, поэтому мы можем начать использовать его для регистрации учетной записи.

В разделе «Шаблоны» могут быть найдены многие шаблоны электронной почты для проверки адреса электронной почты для забывания пароля. Если вы хотите, вы можете изменить несколько деталей, таких как отображение имени проекта и имя отправителя.

Теперь, далее в раздел базы данных. Firebase имеет два типа баз данных;

  1. База данных Realtime – база данных NoSQL, которая выглядит как один большой объект JSON.
  2. Облако FireStore – коллекция документов, которые по существу являются объектами JSON.

Firestore – это лучший вариант, поскольку у него есть лучшая структура по сравнению с обычной базой данных в реальном времени. В базе данных Realtime никто не может писать данные в любом месте, если у них есть ссылка на базу данных, значительно влияя на все хранимые данные. И по этой причине я выбрал Firestore и создал базу данных в тестовом режиме, поэтому мы можем оценить базу данных.

Firestore в тестовом режиме позволяют кому-либо читать и писать в нем, поэтому давайте сделаем это только пользователям, которые зарегистрировали в приложении, имеют доступ к базе данных. Сделать это, переключите Разрешить чтение, пишите: если false; для Разрешить чтение, пишите: если; Отказ Только зарегистрированные пользователи имеют уникальную UID, с которой вы отличаете их. Чаще всего UID используется в качестве идентификатора для объекта пользователей. Я буду реализовывать то же самое для этого проекта.

Как только правила будут изменены, нам нужно создать коллекцию, поэтому все наши пользовательские документы могут быть введены в него. Поскольку мы не можем иметь коллекцию без хотя бы одного документа, сделайте поддельный пользователь. Вы можете удалить его с помощью приборной панели позже.

Поскольку мы настроили панель инструментов Firebase, давайте переместимся на интеграцию Firebase в приложение.

Связывание Firebase в приложение

Есть специальный модуль Angularfire Вы можете загрузить использование NPM для включения FireBase в Ionic приложение. Для скачивания введите NPM Установить Firebase Angularfire2 --save Отказ

Чтобы использовать этот модуль, вам нужно импортировать его в страницу app.module.ts, как так

import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFirestoreModule } from 'angularfire2/firestore';

Нам также необходимо добавить необходимые данные конфигурации для приложения для доступа и использовать правильную базу данных. Это можно найти в разделе Обзор проекта, «Добавить Firebase в ваше веб-приложение». Вы должны вызвать FirebaseConfig ojan Object Firebaseconfig и инициализируйте его после импорта.

export const firebaseConfig = {
    apiKey: "#######################################",
    authDomain: "###########.firebaseapp.com",
    databaseURL: "https://###########.firebaseio.com",
    projectId: "###########",
    storageBucket: "###########.appspot.com",
    messagingSenderId: "############"
};

Один последний шаг! Вам необходимо включить импортные модули выше, в массив импорта @Ngmodule Это содержит все компоненты, используемые в приложении, инициализируя ангулярноеfiremodule, а также с объектом Config.

@NgModule({
    ...
    imports: [
        ...
        AngularFireModule.initializeApp(firebaseConfig), 
        AngularFireAuthModule, 
        AngularFirestoreModule
    ]
})

AngularfireauthModule поставляется со многими методами, относящимися к авторизации, например, регистрацию, войдите в систему, забыл пароль и т. Д. Все методы, которые мы будем использовать, будет найдено в собственности Auth Angularfireauth. Используемые методы;

  1. SigninWithemailandPassword () – Авторизоваться
  2. createuserwithemailandpassword () – Регистр
  3. sendpasswordresetemail () – Сброс пароля
  4. Подпись () – Выйти

Реализация всей логики аутентификации

Нам нужно добавить слушатель, чтобы проверить, вошел ли пользователь или нет, и отображать правильный ответ для либо. Нам нужно добавить слушателя в app.component.ts, поскольку это первая страница приложения, которая загружается.

const authObserver = afAuth.authState.subscribe(user => {
    if (user) {
        this.rootPage = HomePage;
        authObserver.unsubscribe();
    } else {
        this.rootPage = LoginPage;
        authObserver.unsubscribe();
    }
});

Импортируйте необходимые другие модули, такие как домашняя страница, LoginPage и Angularfireauth.

Давайте сначала начнем кодировать страницу регистра.

Во-первых, добавить новую страницу в приложение. Есть два способа сделать это;

  1. Создайте новую папку в папке страниц внутри SRC и создайте отдельные .scsss, .ts и файлы .html.
  2. Или, будь ленивым (как я?) И просто введите Ionic G Страница <Имя страницы> в консоли. Все три файла будут автоматически сгенерированы!

Поскольку нам нужно провести много валидаций на данные, введенные в логине, регистрируйте и забыли страницы паролей, нам нужно использовать группу форм, чтобы иметь дорожку всех полей в форме и добавлять любую и всю проверку на каждое поле, Такие как проверка, если электронная почта выглядит как фактическая электронная почта, длины пароля, работает. Сначала мы разработаем вид на страницу. В регистрации .html, тег форма выглядит так;

Новалидиата Используется в качестве фактической проверки в файле .ts в группу формы зарегистрироваться Отказ

Затем скопируйте тег точного элемента, который мы использовали, чтобы добавить имена задач на домашней странице (но удалить эту кнопку, ID и [(NGModule)] на этот раз!). Добавьте тег для полного имени пользователя, электронной почты, пароля и подтвердите пароль. Тип входного тега для последних двух – это пароль и электронная почта для тега электронной почты. Вам также нужно будет добавить FormControlName каждому входному тегу. Добавьте в кнопку, а также тип отправки, чтобы отправить форму. Тело вашей страницы вашего регистра должно выглядеть так;

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

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

Инициализируйте группу форм за пределами конструктора, поэтому ее можно получить доступ из любой точки компонента; Public Signupform: Формагруппа и инициализировать конструктор формы внутри параметров, передаваемых конструктору, как так;

constructor(public navCtrl: NavController, public navParams: NavParams, public formBuilder: FormBuilder){}

Валидаторы будут добавлены в форму в конструкторе, как так;

this.signupForm = formBuilder.group({
  email: ['', Validators.compose([Validators.required])],
  password: ['', Validators.compose([Validators.minLength(6), Validators.required])],
  retype: ['', Validators.compose([Validators.minLength(6), Validators.required])],
  firstName: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])],
  lastName: ['', Validators.compose([Validators.maxLength(30), Validators.pattern('[a-zA-Z ]*'), Validators.required])]
});

Валидаторы Создает проверку проверки для значения, в соответствии с проверками, передаваемыми в его параметрах. Большинство из этих валидаторов являются самоснабжением. Валидатор Pattern проверяет, соответствует ли значение определенного Regex. Но остается один вопрос, как подтвердить, если электронная почта выглядит как электронная почта? Видимо, нам нужно сделать один ...

Но не волнуйся! Это довольно просто, и единственная логика к тому, чтобы посмотреть, соответствует ли он определенному регулярному выражению.

Нам нужно сделать новую папку «Валидаторы» в папке SRC и файл « Email.ts ‘ внутри. Мы будем объявлять статический метод проверки электронной почты. При проверке электронной почты мы отправляем FormControl к валидатору, так в этом случае нам нужно импортировать FormControl Отказ После того, как электронное письмо проверено на Regex, нам нужно вернуть значение, чтобы передать, если адрес электронной почты действителен или нет. Последний код для валидатора электронной почты является;

import { FormControl } from '@angular/forms';

export class EmailValidator {  
  static isValid(control: FormControl) {
    const re = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/.test(control.value);
    if (re) {
      return null;
    }
    return {
      "invalidEmail": true
    };
  }
}

Теперь импортируйте EailValidator в регистр .ts и добавьте его в массив в Валидаторы Метод для ввода электронной почты. 

this.signupForm = formBuilder.group({
    email: ['', Validators.compose([Validators.required, EmailValidator.isValid])],
    ...
});

Это это на стороне проверки.

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


    
Please enter a valid email.

* NGIF Позволяет отобразить ошибку только в том случае, если проверка ложна. Ошибки должны быть направлены прямо под каждой тегом, изменяя имя и имя ввода (в указанном выше примере «Email») соответственно.

Код для красного входа по ошибке проверки;

[class.invalid]="!signupForm.controls.email.valid && signupForm.controls.email.dirty"

Добавьте это внутри каждого ввода, снова изменив имя входов соответственно.

Теперь, чтобы обрабатывать кнопку нажать!

Создать метод подписи () Отказ Мы будем использовать метод модулей Angularfireauth createuserwithemailandpassword () Отказ Это возвращает обещание, что нам нужно для захвата и в соответствии с результатом, обрабатывать либо табличку пользователя или отобразить сообщение об ошибке. Чтобы сделать его более удобным для пользователя, также показать загрузку карусели пользователю в качестве регистрации.

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

signupUser() {
  if (this.signupForm.value.password == this.signupForm.value.retype) {
    this.afAuth.auth.createUserWithEmailAndPassword(this.signupForm.value.email, this.signupForm.value.password)
      .then(() => {
        let userId = this.afAuth.auth.currentUser.uid;
        let userDoc = this.firestore.doc('users/' + userId);
        userDoc.set({
          firstName: this.signupForm.value.firstName,
          lastName: this.signupForm.value.lastName,
          email: this.signupForm.value.email
        });
        this.navCtrl.setRoot(HomePage);
      }, (error) => {
        this.loading.dismiss().then(() => {
          let alert = this.alertCtrl.create({
            message: error.message,
            buttons: [{ text: "Ok", role: 'cancel' }]
          });
          alert.present();
        });
      });

    this.loading = this.loadingCtrl.create({
      dismissOnPageChange: true,
      content: "Signing up.."
    });
    this.loading.present();
  } else {
    let alert = this.alertCtrl.create({
      message: "The passwords do not match.",
      buttons: [{ text: "Ok", role: 'cancel' }]
    });
    alert.present();
  }
}

Вам нужно будет дополнительно импортировать AlertController , Загрузка , OrdingController , Angularfirestore и Главная страница Отказ

Загрузка Необходимо объявить за пределами конструктора, так что его можно получить все методы. AlertController , OrdingController и Angularfirestore должен быть инициализирован в параметрах конструктора.

И (наконец) страница регистров сделана!

Whaw! ?? Это самый длинный пост, который я когда-либо написал. И еще больше, чтобы идти ….

Но не волнуйся! Остальные все просто копируют + пасту.

Следующая страница для решения – это страница входа. Скопируйте всю форму страницы регистров для login.html, coz Пришло время, чтобы внести некоторые изменения для его входа в систему. Удалите имя, фамилию и входные теги файлов RESTYPED Passwords и сообщения об ошибках. По теге формы, измените все экземпляры зарегистрироваться к Вход в систему Отказ

Измените текст кнопок «Отправить» на «Логин» и OnsUbmit Метод Логин () Отказ Добавьте две кнопки также вне формы, чтобы перейти к регистре и сбросить страницы пароля. Конечное тело login.html ;


  
    
  
  
    
Please enter a valid email.

  
  
    
  
  
    
Your password must be more than 6 characters long

Там у вас есть! UI сделано.

Вход в систему Имеет те же валидаторы для полей электронной почты и пароля. Итак, продолжайте копировать то же самое FormBuilder Пропуская имя, фамилия и полей Retyped Passwork.

this.loginForm = formBuilder.group({
    email: ['', Validators.compose([Validators.required, EmailValidator.isValid])],
    password: ['', Validators.compose([Validators.minLength(6), Validators.required])]
});

Логин () Метод имеет аналогичный код для этого подпись метод. Так что скопируйте это на логин. Изменение, которое необходимо выполнить, состоит в том, чтобы удалить сравнение пароля и доступа к базе данных.

loginUser() {
 this.afAuth.auth.signInWithEmailAndPassword(this.loginForm.value.email, this.loginForm.value.password).then(() => {
   this.navCtrl.setRoot(HomePage);
 }, (error) => {
   this.loading.dismiss().then(() => {
     let alert = this.alertCtrl.create({
       message: error.message,
       buttons: [{ text: "Ok", role: 'cancel' }]
     });
     alert.present();
   });
 });
 this.loading = this.loadingCtrl.create({
   dismissOnPageChange: true,
   content: "Logging in.."
 });
 this.loading.present();
}

Вам необходимо будет импортировать точные дополнительные модули в логин.

Теперь для обработки кнопок до пароля сброса и страницы регистрации;

resetPwd() {
    this.navCtrl.push(ResetPasswordPage);
}

createAccount() {
    this.navCtrl.push(RegisterPage);
}

Страницы работают как стек; Вы нажимаете следующую страницу в верхнюю часть стека и выпрыснуть сверху.

Медведь со мной, у нас есть еще одна страница. Ура! Больше копии + паста!

Для пароля Reset нам требуется только поле электронной почты, но все же, нужна форма для проверки введенного электронного письма. Подобно для страницы входа в систему, скопируйте весь входную форму .HTML, удалите все поля, за исключением тегов электронной почты и сообщения об ошибке, измените все экземпляры Вход в систему для сброса pwdform. Вы остались с;


  
    
  
  
    
Please enter a valid email.

То же самое должно быть сделано для файла сброса-паролей. Строитель формы выглядит так;

this.resetPwdForm = formBuilder.group({
    email: ['', Validators.compose([Validators.required, EmailValidator.isValid])]
});

пока ResetUserPWD () Метод выглядит так;

resetUserPwd() {
 this.afAuth.auth.sendPasswordResetEmail(this.resetPwdForm.value.email).then((user) => {
   let alert = this.alertCtrl.create({
     message: "We just sent a link to reset your password to your email.",
     buttons: [{ text: "Ok", role: 'cancel',
       handler: () => {
         this.navCtrl.pop();
       }}]
   });
   alert.present();
 }, (error) => {
   let errorAlert = this.alertCtrl.create({
     message: error.message,
     buttons: [{ text: "Ok", role: 'cancel' }]
   });
   errorAlert.present();
 });
}

Код обработчика выше POSS PAGE POSS PAGE RESET Password, чтобы показать страницу входа после отправки запроса на ссылку.

Одна последняя часть (мне очень жаль! Я тоже устал) … ??

Кнопка выхода, самый простой и самый маленький код!

Вам нужно поставить кнопку в конце заголовка на домашнюю страницу, как показано ниже;


	
		To-do List

Код для обработки выхода в Home.ts;

logout() {
    return this.afAuth.auth.signOut().then(authData => {
        this.app.getRootNav().setRoot(LoginPage);
    });
}

Код после «Тогда» принимает пользователь обратно на страницу входа.

Вот и все! Ну наконец то! ??

Чтобы позволить приложению использовать эти страницы, вам необходимо включить их в страницу app.module.ts как в объявлениях, так и в ApplicomPonents массивы, как и так;

@NgModule({
    ...
    declarations: [
        ...
        LoginPage, 
        RegisterPage, 
        ResetPasswordPage
    ],
    ...
    entryComponents: [
        ...
        LoginPage, 
        RegisterPage, 
        ResetPasswordPage
    ]
})

Давайте посмотрим на все, что мы допустили до сих пор.

И там у вас есть! ?? Это не так легко на глазах, но это определенно функционально.

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

Ниже приведен пользовательский объект также хранится в FireStore с помощью текущих пользователей UID в качестве ключа к документу. Все это работает!

Теперь, когда было реализовано, что аутентификация и пользовательские объекты расширения были реализованы, мы теперь продолжаем синхронизирование операций CRUD с FireBase Cloud Firestore.

Шаг 4 – синхронизация трудных действий с облачным огненным

Кодирование будет довольно простым, так как мы уже встроили в комплект Angularfire в наше приложение. Основные изменения будут выполнены только на внутреннюю логику в файле home.tts, а одно простое дополнение к home.html, чтобы обрабатывать списки, которые мы получаем от Firestore.

C в Crud – FireStore

Сначала мы начнем с добавления функциональности к Addtask () метод. Но сначала нам нужно импортировать AngularfiRestore на главную цену и инициализировать его в конструкторе, как и так;

constructor(...public firestore: AngularFirestore) {}

Как уже упоминалось в предыдущем посте, Firestore не похоже на его предшественник, это не одна большая структура JSON. Вместо этого он работает с чем-то, называемыми документами. Каждый документ является одним из однозначном объекта JSON, который удерживает только один тип данных, например, пользовательский объект будет удерживать только пользовательские данные, такие как их имя, дата рождения и другая личная информация, но не какими-либо другими данными.

Многие документы того же типа составляют коллекцию. И иногда объект может иметь коллекцию различных объектов внутри него, и это то, что мы делаем сегодня; Создание коллекции объектов задач для каждого пользователя.

Если вы можете вспомнить, в предыдущем посте мы взяли UID пользователя, уникальный идентификатор, который Firebase присваивает всем своим пользователям, которые зарегистрируются в качестве идентификатора для объекта JSON. Мы также будем требовать его тяжело, поэтому первое, что нужно сделать, это захватить UID от Angularfireauth. Поскольку многие методы будут использовать это значение, лучше всего будет объявить эту переменную за пределами конструктора, а затем инициализация его внутри ionviewdidload Отказ

Мы положили это в ionviewdidload () Поскольку иногда детали пользователей от AngularFireauth не готовы конструктором. И поскольку мы получим доступ только к этой коллекции в объекте пользователей, идут вперед и захватите это, похоже на страницу регистра. Все это добавлено в звонок, чтобы получить пользователя.

this.afAuth.authState.subscribe(user => {
    if (user) {
        this.userId = user.uid;
        this.fireStoreTaskList = this.firestore.doc('users/' + this.userId).collection('tasks').valueChanges();
        this.fireStoreList = this.firestore.doc('users/' + this.userId).collection('tasks');
    }
});

Причина, по которой у нас два списка – это FireStoretaskList Удерживает список, который мы рассматриваем, пока огнесторелист Это ссылка на коллекцию, где мы напрямую добавляем новые задачи. Метод ValueChanges () Возвращает наблюдаемый список, который мы можем отобразить в поле зрения.

Теперь мы можем использовать эту ссылку в любом месте на странице. Используя его, чтобы добавить задачу в Addtask Метод очень прост. Существует необходимость иметь определенный идентификатор для каждой задачи, поскольку нам потребуется при попытке обновить имя задания, поэтому нам нужно создать идентификатор и использовать Установить () Способ сбора FireStore, для создания новой задач объект задач внутри при условии, если предыдущий код, который нажимает имя задачи в TaskSlist Отказ

let id = this.firestore.createId();
this.fireStoreList.doc(id).set({
    id: id,
    taskName: task
});

R в Crud в приложении

Теперь, чтобы настроить просмотр списка FireStore. Основная часть, получение коллекции было сделано выше. Таким образом, изменения теперь должны быть сделаны до Home.html для просмотра FireStoretaskList Отказ

Первое изменение должно быть в * NGFOR имя списка. Поскольку список будет ответ верным Firebase, его асинхронной. Нормальный * NGFOR вызвало ошибки. Нам нужно добавить асинхронную трубу, как и так;

Мы больше не должны следить за индексом, так как мы будем использовать идентификатор задачи для удаления или обновления его значения. И второе изменение – это значение, которое мы рассмотрим, поскольку TODO теперь будет объектом, нам нужно отобразить toDo.taskname, так как это то, что мы назвали переменной задачи в объекте задачи.

{{todo.taskName}}

Вот и все! Теперь посмотрите как на приложение, так и FireStore, чтобы увидеть, сохраняется ли он.

Это спасло!

Для него ничего нельзя для C и R в Crud. Теперь, чтобы обновить затем удалить.

U в Crud HireStore

К счастью, AngularfiRestore имеет собственную функцию обновления, которая, учитывая идентификатор документов, а также значения, которые будут обновляться, могут быть выполнены в одной линии. Но сначала небольшое изменение в файле Home.html, чтобы позволить этому произойти. Как уже говорилось ранее, вам не нужен индекс задачи в списке для обновления или удаления, но вместо этого идентификатор документа, который мы просто сохранили в идентификаторе переменного объекта задачи.

Наш первый порядок бизнеса состоит в том, чтобы отправить идентификатор задач на метод от кнопки, как это;

Переместитесь до Home.ts и замените код в обработчик оповещения;

this.fireStoreList.doc(index).update({ taskName: data.editTask });

Сначала мы создаем ссылку на конкретный объект, который пользователь желает обновить, используя Док () Метод, затем отправка соответствующих данных, которые мы хотим обновить в Обновление () метод.

Теперь, чтобы увидеть эту функциональность в действии!

Это тоже работает!

Сейчас на последнее изменение, удалить.

D в Crud – FireStore

Удаление так же легко (или проще, действительно), чем обновление.

Вы будете снова, надо передавать идентификатор задач на кнопку удаления;

Опять же, как для обновления, AngularfiRestore имеет функцию Удалить () , это работает по ссылке документа, который будет удален, как и так;

this.fireStoreList.doc(index).delete();

И теперь, чтобы посмотреть последнюю функциональность ….

Это тоже функционально!

Как видите, задача «складной одежды» с идентификатором «NSSKIVHEG4GKST3U0XAV» больше не там, так как она была успешно удалена

Там у вас есть! Firebase интегрирована во все операции CRUD.

Шаг 5 – Бонусный укладчик контента

Это короткий контрольный список основных вещей, которые не были покрыты предыдущими постами;

  1. Таможенные стили?
  2. Изображения? ️.
  3. Пользовательские шрифты?

Напечатать UI

Проходя через мое приложение, я смог увидеть несколько вещей, которые я хотел изменить.

Помните эти маленькие сообщения под полями ввода в логине, регистрируйте и сбросите страницы паролей?

Я только что понял, что, поскольку они по сути <Ионный пункт> у них есть линия на дне. Не так здорово.

К счастью, это простое исправление! Там глобальная недвижимость под названием без линий , что вам нужно добавить в <Ионный пункт> вот так;

Так что идите вперед и добавьте это во все сообщения об ошибке <Ионный пункт> Теги.

Ваше сообщение об ошибке теперь выглядит так.

Давайте перейдем к цветам!

Если вы погрузились вокруг структуры проекта, вы бы видели бы папку «Тема». Файл variables.csss внутри имеет переменную цвета с 5 набор цветов. Храните светлые и темные цвета, как они, а также опасность, так как мы используем его для кнопки сброса пароля и страницы. Я буду только изменением основного и вторичного цвета. Я обычно пользуюсь COLORS.CO Чтобы найти дополнительные цвета для всех проектов, которые я когда-либо делал.

Цвета, которые я буду использовать, есть;

$colors: (
	primary:    #32B596,
	secondary:  #fff350,
	danger:     #f53d3d,
	light:      #f4f4f4,
	dark:       #222
);

Первое место для разрыва некоторых цветов – верхняя навка.

Выглядел так мягко справа ??

Уже нет.??

Все, что вам нужно сделать, это добавить цвет первичного на тег ионный навбар, вроде так;

Вы можете добавить цветное свойство аналогично другим компонентам. Такие как, дайте значок удаления цвета, хранящегося в опасности, или кнопка добавления и выхода из системы в среднем;

Я все еще ненавижу способ, которым выглядит кнопка «Выход из системы» … Чтобы сделать его правильной кнопкой, просто добавьте твердую свойство на тег, как и так;

Еще один крутой дизайн пользовательского интерфейса, который я видел ранее, имел значки перед каждым входным тегом в логине, регистрируйте и сбросить страницы паролей, поэтому я решил дать вам попробовать! Это довольно простой код, который вам нужно добавить в <Ионный пункт> тег, но до <Ион-вход> тег, как и так;

Нет иконы, который кричит пароль, поэтому я решил использовать? Как и в дизайне пользовательского интерфейса, на котором я смотрел; а также ? Для имени пользователей

Добавление изображений

Картина говорит тысячу слов … Но нам не нужно на такие фотографии … ?Не важно!

Добавление изображений не обязательно жестко, но путь может появиться немного запутанно. Вы предполагаете, что вам нужно добавить фактический путь с страницы в папку изображений, что является ../../assets/imgs/imagename.png Отказ Путь, который вам действительно нужно добавить, это путь от App.html на изображение в папке изображения, и этот путь выглядит как Активы/IMGS/Imagename.png Отказ

Любые и все изображения, которые вы хотите использовать, необходимо добавить в папку SRC/Активы/IMGS Отказ Затем вы можете использовать изображение, как если бы это был HTML;

Я хочу добавить изображение, вроде как логотип, в логин, регистрируйте и сбросить страницы пароля.

Так что изображение не превышает страницу, нам также нужно будет кодировать некоторую стайлинг, и, поскольку это изображение будет в более чем на одной странице, мы обязаны писать стиль на странице App.scsss, как так;

.imageTop {
    height: 200px;
    padding: 20px;
    margin: auto;
    display: block;
}

Все, что вам нужно сделать сейчас, просто добавьте класс к IMG Теги, Class = 'Imagetop' Отказ

Другое изображение (или два), которое вы можете изменить, это всплеск страницы и значок приложения. Сначала вам необходимо добавить либо (или) платформы Android и iOS, использовать эту функцию. Команда добавить платформу

ionic cordova platform add android

Или IOS , если это твоя чашка ☕.

IONIC может легко генерировать разные выплески и значки разных размеров в соответствии с различными телефонами, когда вы запускаете команду Ionic Cordova Ресурсы в терминале. Для этого вам понадобится Интернет, так как ионные загрузки как изображений будут проанализированы для генерации других всплеск страниц и значков.

До этого вам нужно добавить как изображения, названные splash.png и icon.png к папке ресурсов. Размеры обоих изображений должны составлять 2732 * 2732 и 1024 * 1024 соответственно, для многих страниц всплеска и иконы приложений для создания приложений.

Это все для изображений!

Типография ROX (ЦКС)!

Во-первых, найдите шрифт, который говорит вам. Последние тенденции придерживаются шрифтов Sans Serif, которые довольно легко читать. Так же, как много рукописных стоповых шрифтов, они просто не могут ждать, чтобы произойти, как этот ….

Или этот,

???

Помимо шутит, я выбрал шрифт «Alegreya Sans» для использования для этого приложения. Можно найти, здесь Отказ

Распакуйте все шрифты в папку Активы/Шрифты Отказ

Все, что вам нужно сделать сейчас, это добавить код ниже на переменные .scss, найденные в SRC/Theme папка.

@font-face {
	font-family: 'Alegreya Sans Regular';
	src: url("../assets/fonts/AlegreyaSans-Regular.otf");
}
$font-family-base: 'Alegreya Sans Regular';
$font-family-ios-base: 'Alegreya Sans Regular';
$font-family-md-base: 'Alegreya Sans Regular';
$font-family-wp-base: 'Alegreya Sans Regular';

@ font-face Импортирует ваш шрифт и дает ему имя, поэтому его можно использовать во всем приложении.

Переменная $ font-family-base Назначает шрифт по умолчанию.

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

Как вы можете просмотреть только всплескную страницу и значок на реальном устройстве, я привел в мой доверительный телефон в смеси (к сожалению, это не яблоко подходит с остальными GIFS/PICS).

И вот это за эту серию !!!!! ??

Найти репо для этого поста, здесь Отказ

Я надеюсь, что у вас все весело и многое узнали в этом путешествии со мной!

Спасибо за прочитанные и увидимся скоро! ??

Читайте ещё по теме: