Learn Software Engineering through YouTube.
YouTube is full of beginner-friendly videos teaching all Software Engineering concepts. When I started, I simply searched 'how to build an app.'
​
These videos deep dive specific topics such as front-end, backend, pipelines and git. This is helpful, but as a beginner, I didn't know how to tie the concepts together.
​
To actually make this tutorial beginner-friendly, I must start with the big picture. From there, we'll get into the actual coding.
The Big Picture.
The big picture is simple. In most cases, you'll develop an application that your users install on their device.
​
If your users interact with each other, or with data stored on the internet, you will also develop a server to handle this communication. You will publish this server on Microsoft Azure, AWS or your Cloud Computing servicer of choice.
​
This server will "listen" for communication requests from the application stored on each device, and forward these messages to their destination. At the same time, the server will update the database accordingly. For example, if User A sends a Friend Request to User B, this request originates in User A's device and is sent to the server in the form of an HTTP POST request (more on this below). The server will add, or POST, a record, aka row, to the database's FriendRequest table. This new record will have a 'Sender' column, set to A, and a 'Receiver' column, set to B. When User B logs in and navigates to the Friend Requests page, their device will send an HTTP GET request to the server, which will GET all Friend Requests from the database where 'Receiver' is set to B. Each user will only see Friend Requests in which 'Receiver' is equal to their unique UserId (A, B, 14534, etc).
Where Things Go.
Your application will be stored on each user's device. Most likely, they'll download this from the Apple App Store or Google Play Store.
​
In this example, your server will be published in an Azure App Service instance. This is a Microsoft service that let's you upload your server code, and it will provide a URL that your front-end application uses to interact with the server.
​
Your database will be stored in an Azure SQL Database instance. This is a Microsoft service that stores your database in the Cloud. A database is a collection of tables, similar to Excel spreadsheets, that store data in rows and columns. Your database will have a table, or spreadsheet, for each type of object your application interacts with. For example, if users login to your application, you'll likely have a User table. This table will have a column for UserId, Username, Email, etc. and store all users within this table.
Prerequisites.
This tutorial assumes you have basic knowledge in a programming language:
- loops
- classes
​
You should also have Microsoft Visual Studio with the .NET Runtime installed. This let's you build an ASP.NET Core Web API for the server and a .NET MAUI project for the front-end.
​
Microsoft Visual Studio Community​
​
​
Getting Started.
This .NET MAUI video introduces .NET MAUI with a simple example. That being said, I literally followed along 4 separate times to understand what's happening. It's likely you will do the same.
​
As shown in the video, .NET MAUI is a tool that let's you build one application and deploy it to iOS, Android, Windows and Mac. It's incredibly powerful, as you only need to maintain one code base for your project.
​
Some helpful tips to prevent confusion with the video:
1. He builds an ASP.NET Core Web API at 35:50 before he builds the .NET MAUI front-end. Remember, the API is essentially the server that translates front-end HTTP Requests into Database queries. The API allows you to add, remove or modify data within the database tables.
2. Models are the objects you are creating, modifying or deleting within your application. For a Social Media app, this could include User, FriendRequest, Message and Comment. This ASP.NET Core Web API video gives a simple explanation and demonstrates how Models each have their own table within a database.
3. Repositories hold functions that allow you to Create, Read, Update or Delete each Model from the Database. For example, a CarRepository lets you interact with the Car database table for additions, deletions or modifications. An Interface is simply a blueprint for the repository - defining/prototyping the functions that the repository will hold.
​
See example below.
Friend Request Example
Within a Social Media app, if User 43 clicks "Add Friend" on User 12's profile page, the front-end's AddFriendButtonClicked() function would contain code that sends an HTTP Post request to the ASP.NET Core Web API. This HTTP Post request would be sent to https://azure.myapi.net/friendrequests/43/12. The server, which is listening for HTTP requests that are sent to https://azure.myapi.net would receive the HTTP Post request and see it's intended for the friendrequests endpoint. Because the URL ends with 43/12, the server translates this into "POST (or add) a new FriendRequest to the database's FriendRequest table, with Sender set to 43 and Receiver set to 12".
Build a complete ASP.NET Core Web API
Follow this series to develop a more complex ASP.NET Core Web API. This example includes multiple Models, which will prepare you for your own project.
​
At a high level, the series demonstrates how to:
-
define your Models
-
create the relationships between those Models (in the form of foreign keys and many-to-many join tables)
-
create the database tables
-
run 'migrations' to create the C# code that converts API requests to SQL
-
create Interfaces, Repositories and Controllers for each Model
Host your ASP.NET Core Web API
Within Visual Studio, with your ASP.NET Core Web API open, you can click "Debug" or "https" to fire up your server.
This concept confused me at first. Simply put, when you Run your server, it begins listening for HTTP(S) requests at some localhost address. Localhost refers to your computer, meaning the ASP.NET Core Web API is running within your machine. This is practical during development, you simply send HTTP requests to http://localhost:XXXX using Postman or Swagger. Postman is a desktop application that let's you send custom HTTP requests to any URL. For your example, when you Run your API within Visual Studio, it will show you which URL it's listening on for HTTP and HTTPS. In my example, the server is using http://localhost:5024 for http - which I will use for development. In production, when the server is hosted in the Microsoft Cloud instead of Localhost, I'll use HTTPS for security.
If your ASP.NET Core Web API uses Swagger, you don't need Postman. Swagger is a built-in tool that let's you send HTTP requests to your API when it's running. If you are using Postman, simply send a GET Request to http://localhost:XXXX/cars or whichever Model/Endpoint you've developed. Teddy Smith's series demonstrates this.
​
When you're ready to Host your API in the Microsoft Cloud for production or development, navigate to Microsoft Azure and create an account. Then, follow this video tutorial to create your Azure App Service. When you use Swagger, or Postman with the Localhost URL, you're interacting with the Development version of your API. When you use Postman with the azure-myapi.net URL, you're interacting with the Production version of your API. This was a very confusing distinction for me.
Build your .NET MAUI front-end
.NET MAUI is a project template you can select when you open Visual Studio. By default, the project contains an app you may launch on iOS, Android, Mac and Windows.
​
Starting with the blank app, you may add custom pages, navigation, forms and services. For example, Vizibl opens up to a Loading Page that checks if the user is currently logged in. If so, the app navigates to the Main Page. If the user is not logged in, the app navigates to the Login Page. This is done by saving the user's ID in Local Storage, then checking Auth0 to determine if that user has an active session on the device. Services are simply classes that handle communication with the Server via HTTPS requests. In the case of Vizibl, if a user clicks "Add Friend" on another user's profile, the FriendRequestDataService sends a new FriendRequest object to the server's URL. friendRequestCreate contains both User's ID's and a Status set to Pending.
Many tutorials implement the MVVM pattern, which I avoided for simplicity. Here are some valuable tutorials: