algoaddicted: setembro 2016

Um dia desses brincando com o framework Ionic, resolvi criar um app baseado no jogo que muitos chamam de apertadinho, acabei não achando um jogo parecido para android ou ios. Um jogo simples, que consiste em escolher 3 números tal que o terceiro está entre os dois primeiros. Quem acertar o número escolhido pelo app ou por um jogador bebe ou paga o mico. Se o número escolhido durante a rodada não permite o próximo jogador escolher, quem pensou no número inicial tem que beber. A melhor forma de aprender é jogando, então baixe o apk e instale pelo link abaixo(não esqueça de permitir arquivos de fora da google play). Infelizmente, por enquanto só usuários de Android terão acesso, mas se poucos bugs forem achados faço um esforço para subir o app para Ios e Windows e fazer uma integração com facebook para você mostrar aos seus amigos que tem sorte. Por enquanto o app ficará no link abaixo e na amazon store.

Link para Amazon Store: https://www.amazon.com/Aldo-Lemos-drunkMe/dp/B01M197ROO/ref=sr_1_1?s=mobile-apps&ie=UTF8&qid=1475064324&sr=1-1&keywords=drunkme

Link direto: https://drive.google.com/open?id=0B-MDes2BI4gZRTNYSDJLWmh2OEE

It’s a common problem, mainly in web development, filter requests of all kinds. As an example, imagine that you have a table with products and your users must be able to filter data using status, codes, availability, price and so on. A simple (but bad) solution is verify the fields, concatenate some strings and build a query at runtime. This can generate problems, especially if you’re not using patterns and concatenating strings to build the query. At some point, the query is a monster that you cannot maintain. In this post, i present a solution based in some techniques. In the client i’ll use Angular to make requests. I’ll change the Angular symbol, because i’m using Laravel and Blade{{}}.But you can use @{{}}. However, i'll change to [[]] with:

 (function () {  
  'use strict';  
  let signChange = function($interpolateProvider){  
   $interpolateProvider.startSymbol('[[');  
   $interpolateProvider.endSymbol(']]');  
  };  
  angular.module("productsApp", [], signChange);  
 })();

Following, we need to build the API:

 (function() {  
   'use strict';  
   angular.module('productsApp').factory('productsApi', ['$http', '$q', productsApi]);  
   function productsApi($http, $q) {  
     function getItems(params) {  
       var deferred = $q.defer();          
       $http.get(params)  
         .success(function(data) {  
           deferred.resolve(data);  
         })  
         .error(function() {  
           deferred.reject();  
         });  
       return deferred.promise;  
     }  
     return {  
       getItems: getItems  
     };  
   };  
 })();

In the code above, we build the factory, that will return our object (revealing module pattern). Now, with the getItems() method we can use HTTP GET and defer promises. With the API, we can build our ListProductsController:

 (function () {  
  'use strict';  
  angular.module("productsApp")  
  .controller("ListProductsController", ['productsApi', '$scope',  
   ListProductsController]);  
  function ListProductsController(api, vm) {  
   function filter(params){  
    vm.dataLoading = true;  
    api.getItems(params).then(function(data){  
     vm.products = data.data;  
    }).finally(_=>{  
     vm.dataLoading = false;  
    });  
   }  
   vm.filter = function(){  
    filter("/api/products?"+ buildParams());  
   }  
   vm.filter();  
  };  
 })();

In the Controller, we inject the api and the scope, the vm has a filter method to be called from the view. A simple dataLoading is created to feedback the user. The getItems() method is called and when it’s deferred we can access the data. You can build the params with angular or jquery, the attributes will represent the fields to filter. Now, we can do the server side. We’ll make a route for ‘/api/products’ and call getProducts() in the controller, code below:

 public function getProducts(ProductFilters $filters){  
  $quant = request()->get('quant');  
  $quant = empty( $quant ) ? 5 : $quant;  
  $products = Product::filter($filters)->simplePaginate($quant);  
  return json_encode($products);  
 }

