開発スタッフがアプリ関連の最新技術やニュースをご紹介します。

A few weeks ago, I wrote an article about serverless and today I will make a touch to serverless framework using node.js and AWS (Amazon web service). This is just a simple and getting started article how to use serverless framework. I will be using mac OS for the operating system.

I will divided the parts because this article might be long as the article includes screenshots. So lets get started.

First, we need to check the node version in your computer. Check with node – v in your computer. Then we will install the serverless framework using npm.

sudo npm install -g serverless     

We will get a result like this at the end of installation.

You can test whether serverless is installed on your computer or not using serverless or sls.

Ok , now we need to create IAM at Amazon console panel. Lets see the steps in below.

Here is the IAM dashboard.

Then we will create a new IAM user to integrate with our serverless project.

Add a username and mark the checkbox on programmatic access. Then go to next step for permission.

We will grant the user for administrator access for now as we want to build services from serverless configuration later on.

As a final step, we will get a new IAM user with access key and secret access key. We will use these keys to setup credentials in our serverless project. Lets create credentials as below

serverless config credentials --provider aws --key YOUR-ACCESS-KEY --secret YOUR-SECRET-ACCESS-KEY

This will be the correct response after hitting the above command and now we have successfully created credentials with IAM user.

In the next week, I will be talking about creating a project and start deploying from our serverless project.

Yuuma

Tweet

Firstly create a new fresh Laravel project using a composer command:

composer create-project laravel/laravel push-notification-app

Then go to the app’s root:

cd push-notification-app/

Database Connection

Secondly, to make a database connection in .env file filling with database name, username, password.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password

Install Laravel UI Scaffolding

Next, install ui package and create auth scaffolding based on Bootstrap CSS framework.

composer require laravel/ui

After that, need to install to manifest bootstrap auth ui.

php artisan ui bootstrap --auth

You have to suggested commands to compile your fresh scaffolding.

npm install && npm run dev

Update Server Key in User Table

We need to add a new column in the current user table.

php artisan make:migration add_column_device_token

Subsequently, we need to add this device token key in the new table.

class AddColumnDeviceToken extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        //
        Schema::table('users', function (Blueprint $table) {
            $table->string('device_token')->nullable();
        });
    }

After that, move the device key to the user table.

class User extends Authenticatable
{
    use HasFactory, Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name',
        'email',
        'password',
        'device_token'
    ];

Then type to run migrate execute command.

php artisan migrate

Next week I will show you how to get the Firebase cloud messaging server key and Firebase web app’s configuration credentials.

By Ami

Tweet

Nintendo Switch用ソフトの
「ナビつき！つくってわかる　はじめてゲームプログラミング」
を購入してすこし遊んでみました。

Tweet

We all create forms in your system & applications. If you are a web developer , you may experience once or more creating forms. For example contact form , registration form etc. Recaptcha is a free service supported by Google which helps to protect our websites from spam and abuse. Basically A “CAPTCHA” is a test to separate human and bots apart.

Today I will guide you how to add a reCAPTCHA service in your form easily.

First thing first, we need to generate a reCAPTCHA key to add in our form. You can go to this link and click + button to create a key.

This will proceed to a form to choose the options like this.

There are two versions of reCAPTCHA type for now , version 2 and 3. With reCAPTCHA v2, the only action required was to check if the user successfully solved the challenge or not. With reCAPTCHA v3, you must now decide what action to take based on the score. you may choose depending on your favour. In this tutorial , I will use v2 as I like its simplicity.

After filling up the form, you will get the reCAPTCHA site key like this.

For the source code part, we need to import the reCaptcha API JS in a script tag like this.

<script src=https://www.google.com/recaptcha/api.js></script>

And we can embed our site key in HTML.

<div class="g-recaptcha" data-sitekey="YOUR-SITE-KEY-HERE"></div>

Of course you can modify the css class as you like. For the validation, we can use grecaptcha.getResponse()function to validate the reCAPTCHA response. I will add a example code which is used in my project.

//This is just a sample code and can differ depending on your //source code.
if ($('.g-recaptcha').length > 0) {
   if (grecaptcha.getResponse() == "") {
      flag = 1;
        alert('Please verify Recaptch');
   } else {
      flag = 0;
   }
}

// You can also read the official documentation.
// https://developers.google.com/recaptcha/intro

As a final result on the browser, you will get a reCAPTCHA checkbox like this. This may also differ depending on your design preferences.

By Yuuma

Tweet

Today I would like to share some important tips about excel calculation. Sometimes, we change today date but it change automatically arriving today date when we open the file.

In this time, how to fix it.

How to Change Excel Calculation Options

Select the data we want to change and go the Excel ribbon > Formulas tab > Calculation group, click the Calculation Options button and select one of the following options:

Automatic (default) – tells Excel to automatically recalculate all dependent formulas every time any value, formula, or name referenced in those formulas is changed.

Manual – turns off automatic calculation in Excel. Open workbooks will be recalculated only when you explicitly do.

How to force recalculation in Excel

To manually recalculate all open worksheets and update all open chart sheets, go to the Formulas tab > Calculation group, and click the Calculate Now button.

Hope you find it interesting and useful.

By Ami

Tweet