wtorek, 16 lutego 2021

Jak wykorzystać algorytmy Google, by pracowały dla nas?

 

Siema,

dużo się mówi w ostatnim czasie o profilowaniu nas, czy to przez Google, Facebook'a, Amazona czy właściwie każdego, kto ma na tyle duży budżet by móc sięgnąć po narzędzia BigData i sztuczną inteligencję. Pewnie nawet ty korzystasz z tych narzędzi wysyłając reklamy, czy używając auto dopowiadania... Oczywiście nie wszystkie algorytmy są równie zaawansowane, ale próg wejścia w ich używanie jest coraz niższy.

" Kto jest głupszy?
Ten co nie wie?
czy ten co wie i nic z tym nie robi? "

Jedna z moich ulubionych "złotych myśli" przypomina, że wiedze zdobywamy by z niej korzystać. Skoro już wiemy, że wiesz o tym pomyślmy co możemy z tym zrobić?

Algorytmy Google ( oraz usług powiązanych - jak YouTuBe ), obserwują nasze zachowania i starają się je wzmacniać by ułatwić sobie w przyszłości współpracę z nami. Jak dziwnie by to nie zabrzmiało posłużę się przykładem.

Dostajesz maila służbowego od Łukasza w którym wspomina o wyjeździe na wakacje. Nic nie znacząca wzmianka aktywuje algorytm - "myśl o wakacjach" i od tego momentu ilość reklam wyjazdów wakacyjnych wzrasta o 90%. Też bym pomyślał reklamy są wszędzie i co z tego? Tylko że korzystasz z wyszukiwarki, oglądasz filmy na YouTube/ Netflix'ie i w jakiś magiczny sposób "proponowane" Ci się zmieniają. Nie bezczelnie "Błękitna laguna", ale filmy które oglądałeś rok wcześniej przed wakacjami, albo gorzej filmy, które znasz i dawno nie oglądałeś. Algorytm uznał, że statystycznie Twoja grupa ma większą szanse wyjechać po obejrzeniu tego filmu.

No ale przecież jesteśmy świadomi? Nie robimy tego co nam szkodzi i podejmujemy decyzje po analizie faktów, nie ograniczamy się też by mieć szerokie i obiektywne spojrzenie, prawda?

" Wiedzieć nie znaczy rozumieć "

Wiesz, że zgodnie z RODO (a nawet dłużej patrz.GIODO) masz wgląd do danych, które firma o Tobie posiada? Uśmiecham się? Tak, firmy takie jak Google udostępniają historie wyszukań, dane czasu spędzonego na stronach i wiele innych danych w formie strony www.

Kilka lat temu Google informowało z zmianie w regulaminie, że dane ze wszystkich usług Google będą trafiać w gruncie rzeczy do jednej bazy danych.

Ostatni przy okazji  Google Analytics 4, okazało się że dane są zbierane też przez eventy, a nie tylko ciasteczka.

Co możemy z tym zrobić?

  1. Nie używaj trybu incognito - lepiej mieć dostęp do danych o nas niż mieć przypięte je z boku i niemieć do nich dostępu - Serwery wiedzą jaki masz IP, model przeglądarki, rodzaj ekranu - teoretycznie to dane anonimowe, ale BigData z nimi może pracować i ich tak nie traktuje.
  2. Załóż sobie kilka kont i przełączaj się między nimi - programy takie jak KeePassa, o którym pisał niebezpiecznik tutaj: https://niebezpiecznik.pl/post/alior-sync-internauci-skarza-sie-na-limit-znakow-w-hasle/ pozwalają nawet nie pamiętać hasła
  3. Dbaj o higienę Twoich danych - sprzątaj historie wyszukań:

https://myactivity.google.com/activitycontrols/webandapp

https://myactivity.google.com/activitycontrols/youtube?hl=pl&utm_medium=web

Co nam to da? Będzie nam się łatwiej skupić na pracy, bo algorytm uzna że tylko tym się zajmujesz w internecie i to będzie wspierał, a konta nie związane z pracą będą wspierały tematy prywatne nie mieszając ich z zawodowymi.

