Angular Flashcards by Logan Cratty

is a container for a group of related components. Every Angular app has at least one of these called App module

Module

How well did you know this?

Not at all

Perfectly

are the main building block for Angular applications. Each one of these consists of: An HTML template that declares what renders on the page. A Typescript class that defines behavior. A CSS selector that defines how the (blank) is used in a template.

Components

How well did you know this?

Not at all

Perfectly

A blank is one of the properties of the object that we use along with the component configuration. A blank is used to identify each component uniquely into the component tree, and it also defines how the current component is represented in the HTML DOM

Selector

How well did you know this?

Not at all

Perfectly

A blank is a blueprint for creating an object, we call that created object an instance of a class, or a class instance or just instance for short. We instantiate a blank by using the new keyword and when that happens JavaScript calls the constructor function.

Class

How well did you know this?

Not at all

Perfectly

Blank in Angular is put into use to inject dependencies into the component class. It creates a new instance of the class when the compiler calls ‘new MyClass ()’. While calling ‘new MyClass()’, it is vital that the exact match of the parameter passes the Angular component blank of the class.

Constructor

How well did you know this?

Not at all

Perfectly

To use ngOnInit in Angular, it is required to import into the component class in this way – import {Component, OnInit} from ‘@angular/core’. Though implementing ngOnInit for every component is not essential, it is a good practice that further heads towards the smooth functioning of the platform. Angular ngOnInit is created by Angular itself. Angular also renders and checks the changes in its data bounded properties. It is interesting to note that Angular destroys the component before removing it from DOM. ngOnInit in Angular can be hooked to components and directives. Defining the ngOnInit Angular in the class helps Angular runtime to know that is the right time to call the method. The major benefit of this approach is that it adds specific initialization logic near the class lifecycle.

ngOnInit

How well did you know this?

Not at all

Perfectly

In Angular, a blank is a chunk of HTML. Use special syntax within a template to build on many of Angular’s features.

Template

How well did you know this?

Not at all

Perfectly

Dependencies are services or objects that a class needs to perform its function. Dependency injection, or DI, is a design pattern in which a class requests dependencies from external sources rather than creating them.

Angular’s DI framework provides dependencies to a class upon instantiation. You can use Angular DI to increase flexibility and modularity in your applications.

Dependency injection in Angular

How well did you know this?

Not at all

Perfectly

They are instructions in the DOM. They are classes that add additional behavior to elements in your Angular applications. With Angular’s built-in directives, you can manage forms, lists, styles, and what users see.

Directives

How well did you know this?

Not at all

Perfectly

Components—directives with a template. This type of directive is the most common directive type.
Attribute directives—directives that change the appearance or behavior of an element, component, or another directive.
Structural directives—directives that change the DOM layout by adding and removing DOM elements.

The different types of Angular directives are as follows:

How well did you know this?

Not at all

Perfectly

Decorators are functions that are invoked with a prefixed @ symbol, and immediately followed by a class , parameter, method or property. The decorator function is supplied information about the class , parameter or method, and the decorator function returns something in its place, or manipulates its target in some way.

Decorators

How well did you know this?

Not at all

Perfectly

Class decorators, e.g. @Component and @NgModule.
Property decorators for properties inside classes, e.g. @Input and @Output.
Method decorators for methods inside classes, e.g. @HostListener.
Parameter decorators for parameters inside class constructors, e.g. @Inject.

What are types of decorators in Angular?
There are four main types:

How well did you know this?

Not at all

Perfectly

Property binding in Angular helps you set values for properties of HTML elements or directives. Use property binding to do things such as toggle button functionality, set paths programmatically, and share values between components.

Property binding

How well did you know this?

Not at all

Perfectly

Event binding lets you listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.

Event binding

How well did you know this?

Not at all

Perfectly

Is like a reserved variable name that you can use in the template when using event binding. It is the data emitted with said event. It gives us access to event data it allows you to fetch event data. Allows you to grab any data an event passes to us

($event)

How well did you know this?

Not at all

Perfectly

It will trigger on the input event and update the value of the server name in our component automatically.
It will also update the value of the input element if we change the value of server name somewhere else

[(@ngModel)]

How well did you know this?

Not at all

Perfectly

What are the four form of data binding

Event Binding, String Interpolation, Property Binding, and Two Way Binding.

How well did you know this?

Not at all

Perfectly

When building your applications and creating logic, there are times when you want to make comparisons between two or more things. They can be abstract things; they can be items in a list or array or even an object. Angular provides directives to handle these situations called conditionals. So, there is ngIf for times when you want to check for a true or false value, and there is ngFor mostly for a list of items either in an object or an array.

Conditionals

How well did you know this?

Not at all

Perfectly

is an Angular directive from the router library that is used to insert the component matched by routes to be displayed on the screen.

Router-Outlet

How well did you know this?

Not at all

Perfectly

is a directive which binds input, select and textarea, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during validations in a form. We can use blank with: input. text.

ngModel

How well did you know this?

Not at all

Perfectly

We’ll be learning about the @Input() decorator. … Using the @Input() decorator we can instruct the Angular framework that a property in our directive’s class is an input property, and as such, the value of that property can be set via an input binding on the host element.

What is input directive in Angular?
Input data into a Directive

How well did you know this?

Not at all

Perfectly

The child component uses the @Output() property to raise an event to notify the parent of the change. To raise an event, an @Output() must have the type of blank , which is a class in @angular/core that you use to emit custom events.

What is the use of EventEmitter in angular?

How well did you know this?

Not at all

Perfectly

Getting the input at the point and time that I click the button. You use blank
A blank can be placed on any html element. You can only use a local reference in your template/ or html page

Local Reference

How well did you know this?

Not at all

Perfectly

Getting access to local reference or any element directly from our typescript code. This works before you call a method.

@Viewchild

How well did you know this?

Not at all

Perfectly

Use blank to quickly execute reusable code in multiple places without having to set up.

ng-content

How well did you know this?

Not at all

Perfectly

All the basic types e.g. int, boolean, char, short, float, long and double are known as primitive types. … The main difference between primitive and reference type is that primitive type always has a value, it can never be null but reference type can be null, which denotes the absence of value.

What is the difference between primitive and reference type?

How well did you know this?

Not at all

Perfectly

An blank is a pattern that listens to a named event, fires a callback, then emits that event with a value. Sometimes this is referred to as a “pub/sub” model, or listener. It’s referring to the same thing

Event Emitter

How well did you know this?

Not at all

Perfectly

Input is used to receive data in whereas Output is used to send data out. Output sends data out by exposing event producers, usually EventEmitter objects. by the way, I will produce and send data out via the onChange property.
A common pattern in Angular is sharing data between a parent component and one or more child components. … @Input() lets a parent component update data in the child component. Conversely, @Output() lets the child send data to a parent component.

The difference between @input and @output angular

How well did you know this?

Not at all

Perfectly

The square brackets that are used with ngClass or some directive signify that we are binding to some property on said directive or ngClass

Little reminder about how square brackets indicate property binding when used with directives

How well did you know this?

Not at all

Perfectly

There are three kinds of directives in Angular: Components—directives with a template. Structural directives—change the DOM layout by adding and removing DOM elements. Attribute directives—change the appearance or behavior of an element, component, or another directive

What is attribute directive What are the types?

How well did you know this?

Not at all

Perfectly

Directives go in our templates so we can attach them to our elements

Yup

How well did you know this?

Not at all

Perfectly

blank is a life cycle hook called by Angular to indicate that Angular is done creating the component. Implement this interface to execute custom initialization logic after your directive’s data-bound properties have been initialized.

NgOnInit

How well did you know this?

Not at all

Perfectly

The constructor() should only be used to initialize class members but shouldn’t do actual “work”. So we should use constructor() to set up Dependency Injection, Initialization of class fields, etc. ngOnInit() is a better place to write “actual work code” that we need to execute as soon as the class is instantiated.

Why we use ngOnInit instead of constructor?

How well did you know this?

Not at all

Perfectly

The new operator instantiates a class by allocating memory for a new object. Note: The phrase “instantiating a class” means the same thing as “creating an object”; you can think of the two as being synonymous. When you create an object, you are creating an instance of a class, therefore “instantiating” a class.

What does it mean to instantiate an object?

How well did you know this?

Not at all

Perfectly

Observables provide support for passing messages between parts of your application. They are used frequently in Angular and are a technique for event handling, asynchronous programming, and handling multiple values.

Observables

How well did you know this?

Not at all

Perfectly

The observer pattern is a software design pattern in which an object, called the subject, maintains a list of its dependents, called observers, and notifies them automatically of state changes. This pattern is similar (but not identical) to the publish/subscribe design pattern.

Observables Part 2

How well did you know this?

Not at all

Perfectly

Means the execution of a program or function.

Invocation

How well did you know this?

Not at all

Perfectly

1) In object-oriented programming, the state of an object is the combination of the original values in the object plus any modifications made to them. (2) The current or last-known status, or condition, of a process, transaction or setting. “Maintaining state” or “managing state” means keeping track of the process.

State of an object

How well did you know this?

Not at all

Perfectly

The addNewItem() function uses the @Output(), newItemEvent, to raise an event with the value the user types into the .

export class ItemOutputComponent {

@Output() newItemEvent = new EventEmitter();

addNewItem(value: string) {
this.newItemEvent.emit(value);
}
}

How well did you know this?

Not at all

Perfectly

In synchronous operations tasks are performed one at a time and only when one is completed, the following is unblocked. In other words, you need to wait for a task to finish to move to the next one. In asynchronous operations, on the other hand, you can move to another task before the previous one finishes.

Synchronous & Asynchronous

How well did you know this?

Not at all

Perfectly

Reactive programming is an asynchronous programming paradigm concerned with data streams and the propagation of change (Wikipedia). RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code.

What is the use of RxJS in Angular?

How well did you know this?

Not at all

Perfectly

In this case, @Input() decorates the property item, which has a type of string, however, @Input() properties can have any type, such as number, string, boolean, or object. The value for item comes from the parent component.

import { Component, Input } from ‘@angular/core’; // First, import Input
export class ItemDetailComponent {
@Input() item = ‘’; // decorate the property with @Input()
}

How well did you know this?

Not at all

Perfectly

test() are methods on a regular expression object. . match() is a method on a string and takes a regex object as an argument. . test() returns a boolean if there’s a match or not

test() and match in Regex

How well did you know this?

Not at all

Perfectly

Reactive forms provide direct, explicit access to the underlying forms object model. Compared to template-driven forms, they are more robust: they’re more scalable, reusable, and testable. If forms are a key part of your application, or you’re already using reactive patterns for building your application, use reactive forms.

Reactive forms

How well did you know this?

Not at all

Perfectly

Template-driven forms rely on directives in the template to create and manipulate the underlying object model. They are useful for adding a simple form to an app, such as an email list signup form. They’re straightforward to add to an app, but they don’t scale as well as reactive forms. If you have very basic form requirements and logic that can be managed solely in the template, template-driven forms could be a good fit.

Template-driven

How well did you know this?

Not at all

Perfectly

Common form foundation classes
Both reactive and template-driven forms are built on the following base classes.

FormControl tracks the value and validation status of an individual form control.

FormGroup tracks the same values and status for a collection of form controls.

FormArray tracks the same values and status for an array of form controls.

ControlValueAccessor creates a bridge between Angular FormControl instances and built-in DOM elements.

Common form foundation classes

How well did you know this?

Not at all

Perfectly

In Angular, form controls are classes that can hold both the data values and the validation information of any form element. Every form input you have in a reactive form should be bound by a form control. These are the basic units that make up reactive forms

Form Control

How well did you know this?

Not at all

Perfectly

FormControl is a class in angular that allow us to manipulate every input field in a form so you can create an instance of the control class. with the control class you can check the value, touched, untouched, dirty, pristine, valid, and errors. These are property’s of form control

more on self

How well did you know this?

Not at all

Perfectly

In fact, we interact with API’s every time we make a browser request (type a site into our browser and press enter).

API’s Basics

How well did you know this?

Not at all

Perfectly

One common use of form objects is to reduce complexity in the controller, and the model, which isn’t incorrect, but does not do justice to the important role that they play.

Form objects part One

How well did you know this?

Not at all

Perfectly

As much as possible, you don’t want your models to know about each other beyond the associations, which we can consider to be persistence logic. Business logic that spans across multiple models are best kept outside of the ActiveRecord models (form objects are models too, so let’s make the distinction clear). More on this later, if you aren’t convinced.

Form objects part Two

How well did you know this?

Not at all

Perfectly

A session is just a place to store data during one request that you can read during later requests.

A session is

How well did you know this?

Not at all

Perfectly

Indicates that the user represented by the sealed client-principal object (in the LOGIN state) has logged out of their current user login session. This is a general purpose method an application can use to invalidate, or terminate access to, a sealed client-principal object.

What method is logout?

How well did you know this?

Not at all

Perfectly

frozen_string_literal: true

require “rails_helper”

RSpec.describe “[DELETE] /api/v1/logout”, type: :request do

Given(:path) { “/api/v1/logout” }
Given(:user) { FactoryBot.create :user }

context “with vaild params” do
before do
sign_in user
end

When { 
  delete path 
}

# Then { expect(response).to be_successful }
Then { 
  binding.pry
  expect(response).to be_successful }

end
end

web side delete test

How well did you know this?

Not at all

Perfectly

Headers in a HTTP request or response is the additional information that is transferred to the user or the server. In postman, the headers can be seen in the Headers tab.

Headers in a HTTP request or response

How well did you know this?

Not at all

Perfectly

2xx successful – the request was successfully received, understood, and accepted. 3xx redirection – further action needs to be taken in order to complete the request. 4xx client error – the request contains bad syntax or cannot be fulfilled.

2xx, 3xx, 4xx

How well did you know this?

Not at all

Perfectly

What are resources in Ruby on Rails?
Any object that you want users to be able to access via URI and perform CRUD (or some subset thereof) operations on can be thought of as a resource. In the Rails sense, it is generally a database table which is represented by a model, and acted on through a controller

What are resources in Ruby on Rails?

How well did you know this?

Not at all

Perfectly

This is how we can modify the reset_password_token using devise with the least possible code changes. It involves understanding the flow of logic throughout the different components in devise, as well as the role each component play, so that you know what can and should be modified. The same can be applied to the confirmation flow as well.

understanding the flow of logic

How well did you know this?

Not at all

Perfectly

A flash message is a way to communicate information with the users of your Rails application so they can know what happens as a result of their actions. Example messages: “Password changed correctly” (confirmation) “User not found” (error)

A flash message

How well did you know this?

Not at all

Perfectly

What is logic flow in programming?
Flow control is a high-level way of programming a computer to make decisions. These decisions can be simple or complicated, executed once or multiple times. Logic presents rules that allow you to build up and represent more complex ideas. …

What is logic flow in programming?

How well did you know this?

Not at all

Perfectly

The show method displays only further details on a single book. This functionality will be achieved by the following lines of code. The show method’s @book = Book. find(params[:id]) line tells Rails to find only the book that has the id defined in params[:id].

What is a show method in ruby?

How well did you know this?

Not at all

Perfectly

Rails framework allows complex objects to be stored in a database column via the ActiveRecord::Serialization module. But understanding when to store serialized data in a column is more crucial than knowing how to do it. Through this article, we will first learn “when” to store serialized data and then the “how” part.

Serialization in Rails for Storage

How well did you know this?

Not at all

Perfectly

Normalization is a database design technique that reduces data redundancy and eliminates undesirable characteristics like Insertion, Update and Deletion Anomalies. Normalization rules divides larger tables into smaller tables and links them using relationships. The purpose of Normalisation in SQL is to eliminate redundant (repetitive) data and ensure data is stored logically.

What is Normalization?

How well did you know this?

Not at all

Perfectly

Storing serialized data in the database could open up a can of worms if we are not mindful. Following are some of the conditions when you may avoid serializing the data:

