Att bygga en Instagram-klon i React-Native och Tailwind-CSS med en Ruby on Rails API endast backend

** Den här guiden förutsätter grundläggande kunskaper om React.JS och viss exponering för Ruby on Rails **

Jag har inte hittat en bra resurs för React-Native artiklar och byggnadsapplikationer, så jag tänkte att jag skulle försöka skriva en tutorial om att bygga en React-Native-app med en Ruby on Rails-backend. Vi kommer att använda Expo för att bygga och hantera React-Native-projektet. Så låt oss bara hoppa till den djupa änden. Jag kommer att bygga ut en snabb frontend först sedan kommer att ansluta till en Rails backend och visa en del fröinformation för tillfället. Låt oss börja!

$ expo init instaclone

efter att projektet har genererats, se till att byta till projektkatalogen, låt oss installera några beroenden som vi kommer att använda. låt oss använda Tailwind-CSS för enkel styling och jag har inte använt det med React-Native på denna punkt så jag tänkte att jag skulle prova det. Vi kommer att använda paketet Rea-native-tailwindcss av TVke.

$ garn lägg reagera-native-tailwindcss

Vid denna tidpunkt måste vi generera den tailwind.config.js-fil som jag ska använda hela installationen för syftet med denna tutorial

$ npx medvindvind init - fullständigt

Detta genererar den fullständiga konfigurationen av Tailwind med alla stilar som tillhandahålls av Tailwind.

Nästa låter, installera react-router-native för att hantera alla våra routningar i applikationen

$ garn lägg till reaktor-router-native

och vi använder också Font Awesome för att hantera alla ikoner i detta projekt

$ garn add @ fortawesome / fontawesome-svg-core $ garn add @ fortawesome / free-solid-svg-icon $ garn add @ fortawesome / react-native-fontawesome

Vi måste fortfarande installera Axios för att hantera API-samtal

$ garn lägg till axios

Okej, så vårt projekt bör ha allt det behöver för att börja bygga. Låt oss avfyra vår server och starta en emulator för att se vår app.

$ garn start 

Vid denna tidpunkt bör du kunna se de nakna benen reagera-applikationen.

Okej, så jag ska hantera alla mina routningar i den översta App.js-filen, nu skapar vi en ./pages och ./components-katalog.

$ mkdir komponenter sidor

och i komponentkatalogen skapade jag en BottomNav-komponent, och i sidokatalogen skapade jag alla sidvyer.

$ touch-komponenter / BottomNav.js-sidor / Home.js-sidor / Search.js-sidor / AddPhoto.js-sidor / Likes.js-sidor / MyPhotos.js

För tillfället har jag bara lagt till den grundläggande pannplattan till varje komponent som jag gjorde för att lösa felen.

// *** Observera att jag gjorde det för alla ovanstående filer som jag skapade bara // se till att alla namn matchar ****
importera React from 'react' import {View, Text} from 'react-native'
const Home = () => {return ( Hem )}
exportera standard Hem

Så nu måste vi hantera eller grundläggande routing genom vår applikation. Nedan ser du att jag importerar alla mina komponenter för styling och routing.

Så låt oss nu bygga ut vår BottomNav-komponent och hantera alla länkar till olika sidor.

https://gist.github.com/cgibsonmm/5703e34445445438c9bf5bfd3f2bf352

Nu bör du ha något som ser ut så här.

och på varje knapptryck kommer du att dirigeras till en annan sida i applikationen. Okej, nu behöver vi data. Vi kommer att börja med att använda en Rails-app och lite utsädesdata som vi kommer att ladda upp foton och lägga upp i en annan självstudie.

Det är dags för Ruby on Rails!

I en annan katalog låter vi skapa ett nytt rails-projekt som bara är API och använder PostgreSQL ur rutan.

$ rails new instaclone_backend --api - database = postgresql

När ditt nya rails-projekt är igång låter $ cd instaclone_backend och generera vår grundläggande PhotoPost-modell. För närvarande har vi inte en användarmodell så för närvarande använder vi bara ett användarnamn som en sträng och vi kommer att uppdatera koden när det är dags för en riktig användare.

Steg vi kommer att ta här ...

  1. Skapa ny databas i PostgreSQL
  2. Skapa en grundläggande PhotoPost-modell # oroa dig inte för den bildaktiva lagring som hanterar det
  3. Installera Rails Active Storage
  4. Migrera vår databas
$ rails db: skapa $ rails g modell PhotoPost användarnamn: string $ rails active_storage: install $ $ rails db: migrera