Jeśli już poruszyłem temat pracy z Wyszukiwarką to tylko napomknę, że temat można drążyć w nie skończoność, że wspomnę tylko o filtrach zaawansowanych i operatorach, ale może o tym następnym razem.

piątek, 12 lutego 2021

Symfony - przygotowanie środowiska

 Myślałem ze Symfony jest jak wiele innych framework'ów:

- ściągasz composerem

- dodajesz roting / controler 

- działa


Pierwszy szok:

ściągam composerem create-app odpalam i error

trzeba pobrać plik setup.exe (symfony), nie pamiętam co było potem szło szybko choć kilka rzeczy trzeba było dociągnąć.


Szok drugi:

- otwieram projekt, a tam brak pliku index !

dobra stronę uruchomiłem z Terminala:


$ php -S 127.0.0.1:8000 -t public

ale jak ją wgrać na serwer ftp, czy testować na starym dobrym xampp?


Analiza w między czasie:

xDebug - off

APCu - off

OPcache- off


odpalam terminal i


$ pear install PEAR

https://stackoverflow.com podpowiedział co dalej. W końcu udało się i jest zielono...


http://127.0.0.1:8000/

Patrzymy dalej jak ogarnąć ten kombajn


Streszczenie na przyszłość:

pliki do katalogu /php/ext/

do php.ini dodać :


zend_extension=xdebug

[apcu]
extension=php_apcu.dll
apc.enabled=1
apc.shm_size=32M
apc.ttl=7200
apc.enable_cli=1
apc.serializer=php

opcache.memory_consumption=128
opcache.interned_strings_buffer=8
opcache.max_accelerated_files=4000
opcache.revalidate_freq=60
opcache.fast_shutdown=1
opcache.enable_cli=1



środa, 13 stycznia 2021

WordPress WooCommerce - Wydruk do zamówienia

 Były święta więc masa pracy i nie było czasu pomyśleć, za chwilę Dzień Babci i Dziadka, a w Piernikarni wysyłki. Nasz sklep internetowy działa i można kupić online. Jednak zamówienia są indywidualne, a na produkcji trzeba zachować odpowiednie warunki sanitarne i niema mowy o ekranach dotykowych i sprawdzaniu co chwilę "co to miało być?".

Więc trzeba wydrukować zamówienia i tu mamy nasz problem biznesowy:

 - Chcemy wydrukować ze strony listę zamówień,

a) z opisem klienta bo są tam indywidualne wymagania

b) z listą produktów

c) każdy produkt ma dodatkowe atrybuty (chłopiec/ dziewczynka, pudełko, dedykacja)

d) adres wysyłki i telefon kontaktowy - bywa inny niż adres klienta

e) niech będzie czytelne, ale zajmuje mało miejsca by nie marnować papieru


Uwagi dodatkowe:

- nie można modyfikować kodu pluginów - bo przy aktualizacji zostaną usunięte zmiany.

 

Rozważania koncepcyjne

Koncepcja 1)

Załatwimy to CSS'em. Czyli dodać kod, który w podglądzie zamówień ukryje wszystko oprócz danych które chcemy wydrukować. Oczywiście tylko w wydruku, można to przetestować przy podglądzie wydruku.

@media print {

#adminmenumain, #adminmenuwrap,
#wp__notice-list,
.woocommerce-layout,
.wrap>h1,
.wrap>a,
.wrap>.updated,
.wrap>.notice,
.wpbody-content .wrap>div,
#postbox-container-1
{
display: none;
}

}

 wnioski:

Niestety na tej stronie niema wszystkich danych.


Szukamy dalej...


Koncepcja 2)

Sprawdźmy jak wygląda kod, który tworzy te listy w Wordpress'ie i może to się jakoś wykorzysta. Interesujące nas dane są na dwuch stronach

strona A - Lista zamówień: 

WooCommerce > Zamówienia ( .../edit.php?post_type=shop_order )

Mamy tu teoretycznie pętle, która pobiera wszystkie interesujące nas wpisy i wyświetla je.

strona B - Szczegóły zamówienia

 ( post.php?post=${id}&action=edit )

Mamy tu  dane zamówienia, takie jak: który produkt, atrybuty specjalne, informacje od klienta (imię, dydykacja)

