DEV Community: putu eka mulyana

Custom queries AndroidManifest Pada Expo

putu eka mulyana — Sat, 04 Nov 2023 14:11:45 +0000

Pendahuluan

Kenapa saya ingin membuat custom queries pada android AndroidManifest? saat membuat fitur share ke instagram stories saya mengalami kendala saat user klik share yang terbuka bukan instagram stories tapi aplikasi lain.

setelah melempar pertanyaan ke forum. ada yang menyarankan menambahkan custom queries seperti pada AndroidManifest.xml.

  <queries>
      <!-- Specific apps you share to -->
      <package android:name="com.instagram.android" />
      <intent>
        <action android:name="android.intent.action.SEND"/>
      </intent>
    </queries>

masalahnya saat build menggunakan server expo code di atas tidak ikut dibuild karena file android yang ada di local computer tidak ikut di submit ke dalam server expo.

Solusi

Solusi yang saya temukan adalah dengan menambahakan code expo config plugins agar saat di build di server expo queries ikut tergenerate.

const { withAndroidManifest } = require('@expo/config-plugins');

const withAndroidQueries = config => {
  return withAndroidManifest(config, config => {
    config.modResults.manifest.queries = [
      {
        package: [
          {
            $: { 'android:name': 'com.instagram.android' },
          },
        ],
        intent: [
          {
            action: [{ $: { 'android:name': 'android.intent.action.SEND' } }],
          },
        ],
      },
    ];

    return config;
  });
};

module.exports = withAndroidQueries;

jika ingin mengecek apakah file queries tergenerate di dalam AndroidManifest.xml coba run :

npx expo prebuild

lalu cek di dalam file AndroidManifest.xml apakah sudah ada code seperti dibawah :

  <queries>
      <!-- Specific apps you share to -->
      <package android:name="com.instagram.android" />
      <intent>
        <action android:name="android.intent.action.SEND"/>
      </intent>
    </queries>

Penutup

Jika kamu memiliki saran atau cara yang lain feel free to comment

Cara menjalankan emulator di Visual Studio Code

putu eka mulyana — Wed, 18 Oct 2023 13:09:06 +0000

Sekarang kamu tidak perlu membuka android studio untuk menjalankan emulator di komputer kamu, yang kamu lakukan cukup mengintall extension vscode ini Android iOS Emulator.

Langkah - Langkah menjalankan emulator

Gunakan Command ini untuk membuka All command pada vs code Cmd-Shift-P lalu ketik Emulator dan pilih emulalor yang ingin kamu jalankan.

Improve FlatList Performance Pada React Native Dengan Case Infinite Scroll

putu eka mulyana — Wed, 11 Oct 2023 10:24:58 +0000

Pendahuluan

Bisanya dalam membuat list saya menggunakan FlatList. dalam menggunakan FlatList saya tidak mengalami banyak kendala ketika di staging mungkin karena list yang saya render jumlahnya sedikit karena menggunakan data dummy di staging. masalah mulai muncul ketika aplikasi running di production dengan jumlah item list yang dirender sangat banyak. didalam case saya me-render 30 item sekali render dan saya menerapkan infinite scroll. masalahnya mulai muncul ketika scrollnya sudah sampai 3 sampai 4 page atau setara dengan 4 * 30 item.

Solusi

setelah saya googling saya menemukan alternatif dari FlatList yaitu flash-list dan recyclerlistview. setelah saya baca documentasi dari kedua library itu akhirnya saya memutuskan menggunakan flash-list karena documentasinya lebih mudah di pahami dan flash-list juga menggunakan(depend) library recyclerlistview didalamnya.

Code

contohimplementasi FlashList di dalam code

<FlashList
   estimatedItemSize={100}
   data={this.state.list}
   renderItem={({ item, index }) => <Content item={item} index={index} />}
   onEndReachedThreshold={0.8}
   onEndReached={() => {
       this._populateNextBatch()
   }}
/>

code untuk fetch data dari backend

async _populateNextBatch(){
   // fetch api
   const json = await response.json();
   let shallowCopy = [...this.state.list];
   await json.data.forEach((content) => {
        if (!this.listIds.has(content.id)) {
          // add only non-duplicate
          this.listIds.add(content.id);
          shallowCopy.push(content);
        }
   })
   this.setState({list: shallowCopy })
}

Sekian contoh implementasi flash-list dengan tujuan untuk Improve List View Performance dengan case Infinite Scroll.
Jika kamu memiliki cara yang lain silahkan di share di dalam Kolom Komentar.👍

