Podcasts: An Introduction

CHAPTER 1
INTRODUCTION
1.1 PURPOSE
Podcasts are great to listen to when you are too busy to read. Podcasting refers to the creation
and regular distribution of podcast through the Internet. Podcasts, which can
include audio, video, pdf, and e-Pub files, are subscribed to and downloaded through web
syndication or streamed online to a computer or mobile device. Subscribers are then able to
view, listen to, and transfer the episodes to a variety of media players, or pod catcher. Though
similar to radio, there is no larger regulatory group or oversight with podcasts. Instead,
podcasts simply consist of the creators and their listeners.
As the technology gained popularity in the early 2000s, the uses of podcasting grew from
simply the delivery of content to also creative and responsive purposes. The uses of podcasts
varies depending on the speaker, the source through which the podcast is shared, and the
intended audience. Podcasts have been utilized across academia, the news cycle,
entertainment, and more.
Audio podcasting has been widely used by many online sites such as newspapers, web
portals, journal, etc., to deliver audio content to users through download or subscription.
Within 1 to 30 minutes long of one podcast story, it is often that multiple audio
advertisements (ads) are inserted into and repeated, with each of a length of 5 to 30 seconds,
at different locations. Based on knowledge of typical structures of podcast contents, this
paper proposes a novel efficient advertisement discovery approach to identify and locate
unknown ads from a large collection of audio podcasting. Two techniques: candidate region
segmentation and sampling technique are employed to speed up the search. The approach has
been tested over a variety of podcast contents collected from MIT Technology Review,
Scientific American, and Singapore Podcast websites. Experimental results show that the
proposed approach achieves detection rate of 97.5% with a significant computation saving as
compared to existing state-of-the art methods.
Podcasts are easily accessible across different platforms, but without podcast apps to organize
the podcasts you listen to and recommend new ones, keeping track of them can become very
tough.
1.2 SCOPE
These days I have a new addiction podcast. This is my attempt to introduce PODCASTS as a
powerful tool for learning new stuff.
After you buy and subscribe a magazine the physical copies are delivered to your
address. Podcasts are magazine subscriptions for your Ears. What makes Podcasts different
from the magazine model is that all podcasts are FREE and are delivered through your
mobile in digital format.
Blogs are a very good place to learn new stuff. Blogs are nothing but a website where people
write their minds out. They write their feelings, opinions and pour their brains out. I think,
today you can find answers to almost all of your questions on Blogs. Podcasts are audio
versions of blogs. They are like the 21st century's offline Radio.
People are enjoying reading blogs but to read blogs you will need to have an active internet
connection. The audience for blogs gradually increased over the period of time and so did the
bloggers. But in the 21st century you might not find blogs very convenient to use. You might
not have the liberty to read them when you are free or when you want to. For example while
travelling. Travelling in a bus or metro will generally be boring. You might find it very
difficult to use your mobile and read your favourite blogs.
PODCASTS are the solution to this problem. You can either download or listen to them
online whenever you want. Another major benefit from listening to podcasts is
vocabulary. Podcasts introduces you to new slang and words which you might never heard of.
1.3 REST SERVICES
Podcasts need actual, real-time tracking like all other things digital. It’s idiotic that you can’t
aggregate your stats from various podcasts easily, and podcasters need to know when people
are dropping off / overall listen time / whether other apps were opened during listening
(signaling split attention) in order to sell ads properly.
Podcasters need to borrow one idea from radio, which is live interaction with the audience.
Radio doesn’t work because you have personalities that go on and on about something —
radio works because people on radio are constantly debating minutiae. The podcast can still
be recorded and disseminated, but there needs to be a live component.
Podcasts need to integrate with the popular voice assistants Alexa, Google Home, and so that
you can actually buy the things that are being promoted directly in-podcast while in your car.
Think, “Hey Google, buy me the Great Books series” while your driving (yeah, that was
the podcast ad I heard recently). Tracking to a link, like most podcasts do today, just doesn’t
work well — there’s too much breakage on the way. Podcasts need a better discovery
mechanism — right now, Apple Podcasts, Google Play Music and the rest are really only
good at showing users a small subset of podcasts out there. We need a way for people to
more easily jump between podcasts, similar to how you can jump between video genres on
YouTube.
1.3.1 FEATURES OF RESTFUL SERVICES
 Advocacy.
 Law enforcement.
 News outlets distribute supplemental audio or video via podcasts
 Youth media. Podcasting has become a way for youth media organizations.
1.4 ABOUT ANDROID
Android is a complete set of software for mobile devices such as tablet computers,
notebooks, smart phones, electronic book readers, set-top boxes. It contains a Linux-based
Operating System, middleware and key mobile applications. It can be thought of as a mobile
operating system. But it is not limited to mobile only. It is currently used in various devices
such as mobiles, tablets, televisions etc.
1.5 WHAT IS ANDROID
Android is a software package and linux based operating system for mobile devices
such as tablet computers and smart phones. It is developed by Google and later the OHA
(Open Handset Alliance). Java language is mainly used to write the android code even
though other languages can be used. The goal of android project is to create a successful real-
world product that improves the mobile experience for end users. There are many code
names of android such as Lollipop, Kitkat, Jelly Bean, Ice cream Sandwich, Froyo, Ecliar,
Donut etc which is covered in next page.
1.6 ABOUT OPEN HANDSET ALLIANCE (OHA)
It's a consortium of 84 companies such as Google, Samsung, AKM, Synaptics, KDDI,
Garmin, Teleca, EBay, Intel etc. It was established on 5th November, 2007, led by Google. It
is committed to advance open standards, provide services and deploy handsets using the
Android Platform.
1.7 FEATURES OF ANDROID
• It is open-source.
• Anyone can customize the Android Platform.
• There are a lot of mobile applications that can be chosen by the consumer.
• It provides many interesting features like weather details, opening screen, live RSS
(Really Simple Syndication) feeds etc.
• It provides support for messaging services (SMS and MMS), web browser, storage
(SQLite), connectivity (GSM, CDMA, Blue Tooth, Wi-Fi etc.), media, handset layout
etc.
1.8 CATEGORIES OF ANDROID APPLICATIONS
• Entertainment
• Tools
• Communication
• Productivity
• Personalization
• Music and Audio
• Social
• Media and Video
• Travel and Local etc.
1.9 HISTORY OF ANDROID
• Initially, Andy Rubin founded Android Incorporation in Palo Alto, California, United
States in October, 2003.
• In 17th August 2005, Google acquired android Incorporation. Since then, it is in the
subsidiary of Google Incorporation.
• The key employees of Android Incorporation are Andy Rubin, Rich Miner, Chris
White and Nick Sears.
• Originally intended for camera but shifted to smart phones later because of low
market for camera only.
• Android is the nick name of Andy Rubin given by coworkers because of his love to
robots.
• In 2007, Google announces the development of android OS. In 2008, HTC launched
the first android mobile.
1.10 ANDROID ARCHITECTURE
• Linux kernel: It is the heart of android architecture that exists at the root of android
architecture. Linux kernel is responsible for device drivers, power management,
memory management, device management and resource access.
• Native libraries (middleware): On the top of Linux kernel, their are Native
libraries such as Web Kit, OpenGL, FreeType, SQLite, Media, C runtime library
(libc) etc. The WebKit library is responsible for browser support, SQLite is for
database, FreeType for font support, Media for playing and recording audio and video
formats.
• Android Runtime: In android runtime, there are core libraries and DVM (Dalvik
Virtual Machine) which is responsible to run android application. DVM is like JVM
but it is optimized for mobile devices. It consumes less memory and provides fast
performance.
• Application Framework: On the top of Native libraries and android runtime, there
is android framework. Android framework includes Android API's such as UI (User
Interface), telephony, resources, locations, Content Providers (data) and package
managers. It provides a lot of classes and interfaces for android application
development.
• Applications: On the top of android framework, there are applications. All
applications such as home, contact, settings, games, browsers are
using android framework that uses android runtime and libraries. Android runtime and
native libraries are using Linux kernel.
1.11 ANDROID CORE BUILDING BLOCKS
An android component is simply a piece of code that has a well defined life cycle e.g.
Activity, Receiver, Service etc. The core building blocks or fundamental components of
android are activities, views, intents, services, content providers, fragments and
AndroidManifest.xml.
• Activity
An activity is a class that represents a single screen. It is like a Frame in AWT.
• View
A view is the UI element such as button, label, text field etc. Anything that you see is a view.
• Intent
Intent is used to invoke components. It is mainly used to:
• Start the service
• Launch an activity
• Display a web page
• Display a list of contacts
• Broadcast a message
• Dial a phone call etc.
• For example, you may write the following code to view the webpage.
Example:
Intent intent=new Intent (Intent.ACTION_VIEW);
intent.setData (Uri. parse ("http://www.gurunanak.com"));
startActivity (intent);
• Service
Service is a background process that can run for a long time. There are two types of services
local and remote. Local service is accessed from within the application whereas remote
service is accessed remotely from other applications running on the same device.
• Content Provider
Content Providers are used to share data between the applications.
• Fragment
Fragments are like parts of activity. An activity can display one or more fragments on the
screen at the same time.
• AndroidManifest.xml
It contains information about activities, content providers, permissions etc. It is like the
web.xml file in Java EE.
• Android Virtual Device (AVD)
It is used to test the android application without the need for mobile or tablet etc. It can be
created in different configurations to emulate different types of real devices.
• APK File
An apk file is created by the framework automatically. If you want to run the android
application on the mobile, transfer and install it.
• Resources
It contains resource files including activity main, strings, styles etc.
• Manifest file
It contains information about package including components such as activities, services,
content providers etc.
1.12 ANDROID ACTIVITY LIFECYCLE
Fig: 1.12 Android Activity Lifecycle
Android Activity Lifecycle is controlled by 7 methods of android.app.Activity class.
The android Activity is the subclass of Context ThemeWrapper class. An activity is the single
screen in android. It is like window or frame of Java. By the help of activity, you can place all
your UI components or widgets in a single screen. The 7 lifecycle method of Activity
describes how activity will behave at different states.
1.12.1. SQLITE SERVER
Microsoft SQL Server is a relational database management system (RDBMS). In our
application, to store and to retrieve the data from the database we use this technology. It is
used for both Web and mobile application.
1.12.2. ANDROID
The Android platform is a software stack for mobile devices including an operating
system, middleware and key applications. Developers have full access to the same framework
APIs used by the core applications. The application architecture is designed to simplify the
reuse of components; any application can publish its capabilities and any other application
may then make use of those capabilities. Developers can create applications for the platform
using the Android SDK. Applications are written using the Java programming language and
run on Dalvik, a custom virtual machine designed for embedded use, which runs on top of a
Linux kernel.
1.12.3. DIFFICULTIES
• Effect of Hurricane Ike
• SQLite Database connection
• MAP API key
• Drawing overlays
• Integrating the Web client and the android client
CHAPTER 2
LITERATURE SURVEY
Introduction
A literature Survey is a text of a scholarly paper, which includes the current
knowledge including substantive findings as well as theoretical and methodological
contributions to a particular topic. Literature reviews are secondary sources and do not report
new or original experimental work. Most often associated with academic-oriented literature,
such reviews are found in academic journals, and are not to be confused with books reviews
C.A narrow-scope literature review may be included as a part of a peer-reviewed journal
article presenting new research, serving to situate the current study within the body of the
relevant literature and to provide context for the reader .In such a case, the review usually
precedes the methodology and results sections of the work. Producing a literature review may
also be part of graduate and post-graduate student work, including in the preparation of a
thesis, dissertation or a journal article.
Review of related literature from related research papers
Title: PodBoard: Podcasting Braced Blended Learning Environment
Author: Hossam M.A. Fahmy, Salma A. Ghoneim
Year: 2012
Description: Podcasting as a social technology endorsed integrating push based mobile
learning (m-learning) and pull based electronic learning (e-learning) into push-pull blended
learning (b-learning), which gets the students involved in the development and reception of
course podcasts, and thus feel a higher level of social presence and achieve better academic
results. Podcasting impact differs in societies and countries, it is one of the motivations and
outcomes of this work. PodBoard, a blended learning environment is implemented, its
performance is evaluated using Task Technology Fit (TTF) model. Results based on Egyptian
students responses are presented.
Title: Efficient discovery of unknown Ads for audio Podcast content