1) You need to query the serialized data across the records quite often.

When should you not store serialized data?

How well did you know this?

Not at all

Perfectly

Storing serialized data in the database could open up a can of worms if we are not mindful. Following are some of the conditions when you may avoid serializing the data:

1) You need to query the serialized data across the records quite often.
2) The state of the serialized data would change frequently. This would need frequent updates to the serialized column which can be a heavy operation.

3) There is a possibility that the field/property name of an object would change in future. (Note: This is not a pressing issue as we do have ways to fix this as explained in the Custom Serializer section below.)

Once you are convinced that all the above criteria do not apply to your use-case, you may go ahead and implement serialization for storing the data.

When should you not store serialized data?

How well did you know this?

Not at all

Perfectly

The term DSL is also used to describe some of the concepts in ActiveRecord, which is part of Ruby on Rails. The concept of a DSL is actually unrelated to Ruby, and has been around for a long time. It’s generally used to describe a language that has constructs suited for expressing concepts of a particular domain.

What is a DSL and how does it pertain to Ruby?

How well did you know this?

Not at all

Perfectly

2 Answers. Generally asset is anything that browser loads after it gets the HTML page. Meaning javascript, css and any images

What is assets in Ruby on Rails?

How well did you know this?

Not at all

Perfectly

Sprockets is a Ruby library for compiling and serving web assets. Sprockets allows to organize an application’s JavaScript files into smaller more manageable chunks that can be distributed over a number of directories and files. It provides structure and practices on how to include assets in our projects.

What are sprockets in rails?

How well did you know this?

Not at all

Perfectly

An index is a numerical representation of an item’s position in a sequence. This sequence can refer to many things: a list, a string of characters, or any arbitrary sequence of values. In some programming languages, an array can be defined by key-value pairs, where a specific key points to a value.

What is an Index in Coding?

How well did you know this?

Not at all

Perfectly

1 Answer. The purpose of the . call method is to invoke/execute a Proc/Method instance.

What does .call do in Ruby?

How well did you know this?

Not at all

Perfectly

Image result for what does .map do in ruby
Map is a Ruby method that you can use with Arrays, Hashes & Ranges. The main use for map is to TRANSFORM data. For example: Given an array of strings, you could go over every string & make every character UPPERCASE.

What does .MAP do Ruby?

How well did you know this?

Not at all

Perfectly

rails g pipeline Api::V1::CompanyLead show create index update destroy

An example for when you need to generate the structure for our api endpoints.

How well did you know this?

Not at all

Perfectly

create app/controllers/api/v1/company_leads_controller.rb
create app/pipelines/api/v1/company_lead_pipeline.rb
create app/serializers/api/v1/company_lead_serializer.rb
create app/services/api/v1/company_leads/create.rb
create app/services/api/v1/company_leads/update.rb
create app/services/api/v1/company_leads/destroy.rb
create spec/requests/api/v1/company_leads/index_spec.rb

  create  spec/requests/api/v1/company_leads/show_spec.rb

  create  spec/requests/api/v1/company_leads/create_spec.rb

  create  spec/requests/api/v1/company_leads/update_spec.rb

  create  spec/requests/api/v1/company_leads/destroy_spec.rb

route namespace :api do

CompanyLead

How well did you know this?

Not at all

Perfectly

Index shows the list of resources, but likely only an abbreviated portion of those resources.

Show shows the full details of a single resource. potentially with more information from other resources.

Index VS Show

How well did you know this?

Not at all

Perfectly

A blob is a record that contains the metadata about a file and a key for where that file resides on the service. … Subsequent to the file being uploaded server-side to the service via create_after_upload!.

What is active storage blob?

How well did you know this?

Not at all

Perfectly

Functional programming lets you describe what you want to do, as opposed to how you want it done. An example of what would be “Give me all the even numbers in this list.“. You don’t really care about how it’s doing it, you’re telling it what you want

Functional programming

How well did you know this?

Not at all

Perfectly

What the pluck () function does is that it essentially loops through a collection and collects all the data from the particular field and stores it in another collection. That would mean, it plucks the concerned value from a large set of data and stores them in a separate collection for later usage.

How does pluck work?

How well did you know this?

Not at all

Perfectly

new is a class method, which generally creates an instance of the class (this deals with the tricky stuff like allocating memory that Ruby shields you from so you don’t have to get too dirty). Then, initialize , an instance method, tells the object to set its internal state up according to the parameters requested

What does New do in Ruby?

How well did you know this?

Not at all

Perfectly

The call() method calls a function with a given this value and arguments provided individually.

call() method

How well did you know this?

Not at all

Perfectly

What happens after you call map?
Map returns a new array with the results.
It won’t change the original.
If you want to change the original array you can use map!.

Map Method in Ruby

How well did you know this?

Not at all

Perfectly

git restore spec/serializers/api/v1/user_lead_serializer_spec.rb

git restore work if you have not committed your code and need to restore your code within some file back to its original state.

How well did you know this?

Not at all

Perfectly

Ruby interprets semicolons and newline characters as the ending of a statement. However, if Ruby encounters operators, such as +, −, or backslash at the end of a line, they indicate the continuation of a statement.

Line Endings in Ruby Program

How well did you know this?

Not at all

Perfectly

Ruby is a perfect Object Oriented Programming Language. The features of the object-oriented programming language include −

Data Encapsulation
Data Abstraction
Polymorphism
Inheritance

Ruby is a perfect Object Oriented Programming Language

How well did you know this?

Not at all

Perfectly

Variables in a Ruby Class
Ruby provides four types of variables −

Local Variables − Local variables are the variables that are defined in a method. Local variables are not available outside the method. You will see more details about method in subsequent chapter. Local variables begin with a lowercase letter or _.

Instance Variables − Instance variables are available across methods for any particular instance or object. That means that instance variables change from object to object. Instance variables are preceded by the at sign (@) followed by the variable name.

Class Variables − Class variables are available across different objects. A class variable belongs to the class and is a characteristic of a class. They are preceded by the sign @@ and are followed by the variable name.

Global Variables − Class variables are not available across classes. If you want to have a single variable, which is available across classes, you need to define a global variable. The global variables are always preceded by the dollar sign ($).

Variables in a Ruby Class

How well did you know this?

Not at all

Perfectly

Class methods can only be called on classes
Instance methods can only be called on instances of classes
Class methods are always defined def self.method_name
Instance methods are always defined def method_name

Instance methods vs class methods

How well did you know this?

Not at all

Perfectly

Classes are a grouping of methods that exist to construct an object by creating a new instance of the class. Instances are the objects created by a class.

Instance methods vs class methods part: 2

How well did you know this?

Not at all

Perfectly

A class is the blueprint from which individual objects are created

Duh

How well did you know this?

Not at all

Perfectly

A class is the blueprint from which individual objects are created

Yup

How well did you know this?

Not at all

Perfectly

rails db:migrate:status

db migrate

How well did you know this?

Not at all

Perfectly

rails db:migrate:status

db migrate status

How well did you know this?

Not at all

Perfectly

find_by will not throw an error but find will

find vs find_by

How well did you know this?

Not at all

Perfectly

When installing a gem make sure not to use install because that will install it locally and so you need to store the gem inside the gem file

Gem Install

How well did you know this?

Not at all

Perfectly

lead = Lead.first

var = model.method. The model has the data base associations which all have values

How well did you know this?

Not at all

Perfectly

bin/rails generate pipeline Api::V1::Map_Areas::Contact create update destroy

Generate Leads contacts

How well did you know this?

Not at all

Perfectly

contact = ::Api::V1::Leads::Contacts::Create.call contact_params

might need

How well did you know this?

Not at all

Perfectly

The backend validators generate errors, they pass errors to the Front-End

Backend Validators in Ruby

How well did you know this?

Not at all

Perfectly

The “newer” syntax is only for symbols.

{hello: ‘world’} is equivalent to {:hello => ‘world’} but if your key is a string then you still have to use the “hash rocket” syntax: {‘hello’ => ‘world’}

For symbols.

How well did you know this?

Not at all

Perfectly

Ruby operators
The following table shows common Ruby operators ordered by precedence (highest precedence first):

Category Symbol
Resolution, access operators :: .
Array operators [ ] [ ]=
Exponentiation **
Not, complement, unary plus, minus ! ~ + -
Multiply, divide, modulo * / %
Addition, subtraction + -
Shift operators &laquo_space;»
Bitwise and &
Bitwise or, logical or ^ |
Relational operators > >= < <=
Bitwise or, logical or ^ |
Equality, pattern match operators <=> == === != =~ !~
Logical and &&
Logical or ||
Range operators .. …
Ternary ?:
Assignment operators = += -= *= **= /= %= &= |= ^= «=&raquo_space;= ||= &&=
Alternate negation not
Alternate logical or, and or and

Ruby operators
The following table shows common Ruby operators ordered by precedence (highest precedence first):

How well did you know this?

Not at all

Perfectly

Persisted if the contact saved than the contact persisted but if the contact did not save than it did not persist

Persisted in Ruby

How well did you know this?

Not at all

Perfectly

devise-jwt is a devise extension which uses JWT tokens for user authentication. It follows secure by default principle. This gem is just a replacement for cookies when these can’t be used. As cookies, a token expired with devise-jwt will mandatorily have an expiration time.

devise-jwt

How well did you know this?

Not at all

Perfectly

Class variables begin with @@ and must be initialized before they can be used in method definitions.

Class variables

How well did you know this?

Not at all

Perfectly

When an uninitialized local variable is referenced, it is interpreted as a call to a method that has no arguments.

Uninitialized local variable

How well did you know this?

Not at all

Perfectly

Ruby Constants
Constants begin with an uppercase letter. Constants defined within a class or module can be accessed from within that class or module, and those defined outside a class or module can be accessed globally.

Constants may not be defined within methods. Referencing an uninitialized constant produces an error. Making an assignment to a constant that is already initialized produces a warning.

Ruby Constants

How well did you know this?

Not at all

Perfectly

Ruby Pseudo-Variables
They are special variables that have the appearance of local variables but behave like constants. You cannot assign any value to these variables.

self − The receiver object of the current method.

true − Value representing true.

false − Value representing false.

nil − Value representing undefined.

__FILE__ − The name of the current source file.

__LINE__ − The current line number in the source file.

Ruby Pseudo-Variables

How well did you know this?

Not at all

Perfectly

Example
123 # Fixnum decimal
1_234 # Fixnum decimal with underline
-500 # Negative Fixnum
0377 # octal
0xff # hexadecimal
0b1011 # binary
?a # character code for ‘a’
?\n # code for a newline (0x0a)
12345678901234567890 # Bignum

Ruby Literals and Integers

How well did you know this?

Not at all

Perfectly

http://localhost:3000/rails/info/routes

Looking up routes on the front-end side

How well did you know this?

Not at all

Perfectly

Ruby Literals and Integers

How well did you know this?

Not at all

Perfectly

open coverage/index.html

The coverage plugin helps you know how much your test covers

How well did you know this?

Not at all

Perfectly

create app/controllers/api/v1/notes_controller.rb
create app/pipelines/api/v1/note_pipeline.rb
create app/serializers/api/v1/note_serializer.rb
create app/services/api/v1/notes/create.rb
create app/services/api/v1/notes/update.rb
create app/services/api/v1/notes/destroy.rb
create spec/requests/api/v1/notes/create_spec.rb
create spec/requests/api/v1/notes/update_spec.rb
create spec/requests/api/v1/notes/destroy_spec.rb

Generated paths for notes

How well did you know this?

Not at all

Perfectly

ActiveRecord::Base.connection.tables
ActiveRecord::Base.connection.columns(‘projects’).map(&:name)

Grabbing tables in ruby console

How well did you know this?

Not at all

Perfectly

https://apidock.com/rails/ActionController/Parameters/permit

https://apidock.com/rails/Hash/slice

Examples for permit
and slice

How well did you know this?

Not at all

Perfectly

Two services folders exist one is for spec and the other is for normal services

Service folder structure

How well did you know this?

Not at all

Perfectly

In Ruby, nil is a special value that to serve as an indication of the absence of any value. Nil is an object of NilClass. nil is Ruby’s way of referring to nothing or void

Nil in Ruby

build_stubbed is the younger, more hip sibling to build ; it instantiates and assigns attributes just like build , but that’s where the similarities end.

build_stubbed

Ruby if…else Statement

if conditional [then]
code…
[elsif conditional [then]
code…]…
[else
code…]
end

Ruby if…else Statement

Ruby provides a special statement which is referred as unless statement. This statement is executed when the given condition is false. … In if statement, the block executes once the given condition is true, however in unless statement, the block of code executes once the given condition is false.

The unless statement

Reloads the attributes of this object from the database. The optional options argument is passed to find when reloading so you may do e.g. record.reload(:lock => true) to reload the same record with an exclusive row lock.

Reload

Reload in Ruby

You misunderstood build. It’s just an alias of new, nothing special.

build won’t “create” a record in database, just create a new object in memory so that the view can take this object and display something, especially for a form.

Build

The HyperText Transfer Protocol (HTTP) 401 Unauthorized response status code indicates that the client request has not been completed because it lacks valid authentication credentials for the requested resource.

401

Gulp is a tool that helps you out with several tasks when it comes to web development. It’s often used to do front end tasks like: Spinning up a web server. Reloading the browser automatically whenever a file is saved.

Why do we need gulp?

knock-pro-web git:(lc/notes-update-lead) git pull origin staging
➜ knock-pro-web git:(lc/notes-update-lead) ✗ ga
➜ knock-pro-web git:(lc/notes-update-lead) gcm

knock-pro-web git:(lc/notes-update-lead) git push origin lc/notes-update-lead -f

fixing commit error

rails g pipeline Api::V1::NameOfEndpoint action options: [show create index update destroy]

bin/rails generate pipeline Api::V1::Map_Areas show create index update destroy

example for generate

create app/controllers/api/v1/map_areas_controller.rb
create app/pipelines/api/v1/map_area_pipeline.rb
create app/serializers/api/v1/map_area_serializer.rb
create app/services/api/v1/map_areas/create.rb
create app/services/api/v1/map_areas/update.rb
create app/services/api/v1/map_areas/destroy.rb
create spec/requests/api/v1/map_areas/index_spec.rb
create spec/requests/api/v1/map_areas/show_spec.rb
create spec/requests/api/v1/map_areas/create_spec.rb
create spec/requests/api/v1/map_areas/update_spec.rb
create spec/requests/api/v1/map_areas/destroy_spec.rb
route namespace :api do

routes and file for map_areas

What are transactions in rails?

Rails transactions are a way to ensure that a set of database operations will only occur if all of them succeed. Otherwise they will rollback to the previous state of data

Strong Parameters is a feature of Rails that prevents assigning request parameters to objects unless they have been explicitly permitted. It has its own DSL (Domain Specific Language, or in other words, a predefined syntax it understands), that allows you to indicate what parameters should be allowed

Strong Parameters in Rails

What does ‘?’ Mean in Ruby?
i know that the ‘?’ in ruby is something that checks the yes/no fulfillment.

def destroy
render json: ::Api::V1::MapAreaPipeline.destroy(params[:id])
end

controller/destroy

def destroy id
map_area = MapArea.find id
map_area.destroy

    ::BaseSerializer.empty
  end

pipeline/destroy

frozen_string_literal: true

require “rails_helper”