Nu är det dags att hoppa in i redaktören och sola sig i magiken i rälsen ... Först måste vi lägga till några ädelstenar som vi kommer att använda. Låter uncomment gem 'rack-cors' och gem 'image_processing och låt oss lägga till pärla' faker 'i utvecklingsprovgruppen för att generera några falska användarnamn, jag kommer också att använda gem' active_model_serializers 'för att generera välformaterade JSON-data som våra API kommer att konsumera.

Din Gem-fil ska se ut så här.

Kör nu till en paketinstallation för att installera allt

$ paket installera

Vi måste fortfarande lägga till Active Storage till vår ImagePost-modell, det här är lika enkelt som en enda kodrad i vår modell

Nu måste vi konfigurera några små saker för att acceptera utanför API-begäran via rails och 'rack-cors'-pärla. För tillfället kan vi redigera vår ./config/initalizers/cors.rb så att den ser så här ut som gör att externa anslutningar får åtkomst till Rails och gör alla API-begäranden det vill ha. *** ANMÄRKNING att detta måste ändras när man går till produktionen eller någon som går till backendens adress har tillgång till applikationen ***

Nu när detta är redo att gå kommer vi att använda active_model_serializers för att hantera JSON-formateringen så vi måste generera en serialiserare för vår ImagePost-modell

$ rails g serialiserare ImagePost

Detta genererade en ./serializers-mapp och en ./serializers/image_post_serializer.rb-fil, vi bör redigera den här filen för att hantera JSON-informationen som kommer att inkluderas i begäran från vår frontend.

Vad gjorde vi här?

  1. vi ställer in de tre attributen som ska returneras från vår get-begäran
  2. sätter vi en villkor som returnerar sökvägen till vår bild om en bild är kopplad till ImagePost.

Okej, så jag gick också och tog tag på några foton av Pixabay så jag hade några högkvalitativa foton att använda för dummy foton, och lägger sedan till dem i en mapp som heter bilder och placerade dem i den offentliga katalogen.

$ mkdir ./public/images 

Låter nu frö vår databas med lite dummy-data och ställa in vår sedan ställa vår frontend för att göra en begäran.

Här gör jag 100 ImagePosts med Faker och en slumpmässig bild från min bildmapp. Nu kan vi köra vår fröfil

$ rails db: utsäde

Nu behöver vi bara generera vår controller och ställa in vår indexåtgärd.

$ rails g controller ImagePost-index

Detta borde ha skapat en ny kontrollfil och fyllt den med en tom indexåtgärd, låt oss lägga till två rader till den filen för att returnera alla ImagePosts som för närvarande finns i databasen.

Dessa två kodrader kommer att hantera hitta alla ImagePosts och den bifogade bilden samtidigt som man förhindrar den fruktade N + 1-frågan. Om vi ​​nu kör vår railserver bör vi kunna kontrollera att vår JSON begär och svar.

$ rails s 

Låt det vara JSON !!!

Låt oss nu hoppa in i webbläsaren och testa vår API-slutpunkt. Navigera till http: // localhost: 3000 / image_post / index så ska du se en fin bit av JSON med alla våra data.

Om du ser något liknande det här är du i bra form. Låt oss nu redigera vår React-Native-app så att vår begäran visar våra bilder.

Så om du inte har använt krokar än så kan useState och useEffect vara främmande för dig men det är verkligen inte så illa.

const [posts, setPosts] = useState ([])

Denna kodrad skapar en inläggsvariabel och ställer in originalvärdet till en tom matris och skapar också en funktion som heter setPosts som kommer att användas i stället för den traditionella setState-funktionen.

Nästa stycke med okänt territorium är useEffect som ersätter Reacts livscykelmetoder.

useEffect (() => {
// använda effekt skriven med den tomma arrayen som det andra argumentet // gör att detta bara körs på den initiala renderingen
}, [])

Okej nu för att dela ut koden lade jag till ett ./components/PhotoPosts.js till projektet och som kommer att hantera varje foto som ses i vårt projekt.

Okej just nu bör allt fungera och när du klickar på hemknappen i vår app ska vi se en lista med alla 100 inlägg i vår databas.

WOOT!

Så om du har nått det så långt bör du ha en fungerande Ruby on Rails-backend med en React-Native frontend som gör att vi kan göra en enda API-begäran till vår lokala värd och returnera alla bilder i vår databas.

Detta är del en av förmodligen en sexdelad tutorial med målet att bygga en mer fullständig app. Var snäll och håll dig uppdaterad för mer!

Front end Git

Back end Git