Luce Carter

[MongoDB Atlas](https://www.mongodb.com/cloud/atlas) and Azure are great friends! In fact, they became even better friends recently with the addition of the MongoDB Atlas Pay-as-You-Go Software as a Service (SaaS) subscription to the [Azure Marketplace](https://mdb.link/atlasazurepaygsaas), allowing you to use your existing Azure credits to enjoy all the benefits of the MongoDB Atlas Developer Data Platform. So there is no better time to learn how you can take advantage of both of these.

In this article, we are going to see how you can deploy a [MERN stack application](https://www.mongodb.com/mern-stack) to Azure Web Apps, part of Azure App Service, in a few simple steps. By the end of this, you will have your own version of the website that can be found [here](https://mernstackazureexample.azurewebsites.net/).

## Prerequisites
There are a few things you will need in place in order to follow this article.

1. Atlas Account and database cluster.
       **N.B.** You can follow the [Getting Started with Atlas](https://docs.atlas.mongodb.com/getting-started/) guide, to learn how to create a free Atlas account, create your first free-forever cluster and get your all important Connection String to the database.
2. [Azure Account](https://azure.microsoft.com/free/).
3. Have the [mern-stack-azure-deployment-example](https://github.com/mongodb-developer/mern-stack-azure-deployment-example) forked to your own account.

### Database Network Access
MongoDB Atlas comes with database level security out of the box. This includes not only the users who can connect but also where you can connect from. For this reason, you will need to configure network access rules for who or what can access your applications. 

The most common connection technique is via [IP address](https://www.mongodb.com/docs/atlas/security/ip-access-list/). If you wish to use this with Azure, you will need to [allow access from anywhere](https://www.mongodb.com/docs/atlas/security/ip-access-list/#add-ip-access-list-entries) inside Atlas as we cannot predict what your application IP addresses will be over time.

Atlas also supports the use of [network peering and private connections](https://www.mongodb.com/docs/atlas/setup-cluster-security/#optional-security-features) using the major cloud providers. This includes [Azure Private Link](https://learn.microsoft.com/azure/private-link/private-link-overview) or [Azure Virtual Private Connection](https://learn.microsoft.com/en-us/azure/virtual-network/virtual-networks-overview) (VPC) if you are using an M10 or above cluster.

## What’s the MERN Stack?
Before we get started deploying our MERN Stack application to Azure, it’s good to cover [what the MERN Stack is](https://www.mongodb.com/mern-stack).
MERN stands for MongoDB, Express, React, Node, and is named after the technologies that make up the stack.

* **MongoDB**: a general-purpose document database
* **Express**: Node.js web framework
* **React**: a client-side JavaScript framework
* **Node.js**: the most widely used JavaScript web server


![MERN Stack Architecture Diagram](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/mern_stack_4f1f241c8b.png)

## Create the Azure App Service
So we have the pieces in place we need, including a place to store data and an awesome MERN stack repo ready to go. Now we need to create our Azure App Service instance so we can take advantage of its deployment and hosting capabilities:

1. Inside the [Azure Portal](https://portal.azure.com), in the search box at the top, search for *App Services* and select it.
2. Click Create to trigger the creation wizard.
3. Enter the following information:
- **Subscription**: Choose your preferred existing subscription.
***Note: When you first create an account, you are given a free trial subscription with $150 free credits you can use***
- **Resource Group**: Use an existing or click the *Create new* link underneath the box to create a new one.
- **Name**: Choose what you would like to call it. The name has to be unique as it is used to create a URL ending .azurewebsites.net but otherwise, the choice is yours.
- **Publish**: Code.
- **Runtime stack**: Node 18 LTS.- 
- **OS**: Linux.
- **Region**: Pick the one closest to you.
- **Pricing Plans**: F1 - this is the free version.

![Create Web App Screenshot from Azure Portal](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/small_azure_create_webapp_a17ceb4f97.png)

4. Once you are happy, select Review + create in the bottom left.
5. Click Create in the bottom left and await deployment.
6. Once created, it will allow you to navigate to your new app service so we can start configuring it.

## Configuring our new App Service
Now that we have App Service set up, we need to add our connection string to our MongoDB Atlas cluster to app settings, so when deployed the application will be able to find the value and connect successfully. 
1. From the left-side menu in the Azure Portal inside your newly created App Service, click Configuration under the Settings section.
2. We then need to add a new value in the Application Settings section. **NOT** the Connection String section, despite the name. Click the New application setting button under this section to add one.
3. Add the following values:
- **Name**: ATLAS_URI
- **Value**: Your [Atlas connection string](https://www.mongodb.com/docs/guides/atlas/connection-string/) from the cluster you created earlier.

![Screenshot of Azure Web App App Settings](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/small_azure_webapp_app_settings_76cf74b058.png)

## Deploy to Azure App Services
We have our application, we have our app service and we have our connection string stored. Now it is time to link to our GitHub repo to take advantage of CI/CD goodness in Azure App Services.

1. Inside your app service app, click Deployment Center on the left in the Deployment section.
2. In the Settings tab that opens by default, from Source, select GitHub.
3. Fill out the boxes under the GitHub section that appears to select the main branch of your fork of the MERN stack repo.
4. Under Workflow Option: Make sure Add a workflow is the selected option.
5. Click Save at the top.

This will trigger a GitHub Actions build. If you view this in GitHub, you will see it will fail because we need to make some changes to the YAML file it created to allow it to build and deploy successfully.

### Configuring our GitHub Actions Workflow file
Now that we have connected GitHub Actions and App Services, there is a new folder in the GitHub repo called .github with a subfolder called workflows. This is where you will find the yaml files that App Services auto generated for us in the last section.

However, as mentioned, we need to adjust it slightly to work for us:
1. In the jobs section, there will be a sub section for the build job. Inside this we need to replace the whole steps section with the code found in [this gist](https://gist.github.com/LuceCarter/65966c4d65d063d25256ca36882af64a)
    - **N.B.**  *The reason it is in a Gist is because indentation is really crucial in YAML and this makes sure the layout stays as it should be to make your life easier.*
2. As part of this, we have named our app ‘mern-app’ so we need to make sure this matches in the deploy step. Further down in the jobs section of the yaml file, you will find the deploy section and its own steps subsection. In the first name step, you will see a bit where it says node-app. Change this to mern-app. This associates the build and deploy apps.

That’s it! All you need to do now is commit the changes to the file. This will trigger a run of the GitHub Action workflow.
Once it builds successfully, you can go ahead and visit your website. 

To find the URL of your website, visit the project inside the Azure Portal and in the Overview section you will find the link. 

![Screenshot showing where to find Azure Web App URL](https://mongodb-devhub-cms.s3.us-west-1.amazonaws.com/small_Azure_Web_Apps_URL_8e91e5f7a6.png)

You should now have a working NodeJS application that uses MongoDB Atlas that is deployed to Azure App Services.

## Summary
You are now well on your way to success with Azure App Services, NodeJS and MongoDB Atlas!

In this article, we created an Azure App Service, added our connection string inside Azure and then linked it up to our existing MERN stack example repo in GitHub, before customizing the generated workflow file for our application. Super simple and shows what can be done with the power of the cloud and MongoDB’s Developer Data Platform!

[Get started with Atlas on Azure](https://www.mongodb.com/cloud/atlas) today!


How to easily deploy a MERN Stack application to Azure App Service.

Getting Started with MongoDB Atlas, NodeJS, and Azure App Service

When was the last time you could remember the rough details of something but couldn’t remember the name of it? That happens to quite a few people, so being able to search semantically instead of with exact text searches is really important.

This is where [MongoDB Atlas Vector Search](https://www.mongodb.com/products/platform/atlas-vector-search) comes in useful. It allows you to perform semantic searches against vector embeddings in your documents stored inside MongoDB Atlas. Because the embeddings are stored inside Atlas, you can create the embeddings against any type of data, both structured and unstructured.

In this tutorial, you will learn how to add vector search with MongoDB Atlas Vector Search, using the [MongoDB C# driver](https://www.mongodb.com/docs/drivers/csharp/current/), to a .NET Blazor application. The Blazor application uses the sample_mflix database, available in the sample dataset anyone can load into their Atlas cluster. You will add support for searching semantically against the plot field, to find any movies that might fit the plot entered into the search box.

## Prerequisites
In order to follow along with this tutorial, you will need a few things in place before you start:

 1. .NET 8 SDK installed on your computer
 2. An IDE or text editor that can support C# and Blazor for the most seamless development experience, such as Visual Studio, Visual Studio Code with the C# DevKit Extension installed, or JetBrains Rider
 3. An [Atlas M0 cluster](https://www.mongodb.com/docs/atlas/tutorial/deploy-free-tier-cluster), our free forever tier, perfect for development
 4. Your cluster [connection string](https://www.mongodb.com/docs/guides/atlas/connection-string/ )
 5. A local copy of the [Hugging Face Dataset Upload tool](https://github.com/mongodb-developer/dotnethuggingfacedatasetuploader)
 6. A fork and clone of the [See Sharp Movies GitHub repo](https://github.com/mongodb-developer/SeeSharpMovies) that we will be adding search to
 7. An OpenAI account and a free [API key](https://platform.openai.com/api-keys) generated — you will use the OpenAI API to create a vector embedding for our search term

> Once you have forked and then cloned the repo and have it locally, you will need to add your connection string into ```appsettings.Development.json``` and ```appsettings.json``` in the placeholder section in order to connect to your cluster when running the project.

> If you don’t want to follow along, the repo has a branch called “vector-search” which has the final result implemented. However, you will need to ensure you have the embedded data in your Atlas cluster.


## Getting our embedded data into Atlas
The first thing you need is some data stored in your cluster that has vector embeddings available as a field in your documents. MongoDB has already provided a version of the movies collection from sample_mflix, called embedded_movies, which has 1500 documents, using a subset of the main movies collection which has been uploaded as a [dataset](https://huggingface.co/datasets/AIatMongoDB/embedded_movies) to Hugging Face that will be used in this tutorial.

This is where the Hugging Face Dataset Uploader downloaded as part of the prerequisites comes in. By running this tool using ```dotnet run``` at the root of the project, and passing your connection string into the console when asked, it will go ahead and download the dataset from Hugging Face and then upload that into an ```embedded_movies``` collection inside the ```sample_mflix``` database. If you haven’t got the same dataset loaded so this database is missing, it will even just create it for you thanks to the C# driver!

You can generate vector embeddings for your own data using tools such as Hugging Face, OpenAI, LlamaIndex, and others. You can read more about generating embeddings using open-source models by reading a tutorial from Prakul Agarwal on [Generative AI, Vector Search, and open-source models](https://www.mongodb.com/developer/products/atlas/building-generative-ai-applications-vector-search-open-source-models/) here on Developer Center.

## Creating the Vector Search index
Now you have a collection of movie documents with a ```plot_embedding``` field of vector embeddings for each document, it is time to create the Atlas Vector Search index. This is to enable vector search capabilities on the cluster and to let MongoDB know where to find the vector embeddings.

 1. Inside Atlas, click “Browse Collections” to open the data explorer to view your newly loaded sample_mflix database.
 2. Select the “Atlas Search” tab at the top.
 3. Click the green “Create Search Index” button to load the index creation wizard.
 4. Select JSON Editor under the Vector Search heading and then click “Next.”
 5. Select the embedded_movies collection under sample_mflix from the left.
 6. The name doesn’t matter hugely here, as long as you remember it for later but for now, leave it as the default value of ‘vector_index’.
 7. Copy and paste the following JSON in, replacing the current contents of the box in the wizard:

```json
{
  "fields": [
    {
      "type": "vector",
      "path": "plot_embedding",
      "numDimensions": 1536,
      "similarity": "dotProduct"
    }
  ]
}
``` 
This contains a few fields you might not have seen before.

 - path is the name of the field that contains the embeddings. In the case of the dataset from Hugging Face, this is plot_embedding.
 - numDimensions refers to the dimensions of the model used.
 - similarity refers to the type of function used to find similar results.

Check out the [Atlas Vector Search documentation](https://www.mongodb.com/docs/atlas/atlas-search/vector-search/) to learn more about these configuration fields.

Click “Next” and on the next page, click “Create Search Index.”

After a couple of minutes, the vector search index will be set up, you will be notified by email, and the application will be ready to have vector search added.

## Adding the backend functionality
You have the data with plot embeddings and a vector search index created against that field, so it is time to start work on the application to add search, starting with the backend functionality.
### Adding OpenAI API key to appsettings
The OpenAI API key will be used to request embeddings from the API for the search term entered since vector search understands numbers and not text. For this reason, the application needs your OpenAI API key to be stored for use later. 

 1. Add the following into the root of your ```appsettings.Development.json``` and ```appsettings.json```, after the MongoDB section, replacing the placeholder text with your own key:
```json
"OpenAPIKey": "<YOUR OPENAI API KEY>"
```
 2. Inside ```program.cs```, after the creation of the var builder, add the following line of code to pull in the value from app config:

```csharp
var openAPIKey = builder.Configuration.GetValue<string>("OpenAPIKey");
```
 3. Change the code that creates the MongoDBService instance to also pass in the ```openAPIKey variable```. You will change the constructor of the class later to make use of this.

```csharp
builder.Services.AddScoped(service => new MongoDBService(mongoDBSettings, openAPIKey));
```

### Adding a new method to IMongoDBService.cs
You will need to add a new method to the interface that supports search, taking in the term to be searched against and returning a list of movies that were found from the search.

Open ```IMongoDBService.cs``` and add the following code:

```csharp
public IEnumerable<Movie> MovieSearch(string textToSearch);
```
### Implementing the method in MongoDBService.cs
Now to make the changes to the implementation class to support the search.

 1. Open ```MongoDBService.cs``` and add the following using statements to the top of the file:
```csharp
using System.Text; 
using System.Text.Json;
```
 2. Add the following new local variables below the existing ones at the top of the class:
```csharp
  private readonly string _openAPIKey;
  private readonly HttpClient _httpClient = new HttpClient();
```
 3. Update the constructor to take the new openAPIKey string parameter, as well as the MongoDBSettings parameter. It should look like this:
```csharp
public MongoDBService(MongoDBSettings settings, string openAPIKey)
```
 4. Inside the constructor, add a new line to assign the value of openAPIKey to _openAPIKey.
 5. Also inside the constructor, update the collection name from “movies” to “embedded_movies” where it calls ```.GetCollection```.

The following is what the completed constructor should look like:
```csharp
public MongoDBService(MongoDBSettings settings, string openAPIKey)
{
    _client = new MongoClient(settings.AtlasURI);
    _mongoDatabase = _client.GetDatabase(settings.DatabaseName);
    _movies = _mongoDatabase.GetCollection<Movie>("embedded_movies");
    _openAPIKey = openAPIKey;
}
```
### Updating the Movie model
The C# driver acts as an object document mapper (ODM), taking care of mapping between a plain old C# object (POCO) that is used in C# and the documents in your collection.

However, the existing movie model fields need updating to match the documents inside your embedded_movies collection.

Replace the contents of  ```Models/Movie.cs``` with the following code:

```csharp
using MongoDB.Bson;
using MongoDB.Bson.Serialization.Attributes;

namespace SeeSharpMovies.Models;


public class Movie
{
   [BsonId]
   [BsonElement("_id")]
   public ObjectId Id { get; set; }
   
   [BsonElement("plot")]
   public string Plot { get; set; }

   [BsonElement("genres")]  
   public string[] Genres { get; set; }

   [BsonElement("runtime")]
   public int Runtime { get; set; }

   [BsonElement("cast")]
   public string[] Cast { get; set; }

   [BsonElement("num_mflix_comments")]
   public int NumMflixComments { get; set; }

   [BsonElement("poster")]
   public string Poster { get; set; }

   [BsonElement("title")]
   public string Title { get; set; }

   [BsonElement("fullplot")]
   public string FullPlot { get; set; }

   [BsonElement("languages")]
   public string[] Languages { get; set; }

   [BsonElement("directors")]
   public string[] Directors { get; set; }

   [BsonElement("writers")]
   public string[] Writers { get; set; }

   [BsonElement("awards")]
   public Awards Awards { get; set; }
   
   [BsonElement("year")]
   public string Year { get; set; }

   [BsonElement("imdb")]
   public Imdb Imdb { get; set; }

   [BsonElement("countries")]
   public string[] Countries { get; set; }

   [BsonElement("type")]
   public string Type { get; set; }

   [BsonElement("plot_embedding")]
   public float[] PlotEmbedding { get; set; }

}

public class Awards
{
   [BsonElement("wins")]
   public int Wins { get; set; }
   
   [BsonElement("nominations")]
   public int Nominations { get; set; }
   
   [BsonElement("text")]
   public string Text { get; set; }
}

public class Imdb
{
   [BsonElement("rating")]
   public float Rating { get; set; }
   
   [BsonElement("votes")]
   public int Votes { get; set; }
   
   [BsonElement("id")]
   public int Id { get; set; }
}
```

This contains properties for all the fields in the document, as well as classes and properties representing subdocuments found inside the movie document, such as “critic.” You will also note the use of the BsonElement attribute, which tells the driver how to map between the field names and the property names due to their differing naming conventions.


### Adding an EmbeddingResponse model
It is almost time to start implementing the search on the back end. When calling the OpenAI API’s embedding endpoint, you will get back a lot of data, including the embeddings. The easiest way to handle this is to create an EmbeddingResponse.cs class that models this response for use later.

Add a new class called EmbeddingResponse inside the Model folder and replace the contents of the file with the following:

```csharp
namespace SeeSharpMovies.Models
{
    public class EmbeddingResponse
    {
        public string @object { get; set; }
        public List<Data> data { get; set; }
        public string model { get; set; }
        public Usage usage { get; set; }
    }

    public class Data
    {
        public string @object { get; set; }
        public int index { get; set; }
        public List<double> embedding { get; set; }
    }

    public class Usage
    {
        public int prompt_tokens { get; set; }
        public int total_tokens { get; set; }
    }
}
```
### Adding a method to request embeddings for the search term
It is time to make use of the API key for OpenAI and write functionality to create vector embeddings for the searched term by calling the [OpenAI API Embeddings](https://platform.openai.com/docs/guides/embeddings) endpoint.

Inside ```MongoDBService.cs```, add the following code:

```csharp
private async Task<List<double>> GetEmbeddingsFromText(string text)
{
    Dictionary<string, object> body = new Dictionary<string, object>
    {
        { "model", "text-embedding-ada-002" },
        { "input", text }
    };

    _httpClient.BaseAddress = new Uri("https://api.openai.com");
    _httpClient.DefaultRequestHeaders.Add("Authorization", $"Bearer {_openAPIKey}");

    string requestBody = JsonSerializer.Serialize(body);
    StringContent requestContent =
        new StringContent(requestBody, Encoding.UTF8, "application/json");

    var response = await _httpClient.PostAsync("/v1/embeddings", requestContent)
        .ConfigureAwait(false);

    if (response.IsSuccessStatusCode)
    {
        string responseBody = await response.Content.ReadAsStringAsync();
        EmbeddingResponse embeddingResponse = JsonSerializer.Deserialize<EmbeddingResponse>(responseBody);
        return embeddingResponse.data[0].embedding;
    }

    return new List<double>();
}
```

The body dictionary is needed by the API to know the model used and what the input is. The text-embedding-ada-002 model is the default text embedding model.

### Implementing the SearchMovie function
The GetEmbeddingsFromText method returned the embeddings for the search term, so now it is available to be used by Atlas Vector Search and the C# driver.

Paste the following code to implement the search:

```csharp
public IEnumerable<Movie> MovieSearch(string textToSearch)
{

    var vector = GetEmbeddingsFromText(textToSearch).Result.ToArray();

    var vectorOptions = new VectorSearchOptions<Movie>()
    {
        IndexName = "vector_index",
        NumberOfCandidates = 150
    };

  var movies = _movies.Aggregate()
    .VectorSearch(movie => movie.PlotEmbedding, vector, 150, vectorOptions)
    .Project<Movie>(Builders<Movie>.Projection
    .Include(m => m.Title)
    .Include(m => m.Plot)
    .Include(m => m.Poster))            
    .ToList();


    return movies;
}
```

> If you chose a different name when creating the vector search index earlier, make sure to update this line inside vectorOptions.

Vector search is available inside the C# driver as part of the aggregation pipeline. It takes four arguments: the field name with the embeddings, the vector embeddings of the searched term, the number of results to return, and the vector options.

Further methods are then chained on to specify what fields to return from the resulting documents.

Because the movie document has changed slightly, the current code inside the ```GetMovieById``` method is no longer correct.

Replace the current line that calls ```.Find``` with the following:

```csharp
 var movie = _movies.Find(movie => movie.Id.ToString() == id).FirstOrDefault();
```

The back end is now complete and it is time to move on to the front end, adding the ability to search on the UI and sending that search back to the code we just wrote.

## Adding the frontend functionality
The frontend functionality will be split into two parts: the code in the front end for talking to the back end, and the search bar in HTML for typing into.
### Adding the code to handle search
As this is an existing application, there is already code available for pulling down the movies and even pagination. This is where you will be adding the search functionality, and it can be found inside ```Home.razor``` in the ```Components/Pages``` folder.

 1. Inside the ```@code``` block,  add a new string variable for searchTerm:
```csharp
 string searchTerm;
```
 2. Paste the following new method into the code block:
```csharp
private void SearchMovies()
{
    if (string.IsNullOrWhiteSpace(searchTerm))
    {
        movies = MongoDBService.GetAllMovies();
    }
    else
    {
        movies = MongoDBService.MovieSearch(searchTerm);
    }
}
```
This is quite straightforward. If the searchTerm string is empty, then show everything. Otherwise, search on it.

### Adding the search bar
Adding the search bar is really simple. It will be added to the header component already present on the home page.

Replace the existing header tag with the following HTML:


```html
<header class="top-bar">
        <a href="/">See Sharp Movies</a>
    <div class="form-inline search-bar">
        <input class="form-control mr-sm-2"
               type="search" placeholder="Search"
               aria-label="Search"               
               @bind="searchTerm">
        <button class="btn btn-outline-success my-2 my-sm-0" @onclick="SearchMovies">Search</button>
    </div>
    </header>
```

This creates a search input with the value being bound to the searchTerm string and a button that, when clicked, calls the SearchMovies method you just called.

### Making the search bar look nicer
At this point, the functionality is implemented. But if you ran it now, the search bar would be in a strange place in the header, so let’s fix that, just for prettiness.

Inside ```wwwroot/app.css```, add the following code:

```css
.search-bar {
    padding: 5%;
}

.search-bar button {
    padding: 4px;
}
```

This just gives the search bar and the button a bit of padding to make it position more nicely within the header. Although it’s not perfect, CSS is definitely not my strong suit. C# is my favorite language!

## Testing the search
Woohoo! We have the backend and frontend functionality implemented, so now it is time to run the application and see it in action!

Run the application, enter a search term in the box, click the “Search” button, and see what movies have plots semantically close to your search term.

![Showing movie results with a plot similar to three young men and a sword](https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/bltdec68107ea985845/65e053d2eb46a6bea37e95cd/Screenshot_2024-02-22_175604.png)

## Summary
Amazing! You now have a working Blazor application with the ability to search the plot by meaning instead of exact text. This is also a great starting point for implementing more vector search capabilities into your application.

If you want to learn more about Atlas Vector Search, you can read our [documentation](https://www.mongodb.com/docs/atlas/atlas-search/vector-search/).
MongoDB also has a space on Hugging Face where you can see some [further examples](https://huggingface.co/spaces?sort=trending&search=aiatmongodb) of what can be done and even play with it. Give it a go!

There is also an amazing article on [using Vector Search for audio](https://www.mongodb.com/developer/products/atlas/audio-find-atlas-vector-search/) co-written by Lead Developer Advocate at MongoDB [Pavel Duchovny](https://www.mongodb.com/developer/author/pavel-duchovny/).

If you have questions or feedback, join us in the [Community Forums](https://www.mongodb.com/community/forums/).


Learn how to get started with Atlas Vector Search in a .NET Blazor application with the C# driver, including embeddings and adding search functionality.


Adding MongoDB Atlas Vector Search to a .NET Blazor C# Application

Imagine being presented with a website with a large amount of data and not being able to search for what you want. Instead, you’re forced to sift through piles of results with no end in sight.

That is, of course, the last thing you want for yourself or your users. So in this tutorial, we’ll see how you can easily implement search with autocomplete in your .NET [Blazor](https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor) application using [MongoDB Atlas Search](https://www.mongodb.com/atlas/search).

Atlas Search is the easiest and fastest way to implement relevant searches into your MongoDB Atlas-backed applications, making it simpler for developers to focus on implementing other things.

## Prerequisites
In order to follow along with this tutorial, you will need a few things in place before you start:

 - An IDE or text editor that can support C# and Blazor for the most seamless development experience, such as Visual Studio, Visual Studio Code with the C# DevKit Extension installed, and JetBrains Rider.
 - An [Atlas M0
   cluster](https://www.mongodb.com/docs/atlas/tutorial/deploy-free-tier-cluster),
   our free forever tier, perfect for development.
 - The [sample dataset
   loaded](https://www.mongodb.com/docs/atlas/sample-data/ ) into the
   cluster.
 - Your cluster [connection
   string](https://www.mongodb.com/docs/guides/atlas/connection-string/
   ) for use in your application settings later on.
 - A fork of the [GitHub
   repo](https://github.com/mongodb-developer/SeeSharpMovies) that we
   will be adding search to.

Once you have forked and then cloned the repo and have it locally, you will need to add your connection string into ```appsettings.Development.json``` and ```appsettings.json``` in the placeholder section in order to connect to your cluster when running the project.

> If you don’t want to follow along, the repo has a branch called “full-text-search” which has the final result implemented.

## Creating Atlas Search indexes
Before we can start adding Atlas Search to our application, we need to create search indexes inside Atlas. These indexes enable full-text search capabilities on our database. We want to specify what fields we wish to index.

Atlas Search does support dynamic indexes, which apply to all fields and adapt to any document shape changes. But for this tutorial, we are going to add a search index for a specific field, “title.”

 1. Inside Atlas, click “Browse Collections” to open the data explorer to view your newly loaded sample data.
 2. Select the “Atlas Search” tab at the top.
 3. Click the green “Create Search Index” button to load the index creation wizard.
 4. Select Visual Editor and then click “Next.”
 5. Give your index a name. What you choose is up to you.
 6. For “Database and Collection,” select “sample_mflix” to expand the database and select the “movies” collection. Then, click “Next.”
 7. In the final review section, click the “Refine Your Index” button below the “Index Configurations” table as we want to make some changes.
 8. Click “+ Add Field Mapping” about halfway down the page.
 9. In “Field Name,” search for “title.”
 10. For “Data Type,” select “Autocomplete.” This is because we want to have autocomplete available in our application so users can see results as they start typing.
 11. Click the “Add” button in the bottom right corner.
 12. Click “Save” and then “Create Search Index.”

![Title field mapped as autocomplete](https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blt774582fa15a6e2e0/65bbbf6e30d47e66f152354b/Screenshot_2024-01-31_090304.png)

After a few minutes, the search index will be set up and the application will be ready to be “searchified.”

If you prefer to use the JSON editor to simply copy and paste, you can use the following:
```json
{
  "mappings": {
    "dynamic": true,
    "fields": {
      "title": {
        "type": "autocomplete"
      }
    }
  }
}
```
## Implementing backend functionality
Now the database is set up to support Atlas Search with our new indexes, it's time to update the code in the application to support search. The code has an interface and service for talking to Atlas using the [MongoDB C# driver](https://www.mongodb.com/docs/drivers/csharp/current/) which can be found in the ```Services``` folder.
### Adding a new method to IMongoDBService
First up is adding a new method for searching to the interface.

Open ```IMongoDBService.cs``` and add the following code:

```csharp
public IEnumerable<Movie> MovieSearchByText (string textToSearch);
```

We return an IEnumerable of movie documents because multiple documents might match the search terms.

### Implementing the method in MongoDBService

Next up is adding the implementation to the service.

 1. Open ```MongoDBService.cs``` and paste in the following code:
```csharp
public IEnumerable<Movie> MovieSearchByText(string textToSearch)
{             
// define fuzzy options
  SearchFuzzyOptions fuzzyOptions = new SearchFuzzyOptions()
  {
    MaxEdits = 1,
    PrefixLength = 1,   
    MaxExpansions = 256
  };
  
  // define and run pipeline
  var movies = _movies.Aggregate().Search(Builders<Movie>.Search.Autocomplete(movie => movie.Title, 
  textToSearch, fuzzy: fuzzyOptions), indexName: "title").Project<Movie>(Builders<Movie>.Projection
  .Exclude(movie => movie.Id)).ToList();
  return movies;
}       
```
 Replace the value for ```indexName``` with the name you gave your search index.

[Fuzzy search](https://www.mongodb.com/docs/atlas/atlas-search/text/) allows for approximate matching to a search term which can be helpful with things like typos or spelling mistakes. So we set up some fuzzy search options here, such as how close to the right term the characters need to be and how many characters at the start that must exactly match. 

Atlas Search is carried out using the $search aggregation stage, so we call ```.Aggregate()``` on the movies collection and then call the ``Search``` method.

We then pass a builder to the search stage to search against the title using our passed-in search text and the fuzzy options from earlier.

The ```.Project()``` stage is optional but we’re going to include it because we don’t use the _id field in our application. So for performance reasons, it is always good to exclude any fields you know you won’t need to be returned.

You will also need to make sure the following using statements are present at the top of the class for the code to run later:

```chsarp
using SeeSharpMovies.Models;
using MongoDB.Driver;
using MongoDB.Driver.Search;
```
Just like that, the back end is ready to accept a search term, search the collection for any matching documents, and return the result.
## Implementing frontend functionality
Now the back end is ready to accept our searches, it is time to implement it on the front end so users can search. This will be split into two parts: the code in the front end for talking to the back end, and the search bar in HTML for typing into.

### Adding code to handle search
This application uses razor pages which support having code in the front end. If you look inside ```Home.razor``` in the ```Components/Pages``` folder, you will see there is already some code there for requesting all movies and pagination.

 1. Inside the ```@code``` block, underneath the existing variables, add the following code:
```csharp
string searchTerm;
Timer debounceTimer;
int debounceInterval = 200;
```
As expected, there is a string variable to hold the search term, but the other two values might not seem obvious. In development, where you are accepting input and then calling some kind of service, you want to avoid calling it too often. So you can implement something called *debounce* which handles that. You will see that implemented later but it uses a timer and an interval — in this case, 200 milliseconds.

2. Add the following code after the existing methods:
```csharp
private void SearchMovies()
    {
        if (string.IsNullOrWhiteSpace(searchTerm))
        {
            movies = MongoDBService.GetAllMovies();
        }
        else
        {
            movies = MongoDBService.MovieSearchByText(searchTerm);
        }
   }


void DebounceSearch(object state)
    {
        if (string.IsNullOrWhiteSpace(searchTerm))
        {
            SearchMovies();
        }
        else
        {
            InvokeAsync(() =>
            {
                SearchMovies();
                StateHasChanged();
            });
        }
    }

void OnSearchInput(ChangeEventArgs e)
    {
            searchTerm = e.Value.ToString();
            debounceTimer?.Dispose();
            debounceTimer = new Timer(DebounceSearch, null, debounceInterval, Timeout.Infinite);
    }

```
SearchMovies: This method handles an empty search box as trying to search on nothing will cause it to error. So if there is nothing in the search box, it fetches all movies again. Otherwise, it calls the backend method we implemented previously to search by that term.

DebounceSearch: This calls search movies and if there is a search term available, it also tells the component that the stage has changed.

OnSearchInput: This will be called later by our search box but this is an event handler that says that when there is a change event, set the search term to the value of the box, reset the debounce timer, and start it again from the timer interval, passing in the ```DebounceSearch``` method as a callback function.

Now we have the code to smoothly handle receiving input and calling the back end, it is time to add the search box to our UI.

### Adding a search bar
Adding the search bar is really simple. We are going to add it to the header component already present on the home page.

After the link tag with the text “See Sharp Movies,” add the following HTML:

```html
<div class="form-inline search-bar">
    <input class="form-control mr-sm-2"
      type="search" placeholder="Search" 
      aria-label="Search" 
      @oninput="OnSearchInput" @bind="searchTerm">
</div>
```
## Testing the search functionality
Now we have the backend code available and the front end has the search box and a way to send the search term to the back end, it's time to run the application and see it in action.

Run the application, enter a search term in the box, and test the result. 

![Animation showing searching the movies](https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blt68a0ec8355c28dea/65bbbf33e5c1f3e55fd96ecb/Search_Demo.gif)

## Summary 
Excellent! You now have a Blazor application with search functionality added and a good starting point for using full-text search in your applications going forward.

If you want to learn more about Atlas Search, including more features than just autocomplete, you can take an amazing [Atlas Search workshop](https://www.atlassearchworkshop.com/) created by my colleague or view the [docs]https://www.mongodb.com/docs/manual/text-search/). If you have questions or feedback, join us in the [Community Forums](https://www.mongodb.com/community/forums/).


In this tutorial, learn how to add Atlas Search functionality with autocomplete and fuzzy search to a .NET Blazor application.

MongoDB Atlas Search with .NET Blazor for Full-Text Search

MongoDB Provider for EF Core Tutorial: Building an App with CRUD and Change Tracking

As technology and styles of work evolve, the need for apps to support mobile is as important as ever. In 2023, [Android had around 70% market share](https://explodingtopics.com/blog/iphone-android-users), so the need for developers to understand how to develop apps for Android is vital.

In this tutorial, you will learn the basics of getting started with your first Android app, using the programming language Kotlin. Although historically, native Android apps have been written in Java, Kotlin was upgraded to the official language for Android by Google in 2019.

## Prerequisites
In order to follow along with this tutorial, you will need to have downloaded and installed Android Studio. This is the official IDE for Android development and comes with all the tools you will need to get started. Windows, MacOS, and Linux support it, as well.

> You won’t need an Android device to run your apps, thanks to the use of the Android Emulator, which comes with Android Studio. You will be guided through setup when you first open up Android Studio.

## Creating the project
The first step is to create the application. You can do this from the “Welcome to Android Studio” page that appears when you open Android Studio for the first time.

> If you have opened it before and don’t see this window but instead a list of recent projects, you can create a new project from the **File** menu.

 1. Click **New Project**, which starts a wizard to guide you through
    creating a new project.
2. In the **Templates** window, make sure the **Phone and Tablet** option is selected on the left. Select Empty Activity and then click
    Next.

![New Project template selection wizard](https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/bltf63dab0201972cbb/65ae8dcb14eace4eeca5bd77/Template_Selection.png)
3. Give your project a name. I chose "Hello Android".    

For Package name, this can be left as the default, if you want. In the future, you might update it to reflect your company name, making sure to leave the app name on the end. I know the backward nature of the Package name can seem confusing but it is just something to note, if you update it.

Minimum SDK: If you make an app in the future intended for users, you might choose an earlier version of Android to support more devices, but this isn’t necessary for this tutorial, so update it to a newer version. I went with API 33, aka “Tiramisu.” Android gives all their operating system (OS) versions names shared with sweet things, all in alphabetical order.

> Fun fact: I created my first ever Android app back when the OS version was nicknamed Jelly Bean!

You can leave the other values as default, although you may choose to update the **Save** location. Once done, press the **Finish** button.


![New project details wizard to select name](https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blt4f650cbee69ed423/65ae8e598c124a35f515ae77/Empty_Activity_Wizard.png)

It will then open your new application inside the main Android Studio window. It can take a minute or two to index and build everything, so if you don’t see much straight away, don’t worry. Once completed, you will see the ```MainActivity.kt``` file open in the editor and the project structure on the left.

![Android Studio window showing Main Activity Kotlin file open](https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blt73d8499e8065763e/65ae91811e1aed939ffd5494/Screenshot_2024-01-16_160139.png)

## Running the app for the first time
Although we haven’t made any code changes yet, the Empty Activity template comes with a basic UI already. So let’s run our app and see what it looks like out of the box.

 1. Select the **Run** button that looks like a play button at the top of the Android Studio window. Or you can select the hamburger menu in the top left and go to **Run -> Run ‘app’**.
 2. Once it has been built and deployed, you will see it running in the Running Devices area to the right of the editor window. Out of the box, it just says “Hello Android.”
![Android app running with white background and black text at the top that says Hello Android](https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blt687055a1d7e0383a/65ae922ed7d856526db4fcb2/Screenshot_2024-01-17_094400.png)

Congratulations! You have your first running native Android app!

## Updating the UI
Now your app is running, let’s take a look at how to make some changes to the UI.
Android supports two types of UI: XML-based layouts and [Jetpack Compose](https://mdb.link/android-jetpack-compose), known as Compose. Compose is now the recommended solution for Android, and this is what our new app is using, so we will continue to use it.

Compose uses composable functions to define UI components. You can see this in action in the I’m code inside ```MainActivity.kt``` where there is a function called ```Greeting``` with the attribute ```@Composable```. It takes in a string for a name and modifier and uses those inside a text element.

We are going to update the greeting function to now include a way to enter some text and a button to click that will update the label to say “Hello” to the name you enter in the text box.

Replace the existing code from ```class MainActivity : ComponentActivity() {``` onward with the following:
```kotlin
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HelloAndroidTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting()
                }
            }
        }
    }
}

@Composable
fun Greeting() {

    var message by remember { mutableStateOf("")}
    var greeting by remember { mutableStateOf("") }

    Column (Modifier.padding(16.dp)) {
        TextField(
            value = message,
            onValueChange = { message = it },
            label = {Text("Enter your name..")}
        )
        Button(onClick = { greeting = "Hello, $message" }) {
            Text("Say Hello")
        }
       Text(greeting)
    }

}


@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    HelloAndroidTheme {
        Greeting()
    }
}

```

Let’s now take a look at what has changed.
### OnCreate

We have removed the passing of a hardcoded name value here as a parameter to the Greeting function, as we will now get that from the text box.

### Greeting
 We have added two function-scoped variables here for holding the values we want to update dynamically. 

We then start defining our components. Now we have multiple components visible, we want to apply some layout and styling to them, so we have created a column so the three sub-components appear vertically. Inside the column definition, we also pass padding of 16dp.

Our column layout contains a TextField for entering text. The value property is linked to our message variable. The onValueChanged property says that when the value of the box is changed, assign it to the message variable so it is always up to date. It also has a label property, which acts as a placeholder hint to the user.

Next is the button. This has an onClick property where we define what happens when the button is clicked. In this case, it sets the value of the greeting variable to be “Hello,” plus the message.

Lastly, we have a text component to display the greeting. Each time the button is clicked and the greeting variable is updated, that text field will update on the screen.

### GreetingPreview

This is a function that allows you to preview your UI without running it on a device or emulator. It is very similar to the OnCreate function above where it specifies the default HelloAndroidTheme and then our Greeting component.

If you want to view the preview of your code, you can click the button in the top right corner of the editor window, to the left of the **Running Devices** area that shows a hamburger icon with a rectangle with rounded corners next to it. This is the split view button. It splits the view between your code and the preview.

![Split screen button highlighted by green box](https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blt3657e87c0a1ee672/65ae9a6bc7bb16e0caa2a0c2/View_Preview.png)

### Imports
If Android Studio is giving you error messages in the code, it might be because you are missing some import statements at the top of the file.

Expand the imports section at the top and replace it with the following:

```kotlin
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.mongodb.helloandroid.ui.theme.HelloAndroidTheme
```
You will need to update the last import statement to make sure that your package name matches as it may not be com.mongodb.helloandroid, for example.

## Testing the app

Now that we have updated the UI, let’s run it and see our shiny new UI. Click the **Run** button again and wait for it to deploy to the emulator or your device, if you have one connected.

Try playing around with what you enter and pressing the button to see the result of your great work!

![Android app running with Enter your name text box with Reader typed in, a button that says Say Hello and the text Hello, Reader underneath the button](https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blt4168e27ceb7fed71/65ae9a1d1e1aed5059fd54e0/Screenshot_2024-01-17_110558.png)

## Summary
There you have it, your first Android app written in Kotlin using Android Studio, just like that! Compose makes it super easy to create UIs in no time at all.

If you want to take it further, you might want to add the ability to store information that persists between app sessions. MongoDB has an amazing product, called [Atlas Device Sync](https://www.mongodb.com/docs/atlas/app-services/sync/), that allows you to store data on the device for your app and have it sync to MongoDB Atlas. You can read more about this and how to get started in our [Kotlin Docs](https://mdb.link/atlas-device-sync-docs).


Building an Android App

In 2022, I had the pleasure of representing MongoDB at [Rails Girls London](http://railsgirls.com/london.html).

The funny thing is, though, I am not a Ruby developer, let alone a Ruby on Rails developer. Thankfully, this was a well organized event with tutorials to follow, and plenty of coaches if any of us got stuck. So as well as chatting to attendees about MongoDB, I had the chance to follow along and learn something new.

At first, I followed along with the [Rails Girls App Tutorial](http://guides.railsgirls.com/app) and got up and running with a working Ruby on Rails application. But this uses SQLite (I know, booooo), so I decided to take what I had learned, combined with our own [documentation for getting started with Rails](https://www.mongodb.com/docs/mongoid/current/tutorials/getting-started-rails7?utm_campaign=devrel&utm_medium=cta&utm_content=Dev%20Center%20article%20on%20Ruby%20on%20Rails%20written%20by%20Luce&utm_term=luce.carter), and create a Rails app 
that allows you to use [MongoDB Atlas](https://www.mongodb.com/cloud/atlas?utm_campaign=devrel&utm_medium=cta&utm_content=Dev%20Center%20article%20on%20Ruby%20on%20Rails%20written%20by%20Luce&utm_term=luce.carter) instead!

![Application homepage showing list of ideas](https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blte8759081c246c82d/64a31eebade08c5096cb0da7/Screenshot_2023-07-03_201545.png)

I am forever thinking of new ideas for content or side projects. My brain is buzzing constantly and finds inspiration in many places. So I loved the idea from the Rails Girls tutorial of a website that allows you to store an idea, including the name, description, and a picture to show what sparked that idea. 

In this article, I will talk you through what I learned along the way creating this, and how you can make the same thing yourself! If you would rather browse code, it is publicly available on [GitHub](https://github.com/mongodb-developer/mongodb-atlas-with-ruby-on-rails-example).


## Pre-requisites ##

You will need to have a few tools in place in order to follow through this article:
- [Ruby](https://www.ruby-lang.org/en/documentation/installation/)
- [Rails](https://www.mongodb.com/docs/mongoid/current/tutorials/getting-started-rails/#install-rails)
- [Free MongoDB Atlas Cluster](https://www.mongodb.com/docs/atlas/getting-started/?utm_campaign=devrel&utm_medium=cta&utm_content=Dev%20Center%20article%20on%20Ruby%20on%20Rails%20written%20by%20Luce&utm_term=luce.carter) — this will guide you through creating your first cluster and getting your all-important connection string that will be used in this tutorial.

## Creating a project ##

The first step is to create the application. We can take advantage of the rails cli tool that is part of the Rails installation to bootstrap our new application.
```bash
rails new inspiration --skip-active-record --skip-bundle
cd inspiration   
```
We pass the `--skip-active-record` option because we won’t be using an ActiveRecord adapter to communicate with our MongoDB database. We also pass  `-–skip-bundle` because we want to modify the application’s `Gemfile` to include the `mongoid` gem first before installing the bundle.

## Adding and configuring Mongoid ##

Now we have the project created, we want to configure MongoDB. The first step is to add the mongoid gem. [Mongoid](https://www.mongodb.com/docs/mongoid/current/?utm_campaign=devrel&utm_content=Dev%20Center%20article%20on%20Ruby%20on%20Rails%20written%20by%20Luce&utm_term=luce.carter) is the officially supported object document mapper (ODM) for Ruby. An ODM is the document database equivalent of object relational mapper (ORM) which is used to map between models and the relational database.

1. Inside your Gemfile, add ```gem mongoid```, which defines that we want to use this gem.
2. From your CLI, run ```bundle install``` to pull down the required files to include mongoid in your application.
3. Once complete, run the command ```rails g mongoid:config```, which will generate the mongoid.yml file inside your application’s config directory. This configuration file defines how to connect to your MongoDB database.
4. If you haven’t already, get your [connection string from Atlas](https://www.mongodb.com/docs/atlas/tutorial/connect-to-your-cluster/?utm_campaign=devrel&utm_content=Dev%20Center%20article%20on%20Ruby%20on%20Rails%20written%20by%20Luce&utm_term=luce.carter). 
5. Update the development config section inside ```config/mongoid.yml``` with the following code, replacing the uri section with your own connection string:

```ruby
development:
  clients:
    default:
      uri: mongodb+srv:/<username>:<password>@<cluster url>/?retryWrites=true&w=majority
      options:
        server_selection_timeout: 5

```

Now we have our connection string added, we will be able to store our ideas documents inside MongoDB Atas.

We then want to run the application to make sure everything is working correctly.

```bash
rails server
```
This will start a server at [https://localhost:3000](https://localhost:3000), so open this in your browser of choice and make sure that the page loads. Out of the box, you get a Ruby on Rails logo.

## Creating our idea endpoint ##
Ruby on Rails uses the Model-View-Controller architecture. This means that we will have an `Idea` model that represents the document we want to store, a view to display that idea in the front end of our application, and a controller that allows us to interact with our ideas.

Thankfully, creating all this is really simple. Within the Rails cli, you can run a command that will scaffold out everything we need, including our model with the properties we specify, the view, and the controller. 

```bash
rails generate scaffold idea name:string description:string picture:string
```
In the command above, we specify the three properties we want to include in our idea model. 
This will generate an output that looks like the code below, showing the actions that command has carried out and the files it has created.
```bash
 invoke  mongoid
      create    app/models/idea.rb
      invoke    test_unit
      create      test/models/idea_test.rb
      create      test/fixtures/ideas.yml
      invoke  resource_route
       route    resources :ideas
      invoke  scaffold_controller
      create    app/controllers/ideas_controller.rb
      invoke    erb
      create      app/views/ideas
      create      app/views/ideas/index.html.erb
      create      app/views/ideas/edit.html.erb
      create      app/views/ideas/show.html.erb
      create      app/views/ideas/new.html.erb
      create      app/views/ideas/_form.html.erb
      create      app/views/ideas/_idea.html.erb
      invoke    resource_route
      invoke    test_unit
      create      test/controllers/ideas_controller_test.rb
      create      test/system/ideas_test.rb
      invoke    helper
      create      app/helpers/ideas_helper.rb
      invoke      test_unit
      invoke    jbuilder
      create      app/views/ideas/index.json.jbuilder
      create      app/views/ideas/show.json.jbuilder
      create      app/views/ideas/_idea.json.jbuilder
```

As we learned at the start, out of the box, a Rails application will default to the root page. Now we have an idea endpoint, we want that to be the default page that opens when the app is started.


1. Open *routes.rb* inside the config folder.
2. Replace the contents with the following:
```ruby
Rails.application.routes.draw do
 root to: 'ideas#index'
 resources :ideas
end
```

## Adding the ability to create new ideas ##

If we ran our application now, you would see one of two things: either a mostly blank page, or any ideas you added in the database outside this application — for example, using the [Atlas UI](https://www.mongodb.com/docs/atlas/atlas-ui/?utm_campaign=devrel&utm_medium=cta&utm_content=Dev%20Center%20article%20on%20Ruby%20on%20Rails%20written%20by%20Luce&utm_term=luce.carter) or [MongoDB Compass](https://www.mongodb.com/products/compass?utm_campaign=devrel&utm_medium=cta&utm_content=Dev%20Center%20article%20on%20Ruby%20on%20Rails%20written%20by%20Luce&utm_term=luce.carter).

But we want the ability to add new ideas. We also can take this opportunity to make the application look a little better.

1. Open *application.html.erb*.
2. Replace the current file with the following code:
```erb
<!DOCTYPE html>
<html>
<head>
  <title>Inspiration</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
</head>
<nav class="navbar navbar-expand-lg navbar">
  <div class="container">
    <a class="navbar-brand" href="/ideas">The Idea App</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <%= link_to 'New Idea', new_idea_path, class: "nav-link text-info" %>
        </li>
      </ul>
    </div>
  </div>
</nav>
<body>
<div class="container">
  <%= yield %>
</div>
</body>
<footer>
  <div class="container">
    MongoDB Atlas and Ruby on Rails <%= Time.now.year %>
  </div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</html>
```

2. Open *application.css*.
4. Replace the current file with the following:
```css
 footer { margin-top: 100px; }
table, td, th { vertical-align: middle; border: none; }
th { border-bottom: 1px solid #DDD; }
body { margin: 0; }
.navbar {
    min-height: 38px;
    background-color: #ECA72C;
  }
  .navbar-brand { 
    font-size: 24px;
    color: #080357;
}
  .navbar a.brand:hover {
   color: #fff;
   background-color: transparent;
   text-decoration: none;
  }
  .container {
      margin: auto  ;
  }
```
5. Make sure both files you changed are saved and run it. You should see a page similar to below where we now have a navigation bar at the top with a link to add a new idea.

![Homepage of application showing a navbar and any existing ideas](https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/bltb1c9b579b511819e/649f049d1ea8291fe9f58833/Screenshot_2023-06-16_105049.png)

I know it doesn’t look very pretty (if you have good design/CSS skills, I’m sure you could do wonderful things with this), but if you click New Idea now, it will load a form that gives you the ability to create a new idea.

You will notice that we never created this form. This is one of the powers of Ruby on Rails. Because we scaffolded out our idea model, it generated what we need to interact with it too.

Clicking the Create Idea button will then cause you to return to the idea details screen with a “success” message and your newly created idea.

![New idea created with name and image](https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blte4db3194971080c4/649f04db7ad98854cb31e049/Screenshot_2023-06-16_111300.png)
You can then click to edit the idea further by using the hyperlink, or by clicking back to Ideas to view your new idea in your list of ideas. There is also a button here to delete the idea. We didn’t have to configure any of it — phew!

The best part is, thanks to us configuring the MongoDB driver, this idea will be stored in Atlas and you can see the idea inside your database, using any of the tools available. Below is an image of this being viewed inside Compass.

![Screenshot of MongoDB Compass showing the new idea is stored](https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blt7b27c7732b330a1a/649f0b9613bff828412edf1f/Screenshot_2023-06-14_102221.png)

## Summary ##
Just like that, with a few CLI commands and some code changes, we have a working Ruby on Rails application that allows us to create, read, update, and delete ideas, all stored inside MongoDB Atlas for free!

Of course, as mentioned earlier in the article, this doesn’t look great, so you may want to play with the styling to make it look better. But that is outside the scope of this article.

But one feature we are going to add in a future post you can look out for is the ability to search for an idea using [Atlas Search](https://www.mongodb.com/atlas/search?utm_campaign=devrel&utm_medium=cta&utm_content=Dev%20Center%20article%20on%20Ruby%20on%20Rails%20written%20by%20Luce&utm_term=luce.carter), MongoDB’s full-text search feature that runs on Apache Lucene.

If you have any questions, our [community forums](https://www.mongodb.com/community/forums/?utm_campaign=devrel&utm_medium=cta&utm_content=Dev%20Center%20article%20on%20Ruby%20on%20Rails%20written%20by%20Luce&utm_term=luce.carter) are always the best place to start.

Thanks again to Rails Girls London for inspiring this post and for the excellent guide that gave such a great foundation to build on!


A tutorial showing how to get started with MongoDB Atlas and Ruby on Rails using the Mongoid driver

Getting Started with MongoDB Atlas and Ruby on Rails

In a world of always-on, always-connected devices, it is more important than ever that apps function in a way that gives a user a good experience. But as well as the users, developers matter too. We want to be able to feel productive and focus on delivery and innovation, not solving common problems.

In this article, we will look at how you can mix .NET MAUI with MongoDB’s Atlas App Services, including the Atlas Device SDKs mobile database, for online/offline-capable apps without the pain of coding for network handling and errors.


## What are Atlas Device SDKs?
Atlas Device SDKs, formerly [Realm](https://mdb.link/realm-now-atlasdevicesdk) is an [alternative to SQLite](https://mdb.link/sqlite-vs-realm) that takes advantage of MongoDB’s document data model. It is a mobile-first database that has been designed for modern data-driven applications. Although the focus of this article is the mobile side of Atlas Device SDK, it actually also supports the building of web, desktop, and IoT apps.

Atlas Device SDKs have some great features that save a lot of time as a developer. It uses an object-oriented data model so you can work directly with the native objects without needing any Object Relational Mappers (ORMs) or Data Access Objects (DAO). This also means it is simple to start working with and scales well.

Plus, Atlas Device SDKs are part of the [Atlas App Services](https://mdb.link/appservices-docs) suite of products that you get access to via the SDK. This means that Realm also has automatic access to a built-in, device-to-cloud sync feature. It uses a local database stored on the device to allow for always-on functionality. MongoDB also has Atlas, a document database as a service in the cloud, offering many benefits such as resilience, security, and scaling. The great thing about device sync with App Services is it links to a cloud-hosted [MongoDB Atlas cluster](https://mdb.link/atlas), automatically taking care of syncing between them, including in the event of changes in network connectivity. By taking advantage of Atlas, you can share data between multiple devices, users, and the back ends using the same database cluster. 

## Can you use Atlas Device SDKs with .NET MAUI?
In short, yes! There is a [.NET SDK](https://mdb.link/atlasdevicesdks-docs) available that supports .NET, MAUI (including Desktop), Universal Windows Platform (UWP), and even Unity.

In fact, [Maddy Montaquila](https://twitter.com/maddymontaquila?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor) (Senior PM for MAUI at Microsoft) and I got talking about fun project ideas and came up with HouseMovingAssistant, an app built using .NET MAUI and Atlas Device SDKs, for tracking tasks related to moving house. 


![Homepage of House Moving Assistant with a way to add tasks and see an editable list of existing tasks](https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/bltdd7f210e45f452d0/6553684a1bfcdbe425dd8d31/hma-homepage.png)

It takes advantage of all the great features of Atlas Device SDKs and App Services, including device sync, data partitioning based on the logged-in user, and authentication to handle the logging in and out.

It even uses another MongoDB feature, [Charts](https://mdb.link/atlas-charts), which allows for great visualizations of data in your Atlas cluster, without having to use any complex graphing libraries!

![Donut Graph showing the distribution of tasks in different states: Open, Complete and InProgress](https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blta455e254de772861/6553631c9ca24aa29732aa21/charts.png)

## Code ##
The actual code for working with Atlas Device SDKs is very simple and straightforward. This article isn't a full tutorial, but we will use code snippets to show how simple it is. If you want to see the full code for the application, you can find it on [GitHub](https://github.com/mongodb-developer/HouseMovingAssistant?utm_campaign=devrel&utm_medium=cta&utm_content=.NET%20MAUI%20and%20Realm%20article%20on%20the%20MS%20DevBlog%20by%20Luce%20Carter&utm_term=luce.carter).


> Note that despite the product update name, the Realm name is still used in the library name and code for now so you will see references to Realm throughout the next sections.

### Initialization
```csharp
RealmApp = Realms.Sync.App.Create(AppConfig.RealmAppId);
```
This code creates your Realm Sync App and lives inside of App.Xaml.cs.

```csharp
PartitionSyncConfiguration config = new PartitionSyncConfiguration($"{App.RealmApp.CurrentUser.Id}", App.RealmApp.CurrentUser);           return Realm.GetInstance(config);
```
The code above is part of an initialization method and uses the RealmApp from earlier to create the connection to your app inside of App Services. This gives you access to features such as authentication (and more), as well as your Atlas data.

### Log in/create an account ###
Working with authentication is equally as simple. Creating an account is as easy as picking an authentication type and passing the required credentials.

The most simple way is email and password auth using details entered in a form in your mobile app.

```csharp
await App.RealmApp.EmailPasswordAuth.RegisterUserAsync(EmailText, PasswordText);
```

Logging in, too, is one call.

```csharp
var user = await App.RealmApp.LogInAsync(Credentials.EmailPassword(EmailText, PasswordText));
```

Of course, you can add conditional handling around this, such as checking if there is already a user object available and combining that with navigation built into MAUI, such as [Shell](https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/shell/?view=net-maui-7.0), to simply skip logging in if the user is already logged in:

```csharp
if (user != null)
                {
                    await AppShell.Current.GoToAsync("///Main");
                }
```

### Model
As mentioned earlier in the article, Atlas Device SDKs can work with simple C# objects with properties, and use those as fields in your document, handling mapping between object and document.

One example of this is the MovingTask object, which represents a moving task. Below is a snippet of part of the MovingTask.cs model object.

```csharp
[PrimaryKey]
        [MapTo("_id")]
        public ObjectId Id { get; set; } = ObjectId.GenerateNewId();

        [MapTo("owner")]
        public string Owner { get; set; }

        [MapTo("name")]
        [Required]
        public string Name { get; set; }

        [MapTo("_partition")]
        [Required]
        public string Partition { get; set; }

        [MapTo("status")]
        [Required]
        public string Status { get; set; }

        [MapTo("createdAt")]        
        public DateTimeOffset CreatedAt { get; set; }

```

It uses standard properties, with some additional attributes from the [MongoDB driver](https://mdb.link/mongodbcsharpdriver), which mark fields as required and also say what fields they map to in the document. This is great for handling different upper and lower case naming conventions, differing data types, or even if you wanted to use a totally different name in your documents versus your code, for any reason.

You will notice that the last property uses the DateTimeOffset data type, which is part of C#. This isn’t available as a data type in a MongoDB document, but the driver is able to handle converting this to and from a supported type without requiring any manual code, which is super powerful.

## Do Atlas Device SDKs support MVVM?
Absolutely. It fully supports INotifyPropertyChanged events, meaning you don’t have to worry about whether the data is up to date. You can trust that it is. This support for events means that you don’t need to have an extra layer between your viewmodel and your database if you don’t want to.

As of Realm 10.18.0 (as it was known at the time), there is even support for Source Generators, making it even easier to work with Atlas Device SDKs and MVVM applications.

HouseMovingAssistant fully takes advantage of Source Generators. In fact, the MovingTask model that we saw earlier implements IRealmObject, which is what brings in source generation to your models.

The list of moving tasks visible on the page uses a standard IEnumerable type, fully supported by CollectionView in MAUI.

```csharp
[ObservableProperty]
        IEnumerable<MovingTask> movingTasks;
```
 Populating that list of tasks is then easy thanks to LINQ support.

```chsarp
MovingTasks = realm.All<MovingTask>().OrderBy(task => task.CreatedAt);
```
## What else should I know?
There are a couple of extra things to know about working with Atlas Device SDKs from your .NET MAUI applications.

### Services
Although as discussed above, you can easily and safely talk directly to the database (via the SDK) from your viewmodel, it is good practice to have an additional service class. This could be in a different/shared project that is used by other applications that want to talk to Atlas, or within your application for an added abstraction.

In HouseMovingAssistant, there is a RealmDatabaseService.cs class which provides a method for fetching the Realm instance. This is because you only want one instance of your Realm at a time, so it is better to have this as a public method in the service.

```csharp
public static Realm GetRealm()
        {
            PartitionSyncConfiguration config = new PartitionSyncConfiguration($"{App.RealmApp.CurrentUser.Id}", App.RealmApp.CurrentUser);
            return Realm.GetInstance(config);
        }

```
### Transactions
Because of the way Atlas Device SDKs work under the hood, any kind of operation to it — be it read, create, update, or delete — is done inside what is called a write transaction. The use of transactions means that actions are grouped together as one and if one of those fails, the whole thing fails. 

Carrying out a transaction inside the Realm .NET SDK is super easy. We use it in HouseMovingAssistant for many features, including creating a new task, updating an existing task, or deleting one.

```csharp
var task =
                    new MovingTask
                    {
                        Name = MovingTaskEntryText,
                        Partition = App.RealmApp.CurrentUser.Id,
                        Status = MovingTask.TaskStatus.Open.ToString(),
                        Owner = App.RealmApp.CurrentUser.Profile.Email,
                        CreatedAt = DateTimeOffset.UtcNow
                    };

                realm.Write(() =>
                {
                    realm.Add(task);
                });
```
The code above creates a task using the model we saw earlier and then inside a write transaction, adds that object to the Realm database, which will in turn update the Atlas cluster it is connected to. This is a great example of how you don’t need an ORM, as we create an object from our model class and can directly add it, without needing to do anything extra.
## Summary
In this article, we have gone on a whistle stop tour of .NET MAUI with Atlas Device SDKs (formerly Realm), and how you can quickly get up and running with a data capable application, with online/offline support and no need for an ORM.

There is so much more you can do with Atlas Device SDKs, MongoDB Atlas, and the App Services platform. A great article to read next is on [advanced data modelling with Realm and .NET](https://www.mongodb.com/developer/products/realm/advanced-modeling-realm-dotnet/) by the lead engineer for the Atlas Device SDKs .NET team, Nikola Irinchev.

You can get started today by [signing up to an Atlas account](https://www.mongodb.com/docs/atlas/getting-started/?utm_campaign=devrel&utm_medium=cta&utm_content=.NET%20Realm%20and%20MAUI%20Article%20by%20Luce%20Carter&utm_term=luce.carter) and discovering the world of Realm, Atlas and Atlas App Services!

A tutorial showing how to get started with Atlas Device SDKs, MongoDB Atlas and .NET MAUI