In getProducts(), we get the number($quant) of items that we’ll put for page. By default we set 5. And we call filter passing the ProductsFilters that we’ll use. Next, with simplePaginate to generate pages and return json encoded. Now, the model Product:

 <?php  
 namespace App;  
 use Illuminate\Database\Eloquent\Model;  
 use App\Traits\Filterable;  
 class Product extends Model  
 {  
   use Filterable;  
 }

In Product, we just state that we’ll use the Trait Filterable:

 <?php  
 namespace App\Traits;  
 use Illuminate\Database\Eloquent\Builder;  
 use App\Filters\QueryFilters;  
 trait Filterable  
 {  
   /**  
    * Filter a result set.  
    *  
    * @param Builder   $query  
    * @param QueryFilters $filters  
    * @return Builder  
    */  
   public function scopeFilter($query, QueryFilters $filters)  
   {  
     return $filters->apply($query);  
   }  
 }

Now, we are using Laravel scope and calling the QueryFilters method apply, to apply the filters. QueryFilters is the base Filter for our project, we could call this a Filterable-Strategy Pattern.

 <?php  
 namespace App\Filters;  
 use Illuminate\Database\Eloquent\Builder;  
 use Illuminate\Http\Request;  
 abstract class QueryFilters  
 {  
   /**  
    * The request object.  
    *  
    * @var Request  
    */  
   protected $request;  
   /**  
    * The builder instance.  
    *  
    * @var Builder  
    */  
   protected $builder;  
   /**  
    * Create a new QueryFilters instance.  
    *  
    * @param Request $request  
    */  
   public function __construct(Request $request)  
   {  
     $this->request = $request;  
   }  
   /**  
    * Apply the filters to the builder.  
    *  
    * @param Builder $builder  
    * @return Builder  
    */  
   public function apply(Builder $builder)  
   {  
     $this->builder = $builder;  
     foreach ($this->filters() as $name => $value) {  
       if (! method_exists($this, $name)) {  
         continue;  
       }  
       if (strlen($value)) {  
         $this->$name($value);  
       }  
     }  
     return $this->builder;  
   }  
   /**  
    * Get all request filters data.  
    *  
    * @return array  
    */  
   public function filters()  
   {  
     return $this->request->all();  
   }  
 }

The QueryFilters apply method look at the request params and verify if the method exists, if the method exists, the param value will be passed to execute. With it, you can make the simple question, where are those methods? And the response is: We need to create A ProductFilters class that extends QueryFilters to put our strategy. So:

 <?php  
 namespace App\Filters;  
 use Illuminate\Database\Eloquent\Builder;  
 class ProductFilters extends QueryFilters  
 {  
   public function price($param){  
     if ($param)  
       return $this->builder->orderBy('price', 'desc');   
     return $this->builder->orderBy('price');   
   }  
   public function name($param){  
     return $this->builder->where('name', 'like', '%'.$param.'%');  
   }  
 }

In the ProductFilters we implement our filters, in the example i ordered by price and searched by name. So, with this strategy, you can create new filters and filter models, we’ll just create the class to extend QueryFilters and implement our filters. You can/must use repositories, i’ll make another post about repositories. No big deal, no big sql, of course this can be improved. So improve this. TY References:
https://github.com/JeffreyWay
https://laracasts.com/skills/laravel
https://app.pluralsight.com/library/courses/angularui-fundamentals/table-of-contents
https://app.pluralsight.com/paths/skills/angular-js
https://app.pluralsight.com/library/courses/patterns-library/table-of-contents
https://angularjs.org/
https://laravel.com/docs/5.2/queries

algoaddicted

quinta-feira, 29 de setembro de 2016

JS all the way

quarta-feira, 28 de setembro de 2016

A Drink App with Ionic

terça-feira, 27 de setembro de 2016

Um App Simples com Ionic - Link para APK

sexta-feira, 23 de setembro de 2016

A Filter Problem: Using Angular and Laravel