arduino 推杆_如何使用推杆在laravel 7x中创建实时模拟器

arduino 推杆

I’m assuming you has simple level to know how to use routes, views in laravel

我假设您具有简单的知识，知道如何使用laravel中的路线和视图

Today we are going to learn how to create real time simulator with the camera home automation like real example. Thit are going to be first tutorial in the big proyect named Switch-Home. People say that’s it’s “ so advanced” but we are going to make it so easy for you. Read it all because i have surprise for you.

今天，我们将学习如何像实际示例一样使用相机家庭自动化创建实时模拟器。 这将是名为Switch-Home的大型项目的第一个教程。 人们说那是“如此先进”，但我们将为您简化它。 阅读所有内容，因为我为您感到惊讶。

We are going to learn how to make something like that.

我们将学习如何制作类似的东西。

That’s look great buddy? let me show you how to make it real.

看起来不错，哥们？ 让我告诉你如何实现它。

First you need laravel installed in your system:

首先，您需要在系统中安装laravel：

apt-get install php

Now you need install curl to get composer and update your packages:

现在，您需要安装curl以获取作曲家并更新软件包：

sudo apt-get updatesudo apt-get install curl

Now get composer:

现在得到作曲家：

sudo curl -s https://getcomposer.org/installer | php

And finally you need move composer to phar:

最后，您需要将作曲家转移到phar：

sudo mv composer.phar /usr/local/bin/composer

It’s the big moment:

这是重要时刻：

composer global require laravel/installer

And create your project:

并创建您的项目：

composer create-project --prefer-dist laravel/laravel laravel-simulator

Yes buddy deploy your first project oppening terminal, when you input the next code don’t close the terminal, for future we are going to use Homestead:

是的，伙伴部署了您的第一个项目支持终端，当您输入下一个代码时，请不要关闭终端，为了将来我们将使用Homestead ：

php artisan serve

And enter to watch what you has:

然后输入以查看您拥有的内容：

Server deployment locally.

本地服务器部署。

Okay, the next step it’s make 2 routes to get your simulator and the page to deploy that, to do that we need create controller first:

好的，下一步是进行2条路由来获取您的模拟器，并通过页面进行部署，为此，我们首先需要创建控制器：

php artisan make:controller RealTimeController

Okay let’s do it, in your “routes/web.php” delete the exists routes and put:

好的，让我们开始吧，在您的“ routes / web.php”中删除存在的路由，然后输入：

Route::get('/', 'RealTimeController@getIndex')->name('index');Route::get('/simulator', 'RealTimeController@getSimulator')->name('simulator');

In your “RealTimeController” create the next functions to show views content:

在“ RealTimeController”中，创建以下函数以显示视图内容：

public function getIndex(){
 return view('index');
}public function getSimulator(){
 return view('simulator/simulator');
}

The next step it’s the probbally the most important we are going to create PusherController but first you need create a free Pusher account at https://pusher.com/signup then login to your dashboard and create an app.

下一步是创建PusherController时最重要的一步，但是首先您需要在https://pusher.com/signup创建一个免费的Pusher帐户，然后登录到仪表板并创建一个应用程序。

When you make it you can do the next step, it’s simple first create controller named “PusherController”:

完成后，您就可以进行下一步了，首先简单地创建一个名为“ PusherController”的控制器：

php artisan make:controller PusherController

Install the dependencies required for pusher:

安装推送程序所需的依赖项：

composer require pusher/pusher-php-server

And put your credentials inside .env file localated in the root from your project:

并将您的凭据放入位于项目根目录下的.env文件中：

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=your_id
PUSHER_APP_KEY=your_key
PUSHER_APP_SECRET=your_secret
PUSHER_APP_CLUSTER=your_cluster

*Check your “config/broadcasting.php”:

*检查您的“ config / broadcasting.php”：

'pusher' => [       
   'driver' => 'pusher',       
   'key' => env('PUSHER_APP_KEY'),          
   'secret' => env('PUSHER_APP_SECRET'),       
   'app_id' => env('PUSHER_APP_ID'),       
   'options' => [           
                 'cluster' => env('PUSHER_CLUSTER'),  
                 'encrypted' => true,       
                ],   
],

Well, now go back to web.php and put this inside:

好了，现在回到web.php并将其放入其中：

Route::get('/notify', 'PusherController@sendNotification');

Nice my friend, we are need to create function “sendNotification” inside “PusherController” and put this in the top “use Pusher\Pusher;”, let go to see controller content:

很好，我的朋友，我们需要在“ PusherController”内部创建函数“ sendNotification”，并将其放在顶部“ use Pusher \ Pusher;”中。 ，让我们来看一下控制器内容：

public function sendNotification()
    {
        //Remember to change this with your cluster name.
        $options = array(
            'cluster' => 'your_cluster', 
            'encrypted' => true
        );//Remember to set your credentials below.
        $pusher = new Pusher(
            'your_key',
            'your_secret',
            'your_id',
            $options
        );$message = [
            "ES: La cámara del salón ha detectado un intruso!",
            "EN: "The living room camera has detected an intruder!"
           ];
        //Send a message to notify channel with an event name of  notify-event
        $pusher->trigger('notify', 'notify-event', $message);     return 'Real time simulation sended!';
    }