RSpec.describe “[DELETE] /api/v1/map_areas/:id”, type: :request do
Given(:path) { “/api/v1/map_areas/#{map_area.id}” }
Given(:group) { FactoryBot.create :group }
Given(:user) { FactoryBot.create :user, id: 1 }

Given(:map_area) {
FactoryBot.create(
:map_area,
id: 1,
group_id: group.id,
name: “name”,
hex_color: “#4ef9e8”,
coordinates: [{ lat: 1.222, lon: 1.333 }],
user_ids: [],
)
}

context “with valid params” do
When { delete path, headers: api_auth_headers(user) }

Then {
  expect(response).to be_successful
  expect(response_body[:data]).to be_empty
  expect(response_body[:errors]).to be_empty
}   end

context “with unauthenticated user” do
When { delete path }

Then { expect(response).to be_unauthorized }   end end

spec/destroy

Assignment Branch Condition (ABC) size is a measurement of the size of a method. It is essentially determined by counting the number of Assignments, Branches, and Conditional statements

To reduce ABC score, you could move some of those assignments into before_action calls:

Assignment Branch Condition (ABC)

strong Params and Rails permit nested hash attributes

Grab explanations for these

A transverse activity is an activity executed by several objects in some combination. The activity is described as a single unit, separately from the descriptions of the participating objects. … Usual language mechanisms such as class, object etc

Transverse in coding

Enumerator, specifically, is a class in Ruby that allows both types of iterations – external and internal. Internal iteration refers to the form of iteration which is controlled by the class in question, while external iteration means that the environment or the client controls the way iteration is performed.

Enumerator in Ruby

rails g pipeline Api::V1::Map_Icon_Settings index

The before(:each) method is where we define the setup code. When you pass the :each argument, you are instructing the before method to run before each example in your Example Group i.e. the two it blocks inside the describe block in the code above.

The before(:each) method

Factory Bot’s creates test fixtures that are fake test objects that can be re-used throughout testing an application.

Factory Bot Definition

A Domain-Specific Language, or DSL, is “a programming language of limited expressiveness focused on a particular domain”. It makes tasks in its domain easier by removing extraneous code for a particular task and allowing you to focus on the specific task at hand.

A Domain-Specific Language, or DSL

rails generate pipeline Api::V1::UserMapAreas::map_area_id destroy

I bet that often you see a lot of enormous scopes in Ruby on Rails models, endless chains of queries in controllers and even bulky chunks of raw SQL.

enormous scopes

These problems can be solved by using Query Object pattern — a common technique that isolates your complex queries.
Query Object in ideal case is a separate class that contains one specific query that implements just one business logic rule.

DB queries application problems: Solved

An OpenStruct is a data structure, similar to a Hash, that allows the definition of arbitrary attributes with their accompanying values. This is accomplished by using Ruby’s metaprogramming to define methods on the class itself.

OpenStruct is the most complex (it’s a wrapper for Hash) so it’s the slowest. However the magnitude of the difference in speed is kind of surprising.

An OpenStruct

A data structure is a specific way to organize & access data.

Examples include:

Arrays
Binary trees
Hashes
Different data structures excel at different tasks.

What is a data structure?

What is contiguous in coding?
Contiguous describes two or more objects that are adjacent to each other. In computing, contiguous data is data that is moved or stored in a solid uninterrupted block.

What is contiguous in coding?

In simple terms, models are Ruby classes that can holds value of a single row in a database table. Since they all inherit ActiveRecord::Base through ApplicationRecord class, they are equipped with all the Active Record methods which enables them to interact with the database.

Rails Models
What are models?

Decoupling is a coding strategy that involves taking the key parts of your classes’ functionality (specifically the hard-to-test parts) and replacing them with calls to an interface reference of your own design. With decoupling, you can instantiate two classes that implement that interface.

Decoupling Part One

Decoupling is a tool that allows decomposing a complicated problem in a series of simpler ones, solving them independently and then combining the results

Decoupling Part One

Active Record objects can be created from a hash, a block, or have their attributes manually set after creation. The new method will return a new object while create will return the object and save it to the database. A call to user. save will commit the record to the database.

Active Record objects

Middleware is software that lies between an operating system and the applications running on it. Essentially functioning as hidden translation layer, middleware enables communication and data management for distributed applications.

Middleware is software

Data: /opt/homebrew/var/lib/elasticsearch/elasticsearch_logancratty/
Logs: /opt/homebrew/var/log/elasticsearch/elasticsearch_logancratty.log
Plugins: /opt/homebrew/var/elasticsearch/plugins/
Config: /opt/homebrew/etc/elasticsearch/

elasticsearch

transport.tcp.port. 9300. The port that is used for communication between Elasticsearch nodes in a cluster.

tcp

index data when changes are made happens when
include Elasticsearch::Model::Callbacks is included

With Elasticsearch::Model::Callbacks, whenever a movie is added, modified, or deleted, its document on Elasticsearch is also updated.

include Elasticsearch::Model::Callbacks

You can use the search API to search and aggregate data stored in Elasticsearch data streams or indices. The API’s query request body parameter accepts queries written in Query DSL. The following request searches my-index-000001 using a match query. This query matches documents with a user.id value of kimchy

How do you search in Elasticsearch?

nock-pro-web git:(lc/company-users-index) rails generate pipeline Api::V1::Company_Users index
create app/controllers/api/v1/company_users_controller.rb
create app/pipelines/api/v1/company_user_pipeline.rb
create app/serializers/api/v1/company_user_serializer.rb
create spec/requests/api/v1/company_users/index_spec.rb
route namespace :api do
namespace :v1 do
resources :company_users, only: [:index]
end
end

pipeline Api::V1::Company_Users index

A nested query is a query that has another query embedded within it. The embedded query is called a subquery. A subquery typically appears within the WHERE clause of a query. It can sometimes appear in the FROM clause or HAVING clause.Jul

What is nested query?

A Callback is a function that is to be executed after another function has finished executing — hence the name ‘call back’.

What is a Callback Function?

Functions which takes Funs(i.e. functional objects) as arguments, or which return Funs are called higher order functions.
Any function that is passed as an argument is called a callback function.
a callback function is a function that is passed to another function (let’s call this other function otherFunction) as a parameter, and the callback function is called (or executed) inside the otherFunction.

Call back vs Callback Function

In computer programming, a callback is a reference to executable code, or a piece of executable code, that is passed as an argument to other code. This allows a lower-level software layer to call a subroutine (or function) defined in a higher-level layer.

Callback function part two

Nested queryedit. Wraps another query to search nested fields. The nested query searches nested field objects as if they were indexed as separate documents. If an object matches the search, the nested query returns the root parent document.

What is nested query in Elasticsearch?

ES is document oriented; it stores its entire objects inside documents. It also indexes these documents to make them searchable. A document belongs to a type and a type belongs to an index. You can draw some parallels to how a traditional relational database is structured:

Relational DB ⇒ Databases ⇒ Tables ⇒ Rows ⇒ Columns
Elasticsearch ⇒ Indices ⇒ Types ⇒ Documents ⇒ Fields

Elastic-Search is document Oriented

One shard each from Node 1 and Node 2 have moved to the new Node 3, and we have two shards per node, instead of three. This means that the hardware resources (CPU, RAM, I/O) of each node are being shared among fewer shards, allowing each shard to perform better.

A shard is a fully fledged search engine in its own right, and is capable of using all of the resources of a single node. With our total of six shards (three primaries and three replicas), our index is capable of scaling out to a maximum of six nodes, with one shard on each node and each shard having access to 100% of its node’s resources.

Shards explained in elastic-search

delete searchable

do not forget

email
full name
first name
last name
group id

For ES

GET /development_knock_pro_web_user/_search
{
“query”: {
“nested”: {
“path”: “profile”,
“query”: {
“bool”: {
“must”: [
{
“match”: {
“profile.full_name”: “Sebulba”
}
},
{
“match”: {
“profile.phone_number”: “+3817569173539”
}
}
]
}
}
}
}
}

ES query example

{“query”: {
“bool”: {
“must”: [
{“‘nested”: {
“path”: “”,
“query”: {
“bool”: {
“must”: [
{
“match”: {
“user.email”:”art_kautzer@lakin.io”}}]
}
}
}},
{“nested”: {
“path”: “”,
“query”: {
“bool”: {
“must”: [
{
“match”: { “profile.full_name”: “Sebulba”}}]
}
}
}}
]
}
}}

Elastic-search Aggregations provide you with the ability to group and perform calculations and statistics (such as sums and averages) on your data by using a simple search query. An aggregation can be viewed as a working unit that builds analytical information across a set of documents.

Elastic-search Aggregations

Must means: Clauses that must match for the document to be included.

Should means: If these clauses match, they increase the _score; otherwise, they have no effect. They are simply used to refine the relevance score for each document.

Must vs should in Elastic-Search

Wildcard query
Returns documents that contain terms matching a wildcard pattern.

A wildcard operator is a placeholder that matches one or more characters. For example, the * wildcard operator matches zero or more characters. You can combine wildcard operators with other characters to create a wildcard pattern.

Wildcard query

query_string supports Lucene syntax to interpret the text, where as multi_match just attempts to match the given “text” against the listed fields’ indexed values.

query_string vs multi_match

The key difference is that a query_string query (with multiple fields and
the AND operator) will match when each term exists in at least one field
while a multi-match query (also using AND) matches only when all the terms
exist in at least one field. The terms of a query_string query do not need
to exist in the same field, while it does matter in a multi-match.

query_string vs multi_match Part 2

must means: The clause (query) must appear in matching documents. These clauses must match, like logical AND.

should means: At least one of these clauses must match, like logical OR.

Basically they are used like logical operators AND and OR. See this.

Now in a bool query:

must means: Clauses that must match for the document to be included.

should means: If these clauses match, they increase the _score; otherwise, they have no effect. They are simply used to refine the relevance score for each document

Must vs Should

What is fuzziness in Elasticsearch?
In Elasticsearch, fuzzy query means the terms in the queries don’t have to be the exact match with the terms in the Inverted Index. To calculate the distance between query, Elasticsearch uses Levenshtein Distance Algorithm

Fuzziness in Elastic-search?

What is fuzziness in Elastic-search?
In Elastic-search, fuzzy query means the terms in the queries don’t have to be the exact match with the terms in the Inverted Index. To calculate the distance between query, Elastic-search uses Levenshtein Distance Algorithm

Fuzziness in Elastic-search?

Monte Carlo methods, or Monte Carlo experiments, are a broad class of computational algorithms that rely on repeated random sampling to obtain numerical results. The underlying concept is to use randomness to solve problems that might be deterministic in principle.

Monte Carlo Methods || Monte Carlo experiments

Parameters for
gt
(Optional) Greater than.
gte
(Optional) Greater than or equal to.
lt
(Optional) Less than.
lte
(Optional) Less than or equal to.
format
(Optional, string) Date format used to convert date values in the query.

By default, Elasticsearch uses the date format provided in the ‘s mapping. This value overrides that mapping format.

Parameters for

indices.query.bool.max_nested_depth
(Static, integer) Maximum nested depth of bool queries. Defaults to 20.

This setting limits the nesting depth of bool queries. Deep nesting of boolean queries may lead to stack overflow.

indices.query.bool.max_nested_depth

Options hash is a nice concept enabled by a feature of ruby parser. Say, you have a method with some required arguments. Also you may pass some optional arguments. Over time you may add more optional arguments or remove old ones. To keep method declaration clean and stable, you can pass all those optional arguments in a hash. Such method would look like this:

Options hash

What is parser used for?
Parser. A parser is a software component that takes input data (frequently text) and builds a data structure – often some kind of parse tree, abstract syntax tree or other hierarchical structure, giving a structural representation of the input while checking for correct syntax.

What is parser used for?

A :: scope operator refers to the global scope instead of local.

module Music
module Record
# perhaps a copy of Abbey Road by The Beatles?
end

module EightTrack
# like Gloria Gaynor, they will survive!
end
end

module Record
# for adding an item to the database
end
To access Music::Record from outside of Music you would use Music::Record.

To reference Music::Record from Music::EightTrack you could simply use Record because it’s defined in the same scope (that of Music).

However, to access the Record module responsible for interfacing with your database from Music::EightTrack you can’t just use Record because Ruby thinks you want Music::Record. That’s when you would use the scope resolution operator as a prefix, specifying the global/main scope: ::Record.

Scope Operator

How do I know if a code is prefix code?
If you have 0, 00, 1, 11 all as keys, this is not a prefix-code because 0 is a prefix of 00, and 1 is a prefix of 11. A prefix code is where none of the keys starts with another key. So for example, if your keys are 0, 10, 11 this is a prefix code and uniquely decipherable.

How do I know if a code is prefix code?

GET /development_knock_pro_web_user/_search
{
“query”: {
“query_string”: {
“query”: “(company_id:1 OR group_id:1) AND (company_id:2 OR group_id:2)”
}
}
}

id query

{
“query”: {
“query_string”: {
“fields”: [ “company_id”, “group_id” ],
“query”: “1 AND 1”
}
}
}

{
“query”: {
“terms”: {
“group_id”: [ “1”, “2”, “3” ]
}
}
}

query_string and query/terms

GET /development_knock_pro_web_user/_search

   {   "query": {
"query_string": {
  "fields": [ "company_id", "group_id" ],
  "query": "2 AND 2"
}   } } {   "query": {
"terms": {
  "group_id": [ "6", "10", "12" ] 
}   } } { "query": {
"bool": {
    "should": [
        {
            "nested": {
                "path": "profile",
                "query": {
                    "multi_match": {
                        "query": "Sebulba",
                        "fields": ["profile.full_name"]
                    }
                }
            } 
        },
           {
            "multi_match": {
                "query": "tyree_johns@yost.biz",
                "fields": ["email"]
            }
        }
    ]
} } }

{
“query”: {
“bool”: {
“should”: [
{
“nested”: {
“path”: “profile”,
“query”: {
“multi_match”: {
“query”: “Sebulba”,
“fields”: [“profile.full_name”, “profile.first_name”, “profile.last_name”]
}
}
}
},
{
“multi_match”: {
“query”: “tyree_johns@yost.biz”,
“fields”: [“email”]
}
},
{
“query”: {
“query_string”: {
“fields”: [ “company_id”, “group_id” ],
“query”: “1 AND 1”
}
}
}
]
}
}

str? equivalent to type?(String)
int? equivalent to type?(Integer)
float? equivalent to type?(Float)
decimal? equivalent to type?(BigDecimal)
bool? equivalent to type?(Boolean)
date? equivalent to type?(Date)
time? equivalent to type?(Time)
date_time? equivalent to type?(DateTime)
array? equivalent to type?(Array)
hash? equivalent to type?(Hash)

Shorthand for common Ruby types:

In the modern era, software is commonly delivered as a service: called web apps, or software-as-a-service. The twelve-factor app is a methodology for building software-as-a-service apps that:

Use declarative formats for setup automation, to minimize time and cost for new developers joining the project;

Have a clean contract with the underlying operating system, offering maximum portability between execution environments;

Are suitable for deployment on modern cloud platforms, obviating the need for servers and systems administration;

Minimize divergence between development and production, enabling continuous deployment for maximum agility;

And can scale up without significant changes to tooling, architecture, or development practices.

Software is commonly delivered as a service

Declares which components, directives, and pipes belong to the module.
Makes some of those components, directives, and pipes public so that other module’s component templates can use them.
Imports other modules with the components, directives, and pipes that components in the current module need.
Provides services that other application components can use.

Angular modularity

Ngrx is a group of Angular libraries for reactive extensions. Ngrx/Store implements the Redux pattern using the well-known RxJS observables of Angular 2. It provides several advantages by simplifying your application state to plain objects, enforcing unidirectional data flow, and more.

Ngrx is a group of Angular libraries for reactive extensions.

Both observables and promises help us work with asynchronous functionality in JavaScript. Promises deal with one asynchronous event at a time, while observables handle a sequence of asynchronous events over a period of time.

What is difference between Observable and promises?

Image result for angular observable
Angular Observable use as an interface to handle a variety of common asynchronous operations such as send observable data from child to parent component by defining custom events, handle AJAX or HTTP requests and responses, listen and respond user input in Angular Router and Forms

What is an Observable in Angular 8?

An overview of Reactive Programming Reactive programming is the term which you hear much these days, but what it means? Reactive programming is mainly the way through which the applications handle events as well as the data flow in the applications. In the concept of reactive programming, you will design the components along with some different pieces of the software to react to these changes rather than asking for changes. It could certainly be a great movement.

Read more at: https://www.freelancinggig.com/blog/2020/03/11/what-is-the-difference-between-ngrx-and-rxjs/

An overview of Reactive Programming Reactive

git remote add origin yourremotegitrepository
After

git fetch //you should get all remote branches

git checkout branchname

Git repo to work

Basically, it’s the “model” of the objects required for your business purposes.

Say you were making a sales tracking website - you’d potentially have classes such as Customer, Vendor, Transaction, etc. That entire set of classes, as well as the relationships between them, would constitute your Domain Model.

Domain Model

Template variables help you use data from one part of a template in another part of the template. Use template variables to perform tasks such as respond to user input or finely tune your application’s forms.

Template variables

Why we use controls in Angular?
The built-in form controls target native HTML elements such as inputs, text areas, checkboxes, etc. formControlName property applied to it. And this is how the HTML element gets binded to the form. Whenever the user interacts with the form inputs, the form value and validity state will be automatically re-calculated

Why we use controls in Angular?

https://www.concretepage.com/angular-2/angular-2-ngform-with-ngmodel-directive-example

Angular NgForm with NgModel Directive Example

From Wikipedia, the free encyclopedia. In object-oriented programming, a member variable (sometimes called a member field) is a variable that is associated with a specific object, and accessible for all its methods (member functions).

What is meant by member variable?

A class groups a set of values and a set of operations. The values and the operations of a class are called its members. Member variables implement the values and member functions implement the operations.

What is member variable and member function?

Parsing is the process of analyzing text made of a sequence of tokens to determine its grammatical structure with respect to a given (more or less) formal grammar.

The parser then builds a data structure based on the tokens. This data structure can then be used by a compiler, interpreter or translator to create an executable program or library.

is syntactically valid for that language’s grammar

Parsing

If I gave you an english sentence, and asked you to break down the sentence into its parts of speech (nouns, verbs, etc.), you would be parsing the sentence.

That’s the simplest explanation of parsing I can think of.

That said, parsing is a non-trivial computational problem. You have to start with simple examples, and work your way up to the more complex.

Parsing 2

Webpack is a tool that lets you compile JavaScript modules, also known as module bundler. Given a large number of files, it generates a single file (or a few files) that run your app. It can perform many operations: helps you bundle your resources. watches for changes and re-runs the tasks.

What is Webpack and why use it?

“pk.eyJ1IjoiZGFybHBlcGl0byIsImEiO
iJjazdma3c3cXIwM3ljM29wZ3Rpbm
42OTRuIn0.RBmcyKFsAUsXoqWzbQLGDQ”;

sales-app

‘pk.eyJ1IjoiZmF0aW1hZ3JhY2UiLCJhIjoiY2s5Z
TNtdDlvMGFlMDNlbnViazA3YmUwNi
J9.wCbrbShpdtHikD_LWTgBZA’;

setter-app

Why This Is a Good Question
This is a tough question to Google for unless you know the right search terms. The #{} operator technically performs expression substitution inside a string literal.

The Answer
The #{} literal is the operator used for interpolation inside double-quoted strings the same way that the backticks or $() construct would be used in Bash. From a practical point of view, the expression inside the literal is evaluated, and then the entire #{} expression (including both the operator and the expression it contains) is replaced in situ with the result.

{} operator technically performs expression substitution inside a string literal.

The API key is a unique identifier that authenticates requests associated with your project for usage and billing purposes. You must have at least one API key associated with your project.

The API key

Restricting API keys adds security to your application by ensuring only authorized requests are made with your API key.

Restricting API keys

With the Maps SDK for Android, add maps to your Android app including Wear OS apps using Google Maps data, map displays, and map gesture responses. You can also provide additional information for map locations and support user interaction by adding markers, polygons, and overlays to your map.

What is a map SDK?

Maps SDKs. Bring the real world to your users with dynamic maps for the web and mobile.

What is a map SDK?

AIzaSyDRhVHrzLA4L1-6PLpxFNjIVc806Zob_l0

Android API Key

4A:67:8D:E7:2E:E0:71:8A:AF:EC:F3:E9:07:67:D0:70:C8:DC:16:BD

SHA KEY

The Service Usage API is an infrastructure service of Google Cloud that lets you list and manage APIs and Services in your Cloud projects. You can list and manage APIs and Services provided by Google, Google Cloud, and third-party producers

Service Usage API

What is Confluence used for?
Confluence is a collaboration wiki tool used to help teams to collaborate and share knowledge efficiently. With confluence, we can capture project requirements, assign tasks to specific users, and manage several calendars at once with the help of Team Calendars add-on

What is Confluence used for?

%i = All values within an array are individually given a symbol

%i operator

Image result for what is a components template
A template is a form of HTML that tells Angular how to render the component. Views are typically arranged hierarchically, allowing you to modify or show and hide entire UI sections or pages as a unit. The template immediately associated with a component defines that component’s host view.

What is Angular component template?

The functional programming paradigm was explicitly created to support a pure functional approach to problem solving. Functional programming is a form of declarative programming. In contrast, most mainstream languages, including object-oriented programming (OOP) languages such as C#, Visual Basic, C++, and Java, were designed to primarily support imperative (procedural) programming.

With an imperative approach, a developer writes code that specifies the steps that the computer must take to accomplish the goal. This is sometimes referred to as algorithmic programming. In contrast, a functional approach involves composing the problem as a set of functions to be executed. You define carefully the input to each function, and what each function returns. The following table describes some of the general differences between these two approaches.

Imperative Programing is Procedural Programing

Declarative Programing is Functional Programing

Markup is what HTML do to the text inside them. They mark it as a certain type of text(like bold, italic, underline etc). HTML is a language as it has its own code words like any other language. Due to these reasons HTML is calles Markup language

Why is it called Mark up language?

As with most things you should pick which to use based on the context and what is conceptually the correct way to go. A switch is really saying “pick one of these based on this variables value” but an if statement is just a series of boolean checks.

Also switches implement strict comparisons

Switch Statement vs If statement

Angular’s component model offers strong encapsulation and an intuitive application structure. Components also make your application painless to unit test and can improve the overall readability of your code.

Angular’s component model offers strong

Every component has an HTML template that declares how that component renders. You define this template either inline or by file path.

Angular Template

Angular extends HTML with additional syntax that lets you insert dynamic values from your component. Angular automatically updates the rendered DOM when your component’s state changes. One application of this feature is inserting dynamic text,

Angular extends HTML

Notice the use of double curly braces–they instruct Angular to interpolate the contents within them.

interpolate <p>{{ message }}</p>

Notice the use of the square brackets–that syntax indicates that you’re binding the property or attribute to a value in the component class.

[style.color]=”fontColor”>

Data-binding =communication
TypeScript Code —-> Output Data Template HTML
(Business Logic)

You can output Data through String interpolation and property Binding

React to User Events with event Binding

To react to both you use Two way Binding

data binding

Ternary Conditional Operator Typescript

The Typescript conditional operator is a Ternary Operator, which takes three operands. The first operand is a condition to evaluate. It is followed by a question mark (?), then an expression (expression1). It is then followed by a colon (:) and second expression (expression2). If the condition is true, then expression1 executes & if the condition is false, then expression2 executes. The conditional operator is a shorthand way to write an If else statement.

String Interpolation has to resolve to a string in the end

String Interpolation

Borrowed from MDN Docs, this definition of DOM Events is perhaps the most accurate one. Events are nothing but a way of letting us know that some change has occurred in the DOM. This allows us to make our web pages interactive, make them react to these changes. Let us see how we can act on these changes using the TypeScript programming language.

Definition DOM Events

What objects are and how they are related to each other is Inheritance

Inheritance

With Composition you are describing what an object can do

Composition

With Composition you are describing what an object can do
You can create a number of different composable objects that you can create.

First you have Functions that define what all the object can do

Create new functions that return new objects that give you all the functionality you want inside of them

It give you more flexibility compared to having to follow an inheritance tree

Composition

Testing
Help with refactoring your code/ drying up code
and helps a Developer see what behavior it has

Difference between Behavior and Implementation

Benefits of Testing

Directives VS Decorators

Directives

Directives are the building blocks of Angular applications.

An Angular component isn’t more than a directive with a template. When we say that components are the building blocks of Angular applications,

https://angular.io/guide/attribute-directives

https://www.sitepoint.com/practical-guide-angular-directives/

Decorators

Decorator that marks a class as an Angular component and provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime.

We can say Decorators are functions, and there are four things (class, parameter, method and property) that can be decorated, which will follows with each different function signatures.

There are some good blogs you can read them for more info…

https://angular-2-training-book.rangle.io/features/typescript/decorators

https://codecraft.tv/courses/angular/es6-typescript/decorators/

Android Permissions

NSLocationAlwaysUsageDescription
Your location is not needed. This request has popped up due to a 3rd party framework used by the app in a context that does NOT need you to reveal you location. Do be sure to check audit trail for the location queries on ios 15 or later.
NSLocationWhenInUseUsageDescription
You will get zero benefit allowing this app accessing your location. You should never see this alert. If you do alert technical support at foo@bar.baz

IOS permissions

Sources

A map or layer source states which data the map should display. Specify the type of source with the “type” property, which must be one of vector, raster, raster-dem, geojson, image, video.

A source provides map data that Mapbox GL JS can use with a style document to render a visual representation of that data. This delegation makes it possible to style the same source in different ways, as you might do to differentiate the appearances of different types of roads in a highways layer.

enableMapLayer(map: mapboxgl.Map){
map.loadImage(
‘https://docs.mapbox.com/mapbox-gl-js/assets/cat.png’,
(error, image) => {
if (error) throw error;

      // Add the image to the map style.
      map.addImage('cat', image);

      // Add a data source containing one point feature.
      map.addSource('point', {
          'type': 'geojson',
          'data': {
              'type': 'FeatureCollection',
              'features': [
                  { 'type': 'Feature',
                    'geometry': {
                        'type': 'Point',
                        'coordinates': [
                            -111.80923,
                            39.954685
                        ]
                    },
                    'properties': {
                        'title': 'Mapbox',
                        'description': 'Utah, USA'
                    }
                  }
              ]
          }
      });

      // Add a layer to use the image to represent the data.
      map.addLayer({
          'id': 'points',
          'type': 'symbol',
          'source': 'point', // reference the data source
          'layout': {
              'icon-image': 'cat', // reference the image
              'icon-size': 0.25
          }
      });
  }   ); }; }

Icons in Angular

public geojson = {
type: ‘FeatureCollection’,
features: [
{
type: ‘Feature’,
geometry: {
type: ‘Point’,
coordinates: new mapboxgl.LngLat(-111.80923, 39.954685)
},
properties: {
title: ‘Mapbox’,
description: ‘Utah, USA’
}
},
{
type: ‘Feature’,
geometry: {
type: ‘Point’,
coordinates: new mapboxgl.LngLat(-122.414, 37.776)
},
properties: {
title: ‘Mapbox’,
description: ‘San Francisco, California’
}
}
]
}
// enableMapLayer(map: mapboxgl.Map) {
// const marker = new mapboxgl.Marker()
// .setLngLat([-122.414, 37.776])
// .addTo(map); // add the marker to the map
// }
// }

enableMapLayer(map: mapboxgl.Map) {
// add markers to map
for (const feature of this.geojson.features) {
// create a HTML element for each feature
// const el = document.createElement(‘div’)
// el.className = ‘marker’

  // make a marker for each feature and add it to the map
  console.log(feature)
  new mapboxgl.Marker()
    .setLngLat(feature.geometry.coordinates)
    .addTo(map)

}   } }