Author: M. N. Nguyen, Qi Tian, Ping Xue.
Year: 2010
Description: Audio podcasting has been widely used by many online sites such as
newspapers, web portals, journal, etc., to deliver audio content to users through download or
subscription. Within 1 to 30 minutes long of one podcast story, it is often that multiple audio
advertisements (ads) are inserted into and repeated, with each of a length of 5 to 30 seconds,
at different locations. Based on knowledge of typical structures of podcast contents, this
paper proposes a novel efficient advertisement discovery approach to identify and locate
unknown ads from a large collection of audio podcasting. Two techniques: candidate region
segmentation and sampling technique are employed to speed up the search. The approach has
been tested over a variety of podcast contents collected from MIT Technology Review,
Scientific American, and Singapore Podcast websites. Experimental results show that the
proposed approach achieves detection rate of 97.5% with a significant computation saving as
compared to existing state-of-the art methods.
Title: Podcasting: An Internet – based social technology for blended learning

Author: Raymond Y.K. Lau, Rachael Kwai Fun Ip, M.T. Chan, Ron Chi-Wai Kwok, Sharon
W.M. Wong, Johnny C.F. So, Eva Y.W. Wong
Year: 2010
Description: Podcasting has the potential to enhance learning by giving students mobile
access to course materials anytime, anywhere. In particular, integrating podcasting, electronic
learning (e-learning), and traditional face-to-face teaching into a blended learning (b-
learning) environment can help create a push-pull educational exchange that increases student
learning satisfaction. The authors' empirical study reveals that students generally feel a higher
level of social presence and achieve better academic results if they're involved in the
development of course podcasts. This research opens the door to the application of emerging
Internet technologies to improve student learning.
Title: A similar content retrieval method for Podcast episodes

Author: Junta Mizuno, Jun Ogata, Masataka Goto
Year: 2008
Description: Given podcasts (audio blogs) that are sets of speech files called episodes, this
paper describes a method for retrieving episodes that have similar content. Although most
previous retrieval methods were based on bibliographic information, tags, or users' playback
behaviors without considering spoken content, our method can compute content-based
similarity based on speech recognition results of podcast episodes even if the recognition
results include some errors. To overcome those errors, it converts intermediate speech-
recognition results to a confusion network containing competitive candidates, and then
computes the similarity by using keywords extracted from the network. Experimental results
with episodes that have different word accuracy and content showed that keywords obtained
from competitive candidates were useful in retrieving similar episodes. To show relevant
episodes, our method will be incorporated into PodCastle, a public web service that provides
full-text searching of podcasts on the basis of speech recognition.
Title: The Technology underlying Podcasts

Author: L.J. Patterson
Year: 2006
Description: Podcasting is a combination of "iPod," Apple's well-known portable media
device, and "broadcast." Podcast has two meanings. First, podcasting is the transmission of
multimedia files over the Internet. Rather than being received and opened with different plug-
ins, podcast files are ready for viewing on either a PC or other devices, such as an iPod. On
the PC, users can treat podcast files like any other computer files, viewing them immediately
or saving them for viewing at a later date. Second, in addition to the delivery of files, podcast
also refers to their content. Frequently, podcasts are files that are sent at regular intervals.
Once viewers determine which podcasts they want, they sign up for them and have them
delivered automatically whenever their receiving device is connected to the Internet.
Title: Subscription of Digital Broadcast content utilizing the syndication feeds mechanism
Author: Gunther Schatter, Christian Rotzoll.
Year: 2008
Description: The usage of podcasting for all kind of media files in the Internet has become
very popular. A part of its strength lies in its simplicity. However, the success of such a
technology proves not only the demand for structured data but also produces new problems of
networking costs for broadcasters. Media devices of the future will be able to access content
either from digital broadcast networks or through the Internet infrastructure. In order to
manage and present this multifaceted material to the user, common metadata and procedures
are needed. This contribution will give a survey of the standards and methods provided for
digital broadcasting and cellular systems as DAB/DMB, HD RadioTM, DVB, UMTS and
explore their ability to interface with on-demand content provided in the Internet. Two
implementations for digital radio and TV will show how such a linkage of linear content with
on-demand content can be presented to the user.
Title: Work in progress – using Podcasting in Engineering education
Author: Jennifer A. Polack-Wahl
Year: 2010
Description: Podcasting allow students to learn outside the boundaries of the classroom and
without time constraints. Podcasting is an audio broadcast that has been converted to an audio
file format for playback over the Internet or in a digital music player. Podcasting cannot
replace the classroom; however, it gives students a new way to broadcast concepts they have
learned and allows educators to interact with their students. In a computer information system
and software engineering course, podcasting was used to add value to the in-classroom
experience and enhance course content. In both classes groups of students were required to
investigate real-world software failures and produce a fifteen-minute podcast that
demonstrated the failure and its impact on society. This work-in-progress will discuss how
students used podcasting to understand how course content applied in the real world and how
they could effectively communicate this knowledge to the rest of the class without taking
class time and finally, how the students improved their teamwork skills by participating in the
group podcasting assignment.
CHAPTER 3
SYSTEM REQUIREMENTS AND SPECIFICATIONS
3.1 EXISTING SYSTEM
3.2 PROPOSED SYSTEM

The very first advantage of listening to a podcast is that you retain thrice as much information
when you listen rather than read. We can also listen to podcasts at our own leisure, and as
many times as we may desire. If this weren’t enough, podcasts are also a wonderful way to
get to listen to both experts as well as amateurs talk about what moves them and what, in
turn, may move you as well.
Podcasts are for education, entertainment, and inspiration. Audio is my favorite method to
learn new things, whether that’s the news, work-related tips, or interviews with favorite
authors and entrepreneurs. You’re not tied to any visuals, so you’re free to listen when you’re
doing other things.
The beauty of podcasts is that there is no single reason. There’s a world of reasons.
Education. Friendship. Comedy. News. Entertainment. Dive into another world with an
Audio Drama.
3.3 FEATURES
•User login: This allows only the registered users to login.
3.4 ADVANTAGES
• User can listen the music at any point of time.
• User can free to listen when doing other things.
• It is also a wonderful way to get to listen to both experts as well as amateurs talk
about what moves them and what, in turn, may move you as well.
• User can introduces you to new slang and words which you might never heard of.
3.5 DISADVANTAGES
• The system is not fully automated, it needs users for implementation.
3.6 APPLICATION
• This application can be used by all people who want to listen the music in all times
3.7 SOFTWARE AND HARDWARE REQUIREMENTS

3.7.1 SOFTWARE REQUIREMENTS
The software requirements document is the specification of the system. It should
include both a definition and a specification of requirements. It is a set of what the system
should do rather than how it should do it. The software requirements provide a basis for
creating the software requirements specification. It is useful in estimating cost, planning
team activities, performing tasks and tracking the teams and tracking the team’s progress
throughout the development activity.
 Technologies Used – Libraries of Npm & amp, Angular Cli, Yarn,
AuthGuard,Angular material, rxjs, HttpClientModule,
External API’s, Chocolatey, Cordova,Cordova-android,
Electron Js.
 Language – Html, Css, AngularJs, Jquery, Libraries of Npm & amp,
Ng MaterialJs
 Software – NPM, Angular CLI , Firebase, GitHub, Android Studio,
Java 1.8.0+ SDK.
 Tool – Visual Studio Code
 Database – Firestore using Firebase Cloud
3.7.2 HARDWARE REQUIREMENTS
The hardware requirements may serve as the basis for a contract for the
implementation of the system and should therefore be a complete and consistent specification
of the whole system. They are used by software engineers as the starting point for the system
design. It should what the system do and not how it should be implemented.
Operating System – Windows
Processor – 2 GHZ or Higher
Ram – 4 GB
Hard Disk – 20GB
3.8 TECHNICAL DETAILS
This chapter is about the software language and the tools used in the development of
the project. The platform used here is HTML, CSS, JAVASCRIPT, ANGULAR and NODE.
3.8.1 FEATURES OF TECHNOLOGIES
NODEJS
WHAT IS NODE.JS?
 Node.js is an open source server environment
 Node.js is free
 Node.js runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)
 Node.js uses JavaScript on the server
WHY NODE.JS?
Node.js uses asynchronous programming!
A common task for a web server can be to open a file on the server and return the content to
the client.
Here is how PHP or ASP handles a file request:
1. Sends the task to the computer's file system.
2. Waits while the file system opens and reads the file.
3. Returns the content to the client.
4. Ready to handle the next request.
Here is how Node.js handles a file request:
1. Sends the task to the computer's file system.
2. Ready to handle the next request.
3. When the file system has opened and read the file, the server returns the content to the
client.
Node.js eliminates the waiting, and simply continues with the next request.
Node.js runs single-threaded, non-blocking, asynchronously programming, which is very
memory efficient.
WHAT CAN NODE.JS DO?
 Node.js can generate dynamic page content
 Node.js can create, open, read, write, delete, and close files on the server
 Node.js can collect form data
 Node.js can add, delete, modify data in your database
