DRAG AND DROP

dragme

AUTO SUBSCRIBE

Membuat aplikasi android gratis dengan mudah 100000...%

Untuk membuat aplikasi android kita sendiri di hp/smartphone android kita secara gratis 1000%, maka kita bisa memanfaatkan fitur PWA di google chrome.
Tools yang kita butuhkan ialah :
1. Web server.
Bisa menggunakan Webdav server oleh The Olive Tree di playstore tinggal download, atau termux dipadukan dengan npm dan http-server.
2. Code editor.
Ada banyak code editor di play store, kalau saya pribadi menggunakan anWriter.
3. Manifest builder/generator.
Saat ini saya hanya menemukan dua manifest generator di internet yakni app-manifest.firebaseapp.com dan tomitm.github.io, tapi saya lebih memilih app-manifest karena serba otomatis.
Cara membuat :
1. Download
Download file index yang telah saya buat sebelumnya (download), download juga file sw.js-nya (download).
2. Edit
Edit file index yang telah didownload tadi sesuai kebutuhan (mungkin anda membutuhkan pengetahuan dasar tentang bahasa HTML, CSS, dan Javascript).

Service Worker Template

Service worker adalah sebuah mesin yang kita bangun didalam browser kita, berikut adalah script dari service worker lengkap dengan script untuk tombol install.
Sebelumnya didalam head file index kita, mesti ada link rel yang mengarah ke manifest.json, isi manifest.json bisa anda lihat di bagian paling bawah post ini, berikut contoh link rel dari manifest pada head :

<link rel="manifest" href="manifest.json">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

code template paling sederhana dari sw.js adalah sebagai berikut

if ('serviceWorker' in navigator){
    navigator.serviceWorker.register('/sw.js', {scope: './'})
    .then(function(reg){
      console.log('ServiceWorker registration successful with scope: '+ reg.scope);
    })
    .catch(function(err){
      console.log('ServiceWorker registrasi gagal: '+ err);
    });
  }

untuk bentuk yang cukup kompleks dengan fasilitas tombol yang kita buat sendiri untuk menginstal sebagai berikut :
isi dari script.js :

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js').then(function(registration) {
      console.log('ServiceWorker registration successful with scope: '+ registration.scope);
    }).catch(function(err) {
      console.log('ServiceWorker registrasi gagal: '+ err);
    });
  });
}

let deferredPrompt;
const addBtn = document.querySelector('.add-button');
addBtn.style.display = 'none';
window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  addBtn.style.display = 'block';
  addBtn.addEventListener('click', (e) => {
    addBtn.style.display = 'none';
    deferredPrompt.prompt();
    deferredPrompt.userChoice.then((choiceResult) => {
        if (choiceResult.outcome === 'accepted') {
          console.log('User accepted the A2HS prompt');
        } else {
          console.log('User dismissed the A2HS prompt');
        }
        deferredPrompt = null;
      });
  });
});

template code paling sederhana untuk sw.js adalah sebagai berikut :

var cache_name = 'v1';
var urlsToCache = [
  '/index.html',
  '/'
];

