Category: Angular

[PostEvent] Talks by Softbinator

The organizers from Talk from Softbinator were kind enough to select me for a presentation. Again , my presentation about .NET Core and Angular Everywhere. Source Code at https://github.com/ignatandrei/angNetCoreDemo/

The presentation was supposed to take 1/2 hour – and it took 1 hour with all the explanations.

Video at https://www.facebook.com/softbinator/videos/459024768242391

June 7, 2019
No Comments
Andrei Ignat
.NET, .NET Core, Angular, mvp, presentation

[PostEvent] CodeCamp Timisoara

I have been a presenter and participant at CodeCamp Timisoara. There are a lot of tracks with good information!

As a participant , I can mention:

Things you did not know about C# and .NET – with Marius Bancila
CALMS in DevOps – with Adrian Suteu
Making E2E tests great again using Cypress – with Omri Ben Ari

My presentation was about Angular and .NET Core Everywhere and you can find the source code at https://github.com/ignatandrei/AngNetCoreDemo

[PostEvent] HackTalks 2019

I have been a presenter and participant at #HackTalks Timisoara. I have seen lots of interesting people that do great stuff. Also lots of programmers interested of how to do better programming. It is a good vibe and lots of knowledge sharing.

As a participant , I can mention:

https://www.facebook.com/hacktalks.ro/posts/823295824708035 : Container Orchestration in the cloud for oncology – data science and programming together for the greater good

https://www.facebook.com/hacktalks.ro/posts/821329954904622 : Platform revolution in mobility – very informative and opinionated

https://www.facebook.com/hacktalks.ro/posts/820025591701725 : How to #model and #visualize complex conditional logic using a graph that describes a finite state machine in a highly flexible and data-driven way – nice way in JavaScript to describe logic flow with data .

My presentation was about Angular and .NET Core Everywhere and you can find the source code at https://github.com/ignatandrei/AngNetCoreDemo

7 Steps from (Angular) WebApplication to Windows Store