WHAT IS A NODE.JS FILE?
 Node.js files contain tasks that will be executed on certain events
 A typical event is someone trying to access a port on the server
 Node.js files must be initiated on the server before having any effect
 Node.js files have extension ".js".
MODULES
WHAT IS A MODULE IN NODE.JS?
Consider modules to be the same as JavaScript libraries.
A set of functions you want to include in your application.
INCLUDE MODULES
To include a module, use the require() function with the name of the module:
var http = require('http');
Now your application has access to the HTTP module, and is able to create a server:
http.createServer(function(req, res)
{
res.writeHead(200,{'Content-Type':'text/html'});
res.end('HelloWorld!');
}).listen(8080);
CREATE YOUR OWN MODULES
You can create your own modules, and easily include them in your applications.
The following example creates a module that returns a date and time object:
Example:
exports.myDateTime=function(){
returnDate();
};
INCLUDE YOUR OWN MODULE
Example:
var dt = require('./myfirstmodule');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write("The date and time is currently: " + dt.myDateTime());
res.end();
}).listen(8080);
Node.js HTTP Module
THE BUILT-IN HTTP MODULE
Node.js has a built-in module called HTTP, which allows Node.js to transfer data over the
Hyper Text Transfer Protocol (HTTP).
To include the HTTP module, use the require() method:
Node.js as a Web Server
The HTTP module can create an HTTP server that listens to server ports and gives a response
back to the client.
Use the createServer() method to create an HTTP server:
Example:
var http = require('http'); //create a server object:
res.write('Hello World!'); //write a response to the client
res.end(); //end the response
}).listen(8080); //the server object listens on port 8080
Add an HTTP Header
If the response from the HTTP server is supposed to be displayed as HTML, you should
include an HTTP header with the correct content type:
Example:
// add a HTTP header:
res.write('Hello World!');
res.end();
}).listen(8080);
The first argument of the res.writeHead() method is the status code, 200 means that all is OK,
the second argument is an object containing the response headers.
READ THE QUERY STRING
The function passed into the http.createServer() has a req argument that represents the request
from the client, as an object (http.IncomingMessage object).
This object has a property called "url" which holds the part of the url that comes after the
domain name:
demo_http_url.js
res.write(req.url);
res.end();
}).listen(8080);
Split the Query String
There are built-in modules to easily split the query string into readable parts, such as the URL
module.
Example
Split the query string into readable parts:
var url = require('url');
var q = url.parse(req.url, true).query;
var txt = q.year + " " + q.month;
res.end(txt);
}).listen(8080);
Node.js File System Module
NODE.JS AS A FILE SERVER
The Node.js file system module allows you to work with the file system on your computer.
To include the File System module, use the require() method:
var fs = require('fs');
Common use for the File System module:
 Read files
 Create files
 Update files
 Delete files
 Rename files
READ FILES
The fs.readFile() method is used to read files on your computer.
Assume we have the following HTML file (located in the same folder as Node.js):
demofile1.html
<html>
<body>
<h1>My Header</h1>
<p>My paragraph.</p>
</body>
</html>
Example:
//Open a file on the server and return its content:
fs.readFile('demofile1.html', function(err, data) {
res.write(data);
return res.end();
});
}).listen(8080);
CREATE FILES
The File System module has methods for creating new files:
 fs.appendFile()
 fs.open()
 fs.writeFile()
The fs.appendFile() method appends specified content to a file. If the file does not exist, the
file will be created:
Example:
//create a file named mynewfile1.txt:
fs.appendFile('mynewfile1.txt', 'Hello content!', function (err) {
if (err) throw err;
console.log('Saved!');
});
UPDATE FILES
The File System module has methods for updating files:
 fs.appendFile()
 fs.writeFile()
The fs.appendFile() method appends the specified content at the end of the specified file:
Example:
//append content at the end of the file:
fs.appendFile('mynewfile1.txt', ' This is my text.', function (err) {
if (err) throw err;
console.log('Updated!');
});
DELETE FILES
To delete a file with the File System module, use the fs.unlink() method.
The fs.unlink() method deletes the specified file:
Example:
//Delete the file mynewfile2.txt:
fs.unlink('mynewfile2.txt', function (err) {
if (err) throw err;
console.log('File deleted!');
});
RENAME FILES
To rename a file with the File System module, use the fs.rename() method.
The fs.rename() method renames the specified file:
Example:--
//Rename the file "mynewfile1.txt" into "myrenamedfile.txt":

fs.rename('mynewfile1.txt', 'myrenamedfile.txt', function (err) {
if (err) throw err;
console.log('File Renamed!');
});
ANGULARJS
AngularJS Introduction
AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag.
AngularJS extends HTML attributes with Directives, and binds data to HTML with
Expressions.
ANGULARJS EXTENDS HTML
AngularJS extends HTML with ng-directives.
The ng-app directive defines an AngularJS application.
The ng-model directive binds the value of HTML controls (input, select, textarea) to
application data.
The ng-bind directive binds application data to the HTML view.
AngularJS Modules
An AngularJS module defines an application.
The module is a container for the different parts of an application.
The module is a container for the application controllers.
Controllers always belong to a module.
CREATING A MODULE
A module is created by using the AngularJS function angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
The "myApp" parameter refers to an HTML element in which the application will run.
Now you can add controllers, directives, filters, and more, to your AngularJS application.
ADDING A CONTROLLER
Add a controller to your application, and refer to the controller with the ng-controller directive:
Example:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</body>
</html>
ADDING A DIRECTIVE
AngularJS has a set of built-in directives which you can use to add functionality to your
application.
DATA BINDING
The {{ firstName }} expression, in the example above, is an AngularJS data binding
expression.
Data binding in AngularJS binds AngularJS expressions with AngularJS data.
{{ firstName }} is bound with ng-model="firstName".
In the next example two text fields are bound together with two ng-model directives:
Example:
<!DOCTYPE html>
<html>
<body>
<div data-ng-app="" data-ng-init="quantity=1;price=5">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">
<p><b>Total in dollar:</b> {{quantity * price}}</p>
</div>
</body>
</html>
REPEATING HTML ELEMENTS
The ng-repeat directive repeats an HTML element:
Example:
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">

<p>Looping with ng-repeat:</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
</body>
</html>
The ng-repeat directive actually clones HTML elements once for each item in a collection.
The ng-repeat directive used on an array of objects:
THE NG-APP DIRECTIVE
The ng-app directive defines the root element of an AngularJS application.
The ng-app directive will auto-bootstrap (automatically initialize) the application when a web
page is loaded.
THE NG-INIT DIRECTIVE
The ng-init directive defines initial values for an AngularJS application.
Normally, you will not use ng-init. You will use a controller or module instead.
You will learn more about controllers and modules later.
THE NG-MODEL DIRECTIVE
The ng-model directive binds the value of HTML controls (input, select, textarea) to
application data.
The ng-model directive can also:
 Provide type validation for application data (number, email, required).
 Provide status for application data (invalid, dirty, touched, error).
 Provide CSS classes for HTML elements.
 Bind HTML elements to HTML forms.
Read more about the ng-model directive in the next chapter.

CREATE NEW DIRECTIVES
In addition to all the built-in AngularJS directives, you can create your own directives.
New directives are created by using the .directive function.
To invoke the new directive, make an HTML element with the same tag name as the new
directive.
When naming a directive, you must use a camel case name, w3TestDirective, but when
invoking it, you must use - separated name, w3-test-directive:
You can invoke a directive by using:
 Element name
 Attribute
 Class
 Comment
RESTRICTIONS
You can restrict your directives to only be invoked by some of the methods.
THE NG-MODEL DIRECTIVE
Use the ng-model directive to bind data from the model to the view on HTML controls
(input, select, textarea)
TWO-WAY BINDING
Data binding in AngularJS is the synchronization between the model and the view.
When data in the model changes, the view reflects the change, and when data in the view
changes, the model is updated as well. This happens immediately and automatically, which
makes sure that the model and the view is updated at all times.
ANGULARJS CONTROLLER
Applications in AngularJS are controlled by controllers.
Because of the immediate synchronization of the model and the view, the controller can be
completely separated from the view, and simply concentrate on the model data. Thanks to the
data binding in AngularJS, the view will reflect any changes made in the controller.
ANGULARJS CONTROLLERS
AngularJS applications are controlled by controllers.
The ng-controller directive defines the application controller.
A controller is a JavaScript Object, created by a standard JavaScript object constructor.
CONTROLLER METHODS
The example above demonstrated a controller object with two properties: lastName and
firstName.
A controller can also have methods (variables as functions):
CONTROLLERS IN EXTERNAL FILES
In larger applications, it is common to store controllers in external files.
AngularJS Services
What is a service?
In AngularJS, a service is a function, or object, that is available for, and limited to, your
AngularJS application.
AngularJS has about 30 built-in services. One of them is the $location service.
The $location service has methods which return information about the location of the current
web page:
SHTTP Service
The $http service is one of the most common used services in AngularJS applications. The
service makes a request to the server, and lets your application handle the response.
STIMEOUT Service
The $timeout service is AngularJS' version of the window.setTimeout function.
SINTERVAL Service
The $interval service is AngularJS' version of the window.setInterval function.
CREATE YOUR OWN SERVICE
To create your own service, connect your service to the module:
Create a service named hexafy:
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
To use your custom made service, add it as a dependency when defining the controller:
AngularJS API
API stands for Application Programming Interface.
AngularJS Global API

The AngularJS Global API is a set of global JavaScript functions for performing common
tasks like:
 Comparing objects
 Iterating objects
 Converting data
The Global API functions are accessed using the angular object.
Below is a list of some common API functions:
API Description
angular.lowercase() Converts a string to lowercase
angular.uppercase() Converts a string to uppercase
angular.isString() Returns true if the reference is a string
angular.isNumber() Returns true if the reference is a number
angular.lowercase()
Example:
<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.x1 = "JOHN";
$scope.x2 = angular.lowercase($scope.x1);
});
</script>
AngularJS Routing
What is Routing in AngularJS?
If you want to navigate to different pages in your application, but you also want the
application to be a SPA (Single Page Application), with no page reloading, you can use the
ngRoute module.
The ngRoute module routes your application to different pages without reloading the entire
application.
Example:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to

