Концепция IDEF0

👁 76 просмотров
  1. Введение в IDEF0
  2. Концепция IDEF0
  3. Основные понятия методологии и языка IDEF0
  4. Синтаксис графического языка IDEF0
  5. Семантика языка IDEF0
  6. Свойства диаграм IDEF0
  7. Отношения между блоками диаграммы и другими диаграммами (окружающей средой)
  8. Правила построения диаграм
  9. Ссылочные номера (коды)
  10. Методика разработки функциональных моделей в среде IDEF0
  11. Организация процесса функционального моделирования и управления проектом
  12. Перспективы развития методологии функционального моделирования IDEF0

Методология IDEF0 основана на следующих концептуальных положениях:

  1. Модель – искусственный объект, представляющий собой отображение (образ) системы и ее компонентов. Согласно [ 3 ]М моделирует А, если М отвечает на вопросы относительно А. Здесь М – модель, А – моделируемый объект (оригинал). Модель разрабатывают для понимания, анализа и принятия решений о реконструкции (реинжиниринге) или замене существующей, либо проектировании новой системы. Система представляет собой совокупность взаимосвязанных и взаимодействующих частей, выполняющих некоторую полезную работу. Частями (элементами) системы могут быть любые комбинации разнообразных сущностей, включающие людей, информацию, программное обеспечение, оборудование, изделия, сырье или энергию (энергоносители). Модель описывает, что происходит в системе, как ею управляют, какие сущности она преобразует, какие средства использует для выполнения своих функций и что производит.
  2. Блочное моделирование и его графическое представление. Основной концептуальный принцип методологии IDEF – представление любой изучаемой системы в виде набора взаимодействующих и взаимосвязанных блоков, отображающих процессы, операции, действия (определения – см. ниже), происходящие в изучаемой системе. В IDEF0 все, что происходит в системе и ее элементах, принято называть функциями. Каждой функции ставится в соответствие блок. На IDEF0 –диаграмме, основном документе при анализе и проектировании систем, блок представляет собой прямоугольник. Интерфейсы, посредством которых блок взаимодействует с другими блоками или с внешней по отношению к моделируемой системе средой, представляются стрелками ), входящими в блок или выходящими из него. Входящие стрелки показывают, какие условия должны быть одновременно выполнены, чтобы функция, описываемая блоком, осуществилась.
  3. Лаконичность и точность. Документация, описывающая систему, должна быть точной и лаконичной. Многословные характеристики, изложенные в форме традиционных текстов, неудовлетворительны. Графический язык позволяет лаконично, однозначно и точно показать все элементы (блоки) системы и все отношения и связи между ними, выявить ошибочные, лишние или дублирующие связи и т.д..
  4. Передача информации. Средства IDEF0 облегчают передачу информации от одного участника разработки модели (отдельного разработчика или рабочей группы) к другому. К числу таких средств относятся:
    • диаграммы, основанные на простой графике блоков и стрелок, легко читаемые и понимаемые;
    • метки на естественном языке для описания блоков и стрелок, а также глоссарий и сопроводительный текст для уточнения смысла элементов диаграммы;
    • последовательная декомпозиция диаграмм, строящаяся по иерархическому принципу, при котором на верхнем уровне отображаются основные функции, а затем происходит их детализация и уточнение;
    • древовидные схемы иерархии диаграмм и блоков , обеспечивающие обозримость модели в целом и входящих в нее деталей.
  5. Строгость и формализм. Разработка моделей IDEF0 требует соблюдения ряда строгих формальных правил, обеспечивающих преимущества методологии в отношении однозначности, точности и целостности сложных многоуровневых моделей. Эти правила описываются ниже. Здесь отмечается только основное из них: все стадии и этапы разработки и корректировки модели должны строго, формально документироваться с тем, чтобы при ее эксплуатации не возникало вопросов , связанных с неполнотой или некорректностью документации.
  6. Итеративное моделирование. Разработка модели в IDEF0 представляет собой пошаговую, итеративную процедуру. На каждом шаге итерации разработчик предлагает вариант модели, который подвергают обсуждению, рецензированию и последующему редактированию, после чего цикл повторяется. Такая организация работы способствует оптимальному использованию знаний системного аналитика, владеющего методологией и техникой IDEF0, и знаний специалистов  — экспертов в предметной области, к которой относится объект моделирования.
  7. Отделение «организации» от «функций». При разработке моделей
    следует избегать изначальной «привязки» функций исследуемой системы к существующей организационной структуре моделируемого объекта (предприятия, фирмы). Это помогает избежать субъективной точки зрения, навязанной организацией и ее руководством. Организационная структура должна явиться результатом использования (применения) модели. Сравнение результата с существующей структурой позволяет, во первых, оценить адекватность модели, а во-вторых  — предложить решения, направленные на совершенствование этой структуры.