Markers in Angular

Every component consuming the shared service receives the most up to date data

Behavior Subject any => any

From what I understand, to “resolve a dependency” means to “go get” it (i.e. from the service container) so it can be “used” where it’s being injected or “passed” into.

Resolve a Dependency

From my own personal notes (mostly snippets from the docs, google group posts, and SO posts):

Modules

provide a way to namespace/group services, directives, filters, configuration information and initialization code
help avoid global variables
are used to configure the $injector, allowing the things defined by the module (or the whole module itself) to be injected elsewhere (Dependency Injection stuff)
Angular modules are not related to CommonJS or Require.js. As opposed to AMD or Require.js modules, Angular modules don’t try to solve the problem of script load ordering or lazy script fetching. These goals are orthogonal and both module systems can live side by side and fulfill their goals (so the docs claim).
Services

are singletons, so there is only one instance of each service you define. As singletons, they are not affected by scopes, and hence can be accessed by (shared with) multiple views/controllers/directives/other services
You can (and probably should) create custom services when
two or more things need access to the same data (don’t use root scope) or you just want to neatly encapsulate your data
you want to encapsulate interactions with, say, a web server (extend $resource or $http in your service)
Built-in services start with ‘$’.
To use a service, dependency injection is required on the dependent (e.g., on the controller, or another service, or a directive).
Directives (some of the items below say essentially the same thing, but I’ve found that sometimes a slightly different wording helps a lot)

are responsible for updating the DOM when the state of the model changes
extend HTML vocabulary = teach HTML new tricks.
Angular comes with a built in set of directives (e.g., ng-* stuff) which are useful for building web applications but you can add your own such that HTML can be turned into a declarative Domain Specific Language (DSL). E.g., the and elements on the Angular home page demo “Creating Components”.
Non-obvious built-in directives (because they don’t start with “ng”): a, form, input, script, select, textarea. Under Angular, these all do more than normal!
Directives allow you to “componentize HTML”. Directives are often better than ng-include. E.g., when you start writing lots of HTML with mainly data-binding, refactor that HTML into (reusable) directives.
The Angular compiler allows you to attach behavior to any HTML element or attribute and even create new HTML elements or attributes with custom behavior. Angular calls these behavior extensions directives.
When you boil it all down, a directive is just a function which executes when the Angular compiler encounters it in the DOM.
A directive is a behavior or DOM transformation which is triggered by a presence of an attribute, an element name, a class name, or a name in a comment. Directive is a behavior which should be triggered when specific HTML constructs are encountered in the (HTML) compilation process. The directives can be placed in element names, attributes, class names, as well as comments.
Most directives are restricted to attribute only. E.g., DoubleClick only uses custom attribute directives.
see also What is an angularjs directive?
Define and group Angular things (dependency injection stuff) in modules.
Share data and wrap web server interaction in services.
Extend HTML and do DOM manipulation in directives.
And make Controllers as “thin” as possible.

A good explanation on modules, services, and directives

A Markup Language
HTML is a type of markup language. It encapsulates, or “marks up” data within HTML tags, which define the data and describe its purpose on the webpage. The web browser then reads the HTML, which tells it things like which parts are headings, which parts are paragraphs, which parts are links, etc.

HTML

markup language
CSS is the acronym for Cascade Styling Sheets. In short, it is a sheet style language, which is a type of language you can use to describe the presentation of a markup language – in this case, to describe the movements of HTML.

CSS but I like saying its a styling language

A provider is an object declared to Angular so that it can be injected in the constructor of your components, directives and other classes instantiated by Angular

What is provider

https://blog.angular-university.io/angular-dependency-injection

Angular Dependency Injection: Complete Guide

https://www.tektutorialshub.com/angular/angular-providers/

The four types of of providers

Arrays and objects are reference types and have nothing to do with Angular and everything to do with Javascript

Reference types

You can use the slice method to return a new array

slick()

In Angular, RxJS provides 4 types of subjects to create an observable. Those 4 types are Subject, BehaviorSubject, ReplaySubject and AsyncSubject. They can be distinguished from each other by looking at how they react to subscribe.

In Angular, RxJS provides 4 types of subjects to create an observable

The next() method returns an object with two properties done and value. You can also provide a parameter to the next method to send a value to the generator.