"main.htm"</p>
</body>
</html>
What Do I need?
To make your applications ready for routing, you must include the AngularJS Route module:
Then you must add the ngRoute as a dependency in the application module:
Now your application has access to the route module, which provides the $routeProvider.
Use the $routeProvider to configure different routes in your application:
$routeProvider
.when("/", {
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
SRoute Provider
With the $routeProvider you can define what page to display when a user clicks a link.
Example:
<!DOCTYPE html>
<html>
<a href="#!london">City 1</a>

<a href="#!paris">City 2</a>
<p>Click on the links to read about London and Paris.</p>
<div ng-view></div>
<script>
$routeProvider
.when("/", {
})
.when("/london", {
templateUrl : "london.htm"
})
.when("/paris", {
templateUrl : "paris.htm"
});
});
</script>
</body>
</html>
CONTROLLERS
With the $routeProvider you can also define a controller for each "view".
Example:
<!DOCTYPE html>
<html>
<a href="#!london">City 1</a>
<a href="#!paris">City 2</a>
<p>Click on the links.</p>
<p>Note that each "view" has its own controller which each gives the "msg" variable a
value.</p>
<div ng-view></div>
<script>
$routeProvider
.when("/", {
templateUrl : "main.htm",
})
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
app.controller("londonCtrl", function ($scope) {
$scope.msg = "I love London";
});
app.controller("parisCtrl", function ($scope) {
$scope.msg = "I love Paris";
});
</script>
</body>
</html>
TEMPLATE
In the previous examples we have used the templateUrl property in the $routeProvider.when
method.
You can also use the template property, which allows you to write HTML directly in the
property value, and not refer to a page.
Example:
<!DOCTYPE html>
<html>
<a href="#!banana">Banana</a>
<a href="#!tomato">Tomato</a>
<p>Click on the links to change the content.</p>
<p>The HTML shown in the ng-view directive are written in the template property of the
$routeProvider.when method.</p>
<div ng-view></div>
<script>
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Click on the links to change this content</p>"
})
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
});
});
</script>
</body>
</html>
CHAPTER 4
SYSTEM DESIGN
4.1 DESIGNING PART
There aren’t many mediums that help you learn and stay on the cutting edge of marketing and
design trends while you are doing some other random task. Podcast can take time that is
normally “wasted” doing something menial and turn it into learning.
My favourite times to listen are while driving, walking the dog, housework or cooking. But
this post isn’t about trying to convince you why podcasts are awesome. It’s to show you some
podcasts you can listen to to help you grow your digital agency. So let’s get into it.
There is one thing that’s important to note. Just because you’re subscribed to a podcast, it
doesn’t mean you have to listen to all of the episodes. Some of the podcasts below cover a
range of topics. If you see an episode about drop shipping or something you don’t care about,
just don’t listen. Easy. This podcast is run by the guys at UGURUS. It focuses on web
professionals to help them increase prices, work smarter, and grow profits. This podcast has
been on my rotation for a long time. It came about from being told for years that people
wanted to hear from us via a podcast. The only question we ask before deciding on a topic or
guest is: “Will this help agencies earn more, work less or is otherwise incredibly helpful.”
Episodes are a mix of quick wins, interviews with people who are doing amazing things,
tools, tips and resources that will help you grow your agency and build the life that you want.
This one isn’t agency focused, but I think it’s important to have a mix of podcasts across
topics that can help you grow as a business and a person. Like many on the list, there are a
ton of different kinds of guests and they always end with the next steps to take to implement
what you’ve learned.
4.2 LESSONS
4.2.1 SUPPORTING DIFFERENT SCREEN SIZES
This lesson walks you through how to design layouts that adapts several different
screen sizes (using flexible dimensions for views, Relative Layout, screen size and
orientation qualifiers, alias filters, and nine-patch bitmaps).
4.2.2 SUPPORTING DIFFERENT SCREEN DENSITIES
This lesson shows you how to support screens that have different pixel densities
(using density-independent pixels and providing bitmaps appropriate for each density).
4.2.3 IMPLEMENTING ADAPTATIVE UI FLOWS
This lesson shows you how to implement your UI flow in a way that adapts to several
screen size/density combinations (run-time detection of active layout, reacting according to
current layout, handling screen configuration changes).
Figure 4.2 Data flow diagram

4.3 USE CASE DIAGRAM
Use case diagram is a behavioral UML diagram type and frequently used to analyze
various systems. They enable you to visualize the different types of roles in a system and how
those roles interact with the system.use case diagram are used to gather a usage requirement
of a system. Depending on your requirement you can use that data in different ways.
Figure 4.3 Use Case Diagram
DESCRIPTION
Use case diagram is used to view the diagram with the actors and the use cases, Here User is
the actor and Register, Login ,add items, search an items , delete items, edit items, categories
,favourites ,history, Logout are the use cases.
4.4 SEQUENCE DIAGRAM

A Sequence diagram is an interaction diagram that shows how objects operate with one
another and in what order. It is a construct of a chart. A sequence diagram shows object
interactions arranged in time sequence. It depicts the objects and classes involved in the
scenario and the sequence of messages exchanged between the objects needed to carry out the
functionality of the scenario. Sequence diagrams are typically associated with use case
realizations in the Logical View of the system under development. Sequence diagrams are
sometimes called event diagrams or event scenarios. A sequence diagram shows, as parallel
vertical lines (lifelines), different processes or objects that live simultaneously, and, as
horizontal arrows, the messages exchanged between them, in the order in which they occur.
This allows the specification of simple runtime scenarios in a graphical manner.
Figure 4.4.1: Sequence Diagram

DESCRIPTION
Sequence diagram is used to show the flow of activities between the user and the data with
login and server cases in between.
4.5 COLLABORATION DIAGRAM

A collaboration diagram, also called a communication diagram or interaction diagram,
is an illustration of the relationships and interactions among software objects in the Unified
Modelling Language (UML). The concept is more than a decade old although it has been
refined as modelling paradigms have evolved. A collaboration diagram resembles
a flowchart that portrays the roles, functionality and behaviour of individual objects as well
as the overall operation of the system in real time. Objects are shown as rectangles with
naming labels inside. These labels are preceded by colons and may be underlined. The
relationships between the objects are shown as lines connecting the rectangles. The messages
between objects are shown as arrows connecting the relevant rectangles along with labels that
define the message sequencing. Collaboration diagrams are best suited to the portrayal of
simple interactions among relatively small numbers of objects. As the number of objects and
messages grows, a collaboration diagram can become difficult to read. Several vendors offer
software for creating and editing collaboration diagrams.
Figure 4.5.1: Collaboration Diagram

DESCRIPTION
4.6 CLASS DIAGRAM

In software engineering, a class diagram in the Unified Modelling Language (UML)
is a type of static structure diagram that describes the structure of a system by showing the
system's classes, their attributes, operations (or methods), and the relationships among
objects. The class diagram is the main building block of object-oriented modelling. It is used
both for general conceptual modelling of the systematic of the application, and for detailed
modelling translating the models into programming code. Class diagrams can also be used
for data modelling. The classes in a class diagram represent both the main elements,
interactions in the application, and the classes to be programmed.
Figure 4.7.2: Class Diagram
DESCRIPTION
User class diagram is a diagram where various functions or the activities of the users are
represented with their classes in the class diagram. Here, Register and login are the first steps
of the user whereas the functions are later allowed depending upon the register and login
activities.
4.7 ACTIVITY DIAGRAM
Activity diagram is another important diagram in UML to describe the dynamic aspects of the
system. Activity diagram is basically a flowchart to represent the flow from one activity to
another activity. The activity can be described as an operation of the system. The control flow
is drawn from one operation to another.
Figure 4.8: Activity Diagram
DESCRIPTION
Activity diagram shows the
CHAPTER 5
IMPLEMENTION
5.1 CODING
index.ts
import * as functions from 'firebase-functions';
// // Start writing Firebase Functions
// // https://firebase.google.com/docs/functions/typescript
export const helloWorld = functions.https.onRequest((request, response) => {
response.send("Hello from Firebase!");
});
index.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const functions = require("firebase-functions");
// // Start writing Firebase Functions
// // https://firebase.google.com/docs/functions/typescript
//
exports.helloWorld = functions.https.onRequest((request, response) => {
response.send("Hello from Firebase!");
});
//# sourceMappingURL=index.js.map
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="A podcast app made with Angular 5, Pouchdb, Html5
Web Audio API and PWA Features.">
<meta name="Jhonny Roger Silva" content="end3r">
<meta name="theme-color" content="#000">
<meta property="og:image" content="assets/icons/icon-512x512.png">
<link rel="manifest" href="manifest.json">
<title>Angular PWA Podcast App</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<script>
var global = global || window;
var Buffer = Buffer || [];
var process = process || {
env: { DEBUG: undefined },
version: []
};
</script>
</head>
<body>
<app-root>
<link rel="stylesheet" href="assets/css/spinner.css">
<div class="loader">
<div class="loader">
<div class="loader"></div>
</div>
</div>
</app-root>
<script type=”text/javascript” src=”cordova.js”></script>
<noscript>
<h1>
Sorry, but app is not available without javascript
</h1>
</noscript>
</body>
</html>
package.json
{
"name": "angular-podcast-app",
"version": "1.0.0",
"description": "A podcast aggregator made with Angular 5, Pouchdb, Html5 Web Audio
API and PWA Features.",
"main": "main.js",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --env=prod",
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "ng lint --type-check",
"lint:fix": "ng lint --fix",
"e2e": "ng e2e",
"electron": "electron ./www/index.html",
"electron-build": "ng build --prod && electron ./www/index.html"
},
"repository": {
"type": "git",
"url": "git+ssh://git@github.com/jhonnyrogerb/angular-podcast-app.git"
},
"keywords": [
"angular5",
"angular",
"pouchdb",
"pwa",
"example",
"typescript",
"html5-audio"
],
"author": "Apache Cordova Team",
"license": "Apache-2.0",
"bugs": {
"url": "https://github.com/jhonnyrogerb/angular-podcast-app/issues"
},
"homepage": "https://github.com/jhonnyrogerb/angular-podcast-app#readme",
"dependencies": {
"@angular-devkit/core": "^0.5.4",
"@angular/animations": "^7.2.10",
"@angular/common": "^7.2.10",
"@angular/compiler": "^7.2.10",
"@angular/core": "^7.2.10",
"@angular/fire": "^5.1.1",
"@angular/forms": "^7.2.10",
"@angular/http": "^7.2.10",
"@angular/platform-browser": "^7.2.10",
"@angular/platform-browser-dynamic": "^7.2.10",
"@angular/router": "^7.2.10",
"@angular/service-worker": "^7.2.10",
"bootstrap": "^4.1.0",
"color-thief-browser": "^2.0.2",
"cordova-android": "^7.1.4",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-whitelist": "^1.3.3",
"core-js": "^2.4.1",
"firebase": "^5.7.0",
"font-awesome": "^4.7.0",
"moment": "^2.22.0",
"ng5-slider": "^1.1.13",
"ngx-progressbar": "^2.1.1",
"normalize-scss": "^7.0.1",
"normalize.css": "^8.0.0",
"pouchdb": "^6.4.3",
"pouchdb-find": "^6.4.3",
"prettysize": "^1.1.0",
"random-gradient": "0.0.2",
"rss-parser": "^3.1.2",
"rxjs": "^6.4.0",
"rxjs-compat": "^6.0.0-rc.0",
"tslib": "^1.9.0",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular/cli": "^7.3.6",
"@angular/compiler-cli": "^7.2.10",
"@angular/language-service": "^7.2.10",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"electron": "^4.1.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "^4.0.1",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"module-alias": "^2.0.6",
"protractor": "^6.0.0",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~3.2.4"
},
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-device": {}
},
"platforms": [
"android"
]
}
}
firebase.json
{
"database": {
"rules": "database.rules.json"
},
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint",
"npm --prefix \"$RESOURCE_DIR\" run build"
]
},
"hosting": {
"public": "www",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
"storage": {
"rules": "storage.rules"
}
}
environment.ts
export const environment = {
production: true,
apiEndpoint : 'https://podcast-app-api-rfpomhjv1.now.sh',
firebase: {
apiKey: "AIzaSyDq1KwyoyvLNRc4bkrdBPVRelckG2i2M9o",
authDomain: "podcast-c5dbd.firebaseapp.com",
databaseURL: "https://podcast-c5dbd.firebaseio.com",
projectId: "podcast-c5dbd",
storageBucket: "podcast-c5dbd.appspot.com",
messagingSenderId: "680795606866"
}
};
environment.prod.ts
export const environment = {
production: true,
apiEndpoint : 'https://podcast-app-api-rfpomhjv1.now.sh',
firebase: {
apiKey: "AIzaSyDq1KwyoyvLNRc4bkrdBPVRelckG2i2M9o",
authDomain: "podcast-c5dbd.firebaseapp.com",
databaseURL: "https://podcast-c5dbd.firebaseio.com",
projectId: "podcast-c5dbd",
storageBucket: "podcast-c5dbd.appspot.com",
messagingSenderId: "680795606866"
}
};
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"rss-podcast-app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "www",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"stylePreprocessorOptions": {
"includePaths": [
"src/scss"
]
},
"assets": [
"src/assets",
"src/favicon.ico",
"src/manifest.json"
],
"styles": [
"node_modules/normalize.css/normalize.css",
"src/styles.scss",
"node_modules/font-awesome/css/font-awesome.css"
],
"scripts": []
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"serviceWorker": true,
"ngswConfigPath": "src/ngsw-config.json",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "rss-podcast-app:build"
},
"configurations": {
"production": {
"browserTarget": "rss-podcast-app:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "rss-podcast-app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [],
"styles": [
"node_modules/normalize.css/normalize.css",
"src/styles.scss",
"node_modules/font-awesome/css/font-awesome.css"
],
"assets": [
"src/assets",
"src/favicon.ico",
"src/manifest.json"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
]
}
}
}
},
"rss-podcast-app-e2e": {
"root": "e2e",
"sourceRoot": "e2e",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "rss-podcast-app:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": [
]
}
}
}
}
},
"defaultProject": "rss-podcast-app",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"styleext": "scss"
},
"@schematics/angular:directive": {
"prefix": "app"
}
}
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';