In this block we are put the credentials from you pusher account, when you put it the next step it’s sending the message with your custom notify channel and event name. Now we need create the views pages, go to “resources/views” and create the next folder “simulator” and files:

在此块中，我们将使用您的推送器帐户中的凭据，当您进行下一步时，它将使用您的自定义通知通道和事件名称发送消息。 现在我们需要创建视图页面，转到“资源/视图”并创建下一个文件夹“模拟器”和文件：

*“resources/views/index.blade.php” content:

*“资源/视图/index.blade.php”内容：

*“simulator/simulator.blade.php” content it’s page with return putted in PusherController.

*“ simulator / simulator.blade.php”内容为带有返回内容的页面，该页面已放入PusherController中。

This file content all we need to create the real time camera simulator, if you make fast look, you can see we’re using big code, because we wanna make this cool, i hate the simple example.

该文件包含了创建实时相机模拟器所需的全部内容，如果您快速浏览，您会发现我们正在使用大代码，因为我们想让它变得很酷，我讨厌简单的示例。

Okay let’s to explain how this found. First you can see we are using many link and script, that’s need it cause require pusher, jquery, bootstrap and popper links. Look this block of code:

好，让我们解释一下如何找到它。 首先，您可以看到我们使用了许多链接和脚本，这是需要使用pusher，jquery，bootstrap和popper链接的原因。 看一下这段代码：

<i class="fas fa-bell fa-lg" style="margin-right: 28px;"></i>
<i class="fas fa-circle fa-sm" id="notify-color" style="margin-right: 52px; vertical-align: top;position: absolute;top: 3px;right: -20px;  color: red;display:none;"></i>
<a class="dropdown-item incidente-notification" href="#">Not intruder</a>

In this block we have bell icon and ID “notify-color” to make it visible when you receive the message in “ incidente-notification” with red color in the right top icon.

在此块中，我们有铃铛图标和ID“ notify-color”，当您在“ evente-notification”中收到消息时，在右上方的图标中带有红色，使其可见。

var pusher = new Pusher('your_key', {
    cluster: 'eu',
    encrypted: true
  });var channel = pusher.subscribe('notify');
   channel.bind('notify-event', function(message) {           var incidente = '<strong class="text- danger">'+message[0]+'</strong>';
     $('.incidente-notification').html(incidente)     $('#notify-color').css({'display':'inline'}); });

In this block we are subscribe to “notify” channel with an event name of “notify-event”. We are recibe the message in var incidente we writen in class name “incidente-notification” the message recepted and finally we are making the bell visible.

在此块中，我们预订事件名称为“ notify-event”的“ notify”频道。 我们在类名“ incidente-notification”中写了var evente中的消息，然后接收了消息，最后使铃响可见。

STOP RIGHT NOW AND GO BACK AND READ ALL PLEASE, iF YOU COPY OR PASTE ANYTHING WITHOUT UNDERSTAND IT’S BAD PRACTICES, THAT’S NOT A RIGHT THING TO LEARN NOTHING

立即停止并返回并阅读所有内容，如果您在不了解其坏习惯的情况下复制或粘贴任何内容，那不是正确的选择

Read the next pages to understand all we are using here:

阅读下一页以了解我们在这里使用的所有内容：

• https://laravel.com/docs/7.x/broadcasting

  https://laravel.com/docs/7.x/broadcasting

• https://laravel.com/docs/7.x/installation

  https://laravel.com/docs/7.x/installation

• https://laravel.com/docs/7.x/urls#urls-for-named-routes

  https://laravel.com/docs/7.x/urls#urls-for-named-routes

Nice, right now you have advanced pusher and laravel configuration to make something cool and incredible, let me show you how to use this.

很好，现在您已经拥有高级推杆和laravel配置，可以使某些功能变得酷而令人难以置信，下面让我向您展示如何使用它。

Open 2 tabs in your favorite browser, in 1 tab open “http://127.0.0.1:8000/" and in another tab open “http://127.0.0.1:8000/notify".

在您喜欢的浏览器中打开2个标签，在1个标签中打开“ http://127.0.0.1:8000/ ”，在另一个标签中打开“ http://127.0.0.1:8000/notify ”。

That’s all, i hope that helps you to be better, any question you has, you can contact me. Follow me to be alerted to my content!

仅此而已，我希望可以帮助您变得更好，任何问题，您都可以与我联系。 关注我，以提醒我我的内容！

Here your surprise, the full code it’s here:

令您惊讶的是，完整的代码在这里：

https://github.com/MaruanBO/real-time-simulator

https://github.com/MaruanBO/real-time-simulator

You see it, you can make everything you want with ❤ by Marouane Boukhriss.

您会看到它，可以使用Marouane Boukhriss的❤制作所需的一切。

翻译自: https://medium.com/@maruan/how-to-create-real-time-simulator-in-laravel-7x-using-pusher-359220a38872

arduino 推杆