The next() function is a generator function

Observable uses generators to represent values that change over time. Generators enable interaction, animation, realtime data streaming, and all the other exciting, dynamic capabilities of Observable notebooks. The simplest generator is a cell that yields a single value

Are Observables generators?

Generators are functions that return an object which conforms to the Iterable- and Iterator protocols. You might not have heard of these protocols, but, ever since ES2015, they are used to loop over or spread objects like Array, Map, Set, and String.

When would you use a generator function?

In Rails, pluck is a shortcut to select one or more attributes without loading the corresponding records just to filter out the selected attributes. It returns an Array of attribute values

Pluck Method in Ruby

The next method allows you to execute code within your generator. The next method has two properties that re done and value. The value will be whatever is yielded and the done property will evaluate too true or false. True meaning there is not code to run and false meaning their is still code that needs to be run.

More on the Next Method

A promise is used to handle the asynchronous result of an operation. JavaScript is designed to not wait for an asynchronous block of code to completely execute before other synchronous parts of the code can run. With Promises, we can defer the execution of a code block until an async request is completed.

Are promises asynchronous?

In JavaScript, yield is used to pause the execution of a function. When the function is invoked again, the execution continues from the last yield statement. A function that yields values is a generator.

What is yield JavaScript?

When you pass return it will exit you out of the generator function

Passing return when dealing with generators

BehaviorSubject
First of all, you need to have basic knowledge of how the Subject works. When you subscribe to the Subject, you will get every event emitted from the Subject after you subscribed to it. Refer to this video.

But in the BehaviorSubject, it seems to work same as the Subject, except it receives the last event that occurred before the subscription. Refer to this video.

BehaviorSubject and subject

https://learning.edx.org/course/course-v1:HarvardX+CS50+X/block-v1:HarvardX+CS50+X+type@sequential+block@3c550787b1d1470bbdba91d14392bd43/block-v1:HarvardX+CS50+X+type@vertical+block@bf9eb5b02f014c70b314cf0f4e190a34

Harvard course

TypeScript is compiled, rather than interpreted like JavaScript, which means errors can be caught before execution; IDEs that perform background incremental compilation can spot such errors during the coding process

TypeScript is compiled, rather than interpreted like JavaScript

A subject is a special type of Observable which shares a single execution path among the observers which results in a multicast (one to many).
There are four types of Subjects available based on how they behave:
Subject – No initial value or replay available
AsyncSubject – Emits latest values to subscribers on completion of the async task
BehaviouralSubject – requires an initial value and emits current values to new subscribers
ReplaySubject – replays a specified number of last values to new subscribers

The four subjects in Angular

A constructor is a special function that creates and initializes an object instance of a class. In JavaScript, a constructor gets called when an object is created using the new keyword. The purpose of a constructor is to create a new object and set values for any existing object properties

Is constructor a method or function?

build a array of geo location data show me a template/html call new directive that iterates over the array

current task

https://www.pluralsight.com/guides/using-http-with-rxjs-observables

good explanation for observables

The Component ‘LeadsViewOptionsComponent’ is declared by more than one NgModule.

more than one NgModule error

Enums are one of the few features TypeScript has which is not a type-level extension of JavaScript.

Enums allow a developer to define a set of named constants. Using enums can make it easier to document intent, or create a set of distinct cases. TypeScript provides both numeric and string-based enums.

Enums in typescript

https://angular.io/guide/ngmodule-faq

Angular doesn’t like NgModules with circular references, so don’t let Module ‘A’ import Module ‘B’, which imports Module ‘A’.

Angular modules consolidate components, directives, and pipes into cohesive blocks of functionality… Modules can also add services

Angular modules

ng generate module ListMapViewFeatureModule

How to generate a feature module

git reset –soft HEAD^

uncommitted the most recent branch

Gateways should only include logic that supports this translation between domestic and foreign concepts. Any logic that builds on that should be in clients of the gateway.

Gateway Pattern

It’s often useful to add a connection object to the basic structure of the gateway. The connection is a simple wrapper around the call to the foreign coded. The gateway translates its parameters into the foreign signature, and calls the connection with that signature. The connection then just calls the foreign API and returns its result. The gateway finishes by translating that result to a more digestible form. The connection can be useful in two ways. Firstly it can encapsulate any awkward parts of the call to the foreign code, such as the manipulations needed for a REST API call. Secondly it acts as a good point for inserting a Test Double.

Connector Object with the Gateway Pattern

use URLSearchParams to query url

URLSearchParams

How do you create a spy for a function in Jasmine?
We may just want to test its getNextSeason() method without actually calling the nextSeason() method. Jasmine provides the spyOn() function for such purposes. spyOn() takes two parameters: the first parameter is the name of the object and the second parameter is the name of the method to be spied upon.

The first parameter is the name of the object and the second parameter is the name of the method to be spied upon.

How do you use fixtures?
Fixtures are used to feed some data to the tests such as database connections, URLs to test and some sort of input data. Therefore, instead of running the same code for every test, we can attach fixture function to the tests and it will run and return the data to the test before executing each test.

How do you use fixtures?

What is traversing in coding?

Traversing a data structure means: “visiting” or “touching” the elements of the structure, and doing something with the data. (Traversing is also sometimes called iterating over the data structure)

The purpose of a garbage collector is to monitor memory allocation and determine when a block of allocated memory is no longer needed and reclaim it.

What is purpose of garbage collection in typescript?

first commit what you have
change the name to white-pages.connection.ts
& commit it
get rid of @Injectable and commit it
return data.current_residents[0].name will be your gate way

TODO: for Aug 10th

Free balling first and than when you refactor use code organization. do not worry about the beforeEach until the refactor phase/code organization

Initial testing phase [0]

Car class with a function that reports on the engine and another function that swaps the engine so I can report on the engine

https://stackblitz.com/edit/typescript-playground-zaigpq?file=index.ts

// create the Car Class
// constructors to initialize the field values
class Car {
fordReport: string;
swapFordEngine: string;
space: string;

constructor(fordReport: string, space: string, swapFordEngine: string) {
this.fordReport = fordReport;
this.swapFordEngine = swapFordEngine;
this.space = space;
}

engineReport(): string {
return ${this.fordReport};
}
engineSwap(): string {
return ${this.swapFordEngine};
}
}

// create an instance of the car class
const combine = new Car(‘Ford Engine Report’, ‘ ‘, ‘Ford Engine was swaped’);

// call the both methods engineReport() && engineSwap()
const finalReport = combine.engineReport() + combine.space + combine.engineSwap();

console.log(finalReport);

https://stackblitz.com/edit/typescript-playground-zaigpq?file=index.ts

// create the Car Class
// constructors to initialize the field values
class Car {
fordReport: string;
swapFordEngine: string;
space: string;

constructor(fordReport: string, space: string, swapFordEngine: string) {
this.fordReport = fordReport;
this.swapFordEngine = swapFordEngine;
this.space = space;
}

engineReport(): string {
return ${this.fordReport};
}
engineSwap(): string {
return ${this.swapFordEngine};
}
}

// create an instance of the car class
const combine = new Car(‘Ford Engine Report’, ‘ ‘, ‘Ford Engine was swaped’);

// call the both methods engineReport() && engineSwap()
const finalReport = combine.engineReport() + combine.space + combine.engineSwap();

console.log(finalReport);

https://stackblitz.com/edit/typescript-playground-zaigpq?file=index.ts

Javascript is used for web applications that are in the web browser/front end, web servers/ backend, —-> native mobile and desktop applications

Javascript uses

ES is ECMAScript

ECMAScript have to do with the on going javascript updates

Every value javascript is an object except primitive values which is a value that is not an object

Two types of values in Javascript

7 primitive data types exist in JavaScript

Primitive data types

Data Types are determined automatically due to Javascript being a dynamically typed language

Dynamic Data types

The value holds the data type not the variable

Value/Data Types

Focus on 7 and 8 and design, usage, and behavior

Code Wars

Initialize within a typescript constructor

Look it up

object encapsulation

Look it up

Gateways should only include logic that supports this translation between domestic and foreign concepts. Any logic that builds on that should be in clients of the gateway. It’s often useful to add a connection object to the basic structure of the gateway.

The connection is a simple wrapper around the call to the foreign coded. The gateway translates its parameters into the foreign signature, and calls the connection with that signature. The connection then just calls the foreign API and returns its result
white_check_mark
eyes
raised_hands

I use a gateway whenever I access some external software and there is any awkwardness in that external element. Rather than let the awkwardness spread through my code, I contain to a single place in the gateway.

I like these explanations, it helped me see why you structured your gateway and connector the way you did

Gateways && Connection Pattern

We stub out dependencies like fetch Because we changed a behavior it is not a refactor

Notes

expect(actual).toContain(resident1)

toContain should drive you it block title

// Usage: Is based on your test
Also your tests ACT must call to the class its testing against not that classes dependencies

Usage and ACT

During a rebase, each commit is re-applied. So if there is conflict then it can be tedious to resolve.

Using rebase

https://github.com/basarat/typescript-book

Free typescript book

Would you rather have silly errors during development, or insanity-inducing errors in production

Typescript has tooling to catch bugs

[′sü·pər‚set] (computer science) A programming language that contains all the features of a given language and has been expanded or enhanced to include other features as well.

Typescript SuperSet

any opts you out of the typing system by annotating a var with by. The complier will not type check it

any in Typescript

In computer programming, a comment is a programmer-readable explanation or annotation in the source code of a computer program. They are added with the purpose of making the source code easier for humans to understand, and are generally ignored by compilers and interpreters

Why do programmers annotate their code?

The expression implicit used to refer to something done behind the scene, on the other hand, explicit refers to the manual approach of applying things.

implicit typing. vs explicit typing

Finally, let’s talk about the pros of implicit typing
1- Flexibility: this is one of the Typescript compiler strengths, unlike other strongly typed programming languages, we don’t need to define the type for everything in our code.
2- Less Time Consuming: imagine refactoring a codebase with too much explicit typing, It’ll take much time and efforts regarding the change of the time

pros of implicit typing

Interfaces help define the shape of the object that you are applying

Interfaces in Typescript

Strictly typed languages/TS help you gain
Intellisense over whatever you doing with an object

IntelliSense is a general term for various code editing features including: code completion, parameter info, quick info, and member lists. IntelliSense features are sometimes called by other names such as “code completion”, “content assist”, and “code hinting.” or gain a better understanding

Tuple is a fixed length array where each element has it own assigned type

Tuple in Typescript

Generics in typescript

Using a type inside a class or a function:

git checkout staging
git pull origin staging
git checkout lc/white-pages-integration
git merge staging

Show conflicts that need to be resolved

C++ is widely considered an object-oriented programming language. Stroustrup developed C++ by adding object-oriented capabilities to the C programming language. When we say that a language is an object-oriented programming language, we often mean that it supports object-oriented programming

And C sharp is object oriented

https://medium.com/javascript-scene/the-forgotten-history-of-oop-88d71b9b2d9f

Forgotten History of Object oriented programing

TypeScript Generics is a tool which provides a way to create reusable components. It creates a component that can work with a variety of data types rather than a single data type. It allows users to consume these components and use their own types

TypeScript Generics

In TypeScript, generics can be used to better describe the types in classes that are reusable with multiple derived types. Angular does not support instantiation of generic components, but this limitation can be worked around by creating a derived component for each derived type we want to use it with.

What is generic in angular?

The behavior of each operation depends entirely on what value we had in the first place.

Typescript tip

What is a behavior subject in Angular?
Image result for behavior subject angular
BehaviorSubject is both observer and type of observable. BehaviorSubject always need an initial/default value. Every observer on subscribe gets current value. Current value is either latest value emitted by source observable using next() method or initial/default value.

What is a behavior subject in Angular?

What is a behavior subject in Angular? You get the Current value is either latest value emitted by source observable using next() method or initial/default value. This Depends on what the user chooses to do.

Creating reusable components is generics, that is, being able to create a component that can work over a variety of types rather than a single one. This allows users to consume these components and use their own types.

Generics

To put it simply, user authentication has three tasks:

Manage the connection between the human (user) and the website’s server (computer). Verify users’ identities. Approve (or decline) the authentication so the system can move to authorizing the user.

How do I create a user authentication?

The pipe is an instance method

The pipe as an instance method is used as below. We the operators op1, op2 etc are passed as the argument to pipe method. The output of op1 method becomes input of the op2 operator and so forth.

obs.pipe(
op1(),
op2(),
op3(),
op3(),
)

echo and print are more or less the same. They are both used to output data to the screen. The differences are small: echo has no return value while print has a return value of 1 so it can be used in expressions. echo can take multiple parameters (although such usage is rare) while print can take one argument.

Is echo the same as print?

-> is used to call a method, or access a property, on the object of a class

=> is used to assign values to the keys of an array

-> vs =>

DOCKER

NOTES

BusyBox

BusyBox combines tiny versions of many common UNIX utilities into a single small executable. It provides minimalist replacements for most of the utilities you usually find in GNU coreutils, util-linux, etc.

A Linux distribution – often shortened to “Linux distro” – is a version of the open source Linux operating system that is packaged with other components, such as an installation programs, management tools and additional software such as the KVM hypervisor.

A Linux distribution

Docker process

File—>Image—>Container

package.json file/ goes inside Create a file thats code/docker-nod

Look up how to install node with docker/ Front-End Tackle the Front End with Node

With multi-stage builds, you use multiple FROM statements in your Dockerfile. Each FROM instruction can use a different base, and each of them begins a new stage of the build. You can selectively copy artifacts from one stage to another, leaving behind everything you don’t want in the final image.

With multi-stage builds

access from the Docker host is the current issue

current docker problem

Web server works. When someone makes a request to open a webpage, the browser contacts the web server of that website. Then, the web server looks for the requested files for the page and sends it to the browser. This is only the simplest kind of request.

How a web server works and how NGINX works

The example above is also considered as a single thread. A traditional web server creates a single thread for every request, but NGINX does not work that way. As stated before, NGINX performs with an asynchronous, event-driven architecture. It means that similar threads are managed under one worker process, and each worker process contains smaller units called worker connections. This whole unit is then responsible for handling concurrent requests. Worker connections deliver the requests to a worker process, which will also send it to the master process. Finally, the master process provides the result of those requests.

That may sound simple, but one worker connection can take care of up to 1024 similar requests.

More on web server works and how NGINX works

en-juh-neks

NGINX

SID stands for String Identifier. It’s a unique key that is used to identify specific resources. At Twilio, each SID has 34 digits and you can identify the type of SID and the product it’s associated with by the first two characters

SID stands for String Identifier.

The super() method refers to the parent class.

By calling the super() method in the constructor method, we call the parent’s constructor method and gets access to the parent’s properties and methods.

Using Super

Dependency injection (DI) is a pattern where components necessary for your code to run are hot-swappable. This means that your dependencies are not hard-coded in your implementation and can change as your environment changes.

What is dependency injection in React native?

REST is an architectural style (not a protocol like SOAP, not a technology itself or even not an implementation, it is basically a set of a rule), This architecture offers some constraints for using HTTP. If you stick by this architectural constraints while using HTTP, it is called RESTful, otherwise, it is not-RESTful.

non-RESTful vs. RESTful

Image result for REST vs SOAP
SOAP is a protocol, whereas REST is an architectural style

An API is designed to expose certain aspects of an application’s business logic on a server, and SOAP uses a service interface to do this while REST uses URIs.

What is difference between SOAP and REST API?

A Domain Specific Language, or DSL for short, is a language that’s specialized to a particular application domain. In other words, it’s a programming language that’s used for a more specific application or use case than a general-purpose language like Python. For example, regular expressions are a DSL.

What is a Domain Specific Language?

When it comes to the purpose of the programming languages, there are two main types: domain-specific and general-purpose languages.

The two main types of coding languages

