Всем привет. Это будет первой частью в создании нашего мобильного приложения.
Мобильное приложение мы будем делать с помощью react native и expo. Мы создадим не большое новостное приложение. Для этого мы будем использовать php через rest api.
В нашем приложении мы будем выводить статьи, которые будут находиться в phpmyadmin.
Что такое expo?
Expo, представляет собой набор инструментов, библиотек и сервисов, которые позволяют создавать собственные приложения для iOS и Android с помощью JavaScript. Звучит многообещающе. Проще говоря, Expo помогает вам просматривать проекты, пока вы еще их разрабатываете. Expo CLI создает URL-адрес для разработки (аналогичный локальному хосту в Интернете), который затем можно открыть в клиенте Expo для предварительного просмотра приложения.
Установка Expo
Перед тем, как установить expo, убедитесь что вы установили npm.
npm install expo-cli —global
Установить expo на iphone
Установить expo на android
Expo дает вам варианты. Вы можете предварительно просмотреть свое приложение через клиентское приложение Expo на своем мобильном устройстве или с помощью симулятора iOS / Android на своем компьютере. Я при создании приложения использовал expo на android.
Создание expo приложения
epxo init
После установки Expo открывается интерфейс Expo CLI и позволяет выбрать имя проекта и шаблон. Мы выберем пустую страницу.
cd newsApp
expo start —tunnel
После этого, expo запустит локальный сервер разработки, откроет новое окно для просмотра сервера и предоставит вам QR-код, чтобы открыть ваш проект на вашем мобильном устройстве. Либо вы можете зарегистрироваться в мобильном приложении и expo cli, и он в мобильном приложение автоматически покажет текущие разработки.
Чтобы войти в expo на вашем компьютере используйте эту команду:
expo login
Установка react-navigation
Чтобы мы могли переходить с одного экрана на другой, нам нужно скачать react-nativation:
yarn add react-nativation
Начало разработки
Теперь давайте начнем нашу разработку.
Первое, что мы сделаем — это откроем App.js (наш главный файл).
Верстка
Чтобы наше приложение выглядело привлекательным, мы добавим пару элементов и добавим к ним стили.
Сначала добавим заголовок:
render() {
return (
<SafeAreaView style={styles.MainContainer}>
<ScrollView
>
<Text style={styles.textTitle}>Статьи:</Text>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
textTitle :{fontSize:22,fontFamily: ‘Roboto-M’,fontWeight:'700', padding:10},
});
Теперь давайте добавим блок с выводом статей и стилизуем его.
import * as React from 'react';
import { View, Text, SafeAreaView, StyleSheet, Image, Dimensions,
ScrollView } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons'
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
fontLoaded: false
}
}
async componentDidMount() {
return fetch('http://rapprogtrain.com/server-side/test.php')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson
}, function() {
// In this block you can do something with new state.
});
})
.catch((error) => {
console.error(error);
});
}
FlatListItemSeparator = () => {
return (
<View
/>
);
}
render() {
return (
<SafeAreaView style={styles.MainContainer}>
<ScrollView
>
<Text style={styles.textTitle}>Статьи:</Text>
<View style={styles.postContainer}>
<Image
source = {{ uri: "https://tinyjpg.com/images/social/website.jpg" }}
style={{resizeMode:'cover',width:null,height:null, flex:1, borderRadius:4,
borderWidth:1,
borderColor:'#dddddd'}}
/>
<Text
style={styles.textOfArticle}
>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</Text>
<View style={{marginTop:10, flexDirection: 'row', justifyContent: 'space-between'}}>
<Text style={{color:'#727272',fontSize:13}}>Lorem</Text>
<View style={{flexDirection: 'row'}}>
<Icon name="ios-eye" size={18} style={{color:'#727272', marginRight:3}} />
<Text style={{color:'#727272',fontSize:13}}>22</Text>
</View>
</View>
</View>
</ScrollView>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
MainContainer :{
// Setting up View inside content in Vertically center.
justifyContent: 'center',
flex:1
},
textTitle :{fontSize:22,fontFamily: 'Roboto-M',fontWeight:'700', padding:10},
textOfArticle:{
marginTop:7,
fontSize:16,
fontFamily: 'Roboto-M'
},
postContainer :{
width: Dimensions.get('window').width,
height:250,
paddingBottom:10,
padding:10
},
});
На этой наш урок заканчивается.
В следующем уроке мы сделаем вывод данных mysql.
Если вам интересно, как все получиться перейдите и скачайте это приложение, там будет вкладка с новостями — мобильное приложение
Мой сайт — http://rapprogtrain.com
Я вк и твиттере
Комментарии (22)
Pashkevich
16.09.2019 22:10В чем ценность статьи? В установке expo и react? Зачем разбивать статью? Чтобы плюсов собрать? Зато выложены 4 ссылки для пиара.
Rapprogtrain Автор
16.09.2019 22:34ценность в верстки и о том, как получить данные из базы данных.
Pashkevich
17.09.2019 07:00Вот статья, которая была написана мной.
ОТ начала и ДО конца расписанная разработка приложения.
Аналогично вашему проекту. Такая же читалка статей (новостей).
Создание приложения на Ionic с использованием API
jknight
18.09.2019 23:42Зачем вообще всякие helloworld'ы на сайте, целевая аудитория которого — специалисты? Вот сколько уже лет Хабр читаю, и все понять не могу.
Есть же вроде как площадки со студентами, школьниками, и прочими — тот же киберфорум ими кишит, и неслабый трафик через себя качает. Смысл что-то такое постить, если вероятность, что засыпят минусами и накроют специализированными дворовыми выражениями, которым не место в приличном обществе, близка к 99.9%, а профита все равно не видать в силу отсутствия здесь ЦА?
jknight
18.09.2019 23:44Забыл добавить — фидбек от целевой аудитории (какого бы размера она не была) здесь тоже не представляется возможным: у ее членов попросту write-аккаунтов нет: написать годную статью они ещё не в силах, а инвайт получить знакомых нет.
Neikist
19.09.2019 00:01Не, можете на меня посмотреть, уже почти 2к комментариев при 0 статей и никто не приглашал. Доступ на написание каментов аккам без статей уже давно дали, есть только ограничение что карма не может стать больше 4 и первые каменты должны пройти аппрув модераторов или автора статьи. Вот, как то так.
MrMYSTIC
Извините, но после этих слов можно не чиать.
Rapprogtrain Автор
почему?
Starchick
Потому что в phpmyadmin — веб-интерфейс для работы с базой данных mysql|mariadb.
Rapprogtrain Автор
так я с ним и работаю!!! Я подключаю к сайту phpmyadmin, а в приложение через fetch запрос беру данные с базы данных
bisquitie
Но вы можете его и не подключать, и также получать данные через fetch-запрос. Поэтому он тут и лишний.
Rapprogtrain Автор
хорошо, а если я исправлю с «В следующем уроке мы сделаем вывод данных с phpmyadmin.» в «В следующем уроке мы сделаем вывод данных mysql. „
Будет нормально и правильно?
bisquitie
Будет лучше. Для меня, по крайней мере. Хотя наверняка тут найдутся зануды и минусаторы, которым и этого будет недостаточно.
MrMYSTIC
Я это срачик начал, поэтому, позвольте, объясню. Как я понял, Вы продвигаете сайт с учебными материалами по вёб-разработке, при этом, судя по первым строкам статьи, Вы не очень разбираетесь в инструментах.
Вам верно указали на то, что phpMyAdmin всего лишь вёб-морда/интерфейс для работы с СУБД. И да, «сделаем вывод данных mysql» не вызвало бы вопросов.
Rapprogtrain Автор
хорошо, спасибо за разъяснение. Впредь я больше не буду таких глупых ошибок допускать
RA_ZeroTech
Так и не исправили.
Прислушайтесь к рекомендациям, которые Вам тут дают.
Не пишите обучающие статьи, пока сами не разберётесь в тематике и инструментах, которые используете (упоминаете в статье).
MrMYSTIC
|percona
nochkin
Статьи не хранятся в «phpmyadmin», они хранятся в базе данных.
А при запросе через fetch даже факт хранения в базе данных не важен, так как fetch не лезет напрямую в базу.