Tiansy Annisa Burhansyah

20808144077
Project: Recreate a Popular App
5.1.1 Choose an App
At this point, we’ve written programs to recreate screens from popular apps such as:
 SnapChat
 Venmo
 Google
In this project, you’ll choose a different app to recreate. You’ll only be creating one screen of
the app, so try to find an app that includes the following:
 buttons
 some sort of text input
 an interesting layout
List at least 3 ideas here and include links to images of the screen you’d like to recreate if
available. Check with your teacher to make sure one of your selections is a good challenge
and includes the right components.

Ide 1 = Netflix (Login Layout)

Ide 2 = Instagram (Login Layout)
Ide 3 = Spotify (Login Layout)
5.1.2 Plan Layout and Functionality
Once you’ve chosen an app screen to recreate, take some time to plan the layout of the screen
and how different components will interact.
Create a sketch of the screen and label any dimensions you think will be helpful (remember
that you’ll be writing your program using either flex or ‘dimensions’ to create a responsive
design.)
List any images you may need to include to complete this app screen. Do some research to
find these images (adding the term ‘transparent’ to your search will usually give you .png
images with transparent backgrounds which look much nicer in final designs!) and record any
links you may need. The next item is a video that will show you step-by-step how to upload
images through codehs to use in your program.
Think about and respond to these questions to make a plan before you begin coding:
1. How do different components interact with one another?
2. What happens when I click a button?
o How can alerts be used to mimic this functionality?
3. Should anything on the screen change as a user types a value?
4. How can the functionality of this app be altered based on the skills I currently have?
5. Insert a link to your planning sketch here (once you’ve created a sketch of the layout,
take a picture and upload it through codehs to create a link to share.)

5.1.4 Code the Layout

In this exercise, you’ll begin coding your chosen app screen! Don’t worry about the actual
functionality of any buttons or text boxes at this point. Just write the code for the responsive
layout of your app using either flex or ‘dimensions’ to control the sizes of various
components.
import React, { Component } from 'react';
import { AppRegistry, Text, View, StyleSheet, Image, TouchableHighlight, <View style={styles.Box3}>
ImageBackground, Alert, Dimensions } from 'react-native';
import Constants from 'expo-constants'; <Image
source={{ uri:
let deviceHeight = Dimensions.get('window').height; 'https://codehs.com/uploads/fe8fd2c5f30f50414a7d47a673fcc7ca' }}
let deviceWidth = Dimensions.get('window').width; style={{ height: 20, width: 20, marginRight: 10 }}
/>
export default class App extends Component { <Text style={styles.Title7}>
render() { Login with Facebook
return ( </Text>
<View style={styles.container}> </View>

<Image
<View style={styles.Box4}>
source={{ uri:
'https://codehs.com/uploads/98b49a6a86952527d6c572d87bc04955' }}
style={{ height: 45, width: 200, marginLeft: 20, marginTop: <Text style={styles.Title8}>
30 }} New to Netflix?
/> </Text>

<Text style={styles.Title1}> <Text style={styles.Title9}>

Sign In Sign up now.
</Text> </Text>
</View>
</View>
<View style={styles.Box}>
);
}
<Text style={styles.Title2}> }
Email or phone number const styles = StyleSheet.create({
</Text> container: {
height: deviceHeight,
<Text style={styles.Title3}> width: deviceWidth,
Password backgroundColor: "black",
</Text> },
Box: {
<Text style={styles.Title4}> height: deviceHeight/2.5,
Sign In width: deviceWidth,
</Text> flexDirection: "column",
</View> justifyContent: "center",
<View style={styles.Box2}> alignItems: "center",
justifyItems: "center",
textAlign: "center",
<Image
},
source={{ uri:
Box2: {
'https://codehs.com/uploads/4c6688dd077ebd12b500718fe78d3033' }}
height: deviceHeight/10,
style={{ height: 17, width: 17, marginRight: 5 }}
width: deviceWidth/1,
/>
flexDirection: "row",
<Text style={styles.Title5}>
justifyContent: "center",
Remember me
alignItems: "flex-start",
</Text>
},

<Text style={styles.Title6}>
Need help?
</Text>
Box3: { Title5: {
height: deviceHeight/15, fontSize: 13,
width: deviceWidth, fontFamily: "Arial",
flexDirection: "row", color: "#7f7f7f",
justifyContent: "flex-start", textAlign: "flex-start",
alignItems: "flex-start", marginRight: 70,
marginLeft: 25, marginTop: 2,
marginTop: 30, },
}, Title6: {
Box4: { fontSize: 13,
height: deviceHeight/2, fontFamily: "Arial",
width: deviceWidth, color: "#7f7f7f",
flexDirection: "row", textAlign: "flex-end",
justifyContent: "flex-start", marginLeft: 10,
alignItems: "flex-start", marginTop: 2,
marginLeft: 25, },
}, Title7: {
Title1: { fontSize: 13,
fontSize: 28, fontFamily: "Arial",
fontFamily: "Arial Black", color: "#7f7f7f",
fontWidth: "bold", textAlign: "center",
color: "white", marginTop: 5,
textAlign: "flex-start", },
marginTop: 45, Title8: {
marginLeft: 25, fontSize: 13,
}, fontFamily: "Arial",
Title2: { color: "#7f7f7f",
fontSize: 17, textAlign: "flex-start",
fontFamily: "Arial", },
color: "#7f7f7f", Title9: {
height: deviceHeight/13, fontSize: 13,
width: deviceWidth/1.2, fontFamily: "Arial",
backgroundColor: "#333333", color: "white",
textAlign: "center", textAlign: "flex-end",
margin: 6, marginLeft: 7,
borderRadius: 4, },
}, });
Title3: {
fontSize: 17,
fontFamily: "Arial",
color: "#7f7f7f",
height: deviceHeight/13,
width: deviceWidth/1.2,
backgroundColor: "#333333",
textAlign: "center",
margin: 6,
borderRadius: 4,
},
Title4: {
fontSize: 17,
fontFamily: "Arial",
color: "white",
height: deviceHeight/13,
width: deviceWidth/1.2,
backgroundColor: "red",
textAlign: "center",
marginTop: 25,
borderRadius: 4,
},
 5.1.5 Add Functionality