import { PodcastModule } from './modules/podcast/podcast.module';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AudioService } from './core/services/audio.service';
import { PouchdbAudioService } from './core/services/pouchdb-audio.service';
import { PouchdbSubscribeService } from './core/services/pouchdb-subscribe.service';
import { HeaderComponent } from './core/components/header/header.component';
import { AudioPlayerComponent } from './core/components/audio-player/audio-
player.component';
import { HeaderService } from '@core/services/header.service';
import { SharedModule } from '@shared/shared.module';
import { PodcastService } from '@core/http/podcast.service';
// import { environment } from 'environments/environment';
import { ServiceWorkerModule } from '@angular/service-worker';
import { NgProgressModule, NgProgressInterceptor } from 'ngx-progressbar';
import {Ng5SliderModule} from 'ng5-slider';
import { ReactiveFormsModule } from '@angular/forms';
// Firebase services + enviorment module

import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AuthService } from './Auth_1/shared/services/auth.service';

// import { AppRoutingModule1 } from './Auth_1/shared/routing/app-routing.module';
import { ForgotPasswordComponent } from './Auth_1/components/forgot-password/forgot-
password.component';
import { DashboardComponent } from
'./Auth_1/components/dashboard/dashboard.component';
import { SignInComponent } from './Auth_1/components/sign-in/sign-in.component';
import { SignUpComponent } from './Auth_1/components/sign-up/sign-up.component';
import { VerifyEmailComponent } from './Auth_1/components/verify-email/verify-
email.component';
import { environment } from '../environments/environment';
export const PodcastProvider = (provider: PodcastService) => {

return () => provider.getLocation();
};
@NgModule({
declarations: [
AppComponent,
AudioPlayerComponent,
HeaderComponent,
SignInComponent,
SignUpComponent,
DashboardComponent,
ForgotPasswordComponent,
VerifyEmailComponent
],
imports: [
ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }),
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
NgProgressModule,
PodcastModule,
AppRoutingModule,
Ng5SliderModule,
SharedModule.forRoot(),
// AppRoutingModule1,
AngularFireModule.initializeApp(environment.firebase),
AngularFireAuthModule,
AngularFirestoreModule,
ReactiveFormsModule
],
providers: [
HeaderService,
PouchdbAudioService,
PouchdbSubscribeService,
AudioService,
AuthService,
{ provide: APP_INITIALIZER, useFactory: PodcastProvider, deps: [PodcastService],
multi: true }],
bootstrap: [AppComponent]
})
export class AppModule { }
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PodcastModule } from './modules/podcast/podcast.module';
import { VerifyEmailComponent } from './Auth_1/components/verify-email/verify-
email.component';
import { ForgotPasswordComponent } from './Auth_1/components/forgot-password/forgot-
password.component';
import { AuthGuard } from './Auth_1/shared/guard/auth.guard';
import { SecureInnerPagesGuard } from './Auth_1/shared/guard/secure-inner-pages.guard';
import { SignInComponent } from './Auth_1/components/sign-in/sign-in.component';
import { SignUpComponent } from './Auth_1/components/sign-up/sign-up.component';
import { DashboardComponent } from
'./Auth_1/components/dashboard/dashboard.component';
const routes: Routes = [

{ path: '', redirectTo: 'podcast', pathMatch: 'full', canActivate: [AuthGuard] },
{
path: 'podcast', loadChildren: 'app/modules/podcast/podcast.module#PodcastModule'
},
{ path: 'sign-in', component: SignInComponent, canActivate: [SecureInnerPagesGuard]},
{ path: 'register-user', component: SignUpComponent, canActivate:
[SecureInnerPagesGuard]},
{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
{ path: 'forgot-password', component: ForgotPasswordComponent, canActivate:
[SecureInnerPagesGuard] },
{ path: 'verify-email-address', component: VerifyEmailComponent, canActivate:
[SecureInnerPagesGuard] }
];
@NgModule({
imports: [RouterModule.forRoot(routes, {useHash: true})],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.ts
import { Component } from '@angular/core';
import { PouchdbSubscribeService } from '@core/services/pouchdb-subscribe.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor(private pouchdbSubscribeService: PouchdbSubscribeService) {}
}
app.component.html
<ng-progress [color]="'#FEFF00'" [thick]="true"></ng-progress>
<div class="app">
<app-header class="app__header"></app-header>
<div class="app__content">
<router-outlet></router-outlet>
</div>
<app-audio-player class="app__player"></app-audio-player>
</div>
app.component.scss
.app__content{
display: block;
flex-flow: column;
overflow: hidden;
position: relative;
padding: 70px 0 80px;
}
.app__header{
position: fixed;
top: 0;
z-index: 1900;
}
app.component.spec.ts
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
}).compileComponents();
}));
it('should create the app', async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
it(`should have as title 'app'`, async(() => {
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('app');
}));
it('should render title in a h1 tag', async(() => {
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
}));
});
sign-up.component.ts
import { Component, OnInit } from '@angular/core';
import { AuthService } from "../../shared/services/auth.service";
@Component({
selector: 'app-sign-up',
templateUrl: './sign-up.component.html',
styleUrls: ['./sign-up.component.css']
})
export class SignUpComponent implements OnInit {
constructor(
public authService: AuthService
){}
ngOnInit() { }
}
sign-up.component.html
<div class="displayTable">
<div class="displayTableCell">
<div class="px-logo">
<a href="https://www.positronx.io" target="_blank">
<img src="https://www.positronx.io/wp-content/themes/positronx/img/logo-positronx-
white.svg" alt="positronX.io - Learn Full Stack Development">
</a>
</div>
<div class="authBlock">
<h3>Sign Up</h3>
<div class="formGroup">
<input type="email" class="formControl" placeholder="Email Address" #userEmail
required>
</div>
<input type="password" class="formControl" placeholder="Password" #userPwd
required>
</div>
<input type="button" class="btn btnPrimary" value="Sign Up"
(click)="authService.SignUp(userEmail.value, userPwd.value)">
</div>
<span class="or"><span class="orInner">Or</span></span>
</div>


<button type="button" class="btn googleBtn" (click)="authService.GoogleAuth()">
<i class="fab fa-google-plus-g"></i>
Continue with Google
</button>
</div>
</div>
<div class="redirectToLogin">
<span>Already have an account? <span class="redirect" routerLink="/sign-in">Log
In</span></span>
</div>
</div>
</div>
sign-up.component.spec.ts
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SignUpComponent } from './sign-up.component';
describe('SignUpComponent', () => {
let component: SignUpComponent;
let fixture: ComponentFixture<SignUpComponent>;
declarations: [ SignUpComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SignUpComponent);
component = fixture.componentInstance;
});
it('should create', () => {

expect(component).toBeTruthy();
});
});
verify-email.component.ts
@Component({
selector: 'app-verify-email',
templateUrl: './verify-email.component.html',
styleUrls: ['./verify-email.component.css']
})
export class VerifyEmailComponent implements OnInit {
constructor(
){}
ngOnInit() {
}
}
verify-email.component.html
</a>
</div>
<h3>Thank You for Registering</h3>
<div class="formGroup" *ngIf="authService.userData as user">

<p class="text-center">We have sent a confirmation email to
<strong>{{user.email}}</strong>.</p>
<p class="text-center">Please check your email and click on the link to verfiy your
email address.</p>
</div>