3. Давид Марка, Клемент МакГоуэн, Методология структурного анализа и
проектирования. Пер. с англ. М.:1993, 240 с. , ISBN 5-7395-0007-9

Введение в IDEF0

👁 120 просмотров
  1. Введение в IDEF0
  2. Концепция IDEF0
  3. Основные понятия методологии и языка IDEF0
  4. Синтаксис графического языка IDEF0
  5. Семантика языка IDEF0
  6. Свойства диаграм IDEF0
  7. Отношения между блоками диаграммы и другими диаграммами (окружающей средой)
  8. Правила построения диаграм
  9. Ссылочные номера (коды)
  10. Методика разработки функциональных моделей в среде IDEF0
  11. Организация процесса функционального моделирования и управления проектом
  12. Перспективы развития методологии функционального моделирования IDEF0

 

Рисунок 1 - Простая схема IDEF0
Рисунок 1 — Простая схема IDEF0

Постоянное усложнение производственно-технических и организационно — экономических систем – фирм, предприятий, производств, и др. субъектов производственно-хозяйственной деятельности — и необходимость их анализа с целью совершенствования функционирования и повышения эффективности обусловливают необходимость применения специальных средств описания и анализа таких систем. Эта проблема приобретает особую актуальность в связи с появлением интегрированных компьютеризированных производств и автоматизированных предприятий.

 

Рисунок 2 - Douglas T. Ross
Рисунок 2 — Douglas T. Ross

В США это обстоятельство было осознано еще в конце 70-ых годов, когда ВВС США предложили и реализовали Программу интегрированной компьютеризации производства ICAM (ICAM — Integrated Computer Aided Manufacturing), направленную на увеличение эффективности промышленных предприятий посредством широкого внедрения компьютерных (информационных) технологий. Реализация программы ICAM потребовала создания адекватных методов анализа и проектирования производственных систем и способов обмена информацией между специалистами, занимающимися такими проблемами. Для удовлетворения этой потребности в рамках программы ICAM была разработана методология IDEF (ICAM Definition), позволяющая исследовать структуру, параметры и характеристики производственно-технических и организационно-экономических систем (в дальнейшем, там, где это не вызывает недоразумений – систем). Общая методология IDEF состоит из трех частных методологий моделирования, основанных на графическом представлении систем:

  • IDEF0 используется для создания функциональной модели, отображаю-
    щей структуру и функции системы, а также потоки информации и материальных объектов, связывающие эти функции.
  • IDEF1 применяется для построения информационной модели, отображающей структуру и содержание информационных потоков, необходимых для поддержки функций системы;
  • IDEF2 позволяет построить динамическую модель меняющихся во времени поведения функций, информации и ресурсов системы.
Рисунок 3 - Истоки IDEF
Рисунок 3 — Истоки IDEF

К настоящему времени наибольшее распространение и применение имеют методологии IDEF0 и IDEF1 (IDEF1X), получившие в США статус федеральных стандартов. [1 ,2 ]. Методология IDEF0, особенности и приемы применения которой описываются в настоящем Руководящем документе (РД), основана на подходе, разработанном Дугласом Т.  Россом в начале 70 — ых годов и получившем название SADT (Structured Analysis & Design Technique метод структурного анализа и проектирования). Основу подхода и, как следствие, методологии IDEF0, составляет графический язык описания (моделирования) систем, обладающий следующими свойствами:

  • Графический язык — полное и выразительное средство, способное нагляд-
    но представлять широкий спектр деловых, производственных и других
    процессов и операций предприятия на любом уровне детализации.
  • Язык обеспечивает точное и лаконичное описание моделируемых объек-
    тов, удобство использования и интерпретации этого описания.
  • Язык облегчает взаимодействие и взаимопонимание системных аналитиков, разработчиков и персонала изучаемого объекта (фирмы, предприятия), т.е. служит средством «информационного общения» большого числа специалистов и рабочих групп, занятых в одном проекте, в процессе обсуждения, рецензирования, критики и утверждения результатов.
  • Язык прошел многолетнюю проверку и продемонстрировал работоспособность как в проектах ВВС США, так и в других проектах, выполнявшихся государственными и частными промышленными компаниями.
  • Язык легок и прост в изучении и освоении.
  • Язык может генерироваться рядом инструментальных средств машинной графики; известны коммерческие программные продукты, поддерживающие разработку и анализ моделей — диаграмм IDEF0, например, продукт Design/IDEF 3.7 (и более поздние версии) фирмы Meta Software Corporation (США).
Рисунок 4 - Аббревиатура CALS
Рисунок 4 — Аббревиатура CALS

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

 

  1. INTEGRATION DEFINITION FOR FUNCTION MODELING (IDEF0) . Draft Federal
    Information Processing Standards Publication 183 ,1993 December 21
  2. INTEGRATION DEFINITION FOR INFORMATION MODELING (IDEF1X), Draft Federal
    Information Processing Standards Publication 184 1993 December 21