The domain-specific languages are used within specific application domains. For example, SQL is a domain-specific language. It’s used mainly for querying data from relational databases. And SQL cannot be used for other purposes.

An example on Domain Specific Language?

arrange
act
assert

TESTING

git remote show origin

Shows all the tracked and non tracked branches

Callbacks take two params: The first param is the value being the first and the key/index second

Callbacks/two params

cp .env.dev .env
comment out env file: env dev in the docker.compose.yml file

network request vs connecting directly to grab data
a network request is more of a strong interface and a connection is just grabbing data

npm install –save-dev @angular-devkit/build-angular
export NODE_OPTIONS=–openssl-legacy-provider
npm install @ngrx/store –legacy-peer-deps

An Anaemic Domain Model is a model with no logic in it. Domain classes look more like a bunch of public setters and getters without domain logic where the client of the class has control over how to instantiate and modify the class. In these models, the client has to interpret the class purpose and use

What is an anemic data model?

Is to combine data and process together

The basic idea of object-oriented design

What is procedural way an object oriented way or a functional way?

Procedural programming organizes the code into chunks of procedures, Object-oriented code restricts the programmer to think of objects which represent a concept or real-world component and Functional programming orients the programmer in the world of pure functions.

Domain-driven design (DDD) is a major software design approach,[1] focusing on modelling software to match a domain according to input from that domain’s experts.[2]

Under domain-driven design, the structure and language of software code (class names, class methods, class variables) should match the business domain. For example, if software processes loan applications, it might have classes like LoanApplication and Customer, and methods such as AcceptOffer and Withdraw.

Domain-driven design is predicated on the following goals:

placing the project’s primary focus on the core domain and domain logic;
basing complex designs on a model of the domain;
initiating a creative collaboration between technical and domain experts to iteratively refine a conceptual model that addresses particular domain problems.
Criticisms of domain-driven design argue that developers must typically implement a great deal of isolation and encapsulation to maintain the model as a pure and helpful construct. While domain-driven design provides benefits such as maintainability, Microsoft recommends it only for complex domains where the model provides clear benefits in formulating a common understanding of the domain

What is DDD

Look up what the field-pro app is doing. Sign in and see what it offers. See what end points are being used. Top three things people are doing in the app and see what end points are getting hit to do those things.

Have the Frontend and the backend setup
My schedule select appointment load appointment
spin up docker frontend and look at he network for the backend activity. In the terminal when see the end point go and look into the backend code where the end point is and report it

Task

The var_dump function displays structured information about variables/expressions including its type and value. Arrays are explored recursively with values indented to show structure. It also shows which array values and object properties are references.

The print_r() displays information about a variable in a way that’s readable by humans. array values will be presented in a format that shows keys and elements. Similar notation is used for objects.

var_dump() vs print_r()

What is the major difference between MySQL and SQL? SQL is a query programming language for managing RDBMS. In contrast, MySQL is an RDBMS (Relational Database Management System) that employs SQL. So, the major difference between the two is that MySQL is software, but SQL is a database language

php vendor/bin/codecept generate:cest api GetCustomerDetail

get_customer_detail

essential configurations and it does not come out of the box —–>env

sunrise-app/src/app/pages/system-production/enphase/enphase.page.html

{
“method”: “get_solar_id”,
“project_id”: “a004T00000X2BBMQA3”
}

ion-header {
width: 400px;
margin: 0 auto;
text-align: center !important;
}

article {
position: absolute;
text-align: center;
top: 30%;
width: 100%;
}

<div>
<p>Sorry for the inconvenience. Were performing some maintenance at the moment.</p>
<p>— Ion Solar Dev Team</p>
</div>

The try statement defines the code block to run (to try).

The catch statement defines a code block to handle any error.

The finally statement defines a code block to run regardless of the result.

The throw statement defines a custom error.

In PHP, mainly four types of errors are considered: Syntax Error or Parse Error. Fatal Error. Warning Error.

PHP, mainly four types of errors

new date and just calling time

’ (dot) operator is PHP’s concatenation operator. Two string operands are joined together (characters of right hand string appended to left hand string) and returns a new string. PHP also has

SQL injection, also known as SQLI, is a common attack vector that uses malicious SQL code for backend database manipulation to access information that was not intended to be displayed. This information may include any number of items, including sensitive company data, user lists or private customer details.

What do SQL injections attack?

Working on persisting through sessions with multiple requests

make a hard reset to the #4 commit

Curl sessions, multiple instantiation with dependency injection, deprecated versions on the server vs local env, not being able to handle multiple sessions,
figuring it all out with expired and refresh tokens. Error handling made it harder because of its lack of reporting. Reimplement on the database and the next thing is to check every endpoint

mysql fieldpro_app -u root -p

mysql fieldpro_app -u fieldpro_user -p

desc app_users

mysql -help

https://developer.android.com/

Make assumptions on their PRs(put yourself in their shoes) 👞 and think how can it be done better
what is the 20 percent will make it 80 percent better

NgClass
DIRECTIVE
Adds and removes CSS classes on an HTML element.

The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during form validations.

A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method Document.getElementsByClassName().

The onblur event occurs when an element loses focus.

The onblur event is often used on input fields.

The onblur event is often used with form validation (when the user leaves a form field).

Project_Id
:
“a008b00001UKhCHAA1”

lc/duplicate-accounts-bug)

front

lc/duplicate-accounts-bu

back

Abdulhai, Sherif - (919) 454-1732

Jonathan Crawford(1) 11:27 and imran abdullah(2) 10:45 && 11:02 created the Abdulhai, Sherif twice
These guys are setters that are on the same team Raleigh Sales team
Look for images within the account
Do they have the same address

Once the the lead gets converted to a customer and the calendar is filled out it does not show up unless refreshed. So users might be making another one and seeing it.

held date setters get a part of what they are owed

contract execution date sales and setter gets payed out

Notes

on line 97

Clear and descriptive endpoints in POSTMAN. Helps with Testing and finding errors. Testflight does not replace POSTMAN

Separate PRs for white spaces because it makes the really hard to read in PRs

Separate your commits and separate PRs if the task is very large. In Jira break up the functionality/task with in it being one PR. If not a huge PR could result in us missing mistakes and not seeing Edge cases.

Make the title and mainly the background much more descriptive to avoid edge cases

Prove and show you tested it

var arr = [2, 5, 6, 3, 8, 9];
var val,j=0;

// use of push() method    
for(j=0; j<4 ; j++){
  var y = arr[j];
  var x = y * j;
  val = arr.push(x);
}
// printing element
console.log( arr );    // [2, 5, 6, 3] which is related to j<4    // 0, 1, 2, 3 = Incrementing pattern from j<4    // 0: 0 * 0 = 0    // 1: 1 * 5 = 5    // 2: 2 * 6 = 12    // 3: 3 * 3 = 9

Binding types other than interpolation have a target name to the left of the equal sign. The target of a binding is a property or event, which you surround with square bracket ([ ]) characters, parenthesis (( )) characters, or both ([( )]) characters.

The binding punctuation of [], (), [()], and the prefix specify the direction of data flow.

Use [] to bind from source to view
Use () to bind from view to source
Use [()] to bind in a two-way sequence of view to source to view

Use interpolation to display the value of this variable in the corresponding component template:

content_copy

<h3>Current customer: {{ currentCustomer }}</h3>

Appointment = Schedule or Disposition
Schedule a number of schedules pertaining to its number per day, yesterday,weekly, monthly, ect
Deposition is held Apts or not held Apts

DNS pins are the only pin that is not a held pin. All the Scheduling info it held in Sales Force

You are grabbing the whole teams Appointments/Schedules

dev.iondeveloper.com

{
“method”: “get_sales_team_qs”,
“timeframe”: “TODAY”,
“startDate”: “2020-01-01”,
“endDate”: “2020-01-01”
}

{
“method”: “get_knock_stats”
}

Appointment_Held_Date_Time_Stamp__c

SF Call

getQuickStatsForIndividual
getAllQSData

Return_Appointment_Date_Time__c its in UTC and convert moutain standard time

Use intelligent caching strategies: Use intelligent caching strategies, such as dynamic caching and stale-while-revalidate, to balance the need for fresh data with the need for quick access to pre-cached resources.

—Customize the pre-caching strategy based on your specific requirements.—

CACHING

Repos is in memory and logic is in Memory. This is important to understand when talking about pre-caching or you can say caching. Also caching in memory vs from a Redis server. Caching in memory in the local browser is MUCH FASTER. This helps your pages load faster and your server does not get bogged down. Developers control over the cache, meaning they can determine when and how long a file is cached as well as serve it to the browser without going to the network, meaning it can be used to create web apps that work offline.

$start_date = “2014-01-01T00:00:00.000Z”;
$end_date = date(“Y-m-d”).”T23:59:59.999Z”;

$startDate = new DateTime($body[‘startDate’]);
$startDate = $startDate->format(‘Y-m-d’);

			$endDate = new DateTime($body['endDate']);
			$endDate = $endDate->format('Y-m-d');

$start = date(‘Y-m-d\TH:i:s\Z’, strtotime($res[0]->Return_Appointment_Date_Time__c . ‘ 00:00:00’));
$end = date(‘Y-m-d\TH:i:s\Z’, strtotime($res[0]->Return_Appointment_Date_Time__c . ‘ 23:59:59’));
// $dateRange = $this->formatDateRange($dateLiteral, “Return_Appointment_Date_Time__c”, $start, $end);

	// $dateRange = $this->formatDateRange($dateLiteral, "Return_Appointment_Date_Time\_\_c", date('Y-m-d', $start), date('Y-m-d', $end));
	// $start = $end = strtotime($res[0]->Return_Appointment_Date_Time\_\_c);
	// $end = strtotime($res[0]->Return_Appointment_Date_Time\_\_c . ' 23:59:59');
	$dateRange = $this->formatDateRange($dateLiteral, "Return_Appointment_Date_Time\_\_c", date('Y-m-d H:i:s', $start), date('Y-m-d H:i:s', $end));

	// $appointmentDate = new DateTime($res[0]->Return_Appointment_Date_Time\_\_c);
	// $appointmentDate = $appointmentDate->format('Y-m-d');
	// $start = strtotime($appointmentDate);
	// $end = strtotime($appointmentDate . ' 23:59:59');
	// $dateRange = $this->formatDateRange($dateLiteral, "Return_Appointment_Date_Time\_\_c", date('Y-m-d H:i:s', $start), date('Y-m-d H:i:s', $end));

onGoClick() {
let start = moment(this.startDate).format(“YYYY-MM-DD”);
let end = moment(this.endDate).format(“YYYY-MM-DD”);

this.utilities.showToast("Please wait...");

// this.selectedPeriod.periodNew = 'CUSTOM';
this.fetchQuickStats();   }

// Get Return_Apt_held/Total Appointments
// $start = date(“Y-m-d\TH:i:s\Z”, strtotime($start));
// $end = date(“Y-m-d\TH:i:s\Z”, strtotime($end));
// $start = date(“Y-m-d\TH:i:s\Z”, $start);
// $end = date(“Y-m-d\TH:i:s\Z”, $end);

Add alert for self Gen so that they have a disposition. Change the alert time from being the day after to 4 hours after the appointment so that when they disposition it. Thats for all appointments. There is self Gen and setters

SELECT SalesPerson__r.Name, SalesPerson__r.Active__c FROM Project__c

SELECT SalesPerson__c, SalesPerson__r.Active__c FROM Project__c WHERE SalesPerson__r.Active__c = false

If all the values are returning as false when the Salesperson is active, then there may be an issue with the way the Active__c field is being evaluated in the backend code.

Here’s what you can do to troubleshoot:

Check the data in Salesforce to ensure that the Active__c field is being set correctly for each Salesperson.
Double-check the code to make sure that the logic for evaluating the Active__c field is correct. One possibility is that the value is being inverted somewhere in the code, causing true to be interpreted as false and vice versa.
Add some debug statements to the code to print out the value of the Active__c field for each Salesperson, and see if it matches what you expect based on the data in Salesforce. This can help pinpoint where the issue is occurring.

Gertrude Gutierrez

Update team and individual stats RFP stat to only return self sets

sudo xcode-select –reset

platform :ios, ‘14.0’
use_frameworks!

workaround to avoid Xcode caching of Pods that requires
# Product -> Clean Build Folder after new Cordova plugins installed
# Requires CocoaPods 1.6 or newer
install! ‘cocoapods’, :disable_input_output_paths => true

def capacitor_pods
pod ‘Capacitor’, :path => ‘../../node_modules/@capacitor/ios’
pod ‘CapacitorCordova’, :path => ‘../../node_modules/@capacitor/ios’
pod ‘CapacitorCommunityIntercom’, :path => ‘../../node_modules/@capacitor-community/intercom’
pod ‘CapacitorApp’, :path => ‘../../node_modules/@capacitor/app’
pod ‘CapacitorBrowser’, :path => ‘../../node_modules/@capacitor/browser’
pod ‘CapacitorCamera’, :path => ‘../../node_modules/@capacitor/camera’
pod ‘CapacitorClipboard’, :path => ‘../../node_modules/@capacitor/clipboard’
pod ‘CapacitorGeolocation’, :path => ‘../../node_modules/@capacitor/geolocation’
pod ‘CapacitorHaptics’, :path => ‘../../node_modules/@capacitor/haptics’
pod ‘CapacitorKeyboard’, :path => ‘../../node_modules/@capacitor/keyboard’
pod ‘CapacitorShare’, :path => ‘../../node_modules/@capacitor/share’
pod ‘CapacitorStatusBar’, :path => ‘../../node_modules/@capacitor/status-bar’
pod ‘CordovaPlugins’, :path => ‘../capacitor-cordova-ios-plugins’
end

target ‘App’ do
capacitor_pods
# Add your Pods here
end

heroku logs -r staging
heroku logs -t -r staging
heroku login
heroku -version

Manually Approve an App Device for a Sales Rep
Fix Customer Who Isn’t Getting a Password Reset Email

When using NULL or “false” to represent a falsey value, it’s important to ensure that the comparison operators are appropriate. In your code, you’re using the != operator to check if Proposal_Requested_Date__c is not equal to “false”. This comparison will return true if Proposal_Requested_Date__c is NULL or false, which may not be what you intended. It may be better to use strict equality comparison (!== and ===) instead of loose equality comparison (!= and ==) to avoid any unexpected type coercion.

It’s also important to ensure that the data types of the values you’re comparing are consistent. For example, Financing__r->Contract_Stage_Complete__c may be returning a boolean value while you’re checking for NULL. If this is the case, the condition will always evaluate to false. Double-check the data types returned by the Salesforce API and adjust your code accordingly.

Another thing to consider is that the code currently assumes that the lifecycle stages are sequential and that each stage is completed before moving to the next one. However, this may not always be the case, especially if there are multiple parallel processes happening at the same time. It may be better to use a more flexible approach that allows for multiple stages to be in progress simultaneously.

Lastly, you may want to consider adding more error handling to the code to handle any unexpected exceptions that may occur during the API calls or data processing. This can help prevent your application from crashing and provide better feedback to the end user.

With these considerations in mind, you may want to review your implementation and make any necessary adjustments to ensure that it works as expected.

Based on the code snippet, the issue seems to be related to how the NULL value is handled. In PHP, NULL is a special value that represents the absence of a value.

In the given code, if a value is set to NULL, the code does not handle this value and does not update the lifecycle accordingly. This is because the code only checks for non-null values when updating the lifecycle.

To fix this issue, you need to add a check for NULL values in each condition where the code is checking for non-null values. For example, instead of using if($res[0]->Proposal_Requested_Date__c != NULL), you should use if($res[0]->Proposal_Requested_Date__c !== NULL). The !== operator checks for strict equality, including the type of the value, which includes NULL.

There are several benefits to creating your own libraries in Angular:

Reusability: Libraries allow you to create reusable components, services, and other functionality that can be used across multiple projects. This can save a significant amount of development time, as you don’t have to recreate the same functionality every time you start a new project.

