Skip to content

Commit 6baeedc

Browse files
devteam21devteam21
committed
first commit
0 parents  commit 6baeedc

25 files changed

+15823
-0
lines changed

‎.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
.vscode
21+
22+
npm-debug.log*
23+
yarn-debug.log*
24+
yarn-error.log*

‎capacitor.config.json

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"appId": "cuku.atdevaldiakbar.biz.id",
3+
"appName": "CuKu",
4+
"bundledWebRuntime": false,
5+
"npmClient": "npm",
6+
"webDir": "build",
7+
"plugins": {
8+
"SplashScreen": {
9+
"launchShowDuration": 0
10+
}
11+
},
12+
"cordova": {}
13+
}

‎ionic.config.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"name": "CuKu",
3+
"integrations": {
4+
"capacitor": {}
5+
},
6+
"type": "react"
7+
}

‎package-lock.json

+14,819
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
{
2+
"name": "CuKu",
3+
"version": "0.0.1",
4+
"private": true,
5+
"dependencies": {
6+
"@capacitor/android": "^2.4.5",
7+
"@capacitor/core": "2.4.5",
8+
"@ionic/react": "^5.0.7",
9+
"@ionic/react-router": "^5.0.7",
10+
"@testing-library/jest-dom": "^4.2.4",
11+
"@testing-library/react": "^9.4.0",
12+
"@testing-library/user-event": "^8.0.3",
13+
"@types/jest": "^24.0.25",
14+
"@types/node": "^12.12.24",
15+
"@types/react": "^16.9.17",
16+
"@types/react-dom": "^16.9.4",
17+
"@types/react-router": "^5.1.4",
18+
"@types/react-router-dom": "^5.1.3",
19+
"axios": "^0.21.1",
20+
"ionicons": "^5.0.0",
21+
"react": "^16.13.0",
22+
"react-dom": "^16.13.0",
23+
"react-router": "^5.1.2",
24+
"react-router-dom": "^5.1.2",
25+
"react-scripts": "3.4.0",
26+
"typescript": "3.8.3"
27+
},
28+
"scripts": {
29+
"start": "react-scripts start",
30+
"build": "react-scripts build",
31+
"test": "react-scripts test",
32+
"eject": "react-scripts eject"
33+
},
34+
"eslintConfig": {
35+
"extends": "react-app"
36+
},
37+
"browserslist": {
38+
"production": [
39+
">0.2%",
40+
"not dead",
41+
"not op_mini all"
42+
],
43+
"development": [
44+
"last 1 chrome version",
45+
"last 1 firefox version",
46+
"last 1 safari version"
47+
]
48+
},
49+
"devDependencies": {
50+
"@capacitor/cli": "2.4.5",
51+
"@ionic/lab": "3.2.10"
52+
},
53+
"description": "An Ionic project"
54+
}

‎public/assets/icon/favicon.png

930 Bytes
Loading

‎public/assets/icon/icon.png

23.2 KB
Loading

‎public/assets/shapes.svg

+1
Loading

‎public/index.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Ionic App</title>
6+
7+
<base href="/" />
8+
9+
<meta name="color-scheme" content="light dark" />
10+
<meta
11+
name="viewport"
12+
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
13+
/>
14+
<meta name="format-detection" content="telephone=no" />
15+
<meta name="msapplication-tap-highlight" content="no" />
16+
17+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18+
19+
<link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/assets/icon/favicon.png" />
20+
21+
<!-- add to homescreen for ios -->
22+
<meta name="apple-mobile-web-app-capable" content="yes" />
23+
<meta name="apple-mobile-web-app-title" content="Ionic App" />
24+
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
25+
</head>
26+
27+
<body>
28+
<div id="root"></div>
29+
</body>
30+
31+
</html>

‎public/manifest.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"short_name": "Ionic App",
3+
"name": "My Ionic App",
4+
"icons": [
5+
{
6+
"src": "assets/icon/favicon.png",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
},
10+
{
11+
"src": "assets/icon/icon.png",
12+
"type": "image/png",
13+
"sizes": "512x512",
14+
"purpose": "maskable"
15+
}
16+
],
17+
"start_url": ".",
18+
"display": "standalone",
19+
"theme_color": "#ffffff",
20+
"background_color": "#ffffff"
21+
}