In this exercise, you’ll put it all together by adding functionality to your app screen layout.
Copy and paste the code you wrote in the last exercise and add in the functionality of each
button and text box. Use customized alerts to show what would happen in your app as each
button is pressed.
import React, { Component } from 'react'; <Text style={styles.Title4}>
import { AppRegistry, Text, View, StyleSheet, Image, TouchableHighlight, Sign In
ImageBackground, Alert, Dimensions, TextInput } from 'react-native'; </Text>
import Constants from 'expo-constants'; </TouchableHighlight>

let deviceHeight = Dimensions.get('window').height; </View>

let deviceWidth = Dimensions.get('window').width;

<View style={styles.Box2}>
export default class App extends Component {
state = {
password: 'password', <Image
name: 'Email or phone number' source={{ uri:
} 'https://codehs.com/uploads/4c6688dd077ebd12b500718fe78d3033' }}
style={{ height: 17, width: 17, marginRight: 5 }}
/>
render() { <Text style={styles.Title5}>
return ( Remember me
<View style={styles.container}> </Text>

<Image <TouchableHighlight
source={{ uri: onPress={() => {
'https://codehs.com/uploads/98b49a6a86952527d6c572d87bc04955' }} alert('What do you want me to do?')
style={{ height: 45, width: 200, marginLeft: 20, marginTop: 30 }} }}
/> >
<Text style={styles.Title6}>
<Text style={styles.Title1}> Need help?
Sign In </Text>
</Text> </TouchableHighlight>

<View style={styles.Box}> </View>

<TextInput style={styles.Title2} <View style={styles.Box3}>

onChangeText={(name) => this.setState({name})}
value={this.state.name} <Image
/> source={{ uri:
'https://codehs.com/uploads/fe8fd2c5f30f50414a7d47a673fcc7ca' }}
<TextInput style={styles.Title3} style={{ height: 20, width: 20, marginRight: 10 }}
onChangeText={(password) => this.setState({password})} />
value={this.state.password}
/> <TouchableHighlight
onPress={() => {
<TouchableHighlight alert('Directing you to Facebook page...')
onPress={() => { }}
alert('YOU ARE SIGNING IN') >
}}
 <Text style={styles.Title7}> Box3: {
Login with Facebook height: deviceHeight/15,
</Text> width: deviceWidth,
</TouchableHighlight> flexDirection: "row",
justifyContent: "flex-start",
</View> alignItems: "flex-start",
marginLeft: 25,
marginTop: 30,
<View style={styles.Box4}>
},
Box4: {
<Text style={styles.Title8}> height: deviceHeight/2,
New to Netflix? width: deviceWidth,
</Text> flexDirection: "row",
justifyContent: "flex-start",
<TouchableHighlight alignItems: "flex-start",
onPress={() => { marginLeft: 25,
alert('YOU ARE SIGNING IT.') },
}} Title1: {
> fontSize: 28,
<Text style={styles.Title9}> fontFamily: "Arial Black",
Sign up now. fontWidth: "bold",
</Text> color: "white",
</TouchableHighlight> textAlign: "flex-start",
marginTop: 45,
</View> marginLeft: 25,
</View> },
); Title2: {
} fontSize: 17,
} fontFamily: "Arial",
color: "#7f7f7f",
const styles = StyleSheet.create({ height: deviceHeight/13,
container: { width: deviceWidth/1.2,
height: deviceHeight, backgroundColor: "#333333",
width: deviceWidth, textAlign: "center",
backgroundColor: "black", margin: 6,
}, borderRadius: 4,
Box: { },
height: deviceHeight/2.5, Title3: {
width: deviceWidth, fontSize: 17,
flexDirection: "column", fontFamily: "Arial",
justifyContent: "center", color: "#7f7f7f",
alignItems: "center", height: deviceHeight/13,
justifyItems: "center", width: deviceWidth/1.2,
textAlign: "center", backgroundColor: "#333333",
}, textAlign: "center",
Box2: { margin: 6,
height: deviceHeight/10, borderRadius: 4,
width: deviceWidth/1, },
flexDirection: "row",
justifyContent: "center",
alignItems: "flex-start",
},
 Title4: {
fontSize: 17,
fontFamily: "Arial",
color: "white",
height: deviceHeight/13,
width: deviceWidth/1.2,
backgroundColor: "red",
textAlign: "center",
marginTop: 25,
borderRadius: 4,
},
Title5: {
fontSize: 13,
fontFamily: "Arial",
color: "#7f7f7f",
textAlign: "flex-start",
marginRight: 70,
marginTop: 2,
},
Title6: {
fontSize: 13,
fontFamily: "Arial",
color: "#7f7f7f",
textAlign: "flex-end",
marginLeft: 10,
marginTop: 2,
},
Title7: {
fontSize: 13,
fontFamily: "Arial",
color: "#7f7f7f",
textAlign: "center",
marginTop: 5,
},
Title8: {
fontSize: 13,
fontFamily: "Arial",
color: "#7f7f7f",
textAlign: "flex-start",
},
Title9: {
fontSize: 13,
fontFamily: "Arial",
color: "white",
textAlign: "flex-end",
marginLeft: 7,
},
});
5.1.6 Reflection
After you’ve created your app, answer the following questions:
1. How difficult was it to recreate the layout of your app screen?
2. How difficult was it to add functionality to your app?
3. What functionality existed in your chosen app that you were not able to add in
because of knowledge limitations? What additional skills/concepts would you need to
complete this app?
Jawab:
1. Menurut saya membuat layout aplikasi ternyata tidak sesusah yang dibayangkan.
Dalam hal ini saya memilih untuk membuat layout aplikasi Netflix. Apabila kita
memperhatikan secara teliti dan detail step by step yang dijelaskan dalam video, maka
kita dapat membuat aplikasi sebagaimana yang kita inginkan.
2. Untuk bagian menambahkan fungsi dari aplikasi yang sudah dibuat pun demikian.
Menurut saya tidak sesulit membuat layout aplikasi. Mungkin ada beberapa bagian
yang 'salah' ntah itu kurang tanda titik atau kurang huruf. Maka dari itu, kita perlu
teliti betul dalam menambahkan setiap detail yang ada.
3. Menurut saya fungsi yang tidak dapat ditambahkan dalam layout aplikasi Netflix saya
yaitu pada bagian fitur "log in with facebook". Seharusnya pada bagian tersebut
terdapat tombol yang dapat ditekan lalu mengarahkan kita pada laman facebook,
tempat di mana kita bisa log in Netflix menggunakan akun Facebook. Namun karena
terbatasnya pengetahuan yang saya ketahui, maka saya belum dapat menerapkan fitur
tersebut. Mungkin fitur ini yang diperlukan sebagai skil/konsep tambahan untuk
melengkapi layout aplikasi Netflix yang telah dibuat.
Lampiran:
Link gdrive tambahan
https://drive.google.com/drive/folders/1cro4FFvDXZr2ZiKRcgu5-V_TQ9sP8hw9?hl=id

Screenshoot Unit 1
Screenshoot Unit 2

Screenshoot Unit 3

Screenshoot Unit 4
Screenshoot Unit 5

Screenshoot Course Progress