Consistency: By creating your own libraries, you can ensure that your code is consistent across different projects. This can make it easier to maintain and update your codebase over time.

Scalability: Libraries can help you manage the complexity of larger projects by breaking them down into smaller, more manageable pieces. This can make it easier to add new features and functionality as your project grows.

Maintainability: Libraries can help you keep your codebase organized and maintainable by enforcing separation of concerns and providing clear boundaries between different parts of your application.

Collaboration: By creating your own libraries, you can share your code with other developers and collaborate more easily on projects. This can help you build better software faster, as you can leverage the expertise and experience of others in your team or community.

Overall, creating your own libraries in Angular can help you build better software faster, improve code quality and maintainability, and collaborate more effectively with others in your team or community.

An Angular library can be defined as a collection of objects that provide reusable functionality for Angular applications. These objects can include components, services, directives, pipes, and other elements of an Angular application.

However, it’s important to note that an Angular library is not just a collection of objects - it’s also a packaged and distributable unit of code that can be published to a package registry such as npm. This packaged form of the library includes the compiled code and any dependencies needed for the library to work.

When you create an Angular library, you define a public API that exposes the objects and functionality that you want other developers to use. This API is defined in the public_api.ts file, which is the entry point to your library.

Overall, an Angular library can be thought of as a collection of objects, but it’s also a packaged and distributable unit of code with a defined public API.

“Centric Maven” is not a commonly used phrase, but it can be interpreted as a person or business that is an expert in a particular area or industry and is focused on delivering customer-centric solutions or services.

The term “centric” refers to being centered or focused on a particular thing or group, while “maven” refers to someone who is highly knowledgeable or skilled in a particular field.

So, together, “Centric Maven” can be understood as a business or individual that is highly skilled and focused on delivering solutions or services that are centered around the needs and satisfaction of their customers

To find micro businesses that may need your customer service services, you can try the following strategies:

Online search: Use search engines like Google to find small e-commerce businesses that may need customer service support. Use keywords like “small e-commerce business” or “micro business” to narrow down your search.

Social media: Check social media platforms like LinkedIn and Twitter for small business owners who may be looking for customer service support. You can also join groups and forums related to e-commerce and small business to connect with potential clients.

Local business directories: Check local business directories or chambers of commerce to find small businesses in your area that may need customer service support.

Networking: Attend networking events or conferences related to e-commerce or small business to meet potential clients and make connections.

Cold calling/emailing: You can also reach out to small businesses directly via email or phone to offer your services and see if they have any customer service needs.

Remember to tailor your approach to each potential client and demonstrate how your services can benefit their business. Be prepared to answer questions about your experience, pricing, and availability.

Automating your clients’ customer service can help you create passive income by reducing the amount of time and effort you need to invest in each client. Here are some steps you can take to automate your clients’ customer service:

Use chatbots: Chatbots are automated systems that can answer common customer inquiries and provide support 24/7. You can use chatbots to handle basic customer inquiries and free up your time to focus on more complex issues.

Implement an FAQ section: Create a comprehensive FAQ section on your client’s website or app to answer common customer questions. This can reduce the number of inquiries your client receives and help customers find answers to their questions quickly and easily.

Use pre-written responses: Create a library of pre-written responses to common customer inquiries that you can quickly copy and paste when responding to emails or social media messages.

Use ticketing systems: Implement a ticketing system to track customer inquiries and ensure that they are addressed in a timely manner. You can set up automated responses to let customers know that their inquiry has been received and is being addressed.

Use customer feedback tools: Implement customer feedback tools to automatically collect feedback from customers and identify areas for improvement in your client’s customer service process.

By implementing these strategies, you can automate many of the routine tasks involved in customer service and free up your time to focus on higher-level tasks and growing your business.

Yes, Pannellum is a JavaScript library that can handle 360 panoramic photos in various formats, including the .360 file format used by the GoPro MAX camera to save its 360 photos.

Pannellum supports multiple panoramic image formats such as equirectangular, cubemap, and multiresolution images, including the proprietary .360 format used by the GoPro MAX. To display a 360 photo captured by the GoPro MAX using Pannellum, you will need to convert the .360 file into a format that can be read by Pannellum, such as the equirectangular format.

To convert the .360 file to an equirectangular format, you can use the GoPro VR Reframe software, which is available for free on the GoPro website. Once you have converted the .360 file to an equirectangular format, you can then use Pannellum to display the 360 panoramic photo on your website or application.

The error message suggests that you haven’t created a Cloud Firestore database in your Firebase project yet. To fix this error, follow these steps:

The error message suggests that the Cloud Storage bucket you are trying to use in your Firebase project requires a location setting to be configured, but it has not been set yet.

If you are using Firebase CLI to deploy your codebase to Firebase, and the terminal is asking whether to initialize a new codebase or overwrite an existing one, it means that Firebase CLI has detected that you have not previously deployed any codebase to your Firebase project.

If you are not seeing the “Cloud Resource Location” option in your Firebase project settings, it could be because your project was created before Google started enforcing regionalization of resources. In that case, you can try creating a new Firebase project with regionalization enabled and migrate your existing resources to the new project.

Path based redirection
CORS
NGINX

