Bingo Meetings- conclusion–part 25

Bingo is a small project, written in TypeScript , and developed with Alexandru Badita in launch break (one hour - more or less). You can find sources at https://github.com/alexandru360/PresentationBingoCards/ . Those are my blog posts for Bingo : ( scroll below for the post)
NrLink
1Create meeting
2Create Tests
3Finalize Create meeting
4Sharing meeting
5Keep Score
6Add obsolete
7Finalizing obsolete
8End meeting
9Dockerize tests
10Azure CI tests
11Yarn workspaces
12CLI
13Intermezzo - CLI improvements
14typescript compile run with node
15NestJS ,swagger and create a meeting
16Finalizing API
17Intermezzo - jest vs jasmine error
18Refactor WebAPI and test service
19Heroku Deploy NestJs
20Angular
21Deploy Angular to GitHub
22WebAPI and Web
23Documentation
24Documentation of the code
25Conclusions

(Now the actual blog post for Bingo Meetings project)

It was a nice journey  to make an application just with TypeScript and Node ecosystem.  There are some missing parts ( e.g. testing the GUI – e2e in JS parlance)

However, some thoughts:

  1. The ecosystem does not have good support for mono-repository (in C# parlance , solution with multiple referencing projects )
    • Yarn Workspaces helps
    • TypeScript compile should be configured
  2. The fact that you wrote once time the definitions is overrated
    • Still some different models for Web API and Console and Web should exists, if you are a purinst ( no swagger reference for console …)
    • The possibilities of mistake  because of the same  model are not trivial
  3. Some tools require better documentation
    1. Finding how in nest return an HTML file is …. gard
    2. The errors are not so self explanatory ( for example, referencing i n warn workspaces something without his references)
  4. Docker really helps to have repeatable builds
    1. CLI is your best friend –  programming and devops
    2. Docker copying results files are perfect
  5. In our days, to be a full cycle programmer is easy with open source and stacks for open source( GitHub, AzureDevOps, Heroku, others)

[ADCES] Today, 19:30, Javascript

Today at 19:30 , https://www.meetup.com/Bucharest-A-D-C-E-S-Meetup/events/264063501/

Details

Prezentarea 1:
Titlu : ECMAScript 6,7,8
Prezentator: Ciprian Chichirita, http://slides.com/ciprian-chichirita
Descriere : JavaScript – Prezentare funcționalități noi
Prezentarea 2
Titlu: Make code easier to read with Functional Programming
Prezentator: Cristi Salcescu, https://medium.com/@cristiansalcescu
Descriere: The basic toolbox for list operations includes filter(), map() and reduce() methods.
Point-free is a technique that improves readability by eliminating the unnecessary arguments.
Pure functions are easier to understand.
Functions with intention-revealing names are easier to read.

Waiting for you!

Bingo Meetings- documenting code–part 24

Bingo is a small project, written in TypeScript , and developed with Alexandru Badita in launch break (one hour - more or less). You can find sources at https://github.com/alexandru360/PresentationBingoCards/ . Those are my blog posts for Bingo : ( scroll below for the post)
NrLink
1Create meeting
2Create Tests
3Finalize Create meeting
4Sharing meeting
5Keep Score
6Add obsolete
7Finalizing obsolete
8End meeting
9Dockerize tests
10Azure CI tests
11Yarn workspaces
12CLI
13Intermezzo - CLI improvements
14typescript compile run with node
15NestJS ,swagger and create a meeting
16Finalizing API
17Intermezzo - jest vs jasmine error
18Refactor WebAPI and test service
19Heroku Deploy NestJs
20Angular
21Deploy Angular to GitHub
22WebAPI and Web
23Documentation
24Documentation of the code
25Conclusions

(Now the actual blog post for Bingo Meetings project)

We have already documented the process of reproducing our code on developer PC ( including docker …)  So now we should help programmers understand the code that we have create and it’s general use.

For this, for any project that we have :

1. We should  add a Readme.md file to explain the project

2. We should add documentation for any class

3. We should generate the documentation for any class in a readable form ( preferably html)

3. We should deploy somewhere the documentation

 

For the first point, this is very easy ( although painful to write ). However, we should add a link to the 4th point , the link to the documentation.

For point 2 and 3 (adding documentation for any class and generating html ), we could use https://typedoc.org/  .

And ,because we are used to docker, I created build_code_documentation.txt docker file that runs typedoc on every project

FROM node:10
WORKDIR /app
WORKDIR /app
COPY package.json ./package.json
COPY bingo-cards-api/package.json ./bingo-cards-api/package.json
COPY bingo-cards-api-objects/package.json ./bingo-cards-api-objects/package.json
COPY bingo-cards-ui/package.json ./bingo-cards-ui/package.json
COPY bingo-meeting-console/package.json ./bingo-meeting-console/package.json
COPY bingo-meeting-objects/package.json ./bingo-meeting-objects/package.json
COPY bingo-meeting-objects-test/package.json ./bingo-meeting-objects-test/package.json
COPY yarn.lock ./yarn.lock

RUN yarn install

COPY . ./

RUN npm install –global typedoc
RUN yarn build
RUN typedoc –mode file –out docs/source/bingo-cards-api –ignoreCompilerErrors  –excludePrivate –excludeProtected bingo-cards-api/src
RUN typedoc –mode file –out docs/source/bingo-cards-api-objects –ignoreCompilerErrors  –excludePrivate –excludeProtected bingo-cards-api-objects/src
RUN typedoc –mode file –out docs/source/bingo-cards-ui –ignoreCompilerErrors  –excludePrivate –excludeProtected bingo-cards-ui/src
RUN typedoc –mode file –out docs/source/bingo-meeting-console –ignoreCompilerErrors  –excludePrivate –excludeProtected bingo-meeting-console
RUN typedoc –mode file –out docs/source/bingo-meeting-objects –ignoreCompilerErrors  –excludePrivate –excludeProtected bingo-meeting-objects
RUN typedoc –mode file –out docs/source/bingo-meeting-objects-test –ignoreCompilerErrors  –excludePrivate –excludeProtected bingo-meeting-objects-test

CMD tail -f /dev/null

And the bat file just copy on hard disj

docker build .. -f docker_build_code_documentation.txt -t bingo_build_code_documentation
docker run -d –rm –name bingo_build_code_documentation_container bingo_build_code_documentation
docker cp bingo_build_code_documentation_container:/app/docs/source .
docker container kill bingo_build_code_documentation_container

For the last point, we can deploy documentation at github pages , in a separate folder in docs, named source ( we will just copy the files genetated by docker)

 

You can find the result of the documentation at

bingo-cards-api

bingo-cards-api-objects

bingo-cards-ui

bingo-meeting-console

bingo-meeting-objects

bingo-meeting-objects-test

BingoMeetings-documentation-part 23

Bingo is a small project, written in TypeScript , and developed with Alexandru Badita in launch break (one hour - more or less). You can find sources at https://github.com/alexandru360/PresentationBingoCards/ . Those are my blog posts for Bingo : ( scroll below for the post)
NrLink
1Create meeting
2Create Tests
3Finalize Create meeting
4Sharing meeting
5Keep Score
6Add obsolete
7Finalizing obsolete
8End meeting
9Dockerize tests
10Azure CI tests
11Yarn workspaces
12CLI
13Intermezzo - CLI improvements
14typescript compile run with node
15NestJS ,swagger and create a meeting
16Finalizing API
17Intermezzo - jest vs jasmine error
18Refactor WebAPI and test service
19Heroku Deploy NestJs
20Angular
21Deploy Angular to GitHub
22WebAPI and Web
23Documentation
24Documentation of the code
25Conclusions

(Now the actual blog post for Bingo Meetings project)

Not so much here – just is the most time consuming part. You should imagine for who you are writing ( technical / user ?), what are his interests ( installing application / running the project ) and how to convey information.

Here we will write for the persons that wants to install the project , run it and modify the source code.

First , documentation for installing the project and run it.

You can read what I have done at https://github.com/alexandru360/PresentationBingoCards/wiki

Do not forget that you are writing for 2 kind of OS : Windows and Linux ( Mac also, but I do not have a Mac)

So the installation part is composed of something like

For running the project in a console way, goto dockerize folder and run

bingo_cli.bat

( for Linux, please go to dockerize folder and

chmod +777 ./bingo_cli.bat

./bingo_cli.bat

 

This can ( and should) be improved over time, as need arrives. Also, if we want to be on standards, we should look at Community Standards (https://github.com/alexandru360/PresentationBingoCards/community) : Description, License,ReadMe done. Contributing, Issue Templates and Pull Request template – too much for a single developer….

 

 

BingoMeetings–4 steps to run in Docker both WebAPI and Site-part 22

Bingo is a small project, written in TypeScript , and developed with Alexandru Badita in launch break (one hour - more or less). You can find sources at https://github.com/alexandru360/PresentationBingoCards/ . Those are my blog posts for Bingo : ( scroll below for the post)
NrLink
1Create meeting
2Create Tests
3Finalize Create meeting
4Sharing meeting
5Keep Score
6Add obsolete
7Finalizing obsolete
8End meeting
9Dockerize tests
10Azure CI tests
11Yarn workspaces
12CLI
13Intermezzo - CLI improvements
14typescript compile run with node
15NestJS ,swagger and create a meeting
16Finalizing API
17Intermezzo - jest vs jasmine error
18Refactor WebAPI and test service
19Heroku Deploy NestJs
20Angular
21Deploy Angular to GitHub
22WebAPI and Web
23Documentation
24Documentation of the code
25Conclusions

(Now the actual blog post for Bingo Meetings project)

Now what I want to achieve is to run the WebAPI and Angular Site in docker. For this, we should compile the Angular site and copy into the WebAPI. Also, WebAPI should serve the index.html file generated by the Angular.

Those are the 4 steps:

1. Ensure that  the Angular routes and WebAPI routes should be different Solution: this is easy achieved by having /api prepended to the WebAPI routes)

2. The WebAPI should be configured as to build to different configurations: for our purpose, calling  root ( /). For docs ( https://alexandru360.github.io/PresentationBingoCards/ ) it should call official deploy http://bingo-meeting-api.herokuapp.com/api/ 

Solution: read about environment https://angular.io/guide/build . I have made a new environment dockerbuild  Rememeber to create a new environment.ts  + a new entry in angular.json to build this configuration + an entry in package.json to build it . Then modify the service to use environment( see the modifications at https://github.com/alexandru360/PresentationBingoCards/commit/6dafb0c0b005d46bc426d128f9caf5d53e039dfa ).

3. For NestJs to serve html file , add nest-middlewares/serve-static  , then add the following code in the appropiate places:

ServeStaticModule

.forRoot({

rootPath: join(__dirname, ‘..’, ‘dist’,’bingo-cards-ui’),

})],

ServeStaticMiddleware.configure(‘/test’ );

consumer.apply(ServeStaticMiddleware).forRoutes(‘/test’);

( see https://github.com/alexandru360/PresentationBingoCards/commit/6dafb0c0b005d46bc426d128f9caf5d53e039dfa )

4. In the docker compile the Angular , then copy the files into WebAPI folder, then run the WebAPI site . See https://github.com/alexandru360/PresentationBingoCards/blob/master/dockerize/docker_runwebapiweb.txt and https://github.com/alexandru360/PresentationBingoCards/blob/master/dockerize/build_RunWebApiWeb.bat

BingoMeetings–build and deploy Angular WebSite to GitHub–part 21

Bingo is a small project, written in TypeScript , and developed with Alexandru Badita in launch break (one hour - more or less). You can find sources at https://github.com/alexandru360/PresentationBingoCards/ . Those are my blog posts for Bingo : ( scroll below for the post)
NrLink
1Create meeting
2Create Tests
3Finalize Create meeting
4Sharing meeting
5Keep Score
6Add obsolete
7Finalizing obsolete
8End meeting
9Dockerize tests
10Azure CI tests
11Yarn workspaces
12CLI
13Intermezzo - CLI improvements
14typescript compile run with node
15NestJS ,swagger and create a meeting
16Finalizing API
17Intermezzo - jest vs jasmine error
18Refactor WebAPI and test service
19Heroku Deploy NestJs
20Angular
21Deploy Angular to GitHub
22WebAPI and Web
23Documentation
24Documentation of the code
25Conclusions

(Now the actual blog post for Bingo Meetings project)

What  we need is to deploy somewhere the WebSite application – the Angular. One version is to compile and deploy to the WebApi (http://bingo-meeting-api.herokuapp.com/api/ ), however  , I do prefer keeping separate.

One simple idea is to deploy to GitHub site . For each repository , GitHub lets you have a website correlated . For example , for our project, https://github.com/alexandru360/PresentationBingoCards/ , github lets you have the site https://alexandru360.github.io/PresentationBingoCards/ ( see username and repository changing position?) . What is there could come form different GitHub project settings – I choose to be in the docs folder.

So we need to compile the Angular Application and put the result on the docs folder on  Github

If we do this on a CI on Azure, it could provide an endless loop ( push code oin GitHub, compoiling on Azure, push on GitHub folder docs, compile again…)

So it should come from Developer PC. But how to do this in a repeatable manner ? Simple – Docker!

So we build inside Docker the Angular site, copy the compile from Docker on the local system, then we manually push the modifications on Github. The system has the advantage that it can be reproducible also on Azure.

So the bat looks like this

call build_web.bat
del /S /Q ..\docs\*.*
copy dist\bingo-cards-ui\*.* ..\docs\

See https://github.com/alexandru360/PresentationBingoCards/tree/master/docs  for more details about the docker files.

One small modification also: the base href from angular should be this, to accept https://alexandru360.github.io/PresentationBingoCards/ that is not rooted:

<!– <base href=”/”> –>

<script>

var isCordovaApp = !!window.cordova;

var hrefApp = “.”;

if (!isCordovaApp) {

var baseHref = window.location.href.split(‘/’);

baseHref.pop();

hrefApp = baseHref.join(‘/’) + ‘/’;

}

document.write(‘<base href=”‘ + hrefApp + ‘” />’);

</script>

create docker to deploy to docs

build_docs.bat

Bingo for meetings-build an Angular app-part 20

Bingo is a small project, written in TypeScript , and developed with Alexandru Badita in launch break (one hour - more or less). You can find sources at https://github.com/alexandru360/PresentationBingoCards/ . Those are my blog posts for Bingo : ( scroll below for the post)
NrLink
1Create meeting
2Create Tests
3Finalize Create meeting
4Sharing meeting
5Keep Score
6Add obsolete
7Finalizing obsolete
8End meeting
9Dockerize tests
10Azure CI tests
11Yarn workspaces
12CLI
13Intermezzo - CLI improvements
14typescript compile run with node
15NestJS ,swagger and create a meeting
16Finalizing API
17Intermezzo - jest vs jasmine error
18Refactor WebAPI and test service
19Heroku Deploy NestJs
20Angular
21Deploy Angular to GitHub
22WebAPI and Web
23Documentation
24Documentation of the code
25Conclusions

(Now the actual blog post for Bingo Meetings project)

Now it is time to create some Angular GUI. ( If you want to learn Angular, please visit https://angular.io/ )

Problems encountered:

1. The CreateMeeting did not compile (ng serve ) the CreateMeeting class ( because of the nestjs Swagger  decorators ).

export class CreateMeeting  {
  @ApiModelProperty()
  userName: string;
  @ApiModelProperty()
  meetingName: string;
}

So I ended creating an interface ICreateMeeting with the same definition

export interface ICreateMeeting{
    userName: string;
    meetingName: string;
}
export class CreateMeeting implements ICreateMeeting {
  @ApiModelProperty()
  userName: string;
  @ApiModelProperty()
  meetingName: string;
}

and using in ReactiveForms as

 const c: ICreateMeeting = {userName: '', meetingName: ''};
 this.createMeetingForm = this.formBuilder.group(c);

Also, because the interface have the same signature as the class, we can use to POST data

public SaveMeeting(create: ICreateMeeting): Observable<Meeting> {
    const url: string = this.urlApi + 'meetings';
    return this.httpAPI.post<Meeting>(url, create);
  }

2. We should call WebAPI as http if the site is http and https if the site is https.  The problem is that the URL is hardCoded

private urlApi = 'http://bingo-meeting-api.herokuapp.com/';

We can have to inject the document to obtain the  doc.location.protocol

  constructor(@Inject(DOCUMENT)private doc: Document,  private httpAPI: HttpClient) {
     this.protocol = doc.location.protocol;
  }

but we remember there is a better way with // , that means respecting the protocol

  private urlApi = '//bingo-meeting-api.herokuapp.com/';

 

3. TypeScript – ng build works, but ng build –prod –build-optimizer gives an obscure error.
The solving was to add in the tsconfig.json
“noUnusedLocals”: true,
“noUnusedParameters”: false,

and solve unused declarations.

You can find the results at https://alexandru360.github.io/PresentationBingoCards/

Andrei Ignat weekly software news(mostly .NET)

* indicates required

Please select all the ways you would like to hear from me:

You can unsubscribe at any time by clicking the link in the footer of our emails. For information about our privacy practices, please visit our website.

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp's privacy practices here.