37 4.2.3 Implementasi Sistem/Alat/Solusi
Implementasi sistem yaitu proses pembuatan sistem atau perangkat lunak dari tahap perancangan atau desain ke tahap pengkodingan dengan menggunakan bahasa pemrograman yang akan menghasilkan sistem atau perangkat lunak yang telah direncanakan sebelumnya. Implementasi sistem ini menggunakan React- Native dan Aplikasi Expo Go.
Adapun langkah-langkah pembuatan Front-end aplikasi Mobile IDCloudHost seperti berikut :
38
return (
<ScrollView style={{ backgroundColor: '#FFFFFF' }}>
<View>
<View style={{ paddingTop: Constants.statusBarHei ght, alignItems:'center' }}>
<View style={styles.header}>
<Text style={styles.mydashboard}>My Dashboard
</Text>
<View style={styles.right}>
<Image
style={{ width: 44, right: 10 }}
source={require('../assets/dashboard/buy.
png')}
/>
<Image
style={{ width: 44 }}
source={require('../assets/dashboard/info .png')}
/>
</View>
</View>
</View>
Hasil :
Gambar 4. 17. Header
39
Content
Pada bagian content berisi tentang informasi-informasi, produk dan jasa yang telah disediakan, berikut souce code dari isi content.
<View style={{ justifyContent: 'center', alignItems: 'cente r' }}>
<Image source={require('../assets/dashboard/pro mo.png')} />
</View>
<View style={{ marginTop: 20, alignItems: 'center ' }}>
<View style={styles.horizontal}>
<View style={styles.card}>
<View>
<Text style={styles.content}>5</Text>
<Text style={styles.title}>Services</Text
>
</View>
<View style={styles.notif}>
<Image
style={{ width: 32, height: 32 }}
source={require('../assets/dashboard/Se rvices.png')}
/>
</View>
</View>
<View style={styles.card1}>
<View>
<Text style={styles.content}>3</Text>
<Text style={styles.title}>Domain</Text>
</View>
<View style={styles.notif}>
<Image
style={{ width: 32, height: 32 }}
source={require('../assets/dashboard/Do main.png')}
/>
</View>
</View>
</View>
<View style={styles.horizontal}>
40
<View style={styles.card}>
<View>
<Text style={styles.content}>1</Text>
<Text style={styles.title}>Unpaid Invoice s</Text>
</View>
<View style={styles.notif}>
<Image
style={{ width: 32, height: 32 }}
source={require('../assets/dashboard/In voice.png')}
/>
</View>
</View>
<View style={styles.card1}>
<View>
<Text style={styles.content}>3</Text>
<Text style={styles.title}>View Tickets</
Text>
</View>
<View style={styles.notif}>
<Image
style={{ width: 32, height: 32 }}
source={require('../assets/dashboard/ic _outline-article.png')}
/>
</View>
</View>
</View>
</View>
<View style={{ alignItems: 'center', paddingBotto m: 25 }}>
<LinearGradient colors={['#7EC0FD', '#A77EFD']}
style={styles.form}>
<Text style={{
top:20,
color:'#FFFFFF', fontSize: 20, fontWeight: '700',
left:20}}>Register a New Domain</Text>
<View style={{justifyContent:'center', alignIte ms:'center'}}>
<TextInput
41
style={styles.input}
placeholder="Enter domain name..."
/>
<View style={styles.bawah}>
<LinearGradient
colors={['#FDA14D', '#FD4DF6']}
style={styles.transfer}>
<Text style={styles.txttra}>Transfer</Tex t>
</LinearGradient>
<LinearGradient
colors={['#4DA8FD', '#854DFD']}
style={styles.register}>
<Text style={styles.txtreg}>Register</Tex t>
</LinearGradient>
</View>
<Text style={styles.txt}>Transfer now to exte nd your domain by 1 year!*</Text>
</View>
</LinearGradient>
</View>
</View>
</ScrollView>
);
} }
42 Hasil :
Gambar 4. 18. Content
Footer
Pada bagian footer terdapat tab bottom navigation yang mana terdapat beberapa menu yang menampilkan ke halaman lainnya, berikut source code dari footer.
import Dashboard from '../Screens/Dashboard';
import Support from '../Screens/Support';
import Plus from '../Screens/Plus';
import Billing from '../Screens/Billing';
import More from '../Screens/More';
import React from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
import { createBottomTabNavigator } from '@react- navigation/bottom-tabs'
43
const Tab = createBottomTabNavigator();
const Tabs = () => { return (
<Tab.Navigator screenOptions={{
tabBarShowLabel : false, tabBarStyle: {
backgroundColor: '#FFFFFF', height: 80,
} }}
>
<Tab.Screen name="Dashboard" component={Dashboa rd} options={{ headerShown: false,
tabBarIcon : ({focused}) => (
<View style={{alignItems:'center', just ifyContent:'center'}}>
<Image
source={require('../assets/Tabs/Das hboard.png')}
resizeMode='contain' style={{
width: 72,
tintColor: focused ? ('#FDBB7E' ,'#FD7EF8'): '#8292A6' ,
}}
/>
</View>
), }}
/>
<Tab.Screen name="Support" component={Support}
options = {{ headerShown: false,
tabBarIcon : ({focused}) => (
<View style={{alignItems:'center', just ifyContent:'center'}}>
<Image
source={require('../assets/Tabs/Sup port.png')}
resizeMode='contain'
44
style={{
width: 72,
tintColor: focused ? ('#FDBB7E' ,'#FD7EF8'): '#8292A6' ,
}}
/>
</View>
), }}
/>
<Tab.Screen name="Plus" component={Plus} option s={{ headerShown: false,
tabBarIcon : ({focused}) => (
<View style={{alignItems:'center', just ifyContent:'center'}}>
<Image
source={require('../assets/Tabs/Plu s.png')}
resizeMode='contain' style={{
width: 40,
}}
/>
</View>
), }}
/>
<Tab.Screen name="Billing" component={Billing}
options={{ headerShown: false,
tabBarIcon : ({focused}) => (
<View style={{alignItems:'center', just ifyContent:'center'}}>
<Image
source={require('../assets/Tabs/Bil ling.png')}
resizeMode='contain' style={{
width: 72,
tintColor: focused ? ('#FDBB7E' ,'#FD7EF8'): '#8292A6' ,
45
}}
/>
</View>
), }} />
<Tab.Screen name="More" component={More} option s={{ headerShown: false,
tabBarIcon : ({focused}) => (
<View style={{alignItems:'center', just ifyContent:'center'}}>
<Image
source={require('../assets/Tabs/Mor e.png')}
resizeMode='contain' style={{
width:72,
tintColor: focused ? ('#FDBB7E' , '#FD7EF8'): '#8292A6' ,
}}
/>
</View>
), }} />
</Tab.Navigator>
);
}
export default Tabs;
Hasil :
Gambar 4. 19. Footer
46 2. Slicing Design
Slicing design adalah sebuah metode yang digunakan untuk mengambil beberapa bagian pada UI/UX design kemudian diubah atau dikonversi ke dalam file gambar yang dimana file gambar tersebut dapat dimasukkan ke dalam codingan. Adapun tahapan slicing design pada UI/UX design yang ada di website figma, yaitu sebagai berikut :
Yang pertama adalah memahami UI/UX design yang ada supaya mengetahui bagian mana saja yang dapat diubah ke dalam file gambar.
Selanjutnya adalah pilihlah bagian yang ingin disimpan seperti pada gambar berikut memilih banner promo.
Gambar 4. 20. Banner Promo
Setelah bagian banner promo sudah dipilih kemudian adalah pilih bagian export pada figma seperti gambar dan klik bagian + sesuai kan format menjadi .PNG dan klik bagian “export”
Gambar 4. 21. Export Banner Promo
47
Kemudian pilihlah lokasi penyimpanan sementara sesuai dengan tempat yang diinginkan