Методология функционального моделирования IDEF0

👁 86 просмотров

Предисловие к данному курсу

  1. РАЗРАБОТАН Научно-исследовательским Центром CALS – технологий «Прикладная Логистика»
  2. ВНЕСЕН Научно-исследовательским Центром CALS – технологий «Прикладная Логистика»
  3. ПРИНЯТ И ВВЕДЕН В ДЕЙСТВИЕ Постановлением Госстандарта России от 2000 г. №
  4. Настоящий Руководящий документ составлен по материалам Федерального стандарта США INTEGRATION DEFINITION FOR FUNCTION MODELING (IDEF0) . Draft Federal Information Processing Standards Publication 183 ,1993 December 21 и содержит основные сведения о методологии функционального моделирования IDEF0 , о ее графическом языке и методике построения и практического применения функциональных моделей организационно-экономических и производственно-технических систем.
  5. ВВЕДЕН ВПЕРВЫЕ

Список этапов для изучения методологии IDEF0

  1. Введение в IDEF0
  2. Концепция IDEF0
  3. Основные понятия методологии и языка IDEF0
  4. Синтаксис графического языка IDEF0
  5. Семантика языка IDEF0
  6. Свойства диаграм IDEF0
  7. Отношения между блоками диаграммы и другими диаграммами (окружающей средой)
  8. Правила построения диаграм
  9. Ссылочные номера (коды)
  10. Методика разработки функциональных моделей в среде IDEF0
  11. Организация процесса функционального моделирования и управления проектом
  12. Перспективы развития методологии функционального моделирования IDEF0

Литература

  1. INTEGRATION DEFINITION FOR FUNCTION MODELING (IDEF0) . Draft Federal Information Processing Standards Publication 183 ,1993 December 21
  2. INTEGRATION DEFINITION FOR INFORMATION MODELING (IDEF1X), Draft Federal Information Processing Standards Publication 184 1993 December 21.
  3. Давид Марка, Клемент МакГоуэн, Методология структурного анализа и проектирования. Пер. с англ. М.:1993, 240 с. , ISBN 5-7395-0007-9
  4. Дружинин В.В., Конторов Д.С. Системотехника. – М.: Радио и связь. 1985, — 200 с.
  5. МЕТОДОЛОГИЯ ФУНКЦИОНАЛЬНОГО МОДЕЛИРОВАНИЯ IDEF0, Web — ресурс: https://nsu.ru/smk/files/idef.pdf

 

Часть 1. Push — уведомления для Android и iOS при помощи Firebase Cloud Messages

👁 222 просмотров

 

Это простой прямой подход, касающийся того, как реализовать push-уведомление в Android, а также iOS, используя плагин  cordova plugin for fcm для проекта Cordova и Google Firebase FCM в виде облачного сервера обработки сообщений.

Использование FCM в платформе Android

1. Создание проекта Cordova. Сначала необходимо иметь какой-то проект Cordova с добавленной платформой Android:

cordova create pushSample
cd pushSample
cordova platform add android

далее к этому проекту мы добавляем плагин cordova-plugin-fcm командой:

cordova plugin add cordova-plugin-fcm

В процессе установки данного плагина система нам выведет ряд ошибок, к примеру, скажет, что у нас отсутствует файл google-services.json:

Error: cordova-plugin-fcm: You have installed platform android but file 'google-services.json' was not found in your Cordova project root folder.
Note : This is because we have not added the google-services.json file which has to be created in the next following steps.

данный файл мы должны скачать из консоли Google Firebase в процессе создания приложения и находиться он должен в корневой директории проекта Cordova.

2. Создание облачного проекта Firebase. В консоли google firebse console жмем на кнопку «Добавить» и создаем новое облачный проект для Android, iOS и WEB — проектов:

После нажатия на кнопку «Создать проект» следующим шагом является добавление возможности создания облачных уведомлений через Firebase Cloud Messages и для этого необходимо нажать на пункту «Notifications» и далее следующее окно предложит ввести данные приложения для Android или iOS:

На данном этапе нажимаем на Android и заполняем данные и выйдет окно, требующий заполнения уникального идентификатора:

далее жмем на кнопку «Зарегистрировать приложение» и мы попадем на шаг, где нам предлагают скачать вышеупомянутый файл google-services.json:

данный файл скачиваем и кидаем в корень проекта Cordova pushSample/google-service.json.

Далее жмем «Продолжить» и сервис предложит нам добавить некоторый код в файл сборки build.gradle, который находится в корне платформы Android по пути pushSample/platforms/android/build.gradle:

buildscript {
  dependencies {
    // Add this line
    classpath 'com.google.gms:google-services:3.2.0'
  }
}

