How to Open PDF/File in Ionic on Android

How to Open PDF/File in Ionic on Android?

If you recently tried to open a file in Ionic from the application dir using `fileOpener2` plugin you may have encountered an error `File Not Found` which could indicate permission error.

It turns out you can’t open a file from `applicationDirectory` directly, you have to copy it into another directory:

if (this.platform.is('android')) {
  const self = this;
  const targetFile = self.file.dataDirectory + '/' + yourFileName;
		
  self.file.copyFile(self.file.applicationDirectory + 'www/assets/', yourFileName, 
                     self.file.dataDirectory, yourFileName).
           then(function (res) {
	     self.fileOpener.open(targetFile, 'application/pdf');
	});
}

Install the Cordova Plugin here:

https://github.com/pwlin/cordova-plugin-file-opener2
https://ionicframework.com/docs/native/file-opener

How To Create Downloadable CSV File in JS/Angular

 
import { SecurityContext } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
private sanitizer: DomSanitizer;

downloadCSV() {

  let blob = new Blob([yourdata], { type: 'text/csv' });
  let urlPath = this.sanitizer.sanitize(SecurityContext.URL,
this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(blob)));
    
  let tempLink = document.createElement('a');
  tempLink.href = urlPath;
  tempLink.setAttribute('download', 'download.csv');
  tempLink.click();
}
      

How to Set proper Rules on Google Firebase DB

How to Set proper Rules on Google Firebase DB:

Here is an example of a pretty simple rules setting. We don’t want just anyone to access user information. The users sub directory is restricted to the user logged in. The rest is fully restricted and is only accessible via admin api.

service cloud.firestore {
  match /databases/{database}/documents {
    // Make sure the uid of the requesting user matches name of the user
    // document. The wildcard expression {userId} makes the userId variable
    // available in rules.
    match /someusercollection/{userID}/{document=**} {
      allow read, update, delete: if request.auth.uid == userId;
      allow create: if request.auth.uid != null;
    }
    match /somecollection/{document=**} {
      allow read, update, delete, create: if false;
    }
  }
}

Read more on the Firebase Docs.

Calculate time difference between two times in JS

function CountingMinutes(str) { 

  let arr = str.split("-");
  // console.log(arr[0]);
  // code goes here  
  let day = 24 * 60;
  
  let end = getMinutes(arr[1]);
  let start = getMinutes(arr[0]);
  
 // console.log('end is ' + end);
 // console.log('start is ' + start);
  if (end < start){
    end += day;
  }
  return (end-start) ; 
         
}

function getMinutes(time){
  
  let hr = parseInt(time.split(':')[0]);
  let min = parseInt(time.split(':')[1].match(/[0-9]/g).join(""));
  
  let morning = time.match(/am/g);
  let pm = time.match(/pm/g);
 // console.log(pm);
  if (pm && hr < 12){
    hr += 12;
  }
  else if (morning && hr === 12){ // convert midnight to zero
    hr += 12;
  }
  
  let totalMin = parseInt((hr*60) + min);
  
  return totalMin ;
}                       

How to Create Looping Sound with Amazon Alexa Skill App

An example how to play audio with AWS Lambda function for your Amazon Alexa Skill:

The way to do this is to append the same mp3 file to the play queue once the current file is “nearly finished” playing.


const Alexa = require('ask-sdk-core');

const soundURL = 'https://urltosomefile.mp3';
let expectedPreviousToken = '';

const LaunchRequestHandler = {
	canHandle(handlerInput) {
	  return handlerInput.requestEnvelope.request.type === 'LaunchRequest';
	},
	handle(handlerInput) {

	expectedPreviousToken = 'sometoken' + Math.random();
	return handlerInput.responseBuilder
	 .speak('start playing sound')
	 .addAudioPlayerPlayDirective('REPLACE_ALL', soundURL, expectedPreviousToken, 0, null)
	 .withSimpleCard('Example', 'Example')
	 .getResponse();
	}
};

const StartSoundHandler = {
	canHandle(handlerInput) {
		return handlerInput.requestEnvelope.request.type === 'IntentRequest'
		&& handlerInput.requestEnvelope.request.intent.name === 'StartSoundHandler';
	},
	handle(handlerInput) {

	 expectedPreviousToken = 'sometoken'+Math.random();
	 return handlerInput.responseBuilder

	 .addAudioPlayerPlayDirective
              ('REPLACE_ALL', soundURL, expectedPreviousToken, 0, null)
	 .withSimpleCard('Example', 'Example')
	 .getResponse();
	}
};


const ExitHandler = {
	canHandle(handlerInput) {
	const request = handlerInput.requestEnvelope.request;

	return request.type === 'IntentRequest' &&
		(request.intent.name === 'AMAZON.StopIntent' ||
		request.intent.name === 'AMAZON.CancelIntent');
	},
	handle(handlerInput) {
		return handlerInput.responseBuilder
		.addAudioPlayerStopDirective()
		.getResponse();
	}
};

const SessionEndedRequestHandler = {
	canHandle(handlerInput) {
		return handlerInput.requestEnvelope.request.type === 'SessionEndedRequest';
	},
	handle(handlerInput) {
		//any cleanup logic goes here
		return handlerInput.responseBuilder.getResponse();
	}
};

const PausePlaybackHandler = {
	canHandle(handlerInput) {

	const request = handlerInput.requestEnvelope.request;

	return request.type === 'IntentRequest' &&
		request.intent.name === 'AMAZON.PauseIntent';
	},
	handle(handlerInput) {
		return handlerInput.responseBuilder
			.speak('Sound is paused.')
			.addAudioPlayerStopDirective()
			.withSimpleCard('Example', 'Bye!')
			.getResponse();
	},
};


