A. Membuat aplikasi mobile dengan JavaScript menggunakan framework seperti React Native

Untuk membuat aplikasi React Native, pertama-tama Anda perlu memastikan bahwa Anda telah menginstal Node.js, npm, dan React Native CLI. Jika Anda belum menginstalnya, Anda bisa mengikuti panduan di halaman berikut untuk menginstallnya:

https://reactnative.dev/docs/getting-started

Setelah menginstall semua yang dibutuhkan, Anda bisa mulai membuat aplikasi React Native dengan menjalankan perintah berikut di command prompt atau terminal:

react-native init NamaAplikasi

NamaAplikasi adalah nama aplikasi yang Anda inginkan. Setelah itu, jalankan perintah berikut untuk menjalankan aplikasi Anda di emulator atau pada perangkat fisik:

cd NamaAplikasi
react-native run-android

Atau, jika Anda ingin menjalankan aplikasi di iOS:

cd NamaAplikasi
react-native run-ios

Sekarang Anda sudah dapat memulai mengembangkan aplikasi React Native Anda! Jika Anda membutuhkan bantuan lebih lanjut, Anda bisa membaca dokumentasi di halaman berikut:

https://reactnative.dev/docs/tutorial

lalu bagaimana struturnya

Struktur folder dalam aplikasi React Native pada umumnya terdiri dari beberapa folder dan file utama, yaitu:

• ios: folder ini hanya ada pada aplikasi yang dikembangkan untuk iOS. Folder ini berisi file-file yang dibutuhkan untuk menjalankan aplikasi pada perangkat iOS.

• android: folder ini hanya ada pada aplikasi yang dikembangkan untuk Android. Folder ini berisi file-file yang dibutuhkan untuk menjalankan aplikasi pada perangkat Android.

• src: folder ini berisi kode sumber aplikasi Anda. Terdapat banyak file dan folder di dalamnya, yang masing-masing memiliki fungsi tertentu. Beberapa folder yang sering ada di dalam src adalah components, screens, redux, dan utils.

• index.js: file ini merupakan file entry point dari aplikasi Anda. File ini akan dipanggil pertama kali saat aplikasi dijalankan, dan biasanya berisi kode untuk memanggil component utama aplikasi.

• App.js: file ini biasanya merupakan component utama dari aplikasi Anda. Component ini biasanya terdiri dari beberapa component lain yang akan ditampilkan pada layar, seperti header, footer, dan sebagainya.

Ini hanyalah struktur folder yang umum, dan tidak semua aplikasi React Native harus memiliki struktur folder yang sama. Tergantung pada kebutuhan dan desain aplikasi Anda, struktur folder dapat sedikit berbeda. Namun, pada umumnya struktur folder tersebut merupakan struktur folder yang sering digunakan dalam pengembangan aplikasi React Native.

anda bisa menggunakan konsep MVC

Model-View-Controller (MVC) adalah salah satu pola desain yang banyak digunakan dalam pengembangan aplikasi. Pola desain ini membagi aplikasi menjadi tiga bagian utama, yaitu model, view, dan controller. Bagian-bagian tersebut memiliki fungsi masing-masing:

• Model: bagian ini berisi data dan logika yang digunakan oleh aplikasi. Model bertanggung jawab untuk mengelola data dan memastikan bahwa data tersebut sesuai dengan apa yang diinginkan oleh aplikasi.

• View: bagian ini berisi tampilan aplikasi yang akan ditampilkan ke pengguna. View hanya bertanggung jawab untuk menampilkan data yang diberikan oleh model, dan tidak terlibat dalam pengolahan data.

• Controller: bagian ini berfungsi sebagai penghubung antara model dan view. Controller menerima input dari pengguna, mengolah data sesuai dengan apa yang diinginkan, kemudian menampilkan hasilnya ke view.

Berikut ini adalah contoh kode sederhana yang menggunakan pola MVC pada React Native:

Model (model.js):

export default class Model {
  constructor() {
    this.todos = [];
  }


  addTodo(text) {
    this.todos.push({ text });
  }
}

View (TodoList.js):

import React from 'react';
import { View, Text } from 'react-native';


const TodoList = ({ todos }) => {
  return (
    <View>
      {todos.map((todo, index) => (
        <Text key={index}>{todo.text}</Text>
      ))}
    </View>
  );
};


export default TodoList;

Controller (App.js):

import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';
import TodoList from './TodoList';
import Model from './model';


const App = () => {
  const [text, setText] = useState('');
  const [model] = useState(new Model());


  const onAddTodo = () => {
    model.addTodo(text);
    setText('');
  };


  return (
    <View>
      <TextInput
        value={text}
        onChangeText={setText}
      />
      <Button
        title="Add Todo"
        onPress={onAddTodo}
      />
      <TodoList todos={model.todos} />
    </View>
  );
};


export default App;

Pada contoh di atas, kita membuat sebuah model bernama Model yang berisi data todo dan logika untuk menambahkan todo baru. Kemudian kita membuat sebuah view bernama TodoList yang akan menampilkan daftar todo yang diberikan oleh model. Terakhir, kita membuat sebuah controller bernama App yang akan menerima input dari pengguna (melalui TextInput dan Button), kemudian menambahkan todo baru ke model dengan memanggil method addTodo. Setelah itu, kita menampilkan daftar todo yang ada di model ke view dengan menggunakan component TodoList.

Dengan menggunakan pola MVC, kita dapat memisahkan data, tampilan, dan logika pengolahan data sehingga lebih mudah untuk memahami dan mengelola aplikasi.