Javascript News - A collection of audio articles aimed toward Full Stack Development with JS.

When working with large databases it is often accusatory to want to be able to find specific keywords in this database. Over the next few minutes I will be explaining how to create search indexes in MongoDB. Creating a search engine in MongoDB allows for one to be able to text search with Mongoose. This will be done using Nodejs and Expressjs.

First one wants to create a search index with the MongDB Shell. To do this one wants to type in the following command with the MongoDB Shell. Note this command is straight from the MongoDB Docs that can be found in the references section.

db.tasks.createIndex({ task: “text” }); (Mongodb, n.d.)

This command creates an index on the tasks collection and allows for the next link of code which will search the tasks collection for the task item.

db.tasks.find({ $text: { $search: “learn Angular” }})

This line of code searches the tasks collection for the task item for the term “learn Angular”. From there the data can be displayed and allows for one to display the data on the front-end.

Feel free to subscribe! Happy adventures in code!

Reference

MongoDB. (n.d.). Text Search. Retrieved from https://docs.mongodb.com/manual/text-search/.

Are you interesting in creating serverless cloud functions that allow one to:

If the answer to any of these questions is yes: you need to keep listening. Because I am about to deliver a podcast based upon this topic.

Using the Serverless framework one is able to create these cloud functions such as one would be able to in Google’s Firebase or MongoDB’s Realm. These “serverless” functions (meaning they do not require a server to use) allow one to deploy their backend functions to AWS Lambda.

Serverless functions are good for websites; desktop or mobile apps which are expecting a large user base and therefore are able to be scaled quickly. This means the application can go from having no users to billions of users without the server breaking. If the application uses serverless functions there should be little to no difference between the application having no users to the application having the previously aforementioned amount of users.

Step One: Navigate to the Serverless Website.

The first step in creating serverless cloud functions is to go to the Serverless website. This can be found at serverless.com. From there one is to create an account and then it will ask you for AWS keys. The AWS key id and AWS secret key id can be found in your AWS AIM section of the platform. Once you have generated new keys it is customary to migrate these keys to the serverless.com website.

From here one creates their first serverless application. There are many good boilerplates or starter templates that allow one to create their first serverless application. I have chosen the express starter template as nodejs and express is my favorite frameworks for backend development.

Once you have selected the starter template one is to navigate to the directory of their IDE or Terminal and install serverless with a

npm i -g serverless

From there one is to initialize their serverless project with a:

serverless init

You are now free to develop your express backend with serverless! AWS Triggers can now be added to your application.

To deploy the application one is to write:

serverless deploy function -f

And whoop there it is: you have deployed your serverless function to AWS Lambda!

Feel free to tune into more of JavaScript News for tutorials and right now I have an Angular Course on this channel that will help you grow from No Stack to Full Stack! Feel free to give it a listen! Thanks!

This has been an introduction to using Angular as a front-end framework. Given the knowledge acquired in this book one is able to then create their own User Interfaces with Angular. It was assumed one had the acquired knowledge of being able to do HTML; CSS or Javascript. Prior experience with JavaScript is recommended in order for one to be able to understand Learning TypeScript.

Oftentimes when a programmer is routing their application they use the ID given to them by the database. Sometimes one will also be able to create an ID for an object and then store it in the database. To use these ids one must be able to get ids from the routes: or store them in cookies.

For the first example we will be using the Angular Router to be able to allow for one to get the parameters of the current url. This can be done like so. First one wants to import Angularjs Router. This is done with the following code.

import { ActivatedRoute } from '@angular/router';

Then ActivatedRoute will be passed into the constructor.

constructor(private route: ActivatedRoute) { }

‘

The parameters to the current url can then be found using the following code.

let id  = this.route.snapshot.params.id;

This ID can be passed into the Http Service file to be used to retrieve different

files from the database.

After installing Angular Universal in the first Chapter: you may be wondering: what do I do now? Well instead of using:

ng serve

One can use:

npm run build:ssr

To build the Angular Universal Project. This allows one to then run the following command and the project will open on localhost:4000.

npm run serve:ssr

This will then open the server on Port 4000.

Now is the much anticipated time of the Introduction for the Interface Property In Angular. If you are well versed in the art of backend development; you already know: data must be modeled in order for it to be used properly.

To do so: In Angular: one is to use a class or interface of data. It is similar to a schema except for the front end and this is the main component of Typescript that separates it from Javascript.

To start I will create a new file in myBlog/src/app called post.interface.ts. This file will look like the following.

export interface Post {

title: String;

}

This allows us to enter the app.component.ts file and write the following.

import { Post } from './post.interface';

From there we can declare different variables with different types with the use of the interface. This can be done so in app.component.ts file like so.

blogPosts: Array;

Also an interface can be used in the http.service.ts file to declare what data is being sent or retrieved. First one can import the Interface named Post.

import { Post } from '../post.interface';

Then the interface can be used in the getBlogPosts method like so.

return this.http.get('/api/blogPosts');

The interface helps display the data. To display the data from the backend service: this time: I will be using a regular list. This will take place in the app.component.html file and will feature a data-bind to the post interface and will use the title as the only parameter. The code of this looks like so.

Lastly when viewed in the browser with the dummy data on the server it should look like so.

When using the Http Client Module: it is common to have a Services folder and subsequent files in order to keep track of the http request and responses to and from the backend. To generate a service in Angular I am going to use the Angular CLI.

ng generate service services/http

This will generate a new http.service.ts file in our myBlog/src/app/services folder. It should be green if you are using VS Code. If one is on a Mac they can allow VS Code (a Microsoft Product) to edit the file with the following command. This is not necessary if you are a Windows or Linux machine. This following command is to be run in the root of the myBlog directory.

sudo chown -R myBlog/app/src/services

Next we are going to migrate our Http Client Module code from the app.component.ts file to the services/http.service.ts file. This will look like so when finished.

import { Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';

@Injectable({

providedIn: 'root'

})

export class HttpService {

constructor(private http: HttpClient) { }

getBlogPosts() {

return this.http.get('/api/blogPosts');

}

}

The service can then be imported into the app.component.ts file like so. First import the service module that was just created.

import { HttpService } from './services/http.service';

Then one can use the constructor to add the service into the project.

constructor(private service: HttpService) { }

Then one can use the method that was just built to get the Blog Posts.

ngOnInit() {

this.service.getBlogPosts().subscribe((res: any) => {

if (res) {

this.blogPosts = res['posts'];

}

})

}

This completes the introduction to Angular Services. They can be used to clean up the structure of your application and make it easier to do Http Requests with Angular. Now in the browser one would see this: depending on the content of their backend server’s data.