Ivan Mijatović

How to create Custom Android widget with Laravel using Web Widget

Create widget for your Android phone

Create route

// Android Widget
Route::get('admin/widget',  ['as'=>'widget', 'uses'=> 'WidgetController@widget']);

Create Controller

Let's create controller

php artisan make:controller WidgetController

Edit app/Http/Controller/WidgetController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class WidgetController extends Controller
{
    public function widget(){

        $param1 = 12;
        $param2 = 24;
        return view('widget.index',compact('param1','param2'));
    }
}

Create View

In this example we will use bootstrap from CDN and simple card with table elements

Edit file: app\resources\views\widget\index.blade.php

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>

<body>
    <div class="p-3">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Dashboard</h5>
                        <table class="table">
                            <tbody>
                                <tr>
                                    <th scope="row">Today</th>
                                    <td>{ {$param1}}€</td>
                                </tr>
                                <tr>
                                    <th scope="row">Month</th>
                                    <td>{ {$param2}}€</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
    </script>
</body>

</html>

Output: Output

Install Web Widget

You can install Web Widget from google play store

Install

Add widget to homescreen

add to home

Select Web Widget

Select Web Widget

Config

Config

Configure URL

Configure URL

Configure Refresh rate

Configure Refresh Rate

Enjoy!

Related Articles

;