Danywalls

Life , Coding , Father

Sometimes I want to find an easy way to handle HTTP errors. Using Axios interceptors, we handle requests and response before the then or catch.

I will create a Vue EventBus instance to communicate my interceptor with the app and emit an event when some error happened.

const EventBus = new Vue(); axios.interceptors.response.use( function(response) { return response.data; }, function(error) { EventBus.$emit('error', 'sorry try more later'); return Promise.reject(error); });

Into the Vue instance, the eventBus is registered to listen to the error event and be handled, using $message from ElementUI it can show a fancy error into page.

let app = new Vue({ el: "# app", created() { EventBus.$on("error", showerror); }); }, methods: { Showerror: (msg) { this.$message({ message: msg, type: "warning" } } } });

#vue

You are reading the third part of Create Rest API with Express, feel free to read the Part 1 and Part 2 In this part, I will send a request to the POST method using Vue.

Add form to send data.

The first step is to include the CDN to index.html for a little styling. The HTML contains a form with input and textarea element linked to Vue. We use v-model and the v-on directive to liest to form submit.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <title>Document</title> </head> <body> <div id="app" class="container"> <div class="row"> <form v-on:submit="sendToApi"> <div class="form-group"> <label for="title">Title</label> <input id="title" v-model="title" class="form-control" type="text"> </div> <div class="form-group"> <label for="description">Description</label> <textarea id="description" class="form-control" ></textarea> </div> <input class="btn btn-primary" type="submit" value="Send to API"> </form> </div> The method sendToApi() will send the data from our app to the API.

Read more...

You are reading the second part of Create Rest API with Express, feel free to read the Part 1 for continue, in this case I will build a simple client with Vue for getting the list of documents from our API.

Create my app with Vue.

The only goal of this application is to get the answer and show them into the ul.

The first steps are into the index.html are include the CDN link for Vue, Axios, and vueapp.js file.

The code HTML contains a div with id 'app' to be used by Vue and also the v-for directive to iterate into the documents array property.

<body> <div id="app" class="container"> <ul> <li v-for="d in documents">{{d.description}}</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="vueapp.js"></script> </body> The App have into data area the APIurl property, the documents property array and the method getDocuments().

Read more...

Today I wanted to create my own REST API using express, some friends told me about Express is allow create stateless APIS quick and easy and support HTTP verbs to able communicate with our resources getting the responses in JSON format.

Prerequisites

This is what you’re going to need in order to follow along with this example:

– Node.js and npm installed on your machine; – A basic understanding of Javascript;

Once that stuff is out of the way, we can proceed.

Configure my project and Install express

I will to configure my project with Node and install express and also use nodemon which allows run node code and refresh for every change, to do so, head over to the terminal and run this:

npm install -g nodemon npm init -y npm install -s express

Create the server for listen the requests.

Next point I create a file named expressapp.js, import express, create const which store our express instance, and call the method “listen” to start our server and get requests from the client.

Read more...

I love to find fonts for coding, write or read this is my top 3 fonts most used fonts for coding.

#fonts #coding

Every day we want to create beautiful apps, but we don't have time to create great interfaces. This kind of situation can be resolved using Angular Material.

The Angular Material is a node package created by Angular Team members. Using Google Material behavior and animations. It brings with some angular components ready to use.

Adding Angular Material

Be sure are you using the last version of @angular/cli. This allows creating apps quickly if you don't have any app already created, feel free to create one.

danyiMac:lab$ ng new myexampleApp

The ng add command allow install and configure our project with Angular Material

danyiMac:lab$ ng add @angular/material

What did ng add for me?

Read more...

The components in React allow receive data using Props, the props aren't is strict, that's mean you can send any type of value, or forget to send some value.

In our example, the component Calculator needs 2 props number1 and number2.

import React, { Component } from 'react'; export default class Calculator extends Component { render() { const { number1, number2 } = this.props; let total = number1 + number2; return ( <div> <input type="text" value={number1} /> <input type="text" value={number2} /> <span>{total}</span> </div> ); } }

We are sending a string value instead of a number and forget the second number.

import Calculator from './components/Calculator'; class App extends Component { render() { let edgar = 'The Wall'; return <div className="App"> <Calculator number1={edgar} /> </div>; } }

How we can manage this problem ?

Read more...

Pocket is an RSS feed client that help me to avoid use Twitter as a default news feed and keep my bookmarks clean.

With Pocket, I can save articles and it recommends content related “React” or “Vue” and I can save all things related to these topics and read later.

If you use Twitter only as a news feed then should use Pocket as an alternative and clean your bookmarks as well.

#apps

Flutter is a Dart Framework for building mobile 2D Apps for iOS and Android.

The Flutter SDK provides utilities, functions, and widgets to create apps with one codebase.

In short words, Flutter is a framework with a set of features that use Dart as a programming language to interact with the Flutter SDK.

The Flutter mindset is like build apps as widgets tree and everything should be a widget.

We will use our Flutter API with Dart for creating Apps and the Fluter SDK take our Dart code to transform into native code for IOS and Android.

Flutter looks nice, I expect to play more in the future, If you want to learn more about flutter, you can take the following online courses, I recommend first read a little bit about dart language, take online the first app and then continue with the Udacity Flutter course.

#flutter

When we develop for asp.net and we want to access our IIS-Express server from the other computer or mobile.

IIS-Express Proxy is a Nodejs package that allows us to access our IIS-Express from any device in the same network.

To use it, it is enough to start our web application in Visual Studio debug mode and the application will start the IIS Express in some example port http://localhost:9597, to be able to access from our mobile, We have to install iisexpress-proxy node package.

-Install iisexpress-proxy globally. npm install iisexpress-proxy -g

-Specify iisexpress-proxy where the port has to redirect. iisexpress-proxy 9597 to 3000

Using our device connected to the same network, we can to your IIS-Express, you can read more information visiting the Github package web https://github.com/icflorescu/iisexpress-proxy.

#npm