React NativeでBack4Appファイル削除の技術的ガイド

react nativeアプリからファイルを削除する はじめに このガイドでは、react nativeアプリでback4appクラウドからファイルを削除する最良の方法を学びます。 back4appでアプリケーションファイルを管理するために、 parse file parse file ユーティリティクラスを使用します。このクラスを使用して、保存、取得、削除の操作を実行できます。前のセクションでは、 ファイルストレージ https //www back4app com/docs/js framework/react native files について、デモギャラリーアプリを作成してファイルの保存と取得をカバーしました。 この時点で、作成して保存した後は、 parse file parse file を別のデータオブジェクトに常に関連付けることが最良のプラクティスであることを理解しているはずです。これにより、プロジェクト内で孤立したファイルが作成されるのを防ぎ、back4appクラウド上でそれらを見つけて削除することが可能になります。 parse file parse file はファイルを削除する方法を提供しますが、これはセキュリティに敏感な操作であり、クライアント側で実行すべきではありません。このチュートリアルでは、アプリケーションファイルを削除するための最良のプラクティスを学びます。 目標 react nativeギャラリーデモアプリに画像削除アクションを追加する 前提条件 このチュートリアルを完了するには、 次の ファイルストレージ チュートリアルを完了する parse >= 4 2 0 1 アプリケーションのセットアップ 前のセクションでは、 ファイルストレージ https //www back4app com/docs/js framework/react native files を使用して、ユーザーの写真をアップロードして表示するデモギャラリーアプリを作成しました。 このチュートリアルでは、 gallery js gallery js コンポーネントの各画像アイテムに削除ボタンを追加し、削除操作を実行します。 デモギャラリーアプリのコーディングがすでに完了している場合は、次のステップに進むことができます。 また、チュートリアルに沿ってアプリのコードベースをクローンすることもできます。 プロジェクトをクローンするには、次のコマンドを実行します git clone https //github com/templates back4app/react native demo gallery app git clone https //github com/templates back4app/react native demo gallery app 次に、プロジェクトの依存関係をインストールします 実行する前に、back4appの認証情報を設定することを忘れないでください、 app id app id と javascriptkey javascriptkey , initialize initialize メソッドで。アプリの認証情報の設定に関する情報は、 parse sdkのインストール https //www back4app com/docs/js framework/react native cli を参照してください。 最後に、react nativeアプリケーションを実行します 2 削除ボタンの作成 ギャラリーアプリでは、 gallery js gallery js コンポーネントがback4appクラウドプロジェクトからの画像のリストをレンダリングします。次に、現在のリストの各画像アイテムにボタンを作成して追加します。 次の内容を追加するために、 gallery js gallery js ファイルを開きます 1 import react, {usestate, useeffect} from 'react'; 2 import {text, view, image, flatlist, stylesheet, button, alert} from 'react native'; 3 import parse from 'parse/react native js'; 4&#x9; 5 const gallery = () => { 6 const \[images, setimages] = usestate(\[]); 7&#x9; 8 useeffect(() => { 9 const fetchimages = async () => { 10 let query = new parse query('gallery'); 11 const results = await query find(); 12 setimages(results); 13 }; 14&#x9; 15 fetchimages(); 16 }, \[]); 17&#x9; 18 async function ondeleteimage(image id) { 19 // todo implement this function 20 } 21&#x9; 22 return ( 23 \<flatlist 24 style={styles container} 25 contentcontainerstyle={styles listcontent} 26 data={images} 27 horizontal={false} 28 numcolumns={3} 29 listemptycomponent={() => \<text>no images uploaded \</text>} 30 renderitem={({item}) => ( 31 \<view> 32 \<image 33 source={ {uri item get('picture') url()} } 34 style={styles imageitem} 35 /> 36 \<button 37 title="delete" 38 color="red" 39 onpress={() => ondeleteimage(item id)} 40 /> 41 \</view> 42 )} 43 keyextractor={(item) => item id} 44 />); 45&#x9; 46 }; 47&#x9; 48 const styles = stylesheet create({ 49 container { 50 flex 1, 51 backgroundcolor '#f5f5f5', 52 }, 53 listcontent { 54 justifycontent 'center', 55 alignitems 'center', 56 }, 57 imageitem { 58 width 100, 59 height 100, 60 resizemode 'cover', 61 marginhorizontal 5, 62 marginvertical 5, 63 }, 64 }); 65 export default gallery; 私たちは、すべてのレンダリングされた画像に削除ボタンを含むrenderitem関数をリファクタリングしました。しかし、ボタンクリックイベントにはまだ機能が実装されていません。次のステップでそれを行います。 3 画像削除のクラウド関数を作成する ファイルは常にデータオブジェクトに関連付けられているべきであることを学びました。 ファイルストレージ https //www back4app com/docs/js framework/react native files に関連付けられていないファイルは孤立ファイルとなります。それらのファイルはアプリ内でアクセスできません。一度見つからなくなると、アプリから削除することもできません。back4appダッシュボードの「ファイルを削除」オプションを使用してのみ、それらを消去できます。 削除プロセスは、ファイルを見つけてから削除することから成ります。parseでは、 destroy destroy メソッドが参照されたファイルを削除するために使用されます。しかし、クライアント側で使用することは安全ではありません。なぜなら、それは masterkey masterkey を必要とするからです。 react nativeアプリを構築すると、すべてのキーが一緒にバンドルされるため、誰でも逆コンパイルしたり、デバイスからネットワークトラフィックをプロキシしてあなたの masterkey masterkey を見つけることができます。マスターキーを使用すると、 クラスレベルの権限 https //docs parseplatform org/js/guide/#class level permissions や acl https //docs parseplatform org/js/guide/#object level access control など、アプリのすべてのセキュリティメカニズムをバイパスできます。parseのセキュリティベストプラクティスの詳細については、 こちら https //blog back4app com/parse server security/ をご覧ください。 ファイルを削除する最良の方法は、 クラウドコード関数 https //www back4app com/docs/get started/cloud functions を使用してサーバー側で行うことです。私たちのギャラリーアプリでは、それのためにクラウドコード関数を作成します。 「main js」ファイルを作成し、次のクラウド関数を追加しましょう 1 parse cloud define('deletegallerypicture', async (request) => { 2 const {image id} = request params; 3 const gallery = parse object extend('gallery'); 4 const query = new parse query(gallery); 5 try { 6 const image = await query get(image id); 7 const picture = image get('picture'); 8&#x9; 9 await picture destroy({usemasterkey true}); 10 await image destroy(); 11 return 'image removed '; 12 } catch (error) { 13 console log(error); 14 throw new error('error deleting image'); 15 } 16 }); 簡単のため、ダッシュボードを使用してクラウド関数を直接アップロードします アプリの ダッシュボード ダッシュボード を back4appのウェブサイト https //www back4app com/ で開き、 コア コア をクリックし、次に クラウドコード関数 クラウドコード関数 を選択します。 「main js」ファイルを main js main js のルートにある cloud/ cloud/ フォルダーにアップロードします。 関数をback4appサーバーにデプロイします。 数秒後、あなたのクラウドコード関数はrestまたはparse sdkを介して呼び出すことができるようになります。 4 アプリからクラウド関数を削除する呼び出し back4app cloud code関数を正常にデプロイしたら、ギャラリーアプリでユーザーが削除ボタンを押したときのアクションを実装してください 1 // triggers on hitting delete 2 async function ondeleteimage(image id) { 3 try { 4 const params = {image id}; 5 const result = await parse cloud run('deletegallerypicture', params); 6 alert alert(result); 7 } catch (error) { 8 console log('delete error ', error); 9 } 10 } 11 今、削除をクリックすると、アプリは deletegallerypicture deletegallerypicture クラウド関数をトリガーし、画像を正常に削除します 5 ファイルの削除 アプリケーションファイルの管理ができなくなった場合、ダッシュボードからファイルを削除する必要があります。これは、この記事で言及されている孤立ファイルを作成したときに通常発生します。 アプリケーションファイルをクリーンアップする方法についての情報 試してみてください back4appファイルに関するよくある質問 https //help back4app com/hc/en us/articles/360002327652 how to delete files completely または、次を参照してください アプリ設定のドキュメント https //www back4app com/docs/parse dashboard/app settings 完了! この時点で、クラウドコード関数を正常にデプロイし、react nativeアプリケーションで画像を削除する方法を学びました。