endpoint: new URL(‘https://api.iondeveloper.com/fieldpro/latest/admin’), endpoint: new URL(‘https://dev.iondeveloper.com/api/fieldpro/’),

<?php

header(“Access-Control-Allow-Origin: *”);
header(“Access-Control-Allow-Headers: origin, content-type, accept”);
header(“Access-Control-Allow-Methods: GET, POST, PUT, DELETE”);
header(“Content-Type: application/json”);

include_once(‘../_includes/verifyApiKey.php’);

require_once(‘./controllers/TemplateController.php’);
require_once(‘./controllers/CategoryController.php’);
require_once(‘./controllers/QuestionController.php’);
require_once(‘./controllers/ResponseController.php’);
require_once(‘./controllers/WorkTypeController.php’);

$postBody = file_get_contents(‘php://input’);
$body = json_decode($postBody, true);
switch ($_SERVER[‘REQUEST_METHOD’]) {
case ‘OPTIONS’:
return;
break;
case ‘GET’:
switch ($_REQUEST[‘method’]) {
case ‘get_active_templates’:
$template = new TemplateController();
echo json_encode($template->getActiveTemplates());
return;
break;
case ‘get_template’:
$template = new TemplateController();
echo json_encode($template->getTemplate($_REQUEST[‘templateId’]));
return;
break;
case ‘get_complete_template’:
$template = new TemplateController();
echo json_encode($template->getCompleteTemplate($_REQUEST[‘id’]));
return;
break;
case ‘get_question_categories’:
$category = new CategoryController();
echo json_encode($category->getCategories($_REQUEST[‘templateId’]));
return;
break;
case ‘get_template_questions’:
$question = new QuestionController();
echo json_encode($question->getTemplateQuestions($_REQUEST[‘templateId’]));
return;
break;
case ‘get_question_types’:
$question = new QuestionController();
echo json_encode($question->getQuestionTypes());
return;
break;
case ‘get_response’:
$response = new ResponseController();
echo json_encode($response->getResponse($_REQUEST[‘id’]));
return;
break;
case ‘get_responses’:
$response = new ResponseController();
echo json_encode($response->getResponses($_REQUEST[‘page’]));
return;
break;
case ‘get_response_photos’:
$response = new ResponseController();
echo $response->getResponsePhotos($_REQUEST[‘id’]);
return;
break;
case ‘search_responses’:
$response = new ResponseController();
echo json_encode($response->searchResponses($_REQUEST[‘term’]));
return;
break;
case ‘get_work_types’:
$worktype = new WorkTypeController();
echo json_encode($worktype->getWorkTypes());
return;
break;
case ‘get_sf_work_types’:
$worktype = new WorkTypeController();
echo json_encode($worktype->getSFWorkTypes());
return;
break;
default:
$return[‘success’] = false;
$return[‘message’] = ‘Invalid or no API method sent’;
echo json_encode($return);
return;
break;
}
return;
break;

case 'POST':
    switch ($_REQUEST['method']) {
        case 'create_template':
            $template = new TemplateController();
            echo json_encode($template->createTemplate($body));
            return;
            break;
        case 'create_question_category':
            $category = new CategoryController();
            echo json_encode($category->createCategory($body));
            return;
            break;
        case 'create_question_categories':
            $category = new CategoryController();
            echo json_encode($category->createCategories($body));
            return;
            break;
        case 'create_question':
            $question = new QuestionController();
            echo json_encode($question->createQuestion($body));
            return;
            break;
        case 'create_questions':
            $question = new QuestionController();
            echo json_encode($question->createQuestions($body));
            return;
            break;
        case 'create_work_type':
            $worktype = new WorkTypeController();
            echo json_encode($worktype->mapWorkType($body));
            return;
            break;
        case 'create_work_types':
            $worktype = new WorkTypeController();
            echo json_encode($worktype->mapWorkTypes($body));
            return;
            break;
        default:
            $return['success'] = false;
            $return['message'] = 'Invalid or no API method sent';
            echo json_encode($return);
            return;
            break;
    }
    return;
    break;

case 'PUT':
    switch ($_REQUEST['method']) {
        case 'update_template':
            $template = new TemplateController();
            echo json_encode($template->updateTemplate($body));
            return;
            break;
        case 'deactivate_template':
            $template = new TemplateController();
            echo json_encode($template->deactivateTemplate($body));
            return;
            break;
        case 'updated_work_type':
            $worktype = new WorkTypeController();
            echo json_encode($worktype->mapWorkType($body));
            return;
            break;
        default:
            $return['success'] = false;
            $return['message'] = 'Invalid or no API method sent';
            echo json_encode($return);
            return;
            break;
    }
    return;
    break;

case 'DELETE':
    switch ($_REQUEST['method']) {
        case 'delete_work_type':
            $worktype = new WorkTypeController();
            echo json_encode($worktype->deleteWorkType($_REQUEST['id']));
            return;
            break;
        case 'delete_work_type_group':
            $worktype = new WorkTypeController();
            echo json_encode($worktype->deleteWorkTypeGroup($_REQUEST['id']));
            return;
            break;
        default:
            $return['success'] = false;
            $return['message'] = 'Invalid or no API method sent';
            echo json_encode($return);
            return;
            break;
    }
    return;
    break;

default:
    $return['success'] = false;
    $return['message'] = 'Invalid or no API method sent';
    echo json_encode($return);
    return;
    break; }

<ion-header>
<ion-toolbar>
<ion-buttons>
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-buttons *ngIf="isNotSyncedImage" slot="end" (click)="removeImage()">
<ion-icon></ion-icon>
</ion-buttons>
<ion-title>Image Details</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<ion-slides #slides pager="true" (ionSlidesDidLoad)="slideLoad()" style="vertical-align: middle"
(ionSlideDidChange)="slideChanged()">
<ion-slide *ngFor="let image of gallery[0]">
<img [src]="getSecuredImage(image.name)" (click)="showPanoramaViewer(image.name)" />
</ion-slide>
</ion-slides>
</ion-content>

what does the cordova-plugin-telerik-imagepicker do

In the provided code snippet, the function energyLifetime has a parameter $params that is set to null by default. This means that if no value is passed for $params when calling the energyLifetime function, it will be assigned the value null.

Setting the default value of a parameter to null provides flexibility when calling the function. If the caller wants to specify specific parameters for the API request, they can pass them as an argument when calling the function. If no specific parameters are needed, the function can be called without passing any arguments, and the default value of null will be used.

For example, the function can be called in the following ways:

energyLifetime(); - In this case, $params will be null, and the API request will be made without any additional parameters.
energyLifetime($specificParams); - Here, $params will take the value of $specificParams, and the API request will include the specified parameters.
By allowing $params to be set to null, the function provides flexibility for handling different scenarios and allows the caller to customize the parameters based on their requirements.

Now you have two generic methods getEnphaseData and getSolarData that handle the API calls. The other methods (getEnphaseSystemInfo, getEnphaseInventory, etc.) utilize these generic methods by passing the appropriate parameters. This way, you have consolidated the API calls into two methods, reducing code duplication and improving maintainability. for system-data.ts

Idea Gun options; Pulls all the guns that exist and gives you common prices, reviews, and specs. Cons and Pros.

Disabling OPTIONS requests altogether is not recommended, as OPTIONS requests play a crucial role in the HTTP protocol and the CORS mechanism. The OPTIONS request is part of the CORS preflight process, which allows servers to specify which origins, methods, and headers are allowed for cross-origin requests.

By disabling OPTIONS requests and treating all requests as GET requests, you may encounter several issues:

Cross-origin requests may fail: Without the OPTIONS request and the CORS preflight process, browsers may block cross-origin requests. This can lead to security restrictions and prevent your application from accessing resources from different domains.

Limited functionality: OPTIONS requests provide important information about the server’s capabilities and supported methods. By treating all requests as GET, you might miss out on the ability to perform other types of requests, such as POST, PUT, or DELETE, which may be necessary for certain operations.

Security risks: The CORS mechanism is designed to protect users from cross-origin attacks. By bypassing the OPTIONS request and allowing all requests as GET, you may introduce security vulnerabilities, as your server won’t have the opportunity to validate and enforce CORS policies.

It’s important to understand and properly handle OPTIONS requests within your server-side code to ensure secure and reliable cross-origin communication.

By disabling OPTIONS requests and treating all requests as GET requests, you may encounter several issues:

It’s important to understand and properly handle OPTIONS requests within your server-side code to ensure secure and reliable cross-origin communication.

enphase.page.ts
import { Component, ElementRef, Input, OnInit, ViewChild } from ‘@angular/core’;
import { SystemData } from ‘src/app/providers/system-data’;

import { Chart } from ‘chart.js’;
import * as moment from ‘moment’;
import { ActivatedRoute } from ‘@angular/router’;
import { UtilityClass } from ‘src/app/utils/UtilityClass’;
import { InventoryModal } from ‘./inventory/inventory.modal’;

@Component({
selector: ‘app-enphase’,
templateUrl: ‘./enphase.page.html’,
styleUrls: [’./enphase.page.scss’],
})
export class EnphasePage implements OnInit {

@ViewChild('barCanvas', { static: false }) barCanvas: ElementRef;
barChart: any;

private enphaseId;
public summary = [];
public summarymwh = 0;
public timePeriod = 'days';

public lastSevenDays = [];
public sevenLabels = [];

public monthView = [];
public monthLabels = [];

private yearData = [];
private yearLabels = [];

public customView = [];
public customLabels = [];

public startDate;
public endDate;
public isCustom = false;
public errorLabel = "";

public lastSevenDaysTotal = 0;
public currentMonthTotal = 0;
public yearTotal = 0;

private sInventory;

constructor(private route: ActivatedRoute,
    private systemData: SystemData,
    private utils: UtilityClass) { }

ngOnInit() {
    this.enphaseId = this.route.snapshot.paramMap.get('eid');
}

ngAfterViewInit() {

    this.initiateDatas();

    this.barChart = new Chart(this.barCanvas.nativeElement, {
        type: 'bar',
        data: {
            labels: [],
            datasets: [{
                label: 'kWh',
                data: [],
                backgroundColor: '#2196F3',
                borderColor: ['rgba(fff,fff,fff,1)'],
                borderWidth: 1,
                radius: 0
            }]
        },
        options: {
            animation: {
                duration: 1500
            },
            maintainAspectRatio: false,
            legend: {
                display: false
            },
            scales: {
                xAxes: [{
                    display: true,
                    ticks: {
                        autoSkip: true,
                        maxTicksLimit: 12
                    }
                }],
                yAxes: [{
                    display: true,
                    ticks: {
                        beginAtZero: true
                    },
                    scaleLabel: {
                        labelString: "Values in kWh",
                        display: true
                    },
                }]
            }
        }
    });
}

ionViewDidEnter() {
    // Update the chart data and display the graph
    this.barChart.data.labels = this.sevenLabels;
    this.barChart.data.datasets[0].data = this.lastSevenDays;
    this.barChart.update();
}

setTimePeriod(period) {
    this.isCustom = false;
    if (period == 'days') {
        this.barChart.data.labels = this.sevenLabels;
        this.barChart.data.datasets[0].data = this.lastSevenDays;
        this.barChart.update();
    } else if (period == 'month') {
        this.barChart.data.labels = this.monthLabels;
        this.barChart.data.datasets[0].data = this.monthView;
        this.barChart.update();
    } else if (period == 'year') {
        this.barChart.data.labels = this.yearLabels;
        this.barChart.data.datasets[0].data = this.yearData;
        this.barChart.update();
    }
}

initiateDatas() {
    this.systemData.getEnphasePreviousSeven(this.enphaseId)
        .subscribe(data => {
            let production = [];
            if (data.production && data.production.length > 0) {
                for (let i = 0; i < data.production.length; i++) {
                    let prodValue = this.tokWh(data.production[i]);
                    this.lastSevenDaysTotal += data.production[i];
                    production.push(prodValue);
                }
                this.lastSevenDaysTotal = this.tokWh(this.lastSevenDaysTotal);
            }

            this.sevenLabels = this.Last7Days(data.start_date);
            this.lastSevenDays = production;
            this.barChart.data.labels = this.sevenLabels;
            this.barChart.data.datasets[0].data = this.lastSevenDays;
            this.barChart.update();
        });

    this.systemData.getEnphaseEnergyLife(this.enphaseId)
        .subscribe(data => {
            if (data == null) return

            let production = [];
            let labelsArray = [];
            if (data.production) {
                let monthYear = moment().format("YYYY-MM");
                let totalDays = moment(monthYear, "YYYY-MM").daysInMonth();
                let prodCount = 0;
                for (let day = 1; day <= totalDays; day++) {
                    if (prodCount < data.production.length) {
                        let prodValue = this.tokWh(data.production[prodCount]);
                        this.currentMonthTotal += data.production[prodCount];
                        production.push(prodValue);
                        prodCount++;
                    } else production.push(0);

                    labelsArray.push(day);
                }
                this.currentMonthTotal = this.toMWh(this.currentMonthTotal);
            }

            this.monthLabels = labelsArray;
            this.monthView = production;
            if (this.monthView.length < 1)
                this.monthView.push(0);

            this.barChart.data.labels = this.sevenLabels;
            this.barChart.data.datasets[0].data = this.lastSevenDays;
            this.barChart.update();
        });

    this.systemData.getEnphaseYearly(this.enphaseId)
        .subscribe(data => {
            console.log("Yearly", data)
            this.yearLabels = ['Jan', 'Feb', "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

            let arrayData = [];
            let yearCount = 0;
            for (let i = 0; i < 12; i++) {
                arrayData.push(this.tokWh(data[i]));
                this.yearTotal += data[i];
                if (data[i] > 0) {
                    yearCount++;
                }
            }

            this.yearData = arrayData;
            this.yearTotal = this.toMWh(this.yearTotal);
        });

    this.startDate = moment().startOf('month').format('YYYY-MM-DD');
    this.endDate = moment().format('YYYY-MM-DD');
}

Last7Days(date) {
    let sevenArray = [];
    for (var i = 0; i < 7; i++) {
        let sDate = moment(date).add(i, "days");
        sevenArray.push(sDate.format("DD/MM"));
    }
    return sevenArray;
}

getGraphData(start, end, prod, startProd, labelFormat) {
    let labels = [];
    let datas = [];

    let toContinue = true;
    let startPush = false;
    let currD = moment(start);
    let prodCount = 0;
    while (toContinue) {
        if (currD.isSame(startProd)) startPush = true;

        if (startPush && prodCount < prod.length) {
            let prodValue = this.tokWh(prod[prodCount]);
            datas.push(prodValue);
            prodCount++;
        } else datas.push(0);

        labels.push(currD.format(labelFormat));

        if (currD.isSame(end)) toContinue = false;
        currD.add(1, "days");
    }

    return {
        label: labels,
        data: datas
    }
}

roundToTwoDec(num) {
    return Math.round(parseFloat(num) * 100) / 100;
}

roundToThreeDec(num) {
    return Math.round(parseFloat(num) * 1000) / 1000;
}

tokWh(watts) {
    return this.roundToTwoDec(watts / 1000);
}

toMWh(watts) {
    let kWh = watts / 1000;
    return this.roundToThreeDec(kWh / 1000);
}

getMomentDate(mDate, format) {
    if (mDate) return moment(mDate * 1000).format(format)
    else return "";
}

}

system.data.ts
import { Injectable } from ‘@angular/core’;
import { Observable, of } from ‘rxjs’;
import { tap } from ‘rxjs/operators’;

import { IonSolarService } from ‘../services/ion-solar.service’;

@Injectable({
providedIn: ‘root’
})
export class SystemData {
private urlEndpointEnphase = “enphase/”;
private urlEndpointSolar = “solaredge/index.php”;

constructor(public ionService: IonSolarService) {}

private cache: { [key: string]: any } = {};

getEnphaseYearly(enphaseId): Observable<any> {
    const cacheKey = `enphaseYearly_${enphaseId}`;

    if (this.cache[cacheKey]) {
        return of(this.cache[cacheKey]);
    } else {
        const params = { method: 'year', enphase_id: enphaseId };
        return this.ionService.makeGETRequest(this.urlEndpointEnphase, params).pipe(
            tap(response => {
                if (response) {
                    this.cache[cacheKey] = response;
                }
            })
        );
    }
}

getEnphaseEnergyLife(enphaseId): Observable<any> {
    const cacheKey = `enphaseEnergyLife_${enphaseId}`;

    if (this.cache[cacheKey]) {
        return of(this.cache[cacheKey]);
    } else {
        const params = { method: 'energyLifetime', enphase_id: enphaseId };
        return this.ionService.makeGETRequest(this.urlEndpointEnphase, params).pipe(
            tap(response => {
                if (response) {
                    this.cache[cacheKey] = response;
                }
            })
        );
    }
}

getEnphasePreviousSeven(enphaseId): Observable<any> {
    const cacheKey = `enphasePreviousSeven_${enphaseId}`;

    if (this.cache[cacheKey]) {
        return of(this.cache[cacheKey]);
    } else {
        const params = { method: 'previousSeven', enphase_id: enphaseId };
        return this.ionService.makeGETRequest(this.urlEndpointEnphase, params).pipe(
            tap(response => {
                if (response) {
                    this.cache[cacheKey] = response;
                }
            })
        );
    }
}

getSolarMonthly(solarId) {
    let params = { method: 'month', solar_edge_id: solarId }
    return this.ionService.makeGETRequest(this.urlEndpointSolar, params);
}

getSolarYearly(solarId) {
    let params = { method: 'year', solar_edge_id: solarId }
    return this.ionService.makeGETRequest(this.urlEndpointSolar, params);
}

getSolarSeven(solarId) {
    let params = { method: 'seven', solar_edge_id: solarId }
    return this.ionService.makeGETRequest(this.urlEndpointSolar, params);
}

}

To Native Cordova -> File resolveLocalFileSystemURI File626000404 [“options”: [file:///var/mobile/Containers/Data/Application/2C492E68-A6C4-40B5-99F4-C91C31C37C61/tmp/cdv_photo_106.jpg]]

If you’re trying to load images from the user’s gallery, it’s important to note that the Pannellum viewer may have limitations or restrictions when it comes to loading local files directly from the device. Web browsers typically have security restrictions that prevent direct access to local file paths due to potential security risks.

To work with local files from the user’s gallery, you’ll need to use appropriate methods or plugins to access the file’s content and convert it into a format that can be used by the Pannellum viewer. This may involve reading the file using the File API, FileReader, or utilizing Cordova plugins specifically designed for accessing files on mobile devices.

Here’s an example of how you could modify the getSecuredImage method to handle loading images from the user’s gallery using the cordova-plugin-telerik-imagepicker plugin:

The file file://var/mobile/Containers/Data/Applications/!31D9C72-197f-4681-BF45-D4D32830787/tmp/cdv_photo_219.jpg could not be accessed

dataUrl The url starting with ‘data:image/jpeg;base64,’ and the base64 encoded string representation of the image, if using CameraResultType.DataUrl.

openMultiplePhotoGallery

openMultiplePhotoGallery(successCallback, errorCallback) {
let options: ImagePickerOptions = {
maximumImagesCount: 40,
quality: 80,
outputType: 0,
};

    this.imagePicker.requestReadPermission().then((res2) => {
      this.imagePicker.getPictures(options).then((filePaths) => {
        const convertedImages = [];
        const promises = [];
  
        for (let i = 0; i < filePaths.length; i++) {
          const filePath = filePaths[i];
          const fileName = filePath.substring(filePath.lastIndexOf('/') + 1);
          const fileExt = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase();
  
          if (fileExt !== 'jpg' && fileExt !== 'jpeg') {
            const promise = this.convertToJpg(filePath).then((jpgFilePath) => {
              convertedImages.push(jpgFilePath);
            });
            promises.push(promise);
          } else {
            convertedImages.push(filePath);
          }
        }
  
        Promise.all(promises).then(() => {
          successCallback(convertedImages);
        });
      }, (err) => {
        errorCallback(err);
      });
    }).then(data => {
      // Handle the read permission
    }, (err) => {
      // Show the permissions alert
      if (this.platform.is('ios')) {
        this.createAlert(null, "FieldPro needs permissions to work.<br/><br/>Go to Settings, and scroll down to the list of apps, tap on FieldPro.<br/>Give permissions to Photos, Microphone, and Camera.", ['OK']);
      } else {
        this.createAlert(null, "FieldPro needs permissions to work.<br/><br/>Go to Settings -> Apps -> Field Pro.<br/>Give permissions to Files and Camera.", ['OK']);
      }
    });
  }
  
  convertToJpg(filePath) {
    return new Promise((resolve, reject) => {
      window['resolveLocalFileSystemURL'](filePath, (fileEntry) => {
        fileEntry.file((file) => {
          const reader = new FileReader();
  
          reader.onloadend = () => {
            const imgBlob = new Blob([reader.result], { type: 'image/jpeg' });
            const newFilePath = this.file.cacheDirectory + 'converted_' + Date.now() + '.jpg';
  
            this.writeFile(newFilePath, imgBlob).then(() => {
              resolve(newFilePath);
            }).catch((err) => {
              reject(err);
            });
          };
  
          reader.onerror = (err) => {
            reject(err);
          };
  
          reader.readAsArrayBuffer(file);
        }, (err) => {
          reject(err);
        });
      }, (err) => {
        reject(err);
      });
    });
  }
  
  writeFile(filePath, fileBlob) {
    return new Promise<void>((resolve, reject) => {
      window['resolveLocalFileSystemURL'](this.file.dataDirectory, (dirEntry) => {
        dirEntry.getFile(filePath, { create: true, exclusive: false }, (fileEntry) => {
          fileEntry.createWriter((fileWriter) => {
            fileWriter.onwriteend = () => {
              resolve();
            };
  
            fileWriter.onerror = (err) => {
              reject(err);
            };
  
            fileWriter.write(fileBlob);
          }, (err) => {
            reject(err);
          });
        }, (err) => {
          reject(err);
        });
      }, (err) => {
        reject(err);
      });
    });
  }

As of my knowledge cutoff in September 2021, Pannellum does not have built-in support specifically for the “cnv_photo_jpg” file format. Pannellum primarily supports equirectangular and cube map image formats commonly used for 360 panoramas.

However, Pannellum provides a flexible API that allows you to create custom plugins and extensions, which means it might be possible to extend its functionality to support the “cnv_photo_jpg” format. You would need to write a custom plugin or extension that can handle parsing and displaying the specific file format.

I would recommend checking the Pannellum documentation and community resources to see if anyone has already developed a custom plugin or extension for the “cnv_photo_jpg” format or to get guidance on implementing your own custom solution if necessary.

openMultiplePhotoGallery(successCallback, errorCallback) {
let options: ImagePickerOptions = {
maximumImagesCount: 40,
quality: 80,
outputType: 0,
};

    this.imagePicker.requestReadPermission().then((res2) => {
      this.imagePicker.getPictures(options).then((filePaths) => {
        const convertedFilePaths = [];
  
        const convertImage = (filePath: string) => {
          const isSupportedFormat = filePath.toLowerCase().endsWith('.jpg') || filePath.toLowerCase().endsWith('.jpeg') || filePath.toLowerCase().endsWith('.png');
  
          if (isSupportedFormat) {
            convertedFilePaths.push(filePath);
          } else {
            // Convert image file to JPEG or PNG format
            this.file.resolveLocalFilesystemUrl(filePath).then((fileEntry: FileEntry) => {
              const fileName = filePath.substr(filePath.lastIndexOf('/') + 1);
              const path = filePath.substr(0, filePath.lastIndexOf('/') + 1);
              const convertedFileName = 'converted_image.jpg'; // Set the desired converted file name
              const convertedFilePath = path + convertedFileName; // Set the desired converted file path and format
  
              fileEntry.file((file) => {
                const reader = new FileReader();
                reader.onloadend = () => {
                  // Convert base64 image to Blob
                  const blob = this.b64toBlob(reader.result as string, 'image/jpeg'); // Convert to JPEG format
                  // const blob = this.b64toBlob(reader.result as string, 'image/png'); // Convert to PNG format
  
                  // Write the Blob to the desired converted file path
                  this.file.writeFile(this.file.dataDirectory, convertedFileName, blob, { replace: true }).then(() => {
                    convertedFilePaths.push(convertedFilePath);
  
                    // Check if all files have been converted
                    if (convertedFilePaths.length === filePaths.length) {
                      successCallback(convertedFilePaths);
                    }
                  }).catch((error) => {
                    // Handle error while writing the converted file
                    console.error('Error writing converted file:', error);
                  });
                };
                reader.readAsDataURL(file);
              }, (error) => {
                // Handle error while getting the file
                console.error('Error getting file:', error);
              });
            }).catch((error) => {
              // Handle error while resolving file path
              console.error('Error resolving file path:', error);
            });
          }
        };
  
        for (const filePath of filePaths) {
          convertImage(filePath);
        }
  
        // Check if all files are already in a supported format
        if (convertedFilePaths.length === filePaths.length) {
          successCallback(convertedFilePaths);
        }
      }, (err) => {
        errorCallback(err);
      });
    }).then(data => {
    }, (err) => {
      if (this.platform.is('ios')) {
        this.createAlert(null, "FieldPro needs permissions to work.<br/><br/>Go to Settings, and scroll down to the list of apps, tap on FieldPro.<br/>Give permissions to Photos, Microphone, and Camera.", ['OK']);
      } else {
        this.createAlert(null, "FieldPro needs permissions to work.<br/><br/>Go to Settings -> Apps -> Field Pro.<br/>Give permissions to Files and Camera.", ['OK']);
      }
    });
  }
  
  b64toBlob(b64Data: string, contentType: string): Blob {
    const byteCharacters = atob(b64Data);
    const byteArrays = [];
  
    for (let offset = 0; offset < byteCharacters.length; offset += 512) {
      const slice = byteCharacters.slice(offset, offset + 512);
      const byteNumbers = new Array(slice.length);
  
      for (let i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i);
      }
  
      const byteArray = new Uint8Array(byteNumbers);
      byteArrays.push(byteArray);
    }
  
    const blob = new Blob(byteArrays, { type: contentType });
    return blob;
  }

The file file:///var/mobile/Containers/Data/Application/54350720-9BEC-429F-B9F4-B22229471429/tmp/cdv_photo_024.jpg could not be accessed

Brainscape's Knowledge GenomeTM

Angular Flashcards

Brainscape's Knowledge Genome^TM