Wniosek wstępny

Tu powinniśmy szukać, pierwsza strona daje nam listę wszystkich produktów, druga informacje, które będą potrzebne.

Zbieranie danych:

Strona A, jest generowana przez class'e :


class WC_Admin_List_Table_Orders extends WC_Admin_List_Table

Sama lista jest w formie <table> więc ciężko będzie nią manipulować. Sam kod css jest bardzo responsywny i w wersji na komórkę wygląda trochę inaczej. Tym zajmiemy się później.

Każda metoda tworzy inną komórkę i są one uruchamiane w pętli otrzymując dabe:

/**
* Define which columns to show on this screen.
*
* @param array $columns Existing columns.
* @return array
*/

public function define_columns( $columns ) {

 tu jest lista wszystkich komórek (kolumn) w wierszu, pomyślimy może tu się wepniemy.


Strona B, jest bardziej złożona. Kilka class tworzy jej części. Interesują mnie tylko pola z danymi i nie potrzebuje ich edytować:

 DIV  - szczegóły zamówienia



class WC_Meta_Box_Order_Data {


metoda 



public static function output( $post ) {


tworzy html tego div'a

DIV - Produkty


class WC_Meta_Box_Order_Items {

 ale metoda


public static function output( $post ) {

 która ustaliłem, że tworzy listę produktów ładuje kolejny plik...


include __DIR__ . '/views/html-order-items.php';

 i plik ten robi już bardzo dużo - wyświetla, pozwala edytować, ma masę if'ów. 


wnioski:

Dużo do przemyślenia i uwaga nie modyfikujemy orginalnego kodu tylko piszemy pligin, który będzie wpinał się w hooki WooCommerce, albo tworzył własną listę.  Pomyślimy nad nową koncepcją.


 Koncepcja 3)

Wnioski z poprzednich koncepcji

 Przeglądając kod strony A (lista zamówień) trafiłem na metodę:



protected function render_order_number_column() {
/* [...] */
echo '<a href="#" class="order-preview" data-order-id="' . absint( $this->object->get_id() ) . '" title="' . esc_attr( __( 'Preview', 'woocommerce' ) ) . '">' . esc_html( __( 'Preview', 'woocommerce' ) ) . '</a>';
echo '<a href="' . esc_url( admin_url( 'post.php?post=' . absint( $this->object->get_id() ) ) . '&action=edit' ) . '" class="order-view"><strong>#' . esc_attr( $this->object->get_order_number() ) . ' ' . esc_html( $buyer ) . '</strong></a>';

Hmm tworzy dwa guziki, które pobierają ajax'em dane, które mnie interesują. Dodatkowo w formie graficznej, która jest niemal idealna.

 

Możemy stworzyć nową stronę, która zassa te dane i ustawi je CSS'em (grid, albo flex) i prawdopodobnie już po robocie. Powinno być bezpieczne bo WC odpowiada za udostępniony kod.

Uwaga sprawdzić bezpieczeństwo, niechcemy by każdy mógł zobaczyć te dane, awięc mały audyt WC trzeba zrobić, czy weryfikuje uprawnienia przed udostępnieniem tych konkretnych danych.

 

Zbieranie danych

event click pobiera ajaxem z adresu: 

../wp-admin/admin-ajax.php?order_id=**ID**&action=woocommerce_get_order_details&security=**KOD**
 
dane w postaci JSON'a i wstawia je do template js po stronie frontend'u. 

Backend:

 Template js jest tworzony przez tą samą Class'e tutaj...



class WC_Admin_List_Table_Orders extends WC_Admin_List_Table {


public function order_preview_template() {

?>
<script type="text/template" id="tmpl-wc-modal-view-order">

To dość oczywiste, ale popup z template wstawiany jest do DIV#wc-backbone-modal-dialog, który jest niszczony po zamknięciu popup'a.

Uwagi

Widzę też, że zapytanie ma dołączony **KOD** weryfikujący uprawnienia dla zapytania ajax po stronie backendu.

Wnioski

Algorytm mógł by działać tak.

1) Włączamy filtr, który zostawi tylko te, które chcemy wydrukować (albo nie włączymy)

2) Uruchomimy funkcję w pętli jQuery - która przejdzie przez całą tabelę i zainicjuje pobieranie danych

3) dane zostaną wstawione do nowego Box'a 

4) Wystylizowanie css'em (flexbox) i ukrycie w podglądzie wydruku wszystkiego czego nie chcemy drukować (czyli właściwie wszystkiego oprucz naszego box'a).

5) opcjonalnie można usunąć jeszcze boxy z pobranych

6? może drag&drob by zmienić kolejność - opcjonalnie jako gadźet

7) klikamy drukuj i mamy zamieżony efekt ;-)