I have deployed fairly easy the .NET Core Alphabet applcation to Windows Store . Supposing that you already have registered the name of the application to the windows store (https://partner.microsoft.com/en-us/dashboard/windows/overview )

Those are the steps:

1. Compile the Angular Application ( with ng build –prod –build-optimizer )

2. Create a new WinJS App for Universal Windows

3. Copy the results ( index.html and js )from the point 1 to a dist folder

4. Save the files with BOM ( either from VS, Save as, then save with encoding, either using dos2unix –m <namefile>

5. Modify the main.js by adding : window.location.href=’dist/index.html’;

6. Modify the Visual Assets to the images of your application

7. Right click the application, Store => Create App Package . And deploy to the store

As a Proof of concept, see https://www.microsoft.com/en-us/p/netcorealphabet/9pdx9rv0xhds#activetab=pivot:overviewtab

Also, all the source code it is at https://github.com/ignatandrei/netCoreAlphabet ( and you may want to contribute, right?)

.NET Core Alphabet

What I wanted is a simple application ( Web, Mobile, Desktop) that can list , alphabetically, the .NET Core keywords. What is the purpose?

For interviews – suppose you want to test the people knowledge in C#. You start the application( again: Desktop or Web or Mobile) and let the candidate choose a letter. Then you see the keywords for this letter and ask the candidate to explain some of the keywords
For remembering features: there are so many features in .NET language ( https://docs.microsoft.com/en-us/dotnet/csharp/whats-new/csharp-version-history ) that for a programmer it is good to know – or to revisit – the features that are in the language.
For contest within programmers – like the interviews, but for the passionate programmers that want to have an easy way to decide the one with the best memory
Maybe other uses that I do not know ? Please share in comments

Now with the realization: What I want is the simple application, that has inside the database with keywords and links and any others. From this database, the code sources for the data will be generated and the application(s) will be generated. Also, data should be publicly available to profit from the crowd power –anyone that want to add something can add.

Step1 : Public repository for Sources: Obviously, github is the easy choice. See https://github.com/ignatandrei/netCoreAlphabet
Step 2: Database: Because sources should be generated from database and the database should be publicly available to modify, I have choose json format and the location github: https://github.com/ignatandrei/netCoreAlphabet/blob/master/primaryData/netCoreAlphabet.json ( feel free to contribute)
Step3: Web Application and deploy : To generate the Web Application I have choose Angular . AOT angular will make an index.html and js sites to work with.

That with Cordova will ensure the Android.
That with UWP js (https://docs.microsoft.com/en-us/windows/uwp/get-started/create-a-hello-world-app-js-uwp ) will ensure deployment to Windows Store.
That with Electron will ensure adding to Windows/Linux/Mac

Step 4: Transforming from database to sources: Because it is a simple Web Application the obvious choice for language of sources is TypeScript. Transforming from JSON to TypeScript is a Stankins duty . More, we want also to transform to markdown to have a nice readme.md in the GitHub.

stankins.console execute -o ReceiveRestFromFile -a primaryData/netCoreAlphabet.json -o SenderToTypeScript -a “” -o TransformerConcatenateOutputString -a a.ts -o SenderOutputToFolder -a $(Build.ArtifactStagingDirectory)/data/ -a false

stankins.console execute -o ReceiveRestFromFile -a primaryData/netCoreAlphabet.json -o SenderToRazorFromFile -a primaryData/markdown.txt -o TransformerConcatenateOutputString -a cards.md -o SenderOutputToFolder -a $(Build.ArtifactStagingDirectory)/data/ -a false

Step 6: Compile Angular to AOT
Step 7: Making application: AOT to GitHub pages (https://github.com/angular-schule/angular-cli-ghpages )Cordova, UWP and Electron => Making WebApp, UWP and Android.

And to complete all those, it will be put in an AzureDevops pipeline https://github.com/ignatandrei/netCoreAlphabet/blob/master/azure-pipelines.yml

You can see the result on Android : https://play.google.com/store/apps/details?id=com.github.ignatandrei.netcorealphabet&hl=en , WebSite: https://ignatandrei.github.io/netCoreAlphabet

Also, if you want , please contribute by making a PR by editing https://github.com/ignatandrei/netCoreAlphabet/blob/master/primaryData/netCoreAlphabet.json or by contributing to enchance the application by solving https://github.com/ignatandrei/netCoreAlphabet/issues

March 25, 2019
No Comments
Andrei Ignat
.NET Core, Angular, azure, stankins, typescript

Identify version for application and components for Backend(.NET Core) and FrontEnd(Angular)–part 3- FrontEnd

Part1 : Introduction and Concepts

Part 2: Obtaining BackEnd Components Version

Part 3: Obtaining FrontEnd Component Version and Final Library

Live Demo

NPM component
Copy paste NET code

Identifying the version of Angular components that we are using is a bit tricky. The package.json is having, by default, components using version “greater than”. More than that , after AOT compiling it remains no evidence of the original software used. However, there is a helper npm-shrinkwrap : this will generate a npm-shrinkwrap.json file that fixes the versioning.

So the second part is to request the .NET version and the npm-shrinkwrap.json file content with Angular front-end

For this we have a class that takes , by Dependency Injection, the HTTP Client and request versions from .NET Core and Angular:

export class VersionsNetcoreAngularService {

constructor(private http: HttpClient) {

const self = this;

}

public FVS(): Observable<FileVersionInfo[]> {

console.log('get fvs');

return this.http.get<FileVersionInfo[]>('api/Utils/GetVersions');

}

public FVSAngular(): Observable<FVSAng[]> {

console.log('get fvs angular');

return this.http.get('npm-shrinkwrap.json').pipe

(

switchMap(data => {

const ret = data as PackageJSONVersion ;

const d = ret.dependencies;

const arr = new Array<FVSAng>();

let f = new FVSAng();

f.name = ret.name;

f.fileVersion = ret.version;

arr.push(f);

for (const key of Array.from( Object.keys(d)) ) {

const dep = d[key] as Dependency;

if (dep.dev) {

continue;

}

f = new FVSAng();

f.fileVersion = dep.version;

f.name = key;

arr.push(f);

}

return of(arr);



})

);

}

The rest is history – just display the version in a HTML GUI.

Identify version for application and components for Backend(.NET Core) and FrontEnd(Angular)–part 1- introduction

Part1 : Introduction and Concepts

Part 2: Obtaining BackEnd Components Version

Part 3: Obtaining FrontEnd Component Version and Final Library

Live Demo

NPM component
Copy paste NET code

In our days recognizing fast the version of the software you deploy it is important ( very important , if you do not have a continuum upgrade strategy – like Chrome does or in my days , using Click Once ). More, you should be able to recognize what components you are using in the software.

This was very interesting for me ( see http://msprogrammer.serviciipeweb.ro/2014/10/13/tt-add-more-informations-net-version-build/ and http://msprogrammer.serviciipeweb.ro/2019/01/14/opensource-library-versioning/ ). However, this is not about how to version the application – but how to display the version for BackEnd and FrontEnd components.

So – we need a front-end HTML page ( or WPF, or WinForm or other front-end ) and 2 informations : 1 for the components for the backend and one for the components for the front end .

I have made such a component – it is made for Angular and .NET Core. It can be adapted very easy for all others , by transforming the Angular library to a WebComponent library and the WEB API .NET Core into node.js HTTP Rest.

If you want to see the final product , please check the https://www.npmjs.com/package/versions-netcore-angular and the live demo at https://azurestankins.azurewebsites.net/about

You will see the version of .NET Components and Angular Components that we are using.

.NET Core And Angular at CodeCamp Bucuresti

I have presented on Saturday at https://bucuresti.codecamp.ro/ a technical talk about how to make a fast POC that can run on Web, Desktop and Mobile , The presentation will show a clear example of code that is necessary for that ( code at https://github.com/ignatandrei/angNetCoreDemo/ ).

You can see working demo without CORS at https://ang-net-core.herokuapp.com/ , with CORS at https://ignatandrei.github.io/AngNetCoreDemo/ and a Mobile app at https://app.bitrise.io/artifact/9332781/p/ef7a0b7e945d69e01697390dcef867de

It was a good opportunity to learn something new at the conference – many good technical tracks and old friends that is an opportunity to see again.

Literary awards–part 5 – interactive

Part 1: http://msprogrammer.serviciipeweb.ro/2018/10/08/literary-awardspart-1/

Part 2: http://msprogrammer.serviciipeweb.ro/2018/10/15/literary-awardspart-2/

Part 3: http://msprogrammer.serviciipeweb.ro/2018/10/22/literary-awardspart-3/

Part 4: http://msprogrammer.serviciipeweb.ro/2018/10/29/literary-awardspart-4/

Part 5: http://msprogrammer.serviciipeweb.ro/2018/11/05/literary-awardspart-5/

I was wandering how to make more attractive the application – and also gain some interactivity. I was thinking of the possibility to can say what authors / books did you have read – and make some charts from it.

And here was the principal problem: how, between 2 versions of the data, to remember the authors read ? How to make the authros the same between the various awards ?

Turns out it is not so complicated – the only thing is to not version the “read” database .

So I turn out with just a database per table : one for Nobel, one for Booker, one for Bill Gates books, one for my books, one for reading list and one for all authors. Not a good thing, but this happens when you want to keep the database into the browser and updatable…

The source code is at github:https://github.com/ignatandrei/LiteraryAwards

Literary awards–part 4 – publish

Part 1: http://msprogrammer.serviciipeweb.ro/2018/10/08/literary-awardspart-1/

Part 2: http://msprogrammer.serviciipeweb.ro/2018/10/15/literary-awardspart-2/

Part 3: http://msprogrammer.serviciipeweb.ro/2018/10/22/literary-awardspart-3/

Part 4: http://msprogrammer.serviciipeweb.ro/2018/10/29/literary-awardspart-4/

Part 5: http://msprogrammer.serviciipeweb.ro/2018/11/05/literary-awardspart-5/

The publishing part is the tricky one. I wanted Web and Mobile ( could someone help me with the Windows/Linux part ? )

Github let’s you have the gh-pages as an website – see https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/ .

What this means in practice ? Menas that , if you deploy the Angular AOT to the gh-pages ( https://github.com/ignatandrei/LiteraryAwards/tree/gh-pages ) , then it should be visible to this url : https://ignatandrei.github.io/LiteraryAwards/

There is also a plugin, angular-cli-ghpages , that does this for you: takes the dist folder ( resulting from AOT Angular build ) and put in gh-pages. You can see the result at https://ignatandrei.github.io/LiteraryAwards/

For Mobile Android I just install the Cordova, copy the dist folder into Cordova and modify the start page in order to point to the Angular results.

But how can I compile Cordova into an Android application ? Turns out that there is a site – https://www.bitrise.io/ – that takes your code ( not only from GitHub, but for free app it is free ) and compiles it – and it gives you back the apk. Also , it can sign the application – something that Google Play requires. ( For this, I have had some problems with generating keys:

“C:\Program Files\Java\jdk1.8.0_171\bin\keytool.exe” -genkeypair -alias upload -keyalg RSA -keysize 2048 -validity 9125 -keystore keystore.jks
“C:\Program Files\Java\jdk1.8.0_171\bin\keytool.exe” -export -rfc -alias upload -file upload_certificate.pem -keystore keystore.jks

)

You can find the Google Play application at https://play.google.com/store/apps/details?id=com.msprogrammer.com

The source code is at github:https://github.com/ignatandrei/LiteraryAwards

Category: Angular

Andrei Ignat weekly software news(mostly .NET)