Posts

Showing posts with the label Web

REST - Representational State Transfer

REST - Representational State Transfer Since the past 5 years, there has been an increasing demand to know how to build RESTful Web Services. Never had a job interview for Software Engineering failed to include at least one question about REST or RESTful Web Services and never a week passed with at least hearing one comment like “if we do x, it will not be RESTful” . Everyone seems to be on top of it, know everything about REST. But is it true? Do they really know REST? How certain can one be that her system is RESTful? Today I would like to share my point of view about REST by going through three points: 1. Overview 2. How does REST link with HTTP protocol 3. What have we learnt 1. Overview Countless time, I have seen the following: A: Do you know REST? B: Yes A: Can you write the URLs for a REST API for a user profile? B: Ok, there; GET /profiles GET /profiles/123 POST /profiles PUT /profiles/123 PATCH /profiles/123 DELETE /profiles/123 A: P...

Swagger for ASP NET Core API development

Image
Swagger for ASP NET Core API development Building a web API is not an easy task. In order to build one easy to use, we need to consider the routes, the HTTP methods, the return results from the endpoints, the parameter used for the body of the requests, etc… Swagger is a tool which compiles all our API endpoints into a friendly GUI and allows us to directly test them. It brings a lot of benefits as we can easily pinpoint mistakes in the endpoints route or parameters and of course in the implementation since we can straight away call the endpoints. Today we will see how we can integrate Swagger in 3 parts: 1. Add Swagger to ASP NET Core project 2. Handle authentication 3. Handle endpoints specificities with filters 1. Add Swagger to ASP NET Core project We start first by creating an empty ASP NET Core project with the following startup: public class Startup { public void ConfigureServices(IServiceCollection services) { services.AddMvc(); } public void Co...

Managing global state with Ngrx store in Angular

Image
Managing global state with Ngrx store in Angular The goal of Angular components is to be completely independent. This can lead to mismatch of displayed data where one component isn’t in sync with what other components are displaying. One solution is to have a stateful service shared among all components and delivering global data. This can be problematic when multiple pieces have to be globally accessible among multiple components. In this situation, the need for a global state becomes inevitable. Global state has had a bad reputation since inception due to its unpredictable nature. About two years ago, Redux was introduced as a way to manage this unpredictability by making the state immutable and operations acting on the state synchronous and stateless (a similiar approach can be found in the actor pattern). Since then, its principales has inspired multiple implementations, one of them being the Ngrx store for Angular. Today I will go through the library and build a sample applic...

Bootstrap your Angular project with Angular CLI

Bootstrap your Angular project with Angular CLI In order to facilitate the creation of a new Angular project, it is possible to use the Angular CLI . Angular CLI is a CLI providing functionality to bootstrap, upgrade and serve your Angular app. Today we will see how we can use Angular CLI to improve our workflow. Bootstrap a new project Creating new components Serve the application 1. Bootstrap a new project Start first by installing Angular CLI with the following command: npm install -g @angular/cli After the installation, the cli should be available globally via the ng command. You can try it with ng help . To bootstrap a project, we use ng new my-new-project . We can also specify some options, here we specify that we want to skip the tests creation which is set to true by default, we want inline style and inline template. ng new my-new-project --skip-tests --inline-style --inline-template This creates the simplest Angular app. We have the main module app.module.ts and ...

Post form data to WebSharper sitelet from HTML/JS

Image
Post form data to WebSharper sitelet from HTML/JS When building websites, chances are that you will need to gather data from your users. The most common way to gather data is via a form. But after gathering the data, there are two ways to submit it from the browser to your server: Using a HTML form Using an Ajax call Today we will see the differences and how we can implement it. 1. Submit data using a form Before hand, I have created a simple server which has a single endpoint accepting a POST. type EndPoint = | [<EndPoint "POST /upload">] Upload let Main = Application.MultiPage (fun ctx -> function Upload -> Content.Text "Received") Next we can create a simple form with one an input and button to submit. <form method="post" action="/upload"> <input name="my-data" type="text" /> <button type="submit">Submit</button> </form> The action is the url to ...

Get your domain name and setup SSL with CloudFlare

Image
Get your domain name and setup SSL with Cloudflare Few weeks ago I explained how to setup a static page and host it on Github for free using github pages. Have a look at it if you missed it https://kimsereyblog.blogspot.co.uk/2016/07/from-idea-to-product-with-websharper-in.html . I also explain how we could get a custom domain name for people to access our website easily. For example I’ve setup a github page with my own name domain https://kimsereylam.com and got it served via HTTP. The problem with setting your own domain name is that your page will not be served with HTTPS. Now for the example website, it is hosted on GitHub and it’s just static data therefore communication encryption isn’t really important. But the issue is that if you share this website to others without specifying the protocol , Chrome will try to open it with HTTPS. And when it does, if you do not serve HTTPS, an ugly error page will show on the browser. This will definitely look bad and more importantly, it ...