Kenapa Project Android Setelah release atau build Gagal Fetch Api

putu eka mulyana — Tue, 27 Sep 2022 15:29:09 +0000

Pendahuluan

hari ini saya mengalami error pada project android saya, setalah saya relase apk dan mau ditest ternyata muncul error gagal fatch api kebackend. setalah saya googling ternyata penyebab errornya karena domain server saya masi menggunakan http.

Solusi

untuk fix error gagal fetch yang pertama bisa ubah url dari http menjadi https, yang kedua bisa tambahakan android:usesCleartextTraffic="true" di file AndroidManifest.xml

refrensi

https://github.com/nowsecure/secure-mobile-development/blob/master/en/android/set-usescleartexttraffic-to-false.md

Cara Membuat Helpers di Larave Terbaru

putu eka mulyana — Sat, 27 Aug 2022 05:36:00 +0000

Apa Itu Traits ?

Dengan menggunakan Traits kita bisa membuat method yang dapat digunakan / wariskan di banyak kelas, cukup menggunakan keyword use untuk menggunakanya.

Contoh implementasi Traits

disini saya memberikan contoh cara membuat helpers di laravel menggunakan Traits agar code kita reusable.

<?php
namespace App\Helpers;

trait Helpers
{
 public function getMessage($name){
     return "Hay, Terimakasi ". $name;
 }
}

Cara Menggunakan helper

cara menggunakan helper pada controller laravel dengan cara use Helpers pada controller tersebut.

contohnya :

<?php
namespace App\Http\Controllers;

class UserController extends Controller
{
  use Helpers;

  public function sendMessage(Request $request)
  {
      $message = $this->getMessage($request->customer_name);
      return $message;
  }
}

referensi :
https://www.php.net/manual/en/language.oop5.traits.php

Cara Upload File Atau Image Ke Firebase Pada React Native

putu eka mulyana — Thu, 12 May 2022 09:05:00 +0000

Getting Started

install firebase pada projek kamu

npm i firebase

atau

yarn add firebase

Tambahkan Firebase configuration pada projeck kamu
saya menyimpan Firebase configuration pada root/src/config/Firebase.js isi file Firebase configuration seperti ini :

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "xxxxx",
  authDomain: "xxxxx",
  databaseURL: "xxxxxxx",
  projectId: "xxxxxxx",
  storageBucket: "xxxxxxx",
  messagingSenderId: "xxxxxxx",
  appId: "xxxxxxx",
  measurementId: "xxxxxxx"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

export default app;

view button

<TouchableOpacity style={styles.btnUpload}>
    <Text style={styles.btnLabel}>Upload Photo</Text>
</TouchableOpacity>

install image picker
saya menggunakan library react-native-image-picker

npm i react-native-image-picker

atau

yarn add react-native-image-picker

import react-native-image-picker pada file screen kamu, misalkan root/src/screens/UploadPhoto.js

import {launchImageLibrary} from 'react-native-image-picker';

install react-native-uuid

npm i react-native-uuid

atau

yarn add react-native-uuid

import pada file screen kamu

import uuid from 'react-native-uuid';

import firebase
jangan lupa import firebase juga

import React from "react";
import {
  StyleSheet,
  Text,
  TouchableOpacity
} from "react-native";

import uuid from "react-native-uuid";
import { launchImageLibrary } from "react-native-image-picker";
import {
  getStorage,
  ref,
  uploadBytes,
} from "firebase/storage";

import firebase from "../config/Firebase";

Buat function upload photo

const uploadPhoto= async () =>{
    await launchImageLibrary({}, async (response) => {
        if (response.didCancel || response.error) {
            Alert.alert("oops, batal memilih foto.");
        } else {
            let uri = response.assets[0].uri;
            let fileName = response.assets[0].fileName;

            let storage = await getStorage(firebase);

            const rersult = await fetch(uri);
            const blob = await rersult.blob();

            uploadBytes(ref(storage, fileName), blob, {
            contentType: "image/jpeg",
            firebaseStorageDownloadTokens: uuid.v4(),
            }).then(() => {
            console.log("Upload With blob");
            });
        }
    });
}

tambahkan onPress pada button

<TouchableOpacity style={styles.btnUpload} onPress={()=> uploadPhoto()}>
    <Text style={styles.btnLabel}>Upload Photo</Text>
</TouchableOpacity>

Selesai 🚀😎