Tag Archives: Video
VIDEO – Protect WebAPI data endpoint with ADAL (Azure AD)
Wanted to record brief demo of how to protect WebAPI data endpoint with ADAL (Azure Active Directory) Authentication Library. Azure Portal enables us to register custom SPA (Single Page Application) for secure API calls to backend REST data sources. OAuth Bearer HTTP headers are applied to provide security with JWT tokens (JSON Web Token). Video shows all steps from Azure Portal registration to F12 validation of REST data calls.
Cheers 
Video
Screenshots
Code
References
VIDEO – Create and connect to Oracle in Azure
Wanted to record a demo of how to create Oracle 12 instance in Azure and connect with GUI tools from Windows client. Video shows full processing (including troubleshooting) with TCP firewall, DBCA create command, system password, and all. Great way to build personal dev environment to learn Oracle connection strings and syntax, while staying out of live production corporate Oracle system.
Cheers. 
Video
Code
ssh adminUser@publicipaddress sudo su - oracle lsnrctl start # Find file find / -name sqlplus -print # Environment variables ORACLE_HOME=/u01/app/oracle/product/12.1.0/dbhome_1; export ORACLE_HOME ORACLE_SID=cdb1; export ORACLE_SID PATH=$PATH:$ORACLE_HOME/bin # Connect Oracle SQL Developer GUI system OraPasswd1 # Display Version SELECT * FROM v$version
Screenshots
References
- https://docs.microsoft.com/en-us/azure/virtual-machines/workloads/oracle/oracle-database-quick-create
- https://docs.oracle.com/en/database/oracle/oracle-database/12.2/admin/creating-and-configuring-an-oracle-database.html#GUID-2B89CEDB-DD37-4FB2-BF8E-EA063F5E64C2
- https://martincarstenbach.wordpress.com/tag/dbca/
- ORA-01017: invalid username/password; logon denied
- SP2-0157: unable to CONNECT to ORACLE after 3 attempts, exiting SQL*Plus
VIDEO – Azure AD protected Web API in an AngularJS SPA
Recently I walked through an Azure AD Web API sample project on GitHub at https://github.com/Azure-Samples/active-directory-angularjs-singlepageapp-dotnet-webapi and recorded a brief 14 minute video of the install and deployment steps. Watch below and enjoy. Cheers! 
Video
Screenshots
Error Message
Could not load type ‘System.IdentityModel.Tokens.TokenValidationParameters’ from assembly ‘System.IdentityModel.Tokens.Jwt, Version=5.0.0.127, Culture=neutral, PublicKeyToken=31bf3856ad364e35’.
( others at IdentityServer3#3017 saw the same with JWT breaking change)
Extra NuGet Package Step
Update-Package Install-Package Microsoft.AspNet.WebApi.Cors Install-Package System.IdentityModel.Tokens.Jwt -Version 4.0.2.206221351
References
VIDEO – Rich Angular CLI tables with [angluar2-datatable]
Check out this live coding demo of how to reference and include [angular2-datatable] in your Angular2 CLI project. Cheers! 
Video
Screenshots
References
VIDEO – code JS todo CRUD on Breeze & SQL Express (part 2 of 2)
Our next step in this series is cloud hosting. Each of the local source components has a Microsoft cloud destination equivalent. Here is the mapping:
- SQL Express > SQL Azure
- WebAPI > Azure Web App
- Angular SPA > Office 365 SharePoint Content Editor
In the video below I walk through all of these steps to migrate the local “todo” CRUD application created earlier to be fully hosted in Microsoft’s cloud. From there, we have a fully operational business application running on Office 365 with all custom code hosted in Azure.
Enjoy! 
Video
VIDEO – code JS todo CRUD on Breeze & SQL Express (part 2 of 2) from Jeff Jones on Vimeo.
VIDEO – Cloud migration of JS todo CRUD to Azure & Office 365 (part 2 of 2)
Live walk through of hosting “Todo List” CRUD application on the Microsoft cloud. Continued from the first video where we coded a full local application, this video migrates the application front/back end to the cloud. HTTPS Breeze WebAPI endpoint hosted on Azure for the backend with HTTPS Office 365 SharePoint Content Editor Web Part for the frontend GUI end user experience.
Custom HTTP header was added for extra security as an application “client secret” which is required for the WebAPI middle tier to respond to HTTP traffic. Missing HTTP header will respond with “null” and not execute any Dot Net code.
- Azure https://portal.azure.com
- Office 365 https://portal.office.com/
Enjoy! 
Diagram
Video
References
- https://breeze.github.io/doc-net/webapi-controller.html
- http://stackoverflow.com/questions/13616445/setting-ajax-headers-in-breeze
- install-package Breeze.WebApi2.EF6
- install-package Newtonsoft.Json
- install-package Microsoft.AspNet.WebApi.Odata
- install-Package Microsoft.AspNet.WebApi.Cors
VIDEO – code JS todo CRUD on Breeze & SQL Express (part 1 of 2)
Live coding walk through of a locally hosted “Todo List” CRUD application with Breeze WebAPI 2.2 middle tier and SQL Express relational database storage. This baseline allows developers to be more productive locally with fast feedback loops. Iterate code changes, reload test, and repeat. This technology stack can create sophist acted business application with input validation, advanced data schema, workflows, and more bringing in the latest web innovations from NPM and NodeJS.
Custom HTTP header was added for extra security as an application “client secret” which is required for the WebAPI middle tier to respond to HTTP traffic. Missing HTTP header will respond with “null” and not execute any Dot Net code.
In this video I used several components and want to share links for each:
- AngularJS https://angularjs.org/
- Visual Studio Code https://code.visualstudio.com/
- BreezeJS http://www.getbreezenow.com/breezejs
- WebAPI https://www.asp.net/web-api
- SQL Express https://www.microsoft.com/en-us/sql-server/sql-server-editions-express
In a future video, I’ll show how this application can then be deployed to Office 365 and SQL Azure to leverage Microsoft’s cloud hosting.
Enjoy! 
Diagram
Video
Live code JS todo CRUD on Breeze & SQL Express from Jeff Jones on Vimeo.
References
- https://breeze.github.io/doc-net/webapi-controller.html
- http://stackoverflow.com/questions/13616445/setting-ajax-headers-in-breeze
- install-package Breeze.WebApi2.EF6
- install-package Newtonsoft.Json
- install-package Microsoft.AspNet.WebApi.Odata
- install-Package Microsoft.AspNet.WebApi.Cors
You Might Not Need JQuery – VIDEO
Today I was looking at http://youmightnotneedjquery.com/ and how that could apply to SharePoint UI elements. Check out the video and code samples below. Often we need to hide simple page elements and can leverage newer browser JS features for common features like selector and forEach.
Enjoy! 
Video
You Might Not Need JQuery – VIDEO from Jeff Jones on Vimeo.
Screenshot
Code – HTML
Code – CSS
/* CSS method */
#ctl00_PlaceHolderSearchArea_SmallSearchInputBox1_csr_sbox {
display:none;
}
a.ms-core-listMenu-item {
display: none;
}Code – JS
// JS approach - http://youmightnotneedjquery.com/
var elements = document.querySelectorAll('a.ms-core-listMenu-item');
Array.prototype.forEach.call(elements, function(el, i){
el.style.display = 'none';
});Desktop Icon to launch Office 365 PowerShell
Check this video out to see a Desktop Icon that launches PowerShell and automatically logs in to your Office 365 Tenant URL. It leverages both the SPO (TechNet) and PNP (GitHub) cmdlets to open two connections. From here, you can easily work on your O365 tenant without having to memorize login steps and repeat each time.
If you found this helpful, please leave a comment. Cheers! 
Screenshot
Video
Source Code
Generate TypeScript interfaces from JSON data
Autocomplete JSON property names in JavaScript by generating TypeScript interfaces from sample JSON data. Check out the below video for a live demo.
Huge win for developer productivity. No more property name guessing or typos!
- Copy sample JSON from http://json.org/example.html
- Paste into http://json2ts.com/ by @Sorskoot to generate TypeScript interfaces
- Add TS file to application working folder
- Enjoy autocomplete with Visual Studio Code!
VIDEO
