Closer look at the DNA of the OpenFin Platform API
Mar 23, 2020
How to do social Media sharing in your PWA
PWA using Web Share API Have you wondered how you can make a use of the "social" sharing API PWA? You know, when you want to share something, and it gives you the option to share via email, Twitter, Instagram, etc? Well, it's actually very easy! Take a look at the demo app to test it on your device. LIVE DEMO https://pwa-share-api.firebaseapp.com/ About the project I have built the sample project that can be found in this repo. In this project, you can see how I added the share functionality to the PWA , but you don't need a service worker or a PWA to add this functionality. I added it to this project because I wanted to show you how to do it specifically in a PWA, but you can add my code to any web app easily! Web Share API The bland definition of what a WSA is: > The Web Share API is meant to help developers implement sharing functionality into their apps or websites, but using the device’s native sharing capabilities instead of having to resort to scripts from the individual social platforms and DIY implementations. The API surface is a simple as it gets.- alligator.io The Web Share API has two share methods: share() and canShare(). The ShareData dictionary of the web share v1 consists of several optional members: text member: Arbitrary text that forms the body of the message being shared. title member : The title of the document being shared. May be ignored by the target. url member : A URL string referring to a resource being shared. The canShare() method contains an extra field which is the files property. files member: A File array referring to files being shared. To read more about it, check out this link So let's have a look at how it actually works. First, let's collect data to make our ShareData dictionary. ` Then, after we have declared what we want to share, we can use it in the .share() method. ` We can put that inside of a function, called onShare(), for example. ` Then pass the onShare() as a click handler to the share button. ` If you want to take it to the next level, you can check to make sure the *web share api* is supported by your browser. Your code will look as follows: ` If you want to use the canShare(), to send files, your code might look like this ` Browser Support If you go to canisue.com, you can see that browser's support for the share() method. Pretty much every major browser supports it. What about the canShare() method? Not as good as the share() method, hopefully it gets to more browsers soon. Resources https://www.w3.org/TR/web-share/#sharedata-dictionary https://alligator.io/js/web-share-api/ https://web.dev/web-share/...
Feb 7, 2020
PWA Push Notifications with Firebase (Cloud Messaging)-pt1
Push Notification In Your PWA Have you ever wondered how to add the famous/annoying push notifications to your app? Well, in this tutorial I'm going to show you how to do it using Firebase Cloud Messaging. *Note:* This tutorial requires some basic knowledge on PWAs and Service Workers. You can take a look to my Intro to PWA and Service Workers here and About PWA and notifications here. Before we begin, I need to clarify that the Notification API, and the Push API, are not the same. People get them confused all the time. Push API: The Push API gives web applications the ability to receive messages pushed to them from a server, whether or not the web app is in the foreground, or even currently loaded, on a user agent. This lets developers deliver asynchronous notifications and updates to users that opt in, resulting in better engagement with timely new content. Let's doooo it!! The final code is in the FINAL branch inside of the repo. 1) Clone this repo: https://github.com/devpato/pwa-FCM-notifications-tutorial As you can see, I already have the basic structure of the app created for you, since we are only going to worry about how to send the messages via push notifications using the Firebsae Cloud Messaging service. 2) Navigate to the index.html file. Notice I imported Firebase for you: ` 3) Navigate to Firebase.com, and create an account if you don't have one. 4) Once you are in the Firebase console, navigate to project settings (in case you don't have a project yet - just create it there) 5) Inside of project setting, under the General tab scroll all the way down to find your Firebase SDK snippet (if it's not there yet - this means that you've created a new project, and need to add there an app. Either way, this can be done in the same place where you then will have your SDK snippet - under the General tab). Copy paste it in a safe place. The snippet should look like this: 6) Go to your index.js file, and copy paste the following after the global variables I declared for you. Replace it with your project's customized code - the snippet from step 4. ` 7) Right after - initialize the firebase instance. ` 8) Then, we are going to create a constant called messaging, and will set it to firebase messaging service. ` 9) Time to request permission from firebase cloud messaging. Once we get the thumbs up, they will give us a token as a promise. ` 10) Then, we are going to use the messaging.onMessage() method. This is used for receiving data, and notification payloads, by all users that are currently viewing the page (the page is in the foreground). To do so, we add the following code: ` 11) Notice a firebase-messaging-sw.js file. This file name is going to be searched by the Firebase SDK. The file needs to be in the ROOT of your project. The Firebase SDK will do some magic in the background to register the file as a service worker. 12) Inside of your firebase-messaging-sw.js, initialize the Firebase app by passing in the messagingSenderId. The sender id can be found inside of your project settings as the following image shows. ` 13) Retrieve an instance of Firebase Messaging so that it can handle background messages. ` 14) Background message handler (this one will be invoked when the page is in the backround) ` Test The Notification 15) Run the app using any http server 16) Inside of your Cloud Messaging settings (a tab in the Firebase Console > Project Settings), copy the server key. 17) If you have a Postman http client, do the following: POST URL:* https://fcm.googleapis.com/fcm/send * HEADERS: Content-Type - application/json Authorization - key=server_key BODY: ` Then, click the Send button. At this point, if our app is in the foreground (it is currently opened tab in your browser), then you'll see the message we've sent in the console - handled by messaging.onMessage. But if it is in the background, then it will be handled by messaging.setBackgroundMessageHandler in the service worker, and you'll see something like this: Test your app on a real device by deploying to Firebase or any other hosting provider. If you want to host your app on the Firebase - take a look at my other tutorial. In the next tutorials, I will show you how to successfully subscribe to notifications and push them using the Firebase console....
Feb 3, 2020
Intro To Performance Analytics with Firebase
The Firebase suite includes multiple products, about which you can read more here. In this article, however, I'm going to talk about the Performance Monitoring product. I'm going to show you how to use it in an Angular app, but the process for React, VueJS, etc, is very very similar. What Is Performance Monitoring in Firebase? Thanks to this product, you can observe the performance of your app. By using the product, you see the areas for improvement in your code. This product can help you avoid crashes by increasing your code quality. Features Of Performance Monitoring - Customize monitoring for your app - Automatically measure app startup time, HTTP/S network requests, and more - Gain insight into situations where app performance could be improved Let's get started *Note:* I'm assuming you have a Firebase account, and any project there that can be used throughout this article 1) On the left navbar, inside of a Firebase console, you will see Performance. Click it. This is where your data will be populated after 12-24hrs of monitoring. 2) Now, go to project settings: 3) Then, scroll all the way down, and copy/paste the JSON with all your project settings in a safe place. If you don't see those settings as shown on the screenshot, you might need to register a new web-app for the current project (instructions on how to do this are given on the same page in Project settings > General). 4) Navigate to your project directory in the command line, and run: ` 5)Import the Firebase modules in your app.module.ts ` 6) Inside of your app.module.ts, make sure you add the above modules into the imports array as follows: ` 7) Now, in your service, or wherever you are reading the data from Firebase, you can add a trace to trace the time it takes to load the data. ` Note: *places* is the name of my collection inside of Firebase, and *placesQuery* is the name I gave to my trace. You can name it however you want. __Now your app is ready to start getting tracked by Firebase's performance tooling. __ Remember You can always write custom traces whether you are using Angular, React, or plain Vanilla JS. Time to view our App Performance Note: In order to see your app performance, you need to deploy your app and give Firebase approximately 24 hours to collect some data. 7) Go back to Firebase-> Performance Tab, you should see something like this: You will see this dashboard showing some basic data per country, and per enviroment you have used your app. 8) Now, click on View Traces, and click on the enviroment you want to be the traces. You will see a metrics dashboard If you click on View More, you will see more information about that specific metric. Check it out! 9) Now go back to the previous page and click on device tab. Then click on the trace you created to view the performance data. In my case, my custom trace is placeQuery. 10) After clicking on the custom trace, you will see a dashboard that is similar to the one in the picture below. Click on View More. 11) After clicking on view more, you will see some specific traces realted to your custom trace. As you can see, you have the option to see the metrics depending on different factors like the browser, country, etc. 12) You can also set parameters to see when the performance on the page is below the average by setting a threshold. All of these performance metrics will help you understand how your app performs in different conditions to improve the user experience for your customers....
Jan 28, 2020
How to add Notifications to your PWA
Have you ever wondered how to add those annoying (but useful) notifications to your progressive web app? Well in this tutorial, I'm going to show you how! What are we building? Live Demo https://pwa-notification-td.firebaseapp.com/ Before We Start We will make use of the Notification API Notification API: The Notification interface of the Notifications API is used to configure and display desktop notifications to the user. These notifications' appearances, and specific functionalities, vary across platforms, but generally provide a way to asynchronously provide information to the user. *Note: *The notification API is not the same as the Push API. Time To Get Your Hands Dirty 1) Clone this repo: https://github.com/devpato/pwa-notifications 2) You will see 3 folders. The ones that matter are the START and the FINAL folder. In the FINAL folder, you can see the final code, but for the purpose of this tutorial, and for you to learn, just focus on the START folder. 3) Navigate to the main.js file inside of the scripts folder 4) add the following code ` The notificationButton is the button that will trigger the notification in our app. If you go to the index.html, you will see the button there that I've already created for you. The swRegistration is just a global variable that will store our service worker. 5) Now let's create a function called initializeApp. This function will handle everything that needs to be triggered when the app first loads. ` To learn more about the PushManger, visit : https://developer.mozilla.org/en-US/docs/Web/API/PushManager 6) When the app first loads, we need to call the initializeApp(). function. To accomplish this - add the call before the declartion of the function itself. 7) Now we need to create a new function called initializeUi. This function will look as follows: ` The only purpose of this function is to attach a click event to the notificationButton. So when the user clicks on the button, something will happen. 8) Now inside of the initializeApp() (function we previously created), we invoke the initializeUi();, right after the swRegistration = swReg; expression: ` By doing this, we will initilize the UI once the registration of the service worker has been successful. 9) Time to create a new function called displayNotification. The function will look like this: ` 10) Go back to the initializeUi() inside of the click callback, where it says "Do something here". Replace that line with: ` Your code will look like this: ` 11) Finally, we are going to create a notification function that will contain the information we want to display in our notification. ` 12) Inside of your displayNotification() function, you will see we are calling the notification(), but it's commented out. Simply uncomment it , so the code can be triggered. 13) The final code will look like this: https://github.com/devpato/pwa-notifications/blob/master/final/scripts/main.js 14) Test the notification in your browser. If you want to test it on a real device, you need to deploy it, and make sure that the deployed app gets served using https. You can you use firebase hosting for this. As you might have noticed, we registered a service worker, but we didn't add any code to it becaue it wasn't necessary. In the the next tutorial, we will actually be doing more with the service worker. In that tutorial, I will show you how to send push notifications from the server using Firebase Cloud Messaging. So, wait a bit and we'll explore much more about Service Worker features ;)...
Jan 21, 2020
Web App Deployment with Firebase in 2 minutes
In this tutorial, I'm going to show you how to deploy your web app to Firebase in 2 minutes! (that's the goal 😏) Setting Up Firebase 1) Go to https://firebase.google.com/, and sign in with your Google account. 2) Go to Console 3) Click on Add project 4) Enter the name of your project 5) Disable Google Analytics 6) Click on Create project 7) Click on Hosting on the left sidebar 8) Now, on the main banner click on Get started 9) Install the Firebase CLI tool in your machine by running: ` Building Your Project 10) Before you can deploy your project, you have to build it. If you are using React or Angular, you can easily do this by running the following command: ` Note: Depending on the tech stack you are using (React, Vue, Angular, etc), a folder will be created after running the build command. This folder will contain your HTML, CSS, JS, etc. Firebase App Setup 11) Inside of your project, open the command line and run: ` 12) Then run: ` 13) Select Hosting 14) Select 'use an exciting project' and select the project you just created in Firebase. 15) When it asks you about the public directory, you select the folder that was created whenever you ran your build command. E.g In React it's build, and in Angular it's dist/Your-project-name 16) When asked to configured as a web app, enter Y 17) When asked about overwriting the index.html type N App Deployment 18) run the following command: ` After a successfull deployment, you should see something like this: Now, clicking on Hosting URL, should open the web app you just deployed. 19) You can also access the hosting url in your Firebase console. You can also setup a custom domain via the console....
Jan 13, 2020
Realtime App With Angular and Firestore (AngularFire)
Dec 11, 2019
Angular Libraries with Nx for Enterprise Apps
In this tutorial, I'm going to show you how to work with an Angular library, inside of your Nx Workspace, in your next enterprise project. What is Nx? Nx is an extensible dev tool for monorepos. "Using Nx, you can add TypeScript, Cypress, Jest, Prettier, Angular, React, Next.js, and Nest into your dev workflow. Nx sets up these tools and allows you to use them seamlessly. Nx fully integrates with the other modern tools you already use and love." - Nx Team. Why Use Angular Libraries? You should use Angular libraries because sharing code across one app is easy, but sharing code between different projects requires extra steps. When we do encounter services or components that can be reused across different teams and projects, and that ideally do not change very often, we may want to build an Angular Library. Downside Of Using Libraries? - You have to link your library to your main project, and rebuild it on every change. - You will need to keep syncing your project with the latest version of the library. Advatanges Of Using Libraries? - We need to think and build these modules with reusability in mind. - Publish and share these libraries with other teams or projects. What are Monorepos? Monorepos are a source control pattern, in which essentially all of the codebase lives in the same repository. All projects will always use the latest version of the code. That's one of the reasons why Nx comes in handy when working with libraries. Advatanges Of Using Angular Monorepos? - Same library version for every app. - Ease of maintenance: when you update a shared library, you update it for all apps. - No conflicts between versions. For more information on Angular Monorepos Let's Get Our Hands Dirty 1) Run the following command in your terminal to install Nx globally. ` 2) Create a Nx Workspace. When asked about 'preset', select empty. ` When asked what CLI should power your Nx workspace - select Angular CLi Nx Workspace Structure 3) Add the capability to create Angular applications via: ` 4) Create a new angular app inside of your Nx workspace. ` Then it will ask you which stylesheet format would you like to use. Select sass. press enter The next question will be, "Would you like to configure routing for this application? (y/N)" Type y press enter Project Structure 5) Serve the Angular app, and go to http://localhost:4200. ` You should see something like this: For this app, we are going to create a library that contains an employee interface that will be shared across multiple applications. 6) Create a sharable interface with the following command: ` 7) Go to libs/employee/src/lib/employee.ts and "copy-paste" the following: ` 8) Go to your app.component.ts file inside of your employees application. Whenever you need to use the employee's interface inside of this workspace, you will import it to your file as following: ` *Note: If You are using vscode and doens't recognize it - restart vscode.* A cool thing about Nx is that, if you have your backend inside of this workspace, you can reuse this interface as well. Creating A UI Library 9) To create the ui library, run the following command: ` Your project structure will look like this: 10) Now go to your ui.module.ts. You file should look like this: ` Time To Create A Component In Our UI Library 11) Run the following command: ` Your project structure should look like this 12) Now lets go to your employee-list.component.ts file insdie of our ui library. - You will add the employee interface we created. - You will create an input that takes an array of employees. - We will add a trackBy function just for you to see how we create one for optimization. Your file should look like this: ` 13) Inside of your employee.component.html file ` As you can see, I'm using the trackBy function to promote better performance of our app. For more information on trackby visit this link. Creating A Service 14) Run the following command to create a service inside of our ui library: ` 15) Now go to your ui library, and search for your employee.service file, and make sure it looks like the following: ` 16) Now go to your index.ts file 17) Add the service to your file. Your file should look like this: ` 18) Now go to your ui.module.ts. The file should look like this: ` *__Note: you can see I have added the HttpClientModule and Nx has added the component for me already.__* Time To Use Our UI Library 19) Go to your employees app, and open the app.module.ts - Inject our library at the top of the file - Then add it to your imports ` *Our Ui library is ready to be used in this project.* 20) Now, open your app.component.html file inside of your employees app, and copy paste the following code. ` - This is where I'm injecting the employee-list component we created. 21) Open in your app.component.ts, and change it to match the example below: ` As you can see, I'm injecting the service we created inside of the ui library. 22) Go to your app.component.scss file, and add the following code. ` Bonus (Shared Assests) Now, I'm Going to Show You How to Share Assets Between Projects. 23) Go to your ui library, and create a subfolder called 'shared-assets', then create another folder called 'images', and add an image there. Then name it as shown on the picture. 24) Now go to your angular.json, and find assets. Your file should look like this: ` Restart VS Code to make sure it detects all the changes. Time To Test Our App 25) In your command line run: ` And We Are Done! :) About Author: --- *__Pato Software Engineer at This Dot | Auth0 Ambassador Twitter: devpato Stackoverflow: devpato Github: devpato AngularJax Meetup Founder__*...
Nov 20, 2019
Angular Development in Enterprise
Oct 31, 2019
Image Text/Face recognition with AWS Rekognition👀
AWS Rekognition What is AWS Rekognition? Rekognition is a AWS service that provides deep learning visual analysis for your images. Rekognition is very easy to integrate into your application by providing an image or video to the AWS Rekognition API. The service will identify some following: objects, people, text, scenes, and activities. "Amazon Rekognition also provides highly accurate facial analysis and facial recognition. You can detect, analyze, and compare faces for a wide variety of use cases, including user verification, cataloging, people counting, and public safety." - *AWS Official Docs* Now let's start using AWS Rekognition Let's start with trying some of their demos to see how AWS Recognition works. 1) Go to the following link and play with the demos. Time to get our hands dirty Warning🚨 : 1) You need to have an AWS Management Console account. 2) It will ask you for your credit card info, but YOU won't be charged for what you use in this tutorial since it's part of the FREE TIER. Setting up our S3 Bucket 1) Go to Find services and look for S3 2) Click on CREATE A BUCKET 3) Enter the bucket name as thisdot-rk-YOUR_NAME 4) Click on NEXT twice 5) Uncheck all the boxes to grant public access to the bucket. Click NEXT *Note: I'm making this bucket public, because for the purpose of this tutorial, I'm not worried about security.* 6) Click on CREATE BUCKET. 7) Time to upload some images to S3. Click on the bucket you just created. 8) Download this image and save it as thisdot.png. https://thisdot-rk-pato.s3.amazonaws.com/thisdot.png 9) Click on the dropdown from Mange Permissions, and click on Grant public read access to this object(s). 10) Click NEXT 11) On the Storage Class, select Standard, and click NEXT 12) Click UPLOAD Setting up our Lambda Function 1) Go to Find services, and look for Lambda 2) Click on CREATE FUNCTION 3) For Lambda function name, enter thisdot-rk-YOUR_NAME 4) Under Runtime, click on the dropdown, and select Python 3.7. 5) Click on CREATE FUNCTION 6)Scroll down to where it says Function code. You should see something like this: 8)Erase everything you see in the editor, and paste the following code in there: *Note: Change the name of the bucket to the bucket name you created thisdot-rk-YOUR_NAME.* The following code is going to help us finding the text inside of the images. Using the *.detect_text* method. ` *Note: To Learn more about other AWS Boto Rekognition functions, visit this website.* 9) Scroll down to change the BASIC SETTINGS< of the lambda. 10) Change Memory to 512MB, and Timeout to 2min 30sec. This is to ensure your lambda doesn't timeout when processing images. 11) Scroll all the way to the top. In the upper right corner, you should see the SAVE button. Click on it. Setting up our Security Roles Using IAM 1) Search for the IAM Service (Services IAM) 2) On the left navigation bar, click on ROLES. 3) You can select any lambda you have created to give it a specific role. In this tutorial, we will select the following to give it access to AWS Rekognition. 4) Then click on ATTACH POLICIES 5) Search for rekognition 6) Select AmazonRekognitionFUllAccess 7) Click on ATTACH POLICY *Note: You can have multiple policies attached* Time to Test 1) Go back to your lambda function. 2) In the top right corner, select the dropdown that says "Select a test event" 3) Then select "Configure test events" 4) Give a name to your event 5) Then enter the following JSON object ` Where "thisdot.png" is the name of your image inside of your S3 bucket. 6) Click CREATE 7) On Your top right corner, you will see the TEST button. Click on it. 8) You should see a green box. Click on expand details. 9) Take a look at the response object. As you can see, it has found our text inside of the image. Awesome!!!, right? Now, let's jump to compare faces. Imagine you want to see if one person appears in the same picture. Rekognition can do this. Imagine all the possibilities! 1) Download these 2 images. Source Image https://thepracticaldev.s3.amazonaws.com/i/ktpt1lx1ubzt3ilupph7.jpg Target Image https://thepracticaldev.s3.amazonaws.com/i/p5j8z6hiey8z8rkspms6.jpg 2) Upload them to S3, following the steps previously mentioned. 3) Go back to your lambda, and create a new test, or edit the existing test. Your test will look like this: ` 4) Then, we are going to modify our lambda code to be able to compare faces ` 5) Look at the Execution results, and analyze the data. Tell me what you think about this tutorial on twitter or comment below!...
Oct 31, 2019