В скрипте сборки плагина по пути pushSample/platforms/android/cordova-plugin-fcm/pushSample-FCMPlugin.gradle :

dependencies {
  // Add this line
  compile 'com.google.firebase:firebase-core:11.8.0'
}
...
// Add to the bottom of the file
apply plugin: 'com.google.gms.google-services'

В некоторых случаях выше приведенный код может выдавать ошибки и несоответствия и все это выйдет в консоль, как например ниже:

google-services plugin could not detect any version for com.google.android.gms or com.google.firebase, default version: 9.0.0 will be used.
please apply google-services plugin at the bottom of the build file.

Для решения можно написать костыли принудительного исполнения, прописав их в файл pushSample/platforms/android/build.gradle:

...

allprojects {
    repositories {
        ...
        configurations.all {
            resolutionStrategy {
                // Add force (11.4.0 is version you want to use)
                force 'com.google.firebase:firebase-messaging:11.4.0'
                force 'com.google.firebase:firebase-core:11.4.0'
                force 'com.google.android.gms:play-services-gcm:11.4.0'
            }
        }
    }
}

...

3. Пишем первое уведомление. После добавления кода построения сервисов Google облачный проект предложит нам отправить сообщение:

Перед тем, как написать новое сообщение из консоли в клиентские приложения в виде уведомлений необходимо сначала написать клиентский код, который будет их принимать. Для этого в папке скриптов создаем новый файл www/scripts/script.fcm.js, в котором будем писать код, выполняемый после инициализации всех ресурсов Cordova:

var app = {
    initialize: function() {
        this.setup();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    receivedEvent: function(id) {
        console.log('Received Event: ' + id);
    },
    setup: function() {  
        //***********Начало кода FCM
        //Функция обработки всех уведомлений, как в бакграунде, так и при открытом приложении
        FCMPlugin.getToken(function(token) {
            //this is the fcm token which can be used
            //to send notification to specific device 
            console.log(token);
            //FCMPlugin.onNotification( onNotificationCallback(data), successCallback(msg), errorCallback(err) )
            //Here you define your application behaviour based on the notification data.
            FCMPlugin.onNotification(function(data) {
                console.log(data);
                //data.wasTapped == true means in Background :  Notification was received on device tray and tapped by the user.
                //data.wasTapped == false means in foreground :  Notification was received in foreground. Maybe the user needs to be notified.
                if (data.wasTapped) {
                     //Notification was received on device tray and tapped by the user.
                     alert(JSON.stringify(data));
                 } else {
                     //Notification was received in foreground. Maybe the user needs to be notified.
                     alert(JSON.stringify(data));
                 }
            });
        });
        //************Конец кода FCM
    }
};

app.initialize();

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

cordova build android
cordova run android

И далее и консоли отправляем наше первое уведомление:

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

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

 

Ошибки построения Android приложения в проекте на Cordova

👁 48 просмотров

Есть 2 самые распространенные виды ошибок, которые возможны при построении приложения Android в проекте Cordova:

  • первое — несоответствие версии платформы и версий плагинов Cordova:
Failed to execute aapt
com.android.ide.common.process.ProcessException: Failed to execute aapt
  • второе — отсутствие кода Gradle для импорта дополнительных сервисов. Это может выглядеть так:
google-services plugin could not detect any version for com.google.android.gms or com.google.firebase, default version: 9.0.0 will be used.
please apply google-services plugin at the bottom of the build file.
  1. Возможное решение первой ошибки — принудительное указание версии добавлением в конец файла android/build.gradle:
configurations.all {
    resolutionStrategy {
        force 'com.android.support:support-v4:27.1.0'
    }
}

2. Возможное решение второй ошибки android/build.gradle:

allprojects {
    repositories {
        ...
        configurations.all {
            resolutionStrategy {
                // Add force (11.4.0 is version you want to use)
                force 'com.google.firebase:firebase-messaging:11.4.0'
                force 'com.google.firebase:firebase-core:11.4.0'
                force 'com.google.android.gms:play-services-gcm:11.4.0'
            }
        }
    }
}

 

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

👁 59 просмотров

Создать собственное диалоговое окно появилось из-за потребности разместить на нем те элементы формы, которые небыло возможности вывести стандартным диалоговым окном из модуля 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

👁 93 просмотров

Этот пост пошагово расскажет, как реализовать 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

 

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

Бесконечный scrolling списка элементов на JavaScript

👁 59 просмотров

Разберем пример реализации бесконечного скроллинга с разбиением списка элементов из массива на страницы или порции вывода.

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

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

  • listCount — число элементов списка на одной странице;
  • pageNum — текущая страница;
  • start — начало страницы в списке;
  • end — конец страницы;
  • sortedUsers — данные списка, начиная от первой страницы до конечной;
  • container — элемент, в который выводится список.

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