Zieranie danych - Frontend

Już myślami byłem przy pisaniu kodu, ale jeszcze ważna kwestia jak działa to na frontendzie.

Nasz przyjaciel w IDE to shift+ctrl+f (dzukaj w całym projekcie) znów się sposał...

plik wc_orders.js (wc_orders.min.js)

Dodanie event click... który uruchamia funkcje WCOrdersTable.prototype.onPreview

    $( document )
/** line: 14 **/
.on( 'click', '.order-preview:not(.disabled)', this.onPreview );
};

Szybko też namierzam kod weryfikujący w lini 63 ?


$.ajax({
url: wc_orders_params.ajax_url,
data: {
order_id: $order_id,
action : 'woocommerce_get_order_details',
security: wc_orders_params.preview_nonce /** line: 66 *//
},
type: 'GET',
success: function( response ) {
    $( '.order-preview' ).removeClass( 'disabled' );

    if ( response.success ) {
    $previewButton.data( 'order-data', response.data );

    $( this ).WCBackboneModal({
    template: 'wc-modal-view-order',
    variable : response.data
    });
}
}

WCBackboneModal jest w pliku backbone-modal.js i odpowiada za stworzenie popup'a div#wc-backbone-modal-dialog.

Sprawdziłem jeszcze listę hooks do WC z tej strony : https://premmerce.com/woocommerce-hooks-guide/#reading-progress-title-8

tu się będziemy wpinać:

<?php do_action( 'woocommerce_order_details_after_order_table', $order ); ?>



 

wtorek, 29 grudnia 2020

regex data time

 Potrzebowałem dziś kodu, który pozwoli mi wyciągnąć datę wyrażeniem regularnym, to dość proste więc uznałem że sam napiszę...


Zapiszę dla potomności


var G_time = function(t) {
var regex = /(?<day>\d+)\.(?<month>\d+)\.(?<year>\d+).(?<hour>\d+)\:(?<minute>\d+)\:(?<second>\d+)/i;
var found = t.match(regex);


var G_time = found.groups;
var time = new Date(
2000 + Math.floor( G_time.year ),
Math.floor( G_time.month ) -1,
Math.floor( G_time.day ),
Math.floor( G_time.hour ),
Math.floor( G_time.minute ),
Math.floor( G_time.second ),
).getTime();
var teraz = new Date().getTime();
var zmienna = teraz-time;
if(zmienna > 0 )
return (zmienna/1000);

return '';
};

G_time('29.12.20 14:26:34:369');
'

Korzystałem z podglądu online, na stronie 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match

do debugowania, bo jednak miałem problemy z pierwszymi liczbami najpierw dzień , a potem godzina nie była znajdywana. Błąd był w użyciu . i *

niedziela, 27 grudnia 2020

manifest.json note

 Notatnik w przeglądarce? czemu nie.


Quicknote

Źródło: /webextensions-examples/quicknote/ 

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Examples#quicknote

manifest.json

 Po kilku godzinach testowania rozwiązań coś miłego dla oka, zmiana wyglądu theme przeglądarki na stacjonarnym light/ dark/ star/ ranbow


Theme Switcher

Źrudło: /webextensions-examples/theme-switcher/

 

Wygląda też na to że znalazłem czego szukałem pop up przekazuje instrukcje do powłoki przeglądarki

 

mainifest.json Opcje wtyczki

 manifest.json

 

źrudło:  /webextensions-examples/google-userinfo/

Google User Info


- ikona 

- kliknięcie ikony otwiera nowe okno (bez menu, tylko pasek adresu)

- w ustawieniach wtyczki dostępna zakładka "Opcja"