self.addEventListener('install', function(ev){
  ev.waitUntil(
    caches.open(cache_name)
      .then(function(cache){
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(e) {
  e.respondWith(
    caches.match(e.request)
      .then(function(res){
          return res || fetch(e.request);
        })
);
});

untuk bentuk kompleksnya dengan fasilitas update otomatis jika menggunakan website dan website kita update maka aplikasi yang telah dipasang pengguna juga akan berubah. Berikut templatenya :
isi dari sw.js :

var cache_name = 'v1';
var urlsToCache = [
  '/index.html'
];

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cache_name)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }

        var fetchRequest = event.request.clone();

        return fetch(fetchRequest).then(
          function(response) {
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            var responseToCache = response.clone();

            caches.open(cache_name)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
    );
});

self.addEventListener('activate', function(event) {

  var cacheKeeplist = ['v2'];

  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheKeeplist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Untuk membuat menifest dengan mudah, anda bisa mengunjungi app-manifest, atau untuk website manifest generator yang semi manual bisa anda coba di link web app manisfet
berikut adalah contoh file manifest.json yang pernah saya buat untuk pengaturan icon, splash screen dll :

{
  "name": "Absen ONline",
  "short_name": "AbsenOL",
  "theme_color": "#2196f3",
  "background_color": "#2196f3",
  "display": "standalone",
  "Scope": "/",
  "start_url": "/index.html",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

Salahsatu blog berbahasa Indonesia yang dibahas oleh abang Rahmat Subekti tentang service worker dapat kita lirik pada link Mengenal Service Worker
Atau untuk penjelasan service worker berbahasa Inggris, kita dapat langsung menuju ke website developer milik Mozilla pada links berikut :
Developer Mozilla about service worker
Developer Google about service worker
Cookbook service worker

DAFTAR HADIR

Nama

Email

Jenis kelamin

Laki-lakiPerempuan

Instansi

Peran

PesertaPresenterHost

No.HP/WA

Peserta Terdaftar

Masukkan Password :

Chat Blogger

Saya mencoba membuat live chat menggunakan cara sederhana, dengan menggunakan 1 div dan 1 input. Teks dalam input akan dimasukkan ke dalam div. kemudian mari kita lihat apakah user lain dapat membacanya atau tidak. mari berkarya!

ternyata tidak bisa dibaca oleh orang lain jika membuka blog ini di hp/laptop mereka, jadi kita harus membuatnya menjadi bisa hehehehe.
    Caranya adalah dengan menggunakan pihak ketiga, kali ini saya akan menggunakan google spredsheet sebagai penghubung

Dokumentasi WebRTC

     WebRTC (Web Real-Time Communication) , adalah komunikasi secara simultan terhubung secara terus-menerus atau disebut juga dengan istilah streaming/real time. Contoh, kalian mungkin sering menggunakan video call di facebook atau whatsapp atau skype, nahh itulah real time communication dan aplikasi keren seperti itulah yang akan aku buat kali ini.

    Pembahasan kali ini saya usahakan menggunakan bahasa yang lebih populer/sederhana agar saya sendiri juga mudah faham :D.

1. Kita butuh akses menggunakam kamera di laptop/hp kita dengan kode getUserMedia.

Contoh :

var video = document.querySelector("#videoElement");
 
if (navigator.mediaDevices.getUserMedia) {       
    navigator.mediaDevices.getUserMedia({video: true})
  .then(function(stream) {
    console.log(stream);
    video.srcObject = stream;
  })
  .catch(function(err0r) {
    console.log("Something went wrong!");
  });
}

Hasilnya seperti berikut :

Ok, sepertinya kita kodenya bekerja dengan benar, hmmmmmmm selanjutnya adalah mengirimkan video ini ke komputer lain yang membuka blog ini. Tapi cara kirimnya bagaimana?

Event Listener antara Keyboard dan Touchscreen

addEventListener dengan property mousedown atau click cocok digunakan untuk keyboard sementara touchstart cocok digunakan untuk touchscreen.

Contoh:

<button>Click Me</button>

<script>
var btn = document.getElementsByTagName("button");

btn[0].addEventListener("mousedown", () => alert("Anda menggunakan keyboard"));
btn[0].addEventListener("touchstart", () => alert("Anda menggunakan touchscreen"));
</script>

Membaca dan Mengirim Dari Web Kita ke Web Lain (fetch get dan post)

fetch dalam bentuk umum tidak dapat digunakan dalam apps script, sebagai gantinya, kita dapat menggunakan :

UrlFetchApp.fetch(url, {'muteHttpExceptions': true});


berikut saya menggunakan google forms yang akan mengirim pesan ke telegram setelah peserta mengklik submit pada form.

contoh code:

function onSubmit(){
var form = FormApp.openById('<id form>');
ScriptApp.newTrigger('myFunction')
    .forForm(form)
    .onFormSubmit()
    .create();
}

function myFunction(e) {
   var data = e.response.getItemResponses()[<nomor array data>].getResponse();
   var url = "<alamat web tujuan>";  
   var res = UrlFetchApp.fetch(url, {'muteHttpExceptions': true});
  Logger.log(res);
}

Dokumentasi Telegram Bot API

1. Kirim Pesan
https://api.telegram.org/bot<bot Id>/sendMessage?chat_id=<chat Id>&text=<text disini>

2. Membuat Button
https://api.telegram.org/bot<bot Id>/sendMessage?chat_id=<chat Id>&text=<text>&reply_markup={"keyboard":[[{"text":"tes"}]]}

penjelasan :

• reply_markup adalah sebuah object.
• {"keyboard":[[{"text":"baris 1, kolom 1"},{"text":"baris 1, kolom 2"}],[{"text":"baris 2, kolom 1"},{"text":"baris 2, kolom 2"}]]}

hasilnya :

3. Menghapus Button
https://api.telegram.org/bot<bot Id>/sendMessage?chat_id=<chat Id>&text=<text>&reply_markup={"remove_keyboard" : true}

4. Membuat Button URL
https://api.telegram.org/bot<botId>/sendMessage?chat_id=<chat Id>&text=<text>&reply_markup={"inline_keyboard":[[{"text":"<judul tombol>","url":"<alamat web>"}]]}

contoh dua button :
https://api.telegram.org/bot<botId>/sendMessage?chat_id=<chat Id>&text=<text>&reply_markup={"inline_keyboard":[[{"text":"google","url":"www.google.com"},{"text":"syuaib","url":"www.tambangbth.blogspot.com"}]]}

hasilnya :

dokumentasi games

setInterval adalah looping yang bagus untuk perulangan yang ingin diawasi oleh user, karena kecepatan loopingnya tidak berdasarkan kecepatan resource user.

tesssss

Mencoba tombol lompat. Algoritmanya ialah jika tombol lompat ditekan maka dino

my games tanpa canvas

windows keyboard be music / launcpad games

Use landscape mode for better experience

Q	W	E	R	T	Y	U	I	O	P
A	S	D	F	G	H	J	K	L
Z	X	C	V	B	N	M

You can find many sounds with url at http://www.findsounds.com/, just copy and paste in input text

Q :
W :
E :
R :
T :
Y :
U :
I :
O :
P :
A :
S :
D :
F :
G :
H :
J :
K :
L :
Z :
X :
C :
V :
B :
N :
M :