<button type="button" class="btn btnPrimary"
(click)="authService.SendVerificationMail()">
<i class="fas fa-redo-alt"></i>
Resend Verification Email
</button>
</div>
</div>
<span>Go back to?<span class="redirect" routerLink="/sign-in"> Sign in</span></span>
</div>
</div>
</div>
verify-email.component.spec.ts
import { VerifyEmailComponent } from './verify-email.component';
describe('VerifyEmailMessageComponent', () => {
let component: VerifyEmailComponent;
let fixture: ComponentFixture<VerifyEmailComponent>;
declarations: [ VerifyEmailComponent ]
})
}));
beforeEach(() => {
fixture = TestBed.createComponent(VerifyEmailComponent);
});

});
});
sign-in.component.ts
@Component({
selector: 'app-sign-in',
templateUrl: './sign-in.component.html',
styleUrls: ['./sign-in.component.css']
})
export class SignInComponent implements OnInit {
constructor(public authService: AuthService) { }
ngOnInit() { }
}
sign-in.component.html
</a>
</div>
<h3>Sign In</h3>
<input type="text" class="formControl" placeholder="Username" #userName required>
</div>
<input type="password" class="formControl" placeholder="Password" #userPassword
required>
</div>


<input type="button" class="btn btnPrimary" value="Log in"
(click)="authService.SignIn(userName.value, userPassword.value)">
</div>
<span class="or"><span class="orInner">Or</span></span>
</div>


<button type="button" class="btn googleBtn" (click)="authService.GoogleAuth()">
<i class="fab fa-google-plus-g"></i>
Log in with Google
</button>
</div>
<div class="forgotPassword">
<span routerLink="/forgot-password">Forgot Password?</span>
</div>
</div>
<span>Don't have an account?<span class="redirect" routerLink="/register-user"> Sign
Up</span></span>
</div>
</div>
</div>
sign-in.component.spec.ts
import { SignInComponent } from './sign-in.component';
describe('SignInComponent', () => {
let component: SignInComponent;
let fixture: ComponentFixture<SignInComponent>;
declarations: [ SignInComponent ]
})
}));
beforeEach(() => {
fixture = TestBed.createComponent(SignInComponent);
});
});
});
forgot-password.component.ts
@Component({
selector: 'app-forgot-password',
templateUrl: './forgot-password.component.html',
styleUrls: ['./forgot-password.component.css']
})
export class ForgotPasswordComponent implements OnInit {
constructor(
){}
ngOnInit() {
}
}
forgot-password.component.html
<h3>Reset Password</h3>
<p class="text-center">Please enter your email address to request a password reset.</p>

<input type="email" class="formControl" placeholder="Email Address"
#passwordResetEmail required>
</div>


<input type="submit" class="btn btnPrimary" value="Reset Password"
(click)="authService.ForgotPassword(passwordResetEmail.value)">
</div>
</div>
<span>Go back to ? <span class="redirect" routerLink="/sign-in">Log In</span></span>
</div>
</div>
</div>
forgot-password.component.spec.ts
import { ForgotPasswordComponent } from './forgot-password.component';
describe('ForgotPasswordComponent', () => {
let component: ForgotPasswordComponent;
let fixture: ComponentFixture<ForgotPasswordComponent>;
declarations: [ ForgotPasswordComponent ]
})
}));
beforeEach(() => {
fixture = TestBed.createComponent(ForgotPasswordComponent);
});

});
});
auth.gaurd.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from
'@angular/router';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(
public authService: AuthService,
public router: Router
){ }
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
if(this.authService.isLoggedIn !== true) {
this.router.navigate(['sign-in'])
}
return true;
}
}
auth.service.ts
import { Injectable, NgZone } from '@angular/core';
import { User } from "../services/user";
import { auth } from 'firebase/app';
import { AngularFireAuth } from "@angular/fire/auth";
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';
import { Router } from "@angular/router";
@Injectable({
providedIn: 'root'
})
export class AuthService {

userData: any; // Save logged in user data
constructor(
public afs: AngularFirestore, // Inject Firestore service
public afAuth: AngularFireAuth, // Inject Firebase auth service
public router: Router,
public ngZone: NgZone // NgZone service to remove outside scope warning
){
/* Saving user data in localstorage when
logged in and setting up null when logged out */
this.afAuth.authState.subscribe(user => {
if (user) {
this.userData = user;
localStorage.setItem('user', JSON.stringify(this.userData));
JSON.parse(localStorage.getItem('user'));
} else {
localStorage.setItem('user', null);
JSON.parse(localStorage.getItem('user'));
}
})
}
// Sign in with email/password

SignIn(email, password) {
return this.afAuth.auth.signInWithEmailAndPassword(email, password)
.then((result) => {
this.ngZone.run(() => {
this.router.navigate(['dashboard']);
});
this.SetUserData(result.user);
}).catch((error) => {
window.alert(error.message)
})
}
// Sign up with email/password

SignUp(email, password) {
return this.afAuth.auth.createUserWithEmailAndPassword(email, password)
.then((result) => {
/* Call the SendVerificaitonMail() function when new user sign
up and returns promise */
this.SendVerificationMail();
window.alert(error.message)
})
}
// Send email verfificaiton when new user sign up

SendVerificationMail() {
return this.afAuth.auth.currentUser.sendEmailVerification()
.then(() => {
this.router.navigate(['verify-email-address']);
})
}
// Reset Forggot password

ForgotPassword(passwordResetEmail) {
return this.afAuth.auth.sendPasswordResetEmail(passwordResetEmail)
.then(() => {
window.alert('Password reset email sent, check your inbox.');
window.alert(error)
})
}
// Returns true when user is looged in and email is verified

get isLoggedIn(): boolean {
const user = JSON.parse(localStorage.getItem('user'));
return (user !== null && user.emailVerified !== false) ? true : false;
}
// Sign in with Google

GoogleAuth() {
return this.AuthLogin(new auth.GoogleAuthProvider());
}
// Auth logic to run auth providers

AuthLogin(provider) {
return this.afAuth.auth.signInWithPopup(provider)
.then((result) => {
this.ngZone.run(() => {
this.router.navigate(['dashboard']);
})
window.alert(error)
})
}
/* Setting up user data when sign in with username/password,

sign up with username/password and sign in with social auth
provider in Firestore database using AngularFirestore + AngularFirestoreDocument service
*/
SetUserData(user) {
const userRef: AngularFirestoreDocument<any> = this.afs.doc(`users/${user.uid}`);
const userData: User = {
uid: user.uid,
email: user.email,
displayName: user.displayName,
photoURL: user.photoURL,
emailVerified: user.emailVerified
}
return userRef.set(userData, {
merge: true
})
}
// Sign out
SignOut() {
return this.afAuth.auth.signOut().then(() => {
localStorage.removeItem('user');
this.router.navigate(['sign-in']);
})
}
}
auth.service.spec.ts
import { TestBed } from '@angular/core/testing';
import { AuthService } from './auth.service';
describe('AuthService', () => {
beforeEach(() => TestBed.configureTestingModule({}));
it('should be created', () => {

const service: AuthService = TestBed.get(AuthService);
expect(service).toBeTruthy();
});
});
user.ts
export interface User {
uid: string;
email: string;
displayName: string;
photoURL: string;
emailVerified: boolean;
user?: any;
}
podcast.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PodcastRoutingModule } from './podcast-routing.module';