‎src/App.test.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
import { render } from '@testing-library/react';
3+
import App from './App';
4+
5+
test('renders without crashing', () => {
6+
const { baseElement } = render(<App />);
7+
expect(baseElement).toBeDefined();
8+
});

‎src/App.tsx

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
// Ini untuk Widhi
2+
// Fungsi skrip ini untuk mengatur TAB baik ikon, teks maupun routing
3+
import React from 'react';
4+
import { Redirect, Route } from 'react-router-dom';
5+
import {
6+
IonApp,
7+
IonIcon,
8+
IonLabel,
9+
IonRouterOutlet,
10+
IonTabBar,
11+
IonTabButton,
12+
IonTabs
13+
} from '@ionic/react';
14+
15+
// Dibawah ini tugas mereka untuk memanggil fungsi / paket / skrip / file
16+
import { IonReactRouter } from '@ionic/react-router';
17+
import { cloud, ellipse, information, informationCircle, searchCircle, searchOutline, square, triangle } from 'ionicons/icons';
18+
import Tab1 from './pages/Tab1';
19+
import Tab2 from './pages/Tab2';
20+
import Tab3 from './pages/Tab3';
21+
22+
/* Core CSS required for Ionic components to work properly */
23+
import '@ionic/react/css/core.css';
24+
25+
/* Basic CSS for apps built with Ionic */
26+
import '@ionic/react/css/normalize.css';
27+
import '@ionic/react/css/structure.css';
28+
import '@ionic/react/css/typography.css';
29+
30+
/* Optional CSS utils that can be commented out */
31+
import '@ionic/react/css/padding.css';
32+
import '@ionic/react/css/float-elements.css';
33+
import '@ionic/react/css/text-alignment.css';
34+
import '@ionic/react/css/text-transformation.css';
35+
import '@ionic/react/css/flex-utils.css';
36+
import '@ionic/react/css/display.css';
37+
38+
/* Theme variables */
39+
import './theme/variables.css';
40+
41+
// Mereka semua berfungsi untuk mengatur Tabs-tabs, baik ikon, judul, route kemana dll
42+
43+
const App: React.FC = () => (
44+
<IonApp>
45+
<IonReactRouter>
46+
<IonTabs>
47+
<IonRouterOutlet>
48+
<Route path="/tab1" component={Tab1} exact={true} />
49+
<Route path="/tab2" component={Tab2} exact={true} />
50+
<Route path="/tab3" component={Tab3} />
51+
<Route path="/" render={() => <Redirect to="/tab1" />} exact={true} />
52+
</IonRouterOutlet>
53+
<IonTabBar slot="bottom">
54+
<IonTabButton tab="tab1" href="/tab1">
55+
<IonIcon icon={cloud} />
56+
<IonLabel>Cuaca</IonLabel>
57+
</IonTabButton>
58+
<IonTabButton tab="tab2" href="/tab2">
59+
<IonIcon icon={searchOutline} />
60+
<IonLabel>Prediksi</IonLabel>
61+
</IonTabButton>
62+
<IonTabButton tab="tab3" href="/tab3">
63+
<IonIcon icon={informationCircle} />
64+
<IonLabel>Tentang</IonLabel>
65+
</IonTabButton>
66+
</IonTabBar>
67+
</IonTabs>
68+
</IonReactRouter>
69+
</IonApp>
70+
);
71+
72+
export default App;

‎src/components/ExploreContainer.css

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.container {
2+
text-align: center;
3+
position: absolute;
4+
left: 0;
5+
right: 0;
6+
top: 50%;
7+
transform: translateY(-50%);
8+
}
9+
10+
.container strong {
11+
font-size: 20px;
12+
line-height: 26px;
13+
}
14+
15+
.container p {
16+
font-size: 16px;
17+
line-height: 22px;
18+
color: #8c8c8c;
19+
margin: 0;
20+
}
21+
22+
.container a {
23+
text-decoration: none;
24+
}

‎src/components/ExploreContainer.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
import './ExploreContainer.css';
3+
4+
interface ContainerProps {
5+
name: string;
6+
}
7+
8+
const ExploreContainer: React.FC<ContainerProps> = ({ name }) => {
9+
return (
10+
<div className="container">
11+
<strong>{name}</strong>
12+
<p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
13+
</div>
14+
);
15+
};
16+
17+
export default ExploreContainer;

