1559053747
Build a Basic CRUD App with Laravel and Vue
In this tutorial, you’ll learn how to build a basic CRUD App with Laravel and Vue.
Laravel is one of the most popular web frameworks today because of its elegance, simplicity, and readability. It also boasts one of the largest and most active developer communities. The Laravel community has produced a ton of valuable educational resources, including this one! In this tutorial, you’ll build a trivia game as two separate projects: a Laravel API and a Vue frontend (using vue-cli). This approach offers some important benefits:
- It allows you to separate your backend and frontend and deploy them independently, using different strategies and schedules for testing and deployment
- You can deploy your frontend as a static application to a CDN and achieve virtually unlimited scaling for a fraction of the cost of hosting it together with the backend
- This structure allows developers to work on just the API or just the frontend without needing access to the source code of the other part of the system (this is still possible to achieve if the projects are integrated, but it’s a bit of a headache to set up) making it an ideal architecture for large teams
Before you start, you’ll need to set up a development environment with PHP 7 and Node.js 8+/npm. You will also need an Okta developer account so you can add user registration, user login, and all the other user related functionalities.
FUN FACT: Did you know that Vue owes much of its current popularity to Laravel? Vue comes pre-packaged with Laravel (along with Laravel Mix, an excellent build tool based on webpack) and allows developers to start building complex single-page applications without worrying about transpilers, code packaging, source maps, or any other ‘dirty’ aspects of modern frontend development.
Create an OpenID Connect App
Before we get into the code, let’s set up our Okta account so it’s ready when we need it. Okta is an API service that allows you to create, edit, and securely store user accounts and user account data, and connect them with one or more applications. You can register for a forever-free developer account here.
Once you’re signed up, log in and visit the Okta dashboard. Be sure to take note of the Org URL setting at the top-right portion of the dashboard, you’ll need this URL later when configuring your application.
Next, set up a new application, you’ll mostly use the default settings. Here are the step-by-step instructions:
- Go to the Applications menu item and click the Add Application button:
- Go to the Applications menu item and click the Add Application button:
- Go to the Applications menu item and click the Add Application button:
Build Your Laravel and Vue CRUD Application
Now it’s time to dig in and build a fun trivia game application! This app will be integrated with a free API for trivia quiz questions and will allow us to set up a list of players, load questions, and mark the players’ answers as right or wrong.
Here’s what your completed application will look like:
You can create your own rules, but here’s the general gist of the game:
- It allows you to separate your backend and frontend and deploy them independently, using different strategies and schedules for testing and deployment
- You can deploy your frontend as a static application to a CDN and achieve virtually unlimited scaling for a fraction of the cost of hosting it together with the backend
- This structure allows developers to work on just the API or just the frontend without needing access to the source code of the other part of the system (this is still possible to achieve if the projects are integrated, but it’s a bit of a headache to set up) making it an ideal architecture for large teams
Install Laravel and Configure the Application
Once the laravel command is installed globally via composer, you’ll use it to create a new Laravel project, and start the development PHP server from its directory:
composer global require laravel/installer
laravel new trivia-web-service
cd trivia-web-service
php artisan serve
Next, you’ll set up a new MySQL database and user for your app (there’s nothing set in stone about MySQL, you can use a different database engine if you prefer):
mysql -uroot -p
CREATE DATABASE trivia CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE USER 'trivia'@'localhost' identified by 'trivia';
GRANT ALL on trivia.* to 'trivia'@'localhost';
quit
You now need to insert the database configuration variables into the .env file in your main project directory:
.env
DB_DATABASE=trivia
DB_USERNAME=trivia
DB_PASSWORD=trivia
Create a Simple Laravel API
Now that your database is configured, let’s build the API. Your Laravel API will be quite simple, it will contain just one entity (a Player). Let’s create a migration and a database model for it:
php artisan make:model Player -m
Model created successfully.
Created Migration: 2018_10_08_094351_create_players_table
Put the code that creates the database table in the up() method of the migration:
database/migrations/2018_10_08_094351_create_players_table.php
public function up()
{
Schema::create('players', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->integer('answers')->default(0);
$table->integer('points')->default(0);
$table->timestamps();
});
}
Next, run the migration to apply it to your database:
php artisan migrate
At this point, you may notice that you already have a model class, app/Player.php, but it’s empty. You need to tell Laravel which fields can be mass-assigned when creating or updating records. You’ll do this via the $fillable attribute of the model class:
app/Player.php
class Player extends Model
{
protected $fillable = ['name', 'answers', 'points'];
}
Laravel 5.6 introduced the concept of API resources which greatly simplified the way REST APIs are created in Laravel. The API resource classes take care of the transformation of our data to a JSON representation. You’ll need two resources for the API: a Player (dealing with an individual player), and a PlayerCollection (dealing with a collection of players).
php artisan make:resource Player
php artisan make:resource PlayerCollection
The transformation is defined in the toArray() function of the resource class:
app/Http/Resources/Player.php
public function toArray($request)
{
return [
'id' => $this->id,
'name' => $this->name,
'answers' => (int) $this->answers,
'points' => (int) $this->points,
'created_at' => $this->created_at,
'updated_at' => $this->updated_at,
];
}
app/Http/Resources/PlayerCollection.php
public function toArray($request)
{
return [
'data' => $this->collection
];
}
With that out of the way, you can now create the routes and controller for the REST API.
php artisan make:controller PlayerController
routes/api.php
Route::get('/players', 'PlayerController@index');
Route::get('/players/{id}', 'PlayerController@show');
Route::post('/players', 'PlayerController@store');
Route::post('/players/{id}/answers', 'PlayerController@answer');
Route::delete('/players/{id}', 'PlayerController@delete');
Route::delete('/players/{id}/answers', 'PlayerController@resetAnswers');
app/Http/Controllers/PlayerController.php
...
use App\Player;
use App\Http\Resources\Player as PlayerResource;
use App\Http\Resources\PlayerCollection;
...
class PlayerController extends Controller
{
public function index()
{
return new PlayerCollection(Player::all());
}
public function show($id)
{
return new PlayerResource(Player::findOrFail($id));
}
public function store(Request $request)
{
$request->validate([
'name' => 'required|max:255',
]);
$player = Player::create($request->all());
return (new PlayerResource($player))
->response()
->setStatusCode(201);
}
public function answer($id, Request $request)
{
$request->merge(['correct' => (bool) json_decode($request->get('correct'))]);
$request->validate([
'correct' => 'required|boolean'
]);
$player = Player::findOrFail($id);
$player->answers++;
$player->points = ($request->get('correct')
? $player->points + 1
: $player->points - 1);
$player->save();
return new PlayerResource($player);
}
public function delete($id)
{
$player = Player::findOrFail($id);
$player->delete();
return response()->json(null, 204);
}
public function resetAnswers($id)
{
$player = Player::findOrFail($id);
$player->answers = 0;
$player->points = 0;
return new PlayerResource($player);
}
}
You have to enable CORS so you can access your API from the frontend application:
composer require barryvdh/laravel-cors
app/Http/Kernel.php
protected $middlewareGroups = [
'web' => [
...
\Barryvdh\Cors\HandleCors::class,
],
'api' => [
...
\Barryvdh\Cors\HandleCors::class,
],
];
Your API allows you to retrieve all players or a specific player, add/delete players, mark answers as right/wrong, and reset a player’s score. There’s also a validation of the requests and the code generates JSON responses with the appropriate HTTP status codes with small amount of code.
To test the API, just add some dummy data to the database (use the Faker library to automate this process). After that, you can access these URLs and inspect the responses:
- It allows you to separate your backend and frontend and deploy them independently, using different strategies and schedules for testing and deployment
- You can deploy your frontend as a static application to a CDN and achieve virtually unlimited scaling for a fraction of the cost of hosting it together with the backend
- This structure allows developers to work on just the API or just the frontend without needing access to the source code of the other part of the system (this is still possible to achieve if the projects are integrated, but it’s a bit of a headache to set up) making it an ideal architecture for large teams
Testing the POST/PUT/DELETE requests is a bit more involved and requires an external tool (for example, cURL or Postman). You also need to make sure that the following headers are sent with each request:
Accept: “application/json”
This header tells Laravel to return any validation errors in JSON format.
Install Vue and Set up the Frontend Application
You will install vue-cli and create a new Vue.js project using the default configuration. You’ll also add Vue Router, Axios, and the Okta authentication+authorization library to the project:
npm install -g @vue/cli
vue create trivia-web-client-vue
cd trivia-web-client-vue
yarn add --save vue-router axios @okta/okta-vue
yarn serve
Loading http://localhost:8080/ now shows the default VueJS app.
Create a Menu with Routing in the Vue Frontend
Remove the default content first so you will have a nice blank page: Delete src/components/HelloWorld.vue and src/App.vue, and modify src/main.js:
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.config.productionTip = false
Vue.use(VueRouter)
import Dashboard from './components/Dashboard.vue';
const routes = [
{ path: '/', component: Dashboard },
]
const router = new VueRouter({
mode: 'history',
routes
})
new Vue({
router,
render: h => h(Dashboard)
}).$mount('#app')
Create a new file components/Dashboard.vue:
components/Dashboard.vue
<template>
<h1>This is the dashboard</h1>
</template>
<script>
</script>
It doesn’t look very nice with the default browser font. Let’s improve it by loading the Bulma CSS framework from a CDN:
public/index.html
...
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
Add Authentication to the Vue Frontend
Great! Now you can add your menu and routing, and implement a protected ‘Trivia Game’ route that requires authentication:
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.config.productionTip = false
Vue.use(VueRouter)
import Dashboard from './components/Dashboard.vue'
import Auth from '@okta/okta-vue'
Vue.use(Auth, {
issuer: 'https://{yourOktaDomain}/oauth2/default',
client_id: '{yourClientId}',
redirect_uri: 'http://localhost:8080/implicit/callback',
scope: 'openid profile email'
})
const routes = [
{ path: '/implicit/callback', component: Auth.handleCallback() },
{ path: '/', component: Dashboard},
]
const router = new VueRouter({
mode: 'history',
routes
})
new Vue({
router,
render: h => h(Dashboard)
}).$mount('#app')
Don’t forget to substitute your own Okta domain and Client ID! You also need to add a menu with a ‘Trivia Game’ link (only if authenticated) and Login/Logout buttons to the Dashboard.
main.js
...
import TriviaGame from './components/TriviaGame.vue'
const routes = [
{ path: '/implicit/callback', component: Auth.handleCallback() },
{ path: '/trivia', component: TriviaGame }
]
...
components/TriviaGame.vue
<template>
<h1>This is the trivia game</h1>
</template>
<script>
</script>
components/Dashboard.vue
<template>
<div style="text-align:center">
<section class="section">
<div class="container">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-menu">
<div class="navbar-item">
<router-link to="/" class="navbar-item">Home</router-link>
<router-link v-if='authenticated' to="/trivia" class="navbar-item">Trivia Game</router-link>
<a class="button is-light" v-if='authenticated' v-on:click='logout' id='logout-button'> Logout </a>
<a class="button is-light" v-else v-on:click='login' id='login-button'> Login </a>
</div>
</div>
</nav>
<router-view></router-view>
</div>
</section>
</div>
</template>
<script>
export default {
data: function () {
return {
authenticated: false
}
},
created () {
this.isAuthenticated()
},
watch: {
// Everytime the route changes, check for auth status
'$route': 'isAuthenticated'
},
methods: {
async isAuthenticated () {
this.authenticated = await this.$auth.isAuthenticated()
},
login () {
this.$auth.loginRedirect('/')
},
async logout () {
await this.$auth.logout()
await this.isAuthenticated()
// Navigate back to home
this.$router.push({ path: '/' })
}
}
}
</script>
The app now contains a navbar with placeholder pages for Home, Trivia Game (only available when logged in), and the Login or Logout button (depending on the login state). The Login/Logout actions work through Okta. You can now proceed with the implementation of the Trivia Game and connecting the backend API.
Get the List of Players from the Laravel API
Next up you’ll be adding a new Vue component to load the list of players from the Laravel API.
You’ll create a new src/config.js file and define our base API url there:
src/config.js
export const API_BASE_URL = 'http://localhost:8000/api';
You can now modify your TriviaGame.vue component:
components/TriviaGame.vue
<template>
<div>
<div v-if="isLoading">Loading players...</div>
<div v-else>
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Answers</th>
<th>Points</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<template v-for="player in players">
<tr v-bind:key="player.id">
<td>{{ player.id }}</td>
<td>{{ player.name }}</td>
<td>{{ player.answers }}</td>
<td>{{ player.points }}</td>
<td>Action buttons</td>
</tr>
</template>
</tbody>
</table>
<a class="button is-primary">Add Player</a>
</div>
</div>
</template>
<script>
import axios from 'axios'
import { API_BASE_URL } from '../config'
export default {
data() {
return {
isLoading: true,
players: {}
}
},
async created () {
axios.defaults.headers.common['Authorization'] = `Bearer ${await this.$auth.getAccessToken()}`
try {
const response = await axios.get(API_BASE_URL + '/players')
this.players = response.data.data
this.isLoading = false
} catch (e) {
// handle the authentication error here
}
}
}
</script>
Add Authentication to the Laravel API
You need to secure your backend API so it only allows requests that include a valid Okta token. You will install the Okta JWT Verifier package and add a custom middleware for API authentication:
composer require okta/jwt-verifier spomky-labs/jose guzzlehttp/psr7
php artisan make:middleware AuthenticateWithOkta
app/Http/Middleware/AuthenticateWithOkta.php
<?php
namespace App\Http\Middleware;
use Closure;
class AuthenticateWithOkta
{
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
* @return mixed
*/
public function handle($request, Closure $next)
{
if ($this->isAuthorized($request)) {
return $next($request);
} else {
return response('Unauthorized.', 401);
}
}
public function isAuthorized($request)
{
if (! $request->header('Authorization')) {
return false;
}
$authType = null;
$authData = null;
// Extract the auth type and the data from the Authorization header.
@list($authType, $authData) = explode(" ", $request->header('Authorization'), 2);
// If the Authorization Header is not a bearer type, return a 401.
if ($authType != 'Bearer') {
return false;
}
// Attempt authorization with the provided token
try {
// Setup the JWT Verifier
$jwtVerifier = (new \Okta\JwtVerifier\JwtVerifierBuilder())
->setAdaptor(new \Okta\JwtVerifier\Adaptors\SpomkyLabsJose())
->setAudience('api://default')
->setClientId('{yourClientId}')
->setIssuer('{yourIssuerUrl}')
->build();
// Verify the JWT from the Authorization Header.
$jwt = $jwtVerifier->verify($authData);
} catch (\Exception $e) {
// You encountered an error, return a 401.
return false;
}
return true;
}
}
Of course, you need to replace the client ID and issuer URL with your own! It’s also preferable to extract these variables into the .env file. They are not secrets and they are visible in the frontend application so it’s not a security concern to keep them in the repo, but it’s not convenient if you have multiple environments.
app/Http/Kernel.php
protected $middlewareGroups = [
'web' => [
...
],
'api' => [
...
\App\Http\Middleware\AuthenticateWithOkta::class,
],
];
If you did everything correctly, http://localhost:8000/api/players should now show you an ‘Unauthorized.’ message but loading the list of players in the Vue frontend should work fine (when you are logged in).
Create a New Player Component in Vue
Next, replace the ‘Add Player’ button placeholder with a form to add a new player.
components/TriviaGame.vue
Replace
<a class="button is-primary">Add Player</a>
with:
<player-form @completed="addPlayer"></player-form>
Add to the <script> section:
import PlayerForm from './PlayerForm.vue'
export default {
components: {
PlayerForm
},
...
methods: {
addPlayer(player) {
this.players.push(player)
}
}
Create a new component PlayerForm.vue:
components/PlayerForm.vue
<template>
<form @submit.prevent="onSubmit">
<span class="help is-danger" v-text="errors"></span>
<div class="field">
<div class="control">
<input class="input" type="name" placeholder="enter player name..." v-model="name" @keydown="errors = ''">
</div>
</div>
<button class="button is-primary" v-bind:class="{ 'is-loading' : isLoading }">Add Player</button>
</form>
</template>
<script>
import axios from 'axios'
import { API_BASE_URL } from '../config'
export default {
data() {
return {
name: '',
errors: '',
isLoading: false
}
},
methods: {
onSubmit() {
this.isLoading = true
this.postPlayer()
},
async postPlayer() {
axios.defaults.headers.common['Authorization'] = `Bearer ${await this.$auth.getAccessToken()}`
axios.post(API_BASE_URL + '/players', this.$data)
.then(response => {
this.name = ''
this.isLoading = false
this.$emit('completed', response.data.data)
})
.catch(error => {
// handle authentication and validation errors here
this.errors = error.response.data.errors
this.isLoading = false
})
}
}
}
</script>
It’s now possible to add more players to our trivia game.
Add a ‘Delete Player’ Button to the Vue Application
Next you’ll replace the ‘Action Buttons’ placeholder with a button that actually deletes the player.
components/TriviaGame.vue
Replace
<td>Action buttons</td>
with:
<td>
<button class="button is-primary" v-bind:class="{ 'is-loading' : isDeleting(player.id) }" @click="deletePlayer(player.id)">Delete Player</button>
</td>
Modify the <script> section:
...
import Vue from 'vue'
...
export default {
...
methods: {
...
isDeleting(id) {
let index = this.players.findIndex(player => player.id === id)
return this.players[index].isDeleting
},
async deletePlayer(id) {
let index = this.players.findIndex(player => player.id === id)
Vue.set(this.players[index], 'isDeleting', true)
await axios.delete(API_BASE_URL + '/players/' + id)
this.players.splice(index, 1)
}
}
}
Connect a Trivia Question Service to Vue
In order to save time, you’ll use a public API for retrieving trivia questions instead of building out a question database from scratch. The service provides a URL that returns a different trivia question every time it’s requested. Define the URL in the config.js file and you’ll get an initial question when the Trivia Game page is loaded. Then you’ll modify the Trivia Game component to include a card with the question and answer:
src/config.js
...
export const TRIVIA_ENDPOINT = 'http://jservice.io/api/random?count=1';
components/TriviaGame.vue (pasting the full contents of the file)
<template>
<div class="columns">
<div class="column" v-if="isLoading">Loading players...</div>
<div class="column" v-else>
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Answers</th>
<th>Points</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<template v-for="player in players">
<tr v-bind:key="player.id">
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<button class="button is-primary" v-bind:class="{ 'is-loading' : isDeleting(player.id) }" @click="deletePlayer(player.id)">Delete Player</button>
</td>
</tr>
</template>
</tbody>
</table>
<player-form @completed="addPlayer"></player-form>
</div>
<div class="column">
<div class="card" v-if="question">
<div class="card-content">
<button class="button is-primary" @click="getQuestion()">Refresh Question</button>
<p class="title">
</p>
<p class="subtitle">
</p>
</div>
<footer class="card-footer">
<p class="card-footer-item">
<span>Correct answer: </span>
</p>
</footer>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import { API_BASE_URL, TRIVIA_ENDPOINT } from '../config'
import PlayerForm from './PlayerForm.vue'
import Vue from 'vue'
export default {
components: {
PlayerForm
},
data() {
return {
isLoading: true,
question: null,
players: {}
}
},
async created () {
this.getQuestion()
axios.defaults.headers.common['Authorization'] = `Bearer ${await this.$auth.getAccessToken()}`
try {
const response = await axios.get(API_BASE_URL + '/players')
this.players = response.data.data
this.isLoading = false
} catch (e) {
// handle the authentication error here
}
},
methods: {
async getQuestion() {
delete axios.defaults.headers.common.Authorization
this.doGetQuestion()
axios.defaults.headers.common['Authorization'] = `Bearer ${await this.$auth.getAccessToken()}`
},
async doGetQuestion() {
try {
const response = await axios.get(TRIVIA_ENDPOINT, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
this.question = response.data[0]
} catch (e) {
// handle errors here
}
},
addPlayer(player) {
this.players.push(player)
},
isDeleting(id) {
let index = this.players.findIndex(player => player.id === id)
return this.players[index].isDeleting
},
async deletePlayer(id) {
let index = this.players.findIndex(player => player.id === id)
Vue.set(this.players[index], 'isDeleting', true)
await axios.delete(API_BASE_URL + '/players/' + id)
this.players.splice(index, 1)
}
}
}
</script>
Add Buttons in Vue to Indicate Right and Wrong Answers
Now, let’s add two more buttons next to the Delete Player button and implement the handlers:
components/TriviaGame.vue
...
<td>
<button class="button is-primary" v-bind:class="{ 'is-loading' : isCountUpdating(player.id) }" @click="answer(player.id, true)">(+1) Right</button>
<button class="button is-primary" v-bind:class="{ 'is-loading' : isCountUpdating(player.id) }" @click="answer(player.id, false)">(-1) Wrong</button>
<button class="button is-primary" v-bind:class="{ 'is-loading' : isDeleting(player.id) }" @click="deletePlayer(player.id)">Delete Player</button>
</td>
...
methods: {
...
isCountUpdating(id) {
let index = this.players.findIndex(player => player.id === id)
return this.players[index].isCountUpdating
},
async answer(id, isCorrectAnswer) {
let data = {
correct: isCorrectAnswer
}
let index = this.players.findIndex(player => player.id === id)
Vue.set(this.players[index], 'isCountUpdating', true)
const response = await axios.post(API_BASE_URL + '/players/' + id + '/answers', data)
this.players[index].answers = response.data.data.answers
this.players[index].points = response.data.data.points
this.players[index].isCountUpdating = false
}
}
The game is complete now! You now have a basic Laravel API that returns trivia questions to authenticated requests, and a Vue front-end that can log users in and make authenticated requests to the Laravel API.
This is a great start, but there is of course room for improvement. You can improve the code by extracting the common API boilerplate code (retrieving the access token, sending the Authorization header, sending a request and receiving a response) into a service class.
You can find the full code here: https://github.com/oktadeveloper/okta-php-laravel-vue-crud-example
Learn More
☞ Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
☞ Nuxt.js - Vue.js on Steroids
☞ The Complete JavaScript Course 2018: Build Real Projects!
☞ PHP with Laravel for beginners - Become a Master in Laravel
☞ Laravel for RESTful: Build Your RESTful API with Laravel
#javascript #php #laravel #vue-js
What is GEEK
Buddha Community
1600583123
8 Popular Websites That Use The Vue.JS Framework
In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.
Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.
This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.
Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.
Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.
“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You
#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js
1595059664
How long does it take to develop/build an app?
With more of us using smartphones, the popularity of mobile applications has exploded. In the digital era, the number of people looking for products and services online is growing rapidly. Smartphone owners look for mobile applications that give them quick access to companies’ products and services. As a result, mobile apps provide customers with a lot of benefits in just one device.
Likewise, companies use mobile apps to increase customer loyalty and improve their services. Mobile Developers are in high demand as companies use apps not only to create brand awareness but also to gather information. For that reason, mobile apps are used as tools to collect valuable data from customers to help companies improve their offer.
There are many types of mobile applications, each with its own advantages. For example, native apps perform better, while web apps don’t need to be customized for the platform or operating system (OS). Likewise, hybrid apps provide users with comfortable user experience. However, you may be wondering how long it takes to develop an app.
To give you an idea of how long the app development process takes, here’s a short guide.
App Idea & Research
_Average time spent: two to five weeks _
This is the initial stage and a crucial step in setting the project in the right direction. In this stage, you brainstorm ideas and select the best one. Apart from that, you’ll need to do some research to see if your idea is viable. Remember that coming up with an idea is easy; the hard part is to make it a reality.
All your ideas may seem viable, but you still have to run some tests to keep it as real as possible. For that reason, when Web Developers are building a web app, they analyze the available ideas to see which one is the best match for the targeted audience.
Targeting the right audience is crucial when you are developing an app. It saves time when shaping the app in the right direction as you have a clear set of objectives. Likewise, analyzing how the app affects the market is essential. During the research process, App Developers must gather information about potential competitors and threats. This helps the app owners develop strategies to tackle difficulties that come up after the launch.
The research process can take several weeks, but it determines how successful your app can be. For that reason, you must take your time to know all the weaknesses and strengths of the competitors, possible app strategies, and targeted audience.
The outcomes of this stage are app prototypes and the minimum feasible product.
#android app #frontend #ios app #minimum viable product (mvp) #mobile app development #web development #android app development #app development #app development for ios and android #app development process #ios and android app development #ios app development #stages in app development
1595491178
Best Electric Bikes and Scooters for Rental Business or Campus Facility
The electric scooter revolution has caught on super-fast taking many cities across the globe by storm. eScooters, a renovated version of old-school scooters now turned into electric vehicles are an environmentally friendly solution to current on-demand commute problems. They work on engines, like cars, enabling short traveling distances without hassle. The result is that these groundbreaking electric machines can now provide faster transport for less — cheaper than Uber and faster than Metro.
Since they are durable, fast, easy to operate and maintain, and are more convenient to park compared to four-wheelers, the eScooters trend has and continues to spike interest as a promising growth area. Several companies and universities are increasingly setting up shop to provide eScooter services realizing a would-be profitable business model and a ready customer base that is university students or residents in need of faster and cheap travel going about their business in school, town, and other surrounding areas.
Electric Scooters Trends and Statistics
In many countries including the U.S., Canada, Mexico, U.K., Germany, France, China, Japan, India, Brazil and Mexico and more, a growing number of eScooter users both locals and tourists can now be seen effortlessly passing lines of drivers stuck in the endless and unmoving traffic.
A recent report by McKinsey revealed that the E-Scooter industry will be worth― $200 billion to $300 billion in the United States, $100 billion to $150 billion in Europe, and $30 billion to $50 billion in China in 2030. The e-Scooter revenue model will also spike and is projected to rise by more than 20% amounting to approximately $5 billion.
And, with a necessity to move people away from high carbon prints, traffic and congestion issues brought about by car-centric transport systems in cities, more and more city planners are developing more bike/scooter lanes and adopting zero-emission plans. This is the force behind the booming electric scooter market and the numbers will only go higher and higher.
Companies that have taken advantage of the growing eScooter trend develop an appthat allows them to provide efficient eScooter services. Such an app enables them to be able to locate bike pick-up and drop points through fully integrated google maps.
List of Best Electric Bikes for Rental Business or Campus Facility 2020:
It’s clear that e scooters will increasingly become more common and the e-scooter business model will continue to grab the attention of manufacturers, investors, entrepreneurs. All this should go ahead with a quest to know what are some of the best electric bikes in the market especially for anyone who would want to get started in the electric bikes/scooters rental business.
We have done a comprehensive list of the best electric bikes! Each bike has been reviewed in depth and includes a full list of specs and a photo.
Billy eBike
https://www.kickstarter.com/projects/enkicycles/billy-were-redefining-joyrides
To start us off is the Billy eBike, a powerful go-anywhere urban electric bike that’s specially designed to offer an exciting ride like no other whether you want to ride to the grocery store, cafe, work or school. The Billy eBike comes in 4 color options – Billy Blue, Polished aluminium, Artic white, and Stealth black.
Price: $2490
Available countries
Available in the USA, Europe, Asia, South Africa and Australia.This item ships from the USA. Buyers are therefore responsible for any taxes and/or customs duties incurred once it arrives in your country.
Features
- Control – Ride with confidence with our ultra-wide BMX bars and a hyper-responsive twist throttle.
- Stealth- Ride like a ninja with our Gates carbon drive that’s as smooth as butter and maintenance-free.
- Drive – Ride further with our high torque fat bike motor, giving a better climbing performance.
- Accelerate – Ride quicker with our 20-inch lightweight cutout rims for improved acceleration.
- Customize – Ride your own way with 5 levels of power control. Each level determines power and speed.
- Flickable – Ride harder with our BMX /MotoX inspired geometry and lightweight aluminum package
Specifications
- Maximum speed: 20 mph (32 km/h)
- Range per charge: 41 miles (66 km)
- Maximum Power: 500W
- Motor type: Fat Bike Motor: Bafang RM G060.500.DC
- Load capacity: 300lbs (136kg)
- Battery type: 13.6Ah Samsung lithium-ion,
- Battery capacity: On/off-bike charging available
- Weight: w/o batt. 48.5lbs (22kg), w/ batt. 54lbs (24.5kg)
- Front Suspension: Fully adjustable air shock, preload/compression damping /lockout
- Rear Suspension: spring, preload adjustment
- Built-in GPS
Why Should You Buy This?
- Riding fun and excitement
- Better climbing ability and faster acceleration.
- Ride with confidence
- Billy folds for convenient storage and transportation.
- Shorty levers connect to disc brakes ensuring you stop on a dime
- belt drives are maintenance-free and clean (no oil or lubrication needed)
**Who Should Ride Billy? **
Both new and experienced riders
**Where to Buy? **Local distributors or ships from the USA.
Genze 200 series e-Bike
Featuring a sleek and lightweight aluminum frame design, the 200-Series ebike takes your riding experience to greater heights. Available in both black and white this ebike comes with a connected app, which allows you to plan activities, map distances and routes while also allowing connections with fellow riders.
Price: $2099.00
Available countries
The Genze 200 series e-Bike is available at GenZe retail locations across the U.S or online via GenZe.com website. Customers from outside the US can ship the product while incurring the relevant charges.
Features
- 2 Frame Options
- 2 Sizes
- Integrated/Removable Battery
- Throttle and Pedal Assist Ride Modes
- Integrated LCD Display
- Connected App
- 24 month warranty
- GPS navigation
- Bluetooth connectivity
Specifications
- Maximum speed: 20 mph with throttle
- Range per charge: 15-18 miles w/ throttle and 30-50 miles w/ pedal assist
- Charging time: 3.5 hours
- Motor type: Brushless Rear Hub Motor
- Gears: Microshift Thumb Shifter
- Battery type: Removable Samsung 36V, 9.6AH Li-Ion battery pack
- Battery capacity: 36V and 350 Wh
- Weight: 46 pounds
- Derailleur: 8-speed Shimano
- Brakes: Dual classic
- Wheels: 26 x 20 inches
- Frame: 16, and 18 inches
- Operating Mode: Analog mode 5 levels of Pedal Assist Throttle Mode
Norco from eBikestore
https://ebikestore.com/shop/norco-vlt-s2/
The Norco VLT S2 is a front suspension e-Bike with solid components alongside the reliable Bosch Performance Line Power systems that offer precise pedal assistance during any riding situation.
Price: $2,699.00
Available countries
This item is available via the various Norco bikes international distributors.
Features
- VLT aluminum frame- for stiffness and wheel security.
- Bosch e-bike system – for their reliability and performance.
- E-bike components – for added durability.
- Hydraulic disc brakes – offer riders more stopping power for safety and control at higher speeds.
- Practical design features – to add convenience and versatility.
Specifications
- Maximum speed: KMC X9 9spd
- Motor type: Bosch Active Line
- Gears: Shimano Altus RD-M2000, SGS, 9 Speed
- Battery type: Power Pack 400
- Battery capacity: 396Wh
- Suspension: SR Suntour suspension fork
- Frame: Norco VLT, Aluminum, 12x142mm TA Dropouts
Bodo EV
http://www.bodoevs.com/bodoev/products_show.asp?product_id=13
Manufactured by Bodo Vehicle Group Limited, the Bodo EV is specially designed for strong power and extraordinary long service to facilitate super amazing rides. The Bodo Vehicle Company is a striking top in electric vehicles brand field in China and across the globe. Their Bodo EV will no doubt provide your riders with high-level riding satisfaction owing to its high-quality design, strength, breaking stability and speed.
Price: $799
Available countries
This item ships from China with buyers bearing the shipping costs and other variables prior to delivery.
Features
- Reliable
- Environment friendly
- Comfortable riding
- Fashionable
- Economical
- Durable – long service life
- Braking stability
- LED lighting technology
Specifications
- Maximum speed: 45km/h
- Range per charge: 50km per person
- Charging time: 8 hours
- Maximum Power: 3000W
- Motor type: Brushless DC Motor
- Load capacity: 100kg
- Battery type: Lead-acid battery
- Battery capacity: 60V 20AH
- Weight: w/o battery 47kg
#android app #autorent #entrepreneurship #ios app #minimum viable product (mvp) #mobile app development #news #app like bird #app like bounce #app like lime #autorent #best electric bikes 2020 #best electric bikes for rental business #best electric kick scooters 2020 #best electric kickscooters for rental business #best electric scooters 2020 #best electric scooters for rental business #bird scooter business model #bird scooter rental #bird scooter rental cost #bird scooter rental price #clone app like bird #clone app like bounce #clone app like lime #electric rental scooters #electric scooter company #electric scooter rental business #how do you start a moped #how to start a moped #how to start a scooter rental business #how to start an electric company #how to start electric scooterrental business #lime scooter business model #scooter franchise #scooter rental business #scooter rental business for sale #scooter rental business insurance #scooters franchise cost #white label app like bird #white label app like bounce #white label app like lime
1595494844
How to start an electric scooter facility/fleet in a university campus/IT park
Are you leading an organization that has a large campus, e.g., a large university? You are probably thinking of introducing an electric scooter/bicycle fleet on the campus, and why wouldn’t you?
Introducing micro-mobility in your campus with the help of such a fleet would help the people on the campus significantly. People would save money since they don’t need to use a car for a short distance. Your campus will see a drastic reduction in congestion, moreover, its carbon footprint will reduce.
Micro-mobility is relatively new though and you would need help. You would need to select an appropriate fleet of vehicles. The people on your campus would need to find electric scooters or electric bikes for commuting, and you need to provide a solution for this.
To be more specific, you need a short-term electric bike rental app. With such an app, you will be able to easily offer micro-mobility to the people on the campus. We at Devathon have built Autorent exactly for this.
What does Autorent do and how can it help you? How does it enable you to introduce micro-mobility on your campus? We explain these in this article, however, we will touch upon a few basics first.
Micro-mobility: What it is
You are probably thinking about micro-mobility relatively recently, aren’t you? A few relevant insights about it could help you to better appreciate its importance.
Micro-mobility is a new trend in transportation, and it uses vehicles that are considerably smaller than cars. Electric scooters (e-scooters) and electric bikes (e-bikes) are the most popular forms of micro-mobility, however, there are also e-unicycles and e-skateboards.
You might have already seen e-scooters, which are kick scooters that come with a motor. Thanks to its motor, an e-scooter can achieve a speed of up to 20 km/h. On the other hand, e-bikes are popular in China and Japan, and they come with a motor, and you can reach a speed of 40 km/h.
You obviously can’t use these vehicles for very long commutes, however, what if you need to travel a short distance? Even if you have a reasonable public transport facility in the city, it might not cover the route you need to take. Take the example of a large university campus. Such a campus is often at a considerable distance from the central business district of the city where it’s located. While public transport facilities may serve the central business district, they wouldn’t serve this large campus. Currently, many people drive their cars even for short distances.
As you know, that brings its own set of challenges. Vehicular traffic adds significantly to pollution, moreover, finding a parking spot can be hard in crowded urban districts.
Well, you can reduce your carbon footprint if you use an electric car. However, electric cars are still new, and many countries are still building the necessary infrastructure for them. Your large campus might not have the necessary infrastructure for them either. Presently, electric cars don’t represent a viable option in most geographies.
As a result, you need to buy and maintain a car even if your commute is short. In addition to dealing with parking problems, you need to spend significantly on your car.
All of these factors have combined to make people sit up and think seriously about cars. Many people are now seriously considering whether a car is really the best option even if they have to commute only a short distance.
This is where micro-mobility enters the picture. When you commute a short distance regularly, e-scooters or e-bikes are viable options. You limit your carbon footprints and you cut costs!
Businesses have seen this shift in thinking, and e-scooter companies like Lime and Bird have entered this field in a big way. They let you rent e-scooters by the minute. On the other hand, start-ups like Jump and Lyft have entered the e-bike market.
Think of your campus now! The people there might need to travel short distances within the campus, and e-scooters can really help them.
How micro-mobility can benefit you
What advantages can you get from micro-mobility? Let’s take a deeper look into this question.
Micro-mobility can offer several advantages to the people on your campus, e.g.:
- Affordability: Shared e-scooters are cheaper than other mass transportation options. Remember that the people on your campus will use them on a shared basis, and they will pay for their short commutes only. Well, depending on your operating model, you might even let them use shared e-scooters or e-bikes for free!
- Convenience: Users don’t need to worry about finding parking spots for shared e-scooters since these are small. They can easily travel from point A to point B on your campus with the help of these e-scooters.
- Environmentally sustainable: Shared e-scooters reduce the carbon footprint, moreover, they decongest the roads. Statistics from the pilot programs in cities like Portland and Denver showimpressive gains around this key aspect.
- Safety: This one’s obvious, isn’t it? When people on your campus use small e-scooters or e-bikes instead of cars, the problem of overspeeding will disappear. you will see fewer accidents.
#android app #autorent #ios app #mobile app development #app like bird #app like bounce #app like lime #autorent #bird scooter business model #bird scooter rental #bird scooter rental cost #bird scooter rental price #clone app like bird #clone app like bounce #clone app like lime #electric rental scooters #electric scooter company #electric scooter rental business #how do you start a moped #how to start a moped #how to start a scooter rental business #how to start an electric company #how to start electric scooterrental business #lime scooter business model #scooter franchise #scooter rental business #scooter rental business for sale #scooter rental business insurance #scooters franchise cost #white label app like bird #white label app like bounce #white label app like lime
1623934363
How much does it cost to develop a basic taxi app?
Over the last few times, the thought of traditional taxi services has become almost non-existent. The progression of incredible taxi booking app development has taken over the market.
How Much Cost to build a basic taxi app?
As it comes to determine the cost of a taxi booking app development, It depends on four major factors.
• App Complexity
• A Number of App Platform
• Features and functionalities
• Development Region (Location)
Thus, If you choose to get an app developed by Indian developers, then the taxi booking app development cost for basic features for a single platform (Either Android or iOS) is going $15,000 to $30,000. Similarly cost for USA based location around $30,000 to $80,000. Adding more features, functionalities and platforms can take the cost upside.
• US-based Developers charge $50 to $150 per Hour
• India Based Developers $15 to $30 per Hour
• Europe based Developers Charge $40 to $100 per Hour
Key Features of Taxi Booking App Development
-
Taxi app for passengers
• User sign-up & login
• Edit profile
• Notifications
• Flexible payment options
• Real-time GPS-based vehicle tracking system
• An option of choosing a cab type
• Automatic fare calculation
• Booking history tracking
• Feedback -
Taxi app for drivers
• User sign-up & login
• Edit profile
• Booking confirmation
• Real-time GPS-based tracking
• Booking history tracking
• An earnings tracker
• Notifications
• Feedback -
Admin panel
• Trip details
• A live map
• Reports tracking and analytics
• Revenue management
• Driver management
• Passenger management
• Multi-language support
• Complaint management
• Notifications
Technology Stack for Taxi Booking App Development
Google Maps, Swift, Java, AWS, ExpressPay, Redis, Visa, Paystack, MTN, Stripe, PayPal, Android Studio, RDS, Twillo, Citrus, Braintree and many more.
Best Taxi Booking App Development Services provider Agency
AppClues Infotech has the best expertise to build a taxi booking app for various platforms like Android and iOS. They have a dedicated and highly skilled team of developers and designers that extremely help to make a custom taxi booking app as per your specific requirements.
They have 8+ years of having experienced in the mobile app development industry and completed 450+ projects successfully. Being a well-known mobile app development company in the USA they create a high-quality, productive and robust mobile app for tier esteem clients.
If you have taxi booking app development ideas the just share them with the AppClues Infotech team to get free consultation for your project.
#how much does it cost to build a basic taxi app #taxi app development #how to build a taxi booking app #taxi booking app builder #create your own taxi booking app #how to build a taxi app in 2021