import { PodcastComponent } from './podcast.component';
import { FormsModule } from '@angular/forms';
import { EpisodeListComponent } from './components/episode-list/episode-list.component';
import { CategoryListComponent } from './components/category-list/category-
list.component';
import { SearchComponent } from './pages/search/search.component';
import { HomeComponent } from './pages/home/home.component';
import { FeedComponent } from './pages/feed/feed.component';
import { CategoryComponent } from './pages/category/category.component';
import { HistoryComponent } from './pages/history/history.component';
import { SubscribesComponent } from './pages/subscribes/subscribes.component';
import { PodcastListComponent } from './components/podcast-list/podcast-list.component';
import { FeedHeaderComponent } from './components/feed-header/feed-header.component';
import { HistoryListComponent } from './components/history-list/history-list.component';
import { PodcastService } from '@core/http/podcast.service';
import { SharedModule } from '@shared/shared.module';
import { AuthService } from 'app/Auth_1/shared/services/auth.service';
@NgModule({
imports: [
CommonModule,
FormsModule,
SharedModule,
PodcastRoutingModule
],
declarations: [
EpisodeListComponent,
PodcastComponent,
SearchComponent,
HomeComponent,
FeedComponent,
CategoryListComponent,
PodcastListComponent,
CategoryComponent,
HistoryComponent,
SubscribesComponent,
EpisodeListComponent,
FeedHeaderComponent,
HistoryListComponent
],
exports: [
PodcastComponent
],
providers: [
PodcastService,
AuthService
]
})
export class PodcastModule { }
podcast-routing.module.ts
import { NgModule, Component } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SearchComponent } from './pages/search/search.component';
import { HomeComponent } from './pages/home/home.component';
import { PodcastComponent } from './podcast.component';
import { FeedComponent } from './pages/feed/feed.component';
import { CategoryComponent } from './pages/category/category.component';
import { HistoryComponent } from './pages/history/history.component';
import { SubscribesComponent } from './pages/subscribes/subscribes.component';
import { AuthGuard } from 'app/Auth_1/shared/guard/auth.guard';
const routes: Routes = [

{
path: 'podcast', component: PodcastComponent, canActivate: [AuthGuard],
children: [
{ path: '', redirectTo: 'home', pathMatch: 'full', canActivate: [AuthGuard] },
{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
{ path: 'feed/:id', component: FeedComponent, canActivate: [AuthGuard] },
{ path: 'category/:id/:name', component: CategoryComponent, canActivate: [AuthGuard]
},
{ path: 'search', component: SearchComponent, canActivate: [AuthGuard] },
{ path: 'history', component: HistoryComponent, canActivate: [AuthGuard] },
{ path: 'subscribes', component: SubscribesComponent, canActivate: [AuthGuard] },
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class PodcastRoutingModule { }
podcast.component.ts
import { PodcastRoutingModule } from './podcast-routing.module';
@Component({
selector: 'app-podcast',
templateUrl: './podcast.component.html',
styleUrls: ['./podcast.component.scss'],
})
export class PodcastComponent implements OnInit {
constructor() { }
ngOnInit() {
}
main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
main.js
const { app, BrowserWindow } = require('electron')
let win;
function createWindow () {
// Create the browser window.
win = new BrowserWindow({
width: 600,
height: 600,
backgroundColor: '#ffffff',
icon: `file://${__dirname}/www/assets/logo.png`
})
win.loadURL(`file://${__dirname}/www/index.html`)
//// uncomment below to open the DevTools.

// win.webContents.openDevTools()
// Event when the window is closed.

win.on('closed', function () {
win = null
})
}
// Create window on electron intialization

app.on('ready', createWindow)
// Quit when all windows are closed.

app.on('window-all-closed', function () {
// On macOS specific close process

if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
// macOS specific close process
if (win === null) {
createWindow()
}
})
5.2 MODULE SPECIFICATION

5.2.1 MODULE DESCRIPTION
A module is a collection of source files and build settings that allow you to divide your
project into discrete units of functionality. Your project can have one or many modules and
one module may use another module as a dependency. Each module can be independently
built, tested, and debugged. Additional modules are often useful when creating code libraries
within your own project or when you want to create different sets of code and resources for
different device types, such as phones and wearables, but keep all the files scoped within the
same project and share some code.
5.2.2 ANDROID APP MODULE
Provides a container for your app's source code, resource files, and app level settings
such as the module-level build file and Android Manifest file. When you create a new
project, the default module name is "app". In the Create New Module window, Android
Studio offers the following app modules:
• Phone & Tablet Module
• Android Wear Module
• Android TV Module
• Glass Module
They each provide essential files and some code templates that are appropriate for the
corresponding app or device type.
5.2.3 LIBRARY MODULE
Provides a container for your reusable code, which you can use as a dependency in
other app modules or import into other projects. Structurally, a library module is the same as
an app module, but when built, it creates a code archive file instead of an APK, so it can't be
installed on a device. In the Create New Module window, Android Studio offers the
following library modules
5.2.4 ANDROID LIBRARY
This type of library can contain all file types supported in an Android project, including
source code, resources, and manifest files. The build result is an Android Archive (AAR) file
that you can add as a dependency for your Android app modules.
5.2.5 PROJECT FILES
By default, Android Studio displays your project files in the Android view. This view
does not reflect the actual file hierarchy on disk, but is organized by modules and file types to
simplify navigation between key source files of your project, hiding certain files or
directories that are not commonly used. Some of the structural changes compared to the
structure on disk include the following:
 Shows all the project's build-related configuration files in a top-level Gradle Script
group.
 Shows all manifest files for each module in a module-level group (when you have
different manifest files for different product flavors and build types).
 Shows all alternative resource files in a single group, instead of in separate folders per
resource qualifier. For example, all density versions of your launcher icon are visible
side-by-side.
Within each Android app module, files are shown in the following groups:
Manifests
Contains the AndroidManifest.xml file.
NODEJS
 Node.js files contain tasks that will be executed on certain events
Res
Contains all non-code resources, such as XML layouts, UI strings, and bitmap images,
divided into corresponding sub-directories. For more information about all possible resource
types, see Providing Resources.
5.2.2 PROJECT MODULES
ADMIN
 Login:
- Admin Login to the application using his ID and Password.
 Admin Registration:
- If he will enter his personal details and he will user Id and password through
which he can login to the application.
 My Details:
- Admin can view his personal details.
 Create Data:
- Admin can upload the new data of the after successful login
 Read Data:
- Admin can read the data of the podcast after successful login.
 Update Data:
- Admin can update the data of the podcast after successful login.
 Delete Data:
- Admin can delete the data of the podcast after successful login.
 Logout:
- Admin can logout from from the web page after completing their requirement.
USER
 Login:
- User Login to the application using his ID and Password.
 User Registration:
- If User is a new user, he will enter his personal details and he will user Id and
password through which he can login to the application.
 Favourite:
- User can add the podcast into the favourite and also he can download the
podcast.
 Search:
- User can search the podcast whatever he want by using the category and podcast
author name.
 History:
- User can view the history.
 Profile:
- User can view his profile details.
 Logout:
- User can logout from from the web page after completing their requirement.
This section looks at the development of the audio module will create podcast friendly
syndication feeds with no problems. It also creates nodes on the site which allows the user
to play the file directly or download it, if they don't want to subscribe to a podcast. we tried
Audio, and it seems to create all the necessary tags for each audio file, however it doesn't
have an option for information on the actual podcast feed. It only creates the title, which
can't be edited from what we can stand. The Podcasts module will allow you to upload your
old radio shows so that your listeners can listen to you even if they missed the live. Making
podcasts of its shows proves to be a good way to offer content to your visitors and keep
your shows.
In this section you will be able to fill in all the information about your podcast: its title, a
pretty picture to illustrate it, its date of publication, a quick description of your program and
of course the address of your podcast.
5.3 BASIC CONCEPT AND DESIGN
The architecture of the podcast website is it shows the podcast of what the user wants.
It cannot give the description about the podcast and we can edit and try that effect and we can
download that podcast.
5.4 THE BUILD PROCESS
The build process involves many tools and processes that convert your project into an
Android Application Package (APK). The build process is very flexible, so it's useful to
understand some of what is happening under the hood.
Figure 5.4. The build process of a typical Android app module
The build process for a typical Android app module, as shown in figure 1, follows these
general steps:
The compilers convert your source code into DEX (Dalvik Executable) files, which include
the byte code that runs on Android devices, and everything else into compiled resources.
The APK Packager combines the DEX files and compiled resources into a single APK.
Before your app can be installed and deployed onto an Android device, however, the APK
must be signed.
The APK Packager signs your APK using either the debug or release key store:
 If you are building a debug version of your app, that is, an app you intend only for
testing and profiling, the packager signs your app with the debug key store. Android
Studio automatically configures new projects with a debug key store.
 If you are building a release version of your app that you intend to release externally,
the packager signs your app with the release key store. To create a release key store,
read about signing your app in Android Studio.
 Before generating your final APK, the packager uses the zip align tool to optimize
your app to use less memory when running on a device.
 At the end of the build process, you have either a debug APK or release APK of your
app that you can use to deploy, test, or release to external users.
5.5 SCREENSHOTS
5.5.1 WELCOME PAGE
Figure 5.5.1 Welcome page
DESCRIPTION
Welcome is the first page which appears on the screen after installing the application.
5.5.2 LOGIN PAGE
Figure 5.5.2 Login page
DESCRIPTION
Login page is the page which enables registered user to login into the application.
5.5.3 HOME PAGE
Figure 5.5.3 Home page
DESCRIPTION
Home page is a page which is used to display the interface of the application.
5.5.4 CATEGORIES PAGE
Figure 5.5.4 Categories page
DESCRIPTION
Categories page shows the different categories of podcast. From that the User can select the
different types of categories which the user wants.
5.5.5 FAVORITES PAGE
Figure 5.5.5 Favourites page
DESCRIPTION
Favourites page is used to the user can add the podcast which the user likes.
5.5.6 SEARCH PAGE
Figure 5.5.6 Search page
DESCRIPTION
Search page is used to search the podcast based on Podcast name/Author.
5.5.7 HISTORY PAGE
Figure 5.5.7 History Page
DESCRIPTION
History page is used for the user can see the viewed list of the podcast.
5.5.8 USER PROFILE PAGE
Figure 5.5.8 User Profile Page
DESCRIPTION
Profile page is the page which gives the information about the user which can be edited.
CHAPTER 6
TESTING
Software Testing is evaluation of the software against requirements gathered from
users and system specifications. Testing is conducted at the phase level in software
development life cycle or at module level in program code. Software testing comprises of
Validation and Verification.
6.1 SOFTWARE VALIDATION
Validation is process of examining whether or not the software satisfies the user
requirements. It is carried out at the end of the SDLC. If the software matches requirements
for which it was made, it is validated.
 Validation ensures the product under development is as per the user requirements.
 Validation answers the question – "Are we developing the product which attempts all
that user needs from this software?".
Validation emphasizes on user requirements.
6.2 SOFTWARE VERIFICATION
Verification is the process of confirming if the software is meeting the podcast
requirements, and is developed adhering to the proper specifications and methodologies.
 Verification ensures the product being developed is according to design
specifications.
 Verification answers the question– "Are we developing this product by firmly
following all design specifications?”
 Verifications concentrate on the design and system specifications.
6.3 TARGET OF THE TEST
 Errors -These are actual coding mistakes made by developers. In addition, there is a
difference in output of software and desired output, considered as an error.
 Fault - When error exists fault occurs. A fault, also known as a bug, is a result of an
error which can cause system to fail.
 Failure - failure is said to be the inability of the system to perform the desired task.
Failure occurs when fault exists in the system.
6.4 BLACK-BOX TESTING
It is carried out to test functionality of the program. It is also called ‘Behavioural’ testing.
The tester in this case, has a set of input values and respective desired results. On providing
input, if the output matches with the desired results, the program is tested ‘ok’, and
problematic otherwise.
In this testing method, the design and structure of the code are not known to the tester, and
testing engineers and end users conduct this test on the software.
Fig 6.1: Black box testing

6.4.1 BLACK-BOX TESTING TECHNIQUES
 Equivalence class - The input is divided into similar classes. If one element of a class
passes the test, it is assumed that all the class is passed.
 Boundary values - The input is divided into higher and lower end values. If these
values pass the test, it is assumed that all values in between may pass too.
 Cause-effect graphing - In both previous methods, only one input value at a time is
tested. Cause (input) – Effect (output) is a testing technique where combinations of
input values are tested in a systematic way.
 Pair-wise Testing - The behaviour of software depends on multiple parameters. In
pair wise testing, the multiple parameters are tested pair-wise for their different
values.
 State-based testing - The system changes state on provision of input. These systems
are tested based on their states and input.
6.5 WHITE-BOX TESTING
It is conducted to test program and its implementation, in order to improve code
efficiency or structure. It is also known as ‘Structural’ testing.
In this testing method, the design and structure of the code are known to the tester.
Programmers of the code conduct this test on the code
Fig 6.2: White box testing

The following are some White-box testing techniques
 Control-flow testing - The purpose of the control-flow testing to set up a test case
which covers all statements and branch conditions. The branch conditions are tested
for both being true and false, so that all statements can be covered.
 Data-flow testing - This testing technique emphasis to cover all the data variables
included in the program. It tests where the variables were declared and defined and
where they were used or changed.
6.6 TESTING LEVELS
Testing itself may be defined at various levels of SDLC. The testing process runs parallel
to software development. Before jumping on the next stage, a stage is tested, validated and
verified. Testing separately is done just to make sure that there are no hidden bugs or issues
left in the software.
Software is tested on various levels:
6.6.1 UNIT TESTING
While coding, the programmer performs some tests on that unit of program to know if
it is error free. Testing is performed under white-box testing approach. Unit testing helps
developers decide that individual units of the program are working as per requirement and are
error free.
6.6.2 INTEGRATION TESTING
Even if the units of software are working fine individually, there is a need to find out
if the units if integrated together would also work without errors. For example, argument
passing and data updating etc.
6.6.3 SYSTEM TESTING
The software is compiled as product and then it is tested as a whole. This can be
accomplished using one or more of the following tests:
 Functionality testing - Tests all functionalities of the software against requirement.
 Performance testing - This test proves how efficient the software is. It tests the
effectiveness and average time taken by the software to do desired task. Performance
testing is done by means of load testing and stress testing where the software is put
under high user and data load under various environment conditions.
 Security & Portability - These tests are done when the software is meant to work on
various platforms and accessed by number of persons.
6.6.4 ACCEPTANCE TESTING
When the software is ready to hand over to the customer it has to go through last
phase of testing where it is tested for user-interaction and response. This is important because
even if the software matches all user requirements and if user does not like the way it appears
or works, it may be rejected.
 Alpha testing - The team of developer themselves perform alpha testing by using the
system as if it is being used in work environment. They try to find out how user would
react to some action in software and how the system should respond to inputs.
 Beta testing - After the software is tested internally, it is handed over to the users to
use it under their production environment only for testing purpose. This is not as yet
the delivered product. Developers expect that users at this stage will bring minute
problems, which were skipped to attend.
6.6.5 REGRESSION TESTING
Whenever a software product is updated with new code, feature or functionality, it is
tested thoroughly to detect if there is any negative impact of the added code.
6.7 TEST YOUR APP
Android Studio is designed to make testing simple. With just a few clicks, you can set
up a JUnit test that runs on the local JVM or an instrumented test that runs on a device. Of
course, you can also extend your test capabilities by integrating test frameworks such
as Mockito to test Android API calls in your local unit tests, and Espresso or UI Automator to
exercise user interaction in your instrumented tests. You can generate Espresso tests
automatically using Espresso Test Recorder.
6.8 LOCAL UNIT TESTS
These are tests that run on your machine's local Java Virtual Machine (JVM). Use these tests
to minimize execution time when your tests have no Android framework dependencies or
when you can mock the Android framework dependencies.
At runtime, these tests are executed against a modified version of android.jar where
all final modifiers have been stripped off. This lets you use popular mocking libraries, like
Mockito.
6.9 INSTRUMENTED TESTS
These are tests that run on a hardware device or emulator. These tests have access
to Instrumentation APIs, give you access to information such as the Context of the app you
are testing, and let you control the app under test from your test code. Use these tests when
writing integration and functional UI tests to automate user interaction, or when your tests
have Android dependencies that mock objects cannot satisfy.
Because instrumented tests are built into an APK (separate from your app APK), they must
have their own AndroidManifest.xml file. However, Gradle automatically generates this file
during the build so it is not visible in your project source set. You can add your own manifest
file if necessary, such as to specify a different value for `minSdkVersion` or register run
listeners just for your tests. When building your app, Gradle merges multiple manifest files
into one manifest.
6.10 RUN A WEB PAGE
To run a test, proceed as follows:
1. Be sure your project is placed in Angular Folder.
2. Run your test in one of the following ways:
o In the Project folder , open command prompt window
o In the command prompt window, run ng serve
o It will automatically open the browser on ip address localhost:4200
6.11 USER TESTING
Along with the other testing methods in this guide, user testing can provide specific
and valuable insights about the usability of your app.
To find users who can test your app, use methods such as the following:
 Reach out to local organizations, colleges, or universities that provide training for
people with disabilities.
 Ask your social circle. There might be people with disabilities who are willing to
help.
 Ask a user testing service (such as usertesting.com) if they can test your app and
include users with disabilities.
 Join an accessibility forum, such as Accessibility or Eyes-free, and ask for volunteers
to try your app.
6.12 TEST CASES
CASE 1
TITLE: User Login.
DESCRIPTION: User login is which enables registered user to login into the application.
ASSUMPTION: It is assumed user can login if his account exists else can register to the
application.
STEPS: 1. User can get access to application by running the web page
2. User can login into his account by entering username and password else can
register to the application.
EXPECTED OUTPUT: User will login into his account else can register to the application.
CASE 2
TITLE: Registration page.
DESCRIPTION: It is used for new users to register themselves into application.
ASSUMPTION: It is assumed that any new user can register by providing their details.
STEPS: 1.User can register by going through user login
2. New user has to provide valid details in order to register into the application.
EXPECTED OUTPUT: A new user can register into the application successfully.
CASE 3
TITLE: Home page
DESCRIPTION: Home page is the page which gives the information about the application.
ASSUMPTION: It is assumed that user can view display in the application.
STEPS: Home page can be accessed after logging in into the application by user.
EXPECTED OUTPUT: User can get the display of the application.
CASE 4
TITLE: Favourite page.
DESCRIPTION: Favourite page is a page which is used to add the podcast the user wants.
ASSUMPTION: It is assumed that user can add the favourite podcast in the application.
STEPS: Favourite page can be accessed after logging in into the application by user.
EXPECTED OUTPUT: Any podcast the can add into the favourite.
CASE 5
TITLE: Search for a song
DESCRIPTION: This page is used to search for a song from the play list using an external
API.
ASSUMPTION: It is assumed that user can search for a song from the play list using an
external API.
STEPS: This page can be accessed after user logging in, user can search for a song from the
play list using an external API.
EXPECTED OUTPUT: User can search for a song from the play list using an external API.
CASE 6
TITLE: Play the song
DESCRIPTION: This page is used to play the song from the playlist without switching the
browser tabs.
ASSUMPTION: It is assumed that user can play the song from the playlist without switching
the browser tabs.
STEPS: This page can be accessed after user logging in, user can play the song from the
playlist without switching the browser tabs.
EXPECTED OUTPUT: User can play the song from the playlist without switching the
browser tabs.
CASE 7
TITLE: History.
DESCRIPTION: This page is used to see the history.
ASSUMPTION: It is assumed that user can see the data of the podcast.
STEPS: This page can be accessed after user logging in, user can see the podcast data
EXPECTED OUTPUT: User can see the podcast data.
CASE 8
TITLE: Profile page
DESCRIPTION: Profile page is the page which gives the information about the user & can
be edited.
ASSUMPTION: It is assumed that user can view/edit his details in the application.
STEPS: 1.This page can be accessed after logging in into the application by user.
2. If any details provided previously are wrong/changed, can be edited here.
EXPECTED OUTPUT: Any wrongly given details or any changed details can be edited.
CASE 9
TITLE: Edit page.
DESCRIPTION: Edit page is a page which is used to edit/update user information.
ASSUMPTION: It is assumed that user/doctor can edit his details in the application.
STEPS: 1.Edit page can be accessed after logging in into the application by user/doctor.
2. If any details provided previously are wrong/changed, can be edited here.
EXPECTED OUTPUT: Any wrongly given details or any changed details can be edited.
CASE 10
TITLE: Logout page.
DESCRIPTION: This page is used to logout.
ASSUMPTION: It is assumed that user can logged out from the webpage.
STEPS: 1.This page can be assessed by the users after logging in.
2. After successful logout it redirects to Login/home page.
EXPECTED OUTPUT: Logout from the web page occurs here.
CHAPTER 7
FUTURE ENHANCEMENT AND CONCLUSION
7.1 IMPORTANCE OF RESEARCH
We have used few technologies in our project, among them Angular and Node is very
important as our final application should run on this platform. We have spent many days
learning Angular and Node as it was a new technology. Our application will be successfully
built on this as we were able to use many built-in features of Angular.
7.2 FUTURE ENHANCEMENT
• We are planning to extend digital podcast with even more music providers in the
future.
7.3 CONCLUSION
With the increase of easy-to-use programs, and the increase of mobile technology, we are
able to create, access, and listen to podcasts wherever we go. There is a huge selection of
podcasts being offered to consumers, with new ones being offered every day. No matter
what the subject you are interested in, chances are there is a podcast for it. Podcasts offer
educators and students new ways to share knowledge and communicate about
understandings. I hope that this learning object has increased your understanding of
podcasting and has allowed you to consider using them in your life.

Podcasts: An Introduction

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Podcasts: An Introduction

Uploaded by

Copyright:

Available Formats

CHAPTER 1

Title: Efficient discovery of unknown Ads for audio Podcast content

Title: Podcasting: An Internet – based social technology for blended learning

Title: A similar content retrieval method for Podcast episodes

Title: The Technology underlying Podcasts

3.2 PROPOSED SYSTEM

3.7 SOFTWARE AND HARDWARE REQUIREMENTS

//Rename the file "mynewfile1.txt" into "myrenamedfile.txt":

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">

Read more about the ng-model directive in the next chapter.

AngularJS Global API

<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to

<a href="#!london">City 1</a>

Figure 4.2 Data flow diagram

4.4 SEQUENCE DIAGRAM

Figure 4.4.1: Sequence Diagram

4.5 COLLABORATION DIAGRAM

Figure 4.5.1: Collaboration Diagram

4.6 CLASS DIAGRAM

<meta name="viewport" content="width=device-width, initial-scale=1">

import { AppComponent } from './app.component';

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

// Firebase services + enviorment module

import { AuthService } from './Auth_1/shared/services/auth.service';

export const PodcastProvider = (provider: PodcastService) => {

const routes: Routes = [

export class SignUpComponent implements OnInit {

import { SignUpComponent } from './sign-up.component';

it('should create', () => {

<div class="formGroup" *ngIf="authService.userData as user">

import { VerifyEmailComponent } from './verify-email.component';

it('should create', () => {

export class SignInComponent implements OnInit {

constructor(public authService: AuthService) { }

import { SignInComponent } from './sign-in.component';

export class ForgotPasswordComponent implements OnInit {

<p class="text-center">Please enter your email address to request a password reset.</p>

import { ForgotPasswordComponent } from './forgot-password.component';

it('should create', () => {

export class AuthGuard implements CanActivate {

export class AuthService {

// Sign in with email/password

// Sign up with email/password

// Send email verfificaiton when new user sign up

// Reset Forggot password

// Returns true when user is looged in and email is verified

// Sign in with Google

// Auth logic to run auth providers

/* Setting up user data when sign in with username/password,

import { AuthService } from './auth.service';

it('should be created', () => {

import { PodcastRoutingModule } from './podcast-routing.module';

const routes: Routes = [

import { AppModule } from './app/app.module';

//// uncomment below to open the DevTools.

// Event when the window is closed.

// Create window on electron intialization

// Quit when all windows are closed.