‎src/index.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
import * as serviceWorker from './serviceWorker';
5+
6+
ReactDOM.render(<App />, document.getElementById('root'));
7+
8+
// If you want your app to work offline and load faster, you can change
9+
// unregister() to register() below. Note this comes with some pitfalls.
10+
// Learn more about service workers: https://bit.ly/CRA-PWA
11+
serviceWorker.unregister();

‎src/pages/Main.css

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
2+
/* Ini skrip CSS buat modifikasi tampilan html kalian */
3+
4+
.container {
5+
text-align: center;
6+
position: absolute;
7+
left: 0;
8+
right: 0;
9+
top: 50%;
10+
transform: translateY(-50%);
11+
}
12+
13+
.blabla {
14+
text-align: center;
15+
font-weight: bold;
16+
}
17+
18+
.container-ku {
19+
text-align: center;
20+
}
21+
22+
.container strong {
23+
font-size: 20px;
24+
line-height: 26px;
25+
}
26+
27+
.container p {
28+
font-size: 16px;
29+
line-height: 22px;
30+
color: #8c8c8c;
31+
margin: 0;
32+
}
33+
34+
.container a {
35+
text-decoration: none;
36+
}

‎src/pages/Tab1.tsx

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
// Bagian Aden
2+
// Dibawah ini tugas mereka untuk memanggil fungsi / paket / skrip / file
3+
import React, { useEffect, useState } from 'react';
4+
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar , IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCardContent} from '@ionic/react';
5+
import './Main.css';
6+
import WeatherService from '../services/WeatherService';
7+
8+
const Tab1: React.FC = () => {
9+
10+
// Well fungsi skrip dibawah untuk promise agar data JSON dapat diambil sesuai kebutuhan
11+
// Misal butuh data Suhu, lokasi sajoo..
12+
const data = new WeatherService();
13+
const [cuaca, setCuaca]: [any, any] = useState({
14+
lokasi: '',
15+
suhu: '',
16+
ket: '',
17+
icon: ''
18+
})
19+
20+
// Pada baris ke 21 adalah fungsi React Hook
21+
// Kode dibawah akan selalu jalan saat aplikasi terbuka pada prinsip LifeCyle Apps
22+
// Dimana karena fungsi dibawah ini kita dapat memanggil sebuah data JSON lebih praktis
23+
useEffect(() => {
24+
data.mintaData().then(dataCuaca => {
25+
setCuaca({
26+
lokasi: dataCuaca.name,
27+
suhu: dataCuaca.main.temp,
28+
ket: `${dataCuaca.weather[0].main} (${dataCuaca.weather[0].description})`,
29+
icon: dataCuaca.weather[0].icon
30+
});
31+
console.log(dataCuaca)
32+
})
33+
}, []);
34+
35+
return (
36+
<IonPage>
37+
<IonHeader>
38+
<IonToolbar>
39+
<IonTitle><p className="blabla">Cuaca Ku</p></IonTitle>
40+
</IonToolbar>
41+
</IonHeader>
42+
<IonContent>
43+
<div className="container">
44+
<IonCard>
45+
<IonCardHeader color="primary">
46+
<IonCardSubtitle>CUACA SEKARANG</IonCardSubtitle>
47+
<IonCardTitle><h1>{cuaca.suhu}°C</h1></IonCardTitle>
48+
<img alt={cuaca.suhu} width='80' height='80' src={`http://openweathermap.org/img/wn/${cuaca.icon}@2x.png`}/>
49+
<h2><b>{cuaca.lokasi}</b></h2>
50+
</IonCardHeader>
51+
<IonCardContent><br/>KETERANGAN CUACA<br/>{cuaca.ket}</IonCardContent>
52+
</IonCard>
53+
</div>
54+
</IonContent>
55+
</IonPage>
56+
);
57+
};
58+
59+
// Lihat pada baris ke 48
60+
// Contoh penggunaan useEffect saat memanggil suhu sangat mudah cuma perlu {cuaca.suhu}
61+
62+
export default Tab1;

0 commit comments

Comments
 (0)