const AudioPlayerEventHandler = {
	canHandle(handlerInput) {
		const request = handlerInput.requestEnvelope.request;

		return request.type === 'AudioPlayer.PlaybackStarted' ||
			request.type === 'AudioPlayer.PlaybackStopped' ||
			request.type === 'AudioPlayer.PlaybackNearlyFinished' ||
			request.type === 'AudioPlayer.PlaybackFailed';
	},
	handle(handlerInput) {
		const request = handlerInput.requestEnvelope.request;

		switch (request.type) {

		 case 'AudioPlayer.PlaybackStarted':
		   expectedPreviousToken = request.token;
		   return handlerInput.responseBuilder
		     .getResponse();

		 case 'AudioPlayer.PlaybackFinished':
		  return handlerInput.responseBuilder
		  .getResponse();

		 case 'AudioPlayer.PlaybackStopped':
			 return handlerInput.responseBuilder
			 .getResponse();

		 case 'AudioPlayer.PlaybackNearlyFinished':

		   return handlerInput.responseBuilder
		      .addAudioPlayerPlayDirective
                       ('ENQUEUE', soundURL, 'sometoken', 0, expectedPreviousToken)
		       .getResponse();

		 case 'AudioPlayer.PlaybackFailed':
			 console.log('Playback Failed');
			 break;
		}

		return handlerInput.responseBuilder.getResponse();
	},
};

const ErrorHandler = {
	canHandle() {
		return true;
	},
	handle(handlerInput, error) {
		console.log(`Error handled: ${error.message}`);

		return handlerInput.responseBuilder
			.getResponse();
	}
};


exports.handler = Alexa.SkillBuilders.custom()
	.addRequestHandlers(
		LaunchRequestHandler,
		StartSoundHandler,
		ExitHandler,
                SessionEndedRequestHandler,
		PausePlaybackHandler,
		AudioPlayerEventHandler)
	.addErrorHandlers(ErrorHandler)
	.lambda();

How To Build Production and Release Version of Ionic App

To make the production and release version of Android app using Ionic run:

ionic cordova build ios --prod --release

This should run the same as the expanded version:

ionic cordova build ios --minifycss --optimizejs --minifyjs --release

You may need to run with sudo in front of the command if you have permission issues.

For iOS builds the –release flag does not seem to do anything in my testing. I could not find any official documentation explaining what this flag does to iOS builds.

For more detail visit the ionic documentation on building
https://ionicframework.com/docs/cli/commands/cordova-build

JS Infinite Alert Prank Code gets Japanese Girl in Serious Trouble

Ars Technica Reporting:

Explaining her actions, the girl said that she’d run into such pranks herself and thought it would be funny if someone clicked the link.

The Twitter user referenced in the message, 0_Infinity_, has a protected account, but the user left a message in their bio field suggesting that they don’t understand why there’s so much fuss about the script today, as it was written in 2014.

To protest the actions of the Japanese police and the absurdity of calling this act a crime, Tokyo developer Kimikazu Kato has published on GitHub a project called Let’s Get Arrested. Forking the project and then creating a branch named gh-pages will create a simple GitHub-hosted website that contains nothing but the infinitely looped alert, putting criminality at our fingertips.

for ( ; ; ) {
    window.alert(" ∧_∧ ババババ\n( ・ω・)=つ≡つ\n(っ ≡つ=つ\n`/  )\n(ノΠU\n何回閉じても無駄ですよ~ww\nm9(^Д^)プギャー!!\n byソル (@0_Infinity_)")
}

Calling her a criminal is totally absurd.

How to Dynamically Load Dark Mode CSS with JavaScript

How to Dynamically Load Dark Mode CSS in your Website or WebApp (Ionic, React, or Angular):

1. Create the two separete css files, one for dark colors and one for bright
2. Upload those to your server to css folder
3. Use the script example below to load the appropriate css file based on the hours in the day.


function loadcssfile(filename, filetype){
    if (filetype=="css"){ //check filename is an external CSS file
        var fileref=document.createElement("link");
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", filename);
    }
    if (typeof fileref!="undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref);
}

var date = new Date();

 if (date.getHours() >= 19 || date.getHours() <= 7) // after 7pm before 7am
	loadcssfile("../css/darkmode.css", "css");
 else
	loadcssfile("../css/lightmode.css", "css");

Don't blind your readers at night -_-

If you want to incorporate sunset and sunrise you can look into Suncal library, but you will have to request user's location which is always rude and not recommended.

How To Embed and Open PDF files in Ionic App on iOS

This is a solution for storing and opening pdf files inside your app for offline use.

  cordova.plugins.fileOpener2.open(
        cordova.file.applicationDirectory + 'www/img/sample.pdf',
        'application/pdf',
        {
          error: function (e) {
            console.log('Error status:'+e.status+'- Error message:'+ e.message);
          },
          success: function () {
            console.log('file opened successfully');
          }
        }
      );

Opening the pdf should be fairly simple using the cordova.plugins.fileOpener2 plugin, but I ran into a strange issue because my app name in the config.xml contained a space such as: <name>My App</name>. This caused the iOS to misread the file path. Removing this space in the app name fixed the file path on iOS.

I put the sample pdf doc in the ionic project under my images folder www/img/sample.pdf.

Good luck!